@codemirror/view 6.26.1 → 6.26.3

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 6.26.3 (2024-04-12)
+
+### Bug fixes
+
+Fix an issue where dispatching an update to an editor before it measured itself for the first time could cause the scroll position to incorrectly move.
+
+Fix a crash when multiple tooltips with arrows are shown.
+
+## 6.26.2 (2024-04-09)
+
+### Bug fixes
+
+Improve behavior of `scrollPastEnd` in a scaled editor.
+
+When available, use `Selection.getComposedRanges` on Safari to find the selection inside a shadow DOM.
+
+Remove the workaround that avoided inappropriate styling on composed text after a decoration again, since it breaks the stock Android virtual keyboard.
+
 ## 6.26.1 (2024-03-28)
 
 ### Bug fixes

package/dist/index.cjs

@@ -2704,11 +2704,10 @@ class DocView extends ContentView {
         super();
         this.view = view;
         this.decorations = [];
-        this.dynamicDecorationMap = [false];
+        this.dynamicDecorationMap = [];
         this.domChanged = null;
         this.hasComposition = null;
         this.markedForComposition = new Set;
-        this.compositionBarrier = Decoration.none;
         this.lastCompositionAfterCursor = false;
         // Track a minimum width for the editor. When measuring sizes in
         // measureVisibleLineHeights, this is updated to point at the width
@@ -2973,7 +2972,7 @@ class DocView extends ContentView {
     // composition, avoid moving it across it and disrupting the
     // composition.
     suppressWidgetCursorChange(sel, cursor) {
-        return this.hasComposition && cursor.empty && !this.compositionBarrier.size &&
+        return this.hasComposition && cursor.empty &&
             isEquivalentPosition(sel.focusNode, sel.focusOffset, sel.anchorNode, sel.anchorOffset) &&
             this.posFromDOM(sel.focusNode, sel.focusOffset) == cursor.head;
     }
@@ -3181,7 +3180,7 @@ class DocView extends ContentView {
         return Decoration.set(deco);
     }
     updateDeco() {
-        let i = 1;
+        let i = 0;
         let allDeco = this.view.state.facet(decorations).map(d => {
             let dynamic = this.dynamicDecorationMap[i++] = typeof d == "function";
             return dynamic ? d(this.view) : d;
@@ -3197,7 +3196,6 @@ class DocView extends ContentView {
             allDeco.push(state.RangeSet.join(outerDeco));
         }
         this.decorations = [
-            this.compositionBarrier,
             ...allDeco,
             this.computeBlockGapDeco(),
             this.view.viewState.lineGapDeco
@@ -3206,34 +3204,6 @@ class DocView extends ContentView {
             this.dynamicDecorationMap[i++] = false;
         return this.decorations;
     }
-    // Starting a composition will style the inserted text with the
-    // style of the text before it, and this is only cleared when the
-    // composition ends, because touching it before that will abort it.
-    // This (called from compositionstart handler) tries to notice when
-    // the cursor is after a non-inclusive mark, where the styling could
-    // be jarring, and insert an ad-hoc widget before the cursor to
-    // isolate it from the style before it.
-    maybeCreateCompositionBarrier() {
-        let { main: { head, empty } } = this.view.state.selection;
-        if (!empty)
-            return false;
-        let found = null;
-        for (let set of this.decorations) {
-            set.between(head, head, (from, to, value) => {
-                if (value.point)
-                    found = false;
-                else if (value.endSide < 0 && from < head && to == head)
-                    found = true;
-            });
-            if (found === false)
-                break;
-        }
-        this.compositionBarrier = found ? Decoration.set(compositionBarrierWidget.range(head)) : Decoration.none;
-        return !!found;
-    }
-    clearCompositionBarrier() {
-        this.compositionBarrier = Decoration.none;
-    }
     scrollIntoView(target) {
         if (target.isSnapshot) {
             let ref = this.view.viewState.lineBlockAt(target.range.head);
@@ -3266,7 +3236,6 @@ class DocView extends ContentView {
         scrollRectIntoView(this.view.scrollDOM, targetRect, range.head < range.anchor ? -1 : 1, target.x, target.y, Math.max(Math.min(target.xMargin, offsetWidth), -offsetWidth), Math.max(Math.min(target.yMargin, offsetHeight), -offsetHeight), this.view.textDirection == exports.Direction.LTR);
     }
 }
-const compositionBarrierWidget = Decoration.widget({ side: -1, widget: NullWidget.inline });
 function betweenUneditable(pos) {
     return pos.node.nodeType == 1 && pos.node.firstChild &&
         (pos.offset == 0 || pos.node.childNodes[pos.offset - 1].contentEditable == "false") &&
@@ -4508,10 +4477,6 @@ observers.compositionstart = observers.compositionupdate = view => {
     if (view.inputState.composing < 0) {
         // FIXME possibly set a timeout to clear it again on Android
         view.inputState.composing = 0;
-        if (view.docView.maybeCreateCompositionBarrier()) {
-            view.update([]);
-            view.docView.clearCompositionBarrier();
-        }
     }
 };
 observers.compositionend = view => {
@@ -5400,7 +5365,7 @@ class ViewState {
         this.editorHeight = 0; // scrollDOM.clientHeight, unscaled
         this.editorWidth = 0; // scrollDOM.clientWidth, unscaled
         this.scrollTop = 0; // Last seen scrollDOM.scrollTop, scaled
-        this.scrolledToBottom = true;
+        this.scrolledToBottom = false;
         // The CSS-transformation scale of the editor (transformed size /
         // concrete size)
         this.scaleX = 1;
@@ -6711,9 +6676,12 @@ class DOMObserver {
         let { view } = this;
         // The Selection object is broken in shadow roots in Safari. See
         // https://github.com/codemirror/dev/issues/414
+        let selection = getSelection(view.root);
+        if (!selection)
+            return false;
         let range = browser.safari && view.root.nodeType == 11 &&
             deepActiveElement(this.dom.ownerDocument) == this.dom &&
-            safariSelectionRangeHack(this.view) || getSelection(view.root);
+            safariSelectionRangeHack(this.view, selection) || selection;
         if (!range || this.selectionRange.eq(range))
             return false;
         let local = hasSelection(this.dom, range);
@@ -6985,8 +6953,24 @@ function findChild(cView, dom, dir) {
     }
     return null;
 }
+function buildSelectionRangeFromRange(view, range) {
+    let anchorNode = range.startContainer, anchorOffset = range.startOffset;
+    let focusNode = range.endContainer, focusOffset = range.endOffset;
+    let curAnchor = view.docView.domAtPos(view.state.selection.main.anchor);
+    // Since such a range doesn't distinguish between anchor and head,
+    // use a heuristic that flips it around if its end matches the
+    // current anchor.
+    if (isEquivalentPosition(curAnchor.node, curAnchor.offset, focusNode, focusOffset))
+        [anchorNode, anchorOffset, focusNode, focusOffset] = [focusNode, focusOffset, anchorNode, anchorOffset];
+    return { anchorNode, anchorOffset, focusNode, focusOffset };
+}
 // Used to work around a Safari Selection/shadow DOM bug (#414)
-function safariSelectionRangeHack(view) {
+function safariSelectionRangeHack(view, selection) {
+    if (selection.getComposedRanges) {
+        let range = selection.getComposedRanges(view.root)[0];
+        if (range)
+            return buildSelectionRangeFromRange(view, range);
+    }
     let found = null;
     // Because Safari (at least in 2018-2021) doesn't provide regular
     // access to the selection inside a shadowroot, we have to perform a
@@ -7001,17 +6985,7 @@ function safariSelectionRangeHack(view) {
     view.contentDOM.addEventListener("beforeinput", read, true);
     view.dom.ownerDocument.execCommand("indent");
     view.contentDOM.removeEventListener("beforeinput", read, true);
-    if (!found)
-        return null;
-    let anchorNode = found.startContainer, anchorOffset = found.startOffset;
-    let focusNode = found.endContainer, focusOffset = found.endOffset;
-    let curAnchor = view.docView.domAtPos(view.state.selection.main.anchor);
-    // Since such a range doesn't distinguish between anchor and head,
-    // use a heuristic that flips it around if its end matches the
-    // current anchor.
-    if (isEquivalentPosition(curAnchor.node, curAnchor.offset, focusNode, focusOffset))
-        [anchorNode, anchorOffset, focusNode, focusOffset] = [focusNode, focusOffset, anchorNode, anchorOffset];
-    return { anchorNode, anchorOffset, focusNode, focusOffset };
+    return found ? buildSelectionRangeFromRange(view, found) : null;
 }
 
 // The editor's update state machine looks something like this:
@@ -9102,7 +9076,7 @@ const plugin = ViewPlugin.fromClass(class {
     }
     update(update) {
         let { view } = update;
-        let height = view.viewState.editorHeight * view.scaleY -
+        let height = view.viewState.editorHeight -
             view.defaultLineHeight - view.documentPadding.top - 0.5;
         if (height >= 0 && height != this.height) {
             this.height = height;
@@ -9497,7 +9471,7 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
         if (tooltip.arrow && !tooltipView.dom.querySelector(".cm-tooltip > .cm-tooltip-arrow")) {
             let arrow = document.createElement("div");
             arrow.className = "cm-tooltip-arrow";
-            tooltipView.dom.insertBefore(arrow, before);
+            tooltipView.dom.appendChild(arrow);
         }
         tooltipView.dom.style.position = this.position;
         tooltipView.dom.style.top = Outside;

package/dist/index.js

@@ -2700,11 +2700,10 @@ class DocView extends ContentView {
         super();
         this.view = view;
         this.decorations = [];
-        this.dynamicDecorationMap = [false];
+        this.dynamicDecorationMap = [];
         this.domChanged = null;
         this.hasComposition = null;
         this.markedForComposition = new Set;
-        this.compositionBarrier = Decoration.none;
         this.lastCompositionAfterCursor = false;
         // Track a minimum width for the editor. When measuring sizes in
         // measureVisibleLineHeights, this is updated to point at the width
@@ -2969,7 +2968,7 @@ class DocView extends ContentView {
     // composition, avoid moving it across it and disrupting the
     // composition.
     suppressWidgetCursorChange(sel, cursor) {
-        return this.hasComposition && cursor.empty && !this.compositionBarrier.size &&
+        return this.hasComposition && cursor.empty &&
             isEquivalentPosition(sel.focusNode, sel.focusOffset, sel.anchorNode, sel.anchorOffset) &&
             this.posFromDOM(sel.focusNode, sel.focusOffset) == cursor.head;
     }
@@ -3177,7 +3176,7 @@ class DocView extends ContentView {
         return Decoration.set(deco);
     }
     updateDeco() {
-        let i = 1;
+        let i = 0;
         let allDeco = this.view.state.facet(decorations).map(d => {
             let dynamic = this.dynamicDecorationMap[i++] = typeof d == "function";
             return dynamic ? d(this.view) : d;
@@ -3193,7 +3192,6 @@ class DocView extends ContentView {
             allDeco.push(RangeSet.join(outerDeco));
         }
         this.decorations = [
-            this.compositionBarrier,
             ...allDeco,
             this.computeBlockGapDeco(),
             this.view.viewState.lineGapDeco
@@ -3202,34 +3200,6 @@ class DocView extends ContentView {
             this.dynamicDecorationMap[i++] = false;
         return this.decorations;
     }
-    // Starting a composition will style the inserted text with the
-    // style of the text before it, and this is only cleared when the
-    // composition ends, because touching it before that will abort it.
-    // This (called from compositionstart handler) tries to notice when
-    // the cursor is after a non-inclusive mark, where the styling could
-    // be jarring, and insert an ad-hoc widget before the cursor to
-    // isolate it from the style before it.
-    maybeCreateCompositionBarrier() {
-        let { main: { head, empty } } = this.view.state.selection;
-        if (!empty)
-            return false;
-        let found = null;
-        for (let set of this.decorations) {
-            set.between(head, head, (from, to, value) => {
-                if (value.point)
-                    found = false;
-                else if (value.endSide < 0 && from < head && to == head)
-                    found = true;
-            });
-            if (found === false)
-                break;
-        }
-        this.compositionBarrier = found ? Decoration.set(compositionBarrierWidget.range(head)) : Decoration.none;
-        return !!found;
-    }
-    clearCompositionBarrier() {
-        this.compositionBarrier = Decoration.none;
-    }
     scrollIntoView(target) {
         if (target.isSnapshot) {
             let ref = this.view.viewState.lineBlockAt(target.range.head);
@@ -3262,7 +3232,6 @@ class DocView extends ContentView {
         scrollRectIntoView(this.view.scrollDOM, targetRect, range.head < range.anchor ? -1 : 1, target.x, target.y, Math.max(Math.min(target.xMargin, offsetWidth), -offsetWidth), Math.max(Math.min(target.yMargin, offsetHeight), -offsetHeight), this.view.textDirection == Direction.LTR);
     }
 }
-const compositionBarrierWidget = /*@__PURE__*/Decoration.widget({ side: -1, widget: NullWidget.inline });
 function betweenUneditable(pos) {
     return pos.node.nodeType == 1 && pos.node.firstChild &&
         (pos.offset == 0 || pos.node.childNodes[pos.offset - 1].contentEditable == "false") &&
@@ -4504,10 +4473,6 @@ observers.compositionstart = observers.compositionupdate = view => {
     if (view.inputState.composing < 0) {
         // FIXME possibly set a timeout to clear it again on Android
         view.inputState.composing = 0;
-        if (view.docView.maybeCreateCompositionBarrier()) {
-            view.update([]);
-            view.docView.clearCompositionBarrier();
-        }
     }
 };
 observers.compositionend = view => {
@@ -5395,7 +5360,7 @@ class ViewState {
         this.editorHeight = 0; // scrollDOM.clientHeight, unscaled
         this.editorWidth = 0; // scrollDOM.clientWidth, unscaled
         this.scrollTop = 0; // Last seen scrollDOM.scrollTop, scaled
-        this.scrolledToBottom = true;
+        this.scrolledToBottom = false;
         // The CSS-transformation scale of the editor (transformed size /
         // concrete size)
         this.scaleX = 1;
@@ -6706,9 +6671,12 @@ class DOMObserver {
         let { view } = this;
         // The Selection object is broken in shadow roots in Safari. See
         // https://github.com/codemirror/dev/issues/414
+        let selection = getSelection(view.root);
+        if (!selection)
+            return false;
         let range = browser.safari && view.root.nodeType == 11 &&
             deepActiveElement(this.dom.ownerDocument) == this.dom &&
-            safariSelectionRangeHack(this.view) || getSelection(view.root);
+            safariSelectionRangeHack(this.view, selection) || selection;
         if (!range || this.selectionRange.eq(range))
             return false;
         let local = hasSelection(this.dom, range);
@@ -6980,8 +6948,24 @@ function findChild(cView, dom, dir) {
     }
     return null;
 }
+function buildSelectionRangeFromRange(view, range) {
+    let anchorNode = range.startContainer, anchorOffset = range.startOffset;
+    let focusNode = range.endContainer, focusOffset = range.endOffset;
+    let curAnchor = view.docView.domAtPos(view.state.selection.main.anchor);
+    // Since such a range doesn't distinguish between anchor and head,
+    // use a heuristic that flips it around if its end matches the
+    // current anchor.
+    if (isEquivalentPosition(curAnchor.node, curAnchor.offset, focusNode, focusOffset))
+        [anchorNode, anchorOffset, focusNode, focusOffset] = [focusNode, focusOffset, anchorNode, anchorOffset];
+    return { anchorNode, anchorOffset, focusNode, focusOffset };
+}
 // Used to work around a Safari Selection/shadow DOM bug (#414)
-function safariSelectionRangeHack(view) {
+function safariSelectionRangeHack(view, selection) {
+    if (selection.getComposedRanges) {
+        let range = selection.getComposedRanges(view.root)[0];
+        if (range)
+            return buildSelectionRangeFromRange(view, range);
+    }
     let found = null;
     // Because Safari (at least in 2018-2021) doesn't provide regular
     // access to the selection inside a shadowroot, we have to perform a
@@ -6996,17 +6980,7 @@ function safariSelectionRangeHack(view) {
     view.contentDOM.addEventListener("beforeinput", read, true);
     view.dom.ownerDocument.execCommand("indent");
     view.contentDOM.removeEventListener("beforeinput", read, true);
-    if (!found)
-        return null;
-    let anchorNode = found.startContainer, anchorOffset = found.startOffset;
-    let focusNode = found.endContainer, focusOffset = found.endOffset;
-    let curAnchor = view.docView.domAtPos(view.state.selection.main.anchor);
-    // Since such a range doesn't distinguish between anchor and head,
-    // use a heuristic that flips it around if its end matches the
-    // current anchor.
-    if (isEquivalentPosition(curAnchor.node, curAnchor.offset, focusNode, focusOffset))
-        [anchorNode, anchorOffset, focusNode, focusOffset] = [focusNode, focusOffset, anchorNode, anchorOffset];
-    return { anchorNode, anchorOffset, focusNode, focusOffset };
+    return found ? buildSelectionRangeFromRange(view, found) : null;
 }
 
 // The editor's update state machine looks something like this:
@@ -9097,7 +9071,7 @@ const plugin = /*@__PURE__*/ViewPlugin.fromClass(class {
     }
     update(update) {
         let { view } = update;
-        let height = view.viewState.editorHeight * view.scaleY -
+        let height = view.viewState.editorHeight -
             view.defaultLineHeight - view.documentPadding.top - 0.5;
         if (height >= 0 && height != this.height) {
             this.height = height;
@@ -9492,7 +9466,7 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         if (tooltip.arrow && !tooltipView.dom.querySelector(".cm-tooltip > .cm-tooltip-arrow")) {
             let arrow = document.createElement("div");
             arrow.className = "cm-tooltip-arrow";
-            tooltipView.dom.insertBefore(arrow, before);
+            tooltipView.dom.appendChild(arrow);
         }
         tooltipView.dom.style.position = this.position;
         tooltipView.dom.style.top = Outside;

package/package.json

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