@difizen/libro-codemirror 0.0.2-alpha.0

package/es/editor.js

@@ -0,0 +1,1126 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { insertNewlineAndIndent, redo as _redo, undo as _undo } from '@codemirror/commands';
+import { ensureSyntaxTree } from '@codemirror/language';
+import { Prec, EditorState, EditorSelection, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, EditorView } from '@codemirror/view';
+import { defaultSelectionStyle, defaultConfig } from '@difizen/libro-code-editor';
+import { findFirstArrayIndex, removeAllWhereFromArray } from '@difizen/libro-common';
+import { Disposable, Emitter } from '@difizen/mana-app';
+import { getOrigin, watch } from '@difizen/mana-app';
+import { v4 } from 'uuid';
+import { EditorConfiguration } from "./config.js";
+import { ensure } from "./mode.js";
+import { monitorPlugin } from "./monitor.js";
+
+/**
+ * The class name added to CodeMirrorWidget instances.
+ */
+var EDITOR_CLASS = 'jp-CodeMirrorEditor';
+
+/**
+ * The class name added to read only cell editor widgets.
+ */
+var READ_ONLY_CLASS = 'jp-mod-readOnly';
+
+/**
+ * The class name for the hover box for collaborator cursors.
+ */
+// const COLLABORATOR_CURSOR_CLASS = 'jp-CollaboratorCursor';
+
+/**
+ * The class name for the hover box for collaborator cursors.
+ */
+// const COLLABORATOR_HOVER_CLASS = 'jp-CollaboratorCursor-hover';
+
+/**
+ * The key code for the up arrow key.
+ */
+var UP_ARROW = 38;
+
+/**
+ * The key code for the down arrow key.
+ */
+var DOWN_ARROW = 40;
+
+/**
+ * The time that a collaborator name hover persists.
+ */
+// const HOVER_TIMEOUT = 1000;
+/**
+ * The default configuration options for an editor.
+ */
+
+// interface IYCodeMirrorBinding {
+//   text: Y.Text;
+//   awareness: Awareness | null;
+//   undoManager: Y.UndoManager | null;
+// }
+
+export var codeMirrorDefaultConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
+  mode: 'null',
+  mimetype: 'text/x-python',
+  theme: 'jupyter',
+  smartIndent: true,
+  electricChars: true,
+  keyMap: 'default',
+  extraKeys: null,
+  gutters: [],
+  fixedGutter: true,
+  showCursorWhenSelecting: false,
+  coverGutterNextToScrollbar: false,
+  dragDrop: true,
+  lineSeparator: null,
+  scrollbarStyle: 'native',
+  lineWiseCopyCut: true,
+  scrollPastEnd: false,
+  styleActiveLine: false,
+  styleSelectedText: true,
+  selectionPointer: false,
+  handlePaste: true,
+  lineWrap: 'off',
+  //
+  highlightActiveLineGutter: false,
+  highlightSpecialChars: true,
+  history: true,
+  drawSelection: true,
+  dropCursor: true,
+  allowMultipleSelections: true,
+  autocompletion: true,
+  rectangularSelection: true,
+  crosshairCursor: true,
+  highlightSelectionMatches: true,
+  foldGutter: true,
+  syntaxHighlighting: true,
+  jupyterKernelCompletion: true,
+  indentationMarkers: true,
+  hyperLink: true,
+  jupyterKernelTooltip: true,
+  tabEditorFunction: true,
+  lspCompletion: true,
+  lspTooltip: true,
+  lspLint: true,
+  placeholder: ''
+});
+export var CodeMirrorEditor = /*#__PURE__*/function () {
+  /**
+   * Construct a CodeMirror editor.
+   */
+  function CodeMirrorEditor(options) {
+    var _this = this;
+    _classCallCheck(this, CodeMirrorEditor);
+    this.handleTooltipChange = function (val) {
+      _this.modalChangeEmitter.fire(val);
+    };
+    /**
+     * Initialize the editor binding.
+     */
+    // protected _initializeEditorBinding(): void {
+    //   const sharedModel = this.model.sharedModel as models.IYText;
+    //   this._yeditorBinding = {
+    //     text: sharedModel.ysource,
+    //     awareness: sharedModel.awareness,
+    //     undoManager: sharedModel.undoManager,
+    //   };
+    // }
+    this.save = function () {
+      //
+    };
+    /**
+     * A signal emitted when either the top or bottom edge is requested.
+     */
+    this.edgeRequestedEmitter = new Emitter();
+    this.edgeRequested = this.edgeRequestedEmitter.event;
+    this.modalChangeEmitter = new Emitter();
+    this._selectionMarkers = {};
+    this._caretHover = null;
+    this._hoverTimeout = undefined;
+    this._hoverId = undefined;
+    this._keydownHandlers = new Array();
+    this._uuid = '';
+    this._isDisposed = false;
+    this._lastChange = null;
+    this._editorConfig = new EditorConfiguration(options);
+    var host = this.host = options.host;
+    host.classList.add(EDITOR_CLASS);
+    host.classList.add('jp-Editor');
+    host.addEventListener('focus', this, true);
+    host.addEventListener('blur', this, true);
+    host.addEventListener('scroll', this, true);
+    this._uuid = options.uuid || v4();
+
+    // State and effects for handling the selection marks
+    this._addMark = StateEffect.define();
+    this._removeMark = StateEffect.define();
+    this._markField = StateField.define({
+      create: function create() {
+        return Decoration.none;
+      },
+      update: function update(marks, transaction) {
+        var _marks = marks.map(transaction.changes);
+        var _iterator = _createForOfIteratorHelper(transaction.effects),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var ef = _step.value;
+            if (ef.is(_this._addMark)) {
+              var e = ef;
+              var decorations = _this._buildMarkDecoration(e.value.uuid, e.value.selections);
+              _marks = _marks.update({
+                add: decorations
+              });
+              _this._selectionMarkers[e.value.uuid] = decorations;
+            } else if (ef.is(_this._removeMark)) {
+              var _e = ef;
+              var _iterator2 = _createForOfIteratorHelper(ef.value.decorations),
+                _step2;
+              try {
+                var _loop = function _loop() {
+                  var rd = _step2.value;
+                  _marks = _marks.update({
+                    filter: function filter(from, to, value) {
+                      return !(from === rd.from && to === rd.to && value === rd.value);
+                    }
+                  });
+                };
+                for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+                  _loop();
+                }
+              } catch (err) {
+                _iterator2.e(err);
+              } finally {
+                _iterator2.f();
+              }
+              delete _this._selectionMarkers[_e.value.uuid];
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+        return _marks;
+      },
+      provide: function provide(f) {
+        return EditorView.decorations.from(f);
+      }
+    });
+
+    // Handle selection style.
+    var style = options.selectionStyle || {};
+    this._selectionStyle = _objectSpread(_objectSpread({}, defaultSelectionStyle), style);
+    var model = this._model = options.model;
+    var config = options.config || {};
+    var fullConfig = this._config = _objectSpread(_objectSpread(_objectSpread({}, codeMirrorDefaultConfig), config), {}, {
+      mimetype: options.model.mimeType
+    });
+
+    // this._initializeEditorBinding();
+
+    // Extension for handling DOM events
+    var domEventHandlers = EditorView.domEventHandlers({
+      keydown: function keydown(event) {
+        var index = findFirstArrayIndex(_this._keydownHandlers, function (handler) {
+          if (handler(_this, event) === true) {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        });
+        if (index === -1) {
+          return _this.onKeydown(event);
+        }
+        return false;
+      }
+    });
+    var updateListener = EditorView.updateListener.of(function (update) {
+      _this._onDocChanged(update);
+    });
+    this._editor = createEditor(host, fullConfig, this.model.value, this._editorConfig, [this._markField, Prec.high(domEventHandlers), updateListener, monitorPlugin({
+      onTooltipChange: this.handleTooltipChange
+    })]);
+
+    // every time the model is switched, we need to re-initialize the editor binding
+    // this.model.sharedModelSwitched.connect(this._initializeEditorBinding, this);
+
+    this._onMimeTypeChanged();
+    this._onCursorActivity();
+    // this._poll = new Poll({
+    //   factory: async () => {
+    //     this._checkSync();
+    //   },
+    //   frequency: { interval: 3000, backoff: false },
+    //   standby: () => {
+    //     // If changed, only stand by when hidden, otherwise always stand by.
+    //     return this._lastChange ? 'when-hidden' : true;
+    //   },
+    // });
+
+    watch(model, 'mimeType', this._onMimeTypeChanged);
+  }
+  _createClass(CodeMirrorEditor, [{
+    key: "uuid",
+    get:
+    /**
+     * The DOM node that hosts the editor.
+     */
+
+    /**
+     * The uuid of this editor;
+     */
+    function get() {
+      return this._uuid;
+    },
+    set: function set(value) {
+      this._uuid = value;
+    }
+  }, {
+    key: "onModalChange",
+    get: function get() {
+      return this.modalChangeEmitter.event;
+    }
+
+    /**
+     * The selection style of this editor.
+     */
+  }, {
+    key: "selectionStyle",
+    get: function get() {
+      return this._selectionStyle;
+    },
+    set: function set(value) {
+      this._selectionStyle = value;
+    }
+
+    /**
+     * Get the codemirror editor wrapped by the editor.
+     */
+  }, {
+    key: "editor",
+    get: function get() {
+      return this._editor;
+    }
+
+    /**
+     * Get the codemirror doc wrapped by the widget.
+     */
+  }, {
+    key: "doc",
+    get: function get() {
+      return this._editor.state.doc;
+    }
+
+    /**
+     * Get the number of lines in the editor.
+     */
+  }, {
+    key: "lineCount",
+    get: function get() {
+      return this.doc.lines;
+    }
+
+    /**
+     * Returns a model for this editor.
+     */
+  }, {
+    key: "model",
+    get: function get() {
+      return this._model;
+    }
+
+    /**
+     * The height of a line in the editor in pixels.
+     */
+  }, {
+    key: "lineHeight",
+    get: function get() {
+      return this._editor.defaultLineHeight;
+    }
+
+    /**
+     * The widget of a character in the editor in pixels.
+     */
+  }, {
+    key: "charWidth",
+    get: function get() {
+      return this._editor.defaultCharacterWidth;
+    }
+
+    /**
+     * Tests whether the editor is disposed.
+     */
+  }, {
+    key: "isDisposed",
+    get: function get() {
+      return this._isDisposed;
+    }
+
+    /**
+     * Dispose of the resources held by the widget.
+     */
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      if (this.isDisposed) {
+        return;
+      }
+      this._isDisposed = true;
+      this.host.removeEventListener('focus', this, true);
+      this.host.removeEventListener('blur', this, true);
+      this.host.removeEventListener('scroll', this, true);
+      this._keydownHandlers.length = 0;
+      // this._poll.dispose();
+      this.editor.destroy();
+    }
+
+    /**
+     * Get a config option for the editor.
+     */
+  }, {
+    key: "getOption",
+    value: function getOption(option) {
+      return this._config[option];
+    }
+
+    /**
+     * Set a config option for the editor.
+     */
+  }, {
+    key: "setOption",
+    value: function setOption(option, value) {
+      // Don't bother setting the option if it is already the same.
+      if (this._config[option] !== value) {
+        this._config[option] = value;
+        this._editorConfig.reconfigureExtension(this._editor, option, value);
+      }
+      if (option === 'readOnly') {
+        if (value === true) {
+          getOrigin(this._editor).dom.classList.add(READ_ONLY_CLASS);
+        } else {
+          getOrigin(this._editor).dom.classList.remove(READ_ONLY_CLASS);
+        }
+      }
+    }
+    /**
+     * Set config options for the editor.
+     *
+     * This method is preferred when setting several options. The
+     * options are set within an operation, which only performs
+     * the costly update at the end, and not after every option
+     * is set.
+     */
+  }, {
+    key: "setOptions",
+    value: function setOptions(options) {
+      this._config = _objectSpread(_objectSpread({}, this._config), options);
+      this._editorConfig.reconfigureExtensions(this._editor, options);
+    }
+  }, {
+    key: "injectExtension",
+    value: function injectExtension(ext) {
+      this._editorConfig.injectExtension(this._editor, ext);
+    }
+
+    /**
+     * Returns the content for the given line number.
+     */
+  }, {
+    key: "getLine",
+    value: function getLine(line) {
+      // TODO: CM6 remove +1 when CM6 first line number has propagated
+      var _line = line + 1;
+      return _line <= this.doc.lines ? this.doc.line(_line).text : undefined;
+    }
+
+    /**
+     * Find an offset for the given position.
+     */
+  }, {
+    key: "getOffsetAt",
+    value: function getOffsetAt(position) {
+      // TODO: CM6 remove +1 when CM6 first line number has propagated
+      return this.doc.line(position.line + 1).from + position.column;
+    }
+
+    /**
+     * Find a position for the given offset.
+     */
+  }, {
+    key: "getPositionAt",
+    value: function getPositionAt(offset) {
+      // TODO: CM6 remove -1 when CM6 first line number has propagated
+      var line = this.doc.lineAt(offset);
+      return {
+        line: line.number - 1,
+        column: offset - line.from
+      };
+    }
+
+    /**
+     * Undo one edit (if any undo events are stored).
+     */
+  }, {
+    key: "undo",
+    value: function undo() {
+      _undo({
+        state: getOrigin(this.state),
+        dispatch: this.editor.dispatch
+      });
+    }
+
+    /**
+     * Redo one undone edit.
+     */
+  }, {
+    key: "redo",
+    value: function redo() {
+      _redo({
+        state: getOrigin(this.state),
+        dispatch: this.editor.dispatch
+      });
+    }
+
+    /**
+     * Clear the undo history.
+     */
+  }, {
+    key: "clearHistory",
+    value: function clearHistory() {
+      // this._yeditorBinding?.undoManager?.clear();
+    }
+
+    /**
+     * Brings browser focus to this editor text.
+     */
+  }, {
+    key: "focus",
+    value: function focus() {
+      this._editor.focus();
+    }
+
+    /**
+     * Test whether the editor has keyboard focus.
+     */
+  }, {
+    key: "hasFocus",
+    value: function hasFocus() {
+      return this._editor.hasFocus;
+    }
+
+    /**
+     * Explicitly blur the editor.
+     */
+  }, {
+    key: "blur",
+    value: function blur() {
+      this._editor.contentDOM.blur();
+    }
+
+    /**
+     * Refresh the editor if it is focused;
+     * otherwise postpone refreshing till focusing.
+     */
+  }, {
+    key: "resizeToFit",
+    value: function resizeToFit() {
+      this._clearHover();
+    }
+  }, {
+    key: "state",
+    get: function get() {
+      return this._editor.state;
+    }
+  }, {
+    key: "firstLine",
+    value: function firstLine() {
+      // TODO: return 1 when CM6 first line number has propagated
+      return 0;
+    }
+  }, {
+    key: "lastLine",
+    value: function lastLine() {
+      return this.doc.lines - 1;
+    }
+  }, {
+    key: "cursorCoords",
+    value: function cursorCoords(where
+    // mode?: 'window' | 'page' | 'local',
+    ) {
+      var selection = this.state.selection.main;
+      var pos = where ? selection.from : selection.to;
+      var rect = this.editor.coordsAtPos(pos);
+      return rect;
+    }
+  }, {
+    key: "getRange",
+    value: function getRange(from, to
+    // separator?: string,
+    ) {
+      var fromOffset = this.getOffsetAt(this._toPosition(from));
+      var toOffset = this.getOffsetAt(this._toPosition(to));
+      return this.state.sliceDoc(fromOffset, toOffset);
+    }
+
+    /**
+     * Add a keydown handler to the editor.
+     *
+     * @param handler - A keydown handler.
+     *
+     * @returns A disposable that can be used to remove the handler.
+     */
+  }, {
+    key: "addKeydownHandler",
+    value: function addKeydownHandler(handler) {
+      var _this2 = this;
+      this._keydownHandlers.push(handler);
+      return Disposable.create(function () {
+        removeAllWhereFromArray(_this2._keydownHandlers, function (val) {
+          return val === handler;
+        });
+      });
+    }
+
+    /**
+     * Reveal the given position in the editor.
+     */
+  }, {
+    key: "revealPosition",
+    value: function revealPosition(position) {
+      var offset = this.getOffsetAt(position);
+      this._editor.dispatch({
+        effects: EditorView.scrollIntoView(offset)
+      });
+    }
+
+    /**
+     * Reveal the given selection in the editor.
+     */
+  }, {
+    key: "revealSelection",
+    value: function revealSelection(selection) {
+      var start = this.getOffsetAt(selection.start);
+      var end = this.getOffsetAt(selection.end);
+      this._editor.dispatch({
+        effects: EditorView.scrollIntoView(EditorSelection.range(start, end))
+      });
+    }
+
+    /**
+     * Get the window coordinates given a cursor position.
+     */
+  }, {
+    key: "getCoordinateForPosition",
+    value: function getCoordinateForPosition(position) {
+      var offset = this.getOffsetAt(position);
+      var rect = this.editor.coordsAtPos(offset);
+      return rect;
+    }
+    /**
+     * Get the cursor position given window coordinates.
+     *
+     * @param coordinate - The desired coordinate.
+     *
+     * @returns The position of the coordinates, or null if not
+     *   contained in the editor.
+     */
+  }, {
+    key: "getPositionForCoordinate",
+    value: function getPositionForCoordinate(coordinate) {
+      var offset = this.editor.posAtCoords({
+        x: coordinate.left,
+        y: coordinate.top
+      });
+      return this.getPositionAt(offset) || null;
+    }
+
+    /**
+     * Returns the primary position of the cursor, never `null`.
+     */
+  }, {
+    key: "getCursorPosition",
+    value: function getCursorPosition() {
+      var offset = this.state.selection.main.head;
+      return this.getPositionAt(offset);
+    }
+
+    /**
+     * Set the primary position of the cursor.
+     *
+     * #### Notes
+     * This will remove any secondary cursors.
+     */
+  }, {
+    key: "setCursorPosition",
+    value: function setCursorPosition(position
+    // options?: { bias?: number; origin?: string; scroll?: boolean },
+    ) {
+      var offset = this.getOffsetAt(position);
+      this.editor.dispatch({
+        selection: {
+          anchor: offset
+        },
+        scrollIntoView: true
+      });
+      // If the editor does not have focus, this cursor change
+      // will get screened out in _onCursorsChanged(). Make an
+      // exception for this method.
+      if (!this.editor.hasFocus) {
+        this.model.selections = this.getSelections();
+      }
+    }
+
+    /**
+     * Returns the primary selection, never `null`.
+     */
+  }, {
+    key: "getSelection",
+    value: function getSelection() {
+      return this.getSelections()[0];
+    }
+
+    /**
+     * Set the primary selection. This will remove any secondary cursors.
+     */
+  }, {
+    key: "setSelection",
+    value: function setSelection(selection) {
+      this.setSelections([selection]);
+    }
+
+    /**
+     * Gets the selections for all the cursors, never `null` or empty.
+     */
+  }, {
+    key: "getSelections",
+    value: function getSelections() {
+      var _this3 = this;
+      var selections = this.state.selection.ranges; //= [{anchor: number, head: number}]
+      if (selections.length > 0) {
+        var sel = selections.map(function (r) {
+          return {
+            anchor: _this3._toCodeMirrorPosition(_this3.getPositionAt(r.from)),
+            head: _this3._toCodeMirrorPosition(_this3.getPositionAt(r.to))
+          };
+        });
+        return sel.map(function (selection) {
+          return _this3._toSelection(selection);
+        });
+      }
+      var cursor = this._toCodeMirrorPosition(this.getPositionAt(this.state.selection.main.head));
+      var selection = this._toSelection({
+        anchor: cursor,
+        head: cursor
+      });
+      return [selection];
+    }
+
+    /**
+     * Sets the selections for all the cursors, should not be empty.
+     * Cursors will be removed or added, as necessary.
+     * Passing an empty array resets a cursor position to the start of a document.
+     */
+  }, {
+    key: "setSelections",
+    value: function setSelections(selections) {
+      var _this4 = this;
+      var sel = selections.length ? selections.map(function (r) {
+        return EditorSelection.range(_this4.getOffsetAt(r.start), _this4.getOffsetAt(r.end));
+      }) : [EditorSelection.range(0, 0)];
+      this.editor.dispatch({
+        selection: EditorSelection.create(sel)
+      });
+    }
+
+    /**
+     * Replaces the current selection with the given text.
+     *
+     * @param text The text to be inserted.
+     */
+  }, {
+    key: "replaceSelection",
+    value: function replaceSelection(text) {
+      this.editor.dispatch(this.state.replaceSelection(text));
+    }
+
+    /**
+     * Get a list of tokens for the current editor text content.
+     */
+  }, {
+    key: "getTokens",
+    value: function getTokens() {
+      var _this5 = this;
+      var tokens = [];
+      var tree = ensureSyntaxTree(this.state, this.doc.length);
+      if (tree) {
+        tree.iterate({
+          enter: function enter(node) {
+            tokens.push({
+              value: _this5.state.sliceDoc(node.from, node.to),
+              offset: node.from,
+              type: node.name
+            });
+            return true;
+          }
+        });
+      }
+      return tokens;
+    }
+
+    /**
+     * Get the token at a given editor position.
+     */
+  }, {
+    key: "getTokenAt",
+    value: function getTokenAt(offset) {
+      var tree = ensureSyntaxTree(this.state, offset);
+      if (tree) {
+        var node = tree.resolveInner(offset);
+        return {
+          value: this.state.sliceDoc(node.from, node.to),
+          offset: node.from,
+          type: node.name
+        };
+      } else {
+        return {
+          value: '',
+          offset: offset
+        };
+      }
+    }
+
+    /**
+     * Get the token a the cursor position.
+     */
+  }, {
+    key: "getTokenAtCursor",
+    value: function getTokenAtCursor() {
+      return this.getTokenAt(this.state.selection.main.head);
+    }
+
+    /**
+     * Insert a new indented line at the current cursor position.
+     */
+  }, {
+    key: "newIndentedLine",
+    value: function newIndentedLine() {
+      insertNewlineAndIndent({
+        state: this.state,
+        dispatch: this.editor.dispatch
+      });
+    }
+
+    /**
+     * Execute a codemirror command on the editor.
+     *
+     * @param command - The name of the command to execute.
+     */
+  }, {
+    key: "execCommand",
+    value: function execCommand(command) {
+      command(this.editor);
+    }
+
+    /**
+     * Handle keydown events from the editor.
+     */
+  }, {
+    key: "onKeydown",
+    value: function onKeydown(event) {
+      var position = this.state.selection.main.head;
+      if (position === 0 && event.keyCode === UP_ARROW) {
+        if (!event.shiftKey) {
+          // this.edgeRequested.emit('top');
+          this.edgeRequestedEmitter.fire('top');
+        }
+        return false;
+      }
+      var line = this.doc.lineAt(position).number;
+      if (line === 1 && event.keyCode === UP_ARROW) {
+        if (!event.shiftKey) {
+          // this.edgeRequested.emit('topLine');
+          this.edgeRequestedEmitter.fire('topLine');
+        }
+        return false;
+      }
+      var length = this.doc.length;
+      if (position === length && event.keyCode === DOWN_ARROW) {
+        if (!event.shiftKey) {
+          // this.edgeRequested.emit('bottom');
+          this.edgeRequestedEmitter.fire('bottom');
+        }
+        return false;
+      }
+      return false;
+    }
+
+    /**
+     * Handles a mime type change.
+     */
+  }, {
+    key: "_onMimeTypeChanged",
+    value: function _onMimeTypeChanged() {
+      var _this6 = this;
+      var mime = this._model.mimeType;
+      // TODO: should we provide a hook for when the mode is done being set?
+      void ensure(mime).then(function (spec) {
+        if (spec) {
+          _this6._editorConfig.reconfigureExtension(_this6._editor, 'language', spec.support);
+        }
+        return;
+      });
+    }
+  }, {
+    key: "_buildMarkDecoration",
+    value: function _buildMarkDecoration(uuid,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _selections) {
+      var decorations = [];
+
+      // If we are marking selections corresponding to an active hover,
+      // remove it.
+      if (uuid === this._hoverId) {
+        this._clearHover();
+      }
+      // If we can id the selection to a specific collaborator,
+      // use that information.
+      // let collaborator: ICollaborator | undefined;
+      // if (this._model.modelDB.collaborators) {
+      //   collaborator = this._model.modelDB.collaborators.get(uuid);
+      // }
+
+      // Style each selection for the uuid.
+      // selections.forEach(selection => {
+      //   const from = selection.from;
+      //   const to = selection.to;
+      //   // Only render selections if the start is not equal to the end.
+      //   // In that case, we don't need to render the cursor.
+      //   if (from !== to) {
+      //     const style = collaborator
+      //       ? { ...selection.style, color: collaborator.color }
+      //       : selection.style;
+      //     const decoration = Decoration.mark({
+      //       attributes: this._toMarkSpec(style),
+      //     });
+      //     decorations.push(from > to ? decoration.range(to, from) : decoration.range(to, from));
+      //   } else if (collaborator) {
+      //     const caret = Decoration.widget({
+      //       widget: this._getCaret(collaborator),
+      //     });
+      //     decorations.push(caret.range(from));
+      //   }
+      // });
+
+      return decorations;
+    }
+
+    /**
+     * Converts the selection style to a text marker options.
+     */
+    // protected _toMarkSpec(style: IEditorSelectionStyle) {
+    //   const r = parseInt(style.color.slice(1, 3), 16);
+    //   const g = parseInt(style.color.slice(3, 5), 16);
+    //   const b = parseInt(style.color.slice(5, 7), 16);
+    //   const css = `background-color: rgba( ${r}, ${g}, ${b}, 0.15)`;
+    //   return {
+    //     className: style.className,
+    //     title: style.displayName,
+    //     css,
+    //   };
+    // }
+
+    /**
+     * Construct a caret element representing the position
+     * of a collaborator's cursor.
+     */
+    // protected _getCaret(collaborator: ICollaborator): CaretWidget {
+    //   return new CaretWidget(collaborator, {
+    //     setHoverId: (sessionId: string) => {
+    //       this._clearHover();
+    //       this._hoverId = sessionId;
+    //     },
+    //     setHoverTimeout: () => {
+    //       this._hoverTimeout = window.setTimeout(() => {
+    //         this._clearHover();
+    //       }, HOVER_TIMEOUT);
+    //     },
+    //     clearHoverTimeout: () => {
+    //       window.clearTimeout(this._hoverTimeout);
+    //     },
+    //   });
+    // }
+
+    /**
+     * Handles a cursor activity event.
+     */
+  }, {
+    key: "_onCursorActivity",
+    value: function _onCursorActivity() {
+      // Only add selections if the editor has focus. This avoids unwanted
+      // triggering of cursor activity due to collaborator actions.
+      if (this._editor.hasFocus) {
+        var selections = this.getSelections();
+        this.model.selections = selections;
+      }
+    }
+
+    /**
+     * Converts a code mirror selection to an editor selection.
+     */
+  }, {
+    key: "_toSelection",
+    value: function _toSelection(selection) {
+      return {
+        uuid: this.uuid,
+        start: this._toPosition(selection.anchor),
+        end: this._toPosition(selection.head),
+        style: this.selectionStyle
+      };
+    }
+    /**
+     * Convert a code mirror position to an editor position.
+     */
+  }, {
+    key: "_toPosition",
+    value: function _toPosition(position) {
+      return {
+        line: position.line,
+        column: position.ch
+      };
+    }
+
+    /**
+     * Convert an editor position to a code mirror position.
+     */
+  }, {
+    key: "_toCodeMirrorPosition",
+    value: function _toCodeMirrorPosition(position) {
+      return {
+        line: position.line,
+        ch: position.column
+      };
+    }
+
+    /**
+     * Handles document changes.
+     */
+  }, {
+    key: "_onDocChanged",
+    value: function _onDocChanged(update) {
+      if (update.transactions.length && update.transactions[0].selection) {
+        this._onCursorActivity();
+      }
+      if (update.docChanged) {
+        this._lastChange = update.changes;
+      }
+      this.model.value = update.state.doc.toJSON().join('\n');
+    }
+    /**
+     * Handle the DOM events for the editor.
+     *
+     * @param event - The DOM event sent to the editor.
+     *
+     * #### Notes
+     * This method implements the DOM `EventListener` interface and is
+     * called in response to events on the editor's DOM node. It should
+     * not be called directly by user code.
+     */
+  }, {
+    key: "handleEvent",
+    value: function handleEvent(event) {
+      switch (event.type) {
+        case 'focus':
+          this._evtFocus();
+          break;
+        case 'blur':
+          this._evtBlur();
+          break;
+        case 'scroll':
+          this._evtScroll();
+          break;
+        default:
+          break;
+      }
+    }
+
+    /**
+     * Handle `focus` events for the editor.
+     */
+  }, {
+    key: "_evtFocus",
+    value: function _evtFocus() {
+      this.host.classList.add('jp-mod-focused');
+
+      // Update the selections on editor gaining focus because
+      // the onCursorActivity function filters usual cursor events
+      // based on the editor's focus.
+      this._onCursorActivity();
+    }
+
+    /**
+     * Handle `blur` events for the editor.
+     */
+  }, {
+    key: "_evtBlur",
+    value: function _evtBlur() {
+      this.host.classList.remove('jp-mod-focused');
+    }
+
+    /**
+     * Handle `scroll` events for the editor.
+     */
+  }, {
+    key: "_evtScroll",
+    value: function _evtScroll() {
+      // Remove any active hover.
+      this._clearHover();
+    }
+
+    /**
+     * Clear the hover for a caret, due to things like
+     * scrolling, resizing, deactivation, etc, where
+     * the position is no longer valid.
+     */
+  }, {
+    key: "_clearHover",
+    value: function _clearHover() {
+      if (this._caretHover) {
+        window.clearTimeout(this._hoverTimeout);
+        document.body.removeChild(this._caretHover);
+        this._caretHover = null;
+      }
+    }
+
+    // protected _poll: Poll;
+    // protected _yeditorBinding: IYCodeMirrorBinding | null;
+  }]);
+  return CodeMirrorEditor;
+}();
+export function createEditor(host, config, value, editorConfig, additionalExtensions) {
+  var extensions = editorConfig.getInitialExtensions(config);
+  extensions.push.apply(extensions, _toConsumableArray(additionalExtensions));
+  var view = new EditorView({
+    state: EditorState.create({
+      doc: value,
+      extensions: extensions
+    }),
+    parent: host
+  });
+  if (config.readOnly) {
+    view.dom.classList.add(READ_ONLY_CLASS);
+  }
+  return view;
+}