Make Sky's EditableText mostly work

sky/examples/editor/editable_text.dart

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../../framework/fn.dart';
+import '../../framework/shell.dart' as shell;
+import 'dart:async';
+import 'dart:math';
+import 'editable_string.dart';
+import 'package:sky/services/keyboard/keyboard.mojom.dart';
+
+class EditableText extends Component {
+  static Style _style = new Style('''
+    display: paragraph;
+    padding: 10px;
+    height: 200px;
+    background-color: lightblue;'''
+  );
+
+  static Style _cusorStyle = new Style('''
+    display: inline-block;
+    width: 2px;
+    height: 1.2em;
+    vertical-align: top;
+    background-color: blue;'''
+  );
+
+  static Style _composingStyle = new Style('''
+    display: inline;
+    text-decoration: underline;'''
+  );
+
+  KeyboardServiceProxy _service;
+
+  EditableString _string;
+  Timer _cursorTimer;
+  bool _showCursor = true;
+
+  EditableText({Object key}) : super(key: key, stateful: true) {
+    _string = new EditableString(text: '', onChanged: _handleTextChanged);
+    events.listen('click', _handleClick);
+    events.listen('focus', _handleFocus);
+    events.listen('blur', _handleBlur);
+  }
+
+  void _handleTextChanged(EditableString string) {
+    setState(() {
+      _string = string;
+    });
+  }
+
+  void _handleClick(_) {
+    if (_service != null)
+      return;
+    _service = new KeyboardServiceProxy.unbound();
+    shell.requestService(_service);
+    _service.ptr.show(_string.stub);
+  }
+
+  void _handleFocus(_) {
+    print("_handleFocus");
+  }
+
+  void _handleBlur(_) {
+    print("_handleBlur");
+  }
+
+  void _cursorTick(Timer timer) {
+    setState(() {
+      _showCursor = !_showCursor;
+    });
+  }
+
+  void didMount() {
+    _cursorTimer = new Timer.periodic(
+        new Duration(milliseconds: 500), _cursorTick);
+  }
+
+  void didUnmount() {
+    _cursorTimer.stop();
+  }
+
+  Node build() {
+    List<Node> children = new List<Node>();
+
+    if (!_string.composing.isValid) {
+      children.add(new Text(_string.text));
+    } else {
+      String beforeComposing = _string.textBefore(_string.composing);
+      if (!beforeComposing.isEmpty)
+        children.add(new Text(beforeComposing));
+
+      String composing = _string.textInside(_string.composing);
+      if (!composing.isEmpty) {
+        children.add(new Container(
+          key: 'composing', 
+          style: _composingStyle,
+          children: [new Text(composing)]
+        ));
+      }
+
+      String afterComposing = _string.textAfter(_string.composing);
+      if (!afterComposing.isEmpty)
+        children.add(new Text(afterComposing));
+    }
+
+    if (_showCursor)
+      children.add(new Container(key: 'cursor', style: _cusorStyle));
+
+    return new Container(
+      style: _style,
+      children: children
+    );
+  }
+}