@codemirror/tooltip - npm Package Compare versions

Comparing version 0.19.2 to 0.19.3

CHANGELOG.md

@@ -0,1 +1,11 @@
+## 0.19.3 (2021-10-11)
+
+### Bug fixes
+
+Fix an issue where a newly created (or reconfigured) editor wouldn't show its tooltips until the first change or scroll event.
+
+### New features
+
+Tooltips now accept an `arrow` option to show a little triangle between the tooltip and its target position.
+
 ## 0.19.2 (2021-09-01)
@@ -2,0 +12,0 @@

dist/index.d.ts

@@ -55,2 +55,7 @@ import { EditorView, ViewUpdate } from '@codemirror/view';
     strictSide?: boolean;
+    /**
+    When set to true, show a triangle connecting the tooltip element
+    to position `pos`.
+    */
+    arrow?: boolean;
 }
@@ -57,0 +62,0 @@ /**

dist/index.js

 import { ViewPlugin, Direction, EditorView, logException } from '@codemirror/view';
 import { Facet, StateEffect, StateField, MapMode } from '@codemirror/state';
 
+var _a;
 const ios = typeof navigator != "undefined" &&
@@ -69,2 +70,3 @@ !/*@__PURE__*//Edge\/(\d+)/.exec(navigator.userAgent) && /*@__PURE__*//Apple Computer/.test(navigator.vendor) &&
         this.manager = new TooltipViewManager(view, showTooltip, t => this.createTooltip(t));
+        this.maybeMeasure();
     }
@@ -86,2 +88,4 @@ update(update) {
         tooltipView.dom.classList.add("cm-tooltip");
+        if (tooltip.arrow)
+            tooltipView.dom.classList.add("cm-tooltip-arrow");
         tooltipView.dom.style.position = this.position;
@@ -118,10 +122,11 @@ tooltipView.dom.style.top = Outside;
             }
-            let width = size.right - size.left, height = size.bottom - size.top;
-            let left = this.view.textDirection == Direction.LTR ? Math.min(pos.left, measured.innerWidth - width)
-                : Math.max(0, pos.left - width);
-            let above = !!tooltip.above;
+            let arrow = !!tooltip.arrow, above = !!tooltip.above;
+            let width = size.right - size.left, height = size.bottom - size.top + (arrow ? 7 /* Size */ : 0);
+            let left = this.view.textDirection == Direction.LTR
+                ? Math.min(pos.left - (arrow ? 14 /* Offset */ : 0), measured.innerWidth - width)
+                : Math.max(0, pos.left - width + (arrow ? 14 /* Offset */ : 0));
             if (!tooltip.strictSide &&
                 (above ? pos.top - (size.bottom - size.top) < 0 : pos.bottom + (size.bottom - size.top) > measured.innerHeight))
                 above = !above;
-            let top = above ? pos.top - height : pos.bottom, right = left + width;
+            let top = above ? pos.top - height : pos.bottom + (arrow ? 7 /* Size */ : 0), right = left + width;
             for (let r of others)
@@ -162,2 +167,4 @@ if (r.left < right && r.right > left && r.top < top + height && r.bottom > top)
 });
+const insetInlineStart = typeof document == 'undefined' || ((_a = document.body) === null || _a === void 0 ? void 0 : _a.style.insetInlineStart) != null
+    ? 'insetInlineStart' : 'left';
 const baseTheme = /*@__PURE__*/EditorView.baseTheme({
@@ -168,7 +175,7 @@ ".cm-tooltip": {
     "&light .cm-tooltip": {
-        border: "1px solid #ddd",
+        border: "1px solid #bbb",
         backgroundColor: "#f5f5f5"
     },
     "&light .cm-tooltip-section:not(:first-child)": {
-        borderTop: "1px solid #ddd",
+        borderTop: "1px solid #bbb",
     },
@@ -178,2 +185,38 @@ "&dark .cm-tooltip": {
         color: "white"
+    },
+    ".cm-tooltip.cm-tooltip-arrow:before, .cm-tooltip.cm-tooltip-arrow:after": {
+        position: "absolute",
+        content: "''",
+        [insetInlineStart]: `${14 /* Offset */ - 7 /* Size */}px`,
+        width: 0,
+        height: 0,
+        borderLeft: `${7 /* Size */}px solid transparent`,
+        borderRight: `${7 /* Size */}px solid transparent`,
+        zIndex: -1
+    },
+    ".cm-tooltip-above.cm-tooltip-arrow:before": {
+        borderTop: `${7 /* Size */}px solid #f5f5f5`,
+        bottom: `-${7 /* Size */ - 1}px`
+    },
+    ".cm-tooltip-below.cm-tooltip-arrow:before": {
+        borderBottom: `${7 /* Size */}px solid #f5f5f5`,
+        top: `-${7 /* Size */ - 1}px`
+    },
+    ".cm-tooltip-above.cm-tooltip-arrow:after": {
+        borderTop: `${7 /* Size */}px solid #bbb`,
+        bottom: `-${7 /* Size */}px`,
+        zIndex: -2
+    },
+    ".cm-tooltip-below.cm-tooltip-arrow:after": {
+        borderBottom: `${7 /* Size */}px solid #bbb`,
+        top: `-${7 /* Size */}px`,
+        zIndex: -2
+    },
+    "&dark .cm-tooltip.cm-tooltip-arrow:before": {
+        borderTopColor: "#333338",
+        borderBottomColor: "#333338"
+    },
+    "&dark .cm-tooltip.cm-tooltip-arrow:after": {
+        borderTopColor: "transparent",
+        borderBottomColor: "transparent"
     }
@@ -233,3 +276,4 @@ });
         create: HoverTooltipHost.create,
-        above: tooltips[0].above
+        above: tooltips[0].above,
+        arrow: tooltips.some(t => t.arrow),
     };
@@ -236,0 +280,0 @@ });

package.json

 {
   "name": "@codemirror/tooltip",
-  "version": "0.19.2",
+  "version": "0.19.3",
   "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

43714

increased by10.19%

Lines of code

967

increased by10.64%

No dependency changes