@codemirror/view 6.9.2 → 6.9.4

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## 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
+
+Work around a Firefox issue that caused `coordsAtPos` to return rectangles with the full line height on empty lines.
+
+Opening a context menu by clicking below the content element but inside the editor now properly shows the browser's menu for editable elements.
+
+Fix an issue that broke composition (especially of Chinese IME) after widget decorations.
+
+Fix an issue that would cause the cursor to jump around during compositions inside nested mark decorations.
+
 ## 6.9.2 (2023-03-08)
 
 ### 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)
@@ -957,8 +961,9 @@ function scanCompositionTree(pos, side, view, text, enterView, fromText) {
 }
 function posFromDOMInCompositionTree(node, offset, view, text) {
     if (view instanceof MarkView) {
+        let pos = 0;
         for (let child of view.children) {
-            let pos = 0, hasComp = contains(child.dom, text);
+            let hasComp = contains(child.dom, text);
             if (contains(child.dom, node))
                 return pos + (hasComp ? posFromDOMInCompositionTree(node, offset, child, text) : child.localPosFromDOM(node, offset));
             pos += hasComp ? text.nodeValue.length : child.length;
@@ -992,7 +997,7 @@ class WidgetBufferView extends ContentView {
         }
     }
     getSide() { return this.side; }
-    domAtPos(pos) { return DOMPos.before(this.dom); }
+    domAtPos(pos) { return this.side > 0 ? DOMPos.before(this.dom) : DOMPos.after(this.dom); }
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
@@ -1006,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) {
@@ -1079,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;
                 }
@@ -1193,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.
     */
@@ -1516,7 +1527,7 @@ class LineView extends ContentView {
     measureTextSize() {
         if (this.children.length == 0 || this.length > 20)
             return null;
-        let totalWidth = 0;
+        let totalWidth = 0, textHeight;
         for (let child of this.children) {
             if (!(child instanceof TextView) || /[^ -~]/.test(child.text))
                 return null;
@@ -1524,14 +1535,26 @@ class LineView extends ContentView {
             if (rects.length != 1)
                 return null;
             totalWidth += rects[0].width;
+            textHeight = rects[0].height;
         }
         return !totalWidth ? null : {
             lineHeight: this.dom.getBoundingClientRect().height,
-            charWidth: totalWidth / this.length
+            charWidth: totalWidth / this.length,
+            textHeight
         };
     }
     coordsAt(pos, side) {
-        return coordsInChildren(this, pos, side);
+        let rect = coordsInChildren(this, pos, side);
+        // Correct rectangle height for empty lines when the returned
+        // height is larger than the text height.
+        if (!this.children.length && rect && this.parent) {
+            let { heightOracle } = this.parent.view.viewState, height = rect.bottom - rect.top;
+            if (Math.abs(height - heightOracle.lineHeight) < 2 && heightOracle.textHeight < height) {
+                let dist = (height - heightOracle.textHeight) / 2;
+                return { top: rect.top + dist, bottom: rect.bottom - dist, left: rect.left, right: rect.left };
+            }
+        }
+        return rect;
     }
     become(_other) { return false; }
     get type() { return exports.BlockType.Text; }
@@ -1592,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;
@@ -1723,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) {
@@ -1780,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();
@@ -2633,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);
@@ -2812,7 +2837,7 @@ class DocView extends ContentView {
             }
         }
         // If no workable line exists, force a layout of a measurable element
-        let dummy = document.createElement("div"), lineHeight, charWidth;
+        let dummy = document.createElement("div"), lineHeight, charWidth, textHeight;
         dummy.className = "cm-line";
         dummy.style.width = "99999px";
         dummy.textContent = "abc def ghi jkl mno pqr stu";
@@ -2821,9 +2846,10 @@ class DocView extends ContentView {
             let rect = clientRectsFor(dummy.firstChild)[0];
             lineHeight = dummy.getBoundingClientRect().height;
             charWidth = rect ? rect.width / 27 : 7;
+            textHeight = rect ? rect.height : lineHeight;
             dummy.remove();
         });
