payload-richtext-tiptap 0.0.159 → 0.0.161

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"}

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

@@ -0,0 +1,291 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ReactRenderer } from '@tiptap/react';
+import Suggestion from '@tiptap/suggestion';
+import { PluginKey } from '@tiptap/pm/state';
+import { computePosition, offset, autoUpdate } from '@floating-ui/dom';
+let popupElement = null;
+let cleanupAutoUpdate = null;
+let isPopupVisible = false;
+// Helper functions to manage Floating UI popup
+const initPopup = ()=>{
+    if (!popupElement && typeof document !== 'undefined') {
+        popupElement = document.createElement('div');
+        popupElement.style.position = 'fixed';
+        popupElement.style.zIndex = '10000';
+        popupElement.style.maxWidth = '16rem';
+        popupElement.style.visibility = 'hidden';
+        popupElement.style.opacity = '0';
+        popupElement.style.transition = 'opacity 200ms';
+        popupElement.className = 'slash-command-menu';
+        document.body.appendChild(popupElement);
+    }
+    return popupElement;
+};
+const showPopup = ()=>{
+    if (popupElement && !isPopupVisible) {
+        isPopupVisible = true;
+        popupElement.style.display = 'block';
+        popupElement.style.visibility = 'visible';
+        popupElement.style.opacity = '1';
+    }
+};
+const hidePopup = ()=>{
+    if (popupElement) {
+        isPopupVisible = false;
+        popupElement.style.visibility = 'hidden';
+        popupElement.style.opacity = '0';
+        // Use setTimeout to wait for transition before hiding completely
+        setTimeout(()=>{
+            if (popupElement && !isPopupVisible) {
+                popupElement.style.display = 'none';
+            }
+        }, 200);
+    }
+};
+const updatePopupPosition = async (getReferenceRect)=>{
+    if (!popupElement || !isPopupVisible) return;
+    try {
+        const rect = getReferenceRect();
+        const virtualElement = {
+            getBoundingClientRect: ()=>rect
+        };
+        const { x, y } = await computePosition(virtualElement, popupElement, {
+            placement: 'bottom-start',
+            strategy: 'fixed',
+            middleware: [
+                offset({
+                    mainAxis: 8,
+                    crossAxis: 16
+                })
+            ]
+        });
+        popupElement.style.left = `${x}px`;
+        popupElement.style.top = `${y}px`;
+    } catch (error) {
+        console.error('Error updating popup position:', error);
+    }
+};
+export const SuggestionMenu = ({ editor, char, items, children })=>{
+    const [suggestionProps, setSuggestionProps] = useState(null);
+    const suggestionRef = useRef(null);
+    useEffect(()=>{
+        if (!editor) return;
+        // Clean up existing suggestion if it exists
+        if (suggestionRef.current) {
+            editor.unregisterPlugin(suggestionRef.current);
+        }
+        const suggestion = Suggestion({
+            editor,
+            char,
+            allowSpaces: true,
+            startOfLine: true,
+            pluginKey: new PluginKey('slash-suggestion'),
+            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) === char;
+                const isInColumn = editor.isActive('column');
+                const afterContent = $from.parent.textContent?.substring($from.parent.textContent?.indexOf(char));
+                const isValidAfterContent = !afterContent?.endsWith('  ');
+                // Check if drag handle is locked (ContentItemMenu is open)
+                const isDragHandleLocked = editor.storage.dragHandle?.lockDragHandle;
+                const shouldAllow = (isRootDepth && isParagraph && isStartOfNode || isInColumn && isParagraph && isStartOfNode) && isValidAfterContent && !isDragHandleLocked;
+                return shouldAllow;
+            },
+            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(char)).length ?? 0) : $from.start();
+                const tr = state.tr.deleteRange(from, end);
+                view.dispatch(tr);
+                props.onSelect({
+                    editor
+                });
+                view.focus();
+            },
+            items: ({ query })=>{
+                return items({
+                    query,
+                    editor
+                });
+            },
+            render: ()=>{
+                let component;
+                let scrollHandler = null;
+                return {
+                    onStart: (props)=>{
+                        setSuggestionProps(props);
+                        props.editor.storage.slashSuggestion = {
+                            ...props.editor.storage.slashSuggestion,
+                            isActive: true
+                        };
+                        // Temporarily disable drag handle to prevent interference
+                        props.editor.commands.setMeta('hideDragHandle', true);
+                        component = new ReactRenderer(children, {
+                            props,
+                            editor: props.editor
+                        });
+                        const { view } = props.editor;
+                        // Initialize the popup if needed
+                        initPopup();
+                        if (popupElement) {
+                            // Clear previous content
+                            popupElement.innerHTML = '';
+                            // Append the component
+                            popupElement.appendChild(component.element);
+                            // Set up positioning
+                            const getReferenceRect = ()=>{
+                                const { state } = view;
+                                const { selection } = state;
+                                const coords = view.coordsAtPos(selection.from);
+                                const node = view.nodeDOM(selection.from);
+                                if (node && node instanceof Element) {
+                                    const rect = node.getBoundingClientRect();
+                                    return new DOMRect(coords.left, coords.top, 0, 0);
+                                }
+                                return new DOMRect(coords.left, coords.top, 0, 0);
+                            };
+                            // Set up auto-update for positioning
+                            if (cleanupAutoUpdate) cleanupAutoUpdate();
+                            cleanupAutoUpdate = autoUpdate({
+                                getBoundingClientRect: getReferenceRect
+                            }, popupElement, async ()=>{
+                                await updatePopupPosition(getReferenceRect);
+                            });
+                            scrollHandler = ()=>{
+                                updatePopupPosition(getReferenceRect);
+                            };
+                            view.dom.parentElement?.addEventListener('scroll', scrollHandler);
+                            // Show the popup
+                            showPopup();
+                        }
+                    },
+                    onUpdate (props) {
+                        setSuggestionProps(props);
+                        component.updateProps(props);
+                        // Update positioning for the popup
+                        const { view } = props.editor;
+                        const { state } = view;
+                        const { selection } = state;
+                        const coords = view.coordsAtPos(selection.from);
+                        const getReferenceRect = ()=>{
+                            return new DOMRect(coords.left, coords.top, 0, 0);
+                        };
+                        updatePopupPosition(getReferenceRect);
+                    },
+                    onKeyDown (props) {
+                        if (props.event.key === 'Escape') {
+                            hidePopup();
+                            // Return focus to the editor
+                            setTimeout(()=>{
+                                editor.view.focus();
+                            }, 0);
+                            return true;
+                        }
+                        // Only move focus to menu for arrow keys
+                        if (props.event.key === 'ArrowDown' || props.event.key === 'ArrowUp') {
+                            if (!isPopupVisible) {
+                                showPopup();
+                            }
+                            // Focus the menu element for navigation
+                            setTimeout(()=>{
+                                const menuElement = component.element.querySelector('[tabindex="0"]');
+                                if (menuElement) {
+                                    menuElement.focus();
+                                }
+                            }, 0);
+                            return false;
+                        }
+                        // Handle Enter key when menu is focused
+                        if (props.event.key === 'Enter') {
+                            if (!isPopupVisible) {
+                                showPopup();
+                            }
+                            // Focus the menu element and let it handle Enter
+                            setTimeout(()=>{
+                                const menuElement = component.element.querySelector('[tabindex="0"]');
+                                if (menuElement) {
+                                    menuElement.focus();
+                                    // Trigger Enter key on the menu
+                                    const enterEvent = new KeyboardEvent('keydown', {
+                                        key: 'Enter',
+                                        code: 'Enter',
+                                        keyCode: 13,
+                                        which: 13,
+                                        bubbles: true,
+                                        cancelable: true
+                                    });
+                                    menuElement.dispatchEvent(enterEvent);
+                                }
+                            }, 0);
+                            return false;
+                        }
+                        // For any other key (letters, numbers, etc.), ensure editor has focus
+                        // This handles the case where user types after opening the menu
+                        if (!isPopupVisible) {
+                            showPopup();
+                        }
+                        // Ensure editor has focus for typing
+                        setTimeout(()=>{
+                            editor.view.focus();
+                        }, 0);
+                        // Let the editor handle the key normally
+                        return false;
+                    },
+                    onExit (props) {
+                        // Set slash command as inactive in storage
+                        ;
+                        props.editor.storage.slashSuggestion = {
+                            ...props.editor.storage.slashSuggestion,
+                            isActive: false
+                        };
+                        // Re-enable drag handle
+                        props.editor.commands.setMeta('hideDragHandle', false);
+                        // Clean up scroll handler first
+                        if (scrollHandler) {
+                            const { view } = props.editor;
+                            view.dom.parentElement?.removeEventListener('scroll', scrollHandler);
+                            scrollHandler = null;
+                        }
+                        // Clean up auto-update listener
+                        if (cleanupAutoUpdate) {
+                            cleanupAutoUpdate();
+                            cleanupAutoUpdate = null;
+                        }
+                        // Hide the popup
+                        hidePopup();
+                        // Clean up component
+                        component?.destroy?.();
+                        component = null;
+                        setSuggestionProps(null);
+                        // Clear popup content
+                        if (popupElement) {
+                            popupElement.innerHTML = '';
+                        }
+                        // Return focus to the editor
+                        setTimeout(()=>{
+                            props.editor.view.focus();
+                        }, 0);
+                    }
+                };
+            }
+        });
+        editor.registerPlugin(suggestion);
+        suggestionRef.current = suggestion;
+        return ()=>{
+            if (suggestionRef.current) {
+                editor.unregisterPlugin(suggestionRef.current);
+                suggestionRef.current = null;
+            }
+        };
+    }, [
+        editor,
+        char,
+        items
+    ]);
+    return null;
+};
+
+//# sourceMappingURL=SuggestionMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/ui/SlashCommand/SuggestionMenu.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react'\r\nimport { Editor } from '@tiptap/core'\r\nimport { ReactRenderer } from '@tiptap/react'\r\nimport Suggestion, { SuggestionProps, SuggestionKeyDownProps } from '@tiptap/suggestion'\r\nimport { PluginKey } from '@tiptap/pm/state'\r\nimport { SuggestionItem } from './types.js'\r\nimport { computePosition, offset, autoUpdate } from '@floating-ui/dom'\r\n\r\ninterface SuggestionMenuProps {\r\n  editor: Editor\r\n  char: string\r\n  items: (props: { query: string; editor: Editor }) => SuggestionItem[]\r\n  children: (props: any) => React.ReactElement\r\n}\r\n\r\nlet popupElement: HTMLElement | null = null\r\nlet cleanupAutoUpdate: (() => void) | null = null\r\nlet isPopupVisible = false\r\n\r\n// Helper functions to manage Floating UI popup\r\nconst initPopup = () => {\r\n  if (!popupElement && typeof document !== 'undefined') {\r\n    popupElement = document.createElement('div')\r\n    popupElement.style.position = 'fixed'\r\n    popupElement.style.zIndex = '10000'\r\n    popupElement.style.maxWidth = '16rem'\r\n    popupElement.style.visibility = 'hidden'\r\n    popupElement.style.opacity = '0'\r\n    popupElement.style.transition = 'opacity 200ms'\r\n    popupElement.className = 'slash-command-menu'\r\n    document.body.appendChild(popupElement)\r\n  }\r\n  return popupElement\r\n}\r\n\r\nconst showPopup = () => {\r\n  if (popupElement && !isPopupVisible) {\r\n    isPopupVisible = true\r\n    popupElement.style.display = 'block'\r\n    popupElement.style.visibility = 'visible'\r\n    popupElement.style.opacity = '1'\r\n  }\r\n}\r\n\r\nconst hidePopup = () => {\r\n  if (popupElement) {\r\n    isPopupVisible = false\r\n    popupElement.style.visibility = 'hidden'\r\n    popupElement.style.opacity = '0'\r\n    // Use setTimeout to wait for transition before hiding completely\r\n    setTimeout(() => {\r\n      if (popupElement && !isPopupVisible) {\r\n        popupElement.style.display = 'none'\r\n      }\r\n    }, 200)\r\n  }\r\n}\r\n\r\nconst updatePopupPosition = async (getReferenceRect: () => DOMRect) => {\r\n  if (!popupElement || !isPopupVisible) return\r\n\r\n  try {\r\n    const rect = getReferenceRect()\r\n\r\n    const virtualElement = {\r\n      getBoundingClientRect: () => rect,\r\n    }\r\n\r\n    const { x, y } = await computePosition(virtualElement, popupElement, {\r\n      placement: 'bottom-start',\r\n      strategy: 'fixed',\r\n      middleware: [offset({ mainAxis: 8, crossAxis: 16 })],\r\n    })\r\n\r\n    popupElement.style.left = `${x}px`\r\n    popupElement.style.top = `${y}px`\r\n  } catch (error) {\r\n    console.error('Error updating popup position:', error)\r\n  }\r\n}\r\n\r\nexport const SuggestionMenu = ({ editor, char, items, children }: SuggestionMenuProps) => {\r\n  const [suggestionProps, setSuggestionProps] = useState<SuggestionProps | null>(null)\r\n  const suggestionRef = useRef<any>(null)\r\n\r\n  useEffect(() => {\r\n    if (!editor) return\r\n\r\n    // Clean up existing suggestion if it exists\r\n    if (suggestionRef.current) {\r\n      editor.unregisterPlugin(suggestionRef.current)\r\n    }\r\n\r\n    const suggestion = Suggestion({\r\n      editor,\r\n      char,\r\n      allowSpaces: true,\r\n      startOfLine: true,\r\n      pluginKey: new PluginKey('slash-suggestion'),\r\n      allow: ({ state, range }) => {\r\n        const $from = state.doc.resolve(range.from)\r\n        const isRootDepth = $from.depth === 1\r\n        const isParagraph = $from.parent.type.name === 'paragraph'\r\n        const isStartOfNode = $from.parent.textContent?.charAt(0) === char\r\n        const isInColumn = editor.isActive('column')\r\n\r\n        const afterContent = $from.parent.textContent?.substring(\r\n          $from.parent.textContent?.indexOf(char),\r\n        )\r\n        const isValidAfterContent = !afterContent?.endsWith('  ')\r\n\r\n        // Check if drag handle is locked (ContentItemMenu is open)\r\n        const isDragHandleLocked = (editor.storage as any).dragHandle?.lockDragHandle\r\n\r\n        const shouldAllow =\r\n          ((isRootDepth && isParagraph && isStartOfNode) ||\r\n            (isInColumn && isParagraph && isStartOfNode)) &&\r\n          isValidAfterContent &&\r\n          !isDragHandleLocked\r\n\r\n        return shouldAllow\r\n      },\r\n      command: ({ editor, props }: { editor: Editor; props: any }) => {\r\n        const { view, state } = editor\r\n        const { $head, $from } = view.state.selection\r\n\r\n        const end = $from.pos\r\n        const from = $head?.nodeBefore\r\n          ? end -\r\n            ($head.nodeBefore.text?.substring($head.nodeBefore.text?.indexOf(char)).length ?? 0)\r\n          : $from.start()\r\n\r\n        const tr = state.tr.deleteRange(from, end)\r\n        view.dispatch(tr)\r\n\r\n        props.onSelect({ editor })\r\n        view.focus()\r\n      },\r\n      items: ({ query }: { query: string }) => {\r\n        return items({ query, editor })\r\n      },\r\n      render: () => {\r\n        let component: any\r\n        let scrollHandler: (() => void) | null = null\r\n\r\n        return {\r\n          onStart: (props: SuggestionProps) => {\r\n            setSuggestionProps(props)\r\n\r\n            // Set slash command as active in storage\r\n            ;(props.editor.storage as any).slashSuggestion = {\r\n              ...(props.editor.storage as any).slashSuggestion,\r\n              isActive: true,\r\n            }\r\n\r\n            // Temporarily disable drag handle to prevent interference\r\n            props.editor.commands.setMeta('hideDragHandle', true)\r\n\r\n            component = new ReactRenderer(children, {\r\n              props,\r\n              editor: props.editor,\r\n            })\r\n\r\n            const { view } = props.editor\r\n\r\n            // Initialize the popup if needed\r\n            initPopup()\r\n\r\n            if (popupElement) {\r\n              // Clear previous content\r\n              popupElement.innerHTML = ''\r\n              // Append the component\r\n              popupElement.appendChild(component.element)\r\n\r\n              // Set up positioning\r\n              const getReferenceRect = () => {\r\n                const { state } = view\r\n                const { selection } = state\r\n                const coords = view.coordsAtPos(selection.from)\r\n                const node = view.nodeDOM(selection.from)\r\n\r\n                if (node && node instanceof Element) {\r\n                  const rect = node.getBoundingClientRect()\r\n                  return new DOMRect(coords.left, coords.top, 0, 0)\r\n                }\r\n\r\n                return new DOMRect(coords.left, coords.top, 0, 0)\r\n              }\r\n\r\n              // Set up auto-update for positioning\r\n              if (cleanupAutoUpdate) cleanupAutoUpdate()\r\n              cleanupAutoUpdate = autoUpdate(\r\n                { getBoundingClientRect: getReferenceRect },\r\n                popupElement,\r\n                async () => {\r\n                  await updatePopupPosition(getReferenceRect)\r\n                },\r\n              )\r\n\r\n              scrollHandler = () => {\r\n                updatePopupPosition(getReferenceRect)\r\n              }\r\n\r\n              view.dom.parentElement?.addEventListener('scroll', scrollHandler)\r\n\r\n              // Show the popup\r\n              showPopup()\r\n            }\r\n          },\r\n\r\n          onUpdate(props: SuggestionProps) {\r\n            setSuggestionProps(props)\r\n            component.updateProps(props)\r\n\r\n            // Update positioning for the popup\r\n            const { view } = props.editor\r\n            const { state } = view\r\n            const { selection } = state\r\n            const coords = view.coordsAtPos(selection.from)\r\n\r\n            const getReferenceRect = () => {\r\n              return new DOMRect(coords.left, coords.top, 0, 0)\r\n            }\r\n\r\n            updatePopupPosition(getReferenceRect)\r\n          },\r\n\r\n          onKeyDown(props: SuggestionKeyDownProps) {\r\n            if (props.event.key === 'Escape') {\r\n              hidePopup()\r\n              // Return focus to the editor\r\n              setTimeout(() => {\r\n                editor.view.focus()\r\n              }, 0)\r\n              return true\r\n            }\r\n\r\n            // Only move focus to menu for arrow keys\r\n            if (props.event.key === 'ArrowDown' || props.event.key === 'ArrowUp') {\r\n              if (!isPopupVisible) {\r\n                showPopup()\r\n              }\r\n\r\n              // Focus the menu element for navigation\r\n              setTimeout(() => {\r\n                const menuElement = component.element.querySelector('[tabindex=\"0\"]')\r\n                if (menuElement) {\r\n                  menuElement.focus()\r\n                }\r\n              }, 0)\r\n\r\n              return false\r\n            }\r\n\r\n            // Handle Enter key when menu is focused\r\n            if (props.event.key === 'Enter') {\r\n              if (!isPopupVisible) {\r\n                showPopup()\r\n              }\r\n\r\n              // Focus the menu element and let it handle Enter\r\n              setTimeout(() => {\r\n                const menuElement = component.element.querySelector('[tabindex=\"0\"]')\r\n                if (menuElement) {\r\n                  menuElement.focus()\r\n                  // Trigger Enter key on the menu\r\n                  const enterEvent = new KeyboardEvent('keydown', {\r\n                    key: 'Enter',\r\n                    code: 'Enter',\r\n                    keyCode: 13,\r\n                    which: 13,\r\n                    bubbles: true,\r\n                    cancelable: true,\r\n                  })\r\n                  menuElement.dispatchEvent(enterEvent)\r\n                }\r\n              }, 0)\r\n\r\n              return false\r\n            }\r\n\r\n            // For any other key (letters, numbers, etc.), ensure editor has focus\r\n            // This handles the case where user types after opening the menu\r\n            if (!isPopupVisible) {\r\n              showPopup()\r\n            }\r\n\r\n            // Ensure editor has focus for typing\r\n            setTimeout(() => {\r\n              editor.view.focus()\r\n            }, 0)\r\n\r\n            // Let the editor handle the key normally\r\n            return false\r\n          },\r\n\r\n          onExit(props) {\r\n            // Set slash command as inactive in storage\r\n            ;(props.editor.storage as any).slashSuggestion = {\r\n              ...(props.editor.storage as any).slashSuggestion,\r\n              isActive: false,\r\n            }\r\n\r\n            // Re-enable drag handle\r\n            props.editor.commands.setMeta('hideDragHandle', false)\r\n\r\n            // Clean up scroll handler first\r\n            if (scrollHandler) {\r\n              const { view } = props.editor\r\n              view.dom.parentElement?.removeEventListener('scroll', scrollHandler)\r\n              scrollHandler = null\r\n            }\r\n\r\n            // Clean up auto-update listener\r\n            if (cleanupAutoUpdate) {\r\n              cleanupAutoUpdate()\r\n              cleanupAutoUpdate = null\r\n            }\r\n\r\n            // Hide the popup\r\n            hidePopup()\r\n\r\n            // Clean up component\r\n            component?.destroy?.()\r\n            component = null\r\n            setSuggestionProps(null)\r\n\r\n            // Clear popup content\r\n            if (popupElement) {\r\n              popupElement.innerHTML = ''\r\n            }\r\n\r\n            // Return focus to the editor\r\n            setTimeout(() => {\r\n              props.editor.view.focus()\r\n            }, 0)\r\n          },\r\n        }\r\n      },\r\n    })\r\n\r\n    editor.registerPlugin(suggestion)\r\n    suggestionRef.current = suggestion\r\n\r\n    return () => {\r\n      if (suggestionRef.current) {\r\n        editor.unregisterPlugin(suggestionRef.current)\r\n        suggestionRef.current = null\r\n      }\r\n    }\r\n  }, [editor, char, items])\r\n\r\n  return null\r\n}\r\n"],"names":["React","useEffect","useRef","useState","ReactRenderer","Suggestion","PluginKey","computePosition","offset","autoUpdate","popupElement","cleanupAutoUpdate","isPopupVisible","initPopup","document","createElement","style","position","zIndex","maxWidth","visibility","opacity","transition","className","body","appendChild","showPopup","display","hidePopup","setTimeout","updatePopupPosition","getReferenceRect","rect","virtualElement","getBoundingClientRect","x","y","placement","strategy","middleware","mainAxis","crossAxis","left","top","error","console","SuggestionMenu","editor","char","items","children","suggestionProps","setSuggestionProps","suggestionRef","current","unregisterPlugin","suggestion","allowSpaces","startOfLine","pluginKey","allow","state","range","$from","doc","resolve","from","isRootDepth","depth","isParagraph","parent","type","name","isStartOfNode","textContent","charAt","isInColumn","isActive","afterContent","substring","indexOf","isValidAfterContent","endsWith","isDragHandleLocked","storage","dragHandle","lockDragHandle","shouldAllow","command","props","view","$head","selection","end","pos","nodeBefore","text","length","start","tr","deleteRange","dispatch","onSelect","focus","query","render","component","scrollHandler","onStart","slashSuggestion","commands","setMeta","innerHTML","element","coords","coordsAtPos","node","nodeDOM","Element","DOMRect","dom","parentElement","addEventListener","onUpdate","updateProps","onKeyDown","event","key","menuElement","querySelector","enterEvent","KeyboardEvent","code","keyCode","which","bubbles","cancelable","dispatchEvent","onExit","removeEventListener","destroy","registerPlugin"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+export { SlashDropdownMenu } from './SlashDropdownMenu.js';
+export { SlashCommandTriggerButton } from './SlashCommandTriggerButton.js';
+export { SuggestionMenu } from './SuggestionMenu.js';
+export { SlashMenuList } from './SlashMenuList.js';
+export type { SlashMenuItemType, SuggestionItem, SlashMenuConfig, SlashDropdownMenuProps, SlashCommandTriggerButtonProps, } from './types.js';
+export { getSlashMenuItems, filterSuggestionItems, getDefaultSlashMenuItems } from './utils.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/ui/SlashCommand/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,YAAY,EACV,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,sBAAsB,EACtB,8BAA8B,GAC/B,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAA"}