@codemirror/view 6.2.3 → 6.2.5

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 6.2.5 (2022-09-24)
+
+### Bug fixes
+
+Don't override double/triple tap behavior on touch screen devices, so that the mobile selection menu pops up properly.
+
+Fix an issue where updating the selection could crash on Safari when the editor was hidden.
+
+## 6.2.4 (2022-09-16)
+
+### Bug fixes
+
+Highlight the active line even when there is a selection. Prevent the active line background from obscuring the selection backdrop.
+
+Fix an issue where elements with negative margins would confuse the editor's scrolling-into-view logic.
+
+Fix scrolling to a specific position in an editor that has not been in view yet.
+
 ## 6.2.3 (2022-09-08)
 
 ### Bug fixes

package/dist/index.cjs

@@ -100,7 +100,7 @@ function windowRect(win) {
         top: 0, bottom: win.innerHeight };
 }
 function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
-    let doc = dom.ownerDocument, win = doc.defaultView;
+    let doc = dom.ownerDocument, win = doc.defaultView || window;
     for (let cur = dom; cur;) {
         if (cur.nodeType == 1) { // Element
             let bounding, top = cur == doc.body;
@@ -109,7 +109,7 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
             }
             else {
                 if (cur.scrollHeight <= cur.clientHeight && cur.scrollWidth <= cur.clientWidth) {
-                    cur = cur.parentNode;
+                    cur = cur.assignedSlot || cur.parentNode;
                     continue;
                 }
                 let rect = cur.getBoundingClientRect();
@@ -160,24 +160,28 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
                     win.scrollBy(moveX, moveY);
                 }
                 else {
+                    let movedX = 0, movedY = 0;
                     if (moveY) {
                         let start = cur.scrollTop;
                         cur.scrollTop += moveY;
-                        moveY = cur.scrollTop - start;
+                        movedY = cur.scrollTop - start;
                     }
                     if (moveX) {
                         let start = cur.scrollLeft;
                         cur.scrollLeft += moveX;
-                        moveX = cur.scrollLeft - start;
+                        movedX = cur.scrollLeft - start;
                     }
-                    rect = { left: rect.left - moveX, top: rect.top - moveY,
-                        right: rect.right - moveX, bottom: rect.bottom - moveY };
+                    rect = { left: rect.left - movedX, top: rect.top - movedY,
+                        right: rect.right - movedX, bottom: rect.bottom - movedY };
+                    if (movedX && Math.abs(movedX - moveX) < 1)
+                        x = "nearest";
+                    if (movedY && Math.abs(movedY - moveY) < 1)
+                        y = "nearest";
                 }
             }
             if (top)
                 break;
             cur = cur.assignedSlot || cur.parentNode;
