@kerebron/extension-menu 0.4.3 → 0.4.5

package/README.md

@@ -8,6 +8,86 @@ Custom menu system for ProseMirror editors with pinnable tools and overflow mana
 - **Overflow Menu**: Tools that don't fit in the toolbar appear in an overflow menu
 - **Mobile Responsive**: Automatically limits toolbar to 4 tools on narrow screens (< 768px)
 - **State Persistence**: Pinned tool configuration saved to localStorage
+- **Trailing Elements**: Support for fixed elements on the right side of the toolbar (e.g., status indicators)
+- **Auto YJS Integration**: Automatically adds collaboration status when YJS extension is detected
+- **Auto LSP Integration**: Automatically adds LSP status when LSP extension is detected
+
+## Usage
+
+```typescript
+import { ExtensionCustomMenu } from '@kerebron/extension-menu';
+
+// Basic usage - auto-detects YJS and LSP, adds status indicators
+new Editor({
+  extensions: [
+    // ... other extensions
+    ExtensionYjs({ ydoc, provider }),  // Optional: for collaboration
+    ExtensionLsp({ getLspTransport }), // Optional: for LSP support
+    ExtensionCustomMenu(),             // Must come LAST for auto-detection
+  ],
+});
+
+// Disable auto status indicators
+new Editor({
+  extensions: [
+    ExtensionCustomMenu({ 
+      autoAddCollaborationStatus: false,
+      autoAddLspStatus: false,
+    }),
+    // ... other extensions
+  ],
+});
+
+// Custom trailing elements
+import { CollaborationStatusElement } from '@kerebron/extension-yjs/CollaborationStatus';
+import { LspStatusElement } from '@kerebron/extension-lsp/LspStatus';
+
+new Editor({
+  extensions: [
+    ExtensionCustomMenu({
+      autoAddCollaborationStatus: false,
+      autoAddLspStatus: false,
+      trailingElements: [
+        new CollaborationStatusElement({ awareness, provider }),
+        new LspStatusElement({ lspExtension, label: 'LSP' }),
+      ],
+    }),
+    // ... other extensions
+  ],
+});
+```
+
+## Extension Order
+
+**Important**: For auto-detection to work, `ExtensionCustomMenu` must be registered **after** any extensions you want it to detect:
+
+```typescript
+extensions: [
+  // ... other extensions
+  new ExtensionYjs({ ... }),    // Register first (if using)
+  new ExtensionLsp({ ... }),    // Register second (if using)
+  new ExtensionCustomMenu(),    // Register LAST for auto-detection
+]
+```
+
+## Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `content` | `MenuElement[][]` | Auto-generated | Custom menu content (pinnable tools) |
+| `trailingElements` | `MenuElement[]` | `[]` | Fixed elements on the right side of toolbar |
+| `autoAddCollaborationStatus` | `boolean` | `true` | Auto-add collaboration status when YJS is detected |
+| `autoAddLspStatus` | `boolean` | `true` | Auto-add LSP status when LSP extension is detected |
+
+## CSS Imports
+
+Don't forget to import the necessary CSS files:
+
+```typescript
+import '@kerebron/extension-menu/assets/custom-menu.css';
+import '@kerebron/extension-yjs/assets/collaboration-status.css';  // If using YJS
+import '@kerebron/extension-lsp/assets/lsp-status.css';            // If using LSP
+```
 
 ## Debug Mode
 

package/assets/custom-menu.css

@@ -74,7 +74,7 @@
   padding: 6px var(--kb-space-sm);
   background: var(--kb-color-surface-elevated);
   border-bottom: 1px solid var(--kb-color-border-strong);
-  z-index: 1000;
+  z-index: var(--kb-z-dropdown, 100);
   overflow: visible;
 }
 
@@ -188,6 +188,24 @@
   margin-left: auto;
 }
 
