@codemirror/tooltip - npm Package Compare versions

Comparing version 0.19.3 to 0.19.4

CHANGELOG.md

@@ -0,1 +1,3 @@
+## 0.19.4 (2021-10-13)
+
 ## 0.19.3 (2021-10-11)
@@ -2,0 +4,0 @@

dist/index.d.ts

@@ -21,2 +21,10 @@ import { EditorView, ViewUpdate } from '@codemirror/view';
     position?: "fixed" | "absolute";
+    /**
+    The element to put the tooltips into. By default, they are put
+    in the editor (`cm-editor`) element, and that is usually what
+    you want. But in some layouts that can lead to positioning
+    issues, and you need to use a different parent to work around
+    those.
+    */
+    parent?: HTMLElement;
 }): Extension;
@@ -23,0 +31,0 @@ /**

dist/index.js

@@ -58,6 +58,12 @@ import { ViewPlugin, Direction, EditorView, logException } from '@codemirror/view';
 function tooltips(config = {}) {
-    return config.position ? tooltipPositioning.of(config.position) : [];
+    return tooltipConfig.of(config);
 }
-const tooltipPositioning = /*@__PURE__*/Facet.define({
-    combine: values => ios ? "absolute" : values.length ? values[0] : "fixed"
+const tooltipConfig = /*@__PURE__*/Facet.define({
+    combine: values => {
+        var _a, _b;
+        return ({
+            position: ios ? "absolute" : ((_a = values.find(conf => conf.position)) === null || _a === void 0 ? void 0 : _a.position) || "fixed",
+            parent: ((_b = values.find(conf => conf.parent)) === null || _b === void 0 ? void 0 : _b.parent) || null
+        });
+    }
 });
@@ -68,3 +74,7 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
         this.inView = true;
-        this.position = view.state.facet(tooltipPositioning);
+        let config = view.state.facet(tooltipConfig);
+        this.position = config.position;
+        this.parent = config.parent;
+        this.classes = view.themeClasses;
+        this.createContainer();
         this.measureReq = { read: this.readMeasure.bind(this), write: this.writeMeasure.bind(this), key: this };
@@ -74,11 +84,34 @@ this.manager = new TooltipViewManager(view, showTooltip, t => this.createTooltip(t));
     }
+    createContainer() {
+        if (this.parent) {
+            this.container = document.createElement("div");
+            this.container.style.position = "relative";
+            this.container.className = this.view.themeClasses;
+            this.parent.appendChild(this.container);
+        }
+        else {
+            this.container = this.view.dom;
+        }
+    }
     update(update) {
         let { shouldMeasure } = this.manager.update(update);
-        let newPosition = update.state.facet(tooltipPositioning);
-        if (newPosition != this.position) {
-            this.position = newPosition;
+        let newConfig = update.state.facet(tooltipConfig);
+        if (newConfig.position != this.position) {
+            this.position = newConfig.position;
             for (let t of this.manager.tooltipViews)
-                t.dom.style.position = newPosition;
+                t.dom.style.position = this.position;
             shouldMeasure = true;
         }
+        if (newConfig.parent != this.parent) {
+            if (this.parent)
+                this.container.remove();
+            this.parent = newConfig.parent;
+            this.createContainer();
+            for (let t of this.manager.tooltipViews)
+                this.container.appendChild(t.dom);
+            shouldMeasure = true;
+        }
+        else if (this.parent && this.view.themeClasses != this.classes) {
+            this.classes = this.container.className = this.view.themeClasses;
+        }
         if (shouldMeasure)
@@ -94,3 +127,3 @@ this.maybeMeasure();
         tooltipView.dom.style.top = Outside;
-        this.view.dom.appendChild(tooltipView.dom);
+        this.container.appendChild(tooltipView.dom);
         if (tooltipView.mount)
@@ -105,4 +138,6 @@ tooltipView.mount(this.view);
     readMeasure() {
+        let editor = this.view.dom.getBoundingClientRect();
         return {
-            editor: this.view.dom.getBoundingClientRect(),
+            editor,
+            parent: this.parent ? this.container.getBoundingClientRect() : editor,
             pos: this.manager.tooltips.map(t => this.view.coordsAtPos(t.pos)),
@@ -138,4 +173,4 @@ size: this.manager.tooltipViews.map(({ dom }) => dom.getBoundingClientRect()),
             if (this.position == "absolute") {
-                dom.style.top = (top - editor.top) + "px";
-                dom.style.left = (left - editor.left) + "px";
+                dom.style.top = (top - measured.parent.top) + "px";
+                dom.style.left = (left - measured.parent.left) + "px";
             }
@@ -142,0 +177,0 @@ else {

package.json

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

46802

increased by7.06%

Lines of code

1045

increased by8.07%

No dependency changes