Split some helpers into separate js file

Also handle ctrl and meta better.

Change-Id: I2149f1dfaa4b0af58cae8d16ead5432d17e05916
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/404157
Reviewed-by: Mike Reed <reed@google.com>
diff --git a/modules/canvaskit/npm_build/extra.html b/modules/canvaskit/npm_build/extra.html
index ed3b9c4..1ea4dbc 100644
--- a/modules/canvaskit/npm_build/extra.html
+++ b/modules/canvaskit/npm_build/extra.html
@@ -46,6 +46,8 @@
 
 <script type="text/javascript" src="/node_modules/canvaskit/bin/canvaskit.js"></script>
 
+<script type="text/javascript" src="textapi_utils.js"></script>
+
 <script type="text/javascript" charset="utf-8">
 
   var CanvasKit = null;
@@ -273,85 +275,6 @@
     return surface;
   }
 
-    function MakeCursor(CanvasKit) {
-        const linePaint = new CanvasKit.Paint();
-        linePaint.setColor([0,0,1,1]);
-        linePaint.setStyle(CanvasKit.PaintStyle.Stroke);
-        linePaint.setStrokeWidth(2);
-        linePaint.setAntiAlias(true);
-
-        const pathPaint = new CanvasKit.Paint();
-        pathPaint.setColor([0,0,1,0.25]);
-        linePaint.setAntiAlias(true);
-
-        return {
-            _line_paint: linePaint,    // wrap in weak-ref so we can delete it?
-            _path_paint: pathPaint,
-            _x: 0,
-            _top: 0,
-            _bottom: 0,
-            _path: null,            // only use x,top,bottom if path is null
-            _draws_per_sec: 2,
-
-            // pass 0 for no-draw, pass inf. for always on
-            setBlinkRate: function(blinks_per_sec) {
-                this._draws_per_sec = blinks_per_sec;
-            },
-            place: function(x, top, bottom) {
-                this._x = x;
-                this._top = top;
-                this._bottom = bottom;
-
-                this._path = null;
-            },
-            setPath: function(path) {
-                this._path = path;
-            },
-            draw_before: function(canvas) {
-                if (this._path) {
-                    canvas.drawPath(this._path, this._path_paint);
-                }
-            },
-            draw_after: function(canvas) {
-                if (this._path) {
-                    return;
-                }
-                if (Math.floor(Date.now() * this._draws_per_sec / 1000) & 1) {
-                    canvas.drawLine(this._x, this._top, this._x, this._bottom, this._line_paint);
-                }
-            },
-        };
-    }
-
-    function MakeMouse() {
-        return {
-            _start_x: 0, _start_y: 0,
-            _curr_x:  0,  _curr_y: 0,
-            _active: false,
-
-            isActive: function() {
-                return this._active;
-            },
-            setDown: function(x, y) {
-                this._start_x = this._curr_x = x;
-                this._start_y = this._curr_y = y;
-                this._active = true;
-            },
-            setMove: function(x, y) {
-                this._curr_x = x;
-                this._curr_y = y;
-            },
-            setUp: function(x, y) {
-                this._curr_x = x;
-                this._curr_y = y;
-                this._active = false;
-            },
-            getPos: function() {
-                return [ this._start_x, this._start_y, this._curr_x, this._curr_y ];
-            },
-        };
-    }
-
     function ParagraphAPI2(CanvasKit, fontData) {
       if (!CanvasKit || !fontData) {
         return;
@@ -632,7 +555,6 @@
       };
 
       function keyhandler(e) {
-//          console.log(e.key, e.code);
           switch (e.key) {
               case 'ArrowLeft':  editor.moveDX(-1); break;
               case 'ArrowRight': editor.moveDX(1); break;
@@ -648,12 +570,11 @@
                 editor.deleteSelection();
                 break;
               case 'Shift':
-              case 'Control':
-              case 'Meta':
                 break;
               default:
-                e.preventDefault();
-                editor.insert(e.key);
+                if (!e.ctrlKey && !e.metaKey) {
+                    editor.insert(e.key);
+                }
                 break;
           }
       }
diff --git a/modules/canvaskit/npm_build/textapi_utils.js b/modules/canvaskit/npm_build/textapi_utils.js
new file mode 100644
index 0000000..6085922
--- /dev/null
+++ b/modules/canvaskit/npm_build/textapi_utils.js
@@ -0,0 +1,78 @@
+function MakeCursor(CanvasKit) {
+    const linePaint = new CanvasKit.Paint();
+    linePaint.setColor([0,0,1,1]);
+    linePaint.setStyle(CanvasKit.PaintStyle.Stroke);
+    linePaint.setStrokeWidth(2);
+    linePaint.setAntiAlias(true);
+
+    const pathPaint = new CanvasKit.Paint();
+    pathPaint.setColor([0,0,1,0.25]);
+    linePaint.setAntiAlias(true);
+
+    return {
+        _line_paint: linePaint,    // wrap in weak-ref so we can delete it?
+        _path_paint: pathPaint,
+        _x: 0,
+        _top: 0,
+        _bottom: 0,
+        _path: null,            // only use x,top,bottom if path is null
+        _draws_per_sec: 2,
+
+        // pass 0 for no-draw, pass inf. for always on
+        setBlinkRate: function(blinks_per_sec) {
+            this._draws_per_sec = blinks_per_sec;
+        },
+        place: function(x, top, bottom) {
+            this._x = x;
+            this._top = top;
+            this._bottom = bottom;
+
+            this._path = null;
+        },
+        setPath: function(path) {
+            this._path = path;
+        },
+        draw_before: function(canvas) {
+            if (this._path) {
+                canvas.drawPath(this._path, this._path_paint);
+            }
+        },
+        draw_after: function(canvas) {
+            if (this._path) {
+                return;
+            }
+            if (Math.floor(Date.now() * this._draws_per_sec / 1000) & 1) {
+                canvas.drawLine(this._x, this._top, this._x, this._bottom, this._line_paint);
+            }
+        },
+    };
+}
+
+function MakeMouse() {
+    return {
+        _start_x: 0, _start_y: 0,
+        _curr_x:  0,  _curr_y: 0,
+        _active: false,
+
+        isActive: function() {
+            return this._active;
+        },
+        setDown: function(x, y) {
+            this._start_x = this._curr_x = x;
+            this._start_y = this._curr_y = y;
+            this._active = true;
+        },
+        setMove: function(x, y) {
+            this._curr_x = x;
+            this._curr_y = y;
+        },
+        setUp: function(x, y) {
+            this._curr_x = x;
+            this._curr_y = y;
+            this._active = false;
+        },
+        getPos: function() {
+            return [ this._start_x, this._start_y, this._curr_x, this._curr_y ];
+        },
+    };
+}