@codemirror/view 6.1.4 → 6.2.2

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## 6.2.2 (2022-08-31)
+
+### Bug fixes
+
+Don't reset the selection for selection change events that were suppressed by a node view.
+
+## 6.2.1 (2022-08-25)
+
+### Bug fixes
+
+Don't use the global `document` variable to track focus, since that doesn't work in another window/frame.
+
+Fix an issue where key handlers that didn't return true were sometimes called twice for the same keypress.
+
+Avoid editing glitches when using deletion keys like ctrl-d on iOS.
+
+Properly treat characters from the 'Arabic Presentation Forms-A' Unicode block as right-to-left.
+
+Work around a Firefox bug that inserts text at the wrong point for specific cross-line selections.
+
+## 6.2.0 (2022-08-05)
+
+### Bug fixes
+
+Fix a bug where `posAtCoords` would return the wrong results for positions to the right of wrapped lines.
+
+### New features
+
+The new `EditorView.setRoot` method can be used when an editor view is moved to a new document or shadow root.
+
 ## 6.1.4 (2022-08-04)
 
 ### Bug fixes

package/dist/index.cjs

@@ -22,8 +22,8 @@ function getSelection(root) {
 function contains(dom, node) {
     return node ? dom == node || dom.contains(node.nodeType != 1 ? node.parentNode : node) : false;
 }
-function deepActiveElement() {
-    let elt = document.activeElement;
+function deepActiveElement(doc) {
+    let elt = doc.activeElement;
     while (elt && elt.shadowRoot)
         elt = elt.shadowRoot.activeElement;
     return elt;
@@ -762,7 +762,7 @@ class MarkView extends ContentView {
         return new MarkView(this.mark, result, length);
     }
     domAtPos(pos) {
-        return inlineDOMAtPos(this.dom, this.children, pos);
+        return inlineDOMAtPos(this, pos);
     }
     coordsAt(pos, side) {
         return coordsInChildren(this, pos, side);
@@ -913,11 +913,14 @@ class CompositionView extends WidgetView {
 // offset.
 function scanCompositionTree(pos, side, view, text, enterView, fromText) {
     if (view instanceof MarkView) {
-        for (let child of view.children) {
-            let hasComp = contains(child.dom, text);
-            let len = hasComp ? text.nodeValue.length : child.length;
-            if (pos < len || pos == len && child.getSide() <= 0)
-                return hasComp ? scanCompositionTree(pos, side, child, text, enterView, fromText) : enterView(child, pos, side);
+        for (let child = view.dom.firstChild; child; child = child.nextSibling) {
+            let desc = ContentView.get(child);
+            if (!desc)
+                return fromText(pos, side);
+            let hasComp = contains(child, text);
+            let len = desc.length + (hasComp ? text.nodeValue.length : 0);
+            if (pos < len || pos == len && desc.getSide() <= 0)
+                return hasComp ? scanCompositionTree(pos, side, desc, text, enterView, fromText) : enterView(desc, pos, side);
             pos -= len;
         }
         return enterView(view, view.length, -1);
@@ -1007,8 +1010,8 @@ function inlineSiblingRect(view, side) {
     }
     return undefined;
 }
-function inlineDOMAtPos(dom, children, pos) {
-    let i = 0;
+function inlineDOMAtPos(parent, pos) {
+    let dom = parent.dom, { children } = parent, i = 0;
     for (let off = 0; i < children.length; i++) {
         let child = children[i], end = off + child.length;
         if (end == off && child.getSide() <= 0)
@@ -1019,10 +1022,16 @@ function inlineDOMAtPos(dom, children, pos) {
             break;
         off = end;
     }
-    for (; i > 0; i--) {
-        let before = children[i - 1].dom;
-        if (before.parentNode == dom)
-            return DOMPos.after(before);
+    //  if (i) return DOMPos.after(children[i - 1].dom!)
+    for (let j = i; j > 0; j--) {
+        let prev = children[j - 1];
+        if (prev.dom.parentNode == dom)
+            return prev.domAtPos(prev.length);
+    }
+    for (let j = i; j < children.length; j++) {
+        let next = children[j];
+        if (next.dom.parentNode == dom)
+            return next.domAtPos(0);
     }
     return new DOMPos(dom, 0);
 }
@@ -1431,7 +1440,7 @@ class LineView extends ContentView {
             this.attrs = combineAttrs({ class: cls }, this.attrs || {});
     }
     domAtPos(pos) {
-        return inlineDOMAtPos(this.dom, this.children, pos);
+        return inlineDOMAtPos(this, pos);
     }
     reuseDOM(node) {
         if (node.nodeName == "DIV") {
@@ -2077,9 +2086,10 @@ function charType(ch) {
             0x600 <= ch && ch <= 0x6f9 ? ArabicTypes[ch - 0x600] :
                 0x6ee <= ch && ch <= 0x8ac ? 4 /* AL */ :
                     0x2000 <= ch && ch <= 0x200b ? 256 /* NI */ :
-                        ch == 0x200c ? 256 /* NI */ : 1 /* L */;
+                        0xfb50 <= ch && ch <= 0xfdff ? 4 /* AL */ :
+                            ch == 0x200c ? 256 /* NI */ : 1 /* L */;
 }
-const BidiRE = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
+const BidiRE = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac\ufb50-\ufdff]/;
 /**
 Represents a contiguous range of text that has a single direction
 (as in left-to-right or right-to-left).
@@ -2483,7 +2493,6 @@ class DocView extends ContentView {
         this.updateDeco();
         this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
     }
-    get root() { return this.view.root; }
     get editorView() { return this.view; }
     get length() { return this.view.state.doc.length; }
     // Update the document view to a given state. scrollIntoView can be
@@ -2606,7 +2615,7 @@ class DocView extends ContentView {
                     this.dom.blur();
                     this.dom.focus({ preventScroll: true });
                 }
-                let rawSel = getSelection(this.root);
+                let rawSel = getSelection(this.view.root);
                 if (!rawSel) ;
                 else if (main.empty) {
                     // Work around https://bugzilla.mozilla.org/show_bug.cgi?id=1612076
@@ -2649,7 +2658,7 @@ class DocView extends ContentView {
         if (this.compositionDeco.size)
             return;
         let cursor = this.view.state.selection.main;
-        let sel = getSelection(this.root);
+        let sel = getSelection(this.view.root);
         if (!sel || !cursor.empty || !cursor.assoc || !sel.modify)
             return;
         let line = LineView.find(this, cursor.head);
@@ -2666,7 +2675,7 @@ class DocView extends ContentView {
         sel.modify("move", cursor.assoc < 0 ? "forward" : "backward", "lineboundary");
     }
     mayControlSelection() {
-        let active = this.root.activeElement;
+        let active = this.view.root.activeElement;
         return active == this.dom ||
             hasSelection(this.dom, this.view.observer.selectionRange) && !(active && this.dom.contains(active));
     }
@@ -3019,7 +3028,7 @@ function upBot(rect, bottom) {
     return bottom > rect.bottom ? { top: rect.top, left: rect.left, right: rect.right, bottom } : rect;
 }
 function domPosAtCoords(parent, x, y) {
-    let closest, closestRect, closestX, closestY;
+    let closest, closestRect, closestX, closestY, closestOverlap = false;
     let above, below, aboveRect, belowRect;
     for (let child = parent.firstChild; child; child = child.nextSibling) {
         let rects = clientRectsFor(child);
@@ -3035,6 +3044,7 @@ function domPosAtCoords(parent, x, y) {
                 closestRect = rect;
                 closestX = dx;
                 closestY = dy;
+                closestOverlap = !dx || (dx > 0 ? i < rects.length - 1 : i > 0);
             }
             if (dx == 0) {
                 if (y > rect.bottom && (!aboveRect || aboveRect.bottom < rect.bottom)) {
@@ -3067,7 +3077,7 @@ function domPosAtCoords(parent, x, y) {
     let clipX = Math.max(closestRect.left, Math.min(closestRect.right, x));
     if (closest.nodeType == 3)
         return domPosInText(closest, clipX, y);
-    if (!closestX && closest.contentEditable == "true")
+    if (closestOverlap && closest.contentEditable != "false")
         return domPosAtCoords(closest, clipX, y);
     let offset = Array.prototype.indexOf.call(parent.childNodes, closest) +
         (x >= (closestRect.left + closestRect.right) / 2 ? 1 : 0);
@@ -3164,7 +3174,8 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
             let range = doc.caretRangeFromPoint(x, y);
             if (range) {
                 ({ startContainer: node, startOffset: offset } = range);
-                if (browser.safari && isSuspiciousSafariCaretResult(node, offset, x) ||
+                if (!view.contentDOM.contains(node) ||
+                    browser.safari && isSuspiciousSafariCaretResult(node, offset, x) ||
                     browser.chrome && isSuspiciousChromeCaretResult(node, offset, x))
                     node = undefined;
             }
@@ -3457,9 +3468,10 @@ class InputState {
         // applyDOMChange, notify key handlers of it and reset to
         // the state they produce.
         let pending;
-        if (browser.ios && (pending = PendingKeys.find(key => key.keyCode == event.keyCode)) &&
-            !(event.ctrlKey || event.altKey || event.metaKey) && !event.synthetic) {
-            this.pendingIOSKey = pending;
+        if (browser.ios && !event.synthetic && !event.altKey && !event.metaKey &&
+            ((pending = PendingKeys.find(key => key.keyCode == event.keyCode)) && !event.ctrlKey ||
+                EmacsyPendingKeys.indexOf(event.key) > -1 && event.ctrlKey && !event.shiftKey)) {
+            this.pendingIOSKey = pending || event;
             setTimeout(() => this.flushIOSKey(view), 250);
             return true;
         }
@@ -3514,6 +3526,7 @@ const PendingKeys = [
     { key: "Enter", keyCode: 13, inputType: "insertParagraph" },
     { key: "Delete", keyCode: 46, inputType: "deleteContentForward" }
 ];
+const EmacsyPendingKeys = "dthko";
 // Key codes for modifier keys
 const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
 class MouseSelection {
@@ -5378,6 +5391,7 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     ".cm-widgetBuffer": {
         verticalAlign: "text-top",
         height: "1em",
+        width: 0,
         display: "inline"
     },
     ".cm-placeholder": {
@@ -5487,7 +5501,9 @@ class DOMObserver {
                 this.flushSoon();
             };
         this.onSelectionChange = this.onSelectionChange.bind(this);
-        window.addEventListener("resize", this.onResize = this.onResize.bind(this));
+        this.onResize = this.onResize.bind(this);
+        this.onPrint = this.onPrint.bind(this);
+        this.onScroll = this.onScroll.bind(this);
         if (typeof ResizeObserver == "function") {
             this.resize = new ResizeObserver(() => {
                 if (this.view.docView.lastUpdate < Date.now() - 75)
@@ -5495,9 +5511,9 @@ class DOMObserver {
             });
             this.resize.observe(view.scrollDOM);
         }
-        window.addEventListener("beforeprint", this.onPrint = this.onPrint.bind(this));
+        this.win = view.dom.ownerDocument.defaultView;
+        this.addWindowListeners(this.win);
         this.start();
-        window.addEventListener("scroll", this.onScroll = this.onScroll.bind(this));
         if (typeof IntersectionObserver == "function") {
             this.intersection = new IntersectionObserver(entries => {
                 if (this.parentCheck < 0)
@@ -5516,7 +5532,6 @@ class DOMObserver {
         }
         this.listenForScroll();
         this.readSelectionRange();
-        this.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
     }
     onScroll(e) {
         if (this.intersecting)
@@ -5547,14 +5562,18 @@ class DOMObserver {
         }
     }
     onSelectionChange(event) {
+        let wasChanged = this.selectionChanged;
         if (!this.readSelectionRange() || this.delayedAndroidKey)
             return;
         let { view } = this, sel = this.selectionRange;
         if (view.state.facet(editable) ? view.root.activeElement != this.dom : !hasSelection(view.dom, sel))
             return;
         let context = sel.anchorNode && view.docView.nearest(sel.anchorNode);
-        if (context && context.ignoreEvent(event))
+        if (context && context.ignoreEvent(event)) {
+            if (!wasChanged)
+                this.selectionChanged = false;
             return;
+        }
         // Deletions on IE11 fire their events in the wrong order, giving
         // us a selection change event before the DOM changes are
         // reported.
@@ -5571,7 +5590,8 @@ class DOMObserver {
         let { view } = this;
         // The Selection object is broken in shadow roots in Safari. See
         // https://github.com/codemirror/dev/issues/414
-        let range = browser.safari && view.root.nodeType == 11 && deepActiveElement() == this.dom &&
+        let range = browser.safari && view.root.nodeType == 11 &&
+            deepActiveElement(this.dom.ownerDocument) == this.dom &&
             safariSelectionRangeHack(this.view) || getSelection(view.root);
         if (!range || this.selectionRange.eq(range))
             return false;
@@ -5731,6 +5751,7 @@ class DOMObserver {
         let newSel = this.selectionChanged && hasSelection(this.dom, this.selectionRange);
         if (from < 0 && !newSel)
             return;
+        this.view.inputState.lastFocusTime = 0;
         this.selectionChanged = false;
         let startState = this.view.state;
         let handled = this.onChange(from, to, typeOver);
@@ -5759,6 +5780,25 @@ class DOMObserver {
             return null;
         }
     }
+    setWindow(win) {
+        if (win != this.win) {
+            this.removeWindowListeners(this.win);
+            this.win = win;
+            this.addWindowListeners(this.win);
+        }
+    }
+    addWindowListeners(win) {
+        win.addEventListener("resize", this.onResize);
+        win.addEventListener("beforeprint", this.onPrint);
+        win.addEventListener("scroll", this.onScroll);
+        win.document.addEventListener("selectionchange", this.onSelectionChange);
+    }
+    removeWindowListeners(win) {
+        win.removeEventListener("scroll", this.onScroll);
+        win.removeEventListener("resize", this.onResize);
+        win.removeEventListener("beforeprint", this.onPrint);
+        win.document.removeEventListener("selectionchange", this.onSelectionChange);
+    }
     destroy() {
         var _a, _b, _c;
         this.stop();
@@ -5767,10 +5807,7 @@ class DOMObserver {
         (_c = this.resize) === null || _c === void 0 ? void 0 : _c.disconnect();
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
-        window.removeEventListener("scroll", this.onScroll);
-        window.removeEventListener("resize", this.onResize);
-        window.removeEventListener("beforeprint", this.onPrint);
-        this.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
+        this.removeWindowListeners(this.win);
         clearTimeout(this.parentCheck);
         clearTimeout(this.resizeTimeout);
     }
@@ -5799,7 +5836,7 @@ function safariSelectionRangeHack(view) {
         found = event.getTargetRanges()[0];
     }
     view.contentDOM.addEventListener("beforeinput", read, true);
-    document.execCommand("indent");
+    view.dom.ownerDocument.execCommand("indent");
     view.contentDOM.removeEventListener("beforeinput", read, true);
     if (!found)
         return null;
@@ -6078,7 +6115,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 || getRoot(config.parent) || document);
+        this._root = (config.root || getRoot(config.parent) || document);
         this.viewState = new ViewState(config.state || state.EditorState.create(config));
         this.plugins = this.state.facet(viewPlugin).map(spec => new PluginInstance(spec));
         for (let plugin of this.plugins)
@@ -6139,6 +6176,10 @@ class EditorView {
     composition there.
     */
     get compositionStarted() { return this.inputState.composing >= 0; }
+    /**
+    The document or shadow root that the view lives in.
+    */
+    get root() { return this._root; }
     dispatch(...input) {
         this._dispatch(input.length == 1 && input[0] instanceof state.Transaction ? input[0]
             : this.state.update(...input));
@@ -6474,7 +6515,7 @@ class EditorView {
     /**
     Find the text line or block widget at the given vertical
     position (which is interpreted as relative to the [top of the
-    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)).
     */
     elementAtHeight(height) {
         this.readMeasured();
@@ -6483,7 +6524,8 @@ class EditorView {
     /**
     Find the line block (see
     [`lineBlockAt`](https://codemirror.net/6/docs/ref/#view.EditorView.lineBlockAt) at the given
-    height.
+    height, again interpreted relative to the [top of the
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop).
     */
     lineBlockAtHeight(height) {
         this.readMeasured();
@@ -6677,7 +6719,7 @@ class EditorView {
         // or closing, which leads us to ignore selection changes from the
         // context menu because it looks like the editor isn't focused.
         // This kludges around that.
-        return (document.hasFocus() || browser.safari && ((_a = this.inputState) === null || _a === void 0 ? void 0 : _a.lastContextMenu) > Date.now() - 3e4) &&
+        return (this.dom.ownerDocument.hasFocus() || browser.safari && ((_a = this.inputState) === null || _a === void 0 ? void 0 : _a.lastContextMenu) > Date.now() - 3e4) &&
             this.root.activeElement == this.contentDOM;
     }
     /**
@@ -6690,6 +6732,17 @@ class EditorView {
         });
     }
     /**
+    Update the [root](https://codemirror.net/6/docs/ref/##view.EditorViewConfig.root) in which the editor lives. This is only
+    necessary when moving the editor's existing DOM to a new window or shadow root.
+    */
+    setRoot(root) {
+        if (this._root != root) {
+            this._root = root;
+            this.observer.setWindow((root.nodeType == 9 ? root : root.ownerDocument).defaultView);
+            this.mountStyles();
+        }
+    }
+    /**
     Clean up this editor view, removing its element from the
     document, unregistering event handlers, and notifying
     plugins. The view instance can no longer be used after
@@ -6851,6 +6904,11 @@ the editor's vertical layout structure. The ones provided as
 functions are called _after_ the new viewport has been computed,
 and thus **must not** introduce block widgets or replacing
 decorations that cover line breaks.
+
+If you want decorated ranges to behave like atomic units for
+cursor motion and deletion purposes, also provide the range set
+containing the decorations to
+[`EditorView.atomicRanges`](https://codemirror.net/6/docs/ref/#view.EditorView^atomicRanges).
 */
 EditorView.decorations = decorations;
 /**
@@ -7081,7 +7139,7 @@ function runHandlers(map, event, view, scope) {
         }
         return false;
     };
-    let scopeObj = map[scope], baseName;
+    let scopeObj = map[scope], baseName, shiftName;
     if (scopeObj) {
         if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)]))
             return true;
@@ -7089,8 +7147,8 @@ function runHandlers(map, event, view, scope) {
             (baseName = w3cKeyname.base[event.keyCode]) && baseName != name) {
             if (runFor(scopeObj[prefix + modifiers(baseName, event, true)]))
                 return true;
-            else if (event.shiftKey && w3cKeyname.shift[event.keyCode] != baseName &&
-                runFor(scopeObj[prefix + modifiers(w3cKeyname.shift[event.keyCode], event, false)]))
+            else if (event.shiftKey && (shiftName = w3cKeyname.shift[event.keyCode]) != name && shiftName != baseName &&
+                runFor(scopeObj[prefix + modifiers(shiftName, event, false)]))
                 return true;
         }
         else if (isChar && event.shiftKey) {

package/dist/index.d.ts

@@ -647,10 +647,11 @@ declare class EditorView {
     */
     get compositionStarted(): boolean;
     private _dispatch;
+    private _root;
     /**
     The document or shadow root that the view lives in.
     */
-    readonly root: DocumentOrShadowRoot;
+    get root(): DocumentOrShadowRoot;
     /**
     The DOM element that wraps the entire editor view.
     */
@@ -752,13 +753,14 @@ declare class EditorView {
     /**
     Find the text line or block widget at the given vertical
     position (which is interpreted as relative to the [top of the
-    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)).
     */
     elementAtHeight(height: number): BlockInfo;
     /**
     Find the line block (see
     [`lineBlockAt`](https://codemirror.net/6/docs/ref/#view.EditorView.lineBlockAt) at the given
-    height.
+    height, again interpreted relative to the [top of the
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop).
     */
     lineBlockAtHeight(height: number): BlockInfo;
     /**
@@ -921,6 +923,11 @@ declare class EditorView {
     */
     focus(): void;
     /**
+    Update the [root](https://codemirror.net/6/docs/ref/##view.EditorViewConfig.root) in which the editor lives. This is only
+    necessary when moving the editor's existing DOM to a new window or shadow root.
+    */
+    setRoot(root: Document | ShadowRoot): void;
+    /**
     Clean up this editor view, removing its element from the
     document, unregistering event handlers, and notifying
     plugins. The view instance can no longer be used after
@@ -1047,6 +1054,11 @@ declare class EditorView {
     functions are called _after_ the new viewport has been computed,
     and thus **must not** introduce block widgets or replacing
     decorations that cover line breaks.
+    
+    If you want decorated ranges to behave like atomic units for
+    cursor motion and deletion purposes, also provide the range set
+    containing the decorations to
+    [`EditorView.atomicRanges`](https://codemirror.net/6/docs/ref/#view.EditorView^atomicRanges).
     */
     static decorations: Facet<DecorationSet | ((view: EditorView) => DecorationSet), readonly (DecorationSet | ((view: EditorView) => DecorationSet))[]>;
     /**

package/dist/index.js

@@ -18,8 +18,8 @@ function getSelection(root) {
 function contains(dom, node) {
     return node ? dom == node || dom.contains(node.nodeType != 1 ? node.parentNode : node) : false;
 }
-function deepActiveElement() {
-    let elt = document.activeElement;
+function deepActiveElement(doc) {
+    let elt = doc.activeElement;
     while (elt && elt.shadowRoot)
         elt = elt.shadowRoot.activeElement;
     return elt;
@@ -758,7 +758,7 @@ class MarkView extends ContentView {
         return new MarkView(this.mark, result, length);
     }
     domAtPos(pos) {
-        return inlineDOMAtPos(this.dom, this.children, pos);
+        return inlineDOMAtPos(this, pos);
     }
     coordsAt(pos, side) {
         return coordsInChildren(this, pos, side);
@@ -909,11 +909,14 @@ class CompositionView extends WidgetView {
 // offset.
 function scanCompositionTree(pos, side, view, text, enterView, fromText) {
     if (view instanceof MarkView) {
-        for (let child of view.children) {
-            let hasComp = contains(child.dom, text);
-            let len = hasComp ? text.nodeValue.length : child.length;
-            if (pos < len || pos == len && child.getSide() <= 0)
-                return hasComp ? scanCompositionTree(pos, side, child, text, enterView, fromText) : enterView(child, pos, side);
+        for (let child = view.dom.firstChild; child; child = child.nextSibling) {
+            let desc = ContentView.get(child);
+            if (!desc)
+                return fromText(pos, side);
+            let hasComp = contains(child, text);
+            let len = desc.length + (hasComp ? text.nodeValue.length : 0);
+            if (pos < len || pos == len && desc.getSide() <= 0)
+                return hasComp ? scanCompositionTree(pos, side, desc, text, enterView, fromText) : enterView(desc, pos, side);
             pos -= len;
         }
         return enterView(view, view.length, -1);
@@ -1003,8 +1006,8 @@ function inlineSiblingRect(view, side) {
     }
     return undefined;
 }
-function inlineDOMAtPos(dom, children, pos) {
-    let i = 0;
+function inlineDOMAtPos(parent, pos) {
+    let dom = parent.dom, { children } = parent, i = 0;
     for (let off = 0; i < children.length; i++) {
         let child = children[i], end = off + child.length;
         if (end == off && child.getSide() <= 0)
@@ -1015,10 +1018,16 @@ function inlineDOMAtPos(dom, children, pos) {
             break;
         off = end;
     }
-    for (; i > 0; i--) {
-        let before = children[i - 1].dom;
-        if (before.parentNode == dom)
-            return DOMPos.after(before);
+    //  if (i) return DOMPos.after(children[i - 1].dom!)
+    for (let j = i; j > 0; j--) {
+        let prev = children[j - 1];
+        if (prev.dom.parentNode == dom)
+            return prev.domAtPos(prev.length);
+    }
+    for (let j = i; j < children.length; j++) {
+        let next = children[j];
+        if (next.dom.parentNode == dom)
+            return next.domAtPos(0);
     }
     return new DOMPos(dom, 0);
 }
@@ -1426,7 +1435,7 @@ class LineView extends ContentView {
             this.attrs = combineAttrs({ class: cls }, this.attrs || {});
     }
     domAtPos(pos) {
-        return inlineDOMAtPos(this.dom, this.children, pos);
+        return inlineDOMAtPos(this, pos);
     }
     reuseDOM(node) {
         if (node.nodeName == "DIV") {
@@ -2071,9 +2080,10 @@ function charType(ch) {
             0x600 <= ch && ch <= 0x6f9 ? ArabicTypes[ch - 0x600] :
                 0x6ee <= ch && ch <= 0x8ac ? 4 /* AL */ :
                     0x2000 <= ch && ch <= 0x200b ? 256 /* NI */ :
-                        ch == 0x200c ? 256 /* NI */ : 1 /* L */;
+                        0xfb50 <= ch && ch <= 0xfdff ? 4 /* AL */ :
+                            ch == 0x200c ? 256 /* NI */ : 1 /* L */;
 }
-const BidiRE = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
+const BidiRE = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac\ufb50-\ufdff]/;
 /**
 Represents a contiguous range of text that has a single direction
 (as in left-to-right or right-to-left).
@@ -2477,7 +2487,6 @@ class DocView extends ContentView {
         this.updateDeco();
         this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
     }
-    get root() { return this.view.root; }
     get editorView() { return this.view; }
     get length() { return this.view.state.doc.length; }
     // Update the document view to a given state. scrollIntoView can be
@@ -2600,7 +2609,7 @@ class DocView extends ContentView {
                     this.dom.blur();
                     this.dom.focus({ preventScroll: true });
                 }
-                let rawSel = getSelection(this.root);
+                let rawSel = getSelection(this.view.root);
                 if (!rawSel) ;
                 else if (main.empty) {
                     // Work around https://bugzilla.mozilla.org/show_bug.cgi?id=1612076
@@ -2643,7 +2652,7 @@ class DocView extends ContentView {
         if (this.compositionDeco.size)
             return;
         let cursor = this.view.state.selection.main;
-        let sel = getSelection(this.root);
+        let sel = getSelection(this.view.root);
         if (!sel || !cursor.empty || !cursor.assoc || !sel.modify)
             return;
         let line = LineView.find(this, cursor.head);
@@ -2660,7 +2669,7 @@ class DocView extends ContentView {
         sel.modify("move", cursor.assoc < 0 ? "forward" : "backward", "lineboundary");
     }
     mayControlSelection() {
-        let active = this.root.activeElement;
+        let active = this.view.root.activeElement;
         return active == this.dom ||
             hasSelection(this.dom, this.view.observer.selectionRange) && !(active && this.dom.contains(active));
     }
@@ -3013,7 +3022,7 @@ function upBot(rect, bottom) {
     return bottom > rect.bottom ? { top: rect.top, left: rect.left, right: rect.right, bottom } : rect;
 }
 function domPosAtCoords(parent, x, y) {
-    let closest, closestRect, closestX, closestY;
+    let closest, closestRect, closestX, closestY, closestOverlap = false;
     let above, below, aboveRect, belowRect;
     for (let child = parent.firstChild; child; child = child.nextSibling) {
         let rects = clientRectsFor(child);
@@ -3029,6 +3038,7 @@ function domPosAtCoords(parent, x, y) {
                 closestRect = rect;
                 closestX = dx;
                 closestY = dy;
+                closestOverlap = !dx || (dx > 0 ? i < rects.length - 1 : i > 0);
             }
             if (dx == 0) {
                 if (y > rect.bottom && (!aboveRect || aboveRect.bottom < rect.bottom)) {
@@ -3061,7 +3071,7 @@ function domPosAtCoords(parent, x, y) {
     let clipX = Math.max(closestRect.left, Math.min(closestRect.right, x));
     if (closest.nodeType == 3)
         return domPosInText(closest, clipX, y);
-    if (!closestX && closest.contentEditable == "true")
+    if (closestOverlap && closest.contentEditable != "false")
         return domPosAtCoords(closest, clipX, y);
     let offset = Array.prototype.indexOf.call(parent.childNodes, closest) +
         (x >= (closestRect.left + closestRect.right) / 2 ? 1 : 0);
@@ -3158,7 +3168,8 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
             let range = doc.caretRangeFromPoint(x, y);
             if (range) {
                 ({ startContainer: node, startOffset: offset } = range);
-                if (browser.safari && isSuspiciousSafariCaretResult(node, offset, x) ||
+                if (!view.contentDOM.contains(node) ||
+                    browser.safari && isSuspiciousSafariCaretResult(node, offset, x) ||
                     browser.chrome && isSuspiciousChromeCaretResult(node, offset, x))
                     node = undefined;
             }
@@ -3451,9 +3462,10 @@ class InputState {
         // applyDOMChange, notify key handlers of it and reset to
         // the state they produce.
         let pending;
-        if (browser.ios && (pending = PendingKeys.find(key => key.keyCode == event.keyCode)) &&
-            !(event.ctrlKey || event.altKey || event.metaKey) && !event.synthetic) {
-            this.pendingIOSKey = pending;
+        if (browser.ios && !event.synthetic && !event.altKey && !event.metaKey &&
+            ((pending = PendingKeys.find(key => key.keyCode == event.keyCode)) && !event.ctrlKey ||
+                EmacsyPendingKeys.indexOf(event.key) > -1 && event.ctrlKey && !event.shiftKey)) {
+            this.pendingIOSKey = pending || event;
             setTimeout(() => this.flushIOSKey(view), 250);
             return true;
         }
@@ -3508,6 +3520,7 @@ const PendingKeys = [
     { key: "Enter", keyCode: 13, inputType: "insertParagraph" },
     { key: "Delete", keyCode: 46, inputType: "deleteContentForward" }
 ];
+const EmacsyPendingKeys = "dthko";
 // Key codes for modifier keys
 const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
 class MouseSelection {
@@ -5371,6 +5384,7 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     ".cm-widgetBuffer": {
         verticalAlign: "text-top",
         height: "1em",
+        width: 0,
         display: "inline"
     },
     ".cm-placeholder": {
@@ -5480,7 +5494,9 @@ class DOMObserver {
                 this.flushSoon();
             };
         this.onSelectionChange = this.onSelectionChange.bind(this);
-        window.addEventListener("resize", this.onResize = this.onResize.bind(this));
+        this.onResize = this.onResize.bind(this);
+        this.onPrint = this.onPrint.bind(this);
+        this.onScroll = this.onScroll.bind(this);
         if (typeof ResizeObserver == "function") {
             this.resize = new ResizeObserver(() => {
                 if (this.view.docView.lastUpdate < Date.now() - 75)
@@ -5488,9 +5504,9 @@ class DOMObserver {
             });
             this.resize.observe(view.scrollDOM);
         }
-        window.addEventListener("beforeprint", this.onPrint = this.onPrint.bind(this));
+        this.win = view.dom.ownerDocument.defaultView;
+        this.addWindowListeners(this.win);
         this.start();
-        window.addEventListener("scroll", this.onScroll = this.onScroll.bind(this));
         if (typeof IntersectionObserver == "function") {
             this.intersection = new IntersectionObserver(entries => {
                 if (this.parentCheck < 0)
@@ -5509,7 +5525,6 @@ class DOMObserver {
         }
         this.listenForScroll();
         this.readSelectionRange();
-        this.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
     }
     onScroll(e) {
         if (this.intersecting)
@@ -5540,14 +5555,18 @@ class DOMObserver {
         }
     }
     onSelectionChange(event) {
+        let wasChanged = this.selectionChanged;
         if (!this.readSelectionRange() || this.delayedAndroidKey)
             return;
         let { view } = this, sel = this.selectionRange;
         if (view.state.facet(editable) ? view.root.activeElement != this.dom : !hasSelection(view.dom, sel))
             return;
         let context = sel.anchorNode && view.docView.nearest(sel.anchorNode);
-        if (context && context.ignoreEvent(event))
+        if (context && context.ignoreEvent(event)) {
+            if (!wasChanged)
+                this.selectionChanged = false;
             return;
+        }
         // Deletions on IE11 fire their events in the wrong order, giving
         // us a selection change event before the DOM changes are
         // reported.
@@ -5564,7 +5583,8 @@ class DOMObserver {
         let { view } = this;
         // The Selection object is broken in shadow roots in Safari. See
         // https://github.com/codemirror/dev/issues/414
-        let range = browser.safari && view.root.nodeType == 11 && deepActiveElement() == this.dom &&
+        let range = browser.safari && view.root.nodeType == 11 &&
+            deepActiveElement(this.dom.ownerDocument) == this.dom &&
             safariSelectionRangeHack(this.view) || getSelection(view.root);
         if (!range || this.selectionRange.eq(range))
             return false;
@@ -5724,6 +5744,7 @@ class DOMObserver {
         let newSel = this.selectionChanged && hasSelection(this.dom, this.selectionRange);
         if (from < 0 && !newSel)
             return;
+        this.view.inputState.lastFocusTime = 0;
         this.selectionChanged = false;
         let startState = this.view.state;
         let handled = this.onChange(from, to, typeOver);
@@ -5752,6 +5773,25 @@ class DOMObserver {
             return null;
         }
     }
+    setWindow(win) {
+        if (win != this.win) {
+            this.removeWindowListeners(this.win);
+            this.win = win;
+            this.addWindowListeners(this.win);
+        }
+    }
+    addWindowListeners(win) {
+        win.addEventListener("resize", this.onResize);
+        win.addEventListener("beforeprint", this.onPrint);
+        win.addEventListener("scroll", this.onScroll);
+        win.document.addEventListener("selectionchange", this.onSelectionChange);
+    }
+    removeWindowListeners(win) {
+        win.removeEventListener("scroll", this.onScroll);
+        win.removeEventListener("resize", this.onResize);
+        win.removeEventListener("beforeprint", this.onPrint);
+        win.document.removeEventListener("selectionchange", this.onSelectionChange);
+    }
     destroy() {
         var _a, _b, _c;
         this.stop();
@@ -5760,10 +5800,7 @@ class DOMObserver {
         (_c = this.resize) === null || _c === void 0 ? void 0 : _c.disconnect();
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
-        window.removeEventListener("scroll", this.onScroll);
-        window.removeEventListener("resize", this.onResize);
-        window.removeEventListener("beforeprint", this.onPrint);
-        this.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
+        this.removeWindowListeners(this.win);
         clearTimeout(this.parentCheck);
         clearTimeout(this.resizeTimeout);
     }
@@ -5792,7 +5829,7 @@ function safariSelectionRangeHack(view) {
         found = event.getTargetRanges()[0];
     }
     view.contentDOM.addEventListener("beforeinput", read, true);
-    document.execCommand("indent");
+    view.dom.ownerDocument.execCommand("indent");
     view.contentDOM.removeEventListener("beforeinput", read, true);
     if (!found)
         return null;
@@ -6071,7 +6108,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 || getRoot(config.parent) || document);
+        this._root = (config.root || getRoot(config.parent) || document);
         this.viewState = new ViewState(config.state || EditorState.create(config));
         this.plugins = this.state.facet(viewPlugin).map(spec => new PluginInstance(spec));
         for (let plugin of this.plugins)
@@ -6132,6 +6169,10 @@ class EditorView {
     composition there.
     */
     get compositionStarted() { return this.inputState.composing >= 0; }
+    /**
+    The document or shadow root that the view lives in.
+    */
+    get root() { return this._root; }
     dispatch(...input) {
         this._dispatch(input.length == 1 && input[0] instanceof Transaction ? input[0]
             : this.state.update(...input));
@@ -6467,7 +6508,7 @@ class EditorView {
     /**
     Find the text line or block widget at the given vertical
     position (which is interpreted as relative to the [top of the
-    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)).
     */
     elementAtHeight(height) {
         this.readMeasured();
@@ -6476,7 +6517,8 @@ class EditorView {
     /**
     Find the line block (see
     [`lineBlockAt`](https://codemirror.net/6/docs/ref/#view.EditorView.lineBlockAt) at the given
-    height.
+    height, again interpreted relative to the [top of the
+    document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop).
     */
     lineBlockAtHeight(height) {
         this.readMeasured();
@@ -6670,7 +6712,7 @@ class EditorView {
         // or closing, which leads us to ignore selection changes from the
         // context menu because it looks like the editor isn't focused.
         // This kludges around that.
-        return (document.hasFocus() || browser.safari && ((_a = this.inputState) === null || _a === void 0 ? void 0 : _a.lastContextMenu) > Date.now() - 3e4) &&
+        return (this.dom.ownerDocument.hasFocus() || browser.safari && ((_a = this.inputState) === null || _a === void 0 ? void 0 : _a.lastContextMenu) > Date.now() - 3e4) &&
             this.root.activeElement == this.contentDOM;
     }
     /**
@@ -6683,6 +6725,17 @@ class EditorView {
         });
     }
     /**
+    Update the [root](https://codemirror.net/6/docs/ref/##view.EditorViewConfig.root) in which the editor lives. This is only
+    necessary when moving the editor's existing DOM to a new window or shadow root.
+    */
+    setRoot(root) {
+        if (this._root != root) {
+            this._root = root;
+            this.observer.setWindow((root.nodeType == 9 ? root : root.ownerDocument).defaultView);
+            this.mountStyles();
+        }
+    }
+    /**
     Clean up this editor view, removing its element from the
     document, unregistering event handlers, and notifying
     plugins. The view instance can no longer be used after
@@ -6844,6 +6897,11 @@ the editor's vertical layout structure. The ones provided as
 functions are called _after_ the new viewport has been computed,
 and thus **must not** introduce block widgets or replacing
 decorations that cover line breaks.
+
+If you want decorated ranges to behave like atomic units for
+cursor motion and deletion purposes, also provide the range set
+containing the decorations to
+[`EditorView.atomicRanges`](https://codemirror.net/6/docs/ref/#view.EditorView^atomicRanges).
 */
 EditorView.decorations = decorations;
 /**
@@ -7074,7 +7132,7 @@ function runHandlers(map, event, view, scope) {
         }
         return false;
     };
-    let scopeObj = map[scope], baseName;
+    let scopeObj = map[scope], baseName, shiftName;
     if (scopeObj) {
         if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)]))
             return true;
@@ -7082,8 +7140,8 @@ function runHandlers(map, event, view, scope) {
             (baseName = base[event.keyCode]) && baseName != name) {
             if (runFor(scopeObj[prefix + modifiers(baseName, event, true)]))
                 return true;
-            else if (event.shiftKey && shift[event.keyCode] != baseName &&
-                runFor(scopeObj[prefix + modifiers(shift[event.keyCode], event, false)]))
+            else if (event.shiftKey && (shiftName = shift[event.keyCode]) != name && shiftName != baseName &&
+                runFor(scopeObj[prefix + modifiers(shiftName, event, false)]))
                 return true;
         }
         else if (isChar && event.shiftKey) {

package/package.json

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