+/* Trailing separator (before trailing elements) */
+.kb-custom-menu__separator--trailing {
+  margin-left: 0;
+}
+
+/* Trailing elements group (always visible, not pinnable) */
+.kb-custom-menu__trailing-group {
+  display: flex;
+  align-items: center;
+  gap: var(--kb-space-xs);
+  flex-shrink: 0;
+}
+
+.kb-custom-menu__trailing-item {
+  display: inline-flex;
+  align-items: center;
+}
+
 /* Overflow toggle button (3-dot menu) */
 .kb-custom-menu__overflow-toggle {
   display: inline-flex;
@@ -226,7 +244,7 @@
   border: 1px solid var(--kb-color-border-strong);
   border-radius: var(--kb-radius-lg);
   box-shadow: var(--kb-shadow-lg);
-  z-index: 1001;
+  z-index: calc(var(--kb-z-dropdown, 100) + 1);
   max-height: 80vh;
   display: flex;
   flex-direction: column;
@@ -276,7 +294,7 @@
   padding: var(--kb-space-sm) 0;
   border: none;
   background: transparent;
-  color: var(--kb-color-text);
+  color: var(--kb-menu-dropdown-dark-text);
   cursor: pointer;
   border-radius: 0;
   transition: none;
@@ -361,7 +379,7 @@
 /* Overflow item label */
 .kb-custom-menu__overflow-item-label {
   flex: 1;
-  color: var(--kb-color-text);
+  color: var(--kb-menu-dropdown-dark-text);
   font-size: var(--kb-text-sm);
   white-space: nowrap;
   overflow: hidden;
@@ -374,7 +392,8 @@
   align-items: center;
   margin-left: auto;
   padding-left: var(--kb-space-sm);
-  color: var(--kb-color-text-muted);
+  color: var(--kb-menu-dropdown-dark-text);
+  opacity: 0.7;
 }
 
 .kb-custom-menu__overflow-item-chevron svg {
@@ -484,7 +503,7 @@
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 10000;
+  z-index: var(--kb-z-modal, 300);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -830,6 +849,7 @@
   min-width: 200px;
   max-width: 300px;
   background: var(--kb-menu-dropdown-dark-bg) !important;
+  color: var(--kb-menu-dropdown-dark-text);
   border: 1px solid var(--kb-color-border-strong);
   border-radius: var(--kb-radius-lg);
   box-shadow: var(--kb-shadow-lg);

package/assets/menu.css

@@ -15,7 +15,7 @@
   padding: 4px 8px;
   background: #f9f9f9;
   border-bottom: 1px solid #dadce0;
-  z-index: var(--kb-z-dropdown, 1000);
+  z-index: var(--kb-z-dropdown, 100);
   overflow: visible;
 }
 
@@ -122,7 +122,7 @@
 
 .kb-menu {
   background-color: var(--kb-color-surface);
-  z-index: 10000;
+  z-index: var(--kb-z-dropdown, 100);
 }
 
 /* Toolbar items */

package/esm/_dnt.polyfills.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Based on [import-meta-ponyfill](https://github.com/gaubee/import-meta-ponyfill),
+ * but instead of using npm to install additional dependencies,
+ * this approach manually consolidates cjs/mjs/d.ts into a single file.
+ *
+ * Note that this code might be imported multiple times
+ * (for example, both dnt.test.polyfills.ts and dnt.polyfills.ts contain this code;
+ *  or Node.js might dynamically clear the cache and then force a require).
+ * Therefore, it's important to avoid redundant writes to global objects.
+ * Additionally, consider that commonjs is used alongside esm,
+ * so the two ponyfill functions are stored independently in two separate global objects.
+ */
+import { createRequire } from "node:module";
+import { type URL } from "node:url";
+declare global {
+    interface ImportMeta {
+        /** A string representation of the fully qualified module URL. When the
+         * module is loaded locally, the value will be a file URL (e.g.
+         * `file:///path/module.ts`).
+         *
+         * You can also parse the string as a URL to determine more information about
+         * how the current module was loaded. For example to determine if a module was
+         * local or not:
+         *
+         * ```ts
+         * const url = new URL(import.meta.url);
+         * if (url.protocol === "file:") {
+         *   console.log("this module was loaded locally");
+         * }
+         * ```
+         */
+        url: string;
+        /**
+         * A function that returns resolved specifier as if it would be imported
+         * using `import(specifier)`.
+         *
+         * ```ts
+         * console.log(import.meta.resolve("./foo.js"));
+         * // file:///dev/foo.js
+         * ```
+         *
+         * @param specifier The module specifier to resolve relative to `parent`.
+         * @param parent The absolute parent module URL to resolve from.
+         * @returns The absolute (`file:`) URL string for the resolved module.
+         */
+        resolve(specifier: string, parent?: string | URL | undefined): string;
+        /** A flag that indicates if the current module is the main module that was
+         * called when starting the program under Deno.
+         *
+         * ```ts
+         * if (import.meta.main) {
+         *   // this was loaded as the main module, maybe do some bootstrapping
+         * }
+         * ```
+         */
+        main: boolean;
+        /** The absolute path of the current module.
+         *
+         * This property is only provided for local modules (ie. using `file://` URLs).
+         *
+         * Example:
+         * ```
+         * // Unix
+         * console.log(import.meta.filename); // /home/alice/my_module.ts
+         *
+         * // Windows
+         * console.log(import.meta.filename); // C:\alice\my_module.ts
+         * ```
+         */
+        filename: string;
+        /** The absolute path of the directory containing the current module.
+         *
+         * This property is only provided for local modules (ie. using `file://` URLs).
+         *
+         * * Example:
+         * ```
+         * // Unix
+         * console.log(import.meta.dirname); // /home/alice
+         *
+         * // Windows
+         * console.log(import.meta.dirname); // C:\alice
+         * ```
+         */
+        dirname: string;
+    }
+}
+type NodeRequest = ReturnType<typeof createRequire>;
+type NodeModule = NonNullable<NodeRequest["main"]>;
+interface ImportMetaPonyfillCommonjs {
+    (require: NodeRequest, module: NodeModule): ImportMeta;
+}
+interface ImportMetaPonyfillEsmodule {
+    (importMeta: ImportMeta): ImportMeta;
+}
+interface ImportMetaPonyfill extends ImportMetaPonyfillCommonjs, ImportMetaPonyfillEsmodule {
+}
+export declare let import_meta_ponyfill_commonjs: ImportMetaPonyfillCommonjs;
+export declare let import_meta_ponyfill_esmodule: ImportMetaPonyfillEsmodule;
+export declare let import_meta_ponyfill: ImportMetaPonyfill;
+export {};
+//# sourceMappingURL=_dnt.polyfills.d.ts.map

package/esm/_dnt.polyfills.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_dnt.polyfills.d.ts","sourceRoot":"","sources":["../src/_dnt.polyfills.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAgC,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAGlE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,UAAU;QAClB;;;;;;;;;;;;;;WAcG;QACH,GAAG,EAAE,MAAM,CAAC;QACZ;;;;;;;;;;;;WAYG;QACH,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,SAAS,GAAG,MAAM,CAAC;QACtE;;;;;;;;WAQG;QACH,IAAI,EAAE,OAAO,CAAC;QAEd;;;;;;;;;;;;WAYG;QACH,QAAQ,EAAE,MAAM,CAAC;QAEjB;;;;;;;;;;;;WAYG;QACH,OAAO,EAAE,MAAM,CAAC;KACjB;CACF;AAED,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACpD,KAAK,UAAU,GAAG,WAAW,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;AACnD,UAAU,0BAA0B;IAClC,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,GAAG,UAAU,CAAC;CACxD;AACD,UAAU,0BAA0B;IAClC,CAAC,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;CACtC;AACD,UAAU,kBACR,SAAQ,0BAA0B,EAAE,0BAA0B;CAC/D;AAiBD,eAAO,IAAI,6BAA6B,EA2BnC,0BAA0B,CAAC;AAMhC,eAAO,IAAI,6BAA6B,EA4DnC,0BAA0B,CAAC;AAMhC,eAAO,IAAI,oBAAoB,EAoB1B,kBAAkB,CAAC"}

package/esm/_dnt.polyfills.js

@@ -0,0 +1,127 @@
+/**
+ * Based on [import-meta-ponyfill](https://github.com/gaubee/import-meta-ponyfill),
+ * but instead of using npm to install additional dependencies,
+ * this approach manually consolidates cjs/mjs/d.ts into a single file.
+ *
+ * Note that this code might be imported multiple times
+ * (for example, both dnt.test.polyfills.ts and dnt.polyfills.ts contain this code;
+ *  or Node.js might dynamically clear the cache and then force a require).
+ * Therefore, it's important to avoid redundant writes to global objects.
+ * Additionally, consider that commonjs is used alongside esm,
+ * so the two ponyfill functions are stored independently in two separate global objects.
+ */
+//@ts-ignore
+import { createRequire } from "node:module";
+//@ts-ignore
+import { fileURLToPath, pathToFileURL } from "node:url";
+//@ts-ignore
+import { dirname } from "node:path";
+const defineGlobalPonyfill = (symbolFor, fn) => {
+    if (!Reflect.has(globalThis, Symbol.for(symbolFor))) {
+        Object.defineProperty(globalThis, Symbol.for(symbolFor), {
+            configurable: true,
+            get() {
+                return fn;
+            },
+        });
+    }
+};
+export let import_meta_ponyfill_commonjs = (Reflect.get(globalThis, Symbol.for("import-meta-ponyfill-commonjs")) ??
+    (() => {
+        const moduleImportMetaWM = new WeakMap();
+        return (require, module) => {
+            let importMetaCache = moduleImportMetaWM.get(module);
+            if (importMetaCache == null) {
+                const importMeta = Object.assign(Object.create(null), {
+                    url: pathToFileURL(module.filename).href,
+                    main: require.main == module,
+                    resolve: (specifier, parentURL = importMeta.url) => {
+                        return pathToFileURL((importMeta.url === parentURL
+                            ? require
+                            : createRequire(parentURL))
+                            .resolve(specifier)).href;
+                    },
+                    filename: module.filename,
+                    dirname: module.path,
+                });
+                moduleImportMetaWM.set(module, importMeta);
+                importMetaCache = importMeta;
+            }
+            return importMetaCache;
+        };
+    })());
+defineGlobalPonyfill("import-meta-ponyfill-commonjs", import_meta_ponyfill_commonjs);
+export let import_meta_ponyfill_esmodule = (Reflect.get(globalThis, Symbol.for("import-meta-ponyfill-esmodule")) ??
+    ((importMeta) => {
+        const resolveFunStr = String(importMeta.resolve);
+        const shimWs = new WeakSet();
+        //@ts-ignore
+        const mainUrl = ("file:///" + process.argv[1].replace(/\\/g, "/"))
+            .replace(/\/{3,}/, "///");
+        const commonShim = (importMeta) => {
+            if (typeof importMeta.main !== "boolean") {
+                importMeta.main = importMeta.url === mainUrl;
+            }
+            if (typeof importMeta.filename !== "string") {
+                importMeta.filename = fileURLToPath(importMeta.url);
+                importMeta.dirname = dirname(importMeta.filename);
+            }
+        };
+        if (
+        // v16.2.0+, v14.18.0+: Add support for WHATWG URL object to parentURL parameter.
+        resolveFunStr === "undefined" ||
+            // v20.0.0+, v18.19.0+"" This API now returns a string synchronously instead of a Promise.
+            resolveFunStr.startsWith("async")
+        // enable by --experimental-import-meta-resolve flag
+        ) {
+            import_meta_ponyfill_esmodule = (importMeta) => {
+                if (!shimWs.has(importMeta)) {
+                    shimWs.add(importMeta);
+                    const importMetaUrlRequire = {
+                        url: importMeta.url,
+                        require: createRequire(importMeta.url),
+                    };
+                    importMeta.resolve = function resolve(specifier, parentURL = importMeta.url) {
+                        return pathToFileURL((importMetaUrlRequire.url === parentURL
+                            ? importMetaUrlRequire.require
+                            : createRequire(parentURL)).resolve(specifier)).href;
+                    };
+                    commonShim(importMeta);
+                }
+                return importMeta;
+            };
+        }
+        else {
+            /// native support
+            import_meta_ponyfill_esmodule = (importMeta) => {
+                if (!shimWs.has(importMeta)) {
+                    shimWs.add(importMeta);
+                    commonShim(importMeta);
+                }
+                return importMeta;
+            };
+        }
+        return import_meta_ponyfill_esmodule(importMeta);
+    }));
+defineGlobalPonyfill("import-meta-ponyfill-esmodule", import_meta_ponyfill_esmodule);
+export let import_meta_ponyfill = ((...args) => {
+    const _MODULE = (() => {
+        if (typeof require === "function" && typeof module === "object") {
+            return "commonjs";
+        }
+        else {
+            // eval("typeof import.meta");
+            return "esmodule";
+        }
+    })();
+    if (_MODULE === "commonjs") {
+        //@ts-ignore
+        import_meta_ponyfill = (r, m) => import_meta_ponyfill_commonjs(r, m);
+    }
+    else {
+        //@ts-ignore
+        import_meta_ponyfill = (im) => import_meta_ponyfill_esmodule(im);
+    }
+    //@ts-ignore
+    return import_meta_ponyfill(...args);
+});

package/esm/editor/src/utilities/getShadowRoot.d.ts

@@ -0,0 +1,2 @@
+export declare function getShadowRoot(element?: Element): ShadowRoot | undefined;
+//# sourceMappingURL=getShadowRoot.d.ts.map

package/esm/editor/src/utilities/getShadowRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getShadowRoot.d.ts","sourceRoot":"","sources":["../../../../src/editor/src/utilities/getShadowRoot.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,SAAS,CAiBvE"}

package/esm/editor/src/utilities/getShadowRoot.js

@@ -0,0 +1,16 @@
+export function getShadowRoot(element) {
+    let current = element;
+    while (current) {
+        if (current.toString() === '[object ShadowRoot]') {
+            return current;
+        }
+        if (current instanceof ShadowRoot) {
+            if (current.host) {
+                return current.host.shadowRoot || undefined;
+            }
+        }
+        current = current.parentElement ||
+            ((current instanceof ShadowRoot) ? current.host : undefined);
+    }
+    return undefined;
+}

package/esm/editor/src/utilities/mod.d.ts

@@ -0,0 +1,6 @@
+export * from './getHtmlAttributes.js';
+export * from './createNodeFromContent.js';
+export * from './SmartOutput.js';
+export * from './getShadowRoot.js';
+export * from './toRawTextResult.js';
+//# sourceMappingURL=mod.d.ts.map

package/esm/editor/src/utilities/mod.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../../../src/editor/src/utilities/mod.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}

package/esm/editor/src/utilities/mod.js

@@ -0,0 +1,5 @@
+export * from './getHtmlAttributes.js';
+export * from './createNodeFromContent.js';
+export * from './SmartOutput.js';
+export * from './getShadowRoot.js';
+export * from './toRawTextResult.js';

package/esm/editor/src/utilities/toRawTextResult.d.ts

@@ -0,0 +1,3 @@
+import { RawTextResult } from '../types.js';
+export declare function toRawTextResult(content: string, nodeIdx?: number): RawTextResult;
+//# sourceMappingURL=toRawTextResult.d.ts.map

package/esm/editor/src/utilities/toRawTextResult.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toRawTextResult.d.ts","sourceRoot":"","sources":["../../../../src/editor/src/utilities/toRawTextResult.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,aAAa,EAAE,MAAM,aAAa,CAAC;AAE7D,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,SAAI,GAAG,aAAa,CAwB3E"}

package/esm/editor/src/utilities/toRawTextResult.js

@@ -0,0 +1,21 @@
+export function toRawTextResult(content, nodeIdx = 0) {
+    const lines = content.split('\n');
+    const rawTextMap = [];
+    let targetPos = 0;
+    let targetRow = 0;
+    for (const line of lines) {
+        rawTextMap.push({
+            nodeIdx,
+            targetRow,
+            targetCol: 0,
+            targetPos,
+        });
+        targetRow++;
+        targetPos += line.length + 1;
+        nodeIdx += line.length + 1;
+    }
+    return {
+        content,
+        rawTextMap,
+    };
+}

package/esm/extension-autocomplete/src/AutocompletePlugin.d.ts

@@ -0,0 +1,8 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { type CoreEditor } from '../../editor/src/mod.js';
+import type { AutocompleteConfig } from './ExtensionAutocomplete.js';
+export declare const AutocompletePluginKey: PluginKey<any>;
+export declare class AutocompletePlugin<Item, TSelected> extends Plugin {
+    constructor(config: AutocompleteConfig, editor: CoreEditor);
+}
+//# sourceMappingURL=AutocompletePlugin.d.ts.map

package/esm/extension-autocomplete/src/AutocompletePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompletePlugin.d.ts","sourceRoot":"","sources":["../../../src/extension-autocomplete/src/AutocompletePlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGtD,OAAO,EAAE,KAAK,UAAU,EAAkB,MAAM,yBAAyB,CAAC;AAE1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AASrE,eAAO,MAAM,qBAAqB,gBAAgC,CAAC;AAEnE,qBAAa,kBAAkB,CAAC,IAAI,EAAE,SAAS,CAAE,SAAQ,MAAM;gBACjD,MAAM,EAAE,kBAAkB,EAAE,MAAM,EAAE,UAAU;CA2R3D"}