npm - payload-richtext-tiptap - Versions diffs - 0.0.41 → 0.0.42 - Mend

payload-richtext-tiptap 0.0.41 → 0.0.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/dist/src/fields/TiptapEditor/Components.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Components.d.ts","sourceRoot":"","sources":["../../../../src/fields/TiptapEditor/Components.tsx"],"names":[],"mappings":"~~AAmBA~~,OAAO,EAAE,eAAe,~~EAAe~~,MAAM,SAAS,CAAC;~~AAqCvD~~,eAAO,MAAM,eAAe,EAAE,~~eA2B7B~~,CAAC"}
1	+ {"version":3,"file":"Components.d.ts","sourceRoot":"","sources":["../../../../src/fields/TiptapEditor/Components.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,eAAe,EAA0B,MAAM,SAAS,CAAC;AAqClE,eAAO,MAAM,eAAe,EAAE,eA4B7B,CAAC"}

package/dist/src/fields/TiptapEditor/Components.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 // import 'cal-sans'
 // import '@fontsource/inter/100.css'
 // import '@fontsource/inter/200.css'
@@ -10,8 +10,7 @@ import React, { useCallback, useEffect, useState } from "react";
 // import '@fontsource/inter/600.css'
 // import '@fontsource/inter/700.css'
 // import { BlockEditor } from './features/BlockEditor'
-import { useField } from "@payloadcms/ui";
-import { useLocale } from "@payloadcms/ui";
+import { useField, useLocale } from "@payloadcms/ui";
 import { BlockEditor } from "./features/BlockEditor/BlockEditor.js";
 const useDarkmode = ()=>{
     const [isDarkMode, setIsDarkMode] = useState(typeof window !== "undefined" ? document.documentElement.getAttribute("data-theme") === "dark" : false);
@@ -55,6 +54,7 @@ export const EditorComponent = (props)=>{
         children: /*#__PURE__*/ _jsx(BlockEditor, {
             hasCollab: hasCollab,
             content: value,
+            openAssetHQHandler: (listener)=>{},
             handleChange: (value)=>{
                 setValue(value);
             }

package/dist/src/fields/TiptapEditor/Components.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/fields/TiptapEditor/Components.tsx"],"sourcesContent":["\"use client\";\nimport ~~React,~~ { useCallback, useEffect, useState } from \"react\";\n\n// import 'cal-sans'\n\n// import '@fontsource/inter/100.css'\n// import '@fontsource/inter/200.css'\n// import '@fontsource/inter/300.css'\n// import '@fontsource/inter/400.css'\n// import '@fontsource/inter/500.css'\n// import '@fontsource/inter/600.css'\n// import '@fontsource/inter/700.css'\n// import { BlockEditor } from './features/BlockEditor'\nimport { useField ~~} from \"@payloadcms/ui\";\nimport {~~ useLocale } from \"@payloadcms/ui\";\nimport { BlockEditor } from \"./features/BlockEditor/BlockEditor.js\";\n\n// import \"../../styles.css\";\nimport { ~~JSONField } from \"payload\";\nimport {~~ CustomComponent, ServerProps } from \"payload\";\n\ntype Props = JSONField & ServerProps;\n\nconst useDarkmode = () => {\n const [isDarkMode, setIsDarkMode] = useState<boolean>(\n typeof window !== \"undefined\"\n ? document.documentElement.getAttribute(\"data-theme\") === \"dark\"\n : false\n );\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const handleChange = () => setIsDarkMode(mediaQuery.matches);\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n useEffect(() => {\n document.documentElement.classList.toggle(\"dark\", isDarkMode);\n }, [isDarkMode]);\n\n const toggleDarkMode = useCallback(\n () => setIsDarkMode((isDark) => !isDark),\n []\n );\n const lightMode = useCallback(() => setIsDarkMode(false), []);\n const darkMode = useCallback(() => setIsDarkMode(true), []);\n\n return {\n isDarkMode,\n toggleDarkMode,\n lightMode,\n darkMode,\n };\n};\n\nexport const EditorComponent: CustomComponent = (props) => {\n const { value, setValue } = useField<any>({\n path: props.name,\n });\n\n useDarkmode();\n const hasCollab = false;\n // const { i18n } = useTranslation()\n\n const { code } = useLocale();\n return (\n <div\n lang={code}\n className=\"editor-tiptap content-field content-field-disabled\"\n style={{ width: \"100%\", height: \"100%\", overflow: \"visible\" }}\n >\n {/* {DarkModeSwitcher} /}\n {/ <FieldLabel label={props?.label ?? capitalize(props?.name) ?? ''} /> */}\n <BlockEditor\n hasCollab={hasCollab}\n content={value}\n handleChange={(value) => {\n setValue(value);\n }}\n />\n </div>\n );\n};\n"],"names":["~~React","~~useCallback","useEffect","useState","useField","useLocale","BlockEditor","useDarkmode","isDarkMode","setIsDarkMode","window","document","documentElement","getAttribute","mediaQuery","matchMedia","handleChange","matches","addEventListener","removeEventListener","classList","toggle","toggleDarkMode","isDark","lightMode","darkMode","EditorComponent","props","value","setValue","path","name","hasCollab","code","div","lang","className","style","width","height","overflow","content"],"mappings":"AAAA;;AACA,~~OAAOA~~,~~SAASC,~~WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;~~AAEhE~~,oBAAoB;AAEpB,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,uDAAuD;AACvD,SAASC,QAAQ,~~QAAQ~~,~~iBAAiB;AAC1C,SAASC,~~SAAS,QAAQ,iBAAiB;~~AAC3C~~,SAASC,WAAW,QAAQ,wCAAwC;~~AAQpE~~,MAAMC,cAAc;IAClB,MAAM,CAACC,YAAYC,cAAc,GAAGN,SAClC,OAAOO,WAAW,cACdC,SAASC,eAAe,CAACC,YAAY,CAAC,kBAAkB,SACxD;IAGNX,UAAU;QACR,MAAMY,aAAaJ,OAAOK,UAAU,CAAC;QACrC,MAAMC,eAAe,IAAMP,cAAcK,WAAWG,OAAO;QAC3DH,WAAWI,gBAAgB,CAAC,UAAUF;QACtC,OAAO,IAAMF,WAAWK,mBAAmB,CAAC,UAAUH;IACxD,GAAG,EAAE;IAELd,UAAU;QACRS,SAASC,eAAe,CAACQ,SAAS,CAACC,MAAM,CAAC,QAAQb;IACpD,GAAG;QAACA;KAAW;IAEf,MAAMc,iBAAiBrB,YACrB,IAAMQ,cAAc,CAACc,SAAW,CAACA,SACjC,EAAE;IAEJ,MAAMC,YAAYvB,YAAY,IAAMQ,cAAc,QAAQ,EAAE;IAC5D,MAAMgB,WAAWxB,YAAY,IAAMQ,cAAc,OAAO,EAAE;IAE1D,OAAO;QACLD;QACAc;QACAE;QACAC;IACF;AACF;AAEA,OAAO,MAAMC,kBAAmC,CAACC;IAC/C,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGzB,SAAc;QACxC0B,MAAMH,MAAMI,IAAI;IAClB;IAEAxB;IACA,MAAMyB,YAAY;IAClB,oCAAoC;IAEpC,MAAM,EAAEC,IAAI,EAAE,GAAG5B;IACjB,qBACE,KAAC6B;QACCC,MAAMF;QACNG,WAAU;QACVC,OAAO;YAAEC,OAAO;YAAQC,QAAQ;YAAQC,UAAU;QAAU;kBAI5D,cAAA,KAAClC;YACC0B,WAAWA;YACXS,SAASb;~~YACTZ~~,cAAc,CAACY;gBACbC,SAASD;YACX;;;AAIR,EAAE"}
1	+ {"version":3,"sources":["../../../../src/fields/TiptapEditor/Components.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n// import 'cal-sans'\n\n// import '@fontsource/inter/100.css'\n// import '@fontsource/inter/200.css'\n// import '@fontsource/inter/300.css'\n// import '@fontsource/inter/400.css'\n// import '@fontsource/inter/500.css'\n// import '@fontsource/inter/600.css'\n// import '@fontsource/inter/700.css'\n// import { BlockEditor } from './features/BlockEditor'\nimport { useField, useLocale } from \"@payloadcms/ui\";\nimport { BlockEditor } from \"./features/BlockEditor/BlockEditor.js\";\n\n// import \"../../styles.css\";\nimport { CustomComponent, JSONField, ServerProps } from \"payload\";\n\ntype Props = JSONField & ServerProps;\n\nconst useDarkmode = () => {\n const [isDarkMode, setIsDarkMode] = useState<boolean>(\n typeof window !== \"undefined\"\n ? document.documentElement.getAttribute(\"data-theme\") === \"dark\"\n : false\n );\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n const handleChange = () => setIsDarkMode(mediaQuery.matches);\n mediaQuery.addEventListener(\"change\", handleChange);\n return () => mediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n useEffect(() => {\n document.documentElement.classList.toggle(\"dark\", isDarkMode);\n }, [isDarkMode]);\n\n const toggleDarkMode = useCallback(\n () => setIsDarkMode((isDark) => !isDark),\n []\n );\n const lightMode = useCallback(() => setIsDarkMode(false), []);\n const darkMode = useCallback(() => setIsDarkMode(true), []);\n\n return {\n isDarkMode,\n toggleDarkMode,\n lightMode,\n darkMode,\n };\n};\n\nexport const EditorComponent: CustomComponent = (props) => {\n const { value, setValue } = useField<any>({\n path: props.name,\n });\n\n useDarkmode();\n const hasCollab = false;\n // const { i18n } = useTranslation()\n\n const { code } = useLocale();\n return (\n <div\n lang={code}\n className=\"editor-tiptap content-field content-field-disabled\"\n style={{ width: \"100%\", height: \"100%\", overflow: \"visible\" }}\n >\n {/* {DarkModeSwitcher} /}\n {/ <FieldLabel label={props?.label ?? capitalize(props?.name) ?? ''} /> */}\n <BlockEditor\n hasCollab={hasCollab}\n content={value}\n openAssetHQHandler={(listener) => {}}\n handleChange={(value) => {\n setValue(value);\n }}\n />\n </div>\n );\n};\n"],"names":["useCallback","useEffect","useState","useField","useLocale","BlockEditor","useDarkmode","isDarkMode","setIsDarkMode","window","document","documentElement","getAttribute","mediaQuery","matchMedia","handleChange","matches","addEventListener","removeEventListener","classList","toggle","toggleDarkMode","isDark","lightMode","darkMode","EditorComponent","props","value","setValue","path","name","hasCollab","code","div","lang","className","style","width","height","overflow","content","openAssetHQHandler","listener"],"mappings":"AAAA;;AACA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAEzD,oBAAoB;AAEpB,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,qCAAqC;AACrC,uDAAuD;AACvD,SAASC,QAAQ,EAAEC,SAAS,QAAQ,iBAAiB;AACrD,SAASC,WAAW,QAAQ,wCAAwC;AAOpE,MAAMC,cAAc;IAClB,MAAM,CAACC,YAAYC,cAAc,GAAGN,SAClC,OAAOO,WAAW,cACdC,SAASC,eAAe,CAACC,YAAY,CAAC,kBAAkB,SACxD;IAGNX,UAAU;QACR,MAAMY,aAAaJ,OAAOK,UAAU,CAAC;QACrC,MAAMC,eAAe,IAAMP,cAAcK,WAAWG,OAAO;QAC3DH,WAAWI,gBAAgB,CAAC,UAAUF;QACtC,OAAO,IAAMF,WAAWK,mBAAmB,CAAC,UAAUH;IACxD,GAAG,EAAE;IAELd,UAAU;QACRS,SAASC,eAAe,CAACQ,SAAS,CAACC,MAAM,CAAC,QAAQb;IACpD,GAAG;QAACA;KAAW;IAEf,MAAMc,iBAAiBrB,YACrB,IAAMQ,cAAc,CAACc,SAAW,CAACA,SACjC,EAAE;IAEJ,MAAMC,YAAYvB,YAAY,IAAMQ,cAAc,QAAQ,EAAE;IAC5D,MAAMgB,WAAWxB,YAAY,IAAMQ,cAAc,OAAO,EAAE;IAE1D,OAAO;QACLD;QACAc;QACAE;QACAC;IACF;AACF;AAEA,OAAO,MAAMC,kBAAmC,CAACC;IAC/C,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGzB,SAAc;QACxC0B,MAAMH,MAAMI,IAAI;IAClB;IAEAxB;IACA,MAAMyB,YAAY;IAClB,oCAAoC;IAEpC,MAAM,EAAEC,IAAI,EAAE,GAAG5B;IACjB,qBACE,KAAC6B;QACCC,MAAMF;QACNG,WAAU;QACVC,OAAO;YAAEC,OAAO;YAAQC,QAAQ;YAAQC,UAAU;QAAU;kBAI5D,cAAA,KAAClC;YACC0B,WAAWA;YACXS,SAASb;YACTc,oBAAoB,CAACC,YAAc;YACnC3B,cAAc,CAACY;gBACbC,SAASD;YACX;;;AAIR,EAAE"}

package/dist/src/fields/TiptapEditor/extensions/AICommand/AICommand.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { Extension } from "@tiptap/core";
+export declare const AICommand: Extension<any, any>;
+export default AICommand;
+//# sourceMappingURL=AICommand.d.ts.map

package/dist/src/fields/TiptapEditor/extensions/AICommand/AICommand.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"AICommand.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/AICommand/AICommand.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,SAAS,EAAE,MAAM,cAAc,CAAC;AAkBjD,eAAO,MAAM,SAAS,qBAoRpB,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/AICommand/AICommand.js ADDED Viewed

@@ -0,0 +1,208 @@
+"use client";
+import { Extension } from "@tiptap/core";
+import { ReactRenderer } from "@tiptap/react";
+import Suggestion from "@tiptap/suggestion";
+import { PluginKey } from "@tiptap/pm/state";
+import tippy from "tippy.js";
+import { GROUPS } from "./groups.js";
+import { AICommandPanel } from "../../features/panels/AICommandPanel/AICommandPanel.js";
+const extensionName = "aiCommand";
+let popup;
+export const AICommand = Extension.create({
+    name: extensionName,
+    priority: 200,
+    onCreate () {
+        const t = tippy;
+        popup = t("body", {
+            interactive: true,
+            trigger: "manual",
+            placement: "bottom-start",
+            theme: "slash-command",
+            // maxWidth: "16rem",
+            offset: [
+                16,
+                8
+            ],
+            popperOptions: {
+                strategy: "fixed",
+                modifiers: [
+                    {
+                        name: "flip",
+                        enabled: false
+                    }
+                ]
+            }
+        });
+    },
+    addProseMirrorPlugins () {
+        return [
+            Suggestion({
+                editor: this.editor,
+                char: " ",
+                allowSpaces: true,
+                startOfLine: true,
+                pluginKey: new PluginKey(extensionName),
+                allow: ({ state, range })=>{
+                    const $from = state.doc.resolve(range.from);
+                    const isRootDepth = $from.depth === 1;
+                    const isParagraph = $from.parent.type.name === "paragraph";
+                    const isStartOfNode = $from.parent.textContent?.charAt(0) === " ";
+                    // TODO
+                    const isInColumn = this.editor.isActive("column");
+                    const afterContent = $from.parent.textContent?.substring($from.parent.textContent?.indexOf("/"));
+                    const isValidAfterContent = !afterContent?.endsWith("  ");
+                    return (isRootDepth && isParagraph && isStartOfNode || isInColumn && isParagraph && isStartOfNode) && isValidAfterContent;
+                },
+                command: ({ editor, props })=>{
+                    const { view, state } = editor;
+                    const { $head, $from } = view.state.selection;
+                    const end = $from.pos;
+                    const from = $head?.nodeBefore ? end - ($head.nodeBefore.text?.substring($head.nodeBefore.text?.indexOf(" ")).length ?? 0) : $from.start();
+                    const tr = state.tr.deleteRange(from, end);
+                    view.dispatch(tr);
+                    props.action(editor);
+                    view.focus();
+                },
+                items: ({ query })=>{
+                    const withFilteredCommands = GROUPS.map((group)=>({
+                            ...group,
+                            commands: group.commands.filter((item)=>{
+                                const labelNormalized = item.label.toLowerCase().trim();
+                                const queryNormalized = query.toLowerCase().trim();
+                                if (item.aliases) {
+                                    const aliases = item.aliases.map((alias)=>alias.toLowerCase().trim());
+                                    return labelNormalized.includes(queryNormalized) || aliases.includes(queryNormalized);
+                                }
+                                return labelNormalized.includes(queryNormalized);
+                            }).filter((command)=>command.shouldBeHidden ? !command.shouldBeHidden(this.editor) : true)
+                        }));
+                    const withoutEmptyGroups = withFilteredCommands.filter((group)=>{
+                        if (group.commands.length > 0) {
+                            return true;
+                        }
+                        return false;
+                    });
+                    const withEnabledSettings = withoutEmptyGroups.map((group)=>({
+                            ...group,
+                            commands: group.commands.map((command)=>({
+                                    ...command,
+                                    isEnabled: true
+                                }))
+                        }));
+                    return withEnabledSettings;
+                },
+                render: ()=>{
+                    let component;
+                    let scrollHandler = null;
+                    return {
+                        onStart: (props)=>{
+                            component = new ReactRenderer(AICommandPanel, {
+                                props,
+                                editor: props.editor
+                            });
+                            const { view } = props.editor;
+                            const editorNode = view.dom;
+                            const getReferenceClientRect = ()=>{
+                                if (!props.clientRect) {
+                                    return props.editor.storage[extensionName].rect;
+                                }
+                                const rect = props.clientRect();
+                                if (!rect) {
+                                    return props.editor.storage[extensionName].rect;
+                                }
+                                let yPos = rect.y;
+                                if (rect.top + component.element.offsetHeight + 40 > window.innerHeight) {
+                                    const diff = rect.top + component.element.offsetHeight - window.innerHeight + 40;
+                                    yPos = rect.y - diff;
+                                }
+                                // Account for when the editor is bound inside a container that doesn't go all the way to the edge of the screen
+                                const editorXOffset = editorNode.getBoundingClientRect().x;
+                                const boundigClient = editorNode.getBoundingClientRect();
+                                return new DOMRect(rect.x, yPos, boundigClient.width, rect.height);
+                            };
+                            scrollHandler = ()=>{
+                                popup?.[0].setProps({
+                                    getReferenceClientRect
+                                });
+                            };
+                            view.dom.parentElement?.addEventListener("scroll", scrollHandler);
+                            popup?.[0].setProps({
+                                getReferenceClientRect,
+                                appendTo: ()=>document.body,
+                                content: component.element
+                            });
+                            popup?.[0].show();
+                        },
+                        onUpdate (props) {
+                            component.updateProps(props);
+                            const { view } = props.editor;
+                            const editorNode = view.dom;
+                            const getReferenceClientRect = ()=>{
+                                if (!props.clientRect) {
+                                    return props.editor.storage[extensionName].rect;
+                                }
+                                const rect = props.clientRect();
+                                if (!rect) {
+                                    return props.editor.storage[extensionName].rect;
+                                }
+                                // Account for when the editor is bound inside a container that doesn't go all the way to the edge of the screen
+                                return new DOMRect(rect.x, rect.y, rect.width, rect.height);
+                            };
+                            let scrollHandler = ()=>{
+                                popup?.[0].setProps({
+                                    getReferenceClientRect
+                                });
+                            };
+                            view.dom.parentElement?.addEventListener("scroll", scrollHandler);
+                            // eslint-disable-next-line no-param-reassign
+                            props.editor.storage[extensionName].rect = props.clientRect ? getReferenceClientRect() : {
+                                width: 0,
+                                height: 0,
+                                left: 0,
+                                top: 0,
+                                right: 0,
+                                bottom: 0
+                            };
+                            popup?.[0].setProps({
+                                getReferenceClientRect
+                            });
+                        },
+                        onKeyDown (props) {
+                            if (props.event.key === "Escape") {
+                                popup?.[0].hide();
+                                return true;
+                            }
+                            if (!popup?.[0].state.isShown) {
+                                popup?.[0].show();
+                            }
+                            return component.ref?.onKeyDown(props);
+                        },
+                        onExit (props) {
+                            popup?.[0].hide();
+                            if (scrollHandler) {
+                                const { view } = props.editor;
+                                view.dom.parentElement?.removeEventListener("scroll", scrollHandler);
+                            }
+                            component.destroy();
+                        }
+                    };
+                }
+            })
+        ];
+    },
+    addStorage () {
+        return {
+            rect: {
+                width: 0,
+                height: 0,
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0
+            }
+        };
+    }
+});
+export default AICommand;
+//# sourceMappingURL=AICommand.js.map

package/dist/src/fields/TiptapEditor/extensions/AICommand/AICommand.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/AICommand/AICommand.ts"],"sourcesContent":["\"use client\";\nimport { Editor, Extension } from \"@tiptap/core\";\nimport { ReactRenderer } from \"@tiptap/react\";\nimport Suggestion, {\n SuggestionProps,\n SuggestionKeyDownProps,\n} from \"@tiptap/suggestion\";\nimport { PluginKey } from \"@tiptap/pm/state\";\nimport tippy from \"tippy.js\";\n\nimport { GROUPS } from \"./groups.js\";\nimport { AIMenuList } from \"./AIMenuList.js\";\nimport { AIEditorPanel } from \"../../features/panels/AIEditorPanel/AIEditorPanel.js\";\nimport { AICommandPanel } from \"../../features/panels/AICommandPanel/AICommandPanel.js\";\n\nconst extensionName = \"aiCommand\";\n\nlet popup: any;\n\nexport const AICommand = Extension.create({\n name: extensionName,\n\n priority: 200,\n\n onCreate() {\n const t = tippy as any;\n popup = t(\"body\", {\n interactive: true,\n trigger: \"manual\",\n placement: \"bottom-start\",\n theme: \"slash-command\",\n // maxWidth: \"16rem\",\n offset: [16, 8],\n popperOptions: {\n strategy: \"fixed\",\n modifiers: [\n {\n name: \"flip\",\n enabled: false,\n },\n ],\n },\n });\n },\n\n addProseMirrorPlugins() {\n return [\n Suggestion({\n editor: this.editor,\n char: \" \",\n allowSpaces: true,\n startOfLine: true,\n pluginKey: new PluginKey(extensionName),\n allow: ({ state, range }) => {\n const $from = state.doc.resolve(range.from);\n const isRootDepth = $from.depth === 1;\n const isParagraph = $from.parent.type.name === \"paragraph\";\n const isStartOfNode = $from.parent.textContent?.charAt(0) === \" \";\n // TODO\n const isInColumn = this.editor.isActive(\"column\");\n\n const afterContent = $from.parent.textContent?.substring(\n $from.parent.textContent?.indexOf(\"/\")\n );\n const isValidAfterContent = !afterContent?.endsWith(\" \");\n\n return (\n ((isRootDepth && isParagraph && isStartOfNode) ||\n (isInColumn && isParagraph && isStartOfNode)) &&\n isValidAfterContent\n );\n },\n command: ({ editor, props }: { editor: Editor; props: any }) => {\n const { view, state } = editor;\n const { $head, $from } = view.state.selection;\n\n const end = $from.pos;\n const from = $head?.nodeBefore\n ? end -\n ($head.nodeBefore.text?.substring(\n $head.nodeBefore.text?.indexOf(\" \")\n ).length ?? 0)\n : $from.start();\n\n const tr = state.tr.deleteRange(from, end);\n view.dispatch(tr);\n\n props.action(editor);\n view.focus();\n },\n items: ({ query }: { query: string }) => {\n const withFilteredCommands = GROUPS.map((group) => ({\n ...group,\n commands: group.commands\n .filter((item) => {\n const labelNormalized = item.label.toLowerCase().trim();\n const queryNormalized = query.toLowerCase().trim();\n\n if (item.aliases) {\n const aliases = item.aliases.map((alias) =>\n alias.toLowerCase().trim()\n );\n\n return (\n labelNormalized.includes(queryNormalized) ||\n aliases.includes(queryNormalized)\n );\n }\n\n return labelNormalized.includes(queryNormalized);\n })\n .filter((command) =>\n command.shouldBeHidden\n ? !command.shouldBeHidden(this.editor)\n : true\n ),\n }));\n\n const withoutEmptyGroups = withFilteredCommands.filter((group) => {\n if (group.commands.length > 0) {\n return true;\n }\n\n return false;\n });\n\n const withEnabledSettings = withoutEmptyGroups.map((group) => ({\n ...group,\n commands: group.commands.map((command) => ({\n ...command,\n isEnabled: true,\n })),\n }));\n\n return withEnabledSettings;\n },\n render: () => {\n let component: any;\n\n let scrollHandler: (() => void) | null = null;\n\n return {\n onStart: (props: SuggestionProps) => {\n component = new ReactRenderer(AICommandPanel, {\n props,\n editor: props.editor,\n });\n\n const { view } = props.editor;\n\n const editorNode = view.dom as HTMLElement;\n\n const getReferenceClientRect = () => {\n if (!props.clientRect) {\n return props.editor.storage[extensionName].rect;\n }\n\n const rect = props.clientRect();\n\n if (!rect) {\n return props.editor.storage[extensionName].rect;\n }\n\n let yPos = rect.y;\n\n if (\n rect.top + component.element.offsetHeight + 40 >\n window.innerHeight\n ) {\n const diff =\n rect.top +\n component.element.offsetHeight -\n window.innerHeight +\n 40;\n yPos = rect.y - diff;\n }\n\n // Account for when the editor is bound inside a container that doesn't go all the way to the edge of the screen\n const editorXOffset = editorNode.getBoundingClientRect().x;\n const boundigClient = editorNode.getBoundingClientRect();\n\n return new DOMRect(\n rect.x,\n yPos,\n boundigClient.width,\n rect.height\n );\n };\n\n scrollHandler = () => {\n popup?.[0].setProps({\n getReferenceClientRect,\n });\n };\n\n view.dom.parentElement?.addEventListener(\"scroll\", scrollHandler);\n\n popup?.[0].setProps({\n getReferenceClientRect,\n appendTo: () => document.body,\n content: component.element,\n });\n\n popup?.[0].show();\n },\n\n onUpdate(props: SuggestionProps) {\n component.updateProps(props);\n\n const { view } = props.editor;\n\n const editorNode = view.dom as HTMLElement;\n\n const getReferenceClientRect = () => {\n if (!props.clientRect) {\n return props.editor.storage[extensionName].rect;\n }\n\n const rect = props.clientRect();\n\n if (!rect) {\n return props.editor.storage[extensionName].rect;\n }\n\n // Account for when the editor is bound inside a container that doesn't go all the way to the edge of the screen\n return new DOMRect(rect.x, rect.y, rect.width, rect.height);\n };\n\n let scrollHandler = () => {\n popup?.[0].setProps({\n getReferenceClientRect,\n });\n };\n\n view.dom.parentElement?.addEventListener(\"scroll\", scrollHandler);\n\n // eslint-disable-next-line no-param-reassign\n props.editor.storage[extensionName].rect = props.clientRect\n ? getReferenceClientRect()\n : {\n width: 0,\n height: 0,\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n };\n popup?.[0].setProps({\n getReferenceClientRect,\n });\n },\n\n onKeyDown(props: SuggestionKeyDownProps) {\n if (props.event.key === \"Escape\") {\n popup?.[0].hide();\n\n return true;\n }\n\n if (!popup?.[0].state.isShown) {\n popup?.[0].show();\n }\n\n return component.ref?.onKeyDown(props);\n },\n\n onExit(props) {\n popup?.[0].hide();\n if (scrollHandler) {\n const { view } = props.editor;\n view.dom.parentElement?.removeEventListener(\n \"scroll\",\n scrollHandler\n );\n }\n component.destroy();\n },\n };\n },\n }),\n ];\n },\n\n addStorage() {\n return {\n rect: {\n width: 0,\n height: 0,\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n },\n };\n },\n});\n\nexport default AICommand;\n"],"names":["Extension","ReactRenderer","Suggestion","PluginKey","tippy","GROUPS","AICommandPanel","extensionName","popup","AICommand","create","name","priority","onCreate","t","interactive","trigger","placement","theme","offset","popperOptions","strategy","modifiers","enabled","addProseMirrorPlugins","editor","char","allowSpaces","startOfLine","pluginKey","allow","state","range","$from","doc","resolve","from","isRootDepth","depth","isParagraph","parent","type","isStartOfNode","textContent","charAt","isInColumn","isActive","afterContent","substring","indexOf","isValidAfterContent","endsWith","command","props","view","$head","selection","end","pos","nodeBefore","text","length","start","tr","deleteRange","dispatch","action","focus","items","query","withFilteredCommands","map","group","commands","filter","item","labelNormalized","label","toLowerCase","trim","queryNormalized","aliases","alias","includes","shouldBeHidden","withoutEmptyGroups","withEnabledSettings","isEnabled","render","component","scrollHandler","onStart","editorNode","dom","getReferenceClientRect","clientRect","storage","rect","yPos","y","top","element","offsetHeight","window","innerHeight","diff","editorXOffset","getBoundingClientRect","x","boundigClient","DOMRect","width","height","setProps","parentElement","addEventListener","appendTo","document","body","content","show","onUpdate","updateProps","left","right","bottom","onKeyDown","event","key","hide","isShown","ref","onExit","removeEventListener","destroy","addStorage"],"mappings":"AAAA;AACA,SAAiBA,SAAS,QAAQ,eAAe;AACjD,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,OAAOC,gBAGA,qBAAqB;AAC5B,SAASC,SAAS,QAAQ,mBAAmB;AAC7C,OAAOC,WAAW,WAAW;AAE7B,SAASC,MAAM,QAAQ,cAAc;AAGrC,SAASC,cAAc,QAAQ,yDAAyD;AAExF,MAAMC,gBAAgB;AAEtB,IAAIC;AAEJ,OAAO,MAAMC,YAAYT,UAAUU,MAAM,CAAC;IACxCC,MAAMJ;IAENK,UAAU;IAEVC;QACE,MAAMC,IAAIV;QACVI,QAAQM,EAAE,QAAQ;YAChBC,aAAa;YACbC,SAAS;YACTC,WAAW;YACXC,OAAO;YACP,qBAAqB;YACrBC,QAAQ;gBAAC;gBAAI;aAAE;YACfC,eAAe;gBACbC,UAAU;gBACVC,WAAW;oBACT;wBACEX,MAAM;wBACNY,SAAS;oBACX;iBACD;YACH;QACF;IACF;IAEAC;QACE,OAAO;YACLtB,WAAW;gBACTuB,QAAQ,IAAI,CAACA,MAAM;gBACnBC,MAAM;gBACNC,aAAa;gBACbC,aAAa;gBACbC,WAAW,IAAI1B,UAAUI;gBACzBuB,OAAO,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE;oBACtB,MAAMC,QAAQF,MAAMG,GAAG,CAACC,OAAO,CAACH,MAAMI,IAAI;oBAC1C,MAAMC,cAAcJ,MAAMK,KAAK,KAAK;oBACpC,MAAMC,cAAcN,MAAMO,MAAM,CAACC,IAAI,CAAC9B,IAAI,KAAK;oBAC/C,MAAM+B,gBAAgBT,MAAMO,MAAM,CAACG,WAAW,EAAEC,OAAO,OAAO;oBAC9D,OAAO;oBACP,MAAMC,aAAa,IAAI,CAACpB,MAAM,CAACqB,QAAQ,CAAC;oBAExC,MAAMC,eAAed,MAAMO,MAAM,CAACG,WAAW,EAAEK,UAC7Cf,MAAMO,MAAM,CAACG,WAAW,EAAEM,QAAQ;oBAEpC,MAAMC,sBAAsB,CAACH,cAAcI,SAAS;oBAEpD,OACE,AAAC,CAAA,AAACd,eAAeE,eAAeG,iBAC7BG,cAAcN,eAAeG,aAAa,KAC7CQ;gBAEJ;gBACAE,SAAS,CAAC,EAAE3B,MAAM,EAAE4B,KAAK,EAAkC;oBACzD,MAAM,EAAEC,IAAI,EAAEvB,KAAK,EAAE,GAAGN;oBACxB,MAAM,EAAE8B,KAAK,EAAEtB,KAAK,EAAE,GAAGqB,KAAKvB,KAAK,CAACyB,SAAS;oBAE7C,MAAMC,MAAMxB,MAAMyB,GAAG;oBACrB,MAAMtB,OAAOmB,OAAOI,aAChBF,MACCF,CAAAA,MAAMI,UAAU,CAACC,IAAI,EAAEZ,UACtBO,MAAMI,UAAU,CAACC,IAAI,EAAEX,QAAQ,MAC/BY,UAAU,CAAA,IACZ5B,MAAM6B,KAAK;oBAEf,MAAMC,KAAKhC,MAAMgC,EAAE,CAACC,WAAW,CAAC5B,MAAMqB;oBACtCH,KAAKW,QAAQ,CAACF;oBAEdV,MAAMa,MAAM,CAACzC;oBACb6B,KAAKa,KAAK;gBACZ;gBACAC,OAAO,CAAC,EAAEC,KAAK,EAAqB;oBAClC,MAAMC,uBAAuBjE,OAAOkE,GAAG,CAAC,CAACC,QAAW,CAAA;4BAClD,GAAGA,KAAK;4BACRC,UAAUD,MAAMC,QAAQ,CACrBC,MAAM,CAAC,CAACC;gCACP,MAAMC,kBAAkBD,KAAKE,KAAK,CAACC,WAAW,GAAGC,IAAI;gCACrD,MAAMC,kBAAkBX,MAAMS,WAAW,GAAGC,IAAI;gCAEhD,IAAIJ,KAAKM,OAAO,EAAE;oCAChB,MAAMA,UAAUN,KAAKM,OAAO,CAACV,GAAG,CAAC,CAACW,QAChCA,MAAMJ,WAAW,GAAGC,IAAI;oCAG1B,OACEH,gBAAgBO,QAAQ,CAACH,oBACzBC,QAAQE,QAAQ,CAACH;gCAErB;gCAEA,OAAOJ,gBAAgBO,QAAQ,CAACH;4BAClC,GACCN,MAAM,CAAC,CAACtB,UACPA,QAAQgC,cAAc,GAClB,CAAChC,QAAQgC,cAAc,CAAC,IAAI,CAAC3D,MAAM,IACnC;wBAEV,CAAA;oBAEA,MAAM4D,qBAAqBf,qBAAqBI,MAAM,CAAC,CAACF;wBACtD,IAAIA,MAAMC,QAAQ,CAACZ,MAAM,GAAG,GAAG;4BAC7B,OAAO;wBACT;wBAEA,OAAO;oBACT;oBAEA,MAAMyB,sBAAsBD,mBAAmBd,GAAG,CAAC,CAACC,QAAW,CAAA;4BAC7D,GAAGA,KAAK;4BACRC,UAAUD,MAAMC,QAAQ,CAACF,GAAG,CAAC,CAACnB,UAAa,CAAA;oCACzC,GAAGA,OAAO;oCACVmC,WAAW;gCACb,CAAA;wBACF,CAAA;oBAEA,OAAOD;gBACT;gBACAE,QAAQ;oBACN,IAAIC;oBAEJ,IAAIC,gBAAqC;oBAEzC,OAAO;wBACLC,SAAS,CAACtC;4BACRoC,YAAY,IAAIxF,cAAcK,gBAAgB;gCAC5C+C;gCACA5B,QAAQ4B,MAAM5B,MAAM;4BACtB;4BAEA,MAAM,EAAE6B,IAAI,EAAE,GAAGD,MAAM5B,MAAM;4BAE7B,MAAMmE,aAAatC,KAAKuC,GAAG;4BAE3B,MAAMC,yBAAyB;gCAC7B,IAAI,CAACzC,MAAM0C,UAAU,EAAE;oCACrB,OAAO1C,MAAM5B,MAAM,CAACuE,OAAO,CAACzF,cAAc,CAAC0F,IAAI;gCACjD;gCAEA,MAAMA,OAAO5C,MAAM0C,UAAU;gCAE7B,IAAI,CAACE,MAAM;oCACT,OAAO5C,MAAM5B,MAAM,CAACuE,OAAO,CAACzF,cAAc,CAAC0F,IAAI;gCACjD;gCAEA,IAAIC,OAAOD,KAAKE,CAAC;gCAEjB,IACEF,KAAKG,GAAG,GAAGX,UAAUY,OAAO,CAACC,YAAY,GAAG,KAC5CC,OAAOC,WAAW,EAClB;oCACA,MAAMC,OACJR,KAAKG,GAAG,GACRX,UAAUY,OAAO,CAACC,YAAY,GAC9BC,OAAOC,WAAW,GAClB;oCACFN,OAAOD,KAAKE,CAAC,GAAGM;gCAClB;gCAEA,gHAAgH;gCAChH,MAAMC,gBAAgBd,WAAWe,qBAAqB,GAAGC,CAAC;gCAC1D,MAAMC,gBAAgBjB,WAAWe,qBAAqB;gCAEtD,OAAO,IAAIG,QACTb,KAAKW,CAAC,EACNV,MACAW,cAAcE,KAAK,EACnBd,KAAKe,MAAM;4BAEf;4BAEAtB,gBAAgB;gCACdlF,OAAO,CAAC,EAAE,CAACyG,SAAS;oCAClBnB;gCACF;4BACF;4BAEAxC,KAAKuC,GAAG,CAACqB,aAAa,EAAEC,iBAAiB,UAAUzB;4BAEnDlF,OAAO,CAAC,EAAE,CAACyG,SAAS;gCAClBnB;gCACAsB,UAAU,IAAMC,SAASC,IAAI;gCAC7BC,SAAS9B,UAAUY,OAAO;4BAC5B;4BAEA7F,OAAO,CAAC,EAAE,CAACgH;wBACb;wBAEAC,UAASpE,KAAsB;4BAC7BoC,UAAUiC,WAAW,CAACrE;4BAEtB,MAAM,EAAEC,IAAI,EAAE,GAAGD,MAAM5B,MAAM;4BAE7B,MAAMmE,aAAatC,KAAKuC,GAAG;4BAE3B,MAAMC,yBAAyB;gCAC7B,IAAI,CAACzC,MAAM0C,UAAU,EAAE;oCACrB,OAAO1C,MAAM5B,MAAM,CAACuE,OAAO,CAACzF,cAAc,CAAC0F,IAAI;gCACjD;gCAEA,MAAMA,OAAO5C,MAAM0C,UAAU;gCAE7B,IAAI,CAACE,MAAM;oCACT,OAAO5C,MAAM5B,MAAM,CAACuE,OAAO,CAACzF,cAAc,CAAC0F,IAAI;gCACjD;gCAEA,gHAAgH;gCAChH,OAAO,IAAIa,QAAQb,KAAKW,CAAC,EAAEX,KAAKE,CAAC,EAAEF,KAAKc,KAAK,EAAEd,KAAKe,MAAM;4BAC5D;4BAEA,IAAItB,gBAAgB;gCAClBlF,OAAO,CAAC,EAAE,CAACyG,SAAS;oCAClBnB;gCACF;4BACF;4BAEAxC,KAAKuC,GAAG,CAACqB,aAAa,EAAEC,iBAAiB,UAAUzB;4BAEnD,6CAA6C;4BAC7CrC,MAAM5B,MAAM,CAACuE,OAAO,CAACzF,cAAc,CAAC0F,IAAI,GAAG5C,MAAM0C,UAAU,GACvDD,2BACA;gCACEiB,OAAO;gCACPC,QAAQ;gCACRW,MAAM;gCACNvB,KAAK;gCACLwB,OAAO;gCACPC,QAAQ;4BACV;4BACJrH,OAAO,CAAC,EAAE,CAACyG,SAAS;gCAClBnB;4BACF;wBACF;wBAEAgC,WAAUzE,KAA6B;4BACrC,IAAIA,MAAM0E,KAAK,CAACC,GAAG,KAAK,UAAU;gCAChCxH,OAAO,CAAC,EAAE,CAACyH;gCAEX,OAAO;4BACT;4BAEA,IAAI,CAACzH,OAAO,CAAC,EAAE,CAACuB,MAAMmG,SAAS;gCAC7B1H,OAAO,CAAC,EAAE,CAACgH;4BACb;4BAEA,OAAO/B,UAAU0C,GAAG,EAAEL,UAAUzE;wBAClC;wBAEA+E,QAAO/E,KAAK;4BACV7C,OAAO,CAAC,EAAE,CAACyH;4BACX,IAAIvC,eAAe;gCACjB,MAAM,EAAEpC,IAAI,EAAE,GAAGD,MAAM5B,MAAM;gCAC7B6B,KAAKuC,GAAG,CAACqB,aAAa,EAAEmB,oBACtB,UACA3C;4BAEJ;4BACAD,UAAU6C,OAAO;wBACnB;oBACF;gBACF;YACF;SACD;IACH;IAEAC;QACE,OAAO;YACLtC,MAAM;gBACJc,OAAO;gBACPC,QAAQ;gBACRW,MAAM;gBACNvB,KAAK;gBACLwB,OAAO;gBACPC,QAAQ;YACV;QACF;IACF;AACF,GAAG;AAEH,eAAepH,UAAU"}

package/dist/src/fields/TiptapEditor/extensions/AICommand/AIMenuList.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import React from "react";
+import { AIMenuListProps } from "./types.js";
+export declare const AIMenuList: React.ForwardRefExoticComponent<AIMenuListProps & React.RefAttributes<unknown>>;
+export default AIMenuList;
+//# sourceMappingURL=AIMenuList.d.ts.map

package/dist/src/fields/TiptapEditor/extensions/AICommand/AIMenuList.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"AIMenuList.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/AICommand/AIMenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAW,eAAe,EAAE,MAAM,YAAY,CAAC;AAItD,eAAO,MAAM,UAAU,iFAiJrB,CAAC;AAIH,eAAe,UAAU,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/AICommand/AIMenuList.js ADDED Viewed

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { DropdownButton } from "../../features/ui/Dropdown/Dropdown.js";
+import { Surface } from "../../features/ui/Surface.js";
+import { Icon } from "../../features/ui/Icon.js";
+export const AIMenuList = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const scrollContainer = useRef(null);
+    const activeItem = useRef(null);
+    const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);
+    const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
+    // Anytime the groups change, i.e. the user types to narrow it down, we want to
+    // reset the current selection to the first menu item
+    useEffect(()=>{
+        setSelectedGroupIndex(0);
+        setSelectedCommandIndex(0);
+    }, [
+        props.items
+    ]);
+    const selectItem = useCallback((groupIndex, commandIndex)=>{
+        const command = props.items[groupIndex].commands[commandIndex];
+        props.command(command);
+    }, [
+        props
+    ]);
+    React.useImperativeHandle(ref, ()=>({
+            onKeyDown: ({ event })=>{
+                if (event.key === "ArrowDown") {
+                    if (!props.items.length) {
+                        return false;
+                    }
+                    const commands = props.items[selectedGroupIndex].commands;
+                    let newCommandIndex = selectedCommandIndex + 1;
+                    let newGroupIndex = selectedGroupIndex;
+                    if (commands.length - 1 < newCommandIndex) {
+                        newCommandIndex = 0;
+                        newGroupIndex = selectedGroupIndex + 1;
+                    }
+                    if (props.items.length - 1 < newGroupIndex) {
+                        newGroupIndex = 0;
+                    }
+                    setSelectedCommandIndex(newCommandIndex);
+                    setSelectedGroupIndex(newGroupIndex);
+                    return true;
+                }
+                if (event.key === "ArrowUp") {
+                    if (!props.items.length) {
+                        return false;
+                    }
+                    let newCommandIndex = selectedCommandIndex - 1;
+                    let newGroupIndex = selectedGroupIndex;
+                    if (newCommandIndex < 0) {
+                        newGroupIndex = selectedGroupIndex - 1;
+                        newCommandIndex = props.items[newGroupIndex]?.commands.length - 1 || 0;
+                    }
+                    if (newGroupIndex < 0) {
+                        newGroupIndex = props.items.length - 1;
+                        newCommandIndex = props.items[newGroupIndex].commands.length - 1;
+                    }
+                    setSelectedCommandIndex(newCommandIndex);
+                    setSelectedGroupIndex(newGroupIndex);
+                    return true;
+                }
+                if (event.key === "Enter") {
+                    if (!props.items.length || selectedGroupIndex === -1 || selectedCommandIndex === -1) {
+                        return false;
+                    }
+                    selectItem(selectedGroupIndex, selectedCommandIndex);
+                    return true;
+                }
+                return false;
+            }
+        }));
+    useEffect(()=>{
+        if (activeItem.current && scrollContainer.current) {
+            const offsetTop = activeItem.current.offsetTop;
+            const offsetHeight = activeItem.current.offsetHeight;
+            scrollContainer.current.scrollTop = offsetTop - offsetHeight;
+        }
+    }, [
+        selectedCommandIndex,
+        selectedGroupIndex
+    ]);
+    const createCommandClickHandler = useCallback((groupIndex, commandIndex)=>{
+        return ()=>{
+            selectItem(groupIndex, commandIndex);
+        };
+    }, [
+        selectItem
+    ]);
+    if (!props.items.length) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(Surface, {
+        ref: scrollContainer,
+        className: "text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2",
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "grid grid-cols-1 gap-0.5",
+            children: props.items.map((group, groupIndex)=>/*#__PURE__*/ _jsxs(React.Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5",
+                            children: group.title
+                        }, `${group.title}`),
+                        group.commands.map((command, commandIndex)=>/*#__PURE__*/ _jsxs(DropdownButton, {
+                                isActive: selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex,
+                                onClick: createCommandClickHandler(groupIndex, commandIndex),
+                                children: [
+                                    /*#__PURE__*/ _jsx(Icon, {
+                                        icon: command.icon,
+                                        className: "mr-1"
+                                    }),
+                                    command.label
+                                ]
+                            }, `${command.label}`))
+                    ]
+                }, `${group.title}-wrapper`))
+        })
+    });
+});
+AIMenuList.displayName = "AIMenuList";
+export default AIMenuList;
+//# sourceMappingURL=AIMenuList.js.map

