@codemirror/view 6.9.3 → 6.9.5

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 6.9.5 (2023-04-17)
+
+### Bug fixes
+
+Avoid disrupting the composition in specific cases where Safari invasively changes the DOM structure in the middle of a composition.
+
+Fix a bug that prevented `destroy` being called on hover tooltips.
+
+Fix a bug where the editor could take focus when content changes required it to restore the DOM selection.
+
+Fix height layout corruption caused by a division by zero.
+
+Make sure styles targeting the editor's focus status are specific enough to not cause them to apply to editors nested inside another focused editor. This will require themes to adjust their selection background styles to match the new specificity.
+
+## 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)
@@ -906,14 +910,14 @@ class CompositionView extends WidgetView {
         let { topView, text } = this.widget;
         if (!topView)
             return new DOMPos(text, Math.min(pos, text.nodeValue.length));
-        return scanCompositionTree(pos, 0, topView, text, (v, p) => v.domAtPos(p), p => new DOMPos(text, Math.min(p, text.nodeValue.length)));
+        return scanCompositionTree(pos, 0, topView, text, this.length - topView.length, (v, p) => v.domAtPos(p), (text, p) => new DOMPos(text, Math.min(p, text.nodeValue.length)));
     }
     sync() { this.setDOM(this.widget.toDOM()); }
     localPosFromDOM(node, offset) {
         let { topView, text } = this.widget;
         if (!topView)
             return Math.min(offset, this.length);
-        return posFromDOMInCompositionTree(node, offset, topView, text);
+        return posFromDOMInCompositionTree(node, offset, topView, text, this.length - topView.length);
     }
     ignoreMutation() { return false; }
     get overrideDOMText() { return null; }
