@codemirror/view 6.18.0 → 6.18.1

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 6.18.1 (2023-09-11)
+
+### Bug fixes
+
+Fix an issue where the editor duplicated text when the browser moved content into the focused text node on composition.
+
+Make sure `widgetMarker` is called for gutters on lines covered by a block replace decoration.
+
+Fix an issue where the cursor could be shown in a position that doesn't allow a cursor when the selection is in a block widget.
+
 ## 6.18.0 (2023-09-05)
 
 ### New features

package/dist/index.cjs

@@ -484,6 +484,8 @@ class ContentView {
         }
     }
     setDOM(dom) {
+        if (this.dom == dom)
+            return;
         if (this.dom)
             this.dom.cmView = null;
         this.dom = dom;
@@ -656,113 +658,6 @@ function mergeChildrenInto(parent, from, to, insert, openStart, openEnd) {
     replaceRange(parent, fromI, fromOff, toI, toOff, insert, 0, openStart, openEnd);
 }
 
-const LineBreakPlaceholder = "\uffff";
-class DOMReader {
-    constructor(points, state$1) {
-        this.points = points;
-        this.text = "";
-        this.lineSeparator = state$1.facet(state.EditorState.lineSeparator);
-    }
-    append(text) {
-        this.text += text;
-    }
-    lineBreak() {
-        this.text += LineBreakPlaceholder;
-    }
-    readRange(start, end) {
-        if (!start)
-            return this;
-        let parent = start.parentNode;
-        for (let cur = start;;) {
-            this.findPointBefore(parent, cur);
-            let oldLen = this.text.length;
-            this.readNode(cur);
-            let next = cur.nextSibling;
-            if (next == end)
-                break;
-            let view = ContentView.get(cur), nextView = ContentView.get(next);
-            if (view && nextView ? view.breakAfter :
-                (view ? view.breakAfter : isBlockElement(cur)) ||
-                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore) && this.text.length > oldLen))
-                this.lineBreak();
-            cur = next;
-        }
-        this.findPointBefore(parent, end);
-        return this;
-    }
-    readTextNode(node) {
-        let text = node.nodeValue;
-        for (let point of this.points)
-            if (point.node == node)
-                point.pos = this.text.length + Math.min(point.offset, text.length);
-        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
-            let nextBreak = -1, breakSize = 1, m;
-            if (this.lineSeparator) {
-                nextBreak = text.indexOf(this.lineSeparator, off);
-                breakSize = this.lineSeparator.length;
-            }
-            else if (m = re.exec(text)) {
-                nextBreak = m.index;
-                breakSize = m[0].length;
-            }
-            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
-            if (nextBreak < 0)
-                break;
-            this.lineBreak();
-            if (breakSize > 1)
-                for (let point of this.points)
-                    if (point.node == node && point.pos > this.text.length)
-                        point.pos -= breakSize - 1;
-            off = nextBreak + breakSize;
-        }
-    }
-    readNode(node) {
-        if (node.cmIgnore)
-            return;
-        let view = ContentView.get(node);
-        let fromView = view && view.overrideDOMText;
-        if (fromView != null) {
-            this.findPointInside(node, fromView.length);
-            for (let i = fromView.iter(); !i.next().done;) {
-                if (i.lineBreak)
-                    this.lineBreak();
-                else
-                    this.append(i.value);
-            }
-        }
-        else if (node.nodeType == 3) {
-            this.readTextNode(node);
-        }
-        else if (node.nodeName == "BR") {
-            if (node.nextSibling)
-                this.lineBreak();
-        }
-        else if (node.nodeType == 1) {
-            this.readRange(node.firstChild, null);
-        }
-    }
-    findPointBefore(node, next) {
-        for (let point of this.points)
-            if (point.node == node && node.childNodes[point.offset] == next)
-                point.pos = this.text.length;
-    }
-    findPointInside(node, maxLen) {
-        for (let point of this.points)
-            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
-                point.pos = this.text.length + Math.min(maxLen, point.offset);
-    }
-}
-function isBlockElement(node) {
-    return node.nodeType == 1 && /^(DIV|P|LI|UL|OL|BLOCKQUOTE|DD|DT|H\d|SECTION|PRE)$/.test(node.nodeName);
-}
-class DOMPoint {
-    constructor(node, offset) {
-        this.node = node;
-        this.offset = offset;
-        this.pos = -1;
-    }
-}
-
 let nav = typeof navigator != "undefined" ? navigator : { userAgent: "", vendor: "", platform: "" };
 let doc = typeof document != "undefined" ? document : { documentElement: { style: {} } };
 const ie_edge = /Edge\/(\d+)/.exec(nav.userAgent);
