@codemirror/view 0.19.9 → 0.19.10

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.19.10 (2021-11-02)
+
+### Bug fixes
+
+Don't crash when `IntersectionObserver` fires its callback without any records. Try to handle some backspace issues on Chrome Android
+
+Using backspace near uneditable widgets on Chrome Android should now be more reliable.
+
+Work around a number of browser bugs by always rendering zero-width spaces around in-content widgets, so that browsers will treat the positions near them as valid cursor positions and not try to run composition across widget boundaries.
+
+Work around bogus composition changes created by Chrome Android after handled backspace presses.
+
+Work around an issue where tapping on an uneditable node in the editor would sometimes fail to show the virtual keyboard on Chrome Android.
+
+Prevent translation services from translating the editor content. Show direction override characters as special chars by default
+
+`specialChars` will now, by default, replace direction override chars, to mitigate https://trojansource.codes/ attacks.
+
+### New features
+
+The editor view will, if `parent` is given but `root` is not, derive the root from the parent element.
+
+Line decorations now accept a `class` property to directly add DOM classes to the line.
+
 ## 0.19.9 (2021-10-01)
 
 ### Bug fixes

package/dist/index.cjs

@@ -251,6 +251,14 @@ function contentEditablePlainTextSupported() {
     }
     return _plainTextSupported;
 }
