@codemirror/view 0.20.3 → 0.20.4

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 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

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.
@@ -3845,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) {
@@ -5487,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;
@@ -5766,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))
@@ -6054,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 */;
@@ -6197,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;
@@ -6657,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;
 /**

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.
@@ -3839,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) {
@@ -5480,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;
@@ -5759,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))
@@ -6047,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 */;
@@ -6190,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;
@@ -6650,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;
 /**

package/package.json

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