@difizen/libro-codemirror 0.0.0-snapshot-20241017072317

package/es/editor.js

@@ -0,0 +1,1338 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { insertNewlineAndIndent, redo as _redo, undo as _undo } from '@codemirror/commands';
+import { ensureSyntaxTree } from '@codemirror/language';
+import { EditorSelection, EditorState, Prec, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, EditorView } from '@codemirror/view';
+import { defaultConfig, defaultSelectionStyle } from '@difizen/libro-code-editor';
+import { findFirstArrayIndex, MIME, removeAllWhereFromArray } from '@difizen/libro-common';
+import { Deferred, Disposable, Emitter } from '@difizen/mana-app';
+import { getOrigin, watch } from '@difizen/mana-app';
+import { v4 } from 'uuid';
+import { EditorConfiguration } from "./config.js";
+import { stateFactory } from "./factory.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: MIME.python,
+  theme: {
+    light: 'jupyter',
+    dark: 'jupyter',
+    hc: '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,
+  scrollBarHeight: 8,
+  //
+  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 () {
+  // highlight
+
+  /**
+   * Construct a CodeMirror editor.
+   */
+  function CodeMirrorEditor(options) {
+    var _this = this,
+      _options$state;
+    _classCallCheck(this, CodeMirrorEditor);
+    this.editorReadyDeferred = new Deferred();
+    this.editorReady = this.editorReadyDeferred.promise;
+    /**
+     * 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();
+    /**
+     * Dispose of the resources held by the widget.
+     */
+    this.dispose = function () {
+      if (_this.disposed) {
+        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.editor.destroy();
+    };
+    this.handleTooltipChange = function (val) {
+      _this.modalChangeEmitter.fire(val);
+    };
+    this._selectionMarkers = {};
+    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();
+    this.editorState = (_options$state = options.state) !== null && _options$state !== void 0 ? _options$state : stateFactory({
+      uuid: options.uuid,
+      model: options.model
+    });
+
+    // 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 highlight
+    this.highlightEffect = StateEffect.define({
+      map: function map(value, mapping) {
+        return {
+          matches: value.matches.map(function (v) {
+            return {
+              text: v.text,
+              position: mapping.mapPos(v.position)
+            };
+          }),
+          currentIndex: value.currentIndex
+        };
+      }
+    });
+    this.highlightMark = Decoration.mark({
+      class: 'cm-searchMatch'
+    });
+    this.selectedMatchMark = Decoration.mark({
+      class: 'cm-searchMatch cm-searchMatch-selected libro-selectedtext'
+    });
+    this.highlightField = StateField.define({
+      create: function create() {
+        return Decoration.none;
+      },
+      update: function update(highlights, transaction) {
+        // eslint-disable-next-line no-param-reassign
+        highlights = highlights.map(transaction.changes);
+        var _iterator3 = _createForOfIteratorHelper(transaction.effects),
+          _step3;
+        try {
+          var _loop2 = function _loop2() {
+            var ef = _step3.value;
+            if (ef.is(_this.highlightEffect)) {
+              var e = ef;
+              if (e.value.matches.length) {
+                // eslint-disable-next-line no-param-reassign
+                highlights = highlights.update({
+                  add: e.value.matches.map(function (m, index) {
+                    if (index === e.value.currentIndex) {
+                      return _this.selectedMatchMark.range(m.position, m.position + m.text.length);
+                    }
+                    return _this.highlightMark.range(m.position, m.position + m.text.length);
+                  }),
+                  filter: function filter(from, to) {
+                    return !e.value.matches.some(function (m) {
+                      return m.position >= from && m.position + m.text.length <= to;
+                    }) || from === to;
+                  }
+                });
+              } else {
+                // eslint-disable-next-line no-param-reassign
+                highlights = Decoration.none;
+              }
+            }
+          };
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            _loop2();
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+        return highlights;
+      },
+      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
+    })]);
+    this.editorReadyDeferred.resolve();
+
+    // 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: "getState",
+    value: function getState() {
+      return _objectSpread(_objectSpread({}, this.editorState), {}, {
+        cursorPosition: this.getCursorPosition(),
+        selections: this.getSelections()
+      });
+    }
+
+    /**
+     * 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,
+    //   };
+    // }
+  }, {
+    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: "disposed",
+    get: function get() {
+      return this._isDisposed;
+    }
+  }, {
+    key: "getOption",
+    value:
+    /**
+     * Get a config option for the editor.
+     */
+    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;
+        if (!this.disposed) {
+          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
+      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).from + position.column - 1;
+    }
+
+    /**
+     * 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() {
+      getOrigin(this._editor).focus();
+    }
+
+    /**
+     * Test whether the editor has keyboard focus.
+     */
+  }, {
+    key: "hasFocus",
+    value: function hasFocus() {
+      return getOrigin(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);
+    }
+  }, {
+    key: "getSelectionValue",
+    value: function getSelectionValue(range) {
+      var fromOffset = range ? this.getOffsetAt(range.start) : this.editor.state.selection.main.from;
+      var toOffset = range ? this.getOffsetAt(range.end) : this.editor.state.selection.main.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, range) {
+      this.editor.dispatch({
+        changes: {
+          from: this.getOffsetAt(range.start),
+          to: this.getOffsetAt(range.end),
+          insert: text
+        }
+      });
+    }
+  }, {
+    key: "replaceSelections",
+    value: function replaceSelections(edits) {
+      var _this5 = this;
+      // const trans = this.state.replaceSelection(text);
+      this.editor.dispatch({
+        changes: edits.map(function (item) {
+          return {
+            from: _this5.getOffsetAt(item.range.start),
+            to: _this5.getOffsetAt(item.range.end),
+            insert: item.text
+          };
+        })
+      });
+    }
+  }, {
+    key: "highlightMatches",
+    value: function highlightMatches(matches, currentIndex) {
+      var effects = [this.highlightEffect.of({
+        matches: matches,
+        currentIndex: currentIndex
+      })];
+      if (!this.state.field(this.highlightField, false)) {
+        effects.push(StateEffect.appendConfig.of([this.highlightField]));
+      }
+      this.editor.dispatch({
+        effects: effects
+      });
+    }
+  }, {
+    key: "getTokens",
+    value:
+    /**
+     * Get a list of tokens for the current editor text content.
+     */
+    function getTokens() {
+      var _this6 = this;
+      var tokens = [];
+      var tree = ensureSyntaxTree(this.state, this.doc.length);
+      if (tree) {
+        tree.iterate({
+          enter: function enter(node) {
+            tokens.push({
+              value: _this6.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);
+    }
+  }, {
+    key: "onKeydown",
+    value:
+    /**
+     * Handle keydown events from the editor.
+     */
+    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 _this7 = 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) {
+          _this7._editorConfig.reconfigureExtension(_this7._editor, 'language', spec.support);
+        }
+        return;
+      });
+    }
+
+    /**
+     * Handles a selections change.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  }, {
+    key: "_onSelectionsChanged",
+    value: function _onSelectionsChanged(args) {
+      // const uuid = args.key;
+      // if (uuid !== this.uuid) {
+      //   this._cleanSelections(uuid);
+      //   if (args.type !== 'remove' && args.newValue) {
+      //     this._markSelections(uuid, args.newValue);
+      //   }
+      // }
+    }
+
+    /**
+     * Clean selections for the given uuid.
+     */
+  }, {
+    key: "_cleanSelections",
+    value: function _cleanSelections(uuid) {
+      this.editor.dispatch({
+        effects: this._removeMark.of({
+          uuid: uuid,
+          decorations: this._selectionMarkers[uuid]
+        })
+      });
+    }
+  }, {
+    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);
+    //     },
+    //   });
+    // }
+
+    /**
+     * Marks selections.
+     */
+  }, {
+    key: "_markSelections",
+    value: function _markSelections(uuid, selections) {
+      var _this8 = this;
+      var sel = selections.map(function (selection) {
+        return {
+          from: _this8.getOffsetAt(selection.start),
+          to: _this8.getOffsetAt(selection.end),
+          style: selection.style
+        };
+      });
+      this.editor.dispatch({
+        effects: this._addMark.of({
+          uuid: uuid,
+          selections: sel
+        })
+      });
+    }
+
+    /**
+     * 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');
+      this.host.style.height = update.view.dom.offsetHeight + 'px';
+    }
+    /**
+     * 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;
+      }
+    }
+    /**
+     * Check for an out of sync editor.
+     */
+  }, {
+    key: "_checkSync",
+    value: function _checkSync() {
+      var change = this._lastChange;
+      if (!change) {
+        return;
+      }
+      this._lastChange = null;
+      var doc = this.doc;
+      if (doc.toString() === this._model.value) {
+        return;
+      }
+
+      // void showDialog({
+      //   title: this._trans.__('Code Editor out of Sync'),
+      //   body: this._trans.__(
+      //     'Please open your browser JavaScript console for bug report instructions',
+      //   ),
+      // });
+      console.warn('If you are able and willing to publicly share the text or code in your editor, you can help us debug the "Code Editor out of Sync" message by pasting the following to the public issue at https://github.com/jupyterlab/jupyterlab/issues/2951. Please note that the data below includes the text/code in your editor.');
+      console.warn(JSON.stringify({
+        model: this._model.value,
+        view: doc.toString(),
+        selections: this.getSelections(),
+        cursor: this.getCursorPosition(),
+        lineSep: this.state.facet(EditorState.lineSeparator),
+        change: change
+      }));
+    }
+
+    // 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;
+}