package/dist/src/fields/TiptapEditor/extensions/AICommand/AIMenuList.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/AICommand/AIMenuList.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { DropdownButton } from \"../../features/ui/Dropdown/Dropdown.js\";\nimport { Surface } from \"../../features/ui/Surface.js\";\nimport { Command, AIMenuListProps } from \"./types.js\";\n\nimport { Icon } from \"../../features/ui/Icon.js\";\n\nexport const AIMenuList = React.forwardRef((props: AIMenuListProps, ref) => {\n const scrollContainer = useRef<HTMLDivElement>(null);\n const activeItem = useRef<HTMLButtonElement>(null);\n const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);\n const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);\n\n // Anytime the groups change, i.e. the user types to narrow it down, we want to\n // reset the current selection to the first menu item\n useEffect(() => {\n setSelectedGroupIndex(0);\n setSelectedCommandIndex(0);\n }, [props.items]);\n\n const selectItem = useCallback(\n (groupIndex: number, commandIndex: number) => {\n const command = props.items[groupIndex].commands[commandIndex];\n props.command(command);\n },\n [props]\n );\n\n React.useImperativeHandle(ref, () => ({\n onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {\n if (event.key === \"ArrowDown\") {\n if (!props.items.length) {\n return false;\n }\n\n const commands = props.items[selectedGroupIndex].commands;\n\n let newCommandIndex = selectedCommandIndex + 1;\n let newGroupIndex = selectedGroupIndex;\n\n if (commands.length - 1 < newCommandIndex) {\n newCommandIndex = 0;\n newGroupIndex = selectedGroupIndex + 1;\n }\n\n if (props.items.length - 1 < newGroupIndex) {\n newGroupIndex = 0;\n }\n\n setSelectedCommandIndex(newCommandIndex);\n setSelectedGroupIndex(newGroupIndex);\n\n return true;\n }\n\n if (event.key === \"ArrowUp\") {\n if (!props.items.length) {\n return false;\n }\n\n let newCommandIndex = selectedCommandIndex - 1;\n let newGroupIndex = selectedGroupIndex;\n\n if (newCommandIndex < 0) {\n newGroupIndex = selectedGroupIndex - 1;\n newCommandIndex =\n props.items[newGroupIndex]?.commands.length - 1 || 0;\n }\n\n if (newGroupIndex < 0) {\n newGroupIndex = props.items.length - 1;\n newCommandIndex = props.items[newGroupIndex].commands.length - 1;\n }\n\n setSelectedCommandIndex(newCommandIndex);\n setSelectedGroupIndex(newGroupIndex);\n\n return true;\n }\n\n if (event.key === \"Enter\") {\n if (\n !props.items.length ||\n selectedGroupIndex === -1 ||\n selectedCommandIndex === -1\n ) {\n return false;\n }\n\n selectItem(selectedGroupIndex, selectedCommandIndex);\n\n return true;\n }\n\n return false;\n },\n }));\n\n useEffect(() => {\n if (activeItem.current && scrollContainer.current) {\n const offsetTop = activeItem.current.offsetTop;\n const offsetHeight = activeItem.current.offsetHeight;\n\n scrollContainer.current.scrollTop = offsetTop - offsetHeight;\n }\n }, [selectedCommandIndex, selectedGroupIndex]);\n\n const createCommandClickHandler = useCallback(\n (groupIndex: number, commandIndex: number) => {\n return () => {\n selectItem(groupIndex, commandIndex);\n };\n },\n [selectItem]\n );\n\n if (!props.items.length) {\n return null;\n }\n\n return (\n <Surface\n ref={scrollContainer}\n className=\"text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2\"\n >\n <div className=\"grid grid-cols-1 gap-0.5\">\n {props.items.map((group, groupIndex: number) => (\n <React.Fragment key={`${group.title}-wrapper`}>\n <div\n className=\"text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5\"\n key={`${group.title}`}\n >\n {group.title}\n </div>\n {group.commands.map((command: Command, commandIndex: number) => (\n <DropdownButton\n key={`${command.label}`}\n isActive={\n selectedGroupIndex === groupIndex &&\n selectedCommandIndex === commandIndex\n }\n onClick={createCommandClickHandler(groupIndex, commandIndex)}\n >\n <Icon icon={command.icon} className=\"mr-1\" />\n {command.label}\n </DropdownButton>\n ))}\n </React.Fragment>\n ))}\n </div>\n </Surface>\n );\n});\n\nAIMenuList.displayName = \"AIMenuList\";\n\nexport default AIMenuList;\n"],"names":["React","useCallback","useEffect","useRef","useState","DropdownButton","Surface","Icon","AIMenuList","forwardRef","props","ref","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","items","selectItem","groupIndex","commandIndex","command","commands","useImperativeHandle","onKeyDown","event","key","length","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","className","div","map","group","Fragment","title","isActive","onClick","icon","label","displayName"],"mappings":";AAAA,OAAOA,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAExE,SAASC,cAAc,QAAQ,yCAAyC;AACxE,SAASC,OAAO,QAAQ,+BAA+B;AAGvD,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,OAAO,MAAMC,2BAAaR,MAAMS,UAAU,CAAC,CAACC,OAAwBC;IAClE,MAAMC,kBAAkBT,OAAuB;IAC/C,MAAMU,aAAaV,OAA0B;IAC7C,MAAM,CAACW,oBAAoBC,sBAAsB,GAAGX,SAAS;IAC7D,MAAM,CAACY,sBAAsBC,wBAAwB,GAAGb,SAAS;IAEjE,+EAA+E;IAC/E,qDAAqD;IACrDF,UAAU;QACRa,sBAAsB;QACtBE,wBAAwB;IAC1B,GAAG;QAACP,MAAMQ,KAAK;KAAC;IAEhB,MAAMC,aAAalB,YACjB,CAACmB,YAAoBC;QACnB,MAAMC,UAAUZ,MAAMQ,KAAK,CAACE,WAAW,CAACG,QAAQ,CAACF,aAAa;QAC9DX,MAAMY,OAAO,CAACA;IAChB,GACA;QAACZ;KAAM;IAGTV,MAAMwB,mBAAmB,CAACb,KAAK,IAAO,CAAA;YACpCc,WAAW,CAAC,EAAEC,KAAK,EAAkC;gBACnD,IAAIA,MAAMC,GAAG,KAAK,aAAa;oBAC7B,IAAI,CAACjB,MAAMQ,KAAK,CAACU,MAAM,EAAE;wBACvB,OAAO;oBACT;oBAEA,MAAML,WAAWb,MAAMQ,KAAK,CAACJ,mBAAmB,CAACS,QAAQ;oBAEzD,IAAIM,kBAAkBb,uBAAuB;oBAC7C,IAAIc,gBAAgBhB;oBAEpB,IAAIS,SAASK,MAAM,GAAG,IAAIC,iBAAiB;wBACzCA,kBAAkB;wBAClBC,gBAAgBhB,qBAAqB;oBACvC;oBAEA,IAAIJ,MAAMQ,KAAK,CAACU,MAAM,GAAG,IAAIE,eAAe;wBAC1CA,gBAAgB;oBAClB;oBAEAb,wBAAwBY;oBACxBd,sBAAsBe;oBAEtB,OAAO;gBACT;gBAEA,IAAIJ,MAAMC,GAAG,KAAK,WAAW;oBAC3B,IAAI,CAACjB,MAAMQ,KAAK,CAACU,MAAM,EAAE;wBACvB,OAAO;oBACT;oBAEA,IAAIC,kBAAkBb,uBAAuB;oBAC7C,IAAIc,gBAAgBhB;oBAEpB,IAAIe,kBAAkB,GAAG;wBACvBC,gBAAgBhB,qBAAqB;wBACrCe,kBACEnB,MAAMQ,KAAK,CAACY,cAAc,EAAEP,SAASK,SAAS,KAAK;oBACvD;oBAEA,IAAIE,gBAAgB,GAAG;wBACrBA,gBAAgBpB,MAAMQ,KAAK,CAACU,MAAM,GAAG;wBACrCC,kBAAkBnB,MAAMQ,KAAK,CAACY,cAAc,CAACP,QAAQ,CAACK,MAAM,GAAG;oBACjE;oBAEAX,wBAAwBY;oBACxBd,sBAAsBe;oBAEtB,OAAO;gBACT;gBAEA,IAAIJ,MAAMC,GAAG,KAAK,SAAS;oBACzB,IACE,CAACjB,MAAMQ,KAAK,CAACU,MAAM,IACnBd,uBAAuB,CAAC,KACxBE,yBAAyB,CAAC,GAC1B;wBACA,OAAO;oBACT;oBAEAG,WAAWL,oBAAoBE;oBAE/B,OAAO;gBACT;gBAEA,OAAO;YACT;QACF,CAAA;IAEAd,UAAU;QACR,IAAIW,WAAWkB,OAAO,IAAInB,gBAAgBmB,OAAO,EAAE;YACjD,MAAMC,YAAYnB,WAAWkB,OAAO,CAACC,SAAS;YAC9C,MAAMC,eAAepB,WAAWkB,OAAO,CAACE,YAAY;YAEpDrB,gBAAgBmB,OAAO,CAACG,SAAS,GAAGF,YAAYC;QAClD;IACF,GAAG;QAACjB;QAAsBF;KAAmB;IAE7C,MAAMqB,4BAA4BlC,YAChC,CAACmB,YAAoBC;QACnB,OAAO;YACLF,WAAWC,YAAYC;QACzB;IACF,GACA;QAACF;KAAW;IAGd,IAAI,CAACT,MAAMQ,KAAK,CAACU,MAAM,EAAE;QACvB,OAAO;IACT;IAEA,qBACE,KAACtB;QACCK,KAAKC;QACLwB,WAAU;kBAEV,cAAA,KAACC;YAAID,WAAU;sBACZ1B,MAAMQ,KAAK,CAACoB,GAAG,CAAC,CAACC,OAAOnB,2BACvB,MAACpB,MAAMwC,QAAQ;;sCACb,KAACH;4BACCD,WAAU;sCAGTG,MAAME,KAAK;2BAFP,CAAC,EAAEF,MAAME,KAAK,CAAC,CAAC;wBAItBF,MAAMhB,QAAQ,CAACe,GAAG,CAAC,CAAChB,SAAkBD,6BACrC,MAAChB;gCAECqC,UACE5B,uBAAuBM,cACvBJ,yBAAyBK;gCAE3BsB,SAASR,0BAA0Bf,YAAYC;;kDAE/C,KAACd;wCAAKqC,MAAMtB,QAAQsB,IAAI;wCAAER,WAAU;;oCACnCd,QAAQuB,KAAK;;+BART,CAAC,EAAEvB,QAAQuB,KAAK,CAAC,CAAC;;mBATR,CAAC,EAAEN,MAAME,KAAK,CAAC,QAAQ,CAAC;;;AAyBvD,GAAG;AAEHjC,WAAWsC,WAAW,GAAG;AAEzB,eAAetC,WAAW"}