-        return { lineHeight, charWidth };
+        return { lineHeight, charWidth, textHeight };
     }
     childCursor(pos = this.length) {
         // Move back to start of last element when possible, so that
@@ -2988,22 +3014,32 @@ class CompositionWidget extends WidgetType {
     ignoreEvent() { return false; }
     get customView() { return CompositionView; }
 }
-function nearbyTextNode(node, offset, side) {
-    for (;;) {
-        if (node.nodeType == 3)
-            return node;
-        if (node.nodeType == 1 && offset > 0 && side <= 0) {
-            node = node.childNodes[offset - 1];
-            offset = maxOffset(node);
-        }
-        else if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
-            node = node.childNodes[offset];
-            offset = 0;
+function nearbyTextNode(startNode, startOffset, side) {
+    if (side <= 0)
+        for (let node = startNode, offset = startOffset;;) {
+            if (node.nodeType == 3)
+                return node;
+            if (node.nodeType == 1 && offset > 0) {
+                node = node.childNodes[offset - 1];
+                offset = maxOffset(node);
+            }
+            else {
+                break;
+            }
         }
-        else {
-            return null;
+    if (side >= 0)
+        for (let node = startNode, offset = startOffset;;) {
+            if (node.nodeType == 3)
+                return node;
+            if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
+                node = node.childNodes[offset];
+                offset = 0;
+            }
+            else {
+                break;
+            }
         }
-    }
+    return null;
 }
 function nextToUneditable(node, offset) {
     if (node.nodeType != 1)
@@ -3416,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))
@@ -3439,8 +3483,16 @@ class InputState {
             this.registeredEvents.push(type);
         }
         view.scrollDOM.addEventListener("mousedown", (event) => {
-            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom)
+            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom) {
                 handleEvent(handlers.mousedown, event);
+                if (!event.defaultPrevented && event.button == 2) {
+                    // Make sure the content covers the entire scroller height, in order
+                    // to catch a native context menu click below it
+                    let start = view.contentDOM.style.minHeight;
+                    view.contentDOM.style.minHeight = "100%";
+                    setTimeout(() => view.contentDOM.style.minHeight = start, 200);
+                }
+            }
         });
         if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
             // On Chrome 102, viewport updates somehow stop wheel-based
@@ -3565,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;
@@ -3598,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) {
@@ -3636,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);
     }
@@ -3889,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);
@@ -3898,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
@@ -3907,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;
@@ -4088,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();
@@ -4134,8 +4191,9 @@ class HeightOracle {
         this.lineWrapping = lineWrapping;
         this.doc = state.Text.empty;
         this.heightSamples = {};
-        this.lineHeight = 14;
+        this.lineHeight = 14; // The height of an entire line (line-height)
         this.charWidth = 7;
+        this.textHeight = 14; // The height of the actual font (font-size)
         this.lineLength = 30;
         // Used to track, during updateHeight, if any actual heights changed
         this.heightChanged = false;
@@ -4170,12 +4228,13 @@ class HeightOracle {
         }
         return newHeight;
     }
