@codemirror/view 6.26.4-edit-context → 6.26.4

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 6.26.4 (2024-06-04)
+
+### Bug fixes
+
+Fix an issue where commands with an optional second argument would get the keyboard event in that argument when called from a keymap.
+
+Fix an issue that could cause the cursor to be rendered on the wrong side of a zero-length block widget.
+
+Fix an issue where `drawSelection` got confused by block widgets in line-wrapped editors in some situations.
+
+Don't hide the native selection in widgets that have focus.
+
+Make sure that clicking an unfocusable editor still remove focus from any other focused elements.
+
+Fix a crash when loading the package in a non-browser environment.
+
+Stop mouse selection when the user types.
+
 ## 6.26.3 (2024-04-12)
 
 ### Bug fixes

package/dist/index.cjs

@@ -745,7 +745,7 @@ var browser = {
     android: /Android\b/.test(nav.userAgent),
     webkit,
     safari,
-    webkit_version: webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0,
+    webkit_version: webkit ? +(/\bAppleWebKit\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
     tabSize: doc.documentElement.style.tabSize != null ? "tab-size" : "-moz-tab-size"
 };
 
@@ -2368,7 +2368,6 @@ class ScrollTarget {
     }
 }
 const scrollIntoView = state.StateEffect.define({ map: (t, ch) => t.map(ch) });
-const setEditContextFormatting = state.StateEffect.define();
 /**
 Log or report an unhandled exception in client code. Should
 probably only be used by extension code that allows client code to
@@ -2705,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.editContextFormatting = 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
@@ -2748,9 +2746,8 @@ class DocView extends ContentView {
                 this.minWidthTo = update.changes.mapPos(this.minWidthTo, 1);
             }
         }
-        this.updateEditContextFormatting(update);
         let readCompositionAt = -1;
-        if (this.view.inputState.composing >= 0 && !this.view.observer.editContext) {
+        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)
@@ -2858,14 +2855,6 @@ class DocView extends ContentView {
         if (composition)
             this.fixCompositionDOM(composition);
     }
-    updateEditContextFormatting(update) {
-        this.editContextFormatting = this.editContextFormatting.map(update.changes);
-        for (let tr of update.transactions)
-            for (let effect of tr.effects)
-                if (effect.is(setEditContextFormatting)) {
-                    this.editContextFormatting = effect.value;
-                }
-    }
     compositionView(composition) {
         let cur = new TextView(composition.text.nodeValue);
         cur.flags |= 8 /* ViewFlag.Composition */;
@@ -3071,6 +3060,12 @@ class DocView extends ContentView {
                 best = child;
                 bestPos = start;
             }
+            else if (best && start == pos && end == pos && child instanceof BlockWidgetView && Math.abs(side) < 2) {
+                if (child.deco.startSide < 0)
+                    break;
+                else if (i)
+                    best = null;
+            }
             off = start;
         }
         return best ? best.coordsAt(pos - bestPos, side) : null;