package/dist/src/fields/TiptapEditor/extensions/AICommand/CommandButton.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { LucideIcon } from "lucide-react";
+export type CommandButtonProps = {
+    active?: boolean;
+    description: string;
+    icon: LucideIcon;
+    onClick: () => void;
+    title: string;
+};
+export declare const CommandButton: import("react").ForwardRefExoticComponent<CommandButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=CommandButton.d.ts.map

package/dist/src/fields/TiptapEditor/extensions/AICommand/CommandButton.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CommandButton.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/AICommand/CommandButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,aAAa,kHAsBzB,CAAC"}

package/dist/src/fields/TiptapEditor/extensions/AICommand/CommandButton.js ADDED Viewed

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Icon } from "../../features/ui/Icon.js";
+import { cn } from "../../lib/utils/index.js";
+export const CommandButton = /*#__PURE__*/ forwardRef(({ active, icon, onClick, title }, ref)=>{
+    const wrapperClass = cn("flex text-neutral-500 items-center text-xs font-semibold justify-start p-1.5 gap-2 rounded", !active && "bg-transparent hover:bg-neutral-50 hover:text-black", active && "bg-neutral-100 text-black hover:bg-neutral-100");
+    return /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        ref: ref,
+        onClick: onClick,
+        className: wrapperClass,
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                icon: icon,
+                className: "w-3 h-3"
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex flex-col items-start justify-start",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "text-sm font-medium",
+                    children: title
+                })
+            })
+        ]
+    });
+});
+CommandButton.displayName = "CommandButton";
+//# sourceMappingURL=CommandButton.js.map

