@codemirror/view 0.20.2 → 0.20.5

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 0.20.5 (2022-05-18)
+
+### Bug fixes
+
+Fix an issue where gutter elements without any markers in them would not get the `cm-gutterElement` class assigned.
+
+Fix an issue where DOM event handlers registered by plugins were retained indefinitely, even after the editor was reconfigured.
+
+## 0.20.4 (2022-05-03)
+
+### Bug fixes
+
+Prevent Mac-style behavior of inserting a period when the user inserts two spaces.
+
+Fix an issue where the editor would sometimes not restore the DOM selection when refocused with a selection identical to the one it held when it lost focus.
+
+## 0.20.3 (2022-04-27)
+
+### Bug fixes
+
+Fix a bug where the input handling could crash on repeated (or held) backspace presses on Chrome Android.
+
 ## 0.20.2 (2022-04-22)
 
 ### New features

package/dist/index.cjs

@@ -1157,9 +1157,6 @@ of content. You'll usually use it wrapped in a
 @nonabstract
 */
 class Decoration extends state.RangeValue {
-    /**
-    @internal
-    */
     constructor(
     /**
     @internal
@@ -1704,7 +1701,6 @@ class NullWidget extends WidgetType {
     updateDOM(elt) { return elt.nodeName.toLowerCase() == this.tag; }
 }
 
-const none = [];
 const clickAddsSelectionRange = state.Facet.define();
 const dragMovesSelection$1 = state.Facet.define();
 const mouseSelectionStyle = state.Facet.define();
@@ -1923,9 +1919,6 @@ View [plugins](https://codemirror.net/6/docs/ref/#view.ViewPlugin) are given ins
 class, which describe what happened, whenever the view is updated.
 */
 class ViewUpdate {
-    /**
-    @internal
-    */
     constructor(
     /**
     The editor view that the update is associated with.
@@ -1938,7 +1931,7 @@ class ViewUpdate {
     /**
     The transactions involved in the update. May be empty.
     */
-    transactions = none) {
+    transactions) {
         this.view = view;
         this.state = state$1;
         this.transactions = transactions;
@@ -1960,6 +1953,12 @@ class ViewUpdate {
         }
     }
     /**
+    @internal
+    */
+    static create(view, state, transactions) {
+        return new ViewUpdate(view, state, transactions);
+    }
+    /**
     Tells you whether the [viewport](https://codemirror.net/6/docs/ref/#view.EditorView.viewport) or
     [visible ranges](https://codemirror.net/6/docs/ref/#view.EditorView.visibleRanges) changed in this
     update.
@@ -2880,7 +2879,8 @@ function computeCompositionDeco(view, changes) {
         topView = topView.widget.topView;
     else if (topView)
         topView.parent = null;
-    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode, topView) }).range(newFrom, newTo));
+    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode, topView), inclusive: true })
+        .range(newFrom, newTo));
 }
 class CompositionWidget extends WidgetType {
     constructor(top, text, topView) {
@@ -3319,6 +3319,7 @@ class InputState {
     ensureHandlers(view, plugins) {
         var _a;
         let handlers;
+        this.customHandlers = [];
         for (let plugin of plugins)
             if (handlers = (_a = plugin.update(view).spec) === null || _a === void 0 ? void 0 : _a.domEventHandlers) {
                 this.customHandlers.push({ plugin: plugin.value, handlers });
@@ -3844,11 +3845,16 @@ handlers.copy = handlers.cut = (view, event) => {
             userEvent: "delete.cut"
         });
 };
-handlers.focus = handlers.blur = view => {
+function updateForFocusChange(view) {
     setTimeout(() => {
         if (view.hasFocus != view.inputState.notifiedFocused)
             view.update([]);
     }, 10);
+}
+handlers.focus = updateForFocusChange;
+handlers.blur = view => {
+    view.observer.clearSelectionRange();
+    updateForFocusChange(view);
 };
 function forceClearComposition(view, rapid) {
     if (view.docView.compositionDeco.size) {
@@ -5486,6 +5492,9 @@ class DOMObserver {
         this.selectionRange.set(anchor.node, anchor.offset, head.node, head.offset);
         this.selectionChanged = false;
     }
+    clearSelectionRange() {
+        this.selectionRange.set(null, 0, null, 0);
+    }
     listenForScroll() {
         this.parentCheck = -1;
         let i = 0, changed = null;
@@ -5563,6 +5572,7 @@ class DOMObserver {
                 let key = this.delayedAndroidKey;
                 this.delayedAndroidKey = null;
                 let startState = this.view.state;
+                this.readSelectionRange();
                 if (dispatchKey(this.view.contentDOM, key.key, key.keyCode))
                     this.processRecords();
                 else
@@ -5764,6 +5774,11 @@ function applyDOMChange(view, start, end, typeOver) {
             from: sel.from, to: sel.to,
             insert: view.state.doc.slice(sel.from, change.from).append(change.insert).append(view.state.doc.slice(change.to, sel.to))
         };
+    // Detect insert-period-on-double-space Mac behavior, and transform
+    // it into a regular space insert.
+    else if (browser.mac && change && change.from == change.to && change.from == sel.head - 1 &&
+        change.insert.toString() == ".")
+        change = { from: sel.from, to: sel.to, insert: state.Text.of([" "]) };
     if (change) {
         let startState = view.state;
         if (browser.ios && view.inputState.flushIOSKey(view))
@@ -6052,7 +6067,7 @@ class EditorView {
         // When the phrases change, redraw the editor
         if (state$1.facet(state.EditorState.phrases) != this.state.facet(state.EditorState.phrases))
             return this.setState(state$1);
-        update = new ViewUpdate(this, state$1, transactions);
+        update = ViewUpdate.create(this, state$1, transactions);
         let scrollTarget = this.viewState.scrollTarget;
         try {
             this.updateState = 2 /* Updating */;
@@ -6195,7 +6210,7 @@ class EditorView {
                         return BadMeasure;
                     }
                 });
-                let update = new ViewUpdate(this, this.state), redrawn = false, scrolled = false;
+                let update = ViewUpdate.create(this, this.state, []), redrawn = false, scrolled = false;
                 update.flags |= changed;
                 if (!updated)
                     updated = update;
@@ -6655,8 +6670,8 @@ EditorView.inputHandler = inputHandler;
 /**
 By default, the editor assumes all its content has the same
 [text direction](https://codemirror.net/6/docs/ref/#view.Direction). Configure this with a `true`
-value to make it read and store the text direction of every
-(rendered) line separately.
+value to make it read the text direction of every (rendered)
+line separately.
 */
 EditorView.perLineTextDirection = perLineTextDirection;
 /**
@@ -8167,7 +8182,6 @@ class HoverPlugin {
             this.startHover();
     }
     startHover() {
-        var _a;
         clearTimeout(this.restartTimeout);
         let { lastMove } = this;
         let pos = this.view.contentDOM.contains(lastMove.target) ? this.view.posAtCoords(lastMove) : null;
@@ -8181,7 +8195,7 @@ class HoverPlugin {
         let bidi = this.view.bidiSpans(this.view.state.doc.lineAt(pos)).find(s => s.from <= pos && s.to >= pos);
         let rtl = bidi && bidi.dir == exports.Direction.RTL ? -1 : 1;
         let open = this.source(this.view, pos, (lastMove.x < posCoords.left ? -rtl : rtl));
-        if ((_a = open) === null || _a === void 0 ? void 0 : _a.then) {
+        if (open === null || open === void 0 ? void 0 : open.then) {
             let pending = this.pending = { pos };
             open.then(result => {
                 if (this.pending == pending) {
@@ -8781,6 +8795,7 @@ class GutterElement {
         this.above = 0;
         this.markers = [];
         this.dom = document.createElement("div");
+        this.dom.className = "cm-gutterElement";
         this.update(view, height, above, markers);
     }
     update(view, height, above, markers) {

package/dist/index.d.ts

@@ -214,6 +214,25 @@ declare abstract class Decoration extends RangeValue {
     your decoration.
     */
     readonly spec: any;
+    protected constructor(
+    /**
+    @internal
+    */
+    startSide: number, 
+    /**
+    @internal
+    */
+    endSide: number, 
+    /**
+    @internal
+    */
+    widget: WidgetType | null, 
+    /**
+    The config object used to create this decoration. You can
+    include additional properties in there to store metadata about
+    your decoration.
+    */
+    spec: any);
     abstract eq(other: Decoration): boolean;
     /**
     Create a mark decoration, which influences the styling of the
@@ -324,10 +343,10 @@ interface PluginSpec<V extends PluginValue> {
     provide?: (plugin: ViewPlugin<V>) => Extension;
     /**
     Allow the plugin to provide decorations. When given, this should
-    a function that take the plugin value and return a [decoration
-    set](https://codemirror.net/6/docs/ref/#view.DecorationSet). See also the caveat about
-    [layout-changing decorations](https://codemirror.net/6/docs/ref/#view.EditorView^decorations)
-    that depend on the view.
+    be a function that take the plugin value and return a
+    [decoration set](https://codemirror.net/6/docs/ref/#view.DecorationSet). See also the caveat about
+    [layout-changing decorations](https://codemirror.net/6/docs/ref/#view.EditorView^decorations) that
+    depend on the view.
     */
     decorations?: (value: V) => DecorationSet;
 }
