@codemirror/tooltip - npm Package Compare versions

Comparing version 0.18.0 to 0.18.1

CHANGELOG.md

@@ -0,1 +1,7 @@
+## 0.18.1 (2021-03-04)
+
+### New features
+
+The source callback to `hoverTooltip` may now return a promise.
+
 ## 0.18.0 (2021-03-03)
@@ -2,0 +8,0 @@

dist/index.d.ts

@@ -20,3 +20,3 @@ import { EditorView, ViewUpdate } from '@codemirror/view';
 declare const showTooltip: Facet<Tooltip, readonly Tooltip[]>;
-declare function hoverTooltip(source: (view: EditorView, pos: number, side: -1 | 1) => Tooltip | null, options?: {
+declare function hoverTooltip(source: (view: EditorView, pos: number, side: -1 | 1) => Tooltip | null | Promise<Tooltip | null>, options?: {
     hideOnChange?: boolean;
@@ -23,0 +23,0 @@ }): Extension;

dist/index.js

@@ -130,3 +130,3 @@ import { ViewPlugin, Direction, EditorView } from '@codemirror/view';
 const showTooltip = Facet.define();
-const HoverTime = 750, HoverMaxDist = 10;
+const HoverTime = 750, HoverMaxDist = 6;
 class HoverPlugin {
@@ -140,2 +140,4 @@ constructor(view, source, field, setHover) {
         this.hoverTimeout = -1;
+        this.restartTimeout = -1;
+        this.pending = null;
         this.checkHover = this.checkHover.bind(this);
@@ -145,2 +147,9 @@ view.dom.addEventListener("mouseleave", this.mouseleave = this.mouseleave.bind(this));
     }
+    update() {
+        if (this.pending) {
+            this.pending = null;
+            clearTimeout(this.restartTimeout);
+            this.restartTimeout = setTimeout(() => this.startHover(), 20);
+        }
+    }
     get active() {
@@ -154,6 +163,11 @@ return this.view.state.field(this.field);
         let now = Date.now(), lastMove = this.lastMouseMove;
-        if (now - lastMove.timeStamp < HoverTime) {
+        if (now - lastMove.timeStamp < HoverTime)
             this.hoverTimeout = setTimeout(this.checkHover, HoverTime - (now - lastMove.timeStamp));
-            return;
-        }
+        else
+            this.startHover();
+    }
+    startHover() {
+        var _a;
+        clearTimeout(this.restartTimeout);
+        let lastMove = this.lastMouseMove;
         let coords = { x: lastMove.clientX, y: lastMove.clientY };
@@ -172,4 +186,15 @@ let pos = this.view.contentDOM.contains(lastMove.target)
         let open = this.source(this.view, pos, (coords.x < posCoords.left ? -rtl : rtl));
-        if (open)
+        if ((_a = open) === null || _a === void 0 ? void 0 : _a.then) {
+            let pending = this.pending = { pos };
+            open.then(result => {
+                if (this.pending == pending) {
+                    this.pending = null;
+                    if (result)
+                        this.view.dispatch({ effects: this.setHover.of(result) });
+                }
+            });
+        }
+        else if (open) {
             this.view.dispatch({ effects: this.setHover.of(open) });
+        }
     }
@@ -182,7 +207,9 @@ mousemove(event) {
         let tooltip = this.active;
-        if (tooltip && !isInTooltip(event.target)) {
-            let { pos } = tooltip, end = (_a = tooltip.end) !== null && _a !== void 0 ? _a : pos;
+        if (tooltip && !isInTooltip(event.target) || this.pending) {
+            let { pos } = tooltip || this.pending, end = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.end) !== null && _a !== void 0 ? _a : pos;
             if ((pos == end ? this.view.posAtCoords({ x: event.clientX, y: event.clientY }) != pos
-                : !isOverRange(this.view, pos, end, event.clientX, event.clientY, HoverMaxDist)))
+                : !isOverRange(this.view, pos, end, event.clientX, event.clientY, HoverMaxDist))) {
                 this.view.dispatch({ effects: this.setHover.of(null) });
+                this.pending = null;
+            }
         }
@@ -224,8 +251,8 @@ }
 /// Enable a hover tooltip, which shows up when the pointer hovers
-/// over ranges of text. The callback is called when the mouse overs
+/// over ranges of text. The callback is called when the mouse hovers
 /// over the document text. It should, if there is a tooltip
-/// associated with position `pos` return the tooltip description. The
-/// `side` argument indicates on which side of the position the
-/// pointer is—it will be -1 if the pointer is before
-/// the position, 1 if after the position.
+/// associated with position `pos` return the tooltip description
+/// (either directly or in a promise). The `side` argument indicates
+/// on which side of the position the pointer is—it will be -1 if the
+/// pointer is before the position, 1 if after the position.
 function hoverTooltip(source, options = {}) {
@@ -232,0 +259,0 @@ const setHover = StateEffect.define();

package.json

 {
   "name": "@codemirror/tooltip",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "description": "Tooltip support for the CodeMirror code editor",
@@ -5,0 +5,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53950

increased by8.73%

Lines of code

605

increased by9.8%

No dependency changes