@codemirror/view 6.9.3 → 6.9.4

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 6.9.4 (2023-04-11)
+
+### Bug fixes
+
+Make the editor scroll while dragging a selection near its sides, even if the cursor isn't outside the scrollable element.
+
+Fix a bug that interrupted composition after widgets in some circumstances on Firefox.
+
+Make sure the last change in a composition has its user event set to `input.type.compose`, even if the `compositionend` event fires before the changes are applied.
+
+Make it possible to remove additional selection ranges by clicking on them with ctrl/cmd held, even if they aren't cursors.
+
+Keep widget buffers between widgets and compositions, since removing them confuses IME on macOS Firefox.
+
+Fix a bug where, for DOM changes that put the selection in the middle of the changed range, the editor incorrectly set its selection state.
+
+Fix a bug where `coordsAtPos` could return a coordinates before the line break when querying a line-wrapped position with a positive `side`.
+
 ## 6.9.3 (2023-03-21)
 
 ### Bug fixes

package/dist/index.cjs

@@ -520,6 +520,7 @@ class ContentView {
     static get(node) { return node.cmView; }
     get isEditable() { return true; }
     get isWidget() { return false; }
+    get isHidden() { return false; }
     merge(from, to, source, hasStart, openStart, openEnd) {
         return false;
     }
@@ -857,7 +858,7 @@ class WidgetView extends ContentView {
     become(other) {
         if (other.length == this.length && other instanceof WidgetView && other.side == this.side) {
             if (this.widget.constructor == other.widget.constructor) {
-                if (!this.widget.eq(other.widget))
+                if (!this.widget.compare(other.widget))
                     this.markDirty(true);
                 if (this.dom && !this.prevWidget)
                     this.prevWidget = this.widget;
@@ -879,7 +880,9 @@ class WidgetView extends ContentView {
         return text ? text.slice(start, start + this.length) : state.Text.empty;
     }
     domAtPos(pos) {
-        return pos == 0 ? DOMPos.before(this.dom) : DOMPos.after(this.dom, pos == this.length);
+        return (this.length ? pos == 0 : this.side > 0)
+            ? DOMPos.before(this.dom)
+            : DOMPos.after(this.dom, pos == this.length);
     }
     domBoundsAround() { return null; }
     coordsAt(pos, side) {
@@ -895,6 +898,7 @@ class WidgetView extends ContentView {
     }
     get isEditable() { return false; }
     get isWidget() { return true; }
+    get isHidden() { return this.widget.isHidden; }
     destroy() {
         super.destroy();
         if (this.dom)
@@ -1007,6 +1011,7 @@ class WidgetBufferView extends ContentView {
     get overrideDOMText() {
         return state.Text.empty;
     }
+    get isHidden() { return true; }
 }
 TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
 function inlineSiblingRect(view, side) {
@@ -1080,7 +1085,8 @@ function coordsInChildren(view, pos, side) {
                 if (child.children.length) {
                     scan(child, pos - off);
                 }
-                else if (!after && (end > pos || off == end && child.getSide() > 0)) {
+                else if ((!after || after instanceof WidgetBufferView && side > 0) &&
+                    (end > pos || off == end && child.getSide() > 0)) {
                     after = child;
                     afterPos = pos - off;
                 }
@@ -1194,6 +1200,10 @@ class WidgetType {
     */
     get customView() { return null; }
     /**
+    @internal
+    */
+    get isHidden() { return false; }
+    /**
     This is called when the an instance of the widget is removed
     from the editor view.
     */
@@ -1605,7 +1615,7 @@ class BlockWidgetView extends ContentView {
     become(other) {
         if (other instanceof BlockWidgetView && other.type == this.type &&
             other.widget.constructor == this.widget.constructor) {
-            if (!other.widget.eq(this.widget))
+            if (!other.widget.compare(this.widget))
                 this.markDirty(true);
             if (this.dom && !this.prevWidget)
                 this.prevWidget = this.widget;
@@ -1736,10 +1746,11 @@ class ContentBuilder {
             }
             else {
                 let view = WidgetView.create(deco.widget || new NullWidget("span"), len, len ? 0 : deco.startSide);
-                let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length && (from < to || deco.startSide > 0);
+                let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length &&
+                    (from < to || deco.startSide > 0);
                 let cursorAfter = !view.isEditable && (from < to || openStart > active.length || deco.startSide <= 0);
                 let line = this.getLine();
-                if (this.pendingBuffer == 2 /* Buf.IfCursor */ && !cursorBefore)
+                if (this.pendingBuffer == 2 /* Buf.IfCursor */ && !cursorBefore && !view.isEditable)
                     this.pendingBuffer = 0 /* Buf.No */;
                 this.flushBuffer(active);
                 if (cursorBefore) {
@@ -1793,6 +1804,7 @@ class NullWidget extends WidgetType {
     eq(other) { return other.tag == this.tag; }
     toDOM() { return document.createElement(this.tag); }
     updateDOM(elt) { return elt.nodeName.toLowerCase() == this.tag; }
+    get isHidden() { return true; }
 }
 
 const clickAddsSelectionRange = state.Facet.define();
@@ -2646,7 +2658,7 @@ class DocView extends ContentView {
         let head = main.empty ? anchor : this.domAtPos(main.head);
         // Always reset on Firefox when next to an uneditable node to
         // avoid invisible cursor bugs (#111)
-        if (browser.gecko && main.empty && betweenUneditable(anchor)) {
+        if (browser.gecko && main.empty && !this.compositionDeco.size && betweenUneditable(anchor)) {
             let dummy = document.createTextNode("");
             this.view.observer.ignore(() => anchor.node.insertBefore(dummy, anchor.node.childNodes[anchor.offset] || null));
             anchor = head = new DOMPos(dummy, 0);
@@ -3440,7 +3452,15 @@ class InputState {
         // first, false means first has already been marked for this
         // composition)
         this.compositionFirstChange = null;
+        // End time of the previous composition
         this.compositionEndedAt = 0;
+        // Used in a kludge to detect when an Enter keypress should be
+        // considered part of the composition on Safari, which fires events
+        // in the wrong order
+        this.compositionPendingKey = false;
+        // Used to categorize changes as part of a composition, even when
+        // the mutation events fire shortly after the compositionend event
+        this.compositionPendingChange = false;
         this.mouseSelection = null;
         let handleEvent = (handler, event) => {
             if (this.ignoreDuringComposition(event))
@@ -3597,8 +3617,8 @@ class InputState {
         // compositionend and keydown events are sometimes emitted in the
         // wrong order. The key event should still be ignored, even when
         // it happens after the compositionend event.
-        if (browser.safari && !browser.ios && Date.now() - this.compositionEndedAt < 100) {
-            this.compositionEndedAt = 0;
+        if (browser.safari && !browser.ios && this.compositionPendingKey && Date.now() - this.compositionEndedAt < 100) {
+            this.compositionPendingKey = false;
             return true;
         }
         return false;
@@ -3630,8 +3650,9 @@ const PendingKeys = [
 const EmacsyPendingKeys = "dthko";
 // Key codes for modifier keys
 const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
+const dragScrollMargin = 6;
 function dragScrollSpeed(dist) {
-    return dist * 0.7 + 8;
+    return Math.max(0, dist) * 0.7 + 8;
 }
 class MouseSelection {
     constructor(view, startEvent, style, mustSelect) {
@@ -3668,13 +3689,13 @@ class MouseSelection {
         let sx = 0, sy = 0;
         let rect = ((_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect())
             || { left: 0, top: 0, right: this.view.win.innerWidth, bottom: this.view.win.innerHeight };
-        if (event.clientX <= rect.left)
+        if (event.clientX <= rect.left + dragScrollMargin)
             sx = -dragScrollSpeed(rect.left - event.clientX);
-        else if (event.clientX >= rect.right)
+        else if (event.clientX >= rect.right - dragScrollMargin)
             sx = dragScrollSpeed(event.clientX - rect.right);
-        if (event.clientY <= rect.top)
+        if (event.clientY <= rect.top + dragScrollMargin)
             sy = -dragScrollSpeed(rect.top - event.clientY);
-        else if (event.clientY >= rect.bottom)
+        else if (event.clientY >= rect.bottom - dragScrollMargin)
             sy = dragScrollSpeed(event.clientY - rect.bottom);
         this.setScrollSpeed(sx, sy);
     }
@@ -3921,7 +3942,7 @@ function basicMouseSelection(view, event) {
             }
         },
         get(event, extend, multiple) {
-            let cur = queryPos(view, event);
+            let cur = queryPos(view, event), removed;
             let range = rangeForClick(view, cur.pos, cur.bias, type);
             if (start.pos != cur.pos && !extend) {
                 let startRange = rangeForClick(view, start.pos, start.bias, type);
@@ -3930,8 +3951,8 @@ function basicMouseSelection(view, event) {
             }
             if (extend)
                 return startSel.replaceRange(startSel.main.extend(range.from, range.to));
-            else if (multiple && startSel.ranges.length > 1 && startSel.ranges.some(r => r.eq(range)))
-                return removeRange(startSel, range);
+            else if (multiple && type == 1 && startSel.ranges.length > 1 && (removed = removeRangeAround(startSel, cur.pos)))
+                return removed;
             else if (multiple)
                 return startSel.addRange(range);
             else
@@ -3939,11 +3960,13 @@ function basicMouseSelection(view, event) {
         }
     };
 }
-function removeRange(sel, range) {
-    for (let i = 0;; i++) {
-        if (sel.ranges[i].eq(range))
+function removeRangeAround(sel, pos) {
+    for (let i = 0; i < sel.ranges.length; i++) {
+        let { from, to } = sel.ranges[i];
+        if (from <= pos && to >= pos)
             return state.EditorSelection.create(sel.ranges.slice(0, i).concat(sel.ranges.slice(i + 1)), sel.mainIndex == i ? 0 : sel.mainIndex - (sel.mainIndex > i ? 1 : 0));
     }
+    return null;
 }
 handlers.dragstart = (view, event) => {
     let { selection: { main } } = view.state;
@@ -4120,6 +4143,8 @@ handlers.compositionstart = handlers.compositionupdate = view => {
 handlers.compositionend = view => {
     view.inputState.composing = -1;
     view.inputState.compositionEndedAt = Date.now();
+    view.inputState.compositionPendingKey = true;
+    view.inputState.compositionPendingChange = view.observer.pendingRecords().length > 0;
     view.inputState.compositionFirstChange = null;
     if (browser.chrome && browser.android)
         view.observer.flushSoon();
@@ -5775,8 +5800,7 @@ function applyDOMChange(view, domChange) {
         }
         else {
             let changes = startState.changes(change);
-            let mainSel = newSel && !startState.selection.main.eq(newSel.main) && newSel.main.to <= changes.newLength
-                ? newSel.main : undefined;
+            let mainSel = newSel && newSel.main.to <= changes.newLength ? newSel.main : undefined;
             // Try to apply a composition change to all cursors
             if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
                 change.to <= sel.to && change.to >= sel.to - 10) {
@@ -5810,7 +5834,9 @@ function applyDOMChange(view, domChange) {
             }
         }
         let userEvent = "input.type";
-        if (view.composing) {
+        if (view.composing ||
+            view.inputState.compositionPendingChange && view.inputState.compositionEndedAt > Date.now() - 50) {
+            view.inputState.compositionPendingChange = false;
             userEvent += ".compose";
             if (view.inputState.compositionFirstChange) {
                 userEvent += ".start";
@@ -6186,10 +6212,13 @@ class DOMObserver {
         }
         this.flush();
     }
-    processRecords() {
-        let records = this.queue;
+    pendingRecords() {
         for (let mut of this.observer.takeRecords())
-            records.push(mut);
+            this.queue.push(mut);
+        return this.queue;
+    }
+    processRecords() {
+        let records = this.pendingRecords();
         if (records.length)
             this.queue = [];
         let from = -1, to = -1, typeOver = false;

package/dist/index.js

@@ -516,6 +516,7 @@ class ContentView {
     static get(node) { return node.cmView; }
     get isEditable() { return true; }
     get isWidget() { return false; }
+    get isHidden() { return false; }
     merge(from, to, source, hasStart, openStart, openEnd) {
         return false;
     }
@@ -853,7 +854,7 @@ class WidgetView extends ContentView {
     become(other) {
         if (other.length == this.length && other instanceof WidgetView && other.side == this.side) {
             if (this.widget.constructor == other.widget.constructor) {
-                if (!this.widget.eq(other.widget))
+                if (!this.widget.compare(other.widget))
                     this.markDirty(true);
                 if (this.dom && !this.prevWidget)
                     this.prevWidget = this.widget;
@@ -875,7 +876,9 @@ class WidgetView extends ContentView {
         return text ? text.slice(start, start + this.length) : Text.empty;
     }
     domAtPos(pos) {
-        return pos == 0 ? DOMPos.before(this.dom) : DOMPos.after(this.dom, pos == this.length);
+        return (this.length ? pos == 0 : this.side > 0)
+            ? DOMPos.before(this.dom)
+            : DOMPos.after(this.dom, pos == this.length);
     }
     domBoundsAround() { return null; }
     coordsAt(pos, side) {
@@ -891,6 +894,7 @@ class WidgetView extends ContentView {
     }
     get isEditable() { return false; }
     get isWidget() { return true; }
+    get isHidden() { return this.widget.isHidden; }
     destroy() {
         super.destroy();
         if (this.dom)
@@ -1003,6 +1007,7 @@ class WidgetBufferView extends ContentView {
     get overrideDOMText() {
         return Text.empty;
     }
+    get isHidden() { return true; }
 }
 TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
 function inlineSiblingRect(view, side) {
@@ -1076,7 +1081,8 @@ function coordsInChildren(view, pos, side) {
                 if (child.children.length) {
                     scan(child, pos - off);
                 }
-                else if (!after && (end > pos || off == end && child.getSide() > 0)) {
+                else if ((!after || after instanceof WidgetBufferView && side > 0) &&
+                    (end > pos || off == end && child.getSide() > 0)) {
                     after = child;
                     afterPos = pos - off;
                 }
@@ -1190,6 +1196,10 @@ class WidgetType {
     */
     get customView() { return null; }
     /**
+    @internal
+    */
+    get isHidden() { return false; }
+    /**
     This is called when the an instance of the widget is removed
     from the editor view.
     */
@@ -1600,7 +1610,7 @@ class BlockWidgetView extends ContentView {
     become(other) {
         if (other instanceof BlockWidgetView && other.type == this.type &&
             other.widget.constructor == this.widget.constructor) {
-            if (!other.widget.eq(this.widget))
+            if (!other.widget.compare(this.widget))
                 this.markDirty(true);
             if (this.dom && !this.prevWidget)
                 this.prevWidget = this.widget;
@@ -1731,10 +1741,11 @@ class ContentBuilder {
             }
             else {
                 let view = WidgetView.create(deco.widget || new NullWidget("span"), len, len ? 0 : deco.startSide);
-                let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length && (from < to || deco.startSide > 0);
+                let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length &&
+                    (from < to || deco.startSide > 0);
                 let cursorAfter = !view.isEditable && (from < to || openStart > active.length || deco.startSide <= 0);
                 let line = this.getLine();
-                if (this.pendingBuffer == 2 /* Buf.IfCursor */ && !cursorBefore)
+                if (this.pendingBuffer == 2 /* Buf.IfCursor */ && !cursorBefore && !view.isEditable)
                     this.pendingBuffer = 0 /* Buf.No */;
                 this.flushBuffer(active);
                 if (cursorBefore) {
@@ -1788,6 +1799,7 @@ class NullWidget extends WidgetType {
     eq(other) { return other.tag == this.tag; }
     toDOM() { return document.createElement(this.tag); }
     updateDOM(elt) { return elt.nodeName.toLowerCase() == this.tag; }
+    get isHidden() { return true; }
 }
 
 const clickAddsSelectionRange = /*@__PURE__*/Facet.define();
@@ -2640,7 +2652,7 @@ class DocView extends ContentView {
         let head = main.empty ? anchor : this.domAtPos(main.head);
         // Always reset on Firefox when next to an uneditable node to
         // avoid invisible cursor bugs (#111)
-        if (browser.gecko && main.empty && betweenUneditable(anchor)) {
+        if (browser.gecko && main.empty && !this.compositionDeco.size && betweenUneditable(anchor)) {
             let dummy = document.createTextNode("");
             this.view.observer.ignore(() => anchor.node.insertBefore(dummy, anchor.node.childNodes[anchor.offset] || null));
             anchor = head = new DOMPos(dummy, 0);
@@ -3434,7 +3446,15 @@ class InputState {
         // first, false means first has already been marked for this
         // composition)
         this.compositionFirstChange = null;
+        // End time of the previous composition
         this.compositionEndedAt = 0;
+        // Used in a kludge to detect when an Enter keypress should be
+        // considered part of the composition on Safari, which fires events
+        // in the wrong order
+        this.compositionPendingKey = false;
+        // Used to categorize changes as part of a composition, even when
+        // the mutation events fire shortly after the compositionend event
+        this.compositionPendingChange = false;
         this.mouseSelection = null;
         let handleEvent = (handler, event) => {
             if (this.ignoreDuringComposition(event))
@@ -3591,8 +3611,8 @@ class InputState {
         // compositionend and keydown events are sometimes emitted in the
         // wrong order. The key event should still be ignored, even when
         // it happens after the compositionend event.
-        if (browser.safari && !browser.ios && Date.now() - this.compositionEndedAt < 100) {
-            this.compositionEndedAt = 0;
+        if (browser.safari && !browser.ios && this.compositionPendingKey && Date.now() - this.compositionEndedAt < 100) {
+            this.compositionPendingKey = false;
             return true;
         }
         return false;
@@ -3624,8 +3644,9 @@ const PendingKeys = [
 const EmacsyPendingKeys = "dthko";
 // Key codes for modifier keys
 const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
+const dragScrollMargin = 6;
 function dragScrollSpeed(dist) {
-    return dist * 0.7 + 8;
+    return Math.max(0, dist) * 0.7 + 8;
 }
 class MouseSelection {
     constructor(view, startEvent, style, mustSelect) {
@@ -3662,13 +3683,13 @@ class MouseSelection {
         let sx = 0, sy = 0;
         let rect = ((_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect())
             || { left: 0, top: 0, right: this.view.win.innerWidth, bottom: this.view.win.innerHeight };
-        if (event.clientX <= rect.left)
+        if (event.clientX <= rect.left + dragScrollMargin)
             sx = -dragScrollSpeed(rect.left - event.clientX);
-        else if (event.clientX >= rect.right)
+        else if (event.clientX >= rect.right - dragScrollMargin)
             sx = dragScrollSpeed(event.clientX - rect.right);
-        if (event.clientY <= rect.top)
+        if (event.clientY <= rect.top + dragScrollMargin)
             sy = -dragScrollSpeed(rect.top - event.clientY);
-        else if (event.clientY >= rect.bottom)
+        else if (event.clientY >= rect.bottom - dragScrollMargin)
             sy = dragScrollSpeed(event.clientY - rect.bottom);
         this.setScrollSpeed(sx, sy);
     }
@@ -3915,7 +3936,7 @@ function basicMouseSelection(view, event) {
             }
         },
         get(event, extend, multiple) {
-            let cur = queryPos(view, event);
+            let cur = queryPos(view, event), removed;
             let range = rangeForClick(view, cur.pos, cur.bias, type);
             if (start.pos != cur.pos && !extend) {
                 let startRange = rangeForClick(view, start.pos, start.bias, type);
@@ -3924,8 +3945,8 @@ function basicMouseSelection(view, event) {
             }
             if (extend)
                 return startSel.replaceRange(startSel.main.extend(range.from, range.to));
-            else if (multiple && startSel.ranges.length > 1 && startSel.ranges.some(r => r.eq(range)))
-                return removeRange(startSel, range);
+            else if (multiple && type == 1 && startSel.ranges.length > 1 && (removed = removeRangeAround(startSel, cur.pos)))
+                return removed;
             else if (multiple)
                 return startSel.addRange(range);
             else
@@ -3933,11 +3954,13 @@ function basicMouseSelection(view, event) {
         }
     };
 }
-function removeRange(sel, range) {
-    for (let i = 0;; i++) {
-        if (sel.ranges[i].eq(range))
+function removeRangeAround(sel, pos) {
+    for (let i = 0; i < sel.ranges.length; i++) {
+        let { from, to } = sel.ranges[i];
+        if (from <= pos && to >= pos)
             return EditorSelection.create(sel.ranges.slice(0, i).concat(sel.ranges.slice(i + 1)), sel.mainIndex == i ? 0 : sel.mainIndex - (sel.mainIndex > i ? 1 : 0));
     }
+    return null;
 }
 handlers.dragstart = (view, event) => {
     let { selection: { main } } = view.state;
@@ -4114,6 +4137,8 @@ handlers.compositionstart = handlers.compositionupdate = view => {
 handlers.compositionend = view => {
     view.inputState.composing = -1;
     view.inputState.compositionEndedAt = Date.now();
+    view.inputState.compositionPendingKey = true;
+    view.inputState.compositionPendingChange = view.observer.pendingRecords().length > 0;
     view.inputState.compositionFirstChange = null;
     if (browser.chrome && browser.android)
         view.observer.flushSoon();
@@ -5768,8 +5793,7 @@ function applyDOMChange(view, domChange) {
         }
         else {
             let changes = startState.changes(change);
-            let mainSel = newSel && !startState.selection.main.eq(newSel.main) && newSel.main.to <= changes.newLength
-                ? newSel.main : undefined;
+            let mainSel = newSel && newSel.main.to <= changes.newLength ? newSel.main : undefined;
             // Try to apply a composition change to all cursors
             if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
                 change.to <= sel.to && change.to >= sel.to - 10) {
@@ -5803,7 +5827,9 @@ function applyDOMChange(view, domChange) {
             }
         }
         let userEvent = "input.type";
-        if (view.composing) {
+        if (view.composing ||
+            view.inputState.compositionPendingChange && view.inputState.compositionEndedAt > Date.now() - 50) {
+            view.inputState.compositionPendingChange = false;
             userEvent += ".compose";
             if (view.inputState.compositionFirstChange) {
                 userEvent += ".start";
@@ -6179,10 +6205,13 @@ class DOMObserver {
         }
         this.flush();
     }
-    processRecords() {
-        let records = this.queue;
+    pendingRecords() {
         for (let mut of this.observer.takeRecords())
-            records.push(mut);
+            this.queue.push(mut);
+        return this.queue;
+    }
+    processRecords() {
+        let records = this.pendingRecords();
         if (records.length)
             this.queue = [];
         let from = -1, to = -1, typeOver = false;

package/package.json

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