-            x = y = "nearest";
         }
         else if (cur.nodeType == 11) { // A shadow root
             cur = cur.host;
@@ -346,7 +350,7 @@ class ContentView {
                 if (child.dirty) {
                     if (!child.dom && (next = prev ? prev.nextSibling : parent.firstChild)) {
                         let contentView = ContentView.get(next);
-                        if (!contentView || !contentView.parent && contentView.constructor == child.constructor)
+                        if (!contentView || !contentView.parent && contentView.canReuseDOM(child))
                             child.reuseDOM(next);
                     }
                     child.sync(track);
@@ -504,6 +508,7 @@ class ContentView {
         return false;
     }
     become(other) { return false; }
+    canReuseDOM(other) { return other.constructor == this.constructor; }
     // When this is a zero-length view with a side, this should return a
     // number <= 0 to indicate it is before its position, or a
     // number > 0 when after its position.
@@ -907,6 +912,7 @@ class CompositionView extends WidgetView {
         (_a = this.widget.topView) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     get isEditable() { return true; }
+    canReuseDOM() { return true; }
 }
 // Uses the old structure of a chunk of content view frozen for
 // composition to try and find a reasonable DOM location for the given
@@ -2635,7 +2641,13 @@ class DocView extends ContentView {
                     // (one where the focus is before the anchor), but not all
                     // browsers support it yet.
                     rawSel.collapse(anchor.node, anchor.offset);
-                    rawSel.extend(head.node, head.offset);
+                    // Safari will ignore the call above when the editor is
+                    // hidden, and then raise an error on the call to extend
+                    // (#940).
+                    try {
+                        rawSel.extend(head.node, head.offset);
+                    }
+                    catch (_) { }
                 }
                 else {
                     // Primitive (IE) way
@@ -3688,7 +3700,7 @@ handlers.touchmove = view => {
 handlerOptions.touchstart = handlerOptions.touchmove = { passive: true };
 handlers.mousedown = (view, event) => {
     view.observer.flush();
-    if (view.inputState.lastTouchTime > Date.now() - 2000 && getClickType(event) == 1)
+    if (view.inputState.lastTouchTime > Date.now() - 2000)
         return; // Ignore touch interaction
     let style = null;
     for (let makeStyle of view.state.facet(mouseSelectionStyle)) {
@@ -4659,10 +4671,10 @@ class DecorationComparator {
 
 function visiblePixelRange(dom, paddingTop) {
     let rect = dom.getBoundingClientRect();
-    let left = Math.max(0, rect.left), right = Math.min(innerWidth, rect.right);
-    let top = Math.max(0, rect.top), bottom = Math.min(innerHeight, rect.bottom);
-    let body = dom.ownerDocument.body;
-    for (let parent = dom.parentNode; parent && parent != body;) {
+    let doc = dom.ownerDocument, win = doc.defaultView || window;
+    let left = Math.max(0, rect.left), right = Math.min(win.innerWidth, rect.right);
+    let top = Math.max(0, rect.top), bottom = Math.min(win.innerHeight, rect.bottom);
+    for (let parent = dom.parentNode; parent && parent != doc.body;) {
         if (parent.nodeType == 1) {
             let elt = parent;
             let style = window.getComputedStyle(elt);
@@ -4857,7 +4869,7 @@ class ViewState {
             if (inView)
                 measureContent = true;
         }
-        if (!this.inView)
+        if (!this.inView && !this.scrollTarget)
             return 0;
         let contentWidth = dom.clientWidth;
         if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight) {
@@ -5301,8 +5313,8 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     "&.cm-focused .cm-cursor": {
         display: "block"
     },
-    "&light .cm-activeLine": { backgroundColor: "#f3f9ff" },
-    "&dark .cm-activeLine": { backgroundColor: "#223039" },
+    "&light .cm-activeLine": { backgroundColor: "#cceeff44" },
+    "&dark .cm-activeLine": { backgroundColor: "#99eeff33" },
     "&light .cm-specialChar": { color: "red" },
     "&dark .cm-specialChar": { color: "#f78" },
     ".cm-gutters": {
@@ -6175,7 +6187,7 @@ class EditorView {
     /**
     @internal
     */
-    get win() { return this.dom.ownerDocument.defaultView; }
+    get win() { return this.dom.ownerDocument.defaultView || window; }
     dispatch(...input) {
         this._dispatch(input.length == 1 && input[0] instanceof state.Transaction ? input[0]
             : this.state.update(...input));
@@ -6734,7 +6746,7 @@ class EditorView {
     setRoot(root) {
         if (this._root != root) {
             this._root = root;
-            this.observer.setWindow((root.nodeType == 9 ? root : root.ownerDocument).defaultView);
+            this.observer.setWindow((root.nodeType == 9 ? root : root.ownerDocument).defaultView || window);
             this.mountStyles();
         }
     }
@@ -7539,9 +7551,15 @@ class MatchDecorator {
         if (decorate) {
             this.addMatch = (match, view, from, add) => decorate(add, from, from + match[0].length, match, view);
         }
+        else if (typeof decoration == "function") {
+            this.addMatch = (match, view, from, add) => {
+                let deco = decoration(match, view, from);
+                if (deco)
+                    add(from, from + match[0].length, deco);
+            };
+        }
         else if (decoration) {
-            let getDeco = typeof decoration == "function" ? decoration : () => decoration;
-            this.addMatch = (match, view, from, add) => add(from, from + match[0].length, getDeco(match, view, from));
+            this.addMatch = (match, _view, from, add) => add(from, from + match[0].length, decoration);
         }
         else {
             throw new RangeError("Either 'decorate' or 'decoration' should be provided to MatchDecorator");
@@ -7808,8 +7826,6 @@ const activeLineHighlighter = ViewPlugin.fromClass(class {
     getDeco(view) {
         let lastLineStart = -1, deco = [];
         for (let r of view.state.selection.ranges) {
-            if (!r.empty)
-                return Decoration.none;
             let line = view.lineBlockAt(r.head);
             if (line.from > lastLineStart) {
                 deco.push(lineDeco.range(line.from));
@@ -8027,8 +8043,9 @@ Creates an extension that configures tooltip behavior.
 function tooltips(config = {}) {
     return tooltipConfig.of(config);
 }
-function windowSpace() {
-    return { top: 0, left: 0, bottom: innerHeight, right: innerWidth };
+function windowSpace(view) {
+    let { win } = view;
+    return { top: 0, left: 0, bottom: win.innerHeight, right: win.innerWidth };
 }
 const tooltipConfig = state.Facet.define({
     combine: values => {
@@ -9123,14 +9140,13 @@ const activeLineGutterMarker = new class extends GutterMarker {
 };
 const activeLineGutterHighlighter = gutterLineClass.compute(["selection"], state$1 => {
     let marks = [], last = -1;
-    for (let range of state$1.selection.ranges)
-        if (range.empty) {
-            let linePos = state$1.doc.lineAt(range.head).from;
-            if (linePos > last) {
-                last = linePos;
-                marks.push(activeLineGutterMarker.range(linePos));
-            }
+    for (let range of state$1.selection.ranges) {
+        let linePos = state$1.doc.lineAt(range.head).from;
+        if (linePos > last) {
+            last = linePos;
+            marks.push(activeLineGutterMarker.range(linePos));
         }
+    }
     return state.RangeSet.of(marks);
 });
 /**

package/dist/index.d.ts

@@ -1386,7 +1386,7 @@ declare class MatchDecorator {
         The decoration to apply to matches, either directly or as a
         function of the match.
         */
-        decoration?: Decoration | ((match: RegExpExecArray, view: EditorView, pos: number) => Decoration);
+        decoration?: Decoration | ((match: RegExpExecArray, view: EditorView, pos: number) => Decoration | null);
         /**
         Customize the way decorations are added for matches. This
         function, when given, will be called for matches and should

package/dist/index.js

@@ -96,7 +96,7 @@ function windowRect(win) {
         top: 0, bottom: win.innerHeight };
 }
 function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
-    let doc = dom.ownerDocument, win = doc.defaultView;
+    let doc = dom.ownerDocument, win = doc.defaultView || window;
     for (let cur = dom; cur;) {
         if (cur.nodeType == 1) { // Element
             let bounding, top = cur == doc.body;
@@ -105,7 +105,7 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
             }
             else {
                 if (cur.scrollHeight <= cur.clientHeight && cur.scrollWidth <= cur.clientWidth) {
-                    cur = cur.parentNode;
+                    cur = cur.assignedSlot || cur.parentNode;
                     continue;
                 }
                 let rect = cur.getBoundingClientRect();
@@ -156,24 +156,28 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
                     win.scrollBy(moveX, moveY);
                 }
                 else {
+                    let movedX = 0, movedY = 0;
                     if (moveY) {
                         let start = cur.scrollTop;
                         cur.scrollTop += moveY;
-                        moveY = cur.scrollTop - start;
+                        movedY = cur.scrollTop - start;
                     }
                     if (moveX) {
                         let start = cur.scrollLeft;
                         cur.scrollLeft += moveX;
-                        moveX = cur.scrollLeft - start;
+                        movedX = cur.scrollLeft - start;
                     }
-                    rect = { left: rect.left - moveX, top: rect.top - moveY,
-                        right: rect.right - moveX, bottom: rect.bottom - moveY };
+                    rect = { left: rect.left - movedX, top: rect.top - movedY,
+                        right: rect.right - movedX, bottom: rect.bottom - movedY };
+                    if (movedX && Math.abs(movedX - moveX) < 1)
+                        x = "nearest";
+                    if (movedY && Math.abs(movedY - moveY) < 1)
+                        y = "nearest";
                 }
             }
             if (top)
                 break;
             cur = cur.assignedSlot || cur.parentNode;
-            x = y = "nearest";
         }
         else if (cur.nodeType == 11) { // A shadow root
             cur = cur.host;
@@ -342,7 +346,7 @@ class ContentView {
                 if (child.dirty) {
                     if (!child.dom && (next = prev ? prev.nextSibling : parent.firstChild)) {
                         let contentView = ContentView.get(next);
-                        if (!contentView || !contentView.parent && contentView.constructor == child.constructor)
+                        if (!contentView || !contentView.parent && contentView.canReuseDOM(child))
                             child.reuseDOM(next);
                     }
                     child.sync(track);
@@ -500,6 +504,7 @@ class ContentView {
         return false;
     }
     become(other) { return false; }
+    canReuseDOM(other) { return other.constructor == this.constructor; }
     // When this is a zero-length view with a side, this should return a
     // number <= 0 to indicate it is before its position, or a
     // number > 0 when after its position.
@@ -903,6 +908,7 @@ class CompositionView extends WidgetView {
         (_a = this.widget.topView) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     get isEditable() { return true; }
+    canReuseDOM() { return true; }
 }
 // Uses the old structure of a chunk of content view frozen for
 // composition to try and find a reasonable DOM location for the given
@@ -2629,7 +2635,13 @@ class DocView extends ContentView {
                     // (one where the focus is before the anchor), but not all
                     // browsers support it yet.
                     rawSel.collapse(anchor.node, anchor.offset);
-                    rawSel.extend(head.node, head.offset);
+                    // Safari will ignore the call above when the editor is
+                    // hidden, and then raise an error on the call to extend
+                    // (#940).
+                    try {
+                        rawSel.extend(head.node, head.offset);
+                    }
+                    catch (_) { }
                 }
                 else {
                     // Primitive (IE) way
@@ -3682,7 +3694,7 @@ handlers.touchmove = view => {
 handlerOptions.touchstart = handlerOptions.touchmove = { passive: true };
 handlers.mousedown = (view, event) => {
     view.observer.flush();
-    if (view.inputState.lastTouchTime > Date.now() - 2000 && getClickType(event) == 1)
+    if (view.inputState.lastTouchTime > Date.now() - 2000)
         return; // Ignore touch interaction
     let style = null;
     for (let makeStyle of view.state.facet(mouseSelectionStyle)) {
@@ -4652,10 +4664,10 @@ class DecorationComparator {
 
 function visiblePixelRange(dom, paddingTop) {
     let rect = dom.getBoundingClientRect();
-    let left = Math.max(0, rect.left), right = Math.min(innerWidth, rect.right);
-    let top = Math.max(0, rect.top), bottom = Math.min(innerHeight, rect.bottom);
-    let body = dom.ownerDocument.body;
-    for (let parent = dom.parentNode; parent && parent != body;) {
+    let doc = dom.ownerDocument, win = doc.defaultView || window;
+    let left = Math.max(0, rect.left), right = Math.min(win.innerWidth, rect.right);
+    let top = Math.max(0, rect.top), bottom = Math.min(win.innerHeight, rect.bottom);
+    for (let parent = dom.parentNode; parent && parent != doc.body;) {
         if (parent.nodeType == 1) {
             let elt = parent;
             let style = window.getComputedStyle(elt);
@@ -4850,7 +4862,7 @@ class ViewState {
             if (inView)
                 measureContent = true;
         }
-        if (!this.inView)
+        if (!this.inView && !this.scrollTarget)
             return 0;
         let contentWidth = dom.clientWidth;
         if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight) {
@@ -5294,8 +5306,8 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     "&.cm-focused .cm-cursor": {
         display: "block"
     },
-    "&light .cm-activeLine": { backgroundColor: "#f3f9ff" },
-    "&dark .cm-activeLine": { backgroundColor: "#223039" },
+    "&light .cm-activeLine": { backgroundColor: "#cceeff44" },
+    "&dark .cm-activeLine": { backgroundColor: "#99eeff33" },
     "&light .cm-specialChar": { color: "red" },
     "&dark .cm-specialChar": { color: "#f78" },
     ".cm-gutters": {
@@ -6168,7 +6180,7 @@ class EditorView {
     /**
     @internal
     */
-    get win() { return this.dom.ownerDocument.defaultView; }
+    get win() { return this.dom.ownerDocument.defaultView || window; }
     dispatch(...input) {
         this._dispatch(input.length == 1 && input[0] instanceof Transaction ? input[0]
             : this.state.update(...input));
@@ -6727,7 +6739,7 @@ class EditorView {
     setRoot(root) {
         if (this._root != root) {
             this._root = root;
-            this.observer.setWindow((root.nodeType == 9 ? root : root.ownerDocument).defaultView);
+            this.observer.setWindow((root.nodeType == 9 ? root : root.ownerDocument).defaultView || window);
             this.mountStyles();
         }
     }
@@ -7532,9 +7544,15 @@ class MatchDecorator {
         if (decorate) {
             this.addMatch = (match, view, from, add) => decorate(add, from, from + match[0].length, match, view);
         }
+        else if (typeof decoration == "function") {
+            this.addMatch = (match, view, from, add) => {
+                let deco = decoration(match, view, from);
+                if (deco)
+                    add(from, from + match[0].length, deco);
+            };
+        }
         else if (decoration) {
-            let getDeco = typeof decoration == "function" ? decoration : () => decoration;
-            this.addMatch = (match, view, from, add) => add(from, from + match[0].length, getDeco(match, view, from));
+            this.addMatch = (match, _view, from, add) => add(from, from + match[0].length, decoration);
         }
         else {
             throw new RangeError("Either 'decorate' or 'decoration' should be provided to MatchDecorator");
@@ -7801,8 +7819,6 @@ const activeLineHighlighter = /*@__PURE__*/ViewPlugin.fromClass(class {
     getDeco(view) {
         let lastLineStart = -1, deco = [];
         for (let r of view.state.selection.ranges) {
-            if (!r.empty)
-                return Decoration.none;
             let line = view.lineBlockAt(r.head);
             if (line.from > lastLineStart) {
                 deco.push(lineDeco.range(line.from));
@@ -8020,8 +8036,9 @@ Creates an extension that configures tooltip behavior.
 function tooltips(config = {}) {
     return tooltipConfig.of(config);
 }
-function windowSpace() {
-    return { top: 0, left: 0, bottom: innerHeight, right: innerWidth };
+function windowSpace(view) {
+    let { win } = view;
+    return { top: 0, left: 0, bottom: win.innerHeight, right: win.innerWidth };
 }
 const tooltipConfig = /*@__PURE__*/Facet.define({
     combine: values => {
@@ -9116,14 +9133,13 @@ const activeLineGutterMarker = /*@__PURE__*/new class extends GutterMarker {
 };
 const activeLineGutterHighlighter = /*@__PURE__*/gutterLineClass.compute(["selection"], state => {
     let marks = [], last = -1;
-    for (let range of state.selection.ranges)
-        if (range.empty) {
-            let linePos = state.doc.lineAt(range.head).from;
-            if (linePos > last) {
-                last = linePos;
-                marks.push(activeLineGutterMarker.range(linePos));
-            }
+    for (let range of state.selection.ranges) {
+        let linePos = state.doc.lineAt(range.head).from;
+        if (linePos > last) {
+            last = linePos;
+            marks.push(activeLineGutterMarker.range(linePos));
         }
+    }
     return RangeSet.of(marks);
 });
 /**

package/package.json

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