+function getRoot(node) {
+    while (node) {
+        node = node.assignedSlot || node.parentNode;
+        if (node && (node.nodeType == 9 || node.nodeType == 11 && node.host))
+            return node;
+    }
+    return null;
+}
 
 class DOMPos {
     constructor(node, offset, precise = true) {
@@ -448,6 +456,7 @@ class ContentView {
             (this.breakAfter ? "#" : "");
     }
     static get(node) { return node.cmView; }
+    get isEditable() { return true; }
 }
 ContentView.prototype.breakAfter = 0;
 // Remove a DOM node and return its next sibling.
@@ -495,15 +504,18 @@ const gecko = !ie && /gecko\/(\d+)/i.test(nav.userAgent);
 const chrome = !ie && /Chrome\/(\d+)/.exec(nav.userAgent);
 const webkit = "webkitFontSmoothing" in doc.documentElement.style;
 const safari = !ie && /Apple Computer/.test(nav.vendor);
+const ios = safari && (/Mobile\/\w+/.test(nav.userAgent) || nav.maxTouchPoints > 2);
 var browser = {
-    mac: /Mac/.test(nav.platform),
+    mac: ios || /Mac/.test(nav.platform),
+    windows: /Win/.test(nav.platform),
+    linux: /Linux|X11/.test(nav.platform),
     ie,
     ie_version: ie_upto10 ? doc.documentMode || 6 : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0,
     gecko,
     gecko_version: gecko ? +(/Firefox\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
     chrome: !!chrome,
     chrome_version: chrome ? +chrome[1] : 0,
-    ios: safari && (/Mobile\/\w+/.test(nav.userAgent) || nav.maxTouchPoints > 2),
+    ios,
     android: /Android\b/.test(nav.userAgent),
     webkit,
     safari,
@@ -725,6 +737,7 @@ class WidgetView extends InlineView {
         }
         return (pos == 0 && side > 0 || pos == this.length && side <= 0) ? rect : flattenRect(rect, pos == 0);
     }
+    get isEditable() { return false; }
 }
 class CompositionView extends WidgetView {
     domAtPos(pos) { return new DOMPos(this.widget.text, pos); }
@@ -736,6 +749,38 @@ class CompositionView extends WidgetView {
     ignoreMutation() { return false; }
     get overrideDOMText() { return null; }
     coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
+    get isEditable() { return true; }
+}
+// These are drawn around uneditable widgets to avoid a number of
+// browser bugs that show up when the cursor is directly next to
+// uneditable inline content.
+class WidgetBufferView extends InlineView {
+    constructor(side) {
+        super();
+        this.side = side;
+    }
+    get length() { return 0; }
+    merge() { return false; }
+    become(other) {
+        return other instanceof WidgetBufferView && other.side == this.side;
+    }
+    slice() { return new WidgetBufferView(this.side); }
+    sync() {
+        if (!this.dom)
+            this.setDOM(document.createTextNode("\u200b"));
+        else if (this.dirty && this.dom.nodeValue != "\u200b")
+            this.dom.nodeValue = "\u200b";
+    }
+    getSide() { return this.side; }
+    domAtPos(pos) { return DOMPos.before(this.dom); }
+    domBoundsAround() { return null; }
+    coordsAt(pos) {
+        let rects = clientRectsFor(this.dom);
+        return rects[rects.length - 1];
+    }
+    get overrideDOMText() {
+        return text.Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
+    }
 }
 function mergeInlineChildren(parent, from, to, elts, openStart, openEnd) {
     let cur = parent.childCursor();
@@ -1231,14 +1276,17 @@ class LineView extends ContentView {
     }
     // Only called when building a line view in ContentBuilder
     addLineDeco(deco) {
-        let attrs = deco.spec.attributes;
+        let attrs = deco.spec.attributes, cls = deco.spec.class;
         if (attrs)
             this.attrs = combineAttrs(attrs, this.attrs || {});
+        if (cls)
+            this.attrs = combineAttrs(attrs, { class: cls });
     }
     domAtPos(pos) {
         return inlineDOMAtPos(this.dom, this.children, pos);
     }
     sync(track) {
+        var _a;
         if (!this.dom || (this.dirty & 4 /* Attrs */)) {
             this.setDOM(document.createElement("div"));
             this.dom.className = "cm-line";
@@ -1254,7 +1302,7 @@ class LineView extends ContentView {
         while (last && ContentView.get(last) instanceof MarkView)
             last = last.lastChild;
         if (!last ||
-            last.nodeName != "BR" && ContentView.get(last) instanceof WidgetView &&
+            last.nodeName != "BR" && ((_a = ContentView.get(last)) === null || _a === void 0 ? void 0 : _a.isEditable) == false &&
                 (!browser.ios || !this.children.some(ch => ch instanceof TextView))) {
             let hack = document.createElement("BR");
             hack.cmIgnore = true;
@@ -1353,6 +1401,9 @@ class ContentBuilder {
         this.content = [];
         this.curLine = null;
         this.breakAtStart = 0;
+        this.pendingBuffer = 0 /* No */;
+        // Set to false directly after a widget that covers the position after it
+        this.atCursorPos = true;
         this.openStart = -1;
         this.openEnd = -1;
         this.text = "";
@@ -1367,23 +1418,31 @@ class ContentBuilder {
         return !last.breakAfter && !(last instanceof BlockWidgetView && last.type == exports.BlockType.WidgetBefore);
     }
     getLine() {
-        if (!this.curLine)
+        if (!this.curLine) {
             this.content.push(this.curLine = new LineView);
+            this.atCursorPos = true;
+        }
         return this.curLine;
     }
-    addWidget(view) {
+    flushBuffer(active) {
+        if (this.pendingBuffer) {
+            this.curLine.append(wrapMarks(new WidgetBufferView(-1), active), active.length);
+            this.pendingBuffer = 0 /* No */;
+        }
+    }
+    addBlockWidget(view) {
+        this.flushBuffer([]);
         this.curLine = null;
         this.content.push(view);
     }
-    finish() {
+    finish(openEnd) {
+        if (!openEnd)
+            this.flushBuffer([]);
+        else
+            this.pendingBuffer = 0 /* No */;
         if (!this.posCovered())
             this.getLine();
     }
-    wrapMarks(view, active) {
-        for (let mark of active)
-            view = new MarkView(mark, [view], view.length);
-        return view;
-    }
     buildText(length, active, openStart) {
         while (length > 0) {
             if (this.textOff == this.text.length) {
@@ -1398,6 +1457,7 @@ class ContentBuilder {
                         this.content[this.content.length - 1].breakAfter = 1;
                     else
                         this.breakAtStart = 1;
+                    this.flushBuffer([]);
                     this.curLine = null;
                     length--;
                     continue;
@@ -1408,7 +1468,9 @@ class ContentBuilder {
                 }
             }
             let take = Math.min(this.text.length - this.textOff, length, 512 /* Chunk */);
-            this.getLine().append(this.wrapMarks(new TextView(this.text.slice(this.textOff, this.textOff + take)), active), openStart);
+            this.flushBuffer(active);
+            this.getLine().append(wrapMarks(new TextView(this.text.slice(this.textOff, this.textOff + take)), active), openStart);
+            this.atCursorPos = true;
             this.textOff += take;
             length -= take;
             openStart = 0;
@@ -1427,11 +1489,23 @@ class ContentBuilder {
                 let { type } = deco;
                 if (type == exports.BlockType.WidgetAfter && !this.posCovered())
                     this.getLine();
-                this.addWidget(new BlockWidgetView(deco.widget || new NullWidget("div"), len, type));
+                this.addBlockWidget(new BlockWidgetView(deco.widget || new NullWidget("div"), len, type));
             }
             else {
-                let widget = this.wrapMarks(WidgetView.create(deco.widget || new NullWidget("span"), len, deco.startSide), active);
-                this.getLine().append(widget, openStart);
+                let view = WidgetView.create(deco.widget || new NullWidget("span"), len, deco.startSide);
+                let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length && (from < to || deco.startSide > 0);
+                let cursorAfter = !view.isEditable && (from < to || deco.startSide <= 0);
+                let line = this.getLine();
+                if (this.pendingBuffer == 2 /* IfCursor */ && !cursorBefore)
+                    this.pendingBuffer = 0 /* No */;
+                this.flushBuffer(active);
+                if (cursorBefore) {
+                    line.append(wrapMarks(new WidgetBufferView(1), active), openStart);
+                    openStart = active.length + Math.max(0, openStart - active.length);
+                }
+                line.append(wrapMarks(view, active), openStart);
+                this.atCursorPos = cursorAfter;
+                this.pendingBuffer = !cursorAfter ? 0 /* No */ : from < to ? 1 /* Yes */ : 2 /* IfCursor */;
             }
         }
         else if (this.doc.lineAt(this.pos).from == this.pos) { // Line decoration
@@ -1457,10 +1531,15 @@ class ContentBuilder {
         builder.openEnd = rangeset.RangeSet.spans(decorations, from, to, builder);
         if (builder.openStart < 0)
             builder.openStart = builder.openEnd;
-        builder.finish();
+        builder.finish(builder.openEnd);
         return builder;
     }
 }
+function wrapMarks(view, active) {
+    for (let mark of active)
+        view = new MarkView(mark, [view], view.length);
+    return view;
+}
 class NullWidget extends WidgetType {
     constructor(tag) {
         super();
@@ -1907,6 +1986,14 @@ class DocView extends ContentView {
             return true;
         }
     }
+    reset(sel) {
+        if (this.dirty) {
+            this.view.observer.ignore(() => this.view.docView.sync());
+            this.dirty = 0 /* Not */;
+        }
+        if (sel)
+            this.updateSelection();
+    }
     // Used both by update and checkLayout do perform the actual DOM
     // update
     updateInner(changes, deco, oldLength, forceSelection = false, pointerSel = false) {
@@ -2036,6 +2123,14 @@ class DocView extends ContentView {
             !isEquivalentPosition(anchor.node, anchor.offset, domSel.anchorNode, domSel.anchorOffset) ||
             !isEquivalentPosition(head.node, head.offset, domSel.focusNode, domSel.focusOffset)) {
             this.view.observer.ignore(() => {
+                // Chrome Android will hide the virtual keyboard when tapping
+                // inside an uneditable node, and not bring it back when we
+                // move the cursor to its proper position. This tries to
+                // restore the keyboard by cycling focus.
+                if (browser.android && browser.chrome && this.dom.contains(domSel.focusNode) && inUneditable(domSel.focusNode, this.dom)) {
+                    this.dom.blur();
+                    this.dom.focus({ preventScroll: true });
+                }
                 let rawSel = getSelection(this.root);
                 if (main.empty) {
                     // Work around https://bugzilla.mozilla.org/show_bug.cgi?id=1612076
@@ -2343,6 +2438,14 @@ function findChangedDeco(a, b, diff) {
     rangeset.RangeSet.compare(a, b, diff, comp);
     return comp.changes;
 }
+function inUneditable(node, inside) {
+    for (let cur = node; cur && cur != inside; cur = cur.assignedSlot || cur.parentNode) {
+        if (cur.nodeType == 1 && cur.contentEditable == 'false') {
+            return true;
+        }
+    }
+    return false;
+}
 
 /**
 Used to indicate [text direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection).
@@ -2789,6 +2892,7 @@ function domPosInText(node, x, y) {
     return { node, offset: closestOffset > -1 ? closestOffset : generalSide > 0 ? node.nodeValue.length : 0 };
 }
 function posAtCoords(view, { x, y }, precise, bias = -1) {
+    var _a;
     let content = view.contentDOM.getBoundingClientRect(), block;
     let halfLine = view.defaultLineHeight / 2;
     for (let bounced = false;;) {
@@ -2819,7 +2923,7 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
     // There's visible editor content under the point, so we can try
     // using caret(Position|Range)FromPoint as a shortcut
     let node, offset = -1;
-    if (element && view.contentDOM.contains(element) && !(view.docView.nearest(element) instanceof WidgetView)) {
+    if (element && view.contentDOM.contains(element) && ((_a = view.docView.nearest(element)) === null || _a === void 0 ? void 0 : _a.isEditable) != false) {
         if (doc.caretPositionFromPoint) {
             let pos = doc.caretPositionFromPoint(x, y);
             if (pos)
@@ -2960,7 +3064,23 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
-        this.pendingIOSKey = null;
+        // On iOS, some keys need to have their default behavior happen
+        // (after which we retroactively handle them and reset the DOM) to
+        // avoid messing up the virtual keyboard state.
+        //
+        // On Chrome Android, backspace near widgets is just completely
+        // broken, and there are no key events, so we need to handle the
+        // beforeinput event. Deleting stuff will often create a flurry of
+        // events, and interrupting it before it is done just makes
+        // subsequent events even more broken, so again, we hold off doing
+        // anything until the browser is finished with whatever it is trying
+        // to do.
+        //
+        // setPendingKey sets this, causing the DOM observer to pause for a
+        // bit, and setting an animation frame (which seems the most
+        // reliable way to detect 'browser is done flailing') to fire a fake
+        // key event and re-sync the view again.
+        this.pendingKey = undefined;
         this.lastSelectionOrigin = null;
         this.lastSelectionTime = 0;
         this.lastEscPress = 0;
@@ -3069,20 +3189,27 @@ class InputState {
         // state. So we let it go through, and then, in
         // applyDOMChange, notify key handlers of it and reset to
         // the state they produce.
-        if (browser.ios && (event.keyCode == 13 || event.keyCode == 8) &&
+        let pending;
+        if (browser.ios && (pending = PendingKeys.find(key => key.keyCode == event.keyCode)) &&
             !(event.ctrlKey || event.altKey || event.metaKey) && !event.synthetic) {
-            this.pendingIOSKey = event.keyCode == 13 ? "enter" : "backspace";
-            setTimeout(() => this.flushIOSKey(view), 250);
+            this.setPendingKey(view, pending);
             return true;
         }
         return false;
     }
-    flushIOSKey(view) {
-        if (!this.pendingIOSKey)
-            return false;
-        let dom = view.contentDOM, key = this.pendingIOSKey;
-        this.pendingIOSKey = null;
-        return key == "enter" ? dispatchKey(dom, "Enter", 13) : dispatchKey(dom, "Backspace", 8);
+    setPendingKey(view, pending) {
+        this.pendingKey = pending;
+        requestAnimationFrame(() => {
+            if (!this.pendingKey)
+                return false;
+            let key = this.pendingKey;
+            this.pendingKey = undefined;
+            view.observer.processRecords();
+            let startState = view.state;
+            dispatchKey(view.contentDOM, key.key, key.keyCode);
+            if (view.state == startState)
+                view.docView.reset(true);
+        });
     }
     ignoreDuringComposition(event) {
         if (!/^key/.test(event.type))
@@ -3129,6 +3256,11 @@ class InputState {
             this.mouseSelection.destroy();
     }
 }
+const PendingKeys = [
+    { key: "Backspace", keyCode: 8, inputType: "deleteContentBackward" },
+    { key: "Enter", keyCode: 13, inputType: "insertParagraph" },
+    { key: "Delete", keyCode: 46, inputType: "deleteContentForward" }
+];
 // Key codes for modifier keys
 const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
 class MouseSelection {
@@ -3574,6 +3706,31 @@ handlers.compositionend = view => {
 handlers.contextmenu = view => {
     view.inputState.lastContextMenu = Date.now();
 };
+handlers.beforeinput = (view, event) => {
+    var _a;
+    // Because Chrome Android doesn't fire useful key events, use
+    // beforeinput to detect backspace (and possibly enter and delete,
+    // but those usually don't even seem to fire beforeinput events at
+    // the moment) and fake a key event for it.
+    //
+    // (preventDefault on beforeinput, though supported in the spec,
+    // seems to do nothing at all on Chrome).
+    let pending;
+    if (browser.chrome && browser.android && (pending = PendingKeys.find(key => key.inputType == event.inputType))) {
+        view.inputState.setPendingKey(view, pending);
+        let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
+        setTimeout(() => {
+            var _a;
+            // Backspacing near uneditable nodes on Chrome Android sometimes
+            // closes the virtual keyboard. This tries to crudely detect
+            // that and refocus to get it back.
+            if ((((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0) > startViewHeight + 10 && view.hasFocus) {
+                view.contentDOM.blur();
+                view.focus();
+            }
+        }, 50);
+    }
+};
 
 const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line"];
 class HeightOracle {
@@ -4702,7 +4859,7 @@ function buildTheme(main, spec, scopes) {
     });
 }
 const baseTheme = buildTheme("." + baseThemeID, {
-    "&": {
+    "&.cm-editor": {
         position: "relative !important",
         boxSizing: "border-box",
         "&.cm-focused": {
@@ -4911,7 +5068,7 @@ class DOMObserver {
             this.intersection = new IntersectionObserver(entries => {
                 if (this.parentCheck < 0)
                     this.parentCheck = setTimeout(this.listenForScroll.bind(this), 1000);
-                if (entries[entries.length - 1].intersectionRatio > 0 != this.intersecting) {
+                if (entries.length > 0 && entries[entries.length - 1].intersectionRatio > 0 != this.intersecting) {
                     this.intersecting = !this.intersecting;
                     if (this.intersecting != this.view.inView)
                         this.onScrollChanged(document.createEvent("Event"));
@@ -4919,7 +5076,7 @@ class DOMObserver {
             }, {});
             this.intersection.observe(this.dom);
             this.gapIntersection = new IntersectionObserver(entries => {
-                if (entries[entries.length - 1].intersectionRatio > 0)
+                if (entries.length > 0 && entries[entries.length - 1].intersectionRatio > 0)
                     this.onScrollChanged(document.createEvent("Event"));
             }, {});
         }
@@ -5053,20 +5210,12 @@ class DOMObserver {
             this.flush();
         }
     }
-    // Apply pending changes, if any
-    flush() {
-        if (this.delayedFlush >= 0)
-            return;
-        this.lastFlush = Date.now();
+    processRecords() {
         let records = this.queue;
         for (let mut of this.observer.takeRecords())
             records.push(mut);
         if (records.length)
             this.queue = [];
-        let selection = this.selectionRange;
-        let newSel = !this.ignoreSelection.eq(selection) && hasSelection(this.dom, selection);
-        if (records.length == 0 && !newSel)
-            return;
         let from = -1, to = -1, typeOver = false;
         for (let record of records) {
             let range = this.readMutation(record);
@@ -5082,17 +5231,26 @@ class DOMObserver {
                 to = Math.max(range.to, to);
             }
         }
+        return { from, to, typeOver };
+    }
+    // Apply pending changes, if any
+    flush() {
+        // Completely hold off flushing when pending keys are set—the code
+        // managing those will make sure processRecords is called and the
+        // view is resynchronized after
+        if (this.delayedFlush >= 0 || this.view.inputState.pendingKey)
+            return;
+        this.lastFlush = Date.now();
+        let { from, to, typeOver } = this.processRecords();
+        let selection = this.selectionRange;
+        let newSel = !this.ignoreSelection.eq(selection) && hasSelection(this.dom, selection);
+        if (from < 0 && !newSel)
+            return;
         let startState = this.view.state;
-        if (from > -1 || newSel)
-            this.onChange(from, to, typeOver);
-        if (this.view.state == startState) { // The view wasn't updated
-            if (this.view.docView.dirty) {
-                this.ignore(() => this.view.docView.sync());
-                this.view.docView.dirty = 0 /* Not */;
-            }
-            if (newSel)
-                this.view.docView.updateSelection();
-        }
+        this.onChange(from, to, typeOver);
+        // The view wasn't updated
+        if (this.view.state == startState)
+            this.view.docView.reset(newSel);
         this.clearSelection();
     }
     readMutation(rec) {
@@ -5229,9 +5387,9 @@ function applyDOMChange(view, start, end, typeOver) {
                 (change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
-                    dispatchKey(view.contentDOM, "Delete", 46))) ||
-            browser.ios && view.inputState.flushIOSKey(view))
+                    dispatchKey(view.contentDOM, "Delete", 46)))) {
             return;
+        }
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
             return;
@@ -5452,7 +5610,7 @@ class EditorView {
         this.dom.appendChild(this.scrollDOM);
         this._dispatch = config.dispatch || ((tr) => this.update([tr]));
         this.dispatch = this.dispatch.bind(this);
-        this.root = (config.root || document);
+        this.root = (config.root || getRoot(config.parent) || document);
         this.viewState = new ViewState(config.state || state.EditorState.create());
         this.plugins = this.state.facet(viewPlugin).map(spec => new PluginInstance(spec).update(this));
         this.observer = new DOMObserver(this, (from, to, typeOver) => {
@@ -5720,6 +5878,7 @@ class EditorView {
             spellcheck: "false",
             autocorrect: "off",
             autocapitalize: "off",
+            translate: "no",
             contenteditable: !this.state.facet(editable) ? "false" : contentEditablePlainTextSupported() ? "plaintext-only" : "true",
             class: "cm-content",
             style: `${browser.tabSize}: ${this.state.tabSize}`,
@@ -6220,11 +6379,7 @@ class CachedOrder {
     }
 }
 
-const currentPlatform = typeof navigator == "undefined" ? "key"
-    : /Mac/.test(navigator.platform) ? "mac"
-        : /Win/.test(navigator.platform) ? "win"
-            : /Linux|X11/.test(navigator.platform) ? "linux"
-                : "key";
+const currentPlatform = browser.mac ? "mac" : browser.windows ? "win" : browser.linux ? "linux" : "key";
 function normalizeKeyName(name, platform) {
     const parts = name.split(/-(?!$)/);
     let result = parts[parts.length - 1];
@@ -6730,7 +6885,7 @@ class MatchDecorator {
 }
 
 const UnicodeRegexpSupport = /x/.unicode != null ? "gu" : "g";
-const Specials = new RegExp("[\u0000-\u0008\u000a-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\ufeff\ufff9-\ufffc]", UnicodeRegexpSupport);
+const Specials = new RegExp("[\u0000-\u0008\u000a-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\u202d\u202e\ufeff\ufff9-\ufffc]", UnicodeRegexpSupport);
 const Names = {
     0: "null",
     7: "bell",
@@ -6745,6 +6900,8 @@ const Names = {
     8206: "left-to-right mark",
     8207: "right-to-left mark",
     8232: "line separator",
+    8237: "left-to-right override",
+    8238: "right-to-left override",
     8233: "paragraph separator",
     65279: "zero width no-break space",
     65532: "object replacement"
@@ -6911,7 +7068,7 @@ DOM class.
 function highlightActiveLine() {
     return activeLineHighlighter;
 }
-const lineDeco = Decoration.line({ attributes: { class: "cm-activeLine" } });
+const lineDeco = Decoration.line({ class: "cm-activeLine" });
 const activeLineHighlighter = ViewPlugin.fromClass(class {
     constructor(view) {
         this.decorations = this.getDeco(view);

package/dist/index.d.ts

@@ -119,6 +119,10 @@ interface LineDecorationSpec {
         [key: string]: string;
     };
     /**
+    Shorthand for `{attributes: {class: value}}`.
+    */
+    class?: string;
+    /**
     Other properties are allowed.
     */
     [other: string]: any;
@@ -599,7 +603,9 @@ interface EditorConfig {
     /**
     If the view is going to be mounted in a shadow root or document
     other than the one held by the global variable `document` (the
-    default), you should pass it here.
+    default), you should pass it here. If you provide `parent`, but
+    not this option, the editor will automatically look up a root
+    from the parent.
     */
     root?: Document | ShadowRoot;
     /**

package/dist/index.js

@@ -248,6 +248,14 @@ function contentEditablePlainTextSupported() {
     }
     return _plainTextSupported;
 }
+function getRoot(node) {
+    while (node) {
+        node = node.assignedSlot || node.parentNode;
+        if (node && (node.nodeType == 9 || node.nodeType == 11 && node.host))
+            return node;
+    }
+    return null;
+}
 
 class DOMPos {
     constructor(node, offset, precise = true) {
@@ -445,6 +453,7 @@ class ContentView {
             (this.breakAfter ? "#" : "");
     }
     static get(node) { return node.cmView; }
+    get isEditable() { return true; }
 }
 ContentView.prototype.breakAfter = 0;
 // Remove a DOM node and return its next sibling.
@@ -492,15 +501,18 @@ const gecko = !ie && /*@__PURE__*//gecko\/(\d+)/i.test(nav.userAgent);
 const chrome = !ie && /*@__PURE__*//Chrome\/(\d+)/.exec(nav.userAgent);
 const webkit = "webkitFontSmoothing" in doc.documentElement.style;
 const safari = !ie && /*@__PURE__*//Apple Computer/.test(nav.vendor);
+const ios = safari && (/*@__PURE__*//Mobile\/\w+/.test(nav.userAgent) || nav.maxTouchPoints > 2);
 var browser = {
-    mac: /*@__PURE__*//Mac/.test(nav.platform),
+    mac: ios || /*@__PURE__*//Mac/.test(nav.platform),
+    windows: /*@__PURE__*//Win/.test(nav.platform),
+    linux: /*@__PURE__*//Linux|X11/.test(nav.platform),
     ie,
     ie_version: ie_upto10 ? doc.documentMode || 6 : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0,
     gecko,
     gecko_version: gecko ? +(/*@__PURE__*//Firefox\/(\d+)/.exec(nav.userAgent) || [0, 0])[1] : 0,
     chrome: !!chrome,
     chrome_version: chrome ? +chrome[1] : 0,
-    ios: safari && (/*@__PURE__*//Mobile\/\w+/.test(nav.userAgent) || nav.maxTouchPoints > 2),
+    ios,
     android: /*@__PURE__*//Android\b/.test(nav.userAgent),
     webkit,
     safari,
@@ -722,6 +734,7 @@ class WidgetView extends InlineView {
         }
         return (pos == 0 && side > 0 || pos == this.length && side <= 0) ? rect : flattenRect(rect, pos == 0);
     }
+    get isEditable() { return false; }
 }
 class CompositionView extends WidgetView {
     domAtPos(pos) { return new DOMPos(this.widget.text, pos); }
@@ -733,6 +746,38 @@ class CompositionView extends WidgetView {
     ignoreMutation() { return false; }
     get overrideDOMText() { return null; }
     coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
+    get isEditable() { return true; }
+}
+// These are drawn around uneditable widgets to avoid a number of
+// browser bugs that show up when the cursor is directly next to
+// uneditable inline content.
+class WidgetBufferView extends InlineView {
+    constructor(side) {
+        super();
+        this.side = side;
+    }
+    get length() { return 0; }
+    merge() { return false; }
+    become(other) {
+        return other instanceof WidgetBufferView && other.side == this.side;
+    }
+    slice() { return new WidgetBufferView(this.side); }
+    sync() {
+        if (!this.dom)
+            this.setDOM(document.createTextNode("\u200b"));
+        else if (this.dirty && this.dom.nodeValue != "\u200b")
+            this.dom.nodeValue = "\u200b";
+    }
+    getSide() { return this.side; }
+    domAtPos(pos) { return DOMPos.before(this.dom); }
+    domBoundsAround() { return null; }
+    coordsAt(pos) {
+        let rects = clientRectsFor(this.dom);
+        return rects[rects.length - 1];
+    }
+    get overrideDOMText() {
+        return Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
+    }
 }
 function mergeInlineChildren(parent, from, to, elts, openStart, openEnd) {
     let cur = parent.childCursor();
@@ -1227,14 +1272,17 @@ class LineView extends ContentView {
     }
     // Only called when building a line view in ContentBuilder
     addLineDeco(deco) {
-        let attrs = deco.spec.attributes;
+        let attrs = deco.spec.attributes, cls = deco.spec.class;
         if (attrs)
             this.attrs = combineAttrs(attrs, this.attrs || {});
+        if (cls)
+            this.attrs = combineAttrs(attrs, { class: cls });
     }
     domAtPos(pos) {
         return inlineDOMAtPos(this.dom, this.children, pos);
     }
     sync(track) {
+        var _a;
         if (!this.dom || (this.dirty & 4 /* Attrs */)) {
             this.setDOM(document.createElement("div"));
             this.dom.className = "cm-line";
@@ -1250,7 +1298,7 @@ class LineView extends ContentView {
         while (last && ContentView.get(last) instanceof MarkView)
             last = last.lastChild;
         if (!last ||
-            last.nodeName != "BR" && ContentView.get(last) instanceof WidgetView &&
+            last.nodeName != "BR" && ((_a = ContentView.get(last)) === null || _a === void 0 ? void 0 : _a.isEditable) == false &&
                 (!browser.ios || !this.children.some(ch => ch instanceof TextView))) {
             let hack = document.createElement("BR");
             hack.cmIgnore = true;
@@ -1349,6 +1397,9 @@ class ContentBuilder {
         this.content = [];
         this.curLine = null;
         this.breakAtStart = 0;
+        this.pendingBuffer = 0 /* No */;
+        // Set to false directly after a widget that covers the position after it
+        this.atCursorPos = true;
         this.openStart = -1;
         this.openEnd = -1;
         this.text = "";
@@ -1363,23 +1414,31 @@ class ContentBuilder {
         return !last.breakAfter && !(last instanceof BlockWidgetView && last.type == BlockType.WidgetBefore);
     }
     getLine() {
-        if (!this.curLine)
+        if (!this.curLine) {
             this.content.push(this.curLine = new LineView);
+            this.atCursorPos = true;
+        }
         return this.curLine;
     }
-    addWidget(view) {
+    flushBuffer(active) {
+        if (this.pendingBuffer) {
+            this.curLine.append(wrapMarks(new WidgetBufferView(-1), active), active.length);
+            this.pendingBuffer = 0 /* No */;
+        }
+    }
+    addBlockWidget(view) {
+        this.flushBuffer([]);
         this.curLine = null;
         this.content.push(view);
     }
-    finish() {
+    finish(openEnd) {
+        if (!openEnd)
+            this.flushBuffer([]);
+        else
+            this.pendingBuffer = 0 /* No */;
         if (!this.posCovered())
             this.getLine();
     }
-    wrapMarks(view, active) {
-        for (let mark of active)
-            view = new MarkView(mark, [view], view.length);
-        return view;
-    }
     buildText(length, active, openStart) {
         while (length > 0) {
             if (this.textOff == this.text.length) {
@@ -1394,6 +1453,7 @@ class ContentBuilder {
                         this.content[this.content.length - 1].breakAfter = 1;
                     else
                         this.breakAtStart = 1;
+                    this.flushBuffer([]);
                     this.curLine = null;
                     length--;
                     continue;
@@ -1404,7 +1464,9 @@ class ContentBuilder {
                 }
             }
             let take = Math.min(this.text.length - this.textOff, length, 512 /* Chunk */);
-            this.getLine().append(this.wrapMarks(new TextView(this.text.slice(this.textOff, this.textOff + take)), active), openStart);
+            this.flushBuffer(active);
+            this.getLine().append(wrapMarks(new TextView(this.text.slice(this.textOff, this.textOff + take)), active), openStart);
+            this.atCursorPos = true;
             this.textOff += take;
             length -= take;
             openStart = 0;
@@ -1423,11 +1485,23 @@ class ContentBuilder {
                 let { type } = deco;
                 if (type == BlockType.WidgetAfter && !this.posCovered())
                     this.getLine();
-                this.addWidget(new BlockWidgetView(deco.widget || new NullWidget("div"), len, type));
+                this.addBlockWidget(new BlockWidgetView(deco.widget || new NullWidget("div"), len, type));
             }
             else {
-                let widget = this.wrapMarks(WidgetView.create(deco.widget || new NullWidget("span"), len, deco.startSide), active);
-                this.getLine().append(widget, openStart);
+                let view = WidgetView.create(deco.widget || new NullWidget("span"), len, deco.startSide);
+                let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length && (from < to || deco.startSide > 0);
+                let cursorAfter = !view.isEditable && (from < to || deco.startSide <= 0);
+                let line = this.getLine();
+                if (this.pendingBuffer == 2 /* IfCursor */ && !cursorBefore)
+                    this.pendingBuffer = 0 /* No */;
+                this.flushBuffer(active);
+                if (cursorBefore) {
+                    line.append(wrapMarks(new WidgetBufferView(1), active), openStart);
+                    openStart = active.length + Math.max(0, openStart - active.length);
+                }
+                line.append(wrapMarks(view, active), openStart);
+                this.atCursorPos = cursorAfter;
+                this.pendingBuffer = !cursorAfter ? 0 /* No */ : from < to ? 1 /* Yes */ : 2 /* IfCursor */;
             }
         }
         else if (this.doc.lineAt(this.pos).from == this.pos) { // Line decoration
@@ -1453,10 +1527,15 @@ class ContentBuilder {
         builder.openEnd = RangeSet.spans(decorations, from, to, builder);
         if (builder.openStart < 0)
             builder.openStart = builder.openEnd;
-        builder.finish();
+        builder.finish(builder.openEnd);
         return builder;
     }
 }
+function wrapMarks(view, active) {
+    for (let mark of active)
+        view = new MarkView(mark, [view], view.length);
+    return view;
+}
 class NullWidget extends WidgetType {
     constructor(tag) {
         super();
@@ -1903,6 +1982,14 @@ class DocView extends ContentView {
             return true;
         }
     }
+    reset(sel) {
+        if (this.dirty) {
+            this.view.observer.ignore(() => this.view.docView.sync());
+            this.dirty = 0 /* Not */;
+        }
+        if (sel)
+            this.updateSelection();
+    }
     // Used both by update and checkLayout do perform the actual DOM
     // update
     updateInner(changes, deco, oldLength, forceSelection = false, pointerSel = false) {
@@ -2032,6 +2119,14 @@ class DocView extends ContentView {
             !isEquivalentPosition(anchor.node, anchor.offset, domSel.anchorNode, domSel.anchorOffset) ||
             !isEquivalentPosition(head.node, head.offset, domSel.focusNode, domSel.focusOffset)) {
             this.view.observer.ignore(() => {
+                // Chrome Android will hide the virtual keyboard when tapping
+                // inside an uneditable node, and not bring it back when we
+                // move the cursor to its proper position. This tries to
+                // restore the keyboard by cycling focus.
+                if (browser.android && browser.chrome && this.dom.contains(domSel.focusNode) && inUneditable(domSel.focusNode, this.dom)) {
+                    this.dom.blur();
+                    this.dom.focus({ preventScroll: true });
+                }
                 let rawSel = getSelection(this.root);
                 if (main.empty) {
                     // Work around https://bugzilla.mozilla.org/show_bug.cgi?id=1612076
@@ -2339,6 +2434,14 @@ function findChangedDeco(a, b, diff) {
     RangeSet.compare(a, b, diff, comp);
     return comp.changes;
 }
+function inUneditable(node, inside) {
+    for (let cur = node; cur && cur != inside; cur = cur.assignedSlot || cur.parentNode) {
+        if (cur.nodeType == 1 && cur.contentEditable == 'false') {
+            return true;
+        }
+    }
+    return false;
+}
 
 /**
 Used to indicate [text direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection).
@@ -2784,6 +2887,7 @@ function domPosInText(node, x, y) {
     return { node, offset: closestOffset > -1 ? closestOffset : generalSide > 0 ? node.nodeValue.length : 0 };
 }
 function posAtCoords(view, { x, y }, precise, bias = -1) {
+    var _a;
     let content = view.contentDOM.getBoundingClientRect(), block;
     let halfLine = view.defaultLineHeight / 2;
     for (let bounced = false;;) {
@@ -2814,7 +2918,7 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
     // There's visible editor content under the point, so we can try
     // using caret(Position|Range)FromPoint as a shortcut
     let node, offset = -1;
-    if (element && view.contentDOM.contains(element) && !(view.docView.nearest(element) instanceof WidgetView)) {
+    if (element && view.contentDOM.contains(element) && ((_a = view.docView.nearest(element)) === null || _a === void 0 ? void 0 : _a.isEditable) != false) {
         if (doc.caretPositionFromPoint) {
             let pos = doc.caretPositionFromPoint(x, y);
             if (pos)
@@ -2955,7 +3059,23 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
-        this.pendingIOSKey = null;
+        // On iOS, some keys need to have their default behavior happen
+        // (after which we retroactively handle them and reset the DOM) to
+        // avoid messing up the virtual keyboard state.
+        //
+        // On Chrome Android, backspace near widgets is just completely
+        // broken, and there are no key events, so we need to handle the
+        // beforeinput event. Deleting stuff will often create a flurry of
+        // events, and interrupting it before it is done just makes
+        // subsequent events even more broken, so again, we hold off doing
+        // anything until the browser is finished with whatever it is trying
+        // to do.
+        //
+        // setPendingKey sets this, causing the DOM observer to pause for a
+        // bit, and setting an animation frame (which seems the most
+        // reliable way to detect 'browser is done flailing') to fire a fake
+        // key event and re-sync the view again.
+        this.pendingKey = undefined;
         this.lastSelectionOrigin = null;
         this.lastSelectionTime = 0;
         this.lastEscPress = 0;
@@ -3064,20 +3184,27 @@ class InputState {
         // state. So we let it go through, and then, in
         // applyDOMChange, notify key handlers of it and reset to
         // the state they produce.
-        if (browser.ios && (event.keyCode == 13 || event.keyCode == 8) &&
+        let pending;
+        if (browser.ios && (pending = PendingKeys.find(key => key.keyCode == event.keyCode)) &&
             !(event.ctrlKey || event.altKey || event.metaKey) && !event.synthetic) {
-            this.pendingIOSKey = event.keyCode == 13 ? "enter" : "backspace";
-            setTimeout(() => this.flushIOSKey(view), 250);
+            this.setPendingKey(view, pending);
             return true;
         }
         return false;
     }
-    flushIOSKey(view) {
-        if (!this.pendingIOSKey)
-            return false;
-        let dom = view.contentDOM, key = this.pendingIOSKey;
-        this.pendingIOSKey = null;
-        return key == "enter" ? dispatchKey(dom, "Enter", 13) : dispatchKey(dom, "Backspace", 8);
+    setPendingKey(view, pending) {
+        this.pendingKey = pending;
+        requestAnimationFrame(() => {
+            if (!this.pendingKey)
+                return false;
+            let key = this.pendingKey;
+            this.pendingKey = undefined;
+            view.observer.processRecords();
+            let startState = view.state;
+            dispatchKey(view.contentDOM, key.key, key.keyCode);
+            if (view.state == startState)
+                view.docView.reset(true);
+        });
     }
     ignoreDuringComposition(event) {
         if (!/^key/.test(event.type))
@@ -3124,6 +3251,11 @@ class InputState {
             this.mouseSelection.destroy();
     }
 }
+const PendingKeys = [
+    { key: "Backspace", keyCode: 8, inputType: "deleteContentBackward" },
+    { key: "Enter", keyCode: 13, inputType: "insertParagraph" },
+    { key: "Delete", keyCode: 46, inputType: "deleteContentForward" }
+];
 // Key codes for modifier keys
 const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
 class MouseSelection {
@@ -3569,6 +3701,31 @@ handlers.compositionend = view => {
 handlers.contextmenu = view => {
     view.inputState.lastContextMenu = Date.now();
 };
+handlers.beforeinput = (view, event) => {
+    var _a;
+    // Because Chrome Android doesn't fire useful key events, use
+    // beforeinput to detect backspace (and possibly enter and delete,
+    // but those usually don't even seem to fire beforeinput events at
+    // the moment) and fake a key event for it.
+    //
+    // (preventDefault on beforeinput, though supported in the spec,
+    // seems to do nothing at all on Chrome).
+    let pending;
+    if (browser.chrome && browser.android && (pending = PendingKeys.find(key => key.inputType == event.inputType))) {
+        view.inputState.setPendingKey(view, pending);
+        let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
+        setTimeout(() => {
+            var _a;
+            // Backspacing near uneditable nodes on Chrome Android sometimes
+            // closes the virtual keyboard. This tries to crudely detect
+            // that and refocus to get it back.
+            if ((((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0) > startViewHeight + 10 && view.hasFocus) {
+                view.contentDOM.blur();
+                view.focus();
+            }
+        }, 50);
+    }
+};
 
 const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line"];
 class HeightOracle {
@@ -4696,7 +4853,7 @@ function buildTheme(main, spec, scopes) {
     });
 }
 const baseTheme = /*@__PURE__*/buildTheme("." + baseThemeID, {
-    "&": {
+    "&.cm-editor": {
         position: "relative !important",
         boxSizing: "border-box",
         "&.cm-focused": {
@@ -4905,7 +5062,7 @@ class DOMObserver {
             this.intersection = new IntersectionObserver(entries => {
                 if (this.parentCheck < 0)
                     this.parentCheck = setTimeout(this.listenForScroll.bind(this), 1000);
-                if (entries[entries.length - 1].intersectionRatio > 0 != this.intersecting) {
+                if (entries.length > 0 && entries[entries.length - 1].intersectionRatio > 0 != this.intersecting) {
                     this.intersecting = !this.intersecting;
                     if (this.intersecting != this.view.inView)
                         this.onScrollChanged(document.createEvent("Event"));
@@ -4913,7 +5070,7 @@ class DOMObserver {
             }, {});
             this.intersection.observe(this.dom);
             this.gapIntersection = new IntersectionObserver(entries => {
-                if (entries[entries.length - 1].intersectionRatio > 0)
+                if (entries.length > 0 && entries[entries.length - 1].intersectionRatio > 0)
                     this.onScrollChanged(document.createEvent("Event"));
             }, {});
         }
@@ -5047,20 +5204,12 @@ class DOMObserver {
             this.flush();
         }
     }
-    // Apply pending changes, if any
-    flush() {
-        if (this.delayedFlush >= 0)
-            return;
-        this.lastFlush = Date.now();
+    processRecords() {
         let records = this.queue;
         for (let mut of this.observer.takeRecords())
             records.push(mut);
         if (records.length)
             this.queue = [];
-        let selection = this.selectionRange;
-        let newSel = !this.ignoreSelection.eq(selection) && hasSelection(this.dom, selection);
-        if (records.length == 0 && !newSel)
-            return;
         let from = -1, to = -1, typeOver = false;
         for (let record of records) {
             let range = this.readMutation(record);
@@ -5076,17 +5225,26 @@ class DOMObserver {
                 to = Math.max(range.to, to);
             }
         }
+        return { from, to, typeOver };
+    }
+    // Apply pending changes, if any
+    flush() {
+        // Completely hold off flushing when pending keys are set—the code
+        // managing those will make sure processRecords is called and the
+        // view is resynchronized after
+        if (this.delayedFlush >= 0 || this.view.inputState.pendingKey)
+            return;
+        this.lastFlush = Date.now();
+        let { from, to, typeOver } = this.processRecords();
+        let selection = this.selectionRange;
+        let newSel = !this.ignoreSelection.eq(selection) && hasSelection(this.dom, selection);
+        if (from < 0 && !newSel)
+            return;
         let startState = this.view.state;
-        if (from > -1 || newSel)
-            this.onChange(from, to, typeOver);
-        if (this.view.state == startState) { // The view wasn't updated
-            if (this.view.docView.dirty) {
-                this.ignore(() => this.view.docView.sync());
-                this.view.docView.dirty = 0 /* Not */;
-            }
-            if (newSel)
-                this.view.docView.updateSelection();
-        }
+        this.onChange(from, to, typeOver);
+        // The view wasn't updated
+        if (this.view.state == startState)
+            this.view.docView.reset(newSel);
         this.clearSelection();
     }
     readMutation(rec) {
@@ -5223,9 +5381,9 @@ function applyDOMChange(view, start, end, typeOver) {
                 (change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
-                    dispatchKey(view.contentDOM, "Delete", 46))) ||
-            browser.ios && view.inputState.flushIOSKey(view))
+                    dispatchKey(view.contentDOM, "Delete", 46)))) {
             return;
+        }
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
             return;
@@ -5446,7 +5604,7 @@ class EditorView {
         this.dom.appendChild(this.scrollDOM);
         this._dispatch = config.dispatch || ((tr) => this.update([tr]));
         this.dispatch = this.dispatch.bind(this);
-        this.root = (config.root || document);
+        this.root = (config.root || getRoot(config.parent) || document);
         this.viewState = new ViewState(config.state || EditorState.create());
         this.plugins = this.state.facet(viewPlugin).map(spec => new PluginInstance(spec).update(this));
         this.observer = new DOMObserver(this, (from, to, typeOver) => {
@@ -5714,6 +5872,7 @@ class EditorView {
             spellcheck: "false",
             autocorrect: "off",
             autocapitalize: "off",
+            translate: "no",
             contenteditable: !this.state.facet(editable) ? "false" : contentEditablePlainTextSupported() ? "plaintext-only" : "true",
             class: "cm-content",
             style: `${browser.tabSize}: ${this.state.tabSize}`,
@@ -6214,11 +6373,7 @@ class CachedOrder {
     }
 }
 
-const currentPlatform = typeof navigator == "undefined" ? "key"
-    : /*@__PURE__*//Mac/.test(navigator.platform) ? "mac"
-        : /*@__PURE__*//Win/.test(navigator.platform) ? "win"
-            : /*@__PURE__*//Linux|X11/.test(navigator.platform) ? "linux"
-                : "key";
+const currentPlatform = browser.mac ? "mac" : browser.windows ? "win" : browser.linux ? "linux" : "key";
 function normalizeKeyName(name, platform) {
     const parts = name.split(/-(?!$)/);
     let result = parts[parts.length - 1];
@@ -6724,7 +6879,7 @@ class MatchDecorator {
 }
 
 const UnicodeRegexpSupport = /x/.unicode != null ? "gu" : "g";
-const Specials = /*@__PURE__*/new RegExp("[\u0000-\u0008\u000a-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\ufeff\ufff9-\ufffc]", UnicodeRegexpSupport);
+const Specials = /*@__PURE__*/new RegExp("[\u0000-\u0008\u000a-\u001f\u007f-\u009f\u00ad\u061c\u200b\u200e\u200f\u2028\u2029\u202d\u202e\ufeff\ufff9-\ufffc]", UnicodeRegexpSupport);
 const Names = {
     0: "null",
     7: "bell",
@@ -6739,6 +6894,8 @@ const Names = {
     8206: "left-to-right mark",
     8207: "right-to-left mark",
     8232: "line separator",
+    8237: "left-to-right override",
+    8238: "right-to-left override",
     8233: "paragraph separator",
     65279: "zero width no-break space",
     65532: "object replacement"
@@ -6905,7 +7062,7 @@ DOM class.
 function highlightActiveLine() {
     return activeLineHighlighter;
 }
-const lineDeco = /*@__PURE__*/Decoration.line({ attributes: { class: "cm-activeLine" } });
+const lineDeco = /*@__PURE__*/Decoration.line({ class: "cm-activeLine" });
 const activeLineHighlighter = /*@__PURE__*/ViewPlugin.fromClass(class {
     constructor(view) {
         this.decorations = this.getDeco(view);

package/package.json

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