@codemirror/view 6.15.3 → 6.16.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 6.16.0 (2023-07-31)
+
+### Bug fixes
+
+Fix an issue that made the gutter not stick in place when the editor was in a right-to-left context.
+
+### New features
+
+The new `EditorView.coordsForChar` method returns the client rectangle for a given character in the editor.
+
 ## 6.15.3 (2023-07-18)
 
 ### Bug fixes

package/dist/index.cjs

@@ -2823,6 +2823,28 @@ class DocView extends ContentView {
             off = start;
         }
     }
+    coordsForChar(pos) {
+        let { i, off } = this.childPos(pos, 1), child = this.children[i];
+        if (!(child instanceof LineView))
+            return null;
+        while (child.children.length) {
+            let { i, off: childOff } = child.childPos(off, 1);
+            for (;; i++) {
+                if (i == child.children.length)
+                    return null;
+                if ((child = child.children[i]).length)
+                    break;
+            }
+            off = childOff;
+        }
+        if (!(child instanceof TextView))
+            return null;
+        let end = state.findClusterBreak(child.text, off);
+        if (end == off)
+            return null;
+        let rects = textRange(child.dom, off, end).getClientRects();
+        return !rects.length || rects[0].top >= rects[0].bottom ? null : rects[0];
+    }
     measureVisibleLineHeights(viewport) {
         let result = [], { from, to } = viewport;
         let contentWidth = this.view.contentDOM.clientWidth;
@@ -5695,7 +5717,7 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
         display: "flex",
         height: "100%",
         boxSizing: "border-box",
-        left: 0,
+        insetInlineStart: 0,
         zIndex: 200
     },
     "&light .cm-gutters": {
@@ -7159,6 +7181,17 @@ class EditorView {
         return flattenRect(rect, (span.dir == exports.Direction.LTR) == (side > 0));
     }
     /**
+    Return the rectangle around a given character. If `pos` does not
+    point in front of a character that is in the viewport and
+    rendered (i.e. not replaced, not a line break), this will return
+    null. For space characters that are a line wrap point, this will
+    return the position before the line break.
+    */
+    coordsForChar(pos) {
+        this.readMeasured();
+        return this.docView.coordsForChar(pos);
+    }
+    /**
     The default width of a character in the editor. May not
     accurately reflect the width of all characters (given variable
     width fonts or styling of invididual ranges).

package/dist/index.d.cts

@@ -907,6 +907,14 @@ declare class EditorView {
     */
     coordsAtPos(pos: number, side?: -1 | 1): Rect | null;
     /**
+    Return the rectangle around a given character. If `pos` does not
+    point in front of a character that is in the viewport and
+    rendered (i.e. not replaced, not a line break), this will return
+    null. For space characters that are a line wrap point, this will
+    return the position before the line break.
+    */
+    coordsForChar(pos: number): Rect | null;
+    /**
     The default width of a character in the editor. May not
     accurately reflect the width of all characters (given variable
     width fonts or styling of invididual ranges).

package/dist/index.d.ts

@@ -907,6 +907,14 @@ declare class EditorView {
     */
     coordsAtPos(pos: number, side?: -1 | 1): Rect | null;
     /**
+    Return the rectangle around a given character. If `pos` does not
+    point in front of a character that is in the viewport and
+    rendered (i.e. not replaced, not a line break), this will return
+    null. For space characters that are a line wrap point, this will
+    return the position before the line break.
+    */
+    coordsForChar(pos: number): Rect | null;
+    /**
     The default width of a character in the editor. May not
     accurately reflect the width of all characters (given variable
     width fonts or styling of invididual ranges).

package/dist/index.js

@@ -2817,6 +2817,28 @@ class DocView extends ContentView {
             off = start;
         }
     }
+    coordsForChar(pos) {
+        let { i, off } = this.childPos(pos, 1), child = this.children[i];
+        if (!(child instanceof LineView))
+            return null;
+        while (child.children.length) {
+            let { i, off: childOff } = child.childPos(off, 1);
+            for (;; i++) {
+                if (i == child.children.length)
+                    return null;
+                if ((child = child.children[i]).length)
+                    break;
+            }
+            off = childOff;
+        }
+        if (!(child instanceof TextView))
+            return null;
+        let end = findClusterBreak(child.text, off);
+        if (end == off)
+            return null;
+        let rects = textRange(child.dom, off, end).getClientRects();
+        return !rects.length || rects[0].top >= rects[0].bottom ? null : rects[0];
+    }
     measureVisibleLineHeights(viewport) {
         let result = [], { from, to } = viewport;
         let contentWidth = this.view.contentDOM.clientWidth;
@@ -5688,7 +5710,7 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
         display: "flex",
         height: "100%",
         boxSizing: "border-box",
-        left: 0,
+        insetInlineStart: 0,
         zIndex: 200
     },
     "&light .cm-gutters": {
@@ -7152,6 +7174,17 @@ class EditorView {
         return flattenRect(rect, (span.dir == Direction.LTR) == (side > 0));
     }
     /**
+    Return the rectangle around a given character. If `pos` does not
+    point in front of a character that is in the viewport and
+    rendered (i.e. not replaced, not a line break), this will return
+    null. For space characters that are a line wrap point, this will
+    return the position before the line break.
+    */
+    coordsForChar(pos) {
+        this.readMeasured();
+        return this.docView.coordsForChar(pos);
+    }
+    /**
     The default width of a character in the editor. May not
     accurately reflect the width of all characters (given variable
     width fonts or styling of invididual ranges).

package/package.json

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