package/dist/src/fields/TiptapEditor/extensions/AICommand/CommandButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/AICommand/CommandButton.tsx"],"sourcesContent":["import { LucideIcon } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport { Icon } from \"../../features/ui/Icon.js\";\nimport { cn } from \"../../lib/utils/index.js\";\n\nexport type CommandButtonProps = {\n active?: boolean;\n description: string;\n icon: LucideIcon;\n onClick: () => void;\n title: string;\n};\n\nexport const CommandButton = forwardRef<HTMLButtonElement, CommandButtonProps>(\n ({ active, icon, onClick, title }, ref) => {\n const wrapperClass = cn(\n \"flex text-neutral-500 items-center text-xs font-semibold justify-start p-1.5 gap-2 rounded\",\n !active && \"bg-transparent hover:bg-neutral-50 hover:text-black\",\n active && \"bg-neutral-100 text-black hover:bg-neutral-100\"\n );\n\n return (\n <button\n type=\"button\"\n ref={ref}\n onClick={onClick}\n className={wrapperClass}\n >\n <Icon icon={icon} className=\"w-3 h-3\" />\n <div className=\"flex flex-col items-start justify-start\">\n <div className=\"text-sm font-medium\">{title}</div>\n </div>\n </button>\n );\n }\n);\n\nCommandButton.displayName = \"CommandButton\";\n"],"names":["forwardRef","Icon","cn","CommandButton","active","icon","onClick","title","ref","wrapperClass","button","type","className","div","displayName"],"mappings":";AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,EAAE,QAAQ,2BAA2B;AAU9C,OAAO,MAAMC,8BAAgBH,WAC3B,CAAC,EAAEI,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAAE,EAAEC;IACjC,MAAMC,eAAeP,GACnB,8FACA,CAACE,UAAU,uDACXA,UAAU;IAGZ,qBACE,MAACM;QACCC,MAAK;QACLH,KAAKA;QACLF,SAASA;QACTM,WAAWH;;0BAEX,KAACR;gBAAKI,MAAMA;gBAAMO,WAAU;;0BAC5B,KAACC;gBAAID,WAAU;0BACb,cAAA,KAACC;oBAAID,WAAU;8BAAuBL;;;;;AAI9C,GACA;AAEFJ,cAAcW,WAAW,GAAG"}

package/dist/src/fields/TiptapEditor/extensions/AICommand/MenuList.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import React from "react";
+import { MenuListProps } from "./types.js";
+export declare const MenuList: React.ForwardRefExoticComponent<MenuListProps & React.RefAttributes<unknown>>;
+export default MenuList;
+//# sourceMappingURL=MenuList.d.ts.map

package/dist/src/fields/TiptapEditor/extensions/AICommand/MenuList.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/AICommand/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAW,aAAa,EAAE,MAAM,YAAY,CAAC;AAIpD,eAAO,MAAM,QAAQ,+EAiJnB,CAAC;AAIH,eAAe,QAAQ,CAAC"}