-    refresh(whiteSpace, lineHeight, charWidth, lineLength, knownHeights) {
+    refresh(whiteSpace, lineHeight, charWidth, textHeight, lineLength, knownHeights) {
         let lineWrapping = wrappingWhiteSpace.indexOf(whiteSpace) > -1;
         let changed = Math.round(lineHeight) != Math.round(this.lineHeight) || this.lineWrapping != lineWrapping;
         this.lineWrapping = lineWrapping;
         this.lineHeight = lineHeight;
         this.charWidth = charWidth;
+        this.textHeight = textHeight;
         this.lineLength = lineLength;
         if (changed) {
             this.heightSamples = {};
@@ -5023,8 +5082,8 @@ class ViewState {
             if (oracle.mustRefreshForHeights(lineHeights))
                 refresh = true;
             if (refresh || oracle.lineWrapping && Math.abs(contentWidth - this.contentDOMWidth) > oracle.charWidth) {
-                let { lineHeight, charWidth } = view.docView.measureTextSize();
-                refresh = lineHeight > 0 && oracle.refresh(whiteSpace, lineHeight, charWidth, contentWidth / charWidth, lineHeights);
+                let { lineHeight, charWidth, textHeight } = view.docView.measureTextSize();
+                refresh = lineHeight > 0 && oracle.refresh(whiteSpace, lineHeight, charWidth, textHeight, contentWidth / charWidth, lineHeights);
                 if (refresh) {
                     view.docView.minWidth = 0;
                     result |= 8 /* UpdateFlag.Geometry */;
@@ -5741,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) {
@@ -5776,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";
@@ -6152,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)
@@ -953,8 +957,9 @@ function scanCompositionTree(pos, side, view, text, enterView, fromText) {
 }
 function posFromDOMInCompositionTree(node, offset, view, text) {
     if (view instanceof MarkView) {
+        let pos = 0;
         for (let child of view.children) {
-            let pos = 0, hasComp = contains(child.dom, text);
+            let hasComp = contains(child.dom, text);
             if (contains(child.dom, node))
                 return pos + (hasComp ? posFromDOMInCompositionTree(node, offset, child, text) : child.localPosFromDOM(node, offset));
             pos += hasComp ? text.nodeValue.length : child.length;
@@ -988,7 +993,7 @@ class WidgetBufferView extends ContentView {
         }
     }
     getSide() { return this.side; }
-    domAtPos(pos) { return DOMPos.before(this.dom); }
+    domAtPos(pos) { return this.side > 0 ? DOMPos.before(this.dom) : DOMPos.after(this.dom); }
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
@@ -1002,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) {
@@ -1075,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;
                 }
@@ -1189,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.
     */
@@ -1511,7 +1522,7 @@ class LineView extends ContentView {
     measureTextSize() {
         if (this.children.length == 0 || this.length > 20)
             return null;
-        let totalWidth = 0;
+        let totalWidth = 0, textHeight;
         for (let child of this.children) {
             if (!(child instanceof TextView) || /[^ -~]/.test(child.text))
                 return null;
@@ -1519,14 +1530,26 @@ class LineView extends ContentView {
             if (rects.length != 1)
                 return null;
             totalWidth += rects[0].width;
+            textHeight = rects[0].height;
         }
         return !totalWidth ? null : {
             lineHeight: this.dom.getBoundingClientRect().height,
-            charWidth: totalWidth / this.length
+            charWidth: totalWidth / this.length,
+            textHeight
         };
     }
     coordsAt(pos, side) {
-        return coordsInChildren(this, pos, side);
+        let rect = coordsInChildren(this, pos, side);
+        // Correct rectangle height for empty lines when the returned
+        // height is larger than the text height.
+        if (!this.children.length && rect && this.parent) {
+            let { heightOracle } = this.parent.view.viewState, height = rect.bottom - rect.top;
+            if (Math.abs(height - heightOracle.lineHeight) < 2 && heightOracle.textHeight < height) {
+                let dist = (height - heightOracle.textHeight) / 2;
+                return { top: rect.top + dist, bottom: rect.bottom - dist, left: rect.left, right: rect.left };
+            }
+        }
+        return rect;
     }
     become(_other) { return false; }
     get type() { return BlockType.Text; }
@@ -1587,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;
@@ -1718,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) {
@@ -1775,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();
@@ -2627,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);
@@ -2806,7 +2831,7 @@ class DocView extends ContentView {
             }
         }
         // If no workable line exists, force a layout of a measurable element
-        let dummy = document.createElement("div"), lineHeight, charWidth;
+        let dummy = document.createElement("div"), lineHeight, charWidth, textHeight;
         dummy.className = "cm-line";
         dummy.style.width = "99999px";
         dummy.textContent = "abc def ghi jkl mno pqr stu";
@@ -2815,9 +2840,10 @@ class DocView extends ContentView {
             let rect = clientRectsFor(dummy.firstChild)[0];
             lineHeight = dummy.getBoundingClientRect().height;
             charWidth = rect ? rect.width / 27 : 7;
+            textHeight = rect ? rect.height : lineHeight;
             dummy.remove();
         });
-        return { lineHeight, charWidth };
+        return { lineHeight, charWidth, textHeight };
     }
     childCursor(pos = this.length) {
         // Move back to start of last element when possible, so that
@@ -2982,22 +3008,32 @@ class CompositionWidget extends WidgetType {
     ignoreEvent() { return false; }
     get customView() { return CompositionView; }
 }
-function nearbyTextNode(node, offset, side) {
-    for (;;) {
-        if (node.nodeType == 3)
-            return node;
-        if (node.nodeType == 1 && offset > 0 && side <= 0) {
-            node = node.childNodes[offset - 1];
-            offset = maxOffset(node);
-        }
-        else if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
-            node = node.childNodes[offset];
-            offset = 0;
+function nearbyTextNode(startNode, startOffset, side) {
+    if (side <= 0)
+        for (let node = startNode, offset = startOffset;;) {
+            if (node.nodeType == 3)
+                return node;
+            if (node.nodeType == 1 && offset > 0) {
+                node = node.childNodes[offset - 1];
+                offset = maxOffset(node);
+            }
+            else {
+                break;
+            }
         }
-        else {
-            return null;
+    if (side >= 0)
+        for (let node = startNode, offset = startOffset;;) {
+            if (node.nodeType == 3)
+                return node;
+            if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
+                node = node.childNodes[offset];
+                offset = 0;
+            }
+            else {
+                break;
+            }
         }
-    }
+    return null;
 }
 function nextToUneditable(node, offset) {
     if (node.nodeType != 1)
@@ -3410,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))
@@ -3433,8 +3477,16 @@ class InputState {
             this.registeredEvents.push(type);
         }
         view.scrollDOM.addEventListener("mousedown", (event) => {
-            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom)
+            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom) {
                 handleEvent(handlers.mousedown, event);
+                if (!event.defaultPrevented && event.button == 2) {
+                    // Make sure the content covers the entire scroller height, in order
+                    // to catch a native context menu click below it
+                    let start = view.contentDOM.style.minHeight;
+                    view.contentDOM.style.minHeight = "100%";
+                    setTimeout(() => view.contentDOM.style.minHeight = start, 200);
+                }
+            }
         });
         if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
             // On Chrome 102, viewport updates somehow stop wheel-based
@@ -3559,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;
@@ -3592,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) {
@@ -3630,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);
     }
@@ -3883,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);
@@ -3892,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
@@ -3901,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;
@@ -4082,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();
@@ -4128,8 +4185,9 @@ class HeightOracle {
         this.lineWrapping = lineWrapping;
         this.doc = Text.empty;
         this.heightSamples = {};
-        this.lineHeight = 14;
+        this.lineHeight = 14; // The height of an entire line (line-height)
         this.charWidth = 7;
+        this.textHeight = 14; // The height of the actual font (font-size)
         this.lineLength = 30;
         // Used to track, during updateHeight, if any actual heights changed
         this.heightChanged = false;
@@ -4164,12 +4222,13 @@ class HeightOracle {
         }
         return newHeight;
     }
