payload-richtext-tiptap 0.0.158 → 0.0.160

package/dist/src/fields/TiptapEditor/features/ui/SlashCommand/SlashCommandTriggerButton.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Button } from '../Button/Button.jsx';
+import { Icon } from '../Icon.js';
+import { Plus } from 'lucide-react';
+export const SlashCommandTriggerButton = ({ editor, config })=>{
+    if (!editor) {
+        return null;
+    }
+    const handleClick = ()=>{
+        // Insert a slash command trigger
+        editor.chain().focus().insertContent('/').run();
+    };
+    return /*#__PURE__*/ _jsxs(Button, {
+        variant: "ghost",
+        buttonSize: "small",
+        onClick: handleClick,
+        className: "flex items-center gap-2 text-neutral-500 hover:text-black",
+        children: [
+            /*#__PURE__*/ _jsx(Icon, {
+                icon: Plus,
+                className: "w-4 h-4"
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "text-sm font-medium",
+                children: "Insert"
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=SlashCommandTriggerButton.js.map

package/dist/src/fields/TiptapEditor/features/ui/SlashCommand/SlashCommandTriggerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/ui/SlashCommand/SlashCommandTriggerButton.tsx"],"sourcesContent":["import React from 'react'\r\nimport { Editor } from '@tiptap/core'\r\nimport { SlashCommandTriggerButtonProps } from './types.js'\r\nimport { Button } from '../Button/Button.jsx'\r\nimport { Icon } from '../Icon.js'\r\nimport { Plus } from 'lucide-react'\r\n\r\nexport const SlashCommandTriggerButton = ({ editor, config }: SlashCommandTriggerButtonProps) => {\r\n  if (!editor) {\r\n    return null\r\n  }\r\n\r\n  const handleClick = () => {\r\n    // Insert a slash command trigger\r\n    editor.chain().focus().insertContent('/').run()\r\n  }\r\n\r\n  return (\r\n    <Button\r\n      variant=\"ghost\"\r\n      buttonSize=\"small\"\r\n      onClick={handleClick}\r\n      className=\"flex items-center gap-2 text-neutral-500 hover:text-black\"\r\n    >\r\n      <Icon icon={Plus} className=\"w-4 h-4\" />\r\n      <span className=\"text-sm font-medium\">Insert</span>\r\n    </Button>\r\n  )\r\n}\r\n"],"names":["React","Button","Icon","Plus","SlashCommandTriggerButton","editor","config","handleClick","chain","focus","insertContent","run","variant","buttonSize","onClick","className","icon","span"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAGzB,SAASC,MAAM,QAAQ,uBAAsB;AAC7C,SAASC,IAAI,QAAQ,aAAY;AACjC,SAASC,IAAI,QAAQ,eAAc;AAEnC,OAAO,MAAMC,4BAA4B,CAAC,EAAEC,MAAM,EAAEC,MAAM,EAAkC;IAC1F,IAAI,CAACD,QAAQ;QACX,OAAO;IACT;IAEA,MAAME,cAAc;QAClB,iCAAiC;QACjCF,OAAOG,KAAK,GAAGC,KAAK,GAAGC,aAAa,CAAC,KAAKC,GAAG;IAC/C;IAEA,qBACE,MAACV;QACCW,SAAQ;QACRC,YAAW;QACXC,SAASP;QACTQ,WAAU;;0BAEV,KAACb;gBAAKc,MAAMb;gBAAMY,WAAU;;0BAC5B,KAACE;gBAAKF,WAAU;0BAAsB;;;;AAG5C,EAAC"}

package/dist/src/fields/TiptapEditor/features/ui/SlashCommand/SlashDropdownMenu.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SlashDropdownMenuProps } from './types.js';
+export declare const SlashDropdownMenu: ({ editor, config }: SlashDropdownMenuProps) => React.JSX.Element;
+//# sourceMappingURL=SlashDropdownMenu.d.ts.map

package/dist/src/fields/TiptapEditor/features/ui/SlashCommand/SlashDropdownMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlashDropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/ui/SlashCommand/SlashDropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,sBAAsB,EAAmC,MAAM,YAAY,CAAA;AA+CpF,eAAO,MAAM,iBAAiB,uBAAwC,sBAAsB,sBAwB3F,CAAA"}

package/dist/src/fields/TiptapEditor/features/ui/SlashCommand/SlashDropdownMenu.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { SuggestionMenu } from './SuggestionMenu.js';
+import { SlashMenuList } from './SlashMenuList.js';
+import { getSlashMenuItems, filterSuggestionItems } from './utils.js';
+const defaultConfig = {
+    enabledItems: [
+        'text',
+        'heading_1',
+        'heading_2',
+        'heading_3',
+        'bullet_list',
+        'ordered_list',
+        'quote',
+        'code_block',
+        'image',
+        'horizontal_rule',
+        'button',
+        'custom_html',
+        'social',
+        'columns',
+        'unsubscribe_footer',
+        'twitter'
+    ],
+    showGroups: true,
+    itemGroups: {
+        text: 'Style',
+        heading_1: 'Style',
+        heading_2: 'Style',
+        heading_3: 'Style',
+        bullet_list: 'Lists',
+        ordered_list: 'Lists',
+        quote: 'Style',
+        code_block: 'Style',
+        image: 'Content',
+        horizontal_rule: 'Content',
+        button: 'Content',
+        custom_html: 'Content',
+        social: 'Content',
+        columns: 'Layout',
+        unsubscribe_footer: 'Content',
+        twitter: 'Content'
+    }
+};
+export const SlashDropdownMenu = ({ editor, config = defaultConfig })=>{
+    if (!editor) {
+        return null;
+    }
+    const mergedConfig = {
+        ...defaultConfig,
+        ...config
+    };
+    const getItems = ({ query, editor })=>{
+        const allItems = getSlashMenuItems(editor, mergedConfig);
+        return filterSuggestionItems(allItems, query);
+    };
+    return /*#__PURE__*/ _jsx(SuggestionMenu, {
+        editor: editor,
+        char: "/",
+        items: getItems,
+        children: (props)=>/*#__PURE__*/ _jsx(SlashMenuList, {
+                ref: props.ref,
+                items: props.items,
+                command: props.command,
+                showGroups: mergedConfig.showGroups
+            })
+    });
+};
+
+//# sourceMappingURL=SlashDropdownMenu.js.map

package/dist/src/fields/TiptapEditor/features/ui/SlashCommand/SlashDropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/ui/SlashCommand/SlashDropdownMenu.tsx"],"sourcesContent":["import React from 'react'\r\nimport { Editor } from '@tiptap/core'\r\nimport { SlashDropdownMenuProps, SlashMenuConfig, SuggestionItem } from './types.js'\r\nimport { SuggestionMenu } from './SuggestionMenu.js'\r\nimport { SlashMenuList } from './SlashMenuList.js'\r\nimport { getSlashMenuItems, filterSuggestionItems } from './utils.js'\r\n\r\nconst defaultConfig: SlashMenuConfig = {\r\n  enabledItems: [\r\n    'text',\r\n    'heading_1',\r\n    'heading_2',\r\n    'heading_3',\r\n    'bullet_list',\r\n    'ordered_list',\r\n    'quote',\r\n    'code_block',\r\n    'image',\r\n    'horizontal_rule',\r\n    'button',\r\n    'custom_html',\r\n    'social',\r\n    'columns',\r\n    'unsubscribe_footer',\r\n    'twitter',\r\n    // 'ai_writer',\r\n  ],\r\n  showGroups: true,\r\n  itemGroups: {\r\n    text: 'Style',\r\n    heading_1: 'Style',\r\n    heading_2: 'Style',\r\n    heading_3: 'Style',\r\n    bullet_list: 'Lists',\r\n    ordered_list: 'Lists',\r\n    quote: 'Style',\r\n    code_block: 'Style',\r\n    image: 'Content',\r\n    horizontal_rule: 'Content',\r\n    button: 'Content',\r\n    custom_html: 'Content',\r\n    social: 'Content',\r\n    columns: 'Layout',\r\n    unsubscribe_footer: 'Content',\r\n    twitter: 'Content',\r\n    // ai_writer: 'AI',\r\n  },\r\n}\r\n\r\nexport const SlashDropdownMenu = ({ editor, config = defaultConfig }: SlashDropdownMenuProps) => {\r\n  if (!editor) {\r\n    return null\r\n  }\r\n\r\n  const mergedConfig = { ...defaultConfig, ...config }\r\n\r\n  const getItems = ({ query, editor }: { query: string; editor: Editor }) => {\r\n    const allItems = getSlashMenuItems(editor, mergedConfig)\r\n    return filterSuggestionItems(allItems, query)\r\n  }\r\n\r\n  return (\r\n    <SuggestionMenu editor={editor} char=\"/\" items={getItems}>\r\n      {(props: any) => (\r\n        <SlashMenuList\r\n          ref={props.ref}\r\n          items={props.items}\r\n          command={props.command}\r\n          showGroups={mergedConfig.showGroups}\r\n        />\r\n      )}\r\n    </SuggestionMenu>\r\n  )\r\n}\r\n"],"names":["React","SuggestionMenu","SlashMenuList","getSlashMenuItems","filterSuggestionItems","defaultConfig","enabledItems","showGroups","itemGroups","text","heading_1","heading_2","heading_3","bullet_list","ordered_list","quote","code_block","image","horizontal_rule","button","custom_html","social","columns","unsubscribe_footer","twitter","SlashDropdownMenu","editor","config","mergedConfig","getItems","query","allItems","char","items","props","ref","command"],"mappings":";AAAA,OAAOA,WAAW,QAAO;AAGzB,SAASC,cAAc,QAAQ,sBAAqB;AACpD,SAASC,aAAa,QAAQ,qBAAoB;AAClD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,aAAY;AAErE,MAAMC,gBAAiC;IACrCC,cAAc;QACZ;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KAED;IACDC,YAAY;IACZC,YAAY;QACVC,MAAM;QACNC,WAAW;QACXC,WAAW;QACXC,WAAW;QACXC,aAAa;QACbC,cAAc;QACdC,OAAO;QACPC,YAAY;QACZC,OAAO;QACPC,iBAAiB;QACjBC,QAAQ;QACRC,aAAa;QACbC,QAAQ;QACRC,SAAS;QACTC,oBAAoB;QACpBC,SAAS;IAEX;AACF;AAEA,OAAO,MAAMC,oBAAoB,CAAC,EAAEC,MAAM,EAAEC,SAAStB,aAAa,EAA0B;IAC1F,IAAI,CAACqB,QAAQ;QACX,OAAO;IACT;IAEA,MAAME,eAAe;QAAE,GAAGvB,aAAa;QAAE,GAAGsB,MAAM;IAAC;IAEnD,MAAME,WAAW,CAAC,EAAEC,KAAK,EAAEJ,MAAM,EAAqC;QACpE,MAAMK,WAAW5B,kBAAkBuB,QAAQE;QAC3C,OAAOxB,sBAAsB2B,UAAUD;IACzC;IAEA,qBACE,KAAC7B;QAAeyB,QAAQA;QAAQM,MAAK;QAAIC,OAAOJ;kBAC7C,CAACK,sBACA,KAAChC;gBACCiC,KAAKD,MAAMC,GAAG;gBACdF,OAAOC,MAAMD,KAAK;gBAClBG,SAASF,MAAME,OAAO;gBACtB7B,YAAYqB,aAAarB,UAAU;;;AAK7C,EAAC"}

package/dist/src/fields/TiptapEditor/features/ui/SlashCommand/SlashMenuList.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SuggestionItem } from './types.js';
+interface SlashMenuListProps {
+    items: SuggestionItem[];
+    command: (item: SuggestionItem) => void;
+    showGroups?: boolean;
+}
+export declare const SlashMenuList: React.ForwardRefExoticComponent<SlashMenuListProps & React.RefAttributes<any>>;
+export {};
+//# sourceMappingURL=SlashMenuList.d.ts.map

package/dist/src/fields/TiptapEditor/features/ui/SlashCommand/SlashMenuList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlashMenuList.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/ui/SlashCommand/SlashMenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAK3C,UAAU,kBAAkB;IAC1B,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,OAAO,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,aAAa,gFAoPzB,CAAA"}

package/dist/src/fields/TiptapEditor/features/ui/SlashCommand/SlashMenuList.js

@@ -0,0 +1,249 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Surface } from '../Surface.js';
+import { DropdownButton } from '../Dropdown/Dropdown.js';
+import { Icon } from '../Icon.js';
+export const SlashMenuList = /*#__PURE__*/ React.forwardRef(({ items, command, showGroups = true }, ref)=>{
+    const scrollContainer = useRef(null);
+    const activeItem = useRef(null);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const isKeyboardNavigation = useRef(false);
+    // Group items by their group property
+    const groupedItems = React.useMemo(()=>{
+        if (!showGroups) {
+            return {
+                All: items
+            };
+        }
+        return items.reduce((groups, item)=>{
+            const group = item.group || 'Other';
+            if (!groups[group]) {
+                groups[group] = [];
+            }
+            groups[group].push(item);
+            return groups;
+        }, {});
+    }, [
+        items,
+        showGroups
+    ]);
+    // Flatten grouped items for navigation
+    const flatItems = React.useMemo(()=>{
+        return Object.values(groupedItems).flat();
+    }, [
+        groupedItems
+    ]);
+    // Reset selection when items change
+    useEffect(()=>{
+        setSelectedIndex(0);
+        setHoveredIndex(null);
+    }, [
+        items
+    ]);
+    const selectItem = useCallback((index)=>{
+        const item = flatItems[index];
+        if (item) {
+            command(item);
+        }
+    }, [
+        flatItems,
+        command
+    ]);
+    // Expose the handleKeyDown method for external use
+    React.useImperativeHandle(ref, ()=>({
+            onKeyDown: ({ event })=>{
+                handleKeyDown(event);
+                return true;
+            }
+        }));
+    // Only scroll on keyboard navigation, not on hover
+    const scrollToActiveItem = useCallback(()=>{
+        if (activeItem.current && scrollContainer.current) {
+            const container = scrollContainer.current;
+            const item = activeItem.current;
+            const containerRect = container.getBoundingClientRect();
+            const itemRect = item.getBoundingClientRect();
+            // Only scroll if item is not fully visible
+            if (itemRect.top < containerRect.top) {
+                container.scrollTop = item.offsetTop - container.offsetTop - 10;
+            } else if (itemRect.bottom > containerRect.bottom) {
+                container.scrollTop = item.offsetTop - container.offsetTop - container.clientHeight + item.offsetHeight + 10;
+            }
+        }
+    }, []);
+    useEffect(()=>{
+        // Only scroll on keyboard navigation, not on hover
+        if (isKeyboardNavigation.current) {
+            scrollToActiveItem();
+            isKeyboardNavigation.current = false // Reset flag
+            ;
+        }
+    }, [
+        selectedIndex,
+        scrollToActiveItem
+    ]);
+    // Note: Focus is only set when arrow keys are pressed, not on mount
+    const createItemClickHandler = useCallback((index)=>{
+        return ()=>{
+            selectItem(index);
+        };
+    }, [
+        selectItem
+    ]);
+    const createItemHoverHandler = useCallback((index)=>{
+        return ()=>{
+            setHoveredIndex(index);
+            setSelectedIndex(index) // Update selected index on hover
+            ;
+        };
+    }, []);
+    const createItemLeaveHandler = useCallback(()=>{
+        return ()=>{
+            setHoveredIndex(null);
+        };
+    }, []);
+    // Handle keyboard events directly
+    const handleKeyDown = useCallback((event)=>{
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!flatItems.length) {
+                return;
+            }
+            isKeyboardNavigation.current = true // Mark as keyboard navigation
+            ;
+            const newIndex = (selectedIndex + 1) % flatItems.length;
+            setSelectedIndex(newIndex);
+            setHoveredIndex(null);
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!flatItems.length) {
+                return;
+            }
+            // If at the top and pressing up again, return focus to editor
+            if (selectedIndex === 0) {
+                // Return focus to editor
+                const editorElement = document.querySelector('.ProseMirror');
+                if (editorElement) {
+                    ;
+                    editorElement.focus();
+                }
+                return;
+            }
+            isKeyboardNavigation.current = true // Mark as keyboard navigation
+            ;
+            const newIndex = selectedIndex - 1;
+            setSelectedIndex(newIndex);
+            setHoveredIndex(null);
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!flatItems.length || selectedIndex === -1) {
+                return;
+            }
+            console.log('Enter key pressed, selecting item:', selectedIndex);
+            selectItem(selectedIndex);
+            // Return focus to editor after selection
+            setTimeout(()=>{
+                const editorElement = document.querySelector('.ProseMirror');
+                if (editorElement) {
+                    ;
+                    editorElement.focus();
+                }
+            }, 0);
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            // Let the parent handle closing - it will return focus to editor
+            return;
+        }
+        // For any other key, return focus to editor
+        event.preventDefault();
+        event.stopPropagation();
+        const editorElement = document.querySelector('.ProseMirror');
+        if (editorElement) {
+            ;
+            editorElement.focus();
+        }
+    }, [
+        selectedIndex,
+        flatItems,
+        selectItem
+    ]);
+    if (!items.length) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(Surface, {
+        ref: scrollContainer,
+        className: "bg-dark-panel text-dark-text max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-3 focus:outline-none focus:ring-0 rounded-lg shadow-lg border border-dark-border animate-slide-up-fade",
+        onKeyDown: handleKeyDown,
+        onMouseEnter: (e)=>{
+            e.stopPropagation();
+        },
+        onMouseLeave: (e)=>{
+            e.stopPropagation();
+        },
+        role: "menu",
+        "aria-label": "Slash command menu",
+        "aria-activedescendant": selectedIndex >= 0 ? `menu-item-${selectedIndex}` : undefined,
+        tabIndex: 0,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "space-y-1",
+            children: Object.entries(groupedItems).map(([groupName, groupItems])=>/*#__PURE__*/ _jsxs(React.Fragment, {
+                    children: [
+                        showGroups && /*#__PURE__*/ _jsx("div", {
+                            className: "text-dark-text-muted text-xs px-2 py-1 font-medium tracking-wide select-none uppercase",
+                            children: groupName
+                        }),
+                        groupItems.map((item, itemIndex)=>{
+                            const flatIndex = flatItems.indexOf(item);
+                            const isActive = selectedIndex === flatIndex;
+                            const isHovered = hoveredIndex === flatIndex;
+                            return /*#__PURE__*/ _jsxs(DropdownButton, {
+                                ref: isActive ? activeItem : null,
+                                isActive: isActive || isHovered,
+                                onClick: createItemClickHandler(flatIndex),
+                                onMouseEnter: createItemHoverHandler(flatIndex),
+                                onMouseLeave: createItemLeaveHandler(),
+                                role: "menuitem",
+                                id: `menu-item-${flatIndex}`,
+                                "aria-label": `${item.title}: ${item.subtext}`,
+                                "aria-selected": isActive,
+                                tabIndex: -1,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Icon, {
+                                        icon: item.badge,
+                                        className: "mr-1"
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex flex-col items-start",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: "text-sm font-medium",
+                                                children: item.title
+                                            }),
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: "text-xs text-neutral-500",
+                                                children: item.subtext
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, `${item.title}-${itemIndex}`);
+                        })
+                    ]
+                }, groupName))
+        })
+    });
+});
+SlashMenuList.displayName = 'SlashMenuList';
+
+//# sourceMappingURL=SlashMenuList.js.map

package/dist/src/fields/TiptapEditor/features/ui/SlashCommand/SlashMenuList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/ui/SlashCommand/SlashMenuList.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react'\r\nimport { SuggestionItem } from './types.js'\r\nimport { Surface } from '../Surface.js'\r\nimport { DropdownButton } from '../Dropdown/Dropdown.js'\r\nimport { Icon } from '../Icon.js'\r\n\r\ninterface SlashMenuListProps {\r\n  items: SuggestionItem[]\r\n  command: (item: SuggestionItem) => void\r\n  showGroups?: boolean\r\n}\r\n\r\nexport const SlashMenuList = React.forwardRef<any, SlashMenuListProps>(\r\n  ({ items, command, showGroups = true }, ref) => {\r\n    const scrollContainer = useRef<HTMLDivElement>(null)\r\n    const activeItem = useRef<HTMLButtonElement>(null)\r\n    const [selectedIndex, setSelectedIndex] = useState(0)\r\n    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)\r\n    const isKeyboardNavigation = useRef(false)\r\n\r\n    // Group items by their group property\r\n    const groupedItems = React.useMemo(() => {\r\n      if (!showGroups) {\r\n        return { All: items }\r\n      }\r\n\r\n      return items.reduce(\r\n        (groups, item) => {\r\n          const group = item.group || 'Other'\r\n          if (!groups[group]) {\r\n            groups[group] = []\r\n          }\r\n          groups[group].push(item)\r\n          return groups\r\n        },\r\n        {} as Record<string, SuggestionItem[]>,\r\n      )\r\n    }, [items, showGroups])\r\n\r\n    // Flatten grouped items for navigation\r\n    const flatItems = React.useMemo(() => {\r\n      return Object.values(groupedItems).flat()\r\n    }, [groupedItems])\r\n\r\n    // Reset selection when items change\r\n    useEffect(() => {\r\n      setSelectedIndex(0)\r\n      setHoveredIndex(null)\r\n    }, [items])\r\n\r\n    const selectItem = useCallback(\r\n      (index: number) => {\r\n        const item = flatItems[index]\r\n        if (item) {\r\n          command(item)\r\n        }\r\n      },\r\n      [flatItems, command],\r\n    )\r\n\r\n    // Expose the handleKeyDown method for external use\r\n    React.useImperativeHandle(ref, () => ({\r\n      onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {\r\n        handleKeyDown(event)\r\n        return true\r\n      },\r\n    }))\r\n\r\n    // Only scroll on keyboard navigation, not on hover\r\n    const scrollToActiveItem = useCallback(() => {\r\n      if (activeItem.current && scrollContainer.current) {\r\n        const container = scrollContainer.current\r\n        const item = activeItem.current\r\n        const containerRect = container.getBoundingClientRect()\r\n        const itemRect = item.getBoundingClientRect()\r\n\r\n        // Only scroll if item is not fully visible\r\n        if (itemRect.top < containerRect.top) {\r\n          container.scrollTop = item.offsetTop - container.offsetTop - 10\r\n        } else if (itemRect.bottom > containerRect.bottom) {\r\n          container.scrollTop =\r\n            item.offsetTop - container.offsetTop - container.clientHeight + item.offsetHeight + 10\r\n        }\r\n      }\r\n    }, [])\r\n\r\n    useEffect(() => {\r\n      // Only scroll on keyboard navigation, not on hover\r\n      if (isKeyboardNavigation.current) {\r\n        scrollToActiveItem()\r\n        isKeyboardNavigation.current = false // Reset flag\r\n      }\r\n    }, [selectedIndex, scrollToActiveItem])\r\n\r\n    // Note: Focus is only set when arrow keys are pressed, not on mount\r\n\r\n    const createItemClickHandler = useCallback(\r\n      (index: number) => {\r\n        return () => {\r\n          selectItem(index)\r\n        }\r\n      },\r\n      [selectItem],\r\n    )\r\n\r\n    const createItemHoverHandler = useCallback((index: number) => {\r\n      return () => {\r\n        setHoveredIndex(index)\r\n        setSelectedIndex(index) // Update selected index on hover\r\n      }\r\n    }, [])\r\n\r\n    const createItemLeaveHandler = useCallback(() => {\r\n      return () => {\r\n        setHoveredIndex(null)\r\n      }\r\n    }, [])\r\n\r\n    // Handle keyboard events directly\r\n    const handleKeyDown = useCallback(\r\n      (event: React.KeyboardEvent) => {\r\n        if (event.key === 'ArrowDown') {\r\n          event.preventDefault()\r\n          event.stopPropagation()\r\n          if (!flatItems.length) {\r\n            return\r\n          }\r\n          isKeyboardNavigation.current = true // Mark as keyboard navigation\r\n          const newIndex = (selectedIndex + 1) % flatItems.length\r\n          setSelectedIndex(newIndex)\r\n          setHoveredIndex(null)\r\n          return\r\n        }\r\n\r\n        if (event.key === 'ArrowUp') {\r\n          event.preventDefault()\r\n          event.stopPropagation()\r\n          if (!flatItems.length) {\r\n            return\r\n          }\r\n\r\n          // If at the top and pressing up again, return focus to editor\r\n          if (selectedIndex === 0) {\r\n            // Return focus to editor\r\n            const editorElement = document.querySelector('.ProseMirror')\r\n            if (editorElement) {\r\n              ;(editorElement as HTMLElement).focus()\r\n            }\r\n            return\r\n          }\r\n\r\n          isKeyboardNavigation.current = true // Mark as keyboard navigation\r\n          const newIndex = selectedIndex - 1\r\n          setSelectedIndex(newIndex)\r\n          setHoveredIndex(null)\r\n          return\r\n        }\r\n\r\n        if (event.key === 'Enter') {\r\n          event.preventDefault()\r\n          event.stopPropagation()\r\n          if (!flatItems.length || selectedIndex === -1) {\r\n            return\r\n          }\r\n          console.log('Enter key pressed, selecting item:', selectedIndex)\r\n          selectItem(selectedIndex)\r\n\r\n          // Return focus to editor after selection\r\n          setTimeout(() => {\r\n            const editorElement = document.querySelector('.ProseMirror')\r\n            if (editorElement) {\r\n              ;(editorElement as HTMLElement).focus()\r\n            }\r\n          }, 0)\r\n          return\r\n        }\r\n\r\n        if (event.key === 'Escape') {\r\n          event.preventDefault()\r\n          event.stopPropagation()\r\n          // Let the parent handle closing - it will return focus to editor\r\n          return\r\n        }\r\n\r\n        // For any other key, return focus to editor\r\n        event.preventDefault()\r\n        event.stopPropagation()\r\n        const editorElement = document.querySelector('.ProseMirror')\r\n        if (editorElement) {\r\n          ;(editorElement as HTMLElement).focus()\r\n        }\r\n      },\r\n      [selectedIndex, flatItems, selectItem],\r\n    )\r\n\r\n    if (!items.length) {\r\n      return null\r\n    }\r\n\r\n    return (\r\n      <Surface\r\n        ref={scrollContainer}\r\n        className=\"bg-dark-panel text-dark-text max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-3 focus:outline-none focus:ring-0 rounded-lg shadow-lg border border-dark-border animate-slide-up-fade\"\r\n        onKeyDown={handleKeyDown}\r\n        onMouseEnter={(e) => {\r\n          e.stopPropagation()\r\n        }}\r\n        onMouseLeave={(e) => {\r\n          e.stopPropagation()\r\n        }}\r\n        role=\"menu\"\r\n        aria-label=\"Slash command menu\"\r\n        aria-activedescendant={selectedIndex >= 0 ? `menu-item-${selectedIndex}` : undefined}\r\n        tabIndex={0}\r\n      >\r\n        <div className=\"space-y-1\">\r\n          {Object.entries(groupedItems).map(([groupName, groupItems]) => (\r\n            <React.Fragment key={groupName}>\r\n              {showGroups && (\r\n                <div className=\"text-dark-text-muted text-xs px-2 py-1 font-medium tracking-wide select-none uppercase\">\r\n                  {groupName}\r\n                </div>\r\n              )}\r\n              {groupItems.map((item, itemIndex) => {\r\n                const flatIndex = flatItems.indexOf(item)\r\n                const isActive = selectedIndex === flatIndex\r\n                const isHovered = hoveredIndex === flatIndex\r\n\r\n                return (\r\n                  <DropdownButton\r\n                    key={`${item.title}-${itemIndex}`}\r\n                    ref={isActive ? activeItem : null}\r\n                    isActive={isActive || isHovered}\r\n                    onClick={createItemClickHandler(flatIndex)}\r\n                    onMouseEnter={createItemHoverHandler(flatIndex)}\r\n                    onMouseLeave={createItemLeaveHandler()}\r\n                    role=\"menuitem\"\r\n                    id={`menu-item-${flatIndex}`}\r\n                    aria-label={`${item.title}: ${item.subtext}`}\r\n                    aria-selected={isActive}\r\n                    tabIndex={-1}\r\n                  >\r\n                    <Icon icon={item.badge} className=\"mr-1\" />\r\n                    <div className=\"flex flex-col items-start\">\r\n                      <div className=\"text-sm font-medium\">{item.title}</div>\r\n                      <div className=\"text-xs text-neutral-500\">{item.subtext}</div>\r\n                    </div>\r\n                  </DropdownButton>\r\n                )\r\n              })}\r\n            </React.Fragment>\r\n          ))}\r\n        </div>\r\n      </Surface>\r\n    )\r\n  },\r\n)\r\n\r\nSlashMenuList.displayName = 'SlashMenuList'\r\n"],"names":["React","useCallback","useEffect","useRef","useState","Surface","DropdownButton","Icon","SlashMenuList","forwardRef","items","command","showGroups","ref","scrollContainer","activeItem","selectedIndex","setSelectedIndex","hoveredIndex","setHoveredIndex","isKeyboardNavigation","groupedItems","useMemo","All","reduce","groups","item","group","push","flatItems","Object","values","flat","selectItem","index","useImperativeHandle","onKeyDown","event","handleKeyDown","scrollToActiveItem","current","container","containerRect","getBoundingClientRect","itemRect","top","scrollTop","offsetTop","bottom","clientHeight","offsetHeight","createItemClickHandler","createItemHoverHandler","createItemLeaveHandler","key","preventDefault","stopPropagation","length","newIndex","editorElement","document","querySelector","focus","console","log","setTimeout","className","onMouseEnter","e","onMouseLeave","role","aria-label","aria-activedescendant","undefined","tabIndex","div","entries","map","groupName","groupItems","Fragment","itemIndex","flatIndex","indexOf","isActive","isHovered","onClick","id","title","subtext","aria-selected","icon","badge","displayName"],"mappings":"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"}

package/dist/src/fields/TiptapEditor/features/ui/SlashCommand/SuggestionMenu.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Editor } from '@tiptap/core';
+import { SuggestionItem } from './types.js';
+interface SuggestionMenuProps {
+    editor: Editor;
+    char: string;
+    items: (props: {
+        query: string;
+        editor: Editor;
+    }) => SuggestionItem[];
+    children: (props: any) => React.ReactElement;
+}
+export declare const SuggestionMenu: ({ editor, char, items, children }: SuggestionMenuProps) => any;
+export {};
+//# sourceMappingURL=SuggestionMenu.d.ts.map

package/dist/src/fields/TiptapEditor/features/ui/SlashCommand/SuggestionMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SuggestionMenu.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/ui/SlashCommand/SuggestionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAIrC,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAG3C,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,cAAc,EAAE,CAAA;IACrE,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,KAAK,CAAC,YAAY,CAAA;CAC7C;AAoED,eAAO,MAAM,cAAc,sCAAuC,mBAAmB,QAgRpF,CAAA"}