@codemirror/view 6.9.4 → 6.9.5

package/CHANGELOG.md

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

package/dist/index.cjs

@@ -910,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; }
@@ -925,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;
@@ -938,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) {
@@ -974,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.
@@ -2648,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;
@@ -2718,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);
         }
@@ -2751,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);
@@ -4492,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;
@@ -5508,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
@@ -5539,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" },
@@ -8811,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

@@ -906,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; }
@@ -921,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;
@@ -934,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) {
@@ -970,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.
@@ -2642,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;
@@ -2712,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);
         }
@@ -2745,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);
@@ -4485,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;
@@ -5501,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
@@ -5532,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" },
@@ -8804,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.4",
+  "version": "6.9.5",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",