-    refresh(whiteSpace, lineHeight, charWidth, lineLength, knownHeights) {
+    refresh(whiteSpace, lineHeight, charWidth, textHeight, lineLength, knownHeights) {
         let lineWrapping = wrappingWhiteSpace.indexOf(whiteSpace) > -1;
         let changed = Math.round(lineHeight) != Math.round(this.lineHeight) || this.lineWrapping != lineWrapping;
         this.lineWrapping = lineWrapping;
         this.lineHeight = lineHeight;
         this.charWidth = charWidth;
+        this.textHeight = textHeight;
         this.lineLength = lineLength;
         if (changed) {
             this.heightSamples = {};
@@ -5016,8 +5075,8 @@ class ViewState {
             if (oracle.mustRefreshForHeights(lineHeights))
                 refresh = true;
             if (refresh || oracle.lineWrapping && Math.abs(contentWidth - this.contentDOMWidth) > oracle.charWidth) {
-                let { lineHeight, charWidth } = view.docView.measureTextSize();
-                refresh = lineHeight > 0 && oracle.refresh(whiteSpace, lineHeight, charWidth, contentWidth / charWidth, lineHeights);
+                let { lineHeight, charWidth, textHeight } = view.docView.measureTextSize();
+                refresh = lineHeight > 0 && oracle.refresh(whiteSpace, lineHeight, charWidth, textHeight, contentWidth / charWidth, lineHeights);
                 if (refresh) {
                     view.docView.minWidth = 0;
                     result |= 8 /* UpdateFlag.Geometry */;
@@ -5734,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) {
@@ -5769,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";
@@ -6145,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.2",
+  "version": "6.9.4",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",