@@ -398,6 +417,7 @@ declare class ViewUpdate {
     The previous editor state.
     */
     readonly startState: EditorState;
+    private constructor();
     /**
     Tells you whether the [viewport](https://codemirror.net/6/docs/ref/#view.EditorView.viewport) or
     [visible ranges](https://codemirror.net/6/docs/ref/#view.EditorView.visibleRanges) changed in this
@@ -968,8 +988,8 @@ declare class EditorView {
     /**
     By default, the editor assumes all its content has the same
     [text direction](https://codemirror.net/6/docs/ref/#view.Direction). Configure this with a `true`
-    value to make it read and store the text direction of every
-    (rendered) line separately.
+    value to make it read the text direction of every (rendered)
+    line separately.
     */
     static perLineTextDirection: Facet<boolean, boolean>;
     /**

package/dist/index.js

@@ -1152,9 +1152,6 @@ of content. You'll usually use it wrapped in a
 @nonabstract
 */
 class Decoration extends RangeValue {
-    /**
-    @internal
-    */
     constructor(
     /**
     @internal
@@ -1699,7 +1696,6 @@ class NullWidget extends WidgetType {
     updateDOM(elt) { return elt.nodeName.toLowerCase() == this.tag; }
 }
 
-const none = [];
 const clickAddsSelectionRange = /*@__PURE__*/Facet.define();
 const dragMovesSelection$1 = /*@__PURE__*/Facet.define();
 const mouseSelectionStyle = /*@__PURE__*/Facet.define();
@@ -1918,9 +1914,6 @@ View [plugins](https://codemirror.net/6/docs/ref/#view.ViewPlugin) are given ins
 class, which describe what happened, whenever the view is updated.
 */
 class ViewUpdate {
-    /**
-    @internal
-    */
     constructor(
     /**
     The editor view that the update is associated with.
@@ -1933,7 +1926,7 @@ class ViewUpdate {
     /**
     The transactions involved in the update. May be empty.
     */
-    transactions = none) {
+    transactions) {
         this.view = view;
         this.state = state;
         this.transactions = transactions;
@@ -1955,6 +1948,12 @@ class ViewUpdate {
         }
     }
     /**
+    @internal
+    */
+    static create(view, state, transactions) {
+        return new ViewUpdate(view, state, transactions);
+    }
+    /**
     Tells you whether the [viewport](https://codemirror.net/6/docs/ref/#view.EditorView.viewport) or
     [visible ranges](https://codemirror.net/6/docs/ref/#view.EditorView.visibleRanges) changed in this
     update.
@@ -2874,7 +2873,8 @@ function computeCompositionDeco(view, changes) {
         topView = topView.widget.topView;
     else if (topView)
         topView.parent = null;
-    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode, topView) }).range(newFrom, newTo));
+    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode, topView), inclusive: true })
+        .range(newFrom, newTo));
 }
 class CompositionWidget extends WidgetType {
     constructor(top, text, topView) {
@@ -3313,6 +3313,7 @@ class InputState {
     ensureHandlers(view, plugins) {
         var _a;
         let handlers;
+        this.customHandlers = [];
         for (let plugin of plugins)
             if (handlers = (_a = plugin.update(view).spec) === null || _a === void 0 ? void 0 : _a.domEventHandlers) {
                 this.customHandlers.push({ plugin: plugin.value, handlers });
@@ -3838,11 +3839,16 @@ handlers.copy = handlers.cut = (view, event) => {
             userEvent: "delete.cut"
         });
 };
-handlers.focus = handlers.blur = view => {
+function updateForFocusChange(view) {
     setTimeout(() => {
         if (view.hasFocus != view.inputState.notifiedFocused)
             view.update([]);
     }, 10);
+}
+handlers.focus = updateForFocusChange;
+handlers.blur = view => {
+    view.observer.clearSelectionRange();
+    updateForFocusChange(view);
 };
 function forceClearComposition(view, rapid) {
     if (view.docView.compositionDeco.size) {
@@ -5479,6 +5485,9 @@ class DOMObserver {
         this.selectionRange.set(anchor.node, anchor.offset, head.node, head.offset);
         this.selectionChanged = false;
     }
+    clearSelectionRange() {
+        this.selectionRange.set(null, 0, null, 0);
+    }
     listenForScroll() {
         this.parentCheck = -1;
         let i = 0, changed = null;
@@ -5556,6 +5565,7 @@ class DOMObserver {
                 let key = this.delayedAndroidKey;
                 this.delayedAndroidKey = null;
                 let startState = this.view.state;
+                this.readSelectionRange();
                 if (dispatchKey(this.view.contentDOM, key.key, key.keyCode))
                     this.processRecords();
                 else
@@ -5757,6 +5767,11 @@ function applyDOMChange(view, start, end, typeOver) {
             from: sel.from, to: sel.to,
             insert: view.state.doc.slice(sel.from, change.from).append(change.insert).append(view.state.doc.slice(change.to, sel.to))
         };
+    // Detect insert-period-on-double-space Mac behavior, and transform
+    // it into a regular space insert.
+    else if (browser.mac && change && change.from == change.to && change.from == sel.head - 1 &&
+        change.insert.toString() == ".")
+        change = { from: sel.from, to: sel.to, insert: Text.of([" "]) };
     if (change) {
         let startState = view.state;
         if (browser.ios && view.inputState.flushIOSKey(view))
@@ -6045,7 +6060,7 @@ class EditorView {
         // When the phrases change, redraw the editor
         if (state.facet(EditorState.phrases) != this.state.facet(EditorState.phrases))
             return this.setState(state);
-        update = new ViewUpdate(this, state, transactions);
+        update = ViewUpdate.create(this, state, transactions);
         let scrollTarget = this.viewState.scrollTarget;
         try {
             this.updateState = 2 /* Updating */;
@@ -6188,7 +6203,7 @@ class EditorView {
                         return BadMeasure;
                     }
                 });
-                let update = new ViewUpdate(this, this.state), redrawn = false, scrolled = false;
+                let update = ViewUpdate.create(this, this.state, []), redrawn = false, scrolled = false;
                 update.flags |= changed;
                 if (!updated)
                     updated = update;
@@ -6648,8 +6663,8 @@ EditorView.inputHandler = inputHandler;
 /**
 By default, the editor assumes all its content has the same
 [text direction](https://codemirror.net/6/docs/ref/#view.Direction). Configure this with a `true`
-value to make it read and store the text direction of every
-(rendered) line separately.
+value to make it read the text direction of every (rendered)
+line separately.
 */
 EditorView.perLineTextDirection = perLineTextDirection;
 /**
@@ -8160,7 +8175,6 @@ class HoverPlugin {
             this.startHover();
     }
     startHover() {
-        var _a;
         clearTimeout(this.restartTimeout);
         let { lastMove } = this;
         let pos = this.view.contentDOM.contains(lastMove.target) ? this.view.posAtCoords(lastMove) : null;
@@ -8174,7 +8188,7 @@ class HoverPlugin {
         let bidi = this.view.bidiSpans(this.view.state.doc.lineAt(pos)).find(s => s.from <= pos && s.to >= pos);
         let rtl = bidi && bidi.dir == Direction.RTL ? -1 : 1;
         let open = this.source(this.view, pos, (lastMove.x < posCoords.left ? -rtl : rtl));
-        if ((_a = open) === null || _a === void 0 ? void 0 : _a.then) {
+        if (open === null || open === void 0 ? void 0 : open.then) {
             let pending = this.pending = { pos };
             open.then(result => {
                 if (this.pending == pending) {
@@ -8774,6 +8788,7 @@ class GutterElement {
         this.above = 0;
         this.markers = [];
         this.dom = document.createElement("div");
+        this.dom.className = "cm-gutterElement";
         this.update(view, height, above, markers);
     }
     update(view, height, above, markers) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "0.20.2",
+  "version": "0.20.5",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",