@kerebron/extension-ui 0.8.1

package/esm/overlayer/mod.js

@@ -0,0 +1,111 @@
+export class OverLayer {
+    overLayerContainer;
+    stack = [];
+    constructor(container) {
+        if (!container) {
+            container = document.createElement('div');
+            document.body.appendChild(container);
+            container.classList.add('kb--top-layer');
+        }
+        this.overLayerContainer = container;
+    }
+    removeStacked(start) {
+        for (let i = this.stack.length - 1; i >= start; i--) {
+            if (this.overLayerContainer.contains(this.stack[i])) {
+                this.overLayerContainer.removeChild(this.stack[i]);
+            }
+        }
+        this.stack.splice(start, this.stack.length - start);
+    }
+    createElement(type, ancestor) {
+        const element = document.createElement(type);
+        this.overLayerContainer.appendChild(element);
+        const observer = new MutationObserver((mutations) => {
+            if (!element.isConnected) {
+                observer.disconnect();
+                const idx = this.stack.findIndex((item) => item === element);
+                if (idx > -1) {
+                    this.removeStacked(idx);
+                }
+                element.dispatchEvent(new CustomEvent('removed'));
+            }
+        });
+        if (ancestor) {
+            const idx = this.stack.findIndex((item) => item === ancestor);
+            if (idx > -1) {
+                this.removeStacked(idx + 1);
+            }
+        }
+        else {
+            this.removeStacked(0);
+        }
+        this.stack.push(element);
+        observer.observe(this.overLayerContainer, {
+            childList: true,
+        });
+        return element;
+    }
+}
+export function anchorElement(popover, anchorSelector, params) {
+    let rafId = null;
+    popover.style.position = 'fixed';
+    popover.setAttribute('data-anchor-selector', anchorSelector);
+    function update() {
+        rafId = null;
+        const container = params?.container || document.body;
+        const anchor = container.querySelector(anchorSelector);
+        if (anchor) {
+            const rect = anchor.getBoundingClientRect();
+            if (params?.above) {
+                popover.style.left = `${rect.left}px`;
+                popover.style.top = `${rect.top - popover.clientHeight}px`;
+            }
+            else {
+                popover.style.left = `${rect.left}px`;
+                popover.style.top = `${rect.bottom}px`;
+            }
+            popover.style.display = '';
+        }
+        else {
+            const ids = [];
+            const nodes = container.querySelectorAll('[data-decoration-id]');
+            nodes.forEach((n) => ids.push(n.getAttribute('data-decoration-id')));
+            // console.debug('!anchorSelector', anchorSelector, ids);
+            popover.style.display = 'none';
+            scheduleUpdate();
+        }
+    }
+    function scheduleUpdate() {
+        if (!rafId) {
+            rafId = requestAnimationFrame(update);
+        }
+    }
+    update();
+    // const resizeObserver = new ResizeObserver(scheduleUpdate);
+    // resizeObserver.observe(anchor);
+    // const moveObserver = new IntersectionObserver(scheduleUpdate);
+    // moveObserver.observe(anchor);
+    if (params?.container) {
+        const observer = new MutationObserver((mutations) => {
+            scheduleUpdate();
+        });
+        observer.observe(params?.container, {
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    }
+    globalThis.addEventListener('resize', scheduleUpdate, true);
+    document.addEventListener('scroll', scheduleUpdate, true);
+    popover.addEventListener('removed', () => {
+        // resizeObserver.disconnect();
+        // moveObserver.disconnect();
+        globalThis.removeEventListener('resize', scheduleUpdate, true);
+        document.removeEventListener('scroll', scheduleUpdate, true);
+        if (rafId) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+        }
+    });
+}
+//# sourceMappingURL=mod.js.map

package/esm/overlayer/mod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mod.js","sourceRoot":"","sources":["../../src/overlayer/mod.ts"],"names":[],"mappings":"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"}

package/esm/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@kerebron/extension-ui",
+  "version": "0.8.1",
+  "license": "MIT",
+  "module": "./esm/mod.js",
+  "exports": {
+    ".": {
+      "import": "./esm/mod.js"
+    },
+    "./autocomplete": {
+      "import": "./esm/autocomplete/mod.js"
+    },
+    "./autocomplete/AutocompletePlugin": {
+      "import": "./esm/autocomplete/AutocompletePlugin.js"
+    },
+    "./autocomplete/DefaultRenderer": {
+      "import": "./esm/autocomplete/DefaultRenderer.js"
+    },
+    "./hover": {
+      "import": "./esm/hover/mod.js"
+    },
+    "./OverLayer": {
+      "import": "./esm/overlayer/mod.js"
+    },
+    "./assets/ui.css": "./assets/ui.css"
+  },
+  "scripts": {},
+  "files": [
+    "esm",
+    "src",
+    "assets"
+  ],
+  "dependencies": {
+    "@kerebron/editor": "0.8.1",
+    "prosemirror-model": "1.25.3",
+    "prosemirror-state": "1.4.3",
+    "prosemirror-view": "1.40.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.9.0"
+  },
+  "_generatedBy": "dnt@dev"
+}

package/src/ExtensionUi.ts

@@ -0,0 +1,10 @@
+import { Extension } from '@kerebron/editor';
+import { OverLayer } from './overlayer/mod.js';
+
+export class ExtensionUi extends Extension {
+  name = 'ui';
+
+  override created(): void {
+    this.editor.ci.register('overlayer', new OverLayer());
+  }
+}