@codemirror/view 0.20.1 → 0.20.4

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 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
+
+The new `hideOn` option to `hoverTooltip` allows more fine-grained control over when the tooltip should hide.
+
 ## 0.20.1 (2022-04-20)
 
 ### Bug fixes

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) {
@@ -3844,11 +3844,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 +5491,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 +5571,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 +5773,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 +6066,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 +6209,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 +6669,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;
 /**
@@ -8261,7 +8275,8 @@ function hoverTooltip(source, options = {}) {
     let hoverState = state.StateField.define({
         create() { return null; },
         update(value, tr) {
-            if (value && (options.hideOnChange && (tr.docChanged || tr.selection)))
+            if (value && (options.hideOnChange && (tr.docChanged || tr.selection) ||
+                options.hideOn && options.hideOn(tr, value)))
                 return null;
             if (value && tr.docChanged) {
                 let newPos = tr.changes.mapPos(value.pos, -1, state.MapMode.TrackDel);

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>;
     /**
@@ -1546,11 +1566,16 @@ container element. This allows multiple tooltips over the same
 range to be "merged" together without overlapping.
 */
 declare function hoverTooltip(source: (view: EditorView, pos: number, side: -1 | 1) => Tooltip | null | Promise<Tooltip | null>, options?: {
+    /**
+    Controls whether a transaction hides the tooltip. The default
+    is to not hide.
+    */
+    hideOn?: (tr: Transaction, tooltip: Tooltip) => boolean;
     /**
     When enabled (this defaults to false), close the tooltip
-    whenever the document changes.
+    whenever the document changes or the selection is set.
     */
-    hideOnChange?: boolean;
+    hideOnChange?: boolean | "touch";
     /**
     Hover time after which the tooltip should appear, in
     milliseconds. Defaults to 300ms.

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) {
@@ -3838,11 +3838,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 +5484,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 +5564,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 +5766,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 +6059,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 +6202,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 +6662,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;
 /**
@@ -8254,7 +8268,8 @@ function hoverTooltip(source, options = {}) {
     let hoverState = StateField.define({
         create() { return null; },
         update(value, tr) {
-            if (value && (options.hideOnChange && (tr.docChanged || tr.selection)))
+            if (value && (options.hideOnChange && (tr.docChanged || tr.selection) ||
+                options.hideOn && options.hideOn(tr, value)))
                 return null;
             if (value && tr.docChanged) {
                 let newPos = tr.changes.mapPos(value.pos, -1, MapMode.TrackDel);

package/package.json

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