@codemirror/view 6.2.3 → 6.2.4

package/CHANGELOG.md

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

@@ -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;
@@ -4659,10 +4663,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;
+    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 +4861,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 +5305,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 +6179,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));
@@ -7539,9 +7543,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 +7818,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 +8035,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 +9132,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

@@ -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;
@@ -4652,10 +4656,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;
+    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 +4854,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 +5298,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 +6172,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));
@@ -7532,9 +7536,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 +7811,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 +8028,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 +9125,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.4",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",