@@ -921,7 +925,7 @@ class CompositionView extends WidgetView {
         let { topView, text } = this.widget;
         if (!topView)
             return textCoords(text, pos, side);
-        return scanCompositionTree(pos, side, topView, text, (v, pos, side) => v.coordsAt(pos, side), (pos, side) => textCoords(text, pos, side));
+        return scanCompositionTree(pos, side, topView, text, this.length - topView.length, (v, pos, side) => v.coordsAt(pos, side), (text, pos, side) => textCoords(text, pos, side));
     }
     destroy() {
         var _a;
@@ -934,35 +938,68 @@ class CompositionView extends WidgetView {
 // Uses the old structure of a chunk of content view frozen for
 // composition to try and find a reasonable DOM location for the given
 // offset.
-function scanCompositionTree(pos, side, view, text, enterView, fromText) {
+function scanCompositionTree(pos, side, view, text, dLen, enterView, fromText) {
     if (view instanceof MarkView) {
         for (let child = view.dom.firstChild; child; child = child.nextSibling) {
             let desc = ContentView.get(child);
-            if (!desc)
-                return fromText(pos, side);
-            let hasComp = contains(child, text);
-            let len = desc.length + (hasComp ? text.nodeValue.length : 0);
-            if (pos < len || pos == len && desc.getSide() <= 0)
-                return hasComp ? scanCompositionTree(pos, side, desc, text, enterView, fromText) : enterView(desc, pos, side);
-            pos -= len;
+            if (!desc) {
+                let inner = scanCompositionNode(pos, side, child, fromText);
+                if (typeof inner != "number")
+                    return inner;
+                pos = inner;
+            }
+            else {
+                let hasComp = contains(child, text);
+                let len = desc.length + (hasComp ? dLen : 0);
+                if (pos < len || pos == len && desc.getSide() <= 0)
+                    return hasComp ? scanCompositionTree(pos, side, desc, text, dLen, enterView, fromText) : enterView(desc, pos, side);
+                pos -= len;
+            }
         }
         return enterView(view, view.length, -1);
     }
     else if (view.dom == text) {
-        return fromText(pos, side);
+        return fromText(text, pos, side);
     }
     else {
         return enterView(view, pos, side);
     }
 }
-function posFromDOMInCompositionTree(node, offset, view, text) {
+function scanCompositionNode(pos, side, node, fromText) {
+    if (node.nodeType == 3) {
+        let len = node.nodeValue.length;
+        if (pos <= len)
+            return fromText(node, pos, side);
+        pos -= len;
+    }
+    else if (node.nodeType == 1 && node.contentEditable != "false") {
+        for (let child = node.firstChild; child; child = child.nextSibling) {
+            let inner = scanCompositionNode(pos, side, child, fromText);
+            if (typeof inner != "number")
+                return inner;
+            pos = inner;
+        }
+    }
+    return pos;
+}
+function posFromDOMInCompositionTree(node, offset, view, text, dLen) {
     if (view instanceof MarkView) {
         let pos = 0;
-        for (let child of view.children) {
-            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;
+        for (let child = view.dom.firstChild; child; child = child.nextSibling) {
+            let childView = ContentView.get(child);
+            if (childView) {
+                let hasComp = contains(child, text);
+                if (contains(child, node))
+                    return pos + (hasComp ? posFromDOMInCompositionTree(node, offset, childView, text, dLen)
+                        : childView.localPosFromDOM(node, offset));
+                pos += childView.length + (hasComp ? dLen : 0);
+            }
+            else {
+                let inner = posFromDOMInOpaqueNode(node, offset, child);
+                if (inner.result != null)
+                    return pos + inner.result;
+                pos += inner.size;
+            }
         }
     }
     else if (view.dom == text) {
@@ -970,6 +1007,27 @@ function posFromDOMInCompositionTree(node, offset, view, text) {
     }
     return view.localPosFromDOM(node, offset);
 }
+function posFromDOMInOpaqueNode(node, offset, target) {
+    if (target.nodeType == 3) {
+        return node == target ? { result: offset } : { size: target.nodeValue.length };
+    }
+    else if (target.nodeType == 1 && target.contentEditable != "false") {
+        let pos = 0;
+        for (let child = target.firstChild, i = 0;; child = child.nextSibling, i++) {
+            if (node == target && i == offset)
+                return { result: pos };
+            if (!child)
+                return { size: pos };
+            let inner = posFromDOMInOpaqueNode(node, offset, child);
+            if (inner.result != null)
+                return { result: offset + inner.result };
+            pos += inner.size;
+        }
+    }
+    else {
+        return target.contains(node) ? { result: 0 } : { size: 0 };
+    }
+}
 // These are drawn around uneditable widgets to avoid a number of
 // browser bugs that show up when the cursor is directly next to
 // uneditable inline content.
@@ -1007,6 +1065,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 +1139,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 +1254,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 +1669,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 +1800,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 +1858,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();
@@ -2636,7 +2702,10 @@ class DocView extends ContentView {
     updateSelection(mustRead = false, fromPointer = false) {
         if (mustRead || !this.view.observer.selectionRange.focusNode)
             this.view.observer.readSelectionRange();
-        if (!(fromPointer || this.mayControlSelection()))
+        let activeElt = this.view.root.activeElement, focused = activeElt == this.dom;
+        let selectionNotFocus = !focused &&
+            hasSelection(this.dom, this.view.observer.selectionRange) && !(activeElt && this.dom.contains(activeElt));
+        if (!(focused || fromPointer || selectionNotFocus))
             return;
         let force = this.forceSelection;
         this.forceSelection = false;
@@ -2646,7 +2715,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);
@@ -2706,6 +2775,11 @@ class DocView extends ContentView {
                     rawSel.removeAllRanges();
                     rawSel.addRange(range);
                 }
+                if (selectionNotFocus && this.view.root.activeElement == this.dom) {
+                    this.dom.blur();
+                    if (activeElt)
+                        activeElt.focus();
+                }
             });
             this.view.observer.setSelectionRange(anchor, head);
         }
@@ -2739,11 +2813,6 @@ class DocView extends ContentView {
         if (view.docView.posFromDOM(newRange.anchorNode, newRange.anchorOffset) != cursor.from)
             sel.collapse(anchorNode, anchorOffset);
     }
-    mayControlSelection() {
-        let active = this.view.root.activeElement;
-        return active == this.dom ||
-            hasSelection(this.dom, this.view.observer.selectionRange) && !(active && this.dom.contains(active));
-    }
     nearest(dom) {
         for (let cur = dom; cur;) {
             let domView = ContentView.get(cur);
@@ -3440,7 +3509,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 +3674,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 +3707,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 +3746,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 +3999,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 +4008,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 +4017,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 +4200,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();
@@ -4467,7 +4549,8 @@ class HeightMapGap extends HeightMap {
         if (oracle.lineWrapping) {
             let totalPerLine = Math.min(this.height, oracle.lineHeight * lines);
             perLine = totalPerLine / lines;
-            perChar = (this.height - totalPerLine) / (this.length - lines - 1);
+            if (this.length > lines + 1)
+                perChar = (this.height - totalPerLine) / (this.length - lines - 1);
         }
         else {
             perLine = this.height / lines;
@@ -5483,16 +5566,16 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     "&dark .cm-selectionBackground": {
         background: "#222"
     },
-    "&light.cm-focused .cm-selectionBackground": {
+    "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
         background: "#d7d4f0"
     },
-    "&dark.cm-focused .cm-selectionBackground": {
+    "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
         background: "#233"
     },
     ".cm-cursorLayer": {
         pointerEvents: "none"
     },
-    "&.cm-focused .cm-cursorLayer": {
+    "&.cm-focused > .cm-scroller > .cm-cursorLayer": {
         animation: "steps(1) cm-blink 1.2s infinite"
     },
     // Two animations defined so that we can switch between them to
@@ -5514,7 +5597,7 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     ".cm-dropCursor": {
         position: "absolute"
     },
-    "&.cm-focused .cm-cursor": {
+    "&.cm-focused > .cm-scroller > .cm-cursorLayer .cm-cursor": {
         display: "block"
     },
     "&light .cm-activeLine": { backgroundColor: "#cceeff44" },
@@ -5775,8 +5858,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 +5892,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 +6270,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;
@@ -8782,6 +8869,11 @@ class HoverTooltipHost {
     update(update) {
         this.manager.update(update);
     }
+    destroy() {
+        var _a;
+        for (let t of this.manager.tooltipViews)
+            (_a = t.destroy) === null || _a === void 0 ? void 0 : _a.call(t);
+    }
 }
 const showHoverTooltipHost = showTooltip.compute([showHoverTooltip], state => {
     let tooltips = state.facet(showHoverTooltip).filter(t => t);

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)
@@ -902,14 +906,14 @@ class CompositionView extends WidgetView {
         let { topView, text } = this.widget;
         if (!topView)
             return new DOMPos(text, Math.min(pos, text.nodeValue.length));
-        return scanCompositionTree(pos, 0, topView, text, (v, p) => v.domAtPos(p), p => new DOMPos(text, Math.min(p, text.nodeValue.length)));
+        return scanCompositionTree(pos, 0, topView, text, this.length - topView.length, (v, p) => v.domAtPos(p), (text, p) => new DOMPos(text, Math.min(p, text.nodeValue.length)));
     }
     sync() { this.setDOM(this.widget.toDOM()); }
     localPosFromDOM(node, offset) {
         let { topView, text } = this.widget;
         if (!topView)
             return Math.min(offset, this.length);
-        return posFromDOMInCompositionTree(node, offset, topView, text);
+        return posFromDOMInCompositionTree(node, offset, topView, text, this.length - topView.length);
     }
     ignoreMutation() { return false; }
     get overrideDOMText() { return null; }
@@ -917,7 +921,7 @@ class CompositionView extends WidgetView {
         let { topView, text } = this.widget;
         if (!topView)
             return textCoords(text, pos, side);
-        return scanCompositionTree(pos, side, topView, text, (v, pos, side) => v.coordsAt(pos, side), (pos, side) => textCoords(text, pos, side));
+        return scanCompositionTree(pos, side, topView, text, this.length - topView.length, (v, pos, side) => v.coordsAt(pos, side), (text, pos, side) => textCoords(text, pos, side));
     }
     destroy() {
         var _a;
@@ -930,35 +934,68 @@ class CompositionView extends WidgetView {
 // Uses the old structure of a chunk of content view frozen for
 // composition to try and find a reasonable DOM location for the given
 // offset.
-function scanCompositionTree(pos, side, view, text, enterView, fromText) {
+function scanCompositionTree(pos, side, view, text, dLen, enterView, fromText) {
     if (view instanceof MarkView) {
         for (let child = view.dom.firstChild; child; child = child.nextSibling) {
             let desc = ContentView.get(child);
-            if (!desc)
-                return fromText(pos, side);
-            let hasComp = contains(child, text);
-            let len = desc.length + (hasComp ? text.nodeValue.length : 0);
-            if (pos < len || pos == len && desc.getSide() <= 0)
-                return hasComp ? scanCompositionTree(pos, side, desc, text, enterView, fromText) : enterView(desc, pos, side);
-            pos -= len;
+            if (!desc) {
+                let inner = scanCompositionNode(pos, side, child, fromText);
+                if (typeof inner != "number")
+                    return inner;
+                pos = inner;
+            }
+            else {
+                let hasComp = contains(child, text);
+                let len = desc.length + (hasComp ? dLen : 0);
+                if (pos < len || pos == len && desc.getSide() <= 0)
+                    return hasComp ? scanCompositionTree(pos, side, desc, text, dLen, enterView, fromText) : enterView(desc, pos, side);
+                pos -= len;
+            }
         }
         return enterView(view, view.length, -1);
     }
     else if (view.dom == text) {
-        return fromText(pos, side);
+        return fromText(text, pos, side);
     }
     else {
         return enterView(view, pos, side);
     }
 }
-function posFromDOMInCompositionTree(node, offset, view, text) {
+function scanCompositionNode(pos, side, node, fromText) {
+    if (node.nodeType == 3) {
+        let len = node.nodeValue.length;
+        if (pos <= len)
+            return fromText(node, pos, side);
+        pos -= len;
+    }
+    else if (node.nodeType == 1 && node.contentEditable != "false") {
+        for (let child = node.firstChild; child; child = child.nextSibling) {
+            let inner = scanCompositionNode(pos, side, child, fromText);
+            if (typeof inner != "number")
+                return inner;
+            pos = inner;
+        }
+    }
+    return pos;
+}
+function posFromDOMInCompositionTree(node, offset, view, text, dLen) {
     if (view instanceof MarkView) {
         let pos = 0;
-        for (let child of view.children) {
-            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;
+        for (let child = view.dom.firstChild; child; child = child.nextSibling) {
+            let childView = ContentView.get(child);
+            if (childView) {
+                let hasComp = contains(child, text);
+                if (contains(child, node))
+                    return pos + (hasComp ? posFromDOMInCompositionTree(node, offset, childView, text, dLen)
+                        : childView.localPosFromDOM(node, offset));
+                pos += childView.length + (hasComp ? dLen : 0);
+            }
+            else {
+                let inner = posFromDOMInOpaqueNode(node, offset, child);
+                if (inner.result != null)
+                    return pos + inner.result;
+                pos += inner.size;
+            }
         }
     }
     else if (view.dom == text) {
@@ -966,6 +1003,27 @@ function posFromDOMInCompositionTree(node, offset, view, text) {
     }
     return view.localPosFromDOM(node, offset);
 }
+function posFromDOMInOpaqueNode(node, offset, target) {
+    if (target.nodeType == 3) {
+        return node == target ? { result: offset } : { size: target.nodeValue.length };
+    }
+    else if (target.nodeType == 1 && target.contentEditable != "false") {
+        let pos = 0;
+        for (let child = target.firstChild, i = 0;; child = child.nextSibling, i++) {
+            if (node == target && i == offset)
+                return { result: pos };
+            if (!child)
+                return { size: pos };
+            let inner = posFromDOMInOpaqueNode(node, offset, child);
+            if (inner.result != null)
+                return { result: offset + inner.result };
+            pos += inner.size;
+        }
+    }
+    else {
+        return target.contains(node) ? { result: 0 } : { size: 0 };
+    }
+}
 // These are drawn around uneditable widgets to avoid a number of
 // browser bugs that show up when the cursor is directly next to
 // uneditable inline content.
@@ -1003,6 +1061,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 +1135,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 +1250,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 +1664,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 +1795,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 +1853,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();
@@ -2630,7 +2696,10 @@ class DocView extends ContentView {
     updateSelection(mustRead = false, fromPointer = false) {
         if (mustRead || !this.view.observer.selectionRange.focusNode)
             this.view.observer.readSelectionRange();
-        if (!(fromPointer || this.mayControlSelection()))
+        let activeElt = this.view.root.activeElement, focused = activeElt == this.dom;
+        let selectionNotFocus = !focused &&
+            hasSelection(this.dom, this.view.observer.selectionRange) && !(activeElt && this.dom.contains(activeElt));
+        if (!(focused || fromPointer || selectionNotFocus))
             return;
         let force = this.forceSelection;
         this.forceSelection = false;
@@ -2640,7 +2709,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);
@@ -2700,6 +2769,11 @@ class DocView extends ContentView {
                     rawSel.removeAllRanges();
                     rawSel.addRange(range);
                 }
+                if (selectionNotFocus && this.view.root.activeElement == this.dom) {
+                    this.dom.blur();
+                    if (activeElt)
+                        activeElt.focus();
+                }
             });
             this.view.observer.setSelectionRange(anchor, head);
         }
@@ -2733,11 +2807,6 @@ class DocView extends ContentView {
         if (view.docView.posFromDOM(newRange.anchorNode, newRange.anchorOffset) != cursor.from)
             sel.collapse(anchorNode, anchorOffset);
     }
-    mayControlSelection() {
-        let active = this.view.root.activeElement;
-        return active == this.dom ||
-            hasSelection(this.dom, this.view.observer.selectionRange) && !(active && this.dom.contains(active));
-    }
     nearest(dom) {
         for (let cur = dom; cur;) {
             let domView = ContentView.get(cur);
@@ -3434,7 +3503,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 +3668,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 +3701,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 +3740,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 +3993,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 +4002,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 +4011,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 +4194,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();
@@ -4460,7 +4542,8 @@ class HeightMapGap extends HeightMap {
         if (oracle.lineWrapping) {
             let totalPerLine = Math.min(this.height, oracle.lineHeight * lines);
             perLine = totalPerLine / lines;
-            perChar = (this.height - totalPerLine) / (this.length - lines - 1);
+            if (this.length > lines + 1)
+                perChar = (this.height - totalPerLine) / (this.length - lines - 1);
         }
         else {
             perLine = this.height / lines;
@@ -5476,16 +5559,16 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     "&dark .cm-selectionBackground": {
         background: "#222"
     },
-    "&light.cm-focused .cm-selectionBackground": {
+    "&light.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
         background: "#d7d4f0"
     },
-    "&dark.cm-focused .cm-selectionBackground": {
+    "&dark.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground": {
         background: "#233"
     },
     ".cm-cursorLayer": {
         pointerEvents: "none"
     },
-    "&.cm-focused .cm-cursorLayer": {
+    "&.cm-focused > .cm-scroller > .cm-cursorLayer": {
         animation: "steps(1) cm-blink 1.2s infinite"
     },
     // Two animations defined so that we can switch between them to
@@ -5507,7 +5590,7 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     ".cm-dropCursor": {
         position: "absolute"
     },
-    "&.cm-focused .cm-cursor": {
+    "&.cm-focused > .cm-scroller > .cm-cursorLayer .cm-cursor": {
         display: "block"
     },
     "&light .cm-activeLine": { backgroundColor: "#cceeff44" },
@@ -5768,8 +5851,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 +5885,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 +6263,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;
@@ -8775,6 +8862,11 @@ class HoverTooltipHost {
     update(update) {
         this.manager.update(update);
     }
+    destroy() {
+        var _a;
+        for (let t of this.manager.tooltipViews)
+            (_a = t.destroy) === null || _a === void 0 ? void 0 : _a.call(t);
+    }
 }
 const showHoverTooltipHost = /*@__PURE__*/showTooltip.compute([showHoverTooltip], state => {
     let tooltips = state.facet(showHoverTooltip).filter(t => t);

package/package.json

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