@codemirror/view 6.7.3 → 6.8.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 6.8.1 (2023-02-08)
+
+### Bug fixes
+
+Fix an issue where tooltips that have their height reduced have their height flicker when scrolling or otherwise interacting with the editor.
+
+## 6.8.0 (2023-02-07)
+
+### Bug fixes
+
+Fix a regression that caused clicking on the scrollbar to move the selection.
+
+Fix an issue where focus or blur event handlers that dispatched editor transactions could corrupt the mouse selection state.
+
+Fix a CSS regression that prevented the drop cursor from being positioned properly.
+
+### New features
+
+`WidgetType.updateDOM` is now passed the editor view object.
+
 ## 6.7.3 (2023-01-12)
 
 ### Bug fixes

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (C) 2018-2021 by Marijn Haverbeke <marijnh@gmail.com> and others
+Copyright (C) 2018-2021 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/index.cjs

@@ -334,11 +334,6 @@ class ContentView {
         this.dom = null;
         this.dirty = 2 /* Dirty.Node */;
     }
-    get editorView() {
-        if (!this.parent)
-            throw new Error("Accessing view in orphan content view");
-        return this.parent.editorView;
-    }
     get overrideDOMText() { return null; }
     get posAtStart() {
         return this.parent ? this.parent.posBefore(this) : 0;
@@ -362,7 +357,7 @@ class ContentView {
     // (side > 0) or directly on (when the browser supports it) the
     // given position.
     coordsAt(_pos, _side) { return null; }
-    sync(track) {
+    sync(view, track) {
         if (this.dirty & 2 /* Dirty.Node */) {
             let parent = this.dom;
             let prev = null, next;
@@ -373,7 +368,7 @@ class ContentView {
                         if (!contentView || !contentView.parent && contentView.canReuseDOM(child))
                             child.reuseDOM(next);
                     }
-                    child.sync(track);
+                    child.sync(view, track);
                     child.dirty = 0 /* Dirty.Not */;
                 }
                 next = prev ? prev.nextSibling : parent.firstChild;
@@ -397,7 +392,7 @@ class ContentView {
         else if (this.dirty & 1 /* Dirty.Child */) {
             for (let child of this.children)
                 if (child.dirty) {
-                    child.sync(track);
+                    child.sync(view, track);
                     child.dirty = 0 /* Dirty.Not */;
                 }
         }
@@ -691,7 +686,7 @@ class TextView extends ContentView {
     createDOM(textDOM) {
         this.setDOM(textDOM || document.createTextNode(this.text));
     }
-    sync(track) {
+    sync(view, track) {
         if (!this.dom)
             this.createDOM();
         if (this.dom.nodeValue != this.text) {
@@ -752,12 +747,12 @@ class MarkView extends ContentView {
             this.dirty |= 4 /* Dirty.Attrs */ | 2 /* Dirty.Node */;
         }
     }
-    sync(track) {
+    sync(view, track) {
         if (!this.dom)
             this.setDOM(this.setAttrs(document.createElement(this.mark.tagName)));
         else if (this.dirty & 4 /* Dirty.Attrs */)
             this.setAttrs(this.dom);
-        super.sync(track);
+        super.sync(view, track);
     }
     merge(from, to, source, _hasStart, openStart, openEnd) {
         if (source && (!(source instanceof MarkView && source.mark.eq(this.mark)) ||
@@ -841,12 +836,12 @@ class WidgetView extends ContentView {
         this.length -= from;
         return result;
     }
-    sync() {
-        if (!this.dom || !this.widget.updateDOM(this.dom)) {
+    sync(view) {
+        if (!this.dom || !this.widget.updateDOM(this.dom, view)) {
             if (this.dom && this.prevWidget)
                 this.prevWidget.destroy(this.dom);
             this.prevWidget = null;
-            this.setDOM(this.widget.toDOM(this.editorView));
+            this.setDOM(this.widget.toDOM(view));
             this.dom.contentEditable = "false";
         }
     }
@@ -879,7 +874,7 @@ class WidgetView extends ContentView {
         let top = this;
         while (top.parent)
             top = top.parent;
-        let view = top.editorView, text = view && view.state.doc, start = this.posAtStart;
+        let { view } = top, text = view && view.state.doc, start = this.posAtStart;
         return text ? text.slice(start, start + this.length) : state.Text.empty;
     }
     domAtPos(pos) {
@@ -1171,7 +1166,7 @@ class WidgetType {
     couldn't (in which case the widget will be redrawn). The default
     implementation just returns false.
     */
-    updateDOM(dom) { return false; }
+    updateDOM(dom, view) { return false; }
     /**
     @internal
     */
@@ -1487,7 +1482,7 @@ class LineView extends ContentView {
             this.dirty |= 4 /* Dirty.Attrs */ | 2 /* Dirty.Node */;
         }
     }
-    sync(track) {
+    sync(view, track) {
         var _a;
         if (!this.dom) {
             this.setDOM(document.createElement("div"));
@@ -1504,7 +1499,7 @@ class LineView extends ContentView {
             this.dom.classList.add("cm-line");
             this.prevAttrs = undefined;
         }
-        super.sync(track);
+        super.sync(view, track);
         let last = this.dom.lastChild;
         while (last && ContentView.get(last) instanceof MarkView)
             last = last.lastChild;
@@ -1579,12 +1574,12 @@ class BlockWidgetView extends ContentView {
         return end;
     }
     get children() { return noChildren; }
-    sync() {
-        if (!this.dom || !this.widget.updateDOM(this.dom)) {
+    sync(view) {
+        if (!this.dom || !this.widget.updateDOM(this.dom, view)) {
             if (this.dom && this.prevWidget)
                 this.prevWidget.destroy(this.dom);
             this.prevWidget = null;
-            this.setDOM(this.widget.toDOM(this.editorView));
+            this.setDOM(this.widget.toDOM(view));
             this.dom.contentEditable = "false";
         }
     }
@@ -2539,7 +2534,6 @@ class DocView extends ContentView {
         this.updateDeco();
         this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
     }
-    get editorView() { return this.view; }
     get length() { return this.view.state.doc.length; }
     // Update the document view to a given state. scrollIntoView can be
     // used as a hint to compute a new viewport that includes that
@@ -2599,7 +2593,7 @@ class DocView extends ContentView {
             // selection from the one it displays (issue #218). This tries
             // to detect that situation.
             let track = browser.chrome || browser.ios ? { node: observer.selectionRange.focusNode, written: false } : undefined;
-            this.sync(track);
+            this.sync(this.view, track);
             this.dirty = 0 /* Dirty.Not */;
             if (track && (track.written || observer.selectionRange.focusNode != track.node))
                 this.forceSelection = true;
@@ -3435,7 +3429,7 @@ class InputState {
             this.registeredEvents.push(type);
         }
         view.scrollDOM.addEventListener("mousedown", (event) => {
-            if (event.target == view.scrollDOM)
+            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom)
                 handleEvent(handlers.mousedown, event);
         });
         if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
@@ -3613,11 +3607,13 @@ class MouseSelection {
         this.multiple = view.state.facet(state.EditorState.allowMultipleSelections) && addsSelectionRange(view, startEvent);
         this.dragMove = dragMovesSelection(view, startEvent);
         this.dragging = isInPrimarySelection(view, startEvent) && getClickType(startEvent) == 1 ? null : false;
+    }
+    start(event) {
         // When clicking outside of the selection, immediately apply the
         // effect of starting the selection
         if (this.dragging === false) {
-            startEvent.preventDefault();
-            this.select(startEvent);
+            event.preventDefault();
+            this.select(event);
         }
     }
     move(event) {
@@ -3809,9 +3805,11 @@ handlers.mousedown = (view, event) => {
         style = basicMouseSelection(view, event);
     if (style) {
         let mustFocus = view.root.activeElement != view.contentDOM;
+        view.inputState.startMouseSelection(new MouseSelection(view, event, style, mustFocus));
         if (mustFocus)
             view.observer.ignore(() => focusPreventScroll(view.contentDOM));
-        view.inputState.startMouseSelection(new MouseSelection(view, event, style, mustFocus));
+        if (view.inputState.mouseSelection)
+            view.inputState.mouseSelection.start(event);
     }
 };
 function rangeForClick(view, pos, bias, type) {
@@ -5422,6 +5420,9 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     "&dark .cm-cursor": {
         borderLeftColor: "#444"
     },
+    ".cm-dropCursor": {
+        position: "absolute"
+    },
     "&.cm-focused .cm-cursor": {
         display: "block"
     },
@@ -8362,6 +8363,7 @@ const tooltipConfig = state.Facet.define({
         });
     }
 });
+const knownHeight = new WeakMap();
 const tooltipPlugin = ViewPlugin.fromClass(class {
     constructor(view) {
         this.view = view;
@@ -8477,6 +8479,7 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
         };
     }
     writeMeasure(measured) {
+        var _a;
         let { editor, space } = measured;
         let others = [];
         for (let i = 0; i < this.manager.tooltips.length; i++) {
@@ -8492,7 +8495,7 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
             }
             let arrow = tooltip.arrow ? tView.dom.querySelector(".cm-tooltip-arrow") : null;
             let arrowHeight = arrow ? 7 /* Arrow.Size */ : 0;
-            let width = size.right - size.left, height = size.bottom - size.top;
+            let width = size.right - size.left, height = (_a = knownHeight.get(tView)) !== null && _a !== void 0 ? _a : size.bottom - size.top;
             let offset = tView.offset || noOffset, ltr = this.view.textDirection == exports.Direction.LTR;
             let left = size.width > space.right - space.left ? (ltr ? space.left : space.right - size.width)
                 : ltr ? Math.min(pos.left - (arrow ? 14 /* Arrow.Offset */ : 0) + offset.x, space.right - width)
@@ -8509,6 +8512,7 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
                     dom.style.top = Outside;
                     continue;
                 }
+                knownHeight.set(tView, height);
                 dom.style.height = (height = spaceVert) + "px";
             }
             else if (dom.style.height) {

package/dist/index.d.ts

@@ -154,7 +154,7 @@ declare abstract class WidgetType {
     couldn't (in which case the widget will be redrawn). The default
     implementation just returns false.
     */
-    updateDOM(dom: HTMLElement): boolean;
+    updateDOM(dom: HTMLElement, view: EditorView): boolean;
     /**
     The estimated height this widget will have, to be used when
     estimating the height of content that hasn't been drawn. May

package/dist/index.js

@@ -330,11 +330,6 @@ class ContentView {
         this.dom = null;
         this.dirty = 2 /* Dirty.Node */;
     }
-    get editorView() {
-        if (!this.parent)
-            throw new Error("Accessing view in orphan content view");
-        return this.parent.editorView;
-    }
     get overrideDOMText() { return null; }
     get posAtStart() {
         return this.parent ? this.parent.posBefore(this) : 0;
@@ -358,7 +353,7 @@ class ContentView {
     // (side > 0) or directly on (when the browser supports it) the
     // given position.
     coordsAt(_pos, _side) { return null; }
-    sync(track) {
+    sync(view, track) {
         if (this.dirty & 2 /* Dirty.Node */) {
             let parent = this.dom;
             let prev = null, next;
@@ -369,7 +364,7 @@ class ContentView {
                         if (!contentView || !contentView.parent && contentView.canReuseDOM(child))
                             child.reuseDOM(next);
                     }
-                    child.sync(track);
+                    child.sync(view, track);
                     child.dirty = 0 /* Dirty.Not */;
                 }
                 next = prev ? prev.nextSibling : parent.firstChild;
@@ -393,7 +388,7 @@ class ContentView {
         else if (this.dirty & 1 /* Dirty.Child */) {
             for (let child of this.children)
                 if (child.dirty) {
-                    child.sync(track);
+                    child.sync(view, track);
                     child.dirty = 0 /* Dirty.Not */;
                 }
         }
@@ -687,7 +682,7 @@ class TextView extends ContentView {
     createDOM(textDOM) {
         this.setDOM(textDOM || document.createTextNode(this.text));
     }
-    sync(track) {
+    sync(view, track) {
         if (!this.dom)
             this.createDOM();
         if (this.dom.nodeValue != this.text) {
@@ -748,12 +743,12 @@ class MarkView extends ContentView {
             this.dirty |= 4 /* Dirty.Attrs */ | 2 /* Dirty.Node */;
         }
     }
-    sync(track) {
+    sync(view, track) {
         if (!this.dom)
             this.setDOM(this.setAttrs(document.createElement(this.mark.tagName)));
         else if (this.dirty & 4 /* Dirty.Attrs */)
             this.setAttrs(this.dom);
-        super.sync(track);
+        super.sync(view, track);
     }
     merge(from, to, source, _hasStart, openStart, openEnd) {
         if (source && (!(source instanceof MarkView && source.mark.eq(this.mark)) ||
@@ -837,12 +832,12 @@ class WidgetView extends ContentView {
         this.length -= from;
         return result;
     }
-    sync() {
-        if (!this.dom || !this.widget.updateDOM(this.dom)) {
+    sync(view) {
+        if (!this.dom || !this.widget.updateDOM(this.dom, view)) {
             if (this.dom && this.prevWidget)
                 this.prevWidget.destroy(this.dom);
             this.prevWidget = null;
-            this.setDOM(this.widget.toDOM(this.editorView));
+            this.setDOM(this.widget.toDOM(view));
             this.dom.contentEditable = "false";
         }
     }
@@ -875,7 +870,7 @@ class WidgetView extends ContentView {
         let top = this;
         while (top.parent)
             top = top.parent;
-        let view = top.editorView, text = view && view.state.doc, start = this.posAtStart;
+        let { view } = top, text = view && view.state.doc, start = this.posAtStart;
         return text ? text.slice(start, start + this.length) : Text.empty;
     }
     domAtPos(pos) {
@@ -1167,7 +1162,7 @@ class WidgetType {
     couldn't (in which case the widget will be redrawn). The default
     implementation just returns false.
     */
-    updateDOM(dom) { return false; }
+    updateDOM(dom, view) { return false; }
     /**
     @internal
     */
@@ -1482,7 +1477,7 @@ class LineView extends ContentView {
             this.dirty |= 4 /* Dirty.Attrs */ | 2 /* Dirty.Node */;
         }
     }
-    sync(track) {
+    sync(view, track) {
         var _a;
         if (!this.dom) {
             this.setDOM(document.createElement("div"));
@@ -1499,7 +1494,7 @@ class LineView extends ContentView {
             this.dom.classList.add("cm-line");
             this.prevAttrs = undefined;
         }
-        super.sync(track);
+        super.sync(view, track);
         let last = this.dom.lastChild;
         while (last && ContentView.get(last) instanceof MarkView)
             last = last.lastChild;
@@ -1574,12 +1569,12 @@ class BlockWidgetView extends ContentView {
         return end;
     }
     get children() { return noChildren; }
-    sync() {
-        if (!this.dom || !this.widget.updateDOM(this.dom)) {
+    sync(view) {
+        if (!this.dom || !this.widget.updateDOM(this.dom, view)) {
             if (this.dom && this.prevWidget)
                 this.prevWidget.destroy(this.dom);
             this.prevWidget = null;
-            this.setDOM(this.widget.toDOM(this.editorView));
+            this.setDOM(this.widget.toDOM(view));
             this.dom.contentEditable = "false";
         }
     }
@@ -2533,7 +2528,6 @@ class DocView extends ContentView {
         this.updateDeco();
         this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
     }
-    get editorView() { return this.view; }
     get length() { return this.view.state.doc.length; }
     // Update the document view to a given state. scrollIntoView can be
     // used as a hint to compute a new viewport that includes that
@@ -2593,7 +2587,7 @@ class DocView extends ContentView {
             // selection from the one it displays (issue #218). This tries
             // to detect that situation.
             let track = browser.chrome || browser.ios ? { node: observer.selectionRange.focusNode, written: false } : undefined;
-            this.sync(track);
+            this.sync(this.view, track);
             this.dirty = 0 /* Dirty.Not */;
             if (track && (track.written || observer.selectionRange.focusNode != track.node))
                 this.forceSelection = true;
@@ -3429,7 +3423,7 @@ class InputState {
             this.registeredEvents.push(type);
         }
         view.scrollDOM.addEventListener("mousedown", (event) => {
-            if (event.target == view.scrollDOM)
+            if (event.target == view.scrollDOM && event.clientY > view.contentDOM.getBoundingClientRect().bottom)
                 handleEvent(handlers.mousedown, event);
         });
         if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
@@ -3607,11 +3601,13 @@ class MouseSelection {
         this.multiple = view.state.facet(EditorState.allowMultipleSelections) && addsSelectionRange(view, startEvent);
         this.dragMove = dragMovesSelection(view, startEvent);
         this.dragging = isInPrimarySelection(view, startEvent) && getClickType(startEvent) == 1 ? null : false;
+    }
+    start(event) {
         // When clicking outside of the selection, immediately apply the
         // effect of starting the selection
         if (this.dragging === false) {
-            startEvent.preventDefault();
-            this.select(startEvent);
+            event.preventDefault();
+            this.select(event);
         }
     }
     move(event) {
@@ -3803,9 +3799,11 @@ handlers.mousedown = (view, event) => {
         style = basicMouseSelection(view, event);
     if (style) {
         let mustFocus = view.root.activeElement != view.contentDOM;
+        view.inputState.startMouseSelection(new MouseSelection(view, event, style, mustFocus));
         if (mustFocus)
             view.observer.ignore(() => focusPreventScroll(view.contentDOM));
-        view.inputState.startMouseSelection(new MouseSelection(view, event, style, mustFocus));
+        if (view.inputState.mouseSelection)
+            view.inputState.mouseSelection.start(event);
     }
 };
 function rangeForClick(view, pos, bias, type) {
@@ -5415,6 +5413,9 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     "&dark .cm-cursor": {
         borderLeftColor: "#444"
     },
+    ".cm-dropCursor": {
+        position: "absolute"
+    },
     "&.cm-focused .cm-cursor": {
         display: "block"
     },
@@ -8355,6 +8356,7 @@ const tooltipConfig = /*@__PURE__*/Facet.define({
         });
     }
 });
+const knownHeight = /*@__PURE__*/new WeakMap();
 const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
     constructor(view) {
         this.view = view;
@@ -8470,6 +8472,7 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         };
     }
     writeMeasure(measured) {
+        var _a;
         let { editor, space } = measured;
         let others = [];
         for (let i = 0; i < this.manager.tooltips.length; i++) {
@@ -8485,7 +8488,7 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
             }
             let arrow = tooltip.arrow ? tView.dom.querySelector(".cm-tooltip-arrow") : null;
             let arrowHeight = arrow ? 7 /* Arrow.Size */ : 0;
-            let width = size.right - size.left, height = size.bottom - size.top;
+            let width = size.right - size.left, height = (_a = knownHeight.get(tView)) !== null && _a !== void 0 ? _a : size.bottom - size.top;
             let offset = tView.offset || noOffset, ltr = this.view.textDirection == Direction.LTR;
             let left = size.width > space.right - space.left ? (ltr ? space.left : space.right - size.width)
                 : ltr ? Math.min(pos.left - (arrow ? 14 /* Arrow.Offset */ : 0) + offset.x, space.right - width)
@@ -8502,6 +8505,7 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
                     dom.style.top = Outside;
                     continue;
                 }
+                knownHeight.set(tView, height);
                 dom.style.height = (height = spaceVert) + "px";
             }
             else if (dom.style.height) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "6.7.3",
+  "version": "6.8.1",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -12,7 +12,7 @@
   ],
   "author": {
     "name": "Marijn Haverbeke",
-    "email": "marijnh@gmail.com",
+    "email": "marijn@haverbeke.berlin",
     "url": "http://marijnhaverbeke.nl"
   },
   "type": "module",