@codemirror/view 6.9.0 → 6.9.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 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) {
+function posAtCoords(view, coords, precise, bias = -1) {
     var _a;
     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) {
+        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);
@@ -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([]);
         }
@@ -6427,6 +6442,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 +6474,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 +6512,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

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) {
+function posAtCoords(view, coords, precise, bias = -1) {
     var _a;
     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) {
+        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);
@@ -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([]);
         }
@@ -6420,6 +6435,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 +6467,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 +6505,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

package/package.json

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