@@ -2706,6 +2601,7 @@ class DocView extends ContentView {
         this.view = view;
         this.decorations = [];
         this.dynamicDecorationMap = [];
+        this.domChanged = null;
         this.hasComposition = null;
         this.markedForComposition = new Set;
         // Track a minimum width for the editor. When measuring sizes in
@@ -2734,6 +2630,7 @@ class DocView extends ContentView {
     }
     // Update the document view to a given state.
     update(update) {
+        var _a;
         let changedRanges = update.changedRanges;
         if (this.minWidth > 0 && changedRanges.length) {
             if (!changedRanges.every(({ fromA, toA }) => toA < this.minWidthFrom || fromA > this.minWidthTo)) {
@@ -2744,7 +2641,15 @@ class DocView extends ContentView {
                 this.minWidthTo = update.changes.mapPos(this.minWidthTo, 1);
             }
         }
-        let composition = this.view.inputState.composing < 0 ? null : findCompositionRange(this.view, update.changes);
+        let readCompositionAt = -1;
+        if (this.view.inputState.composing >= 0) {
+            if ((_a = this.domChanged) === null || _a === void 0 ? void 0 : _a.newSel)
+                readCompositionAt = this.domChanged.newSel.head;
+            else if (!touchesComposition(update.changes, this.hasComposition) && !update.selectionSet)
+                readCompositionAt = update.state.selection.main.head;
+        }
+        let composition = readCompositionAt > -1 ? findCompositionRange(this.view, update.changes, readCompositionAt) : null;
+        this.domChanged = null;
         if (this.hasComposition) {
             this.markedForComposition.clear();
             let { from, to } = this.hasComposition;
@@ -2859,11 +2764,9 @@ class DocView extends ContentView {
             cView.flags |= 8 /* ViewFlag.Composition */ | (cView.children.some(c => c.flags & 7 /* ViewFlag.Dirty */) ? 1 /* ViewFlag.ChildDirty */ : 0);
             this.markedForComposition.add(cView);
             let prev = ContentView.get(dom);
-            if (prev != cView) {
-                if (prev)
-                    prev.dom = null;
-                cView.setDOM(dom);
-            }
+            if (prev && prev != cView)
+                prev.dom = null;
+            cView.setDOM(dom);
         };
         let pos = this.childPos(composition.range.fromB, 1);
         let cView = this.children[pos.i];
@@ -2886,9 +2789,8 @@ class DocView extends ContentView {
         let force = this.forceSelection;
         this.forceSelection = false;
         let main = this.view.state.selection.main;
-        // FIXME need to handle the case where the selection falls inside a block range
-        let anchor = this.domAtPos(main.anchor);
-        let head = main.empty ? anchor : this.domAtPos(main.head);
+        let anchor = this.moveToLine(this.domAtPos(main.anchor));
+        let head = main.empty ? anchor : this.moveToLine(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 && !this.hasComposition && betweenUneditable(anchor)) {
@@ -2921,12 +2823,12 @@ class DocView extends ContentView {
                         if (nextTo && nextTo != (1 /* NextTo.Before */ | 2 /* NextTo.After */)) {
                             let text = nearbyTextNode(anchor.node, anchor.offset, nextTo == 1 /* NextTo.Before */ ? 1 : -1);
                             if (text)
-                                anchor = new DOMPos(text, nextTo == 1 /* NextTo.Before */ ? 0 : text.nodeValue.length);
+                                anchor = new DOMPos(text.node, text.offset);
                         }
                     }
                     rawSel.collapse(anchor.node, anchor.offset);
-                    if (main.bidiLevel != null && domSel.caretBidiLevel != null)
-                        domSel.caretBidiLevel = main.bidiLevel;
+                    if (main.bidiLevel != null && rawSel.caretBidiLevel !== undefined)
+                        rawSel.caretBidiLevel = main.bidiLevel;
                 }
                 else if (rawSel.extend) {
                     // Selection.extend can be used to create an 'inverted' selection
@@ -2989,6 +2891,26 @@ class DocView extends ContentView {
         if (view.docView.posFromDOM(newRange.anchorNode, newRange.anchorOffset) != cursor.from)
             sel.collapse(anchorNode, anchorOffset);
     }
+    // If a position is in/near a block widget, move it to a nearby text
+    // line, since we don't want the cursor inside a block widget.
+    moveToLine(pos) {
+        // Block widgets will return positions before/after them, which
+        // are thus directly in the document DOM element.
+        let dom = this.dom, newPos;
+        if (pos.node != dom)
+            return pos;
+        for (let i = pos.offset; !newPos && i < dom.childNodes.length; i++) {
+            let view = ContentView.get(dom.childNodes[i]);
+            if (view instanceof LineView)
+                newPos = view.domAtPos(0);
+        }
+        for (let i = pos.offset - 1; !newPos && i >= 0; i--) {
+            let view = ContentView.get(dom.childNodes[i]);
+            if (view instanceof LineView)
+                newPos = view.domAtPos(view.length);
+        }
+        return newPos ? new DOMPos(newPos.node, newPos.offset, true) : pos;
+    }
     nearest(dom) {
         for (let cur = dom; cur;) {
             let domView = ContentView.get(cur);
@@ -3187,74 +3109,27 @@ class BlockGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.height; }
 }
-function findCompositionNode(view, dLen) {
+function findCompositionNode(view, headPos) {
     let sel = view.observer.selectionRange;
     let textNode = sel.focusNode && nearbyTextNode(sel.focusNode, sel.focusOffset, 0);
     if (!textNode)
         return null;
-    let cView = ContentView.get(textNode);
-    let from, to;
-    if (cView instanceof TextView) {
-        from = cView.posAtStart;
-        to = from + cView.length;
-    }
-    else {
-        let oldLen = Math.max(0, textNode.nodeValue.length - dLen);
-        up: for (let offset = 0, node = textNode;;) {
-            for (let sibling = node.previousSibling, cView; sibling; sibling = sibling.previousSibling) {
-                if (cView = ContentView.get(sibling)) {
-                    to = cView.posAtEnd + offset;
-                    from = Math.max(0, to - oldLen);
-                    break up;
-                }
-                let reader = new DOMReader([], view.state);
-                reader.readNode(sibling);
-                if (reader.text.indexOf(LineBreakPlaceholder) > -1)
-                    return null;
-                offset += reader.text.length;
-            }
-            node = node.parentNode;
-            if (!node)
-                return null;
-            let parentView = ContentView.get(node);
-            if (parentView) {
-                from = parentView.posAtStart + offset;
-                to = from + oldLen;
-                break;
-            }
-        }
-    }
-    return { from, to: to, node: textNode };
+    let from = headPos - textNode.offset;
+    return { from, to: from + textNode.node.nodeValue.length, node: textNode.node };
 }
-function findCompositionRange(view, changes) {
-    let found = findCompositionNode(view, changes.newLength - changes.length);
+function findCompositionRange(view, changes, headPos) {
+    let found = findCompositionNode(view, headPos);
     if (!found)
         return null;
-    let { from: fromA, to: toA, node: textNode } = found;
-    let fromB = changes.mapPos(fromA, -1), toB = changes.mapPos(toA, 1);
-    let text = textNode.nodeValue;
+    let { node: textNode, from, to } = found, text = textNode.nodeValue;
     // Don't try to preserve multi-line compositions
     if (/[\n\r]/.test(text))
         return null;
-    if (toB - fromB != text.length) {
-        // If there is a length mismatch, see if mapping non-inclusively helps
-        let fromB2 = changes.mapPos(fromA, 1), toB2 = changes.mapPos(toA, -1);
-        if (toB2 - fromB2 == text.length)
-            fromB = fromB2, toB = toB2;
-        // See if we can find an instance of the text at either side
-        else if (view.state.doc.sliceString(toB - text.length, toB) == text)
-            fromB = toB - text.length;
-        else if (view.state.doc.sliceString(fromB, fromB + text.length) == text)
-            toB = fromB + text.length;
-        // Not found
-        else
-            return null;
-    }
-    let { main } = view.state.selection;
-    if (view.state.doc.sliceString(fromB, toB) != text || fromB > main.head || toB < main.head)
+    if (view.state.doc.sliceString(found.from, found.to) != text)
         return null;
+    let inv = changes.invertedDesc;
+    let range = new ChangedRange(inv.mapPos(from), inv.mapPos(to), from, to);
     let marks = [];
-    let range = new ChangedRange(fromA, toA, fromB, toB);
     for (let parent = textNode.parentNode;; parent = parent.parentNode) {
         let parentView = ContentView.get(parent);
         if (parentView instanceof MarkView)
@@ -3275,7 +3150,7 @@ function nearbyTextNode(startNode, startOffset, side) {
     if (side <= 0)
         for (let node = startNode, offset = startOffset;;) {
             if (node.nodeType == 3)
-                return node;
+                return { node: node, offset: offset };
             if (node.nodeType == 1 && offset > 0) {
                 node = node.childNodes[offset - 1];
                 offset = maxOffset(node);
@@ -3287,7 +3162,7 @@ function nearbyTextNode(startNode, startOffset, side) {
     if (side >= 0)
         for (let node = startNode, offset = startOffset;;) {
             if (node.nodeType == 3)
-                return node;
+                return { node: node, offset: offset };
             if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
                 node = node.childNodes[offset];
                 offset = 0;
@@ -3324,6 +3199,15 @@ function inUneditable(node, inside) {
     }
     return false;
 }
+function touchesComposition(changes, composition) {
+    let touched = false;
+    if (composition)
+        changes.iterChangedRanges((from, to) => {
+            if (from < composition.to && to > composition.from)
+                touched = true;
+        });
+    return touched;
+}
 
 function groupAt(state$1, pos, bias = 1) {
     let categorize = state$1.charCategorizer(pos);
@@ -6082,6 +5966,113 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     }
 }, lightDarkIDs);
 
+const LineBreakPlaceholder = "\uffff";
+class DOMReader {
+    constructor(points, state$1) {
+        this.points = points;
+        this.text = "";
+        this.lineSeparator = state$1.facet(state.EditorState.lineSeparator);
+    }
+    append(text) {
+        this.text += text;
+    }
+    lineBreak() {
+        this.text += LineBreakPlaceholder;
+    }
+    readRange(start, end) {
+        if (!start)
+            return this;
+        let parent = start.parentNode;
+        for (let cur = start;;) {
+            this.findPointBefore(parent, cur);
+            let oldLen = this.text.length;
+            this.readNode(cur);
+            let next = cur.nextSibling;
+            if (next == end)
+                break;
+            let view = ContentView.get(cur), nextView = ContentView.get(next);
+            if (view && nextView ? view.breakAfter :
+                (view ? view.breakAfter : isBlockElement(cur)) ||
+                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore) && this.text.length > oldLen))
+                this.lineBreak();
+            cur = next;
+        }
+        this.findPointBefore(parent, end);
+        return this;
+    }
+    readTextNode(node) {
+        let text = node.nodeValue;
+        for (let point of this.points)
+            if (point.node == node)
+                point.pos = this.text.length + Math.min(point.offset, text.length);
+        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
+            let nextBreak = -1, breakSize = 1, m;
+            if (this.lineSeparator) {
+                nextBreak = text.indexOf(this.lineSeparator, off);
+                breakSize = this.lineSeparator.length;
+            }
+            else if (m = re.exec(text)) {
+                nextBreak = m.index;
+                breakSize = m[0].length;
+            }
+            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
+            if (nextBreak < 0)
+                break;
+            this.lineBreak();
+            if (breakSize > 1)
+                for (let point of this.points)
+                    if (point.node == node && point.pos > this.text.length)
+                        point.pos -= breakSize - 1;
+            off = nextBreak + breakSize;
+        }
+    }
+    readNode(node) {
+        if (node.cmIgnore)
+            return;
+        let view = ContentView.get(node);
+        let fromView = view && view.overrideDOMText;
+        if (fromView != null) {
+            this.findPointInside(node, fromView.length);
+            for (let i = fromView.iter(); !i.next().done;) {
+                if (i.lineBreak)
+                    this.lineBreak();
+                else
+                    this.append(i.value);
+            }
+        }
+        else if (node.nodeType == 3) {
+            this.readTextNode(node);
+        }
+        else if (node.nodeName == "BR") {
+            if (node.nextSibling)
+                this.lineBreak();
+        }
+        else if (node.nodeType == 1) {
+            this.readRange(node.firstChild, null);
+        }
+    }
+    findPointBefore(node, next) {
+        for (let point of this.points)
+            if (point.node == node && node.childNodes[point.offset] == next)
+                point.pos = this.text.length;
+    }
+    findPointInside(node, maxLen) {
+        for (let point of this.points)
+            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
+                point.pos = this.text.length + Math.min(maxLen, point.offset);
+    }
+}
+function isBlockElement(node) {
+    return node.nodeType == 1 && /^(DIV|P|LI|UL|OL|BLOCKQUOTE|DD|DT|H\d|SECTION|PRE)$/.test(node.nodeName);
+}
+class DOMPoint {
+    constructor(node, offset) {
+        this.node = node;
+        this.offset = offset;
+        this.pos = -1;
+    }
+}
+
 class DOMChange {
     constructor(view, start, end, typeOver) {
         this.typeOver = typeOver;
@@ -6232,8 +6223,14 @@ function applyDefaultInsert(view, change, newSel) {
         if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
             change.to <= sel.to && change.to >= sel.to - 10) {
             let replaced = view.state.sliceDoc(change.from, change.to);
-            let composition = findCompositionNode(view, change.insert.length - (change.to - change.from)) ||
-                view.state.doc.lineAt(sel.head);
+            let compositionRange, composition = newSel && findCompositionNode(view, newSel.main.head);
+            if (composition) {
+                let dLen = change.insert.length - (change.to - change.from);
+                compositionRange = { from: composition.from, to: composition.to - dLen };
+            }
+            else {
+                compositionRange = view.state.doc.lineAt(sel.head);
+            }
             let offset = sel.to - change.to, size = sel.to - sel.from;
             tr = startState.changeByRange(range => {
                 if (range.from == sel.from && range.to == sel.to)
@@ -6244,7 +6241,7 @@ function applyDefaultInsert(view, change, newSel) {
                     // changes in the same node work without aborting
                     // composition, so cursors in the composition range are
                     // ignored.
-                    composition && range.to >= composition.from && range.from <= composition.to)
+                    range.to >= compositionRange.from && range.from <= compositionRange.to)
                     return { range };
                 let rangeChanges = startState.changes({ from, to, insert: change.insert }), selOff = range.to - sel.to;
                 return {
@@ -6663,7 +6660,9 @@ class DOMObserver {
             this.lastChange = Date.now();
         this.view.inputState.lastFocusTime = 0;
         this.selectionChanged = false;
-        return new DOMChange(this.view, from, to, typeOver);
+        let change = new DOMChange(this.view, from, to, typeOver);
+        this.view.docView.domChanged = { newSel: change.newSel ? change.newSel.main : null };
+        return change;
     }
     // Apply pending changes, if any
     flush(readSelection = true) {
@@ -9908,6 +9907,10 @@ const gutterView = ViewPlugin.fromClass(class {
                 for (let cx of contexts)
                     cx.line(this.view, line, classSet);
             }
+            else if (line.widget) {
+                for (let cx of contexts)
+                    cx.widget(this.view, line);
+            }
         }
         for (let cx of contexts)
             cx.finish();

package/dist/index.js

@@ -1,4 +1,4 @@
-import { EditorState, Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, findColumn, CharCategory, Annotation, Transaction, Prec, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
+import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, findColumn, CharCategory, Annotation, EditorState, Transaction, Prec, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
 import { StyleModule } from 'style-mod';
 import { keyName, base, shift } from 'w3c-keyname';
 
@@ -482,6 +482,8 @@ class ContentView {
         }
     }
     setDOM(dom) {
+        if (this.dom == dom)
+            return;
         if (this.dom)
             this.dom.cmView = null;
         this.dom = dom;
@@ -654,113 +656,6 @@ function mergeChildrenInto(parent, from, to, insert, openStart, openEnd) {
     replaceRange(parent, fromI, fromOff, toI, toOff, insert, 0, openStart, openEnd);
 }
 
-const LineBreakPlaceholder = "\uffff";
-class DOMReader {
-    constructor(points, state) {
-        this.points = points;
-        this.text = "";
-        this.lineSeparator = state.facet(EditorState.lineSeparator);
-    }
-    append(text) {
-        this.text += text;
-    }
-    lineBreak() {
-        this.text += LineBreakPlaceholder;
-    }
-    readRange(start, end) {
-        if (!start)
-            return this;
-        let parent = start.parentNode;
-        for (let cur = start;;) {
-            this.findPointBefore(parent, cur);
-            let oldLen = this.text.length;
-            this.readNode(cur);
-            let next = cur.nextSibling;
-            if (next == end)
-                break;
-            let view = ContentView.get(cur), nextView = ContentView.get(next);
-            if (view && nextView ? view.breakAfter :
-                (view ? view.breakAfter : isBlockElement(cur)) ||
-                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore) && this.text.length > oldLen))
-                this.lineBreak();
-            cur = next;
-        }
-        this.findPointBefore(parent, end);
-        return this;
-    }
-    readTextNode(node) {
-        let text = node.nodeValue;
-        for (let point of this.points)
-            if (point.node == node)
-                point.pos = this.text.length + Math.min(point.offset, text.length);
-        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
-            let nextBreak = -1, breakSize = 1, m;
-            if (this.lineSeparator) {
-                nextBreak = text.indexOf(this.lineSeparator, off);
-                breakSize = this.lineSeparator.length;
-            }
-            else if (m = re.exec(text)) {
-                nextBreak = m.index;
-                breakSize = m[0].length;
-            }
-            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
-            if (nextBreak < 0)
-                break;
-            this.lineBreak();
-            if (breakSize > 1)
-                for (let point of this.points)
-                    if (point.node == node && point.pos > this.text.length)
-                        point.pos -= breakSize - 1;
-            off = nextBreak + breakSize;
-        }
-    }
-    readNode(node) {
-        if (node.cmIgnore)
-            return;
-        let view = ContentView.get(node);
-        let fromView = view && view.overrideDOMText;
-        if (fromView != null) {
-            this.findPointInside(node, fromView.length);
-            for (let i = fromView.iter(); !i.next().done;) {
-                if (i.lineBreak)
-                    this.lineBreak();
-                else
-                    this.append(i.value);
-            }
-        }
-        else if (node.nodeType == 3) {
-            this.readTextNode(node);
-        }
-        else if (node.nodeName == "BR") {
-            if (node.nextSibling)
-                this.lineBreak();
-        }
-        else if (node.nodeType == 1) {
-            this.readRange(node.firstChild, null);
-        }
-    }
-    findPointBefore(node, next) {
-        for (let point of this.points)
-            if (point.node == node && node.childNodes[point.offset] == next)
-                point.pos = this.text.length;
-    }
-    findPointInside(node, maxLen) {
-        for (let point of this.points)
-            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
-                point.pos = this.text.length + Math.min(maxLen, point.offset);
-    }
-}
-function isBlockElement(node) {
-    return node.nodeType == 1 && /^(DIV|P|LI|UL|OL|BLOCKQUOTE|DD|DT|H\d|SECTION|PRE)$/.test(node.nodeName);
-}
-class DOMPoint {
-    constructor(node, offset) {
-        this.node = node;
-        this.offset = offset;
-        this.pos = -1;
-    }
-}
-
 let nav = typeof navigator != "undefined" ? navigator : { userAgent: "", vendor: "", platform: "" };
 let doc = typeof document != "undefined" ? document : { documentElement: { style: {} } };
 const ie_edge = /*@__PURE__*//Edge\/(\d+)/.exec(nav.userAgent);
@@ -2702,6 +2597,7 @@ class DocView extends ContentView {
         this.view = view;
         this.decorations = [];
         this.dynamicDecorationMap = [];
+        this.domChanged = null;
         this.hasComposition = null;
         this.markedForComposition = new Set;
         // Track a minimum width for the editor. When measuring sizes in
@@ -2730,6 +2626,7 @@ class DocView extends ContentView {
     }
     // Update the document view to a given state.
     update(update) {
+        var _a;
         let changedRanges = update.changedRanges;
         if (this.minWidth > 0 && changedRanges.length) {
             if (!changedRanges.every(({ fromA, toA }) => toA < this.minWidthFrom || fromA > this.minWidthTo)) {
@@ -2740,7 +2637,15 @@ class DocView extends ContentView {
                 this.minWidthTo = update.changes.mapPos(this.minWidthTo, 1);
             }
         }
-        let composition = this.view.inputState.composing < 0 ? null : findCompositionRange(this.view, update.changes);
+        let readCompositionAt = -1;
+        if (this.view.inputState.composing >= 0) {
+            if ((_a = this.domChanged) === null || _a === void 0 ? void 0 : _a.newSel)
+                readCompositionAt = this.domChanged.newSel.head;
+            else if (!touchesComposition(update.changes, this.hasComposition) && !update.selectionSet)
+                readCompositionAt = update.state.selection.main.head;
+        }
+        let composition = readCompositionAt > -1 ? findCompositionRange(this.view, update.changes, readCompositionAt) : null;
+        this.domChanged = null;
         if (this.hasComposition) {
             this.markedForComposition.clear();
             let { from, to } = this.hasComposition;
@@ -2855,11 +2760,9 @@ class DocView extends ContentView {
             cView.flags |= 8 /* ViewFlag.Composition */ | (cView.children.some(c => c.flags & 7 /* ViewFlag.Dirty */) ? 1 /* ViewFlag.ChildDirty */ : 0);
             this.markedForComposition.add(cView);
             let prev = ContentView.get(dom);
-            if (prev != cView) {
-                if (prev)
-                    prev.dom = null;
-                cView.setDOM(dom);
-            }
+            if (prev && prev != cView)
+                prev.dom = null;
+            cView.setDOM(dom);
         };
         let pos = this.childPos(composition.range.fromB, 1);
         let cView = this.children[pos.i];
@@ -2882,9 +2785,8 @@ class DocView extends ContentView {
         let force = this.forceSelection;
         this.forceSelection = false;
         let main = this.view.state.selection.main;
-        // FIXME need to handle the case where the selection falls inside a block range
-        let anchor = this.domAtPos(main.anchor);
-        let head = main.empty ? anchor : this.domAtPos(main.head);
+        let anchor = this.moveToLine(this.domAtPos(main.anchor));
+        let head = main.empty ? anchor : this.moveToLine(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 && !this.hasComposition && betweenUneditable(anchor)) {
@@ -2917,12 +2819,12 @@ class DocView extends ContentView {
                         if (nextTo && nextTo != (1 /* NextTo.Before */ | 2 /* NextTo.After */)) {
                             let text = nearbyTextNode(anchor.node, anchor.offset, nextTo == 1 /* NextTo.Before */ ? 1 : -1);
                             if (text)
-                                anchor = new DOMPos(text, nextTo == 1 /* NextTo.Before */ ? 0 : text.nodeValue.length);
+                                anchor = new DOMPos(text.node, text.offset);
                         }
                     }
                     rawSel.collapse(anchor.node, anchor.offset);
-                    if (main.bidiLevel != null && domSel.caretBidiLevel != null)
-                        domSel.caretBidiLevel = main.bidiLevel;
+                    if (main.bidiLevel != null && rawSel.caretBidiLevel !== undefined)
+                        rawSel.caretBidiLevel = main.bidiLevel;
                 }
                 else if (rawSel.extend) {
                     // Selection.extend can be used to create an 'inverted' selection
@@ -2985,6 +2887,26 @@ class DocView extends ContentView {
         if (view.docView.posFromDOM(newRange.anchorNode, newRange.anchorOffset) != cursor.from)
             sel.collapse(anchorNode, anchorOffset);
     }
+    // If a position is in/near a block widget, move it to a nearby text
+    // line, since we don't want the cursor inside a block widget.
+    moveToLine(pos) {
+        // Block widgets will return positions before/after them, which
+        // are thus directly in the document DOM element.
+        let dom = this.dom, newPos;
+        if (pos.node != dom)
+            return pos;
+        for (let i = pos.offset; !newPos && i < dom.childNodes.length; i++) {
+            let view = ContentView.get(dom.childNodes[i]);
+            if (view instanceof LineView)
+                newPos = view.domAtPos(0);
+        }
+        for (let i = pos.offset - 1; !newPos && i >= 0; i--) {
+            let view = ContentView.get(dom.childNodes[i]);
+            if (view instanceof LineView)
+                newPos = view.domAtPos(view.length);
+        }
+        return newPos ? new DOMPos(newPos.node, newPos.offset, true) : pos;
+    }
     nearest(dom) {
         for (let cur = dom; cur;) {
             let domView = ContentView.get(cur);
@@ -3183,74 +3105,27 @@ class BlockGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.height; }
 }
-function findCompositionNode(view, dLen) {
+function findCompositionNode(view, headPos) {
     let sel = view.observer.selectionRange;
     let textNode = sel.focusNode && nearbyTextNode(sel.focusNode, sel.focusOffset, 0);
     if (!textNode)
         return null;
-    let cView = ContentView.get(textNode);
-    let from, to;
-    if (cView instanceof TextView) {
-        from = cView.posAtStart;
-        to = from + cView.length;
-    }
-    else {
-        let oldLen = Math.max(0, textNode.nodeValue.length - dLen);
-        up: for (let offset = 0, node = textNode;;) {
-            for (let sibling = node.previousSibling, cView; sibling; sibling = sibling.previousSibling) {
-                if (cView = ContentView.get(sibling)) {
-                    to = cView.posAtEnd + offset;
-                    from = Math.max(0, to - oldLen);
-                    break up;
-                }
-                let reader = new DOMReader([], view.state);
-                reader.readNode(sibling);
-                if (reader.text.indexOf(LineBreakPlaceholder) > -1)
-                    return null;
-                offset += reader.text.length;
-            }
-            node = node.parentNode;
-            if (!node)
-                return null;
-            let parentView = ContentView.get(node);
-            if (parentView) {
-                from = parentView.posAtStart + offset;
-                to = from + oldLen;
-                break;
-            }
-        }
-    }
-    return { from, to: to, node: textNode };
+    let from = headPos - textNode.offset;
+    return { from, to: from + textNode.node.nodeValue.length, node: textNode.node };
 }
-function findCompositionRange(view, changes) {
-    let found = findCompositionNode(view, changes.newLength - changes.length);
+function findCompositionRange(view, changes, headPos) {
+    let found = findCompositionNode(view, headPos);
     if (!found)
         return null;
-    let { from: fromA, to: toA, node: textNode } = found;
-    let fromB = changes.mapPos(fromA, -1), toB = changes.mapPos(toA, 1);
-    let text = textNode.nodeValue;
+    let { node: textNode, from, to } = found, text = textNode.nodeValue;
     // Don't try to preserve multi-line compositions
     if (/[\n\r]/.test(text))
         return null;
-    if (toB - fromB != text.length) {
-        // If there is a length mismatch, see if mapping non-inclusively helps
-        let fromB2 = changes.mapPos(fromA, 1), toB2 = changes.mapPos(toA, -1);
-        if (toB2 - fromB2 == text.length)
-            fromB = fromB2, toB = toB2;
-        // See if we can find an instance of the text at either side
-        else if (view.state.doc.sliceString(toB - text.length, toB) == text)
-            fromB = toB - text.length;
-        else if (view.state.doc.sliceString(fromB, fromB + text.length) == text)
-            toB = fromB + text.length;
-        // Not found
-        else
-            return null;
-    }
-    let { main } = view.state.selection;
-    if (view.state.doc.sliceString(fromB, toB) != text || fromB > main.head || toB < main.head)
+    if (view.state.doc.sliceString(found.from, found.to) != text)
         return null;
+    let inv = changes.invertedDesc;
+    let range = new ChangedRange(inv.mapPos(from), inv.mapPos(to), from, to);
     let marks = [];
-    let range = new ChangedRange(fromA, toA, fromB, toB);
     for (let parent = textNode.parentNode;; parent = parent.parentNode) {
         let parentView = ContentView.get(parent);
         if (parentView instanceof MarkView)
@@ -3271,7 +3146,7 @@ function nearbyTextNode(startNode, startOffset, side) {
     if (side <= 0)
         for (let node = startNode, offset = startOffset;;) {
             if (node.nodeType == 3)
-                return node;
+                return { node: node, offset: offset };
             if (node.nodeType == 1 && offset > 0) {
                 node = node.childNodes[offset - 1];
                 offset = maxOffset(node);
@@ -3283,7 +3158,7 @@ function nearbyTextNode(startNode, startOffset, side) {
     if (side >= 0)
         for (let node = startNode, offset = startOffset;;) {
             if (node.nodeType == 3)
-                return node;
+                return { node: node, offset: offset };
             if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
                 node = node.childNodes[offset];
                 offset = 0;
@@ -3320,6 +3195,15 @@ function inUneditable(node, inside) {
     }
     return false;
 }
+function touchesComposition(changes, composition) {
+    let touched = false;
+    if (composition)
+        changes.iterChangedRanges((from, to) => {
+            if (from < composition.to && to > composition.from)
+                touched = true;
+        });
+    return touched;
+}
 
 function groupAt(state, pos, bias = 1) {
     let categorize = state.charCategorizer(pos);
@@ -6077,6 +5961,113 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     }
 }, lightDarkIDs);
 
+const LineBreakPlaceholder = "\uffff";
+class DOMReader {
+    constructor(points, state) {
+        this.points = points;
+        this.text = "";
+        this.lineSeparator = state.facet(EditorState.lineSeparator);
+    }
+    append(text) {
+        this.text += text;
+    }
+    lineBreak() {
+        this.text += LineBreakPlaceholder;
+    }
+    readRange(start, end) {
+        if (!start)
+            return this;
+        let parent = start.parentNode;
+        for (let cur = start;;) {
+            this.findPointBefore(parent, cur);
+            let oldLen = this.text.length;
+            this.readNode(cur);
+            let next = cur.nextSibling;
+            if (next == end)
+                break;
+            let view = ContentView.get(cur), nextView = ContentView.get(next);
+            if (view && nextView ? view.breakAfter :
+                (view ? view.breakAfter : isBlockElement(cur)) ||
+                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore) && this.text.length > oldLen))
+                this.lineBreak();
+            cur = next;
+        }
+        this.findPointBefore(parent, end);
+        return this;
+    }
+    readTextNode(node) {
+        let text = node.nodeValue;
+        for (let point of this.points)
+            if (point.node == node)
+                point.pos = this.text.length + Math.min(point.offset, text.length);
+        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
+            let nextBreak = -1, breakSize = 1, m;
+            if (this.lineSeparator) {
+                nextBreak = text.indexOf(this.lineSeparator, off);
+                breakSize = this.lineSeparator.length;
+            }
+            else if (m = re.exec(text)) {
+                nextBreak = m.index;
+                breakSize = m[0].length;
+            }
+            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
+            if (nextBreak < 0)
+                break;
+            this.lineBreak();
+            if (breakSize > 1)
+                for (let point of this.points)
+                    if (point.node == node && point.pos > this.text.length)
+                        point.pos -= breakSize - 1;
+            off = nextBreak + breakSize;
+        }
+    }
+    readNode(node) {
+        if (node.cmIgnore)
+            return;
+        let view = ContentView.get(node);
+        let fromView = view && view.overrideDOMText;
+        if (fromView != null) {
+            this.findPointInside(node, fromView.length);
+            for (let i = fromView.iter(); !i.next().done;) {
+                if (i.lineBreak)
+                    this.lineBreak();
+                else
+                    this.append(i.value);
+            }
+        }
+        else if (node.nodeType == 3) {
+            this.readTextNode(node);
+        }
+        else if (node.nodeName == "BR") {
+            if (node.nextSibling)
+                this.lineBreak();
+        }
+        else if (node.nodeType == 1) {
+            this.readRange(node.firstChild, null);
+        }
+    }
+    findPointBefore(node, next) {
+        for (let point of this.points)
+            if (point.node == node && node.childNodes[point.offset] == next)
+                point.pos = this.text.length;
+    }
+    findPointInside(node, maxLen) {
+        for (let point of this.points)
+            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
+                point.pos = this.text.length + Math.min(maxLen, point.offset);
+    }
+}
+function isBlockElement(node) {
+    return node.nodeType == 1 && /^(DIV|P|LI|UL|OL|BLOCKQUOTE|DD|DT|H\d|SECTION|PRE)$/.test(node.nodeName);
+}
+class DOMPoint {
+    constructor(node, offset) {
+        this.node = node;
+        this.offset = offset;
+        this.pos = -1;
+    }
+}
+
 class DOMChange {
     constructor(view, start, end, typeOver) {
         this.typeOver = typeOver;
@@ -6227,8 +6218,14 @@ function applyDefaultInsert(view, change, newSel) {
         if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
             change.to <= sel.to && change.to >= sel.to - 10) {
             let replaced = view.state.sliceDoc(change.from, change.to);
-            let composition = findCompositionNode(view, change.insert.length - (change.to - change.from)) ||
-                view.state.doc.lineAt(sel.head);
+            let compositionRange, composition = newSel && findCompositionNode(view, newSel.main.head);
+            if (composition) {
+                let dLen = change.insert.length - (change.to - change.from);
+                compositionRange = { from: composition.from, to: composition.to - dLen };
+            }
+            else {
+                compositionRange = view.state.doc.lineAt(sel.head);
+            }
             let offset = sel.to - change.to, size = sel.to - sel.from;
             tr = startState.changeByRange(range => {
                 if (range.from == sel.from && range.to == sel.to)
@@ -6239,7 +6236,7 @@ function applyDefaultInsert(view, change, newSel) {
                     // changes in the same node work without aborting
                     // composition, so cursors in the composition range are
                     // ignored.
-                    composition && range.to >= composition.from && range.from <= composition.to)
+                    range.to >= compositionRange.from && range.from <= compositionRange.to)
                     return { range };
                 let rangeChanges = startState.changes({ from, to, insert: change.insert }), selOff = range.to - sel.to;
                 return {
@@ -6658,7 +6655,9 @@ class DOMObserver {
             this.lastChange = Date.now();
         this.view.inputState.lastFocusTime = 0;
         this.selectionChanged = false;
-        return new DOMChange(this.view, from, to, typeOver);
+        let change = new DOMChange(this.view, from, to, typeOver);
+        this.view.docView.domChanged = { newSel: change.newSel ? change.newSel.main : null };
+        return change;
     }
     // Apply pending changes, if any
     flush(readSelection = true) {
@@ -9903,6 +9902,10 @@ const gutterView = /*@__PURE__*/ViewPlugin.fromClass(class {
                 for (let cx of contexts)
                     cx.line(this.view, line, classSet);
             }
+            else if (line.widget) {
+                for (let cx of contexts)
+                    cx.widget(this.view, line);
+            }
         }
         for (let cx of contexts)
             cx.finish();

package/package.json

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