@@ -3191,7 +3186,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;
@@ -3207,7 +3202,6 @@ class DocView extends ContentView {
             allDeco.push(state.RangeSet.join(outerDeco));
         }
         this.decorations = [
-            this.editContextFormatting,
             ...allDeco,
             this.computeBlockGapDeco(),
             this.view.viewState.lineGapDeco
@@ -3894,7 +3888,6 @@ class InputState {
         this.mouseSelection = mouseSelection;
     }
     update(update) {
-        this.view.observer.update(update);
         if (this.mouseSelection)
             this.mouseSelection.update(update);
         if (this.draggedContent && update.docChanged)
@@ -4073,7 +4066,9 @@ class MouseSelection {
         this.mustSelect = false;
     }
     update(update) {
-        if (this.style.update(update))
+        if (update.transactions.some(tr => tr.isUserEvent("input.type")))
+            this.destroy();
+        else if (this.style.update(update))
             setTimeout(() => this.select(this.lastEvent), 20);
     }
 }
@@ -4197,7 +4192,12 @@ handlers.mousedown = (view, event) => {
         let mustFocus = !view.hasFocus;
         view.inputState.startMouseSelection(new MouseSelection(view, event, style, mustFocus));
         if (mustFocus)
-            view.observer.ignore(() => focusPreventScroll(view.contentDOM));
+            view.observer.ignore(() => {
+                focusPreventScroll(view.contentDOM);
+                let active = view.root.activeElement;
+                if (active && !active.contains(view.contentDOM))
+                    active.blur();
+            });
         let mouseSel = view.inputState.mouseSelection;
         if (mouseSel) {
             mouseSel.start(event);
@@ -4485,8 +4485,6 @@ observers.blur = view => {
     updateForFocusChange(view);
 };
 observers.compositionstart = observers.compositionupdate = view => {
-    if (view.observer.editContext)
-        return; // Composition handled by edit context
     if (view.inputState.compositionFirstChange == null)
         view.inputState.compositionFirstChange = true;
     if (view.inputState.composing < 0) {
@@ -4495,8 +4493,6 @@ observers.compositionstart = observers.compositionupdate = view => {
     }
 };
 observers.compositionend = view => {
-    if (view.observer.editContext)
-        return; // Composition handled by edit context
     view.inputState.composing = -1;
     view.inputState.compositionEndedAt = Date.now();
     view.inputState.compositionPendingKey = true;
@@ -5416,9 +5412,12 @@ class ViewState {
         this.heightOracle = new HeightOracle(guessWrapping);
         this.stateDeco = state$1.facet(decorations).filter(d => typeof d != "function");
         this.heightMap = HeightMap.empty().applyChanges(this.stateDeco, state.Text.empty, this.heightOracle.setDoc(state$1.doc), [new ChangedRange(0, 0, 0, state$1.doc.length)]);
-        this.viewport = this.getViewport(0, null);
+        for (let i = 0; i < 2; i++) {
+            this.viewport = this.getViewport(0, null);
+            if (!this.updateForViewport())
+                break;
+        }
         this.updateViewportLines();
-        this.updateForViewport();
         this.lineGaps = this.ensureLineGaps([]);
         this.lineGapDeco = Decoration.set(this.lineGaps.map(gap => gap.draw(this, false)));
         this.computeVisibleRanges();
@@ -5433,13 +5432,18 @@ class ViewState {
             }
         }
         this.viewports = viewports.sort((a, b) => a.from - b.from);
+        return this.updateScaler();
+    }
+    updateScaler() {
+        let scaler = this.scaler;
         this.scaler = this.heightMap.height <= 7000000 /* VP.MaxDOMHeight */ ? IdScaler :
             new BigScaler(this.heightOracle, this.heightMap, this.viewports);
+        return scaler.eq(this.scaler) ? 0 : 2 /* UpdateFlag.Height */;
     }
     updateViewportLines() {
         this.viewportLines = [];
         this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.heightOracle.setDoc(this.state.doc), 0, 0, block => {
-            this.viewportLines.push(this.scaler.scale == 1 ? block : scaleBlock(block, this.scaler));
+            this.viewportLines.push(scaleBlock(block, this.scaler));
         });
     }
     update(update, scrollTarget = null) {
@@ -5465,11 +5469,10 @@ class ViewState {
         if (scrollTarget && (scrollTarget.range.head < viewport.from || scrollTarget.range.head > viewport.to) ||
             !this.viewportIsAppropriate(viewport))
             viewport = this.getViewport(0, scrollTarget);
-        let updateLines = !update.changes.empty || (update.flags & 2 /* UpdateFlag.Height */) ||
-            viewport.from != this.viewport.from || viewport.to != this.viewport.to;
+        let viewportChange = viewport.from != this.viewport.from || viewport.to != this.viewport.to;
         this.viewport = viewport;
-        this.updateForViewport();
-        if (updateLines)
+        update.flags |= this.updateForViewport();
+        if (viewportChange || !update.changes.empty || (update.flags & 2 /* UpdateFlag.Height */))
             this.updateViewportLines();
         if (this.lineGaps.length || this.viewport.to - this.viewport.from > (2000 /* LG.Margin */ << 1))
             this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
@@ -5567,9 +5570,12 @@ class ViewState {
         let viewportChange = !this.viewportIsAppropriate(this.viewport, bias) ||
             this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from ||
                 this.scrollTarget.range.head > this.viewport.to);
-        if (viewportChange)
+        if (viewportChange) {
+            if (result & 2 /* UpdateFlag.Height */)
+                result |= this.updateScaler();
             this.viewport = this.getViewport(bias, this.scrollTarget);
-        this.updateForViewport();
+            result |= this.updateForViewport();
+        }
         if ((result & 2 /* UpdateFlag.Height */) || viewportChange)
             this.updateViewportLines();
         if (this.lineGaps.length || this.viewport.to - this.viewport.from > (2000 /* LG.Margin */ << 1))
@@ -5758,11 +5764,14 @@ class ViewState {
         return changed ? 4 /* UpdateFlag.Viewport */ : 0;
     }
     lineBlockAt(pos) {
-        return (pos >= this.viewport.from && pos <= this.viewport.to && this.viewportLines.find(b => b.from <= pos && b.to >= pos)) ||
+        return (pos >= this.viewport.from && pos <= this.viewport.to &&
+            this.viewportLines.find(b => b.from <= pos && b.to >= pos)) ||
             scaleBlock(this.heightMap.lineAt(pos, QueryType.ByPos, this.heightOracle, 0, 0), this.scaler);
     }
     lineBlockAtHeight(height) {
-        return scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType.ByHeight, this.heightOracle, 0, 0), this.scaler);
+        return (height >= this.viewportLines[0].top && height <= this.viewportLines[this.viewportLines.length - 1].bottom &&
+            this.viewportLines.find(l => l.top <= height && l.bottom >= height)) ||
+            scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType.ByHeight, this.heightOracle, 0, 0), this.scaler);
     }
     scrollAnchorAt(scrollTop) {
         let block = this.lineBlockAtHeight(scrollTop + 8);
@@ -5837,7 +5846,8 @@ function find(array, f) {
 const IdScaler = {
     toDOM(n) { return n; },
     fromDOM(n) { return n; },
-    scale: 1
+    scale: 1,
+    eq(other) { return other == this; }
 };
 // When the height is too big (> VP.MaxDOMHeight), scale down the
 // regions outside the viewports so that the total height is
@@ -5880,6 +5890,12 @@ class BigScaler {
             domBase = vp.domBottom;
         }
     }
+    eq(other) {
+        if (!(other instanceof BigScaler))
+            return false;
+        return this.scale == other.scale && this.viewports.length == other.viewports.length &&
+            this.viewports.every((vp, i) => vp.from == other.viewports[i].from && vp.to == other.viewports[i].to);
+    }
 }
 function scaleBlock(block, scaler) {
     if (scaler.scale == 1)
@@ -6271,6 +6287,7 @@ class DOMChange {
         this.typeOver = typeOver;
         this.bounds = null;
         this.text = "";
+        this.domChanged = start > -1;
         let { impreciseHead: iHead, impreciseAnchor: iAnchor } = view.docView;
         if (view.state.readOnly && start > -1) {
             // Ignore changes when the editor is read-only
@@ -6373,7 +6390,35 @@ function applyDOMChange(view, domChange) {
         change = { from: sel.from, to: sel.to, insert: state.Text.of([" "]) };
     }
     if (change) {
-        return applyDOMChangeInner(view, change, newSel, lastKey);
+        if (browser.ios && view.inputState.flushIOSKey(change))
+            return true;
+        // Android browsers don't fire reasonable key events for enter,
+        // backspace, or delete. So this detects changes that look like
+        // they're caused by those keys, and reinterprets them as key
+        // events. (Some of these keys are also handled by beforeinput
+        // events and the pendingAndroidKey mechanism, but that's not
+        // reliable in all situations.)
+        if (browser.android &&
+            ((change.to == sel.to &&
+                // GBoard will sometimes remove a space it just inserted
+                // after a completion when you press enter
+                (change.from == sel.from || change.from == sel.from - 1 && view.state.sliceDoc(change.from, sel.from) == " ") &&
+                change.insert.length == 1 && change.insert.lines == 2 &&
+                dispatchKey(view.contentDOM, "Enter", 13)) ||
+                ((change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 ||
+                    lastKey == 8 && change.insert.length < change.to - change.from && change.to > sel.head) &&
+                    dispatchKey(view.contentDOM, "Backspace", 8)) ||
+                (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
+                    dispatchKey(view.contentDOM, "Delete", 46))))
+            return true;
+        let text = change.insert.toString();
+        if (view.inputState.composing >= 0)
+            view.inputState.composing++;
+        let defaultTr;
+        let defaultInsert = () => defaultTr || (defaultTr = applyDefaultInsert(view, change, newSel));
+        if (!view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text, defaultInsert)))
+            view.dispatch(defaultInsert());
+        return true;
     }
     else if (newSel && !newSel.main.eq(sel)) {
         let scrollIntoView = false, userEvent = "select";
@@ -6389,38 +6434,6 @@ function applyDOMChange(view, domChange) {
         return false;
     }
 }
-function applyDOMChangeInner(view, change, newSel, lastKey = -1) {
-    if (browser.ios && view.inputState.flushIOSKey(change))
-        return true;
-    let sel = view.state.selection.main;
-    // Android browsers don't fire reasonable key events for enter,
-    // backspace, or delete. So this detects changes that look like
-    // they're caused by those keys, and reinterprets them as key
-    // events. (Some of these keys are also handled by beforeinput
-    // events and the pendingAndroidKey mechanism, but that's not
-    // reliable in all situations.)
-    if (browser.android &&
-        ((change.to == sel.to &&
-            // GBoard will sometimes remove a space it just inserted
-            // after a completion when you press enter
-            (change.from == sel.from || change.from == sel.from - 1 && view.state.sliceDoc(change.from, sel.from) == " ") &&
-            change.insert.length == 1 && change.insert.lines == 2 &&
-            dispatchKey(view.contentDOM, "Enter", 13)) ||
-            ((change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 ||
-                lastKey == 8 && change.insert.length < change.to - change.from && change.to > sel.head) &&
-                dispatchKey(view.contentDOM, "Backspace", 8)) ||
-            (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
-                dispatchKey(view.contentDOM, "Delete", 46))))
-        return true;
-    let text = change.insert.toString();
-    if (view.inputState.composing >= 0)
-        view.inputState.composing++;
-    let defaultTr;
-    let defaultInsert = () => defaultTr || (defaultTr = applyDefaultInsert(view, change, newSel));
-    if (!view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text, defaultInsert)))
-        view.dispatch(defaultInsert());
-    return true;
-}
 function applyDefaultInsert(view, change, newSel) {
     let tr, startState = view.state, sel = startState.selection.main;
     if (change.from >= sel.from && change.to <= sel.to && change.to - change.from >= (sel.to - sel.from) / 3 &&
@@ -6547,7 +6560,6 @@ class DOMObserver {
     constructor(view) {
         this.view = view;
         this.active = false;
-        this.editContext = null;
         // The known selection. Kept in our own object, as opposed to just
         // directly accessing the selection because:
         //  - Safari doesn't report the right selection in shadow DOM
@@ -6592,10 +6604,6 @@ class DOMObserver {
             else
                 this.flush();
         });
-        if (window.EditContext) {
-            this.editContext = new EditContextManager(view);
-            view.contentDOM.editContext = this.editContext.editContext;
-        }
         if (useCharData)
             this.onCharData = (event) => {
                 this.queue.push({ target: event.target,
@@ -6646,8 +6654,6 @@ class DOMObserver {
     onScroll(e) {
         if (this.intersecting)
             this.flush(false);
-        if (this.editContext)
-            this.view.requestMeasure(this.editContext.measureReq);
         this.onScrollChanged(e);
     }
     onResize() {
@@ -6906,8 +6912,9 @@ class DOMObserver {
         }
         let startState = this.view.state;
         let handled = applyDOMChange(this.view, domChange);
-        // The view wasn't updated
-        if (this.view.state == startState)
+        // The view wasn't updated but DOM/selection changes were seen. Reset the view.
+        if (this.view.state == startState &&
+            (domChange.domChanged || domChange.newSel && !domChange.newSel.main.eq(this.view.state.selection.main)))
             this.view.update([]);
         return handled;
     }
@@ -6956,10 +6963,6 @@ class DOMObserver {
             win.removeEventListener("beforeprint", this.onPrint);
         win.document.removeEventListener("selectionchange", this.onSelectionChange);
     }
-    update(update) {
-        if (this.editContext)
-            this.editContext.update(update);
-    }
     destroy() {
         var _a, _b, _c;
         this.stop();
@@ -7019,161 +7022,6 @@ function safariSelectionRangeHack(view, selection) {
     view.contentDOM.removeEventListener("beforeinput", read, true);
     return found ? buildSelectionRangeFromRange(view, found) : null;
 }
-class EditContextManager {
-    constructor(view) {
-        // The document window for which the text in the context is
-        // maintained. For large documents, this may be smaller than the
-        // editor document. This window always includes the selection head.
-        this.from = 0;
-        this.to = 0;
-        // When applying a transaction, this is used to compare the change
-        // made to the context content to the change in the transaction in
-        // order to make the minimal changes to the context (since touching
-        // that sometimes breaks series of multiple edits made for a single
-        // user action on some Android keyboards)
-        this.pendingContextChange = null;
-        this.resetRange(view.state);
-        let context = this.editContext = new window.EditContext({
-            text: view.state.doc.sliceString(this.from, this.to),
-            selectionStart: this.toContextPos(Math.max(this.from, Math.min(this.to, view.state.selection.main.anchor))),
-            selectionEnd: this.toContextPos(view.state.selection.main.head)
-        });
-        context.addEventListener("textupdate", e => {
-            let { anchor } = view.state.selection.main;
-            let change = { from: this.toEditorPos(e.updateRangeStart),
-                to: this.toEditorPos(e.updateRangeEnd),
-                insert: state.Text.of(e.text.split("\n")) };
-            // If the window doesn't include the anchor, assume changes
-            // adjacent to a side go up to the anchor.
-            if (change.from == this.from && anchor < this.from)
-                change.from = anchor;
-            else if (change.to == this.to && anchor > this.to)
-                change.to = anchor;
-            // Edit context sometimes fire empty changes
-            if (change.from == change.to && !change.insert.length)
-                return;
-            this.pendingContextChange = change;
-            applyDOMChangeInner(view, change, state.EditorSelection.single(this.toEditorPos(e.selectionStart), this.toEditorPos(e.selectionEnd)));
-            // If the transaction didn't flush our change, revert it so
-            // that the context is in sync with the editor state again.
-            if (this.pendingContextChange)
-                this.revertPending(view.state);
-        });
-        context.addEventListener("characterboundsupdate", e => {
-            let rects = [], prev = null;
-            for (let i = this.toEditorPos(e.rangeStart), end = this.toEditorPos(e.rangeEnd); i < end; i++) {
-                let rect = view.coordsForChar(i);
-                prev = (rect && new DOMRect(rect.left, rect.right, rect.right - rect.left, rect.bottom - rect.top))
-                    || prev || new DOMRect;
-                rects.push(prev);
-            }
-            context.updateCharacterBounds(e.rangeStart, rects);
-        });
-        context.addEventListener("textformatupdate", e => {
-            let deco = [];
-            for (let format of e.getTextFormats()) {
-                let lineStyle = format.underlineStyle, thickness = format.underlineThickness;
-                if (lineStyle != "None" && thickness != "None") {
-                    let style = `text-decoration: underline ${lineStyle == "Dashed" ? "dashed " : lineStyle == "Squiggle" ? "wavy " : ""}${thickness == "Thin" ? 1 : 2}px`;
-                    deco.push(Decoration.mark({ attributes: { style } })
-                        .range(this.toEditorPos(format.rangeStart), this.toEditorPos(format.rangeEnd)));
-                }
-            }
-            view.dispatch({ effects: setEditContextFormatting.of(Decoration.set(deco)) });
-        });
-        context.addEventListener("compositionstart", () => {
-            if (view.inputState.composing < 0) {
-                view.inputState.composing = 0;
-                view.inputState.compositionFirstChange = true;
-            }
-        });
-        context.addEventListener("compositionend", () => {
-            view.inputState.composing = -1;
-            view.inputState.compositionFirstChange = null;
-        });
-        this.measureReq = { read: view => {
-                this.editContext.updateControlBounds(view.contentDOM.getBoundingClientRect());
-                let sel = getSelection(view.root);
-                if (sel && sel.rangeCount)
-                    this.editContext.updateSelectionBounds(sel.getRangeAt(0).getBoundingClientRect());
-            } };
-    }
-    applyEdits(update) {
-        let off = 0, abort = false, pending = this.pendingContextChange;
-        update.changes.iterChanges((fromA, toA, _fromB, _toB, insert) => {
-            if (abort)
-                return;
-            let dLen = insert.length - (toA - fromA);
-            if (pending && toA >= pending.to) {
-                if (pending.from == fromA && pending.to == toA && pending.insert.eq(insert)) {
-                    pending = this.pendingContextChange = null; // Match
-                    off += dLen;
-                    return;
-                }
-                else { // Mismatch, revert
-                    pending = null;
-                    this.revertPending(update.state);
-                }
-            }
-            fromA += off;
-            toA += off;
-            if (toA <= this.from) { // Before the window
-                this.from += dLen;
-                this.to += dLen;
-            }
-            else if (fromA < this.to) { // Overlaps with window
-                if (fromA < this.from || toA > this.to || (this.to - this.from) + insert.length > 30000 /* CxVp.MaxSize */) {
-                    abort = true;
-                    return;
-                }
-                this.editContext.updateText(this.toContextPos(fromA), this.toContextPos(toA), insert.toString());
-                this.to += dLen;
-            }
-            off += dLen;
-        });
-        if (pending && !abort)
-            this.revertPending(update.state);
-        return !abort;
-    }
-    update(update) {
-        if (!this.applyEdits(update) || !this.rangeIsValid(update.state)) {
-            this.pendingContextChange = null;
-            this.resetRange(update.state);
-            this.editContext.updateText(0, this.editContext.text.length, update.state.doc.sliceString(this.from, this.to));
-            this.setSelection(update.state);
-        }
-        else if (update.docChanged || update.selectionSet) {
-            this.setSelection(update.state);
-        }
-        if (update.geometryChanged || update.docChanged || update.selectionSet)
-            update.view.requestMeasure(this.measureReq);
-    }
-    resetRange(state) {
-        let { head } = state.selection.main;
-        this.from = Math.max(0, head - 10000 /* CxVp.Margin */);
-        this.to = Math.min(state.doc.length, head + 10000 /* CxVp.Margin */);
-    }
-    revertPending(state) {
-        let pending = this.pendingContextChange;
-        this.pendingContextChange = null;
-        this.editContext.updateText(this.toContextPos(pending.from), this.toContextPos(pending.to + pending.insert.length), state.doc.sliceString(pending.from, pending.to));
-    }
-    setSelection(state) {
-        let { main } = state.selection;
-        let start = this.toContextPos(Math.max(this.from, Math.min(this.to, main.anchor)));
-        let end = this.toContextPos(main.head);
-        if (this.editContext.selectionStart != start || this.editContext.selectionEnd != end)
-            this.editContext.updateSelection(start, end);
-    }
-    rangeIsValid(state) {
-        let { head } = state.selection.main;
-        return !(this.from > 0 && head - this.from < 500 /* CxVp.MinMargin */ ||
-            this.to < state.doc.length && this.to - head < 500 /* CxVp.MinMargin */ ||
-            this.to - this.from > 10000 /* CxVp.Margin */ * 3);
-    }
-    toEditorPos(contextPos) { return contextPos + this.from; }
-    toContextPos(editorPos) { return editorPos - this.from; }
-}
 
 // The editor's update state machine looks something like this:
 //
@@ -8604,11 +8452,17 @@ function getBase(view) {
     let left = view.textDirection == exports.Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth * view.scaleX;
     return { left: left - view.scrollDOM.scrollLeft * view.scaleX, top: rect.top - view.scrollDOM.scrollTop * view.scaleY };
 }
-function wrappedLine(view, pos, inside) {
-    let range = state.EditorSelection.cursor(pos);
-    return { from: Math.max(inside.from, view.moveToLineBoundary(range, false, true).from),
-        to: Math.min(inside.to, view.moveToLineBoundary(range, true, true).from),
-        type: exports.BlockType.Text };
+function wrappedLine(view, pos, side, inside) {
+    let coords = view.coordsAtPos(pos, side * 2);
+    if (!coords)
+        return inside;
+    let editorRect = view.dom.getBoundingClientRect();
+    let y = (coords.top + coords.bottom) / 2;
+    let left = view.posAtCoords({ x: editorRect.left + 1, y });
+    let right = view.posAtCoords({ x: editorRect.right - 1, y });
+    if (left == null || right == null)
+        return inside;
+    return { from: Math.max(inside.from, Math.min(left, right)), to: Math.min(inside.to, Math.max(left, right)) };
 }
 function rectanglesForRange(view, className, range) {
     if (range.to <= view.viewport.from || range.from >= view.viewport.to)
@@ -8624,10 +8478,10 @@ function rectanglesForRange(view, className, range) {
     let visualStart = startBlock.type == exports.BlockType.Text ? startBlock : null;
     let visualEnd = endBlock.type == exports.BlockType.Text ? endBlock : null;
     if (visualStart && (view.lineWrapping || startBlock.widgetLineBreaks))
-        visualStart = wrappedLine(view, from, visualStart);
+        visualStart = wrappedLine(view, from, 1, visualStart);
     if (visualEnd && (view.lineWrapping || endBlock.widgetLineBreaks))
-        visualEnd = wrappedLine(view, to, visualEnd);
-    if (visualStart && visualEnd && visualStart.from == visualEnd.from) {
+        visualEnd = wrappedLine(view, to, -1, visualEnd);
+    if (visualStart && visualEnd && visualStart.from == visualEnd.from && visualStart.to == visualEnd.to) {
         return pieces(drawForLine(range.from, range.to, visualStart));
     }
     else {
@@ -8882,14 +8736,19 @@ const selectionLayer = layer({
 });
 const themeSpec = {
     ".cm-line": {
-        "& ::selection": { backgroundColor: "transparent !important" },
-        "&::selection": { backgroundColor: "transparent !important" }
+        "& ::selection, &::selection": { backgroundColor: "transparent !important" },
+    },
+    ".cm-content": {
+        "& :focus": {
+            caretColor: "initial !important",
+            "&::selection, & ::selection": {
+                backgroundColor: "Highlight !important"
+            }
+        }
     }
 };
-if (CanHidePrimary) {
-    themeSpec[".cm-line"].caretColor = "transparent !important";
-    themeSpec[".cm-content"] = { caretColor: "transparent !important" };
-}
+if (CanHidePrimary)
+    themeSpec[".cm-line"].caretColor = themeSpec[".cm-content"].caretColor = "transparent !important";
 const hideNativeSelection = state.Prec.highest(EditorView.theme(themeSpec));
 
 const setDropCursorPos = state.StateEffect.define({

package/dist/index.js

@@ -743,7 +743,7 @@ var browser = {
     android: /*@__PURE__*//Android\b/.test(nav.userAgent),
     webkit,
     safari,
-    webkit_version: webkit ? +(/*@__PURE__*//\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0,
+    webkit_version: webkit ? +(/*@__PURE__*//\bAppleWebKit\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
     tabSize: doc.documentElement.style.tabSize != null ? "tab-size" : "-moz-tab-size"
 };
 
@@ -2364,7 +2364,6 @@ class ScrollTarget {
     }
 }
 const scrollIntoView = /*@__PURE__*/StateEffect.define({ map: (t, ch) => t.map(ch) });
-const setEditContextFormatting = /*@__PURE__*/StateEffect.define();
 /**
 Log or report an unhandled exception in client code. Should
 probably only be used by extension code that allows client code to
@@ -2701,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.editContextFormatting = 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
@@ -2744,9 +2742,8 @@ class DocView extends ContentView {
                 this.minWidthTo = update.changes.mapPos(this.minWidthTo, 1);
             }
         }
-        this.updateEditContextFormatting(update);
         let readCompositionAt = -1;
-        if (this.view.inputState.composing >= 0 && !this.view.observer.editContext) {
+        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)
@@ -2854,14 +2851,6 @@ class DocView extends ContentView {
         if (composition)
             this.fixCompositionDOM(composition);
     }
-    updateEditContextFormatting(update) {
-        this.editContextFormatting = this.editContextFormatting.map(update.changes);
-        for (let tr of update.transactions)
-            for (let effect of tr.effects)
-                if (effect.is(setEditContextFormatting)) {
-                    this.editContextFormatting = effect.value;
-                }
-    }
     compositionView(composition) {
         let cur = new TextView(composition.text.nodeValue);
         cur.flags |= 8 /* ViewFlag.Composition */;
@@ -3067,6 +3056,12 @@ class DocView extends ContentView {
                 best = child;
                 bestPos = start;
             }
+            else if (best && start == pos && end == pos && child instanceof BlockWidgetView && Math.abs(side) < 2) {
+                if (child.deco.startSide < 0)
+                    break;
+                else if (i)
+                    best = null;
+            }
             off = start;
         }
         return best ? best.coordsAt(pos - bestPos, side) : null;
@@ -3187,7 +3182,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;
@@ -3203,7 +3198,6 @@ class DocView extends ContentView {
             allDeco.push(RangeSet.join(outerDeco));
         }
         this.decorations = [
-            this.editContextFormatting,
             ...allDeco,
             this.computeBlockGapDeco(),
             this.view.viewState.lineGapDeco
@@ -3890,7 +3884,6 @@ class InputState {
         this.mouseSelection = mouseSelection;
     }
     update(update) {
-        this.view.observer.update(update);
         if (this.mouseSelection)
             this.mouseSelection.update(update);
         if (this.draggedContent && update.docChanged)
@@ -4069,7 +4062,9 @@ class MouseSelection {
         this.mustSelect = false;
     }
     update(update) {
-        if (this.style.update(update))
+        if (update.transactions.some(tr => tr.isUserEvent("input.type")))
+            this.destroy();
+        else if (this.style.update(update))
             setTimeout(() => this.select(this.lastEvent), 20);
     }
 }
@@ -4193,7 +4188,12 @@ handlers.mousedown = (view, event) => {
         let mustFocus = !view.hasFocus;
         view.inputState.startMouseSelection(new MouseSelection(view, event, style, mustFocus));
         if (mustFocus)
-            view.observer.ignore(() => focusPreventScroll(view.contentDOM));
+            view.observer.ignore(() => {
+                focusPreventScroll(view.contentDOM);
+                let active = view.root.activeElement;
+                if (active && !active.contains(view.contentDOM))
+                    active.blur();
+            });
         let mouseSel = view.inputState.mouseSelection;
         if (mouseSel) {
             mouseSel.start(event);
@@ -4481,8 +4481,6 @@ observers.blur = view => {
     updateForFocusChange(view);
 };
 observers.compositionstart = observers.compositionupdate = view => {
-    if (view.observer.editContext)
-        return; // Composition handled by edit context
     if (view.inputState.compositionFirstChange == null)
         view.inputState.compositionFirstChange = true;
     if (view.inputState.composing < 0) {
@@ -4491,8 +4489,6 @@ observers.compositionstart = observers.compositionupdate = view => {
     }
 };
 observers.compositionend = view => {
-    if (view.observer.editContext)
-        return; // Composition handled by edit context
     view.inputState.composing = -1;
     view.inputState.compositionEndedAt = Date.now();
     view.inputState.compositionPendingKey = true;
@@ -5411,9 +5407,12 @@ class ViewState {
         this.heightOracle = new HeightOracle(guessWrapping);
         this.stateDeco = state.facet(decorations).filter(d => typeof d != "function");
         this.heightMap = HeightMap.empty().applyChanges(this.stateDeco, Text.empty, this.heightOracle.setDoc(state.doc), [new ChangedRange(0, 0, 0, state.doc.length)]);
-        this.viewport = this.getViewport(0, null);
+        for (let i = 0; i < 2; i++) {
+            this.viewport = this.getViewport(0, null);
+            if (!this.updateForViewport())
+                break;
+        }
         this.updateViewportLines();
-        this.updateForViewport();
         this.lineGaps = this.ensureLineGaps([]);
         this.lineGapDeco = Decoration.set(this.lineGaps.map(gap => gap.draw(this, false)));
         this.computeVisibleRanges();
@@ -5428,13 +5427,18 @@ class ViewState {
             }
         }
         this.viewports = viewports.sort((a, b) => a.from - b.from);
+        return this.updateScaler();
+    }
+    updateScaler() {
+        let scaler = this.scaler;
         this.scaler = this.heightMap.height <= 7000000 /* VP.MaxDOMHeight */ ? IdScaler :
             new BigScaler(this.heightOracle, this.heightMap, this.viewports);
+        return scaler.eq(this.scaler) ? 0 : 2 /* UpdateFlag.Height */;
     }
     updateViewportLines() {
         this.viewportLines = [];
         this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.heightOracle.setDoc(this.state.doc), 0, 0, block => {
-            this.viewportLines.push(this.scaler.scale == 1 ? block : scaleBlock(block, this.scaler));
+            this.viewportLines.push(scaleBlock(block, this.scaler));
         });
     }
     update(update, scrollTarget = null) {
@@ -5460,11 +5464,10 @@ class ViewState {
         if (scrollTarget && (scrollTarget.range.head < viewport.from || scrollTarget.range.head > viewport.to) ||
             !this.viewportIsAppropriate(viewport))
             viewport = this.getViewport(0, scrollTarget);
-        let updateLines = !update.changes.empty || (update.flags & 2 /* UpdateFlag.Height */) ||
-            viewport.from != this.viewport.from || viewport.to != this.viewport.to;
+        let viewportChange = viewport.from != this.viewport.from || viewport.to != this.viewport.to;
         this.viewport = viewport;
-        this.updateForViewport();
-        if (updateLines)
+        update.flags |= this.updateForViewport();
+        if (viewportChange || !update.changes.empty || (update.flags & 2 /* UpdateFlag.Height */))
             this.updateViewportLines();
         if (this.lineGaps.length || this.viewport.to - this.viewport.from > (2000 /* LG.Margin */ << 1))
             this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
@@ -5562,9 +5565,12 @@ class ViewState {
         let viewportChange = !this.viewportIsAppropriate(this.viewport, bias) ||
             this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from ||
                 this.scrollTarget.range.head > this.viewport.to);
-        if (viewportChange)
+        if (viewportChange) {
+            if (result & 2 /* UpdateFlag.Height */)
+                result |= this.updateScaler();
             this.viewport = this.getViewport(bias, this.scrollTarget);
-        this.updateForViewport();
+            result |= this.updateForViewport();
+        }
         if ((result & 2 /* UpdateFlag.Height */) || viewportChange)
             this.updateViewportLines();
         if (this.lineGaps.length || this.viewport.to - this.viewport.from > (2000 /* LG.Margin */ << 1))
@@ -5753,11 +5759,14 @@ class ViewState {
         return changed ? 4 /* UpdateFlag.Viewport */ : 0;
     }
     lineBlockAt(pos) {
-        return (pos >= this.viewport.from && pos <= this.viewport.to && this.viewportLines.find(b => b.from <= pos && b.to >= pos)) ||
+        return (pos >= this.viewport.from && pos <= this.viewport.to &&
+            this.viewportLines.find(b => b.from <= pos && b.to >= pos)) ||
             scaleBlock(this.heightMap.lineAt(pos, QueryType.ByPos, this.heightOracle, 0, 0), this.scaler);
     }
     lineBlockAtHeight(height) {
-        return scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType.ByHeight, this.heightOracle, 0, 0), this.scaler);
+        return (height >= this.viewportLines[0].top && height <= this.viewportLines[this.viewportLines.length - 1].bottom &&
+            this.viewportLines.find(l => l.top <= height && l.bottom >= height)) ||
+            scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType.ByHeight, this.heightOracle, 0, 0), this.scaler);
     }
     scrollAnchorAt(scrollTop) {
         let block = this.lineBlockAtHeight(scrollTop + 8);
@@ -5832,7 +5841,8 @@ function find(array, f) {
 const IdScaler = {
     toDOM(n) { return n; },
     fromDOM(n) { return n; },
-    scale: 1
+    scale: 1,
+    eq(other) { return other == this; }
 };
 // When the height is too big (> VP.MaxDOMHeight), scale down the
 // regions outside the viewports so that the total height is
@@ -5875,6 +5885,12 @@ class BigScaler {
             domBase = vp.domBottom;
         }
     }
+    eq(other) {
+        if (!(other instanceof BigScaler))
+            return false;
+        return this.scale == other.scale && this.viewports.length == other.viewports.length &&
+            this.viewports.every((vp, i) => vp.from == other.viewports[i].from && vp.to == other.viewports[i].to);
+    }
 }
 function scaleBlock(block, scaler) {
     if (scaler.scale == 1)
@@ -6266,6 +6282,7 @@ class DOMChange {
         this.typeOver = typeOver;
         this.bounds = null;
         this.text = "";
+        this.domChanged = start > -1;
         let { impreciseHead: iHead, impreciseAnchor: iAnchor } = view.docView;
         if (view.state.readOnly && start > -1) {
             // Ignore changes when the editor is read-only
@@ -6368,7 +6385,35 @@ function applyDOMChange(view, domChange) {
         change = { from: sel.from, to: sel.to, insert: Text.of([" "]) };
     }
     if (change) {
-        return applyDOMChangeInner(view, change, newSel, lastKey);
+        if (browser.ios && view.inputState.flushIOSKey(change))
+            return true;
+        // Android browsers don't fire reasonable key events for enter,
+        // backspace, or delete. So this detects changes that look like
+        // they're caused by those keys, and reinterprets them as key
+        // events. (Some of these keys are also handled by beforeinput
+        // events and the pendingAndroidKey mechanism, but that's not
+        // reliable in all situations.)
+        if (browser.android &&
+            ((change.to == sel.to &&
+                // GBoard will sometimes remove a space it just inserted
+                // after a completion when you press enter
+                (change.from == sel.from || change.from == sel.from - 1 && view.state.sliceDoc(change.from, sel.from) == " ") &&
+                change.insert.length == 1 && change.insert.lines == 2 &&
+                dispatchKey(view.contentDOM, "Enter", 13)) ||
+                ((change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 ||
+                    lastKey == 8 && change.insert.length < change.to - change.from && change.to > sel.head) &&
+                    dispatchKey(view.contentDOM, "Backspace", 8)) ||
+                (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
+                    dispatchKey(view.contentDOM, "Delete", 46))))
+            return true;
+        let text = change.insert.toString();
+        if (view.inputState.composing >= 0)
+            view.inputState.composing++;
+        let defaultTr;
+        let defaultInsert = () => defaultTr || (defaultTr = applyDefaultInsert(view, change, newSel));
+        if (!view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text, defaultInsert)))
+            view.dispatch(defaultInsert());
+        return true;
     }
     else if (newSel && !newSel.main.eq(sel)) {
         let scrollIntoView = false, userEvent = "select";
@@ -6384,38 +6429,6 @@ function applyDOMChange(view, domChange) {
         return false;
     }
 }
-function applyDOMChangeInner(view, change, newSel, lastKey = -1) {
-    if (browser.ios && view.inputState.flushIOSKey(change))
-        return true;
-    let sel = view.state.selection.main;
-    // Android browsers don't fire reasonable key events for enter,
-    // backspace, or delete. So this detects changes that look like
-    // they're caused by those keys, and reinterprets them as key
-    // events. (Some of these keys are also handled by beforeinput
-    // events and the pendingAndroidKey mechanism, but that's not
-    // reliable in all situations.)
-    if (browser.android &&
-        ((change.to == sel.to &&
-            // GBoard will sometimes remove a space it just inserted
-            // after a completion when you press enter
-            (change.from == sel.from || change.from == sel.from - 1 && view.state.sliceDoc(change.from, sel.from) == " ") &&
-            change.insert.length == 1 && change.insert.lines == 2 &&
-            dispatchKey(view.contentDOM, "Enter", 13)) ||
-            ((change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 ||
-                lastKey == 8 && change.insert.length < change.to - change.from && change.to > sel.head) &&
-                dispatchKey(view.contentDOM, "Backspace", 8)) ||
-            (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
-                dispatchKey(view.contentDOM, "Delete", 46))))
-        return true;
-    let text = change.insert.toString();
-    if (view.inputState.composing >= 0)
-        view.inputState.composing++;
-    let defaultTr;
-    let defaultInsert = () => defaultTr || (defaultTr = applyDefaultInsert(view, change, newSel));
-    if (!view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text, defaultInsert)))
-        view.dispatch(defaultInsert());
-    return true;
-}
 function applyDefaultInsert(view, change, newSel) {
     let tr, startState = view.state, sel = startState.selection.main;
     if (change.from >= sel.from && change.to <= sel.to && change.to - change.from >= (sel.to - sel.from) / 3 &&
@@ -6542,7 +6555,6 @@ class DOMObserver {
     constructor(view) {
         this.view = view;
         this.active = false;
-        this.editContext = null;
         // The known selection. Kept in our own object, as opposed to just
         // directly accessing the selection because:
         //  - Safari doesn't report the right selection in shadow DOM
@@ -6587,10 +6599,6 @@ class DOMObserver {
             else
                 this.flush();
         });
-        if (window.EditContext) {
-            this.editContext = new EditContextManager(view);
-            view.contentDOM.editContext = this.editContext.editContext;
-        }
         if (useCharData)
             this.onCharData = (event) => {
                 this.queue.push({ target: event.target,
@@ -6641,8 +6649,6 @@ class DOMObserver {
     onScroll(e) {
         if (this.intersecting)
             this.flush(false);
-        if (this.editContext)
-            this.view.requestMeasure(this.editContext.measureReq);
         this.onScrollChanged(e);
     }
     onResize() {
@@ -6901,8 +6907,9 @@ class DOMObserver {
         }
         let startState = this.view.state;
         let handled = applyDOMChange(this.view, domChange);
-        // The view wasn't updated
-        if (this.view.state == startState)
+        // The view wasn't updated but DOM/selection changes were seen. Reset the view.
+        if (this.view.state == startState &&
+            (domChange.domChanged || domChange.newSel && !domChange.newSel.main.eq(this.view.state.selection.main)))
             this.view.update([]);
         return handled;
     }
@@ -6951,10 +6958,6 @@ class DOMObserver {
             win.removeEventListener("beforeprint", this.onPrint);
         win.document.removeEventListener("selectionchange", this.onSelectionChange);
     }
-    update(update) {
-        if (this.editContext)
-            this.editContext.update(update);
-    }
     destroy() {
         var _a, _b, _c;
         this.stop();
@@ -7014,161 +7017,6 @@ function safariSelectionRangeHack(view, selection) {
     view.contentDOM.removeEventListener("beforeinput", read, true);
     return found ? buildSelectionRangeFromRange(view, found) : null;
 }
-class EditContextManager {
-    constructor(view) {
-        // The document window for which the text in the context is
-        // maintained. For large documents, this may be smaller than the
-        // editor document. This window always includes the selection head.
-        this.from = 0;
-        this.to = 0;
-        // When applying a transaction, this is used to compare the change
-        // made to the context content to the change in the transaction in
-        // order to make the minimal changes to the context (since touching
-        // that sometimes breaks series of multiple edits made for a single
-        // user action on some Android keyboards)
-        this.pendingContextChange = null;
-        this.resetRange(view.state);
-        let context = this.editContext = new window.EditContext({
-            text: view.state.doc.sliceString(this.from, this.to),
-            selectionStart: this.toContextPos(Math.max(this.from, Math.min(this.to, view.state.selection.main.anchor))),
-            selectionEnd: this.toContextPos(view.state.selection.main.head)
-        });
-        context.addEventListener("textupdate", e => {
-            let { anchor } = view.state.selection.main;
-            let change = { from: this.toEditorPos(e.updateRangeStart),
-                to: this.toEditorPos(e.updateRangeEnd),
-                insert: Text.of(e.text.split("\n")) };
-            // If the window doesn't include the anchor, assume changes
-            // adjacent to a side go up to the anchor.
-            if (change.from == this.from && anchor < this.from)
-                change.from = anchor;
-            else if (change.to == this.to && anchor > this.to)
-                change.to = anchor;
-            // Edit context sometimes fire empty changes
-            if (change.from == change.to && !change.insert.length)
-                return;
-            this.pendingContextChange = change;
-            applyDOMChangeInner(view, change, EditorSelection.single(this.toEditorPos(e.selectionStart), this.toEditorPos(e.selectionEnd)));
-            // If the transaction didn't flush our change, revert it so
-            // that the context is in sync with the editor state again.
-            if (this.pendingContextChange)
-                this.revertPending(view.state);
-        });
-        context.addEventListener("characterboundsupdate", e => {
-            let rects = [], prev = null;
-            for (let i = this.toEditorPos(e.rangeStart), end = this.toEditorPos(e.rangeEnd); i < end; i++) {
-                let rect = view.coordsForChar(i);
-                prev = (rect && new DOMRect(rect.left, rect.right, rect.right - rect.left, rect.bottom - rect.top))
-                    || prev || new DOMRect;
-                rects.push(prev);
-            }
-            context.updateCharacterBounds(e.rangeStart, rects);
-        });
-        context.addEventListener("textformatupdate", e => {
-            let deco = [];
-            for (let format of e.getTextFormats()) {
-                let lineStyle = format.underlineStyle, thickness = format.underlineThickness;
-                if (lineStyle != "None" && thickness != "None") {
-                    let style = `text-decoration: underline ${lineStyle == "Dashed" ? "dashed " : lineStyle == "Squiggle" ? "wavy " : ""}${thickness == "Thin" ? 1 : 2}px`;
-                    deco.push(Decoration.mark({ attributes: { style } })
-                        .range(this.toEditorPos(format.rangeStart), this.toEditorPos(format.rangeEnd)));
-                }
-            }
-            view.dispatch({ effects: setEditContextFormatting.of(Decoration.set(deco)) });
-        });
-        context.addEventListener("compositionstart", () => {
-            if (view.inputState.composing < 0) {
-                view.inputState.composing = 0;
-                view.inputState.compositionFirstChange = true;
-            }
-        });
-        context.addEventListener("compositionend", () => {
-            view.inputState.composing = -1;
-            view.inputState.compositionFirstChange = null;
-        });
-        this.measureReq = { read: view => {
-                this.editContext.updateControlBounds(view.contentDOM.getBoundingClientRect());
-                let sel = getSelection(view.root);
-                if (sel && sel.rangeCount)
-                    this.editContext.updateSelectionBounds(sel.getRangeAt(0).getBoundingClientRect());
-            } };
-    }
-    applyEdits(update) {
-        let off = 0, abort = false, pending = this.pendingContextChange;
-        update.changes.iterChanges((fromA, toA, _fromB, _toB, insert) => {
-            if (abort)
-                return;
-            let dLen = insert.length - (toA - fromA);
-            if (pending && toA >= pending.to) {
-                if (pending.from == fromA && pending.to == toA && pending.insert.eq(insert)) {
-                    pending = this.pendingContextChange = null; // Match
-                    off += dLen;
-                    return;
-                }
-                else { // Mismatch, revert
-                    pending = null;
-                    this.revertPending(update.state);
-                }
-            }
-            fromA += off;
-            toA += off;
-            if (toA <= this.from) { // Before the window
-                this.from += dLen;
-                this.to += dLen;
-            }
-            else if (fromA < this.to) { // Overlaps with window
-                if (fromA < this.from || toA > this.to || (this.to - this.from) + insert.length > 30000 /* CxVp.MaxSize */) {
-                    abort = true;
-                    return;
-                }
-                this.editContext.updateText(this.toContextPos(fromA), this.toContextPos(toA), insert.toString());
-                this.to += dLen;
-            }
-            off += dLen;
-        });
-        if (pending && !abort)
-            this.revertPending(update.state);
-        return !abort;
-    }
-    update(update) {
-        if (!this.applyEdits(update) || !this.rangeIsValid(update.state)) {
-            this.pendingContextChange = null;
-            this.resetRange(update.state);
-            this.editContext.updateText(0, this.editContext.text.length, update.state.doc.sliceString(this.from, this.to));
-            this.setSelection(update.state);
-        }
-        else if (update.docChanged || update.selectionSet) {
-            this.setSelection(update.state);
-        }
-        if (update.geometryChanged || update.docChanged || update.selectionSet)
-            update.view.requestMeasure(this.measureReq);
-    }
-    resetRange(state) {
-        let { head } = state.selection.main;
-        this.from = Math.max(0, head - 10000 /* CxVp.Margin */);
-        this.to = Math.min(state.doc.length, head + 10000 /* CxVp.Margin */);
-    }
-    revertPending(state) {
-        let pending = this.pendingContextChange;
-        this.pendingContextChange = null;
-        this.editContext.updateText(this.toContextPos(pending.from), this.toContextPos(pending.to + pending.insert.length), state.doc.sliceString(pending.from, pending.to));
-    }
-    setSelection(state) {
-        let { main } = state.selection;
-        let start = this.toContextPos(Math.max(this.from, Math.min(this.to, main.anchor)));
-        let end = this.toContextPos(main.head);
-        if (this.editContext.selectionStart != start || this.editContext.selectionEnd != end)
-            this.editContext.updateSelection(start, end);
-    }
-    rangeIsValid(state) {
-        let { head } = state.selection.main;
-        return !(this.from > 0 && head - this.from < 500 /* CxVp.MinMargin */ ||
-            this.to < state.doc.length && this.to - head < 500 /* CxVp.MinMargin */ ||
-            this.to - this.from > 10000 /* CxVp.Margin */ * 3);
-    }
-    toEditorPos(contextPos) { return contextPos + this.from; }
-    toContextPos(editorPos) { return editorPos - this.from; }
-}
 
 // The editor's update state machine looks something like this:
 //
@@ -8599,11 +8447,17 @@ function getBase(view) {
     let left = view.textDirection == Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth * view.scaleX;
     return { left: left - view.scrollDOM.scrollLeft * view.scaleX, top: rect.top - view.scrollDOM.scrollTop * view.scaleY };
 }
-function wrappedLine(view, pos, inside) {
-    let range = EditorSelection.cursor(pos);
-    return { from: Math.max(inside.from, view.moveToLineBoundary(range, false, true).from),
-        to: Math.min(inside.to, view.moveToLineBoundary(range, true, true).from),
-        type: BlockType.Text };
+function wrappedLine(view, pos, side, inside) {
+    let coords = view.coordsAtPos(pos, side * 2);
+    if (!coords)
+        return inside;
+    let editorRect = view.dom.getBoundingClientRect();
+    let y = (coords.top + coords.bottom) / 2;
+    let left = view.posAtCoords({ x: editorRect.left + 1, y });
+    let right = view.posAtCoords({ x: editorRect.right - 1, y });
+    if (left == null || right == null)
+        return inside;
+    return { from: Math.max(inside.from, Math.min(left, right)), to: Math.min(inside.to, Math.max(left, right)) };
 }
 function rectanglesForRange(view, className, range) {
     if (range.to <= view.viewport.from || range.from >= view.viewport.to)
@@ -8619,10 +8473,10 @@ function rectanglesForRange(view, className, range) {
     let visualStart = startBlock.type == BlockType.Text ? startBlock : null;
     let visualEnd = endBlock.type == BlockType.Text ? endBlock : null;
     if (visualStart && (view.lineWrapping || startBlock.widgetLineBreaks))
-        visualStart = wrappedLine(view, from, visualStart);
+        visualStart = wrappedLine(view, from, 1, visualStart);
     if (visualEnd && (view.lineWrapping || endBlock.widgetLineBreaks))
-        visualEnd = wrappedLine(view, to, visualEnd);
-    if (visualStart && visualEnd && visualStart.from == visualEnd.from) {
+        visualEnd = wrappedLine(view, to, -1, visualEnd);
+    if (visualStart && visualEnd && visualStart.from == visualEnd.from && visualStart.to == visualEnd.to) {
         return pieces(drawForLine(range.from, range.to, visualStart));
     }
     else {
@@ -8877,14 +8731,19 @@ const selectionLayer = /*@__PURE__*/layer({
 });
 const themeSpec = {
     ".cm-line": {
-        "& ::selection": { backgroundColor: "transparent !important" },
-        "&::selection": { backgroundColor: "transparent !important" }
+        "& ::selection, &::selection": { backgroundColor: "transparent !important" },
+    },
+    ".cm-content": {
+        "& :focus": {
+            caretColor: "initial !important",
+            "&::selection, & ::selection": {
+                backgroundColor: "Highlight !important"
+            }
+        }
     }
 };
-if (CanHidePrimary) {
-    themeSpec[".cm-line"].caretColor = "transparent !important";
-    themeSpec[".cm-content"] = { caretColor: "transparent !important" };
-}
+if (CanHidePrimary)
+    themeSpec[".cm-line"].caretColor = themeSpec[".cm-content"].caretColor = "transparent !important";
 const hideNativeSelection = /*@__PURE__*/Prec.highest(/*@__PURE__*/EditorView.theme(themeSpec));
 
 const setDropCursorPos = /*@__PURE__*/StateEffect.define({

package/package.json

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