@codemirror/view 6.9.0 → 6.9.2

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## 6.9.2 (2023-03-08)
+
+### Bug fixes
+
+Work around a Firefox CSS bug that caused cursors to stop blinking in a scrolled editor.
+
+Fix an issue in `drawSelection` where the selection extended into the editor's padding.
+
+Fix pasting of links copied from iOS share sheet.
+
+## 6.9.1 (2023-02-17)
+
+### Bug fixes
+
+Improve the way `posAtCoords` picks the side of a widget to return by comparing the coordinates the center of the widget.
+
+Fix an issue where transactions created for the `focusChangeEffect` facet were sometimes not dispatched.
+
 ## 6.9.0 (2023-02-15)
 
 ### Bug fixes

package/dist/index.cjs

@@ -519,6 +519,7 @@ class ContentView {
     }
     static get(node) { return node.cmView; }
     get isEditable() { return true; }
+    get isWidget() { return false; }
     merge(from, to, source, hasStart, openStart, openEnd) {
         return false;
     }
@@ -893,6 +894,7 @@ class WidgetView extends ContentView {
         return this.length ? rect : flattenRect(rect, this.side > 0);
     }
     get isEditable() { return false; }
+    get isWidget() { return true; }
     destroy() {
         super.destroy();
         if (this.dom)
@@ -1603,6 +1605,8 @@ class BlockWidgetView extends ContentView {
     }
     ignoreMutation() { return true; }
     ignoreEvent(event) { return this.widget.ignoreEvent(event); }
+    get isEditable() { return false; }
+    get isWidget() { return true; }
     destroy() {
         super.destroy();
         if (this.dom)
@@ -2027,11 +2031,6 @@ class ViewUpdate {
         let changedRanges = [];
         this.changes.iterChangedRanges((fromA, toA, fromB, toB) => changedRanges.push(new ChangedRange(fromA, toA, fromB, toB)));
         this.changedRanges = changedRanges;
-        let focus = view.hasFocus;
-        if (focus != view.inputState.notifiedFocused) {
-            view.inputState.notifiedFocused = focus;
-            this.flags |= 1 /* UpdateFlag.Focus */;
-        }
     }
     /**
     @internal
@@ -3167,11 +3166,11 @@ function domPosInText(node, x, y) {
     }
     return { node, offset: closestOffset > -1 ? closestOffset : generalSide > 0 ? node.nodeValue.length : 0 };
 }
-function posAtCoords(view, { x, y }, precise, bias = -1) {
-    var _a;
+function posAtCoords(view, coords, precise, bias = -1) {
+    var _a, _b;
     let content = view.contentDOM.getBoundingClientRect(), docTop = content.top + view.viewState.paddingTop;
     let block, { docHeight } = view.viewState;
-    let yOffset = y - docTop;
+    let { x, y } = coords, yOffset = y - docTop;
     if (yOffset < 0)
         return 0;
     if (yOffset > docHeight)
@@ -3242,7 +3241,17 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
             return yOffset > block.top + block.height / 2 ? block.to : block.from;
         ({ node, offset } = domPosAtCoords(line.dom, x, y));
     }
-    return view.docView.posFromDOM(node, offset);
+    let nearest = view.docView.nearest(node);
+    if (!nearest)
+        return null;
+    if (nearest.isWidget && ((_b = nearest.dom) === null || _b === void 0 ? void 0 : _b.nodeType) == 1) {
+        let rect = nearest.dom.getBoundingClientRect();
+        return coords.y < rect.top || coords.y <= rect.bottom && coords.x <= (rect.left + rect.right) / 2
+            ? nearest.posAtStart : nearest.posAtEnd;
+    }
+    else {
+        return nearest.localPosFromDOM(node, offset) + nearest.posAtStart;
+    }
 }
 function posAtCoordsImprecise(view, contentRect, block, x, y) {
     let into = Math.round((x - contentRect.left) * view.defaultCharacterWidth);
@@ -3965,7 +3974,7 @@ handlers.paste = (view, event) => {
     view.observer.flush();
     let data = brokenClipboardAPI ? null : event.clipboardData;
     if (data) {
-        doPaste(view, data.getData("text/plain"));
+        doPaste(view, data.getData("text/plain") || data.getData("text/uri-text"));
         event.preventDefault();
     }
     else {
@@ -4033,17 +4042,23 @@ handlers.copy = handlers.cut = (view, event) => {
             userEvent: "delete.cut"
         });
 };
+const isFocusChange = state.Annotation.define();
+function focusChangeTransaction(state, focus) {
+    let effects = [];
+    for (let getEffect of state.facet(focusChangeEffect)) {
+        let effect = getEffect(state, focus);
+        if (effect)
+            effects.push(effect);
+    }
+    return effects ? state.update({ effects, annotations: isFocusChange.of(true) }) : null;
+}
 function updateForFocusChange(view) {
     setTimeout(() => {
-        if (view.hasFocus != view.inputState.notifiedFocused) {
-            let effects = [], focus = !view.inputState.notifiedFocused;
-            for (let getEffect of view.state.facet(focusChangeEffect)) {
-                let effect = getEffect(view.state, focus);
-                if (effect)
-                    effects.push(effect);
-            }
-            if (effects.length)
-                view.dispatch({ effects });
+        let focus = view.hasFocus;
+        if (focus != view.inputState.notifiedFocused) {
+            let tr = focusChangeTransaction(view.state, focus);
+            if (tr)
+                view.dispatch(tr);
             else
                 view.update([]);
         }
@@ -5420,6 +5435,9 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
         padding: "0 2px 0 6px"
     },
     ".cm-layer": {
+        position: "absolute",
+        left: 0,
+        top: 0,
         contain: "size style",
         "& > *": {
             position: "absolute"
@@ -6427,6 +6445,20 @@ class EditorView {
             this.viewState.state = state$1;
             return;
         }
+        let focus = this.hasFocus, focusFlag = 0, dispatchFocus = null;
+        if (transactions.some(tr => tr.annotation(isFocusChange))) {
+            this.inputState.notifiedFocused = focus;
+            // If a focus-change transaction is being dispatched, set this update flag.
+            focusFlag = 1 /* UpdateFlag.Focus */;
+        }
+        else if (focus != this.inputState.notifiedFocused) {
+            this.inputState.notifiedFocused = focus;
+            // Schedule a separate focus transaction if necessary, otherwise
+            // add a flag to this update
+            dispatchFocus = focusChangeTransaction(state$1, focus);
+            if (!dispatchFocus)
+                focusFlag = 1 /* UpdateFlag.Focus */;
+        }
         // If there was a pending DOM change, eagerly read it and try to
         // apply it after the given transactions.
         let pendingKey = this.observer.delayedAndroidKey, domChange = null;
@@ -6445,6 +6477,7 @@ class EditorView {
         if (state$1.facet(state.EditorState.phrases) != this.state.facet(state.EditorState.phrases))
             return this.setState(state$1);
         update = ViewUpdate.create(this, state$1, transactions);
+        update.flags |= focusFlag;
         let scrollTarget = this.viewState.scrollTarget;
         try {
             this.updateState = 2 /* UpdateState.Updating */;
@@ -6482,10 +6515,15 @@ class EditorView {
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
                 listener(update);
-        if (domChange) {
-            if (!applyDOMChange(this, domChange) && pendingKey.force)
-                dispatchKey(this.contentDOM, pendingKey.key, pendingKey.keyCode);
-        }
+        if (dispatchFocus || domChange)
+            Promise.resolve().then(() => {
+                if (dispatchFocus && this.state == dispatchFocus.startState)
+                    this.dispatch(dispatchFocus);
+                if (domChange) {
+                    if (!applyDOMChange(this, domChange) && pendingKey.force)
+                        dispatchKey(this.contentDOM, pendingKey.key, pendingKey.keyCode);
+                }
+            });
     }
     /**
     Reset the view to the given state. (This will cause the entire
@@ -6560,7 +6598,7 @@ class EditorView {
         if (this.destroyed)
             return;
         if (this.measureScheduled > -1)
-            cancelAnimationFrame(this.measureScheduled);
+            this.win.cancelAnimationFrame(this.measureScheduled);
         this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
             this.observer.forceFlush();
@@ -6998,7 +7036,7 @@ class EditorView {
         this.dom.remove();
         this.observer.destroy();
         if (this.measureScheduled > -1)
-            cancelAnimationFrame(this.measureScheduled);
+            this.win.cancelAnimationFrame(this.measureScheduled);
         this.destroyed = true;
     }
     /**
@@ -7510,9 +7548,10 @@ function rectanglesForRange(view, className, range) {
     let from = Math.max(range.from, view.viewport.from), to = Math.min(range.to, view.viewport.to);
     let ltr = view.textDirection == exports.Direction.LTR;
     let content = view.contentDOM, contentRect = content.getBoundingClientRect(), base = getBase(view);
-    let lineStyle = window.getComputedStyle(content.firstChild);
-    let leftSide = contentRect.left + parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent));
-    let rightSide = contentRect.right - parseInt(lineStyle.paddingRight);
+    let lineElt = content.querySelector(".cm-line"), lineStyle = lineElt && window.getComputedStyle(lineElt);
+    let leftSide = contentRect.left +
+        (lineStyle ? parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent)) : 0);
+    let rightSide = contentRect.right - (lineStyle ? parseInt(lineStyle.paddingRight) : 0);
     let startBlock = blockAt(view, from), endBlock = blockAt(view, to);
     let visualStart = startBlock.type == exports.BlockType.Text ? startBlock : null;
     let visualEnd = endBlock.type == exports.BlockType.Text ? endBlock : null;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, EditorState, findColumn, CharCategory, Transaction, Prec, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
+import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, EditorState, findColumn, CharCategory, Annotation, Transaction, Prec, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
 import { StyleModule } from 'style-mod';
 import { keyName, base, shift } from 'w3c-keyname';
 
@@ -515,6 +515,7 @@ class ContentView {
     }
     static get(node) { return node.cmView; }
     get isEditable() { return true; }
+    get isWidget() { return false; }
     merge(from, to, source, hasStart, openStart, openEnd) {
         return false;
     }
@@ -889,6 +890,7 @@ class WidgetView extends ContentView {
         return this.length ? rect : flattenRect(rect, this.side > 0);
     }
     get isEditable() { return false; }
+    get isWidget() { return true; }
     destroy() {
         super.destroy();
         if (this.dom)
@@ -1598,6 +1600,8 @@ class BlockWidgetView extends ContentView {
     }
     ignoreMutation() { return true; }
     ignoreEvent(event) { return this.widget.ignoreEvent(event); }
+    get isEditable() { return false; }
+    get isWidget() { return true; }
     destroy() {
         super.destroy();
         if (this.dom)
@@ -2022,11 +2026,6 @@ class ViewUpdate {
         let changedRanges = [];
         this.changes.iterChangedRanges((fromA, toA, fromB, toB) => changedRanges.push(new ChangedRange(fromA, toA, fromB, toB)));
         this.changedRanges = changedRanges;
-        let focus = view.hasFocus;
-        if (focus != view.inputState.notifiedFocused) {
-            view.inputState.notifiedFocused = focus;
-            this.flags |= 1 /* UpdateFlag.Focus */;
-        }
     }
     /**
     @internal
@@ -3161,11 +3160,11 @@ function domPosInText(node, x, y) {
     }
     return { node, offset: closestOffset > -1 ? closestOffset : generalSide > 0 ? node.nodeValue.length : 0 };
 }
-function posAtCoords(view, { x, y }, precise, bias = -1) {
-    var _a;
+function posAtCoords(view, coords, precise, bias = -1) {
+    var _a, _b;
     let content = view.contentDOM.getBoundingClientRect(), docTop = content.top + view.viewState.paddingTop;
     let block, { docHeight } = view.viewState;
-    let yOffset = y - docTop;
+    let { x, y } = coords, yOffset = y - docTop;
     if (yOffset < 0)
         return 0;
     if (yOffset > docHeight)
@@ -3236,7 +3235,17 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
             return yOffset > block.top + block.height / 2 ? block.to : block.from;
         ({ node, offset } = domPosAtCoords(line.dom, x, y));
     }
-    return view.docView.posFromDOM(node, offset);
+    let nearest = view.docView.nearest(node);
+    if (!nearest)
+        return null;
+    if (nearest.isWidget && ((_b = nearest.dom) === null || _b === void 0 ? void 0 : _b.nodeType) == 1) {
+        let rect = nearest.dom.getBoundingClientRect();
+        return coords.y < rect.top || coords.y <= rect.bottom && coords.x <= (rect.left + rect.right) / 2
+            ? nearest.posAtStart : nearest.posAtEnd;
+    }
+    else {
+        return nearest.localPosFromDOM(node, offset) + nearest.posAtStart;
+    }
 }
 function posAtCoordsImprecise(view, contentRect, block, x, y) {
     let into = Math.round((x - contentRect.left) * view.defaultCharacterWidth);
@@ -3959,7 +3968,7 @@ handlers.paste = (view, event) => {
     view.observer.flush();
     let data = brokenClipboardAPI ? null : event.clipboardData;
     if (data) {
-        doPaste(view, data.getData("text/plain"));
+        doPaste(view, data.getData("text/plain") || data.getData("text/uri-text"));
         event.preventDefault();
     }
     else {
@@ -4027,17 +4036,23 @@ handlers.copy = handlers.cut = (view, event) => {
             userEvent: "delete.cut"
         });
 };
+const isFocusChange = /*@__PURE__*/Annotation.define();
+function focusChangeTransaction(state, focus) {
+    let effects = [];
+    for (let getEffect of state.facet(focusChangeEffect)) {
+        let effect = getEffect(state, focus);
+        if (effect)
+            effects.push(effect);
+    }
+    return effects ? state.update({ effects, annotations: isFocusChange.of(true) }) : null;
+}
 function updateForFocusChange(view) {
     setTimeout(() => {
-        if (view.hasFocus != view.inputState.notifiedFocused) {
-            let effects = [], focus = !view.inputState.notifiedFocused;
-            for (let getEffect of view.state.facet(focusChangeEffect)) {
-                let effect = getEffect(view.state, focus);
-                if (effect)
-                    effects.push(effect);
-            }
-            if (effects.length)
-                view.dispatch({ effects });
+        let focus = view.hasFocus;
+        if (focus != view.inputState.notifiedFocused) {
+            let tr = focusChangeTransaction(view.state, focus);
+            if (tr)
+                view.dispatch(tr);
             else
                 view.update([]);
         }
@@ -5413,6 +5428,9 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
         padding: "0 2px 0 6px"
     },
     ".cm-layer": {
+        position: "absolute",
+        left: 0,
+        top: 0,
         contain: "size style",
         "& > *": {
             position: "absolute"
@@ -6420,6 +6438,20 @@ class EditorView {
             this.viewState.state = state;
             return;
         }
+        let focus = this.hasFocus, focusFlag = 0, dispatchFocus = null;
+        if (transactions.some(tr => tr.annotation(isFocusChange))) {
+            this.inputState.notifiedFocused = focus;
+            // If a focus-change transaction is being dispatched, set this update flag.
+            focusFlag = 1 /* UpdateFlag.Focus */;
+        }
+        else if (focus != this.inputState.notifiedFocused) {
+            this.inputState.notifiedFocused = focus;
+            // Schedule a separate focus transaction if necessary, otherwise
+            // add a flag to this update
+            dispatchFocus = focusChangeTransaction(state, focus);
+            if (!dispatchFocus)
+                focusFlag = 1 /* UpdateFlag.Focus */;
+        }
         // If there was a pending DOM change, eagerly read it and try to
         // apply it after the given transactions.
         let pendingKey = this.observer.delayedAndroidKey, domChange = null;
@@ -6438,6 +6470,7 @@ class EditorView {
         if (state.facet(EditorState.phrases) != this.state.facet(EditorState.phrases))
             return this.setState(state);
         update = ViewUpdate.create(this, state, transactions);
+        update.flags |= focusFlag;
         let scrollTarget = this.viewState.scrollTarget;
         try {
             this.updateState = 2 /* UpdateState.Updating */;
@@ -6475,10 +6508,15 @@ class EditorView {
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
                 listener(update);
-        if (domChange) {
-            if (!applyDOMChange(this, domChange) && pendingKey.force)
-                dispatchKey(this.contentDOM, pendingKey.key, pendingKey.keyCode);
-        }
+        if (dispatchFocus || domChange)
+            Promise.resolve().then(() => {
+                if (dispatchFocus && this.state == dispatchFocus.startState)
+                    this.dispatch(dispatchFocus);
+                if (domChange) {
+                    if (!applyDOMChange(this, domChange) && pendingKey.force)
+                        dispatchKey(this.contentDOM, pendingKey.key, pendingKey.keyCode);
+                }
+            });
     }
     /**
     Reset the view to the given state. (This will cause the entire
@@ -6553,7 +6591,7 @@ class EditorView {
         if (this.destroyed)
             return;
         if (this.measureScheduled > -1)
-            cancelAnimationFrame(this.measureScheduled);
+            this.win.cancelAnimationFrame(this.measureScheduled);
         this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
             this.observer.forceFlush();
@@ -6991,7 +7029,7 @@ class EditorView {
         this.dom.remove();
         this.observer.destroy();
         if (this.measureScheduled > -1)
-            cancelAnimationFrame(this.measureScheduled);
+            this.win.cancelAnimationFrame(this.measureScheduled);
         this.destroyed = true;
     }
     /**
@@ -7503,9 +7541,10 @@ function rectanglesForRange(view, className, range) {
     let from = Math.max(range.from, view.viewport.from), to = Math.min(range.to, view.viewport.to);
     let ltr = view.textDirection == Direction.LTR;
     let content = view.contentDOM, contentRect = content.getBoundingClientRect(), base = getBase(view);
-    let lineStyle = window.getComputedStyle(content.firstChild);
-    let leftSide = contentRect.left + parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent));
-    let rightSide = contentRect.right - parseInt(lineStyle.paddingRight);
+    let lineElt = content.querySelector(".cm-line"), lineStyle = lineElt && window.getComputedStyle(lineElt);
+    let leftSide = contentRect.left +
+        (lineStyle ? parseInt(lineStyle.paddingLeft) + Math.min(0, parseInt(lineStyle.textIndent)) : 0);
+    let rightSide = contentRect.right - (lineStyle ? parseInt(lineStyle.paddingRight) : 0);
     let startBlock = blockAt(view, from), endBlock = blockAt(view, to);
     let visualStart = startBlock.type == BlockType.Text ? startBlock : null;
     let visualEnd = endBlock.type == BlockType.Text ? endBlock : null;

package/package.json

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