@codemirror/view 6.1.4 → 6.2.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 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

@@ -2483,7 +2483,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 +2605,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 +2648,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 +2665,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 +3018,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 +3034,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 +3067,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 +3164,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;
             }
@@ -5378,6 +5379,7 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     ".cm-widgetBuffer": {
         verticalAlign: "text-top",
         height: "1em",
+        width: 0,
         display: "inline"
     },
     ".cm-placeholder": {
@@ -5487,7 +5489,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 +5499,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 +5520,6 @@ class DOMObserver {
         }
         this.listenForScroll();
         this.readSelectionRange();
-        this.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
     }
     onScroll(e) {
         if (this.intersecting)
@@ -5731,6 +5734,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 +5763,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 +5790,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);
     }
@@ -6078,7 +6098,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 +6159,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 +6498,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 +6507,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();
@@ -6690,6 +6715,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

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

package/dist/index.js

@@ -2477,7 +2477,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 +2599,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 +2642,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 +2659,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 +3012,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 +3028,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 +3061,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 +3158,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;
             }
@@ -5371,6 +5372,7 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     ".cm-widgetBuffer": {
         verticalAlign: "text-top",
         height: "1em",
+        width: 0,
         display: "inline"
     },
     ".cm-placeholder": {
@@ -5480,7 +5482,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 +5492,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 +5513,6 @@ class DOMObserver {
         }
         this.listenForScroll();
         this.readSelectionRange();
-        this.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
     }
     onScroll(e) {
         if (this.intersecting)
@@ -5724,6 +5727,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 +5756,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 +5783,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);
     }
@@ -6071,7 +6091,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 +6152,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 +6491,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 +6500,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();
@@ -6683,6 +6708,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

package/package.json

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