@codemirror/view 6.26.4-edit-context.1 → 6.27.0

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
@@ -3748,9 +3742,16 @@ class InputState {
         // (after which we retroactively handle them and reset the DOM) to
         // avoid messing up the virtual keyboard state.
         this.pendingIOSKey = undefined;
+        /**
+        When enabled (>-1), tab presses are not given to key handlers,
+        leaving the browser's default behavior. If >0, the mode expires
+        at that timestamp, and any other keypress clears it.
+        Esc enables temporary tab focus mode for two seconds when not
+        otherwise handled.
+        */
+        this.tabFocusMode = -1;
         this.lastSelectionOrigin = null;
         this.lastSelectionTime = 0;
-        this.lastEscPress = 0;
         this.lastContextMenu = 0;
         this.scrollHandlers = [];
         this.handlers = Object.create(null);
@@ -3830,10 +3831,10 @@ class InputState {
         // Must always run, even if a custom handler handled the event
         this.lastKeyCode = event.keyCode;
         this.lastKeyTime = Date.now();
-        if (event.keyCode == 9 && Date.now() < this.lastEscPress + 2000)
+        if (event.keyCode == 9 && this.tabFocusMode > -1 && (!this.tabFocusMode || Date.now() <= this.tabFocusMode))
             return true;
-        if (event.keyCode != 27 && modifierCodes.indexOf(event.keyCode) < 0)
-            this.view.inputState.lastEscPress = 0;
+        if (this.tabFocusMode > 0 && event.keyCode != 27 && modifierCodes.indexOf(event.keyCode) < 0)
+            this.tabFocusMode = -1;
         // Chrome for Android usually doesn't fire proper key events, but
         // occasionally does, usually surrounded by a bunch of complicated
         // composition changes. When an enter or backspace key event is
@@ -3894,7 +3895,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 +4073,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);
     }
 }
@@ -4170,8 +4172,8 @@ observers.scroll = view => {
 };
 handlers.keydown = (view, event) => {
     view.inputState.setSelectionOrigin("select");
-    if (event.keyCode == 27)
-        view.inputState.lastEscPress = Date.now();
+    if (event.keyCode == 27 && view.inputState.tabFocusMode != 0)
+        view.inputState.tabFocusMode = Date.now() + 2000;
     return false;
 };
 observers.touchstart = (view, e) => {
@@ -4197,7 +4199,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 +4492,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 +4500,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 +5419,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 +5439,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 +5476,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 +5577,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 +5771,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 +5853,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 +5897,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 +6294,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 +6397,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 +6441,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 +6567,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 +6611,6 @@ class DOMObserver {
             else
                 this.flush();
         });
-        if (window.EditContext && view.constructor.EDIT_CONTEXT !== false) {
-            this.editContext = new EditContextManager(view);
-            view.contentDOM.editContext = this.editContext.editContext;
-        }
         if (useCharData)
             this.onCharData = (event) => {
                 this.queue.push({ target: event.target,
@@ -6646,8 +6661,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 +6919,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 +6970,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 +7029,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:
 //
@@ -8033,6 +7888,25 @@ class EditorView {
         return scrollIntoView.of(new ScrollTarget(state.EditorSelection.cursor(ref.from), "start", "start", ref.top - scrollTop, scrollLeft, true));
     }
     /**
+    Enable or disable tab-focus mode, which disables key bindings
+    for Tab and Shift-Tab, letting the browser's default
+    focus-changing behavior go through instead. This is useful to
+    prevent trapping keyboard users in your editor.
+    
+    Without argument, this toggles the mode. With a boolean, it
+    enables (true) or disables it (false). Given a number, it
+    temporarily enables the mode until that number of milliseconds
+    have passed or another non-Tab key is pressed.
+    */
+    setTabFocusMode(to) {
+        if (to == null)
+            this.inputState.tabFocusMode = this.inputState.tabFocusMode < 0 ? 0 : -1;
+        else if (typeof to == "boolean")
+            this.inputState.tabFocusMode = to ? 0 : -1;
+        else if (this.inputState.tabFocusMode != 0)
+            this.inputState.tabFocusMode = Date.now() + to;
+    }
+    /**
     Returns an extension that can be used to add DOM event handlers.
     The value should be an object mapping event names to handler
     functions. For any given event, such functions are ordered by
@@ -8604,11 +8478,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 +8504,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 +8762,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({