@revealui/core 0.0.1-pre.3 → 0.2.0

package/dist/client/richtext/plugins/FloatingToolbarPlugin.js

@@ -0,0 +1,248 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RevealUI Rich Text Editor - Floating Toolbar Plugin
+ *
+ * A floating toolbar that appears above selected text, similar to Medium's editor.
+ */
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, REMOVE_LIST_COMMAND, } from '@lexical/list';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode, } from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
+import { $createParagraphNode, $getSelection, $isRangeSelection, $isRootOrShadowRoot, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, FORMAT_TEXT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND, } from 'lexical';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ImageUploadButton } from '../components/ImageUploadButton.js';
+export function FloatingToolbarPlugin({ features }) {
+    const [editor] = useLexicalComposerContext();
+    const toolbarRef = useRef(null);
+    const [position, setPosition] = useState({
+        top: 0,
+        left: 0,
+        visible: false,
+    });
+    const [state, setState] = useState({
+        isBold: false,
+        isItalic: false,
+        isUnderline: false,
+        isStrikethrough: false,
+        isCode: false,
+        isSubscript: false,
+        isSuperscript: false,
+        isLink: false,
+        blockType: 'paragraph',
+        canUndo: false,
+        canRedo: false,
+    });
+    // Update toolbar state and position based on selection
+    const updateToolbar = useCallback(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || selection.isCollapsed()) {
+            setPosition((prev) => ({ ...prev, visible: false }));
+            return;
+        }
+        // Get DOM selection for positioning
+        const domSelection = window.getSelection();
+        if (!domSelection || domSelection.rangeCount === 0) {
+            setPosition((prev) => ({ ...prev, visible: false }));
+            return;
+        }
+        const range = domSelection.getRangeAt(0);
+        const rect = range.getBoundingClientRect();
+        const editorRootElement = editor.getRootElement();
+        if (!editorRootElement) {
+            setPosition((prev) => ({ ...prev, visible: false }));
+            return;
+        }
+        // Calculate toolbar position
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+        // Position toolbar above selection, centered horizontally
+        const toolbarHeight = toolbarRef.current?.offsetHeight || 40;
+        const toolbarWidth = toolbarRef.current?.offsetWidth || 200;
+        const top = rect.top + scrollTop - toolbarHeight - 8; // 8px gap above selection
+        const left = rect.left + scrollLeft + rect.width / 2 - toolbarWidth / 2;
+        setPosition({
+            top: Math.max(8, top), // Don't go above viewport
+            left: Math.max(8, Math.min(left, window.innerWidth - toolbarWidth - 8)), // Keep within viewport
+            visible: true,
+        });
+        // Update formatting state
+        setState((prev) => ({
+            ...prev,
+            isBold: selection.hasFormat('bold'),
+            isItalic: selection.hasFormat('italic'),
+            isUnderline: selection.hasFormat('underline'),
+            isStrikethrough: selection.hasFormat('strikethrough'),
+            isCode: selection.hasFormat('code'),
+            isSubscript: selection.hasFormat('subscript'),
+            isSuperscript: selection.hasFormat('superscript'),
+        }));
+        // Block type
+        const anchorNode = selection.anchor.getNode();
+        let element = anchorNode.getKey() === 'root'
+            ? anchorNode
+            : $findMatchingParent(anchorNode, (e) => {
+                const parent = e.getParent();
+                return parent !== null && $isRootOrShadowRoot(parent);
+            });
+        if (element === null) {
+            element = anchorNode.getTopLevelElementOrThrow();
+        }
+        const elementKey = element.getKey();
+        const elementDOM = editor.getElementByKey(elementKey);
+        if (elementDOM !== null) {
+            // Check list type
+            if ($isListNode(element)) {
+                const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+                const type = parentList ? parentList.getListType() : element.getListType();
+                setState((prev) => ({
+                    ...prev,
+                    blockType: type === 'bullet' ? 'bullet' : type === 'number' ? 'number' : 'check',
+                }));
+            }
+            else {
+                // Check heading type
+                const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+                if (type === 'paragraph' || type === 'root') {
+                    setState((prev) => ({ ...prev, blockType: 'paragraph' }));
+                }
+                else if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(type)) {
+                    setState((prev) => ({ ...prev, blockType: type }));
+                }
+                else if (type === 'quote') {
+                    setState((prev) => ({ ...prev, blockType: 'quote' }));
+                }
+            }
+        }
+        // Link state
+        const node = selection.anchor.getNode();
+        const parent = node.getParent();
+        setState((prev) => ({
+            ...prev,
+            isLink: $isLinkNode(parent) || $isLinkNode(node),
+        }));
+    }, [editor]);
+    // Register listeners
+    useEffect(() => {
+        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                updateToolbar();
+            });
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            updateToolbar();
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(CAN_UNDO_COMMAND, (payload) => {
+            setState((prev) => ({ ...prev, canUndo: payload }));
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(CAN_REDO_COMMAND, (payload) => {
+            setState((prev) => ({ ...prev, canRedo: payload }));
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL));
+    }, [editor, updateToolbar]);
+    // Handle window scroll/resize to reposition toolbar
+    useEffect(() => {
+        const handleScroll = () => {
+            updateToolbar();
+        };
+        window.addEventListener('scroll', handleScroll, true);
+        window.addEventListener('resize', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll, true);
+            window.removeEventListener('resize', handleScroll);
+        };
+    }, [updateToolbar]);
+    // Format commands (same as ToolbarPlugin)
+    const formatBold = () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+    const formatItalic = () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+    const formatUnderline = () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
+    const undo = () => editor.dispatchCommand(UNDO_COMMAND, undefined);
+    const redo = () => editor.dispatchCommand(REDO_COMMAND, undefined);
+    // Block type commands
+    const formatParagraph = () => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                $setBlocksType(selection, () => $createParagraphNode());
+            }
+        });
+    };
+    const formatHeading = (tag) => {
+        if (state.blockType !== tag) {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    $setBlocksType(selection, () => $createHeadingNode(tag));
+                }
+            });
+        }
+    };
+    const formatQuote = () => {
+        if (state.blockType !== 'quote') {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    $setBlocksType(selection, () => $createQuoteNode());
+                }
+            });
+        }
+    };
+    const formatBulletList = () => {
+        if (state.blockType !== 'bullet') {
+            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+        }
+    };
+    const formatNumberedList = () => {
+        if (state.blockType !== 'number') {
+            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+        }
+    };
+    const insertLink = () => {
+        if (!state.isLink) {
+            const url = prompt('Enter URL:');
+            if (url) {
+                editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+            }
+        }
+        else {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        }
+    };
+    // Check which features are enabled
+    const hasFeature = (key) => features.some((f) => f.key === key);
+    // Check if floating toolbar should be shown
+    const showToolbar = features.some((f) => f.type === 'toolbar' && f.position === 'floating') ||
+        features.some((f) => f.key === 'floatingToolbar' || f.key === 'floating-toolbar');
+    if (!(showToolbar && position.visible)) {
+        return null;
+    }
+    const toolbarContent = (
+    // biome-ignore lint: Floating toolbar needs absolute positioning and event handling
+    _jsxs("div", { ref: toolbarRef, className: "editor-toolbar editor-toolbar--floating", style: {
+            position: 'absolute',
+            top: `${position.top}px`,
+            left: `${position.left}px`,
+            zIndex: 1000,
+            opacity: position.visible ? 1 : 0,
+            pointerEvents: position.visible ? 'auto' : 'none',
+        }, onMouseDown: (e) => e.preventDefault(), children: [hasFeature('history') && (_jsxs("div", { className: "toolbar-group", children: [_jsx("button", { type: "button", disabled: !state.canUndo, onClick: undo, className: "toolbar-btn", title: "Undo (Ctrl+Z)", "aria-label": "Undo", children: "\u21B6" }), _jsx("button", { type: "button", disabled: !state.canRedo, onClick: redo, className: "toolbar-btn", title: "Redo (Ctrl+Y)", "aria-label": "Redo", children: "\u21B7" })] })), _jsxs("div", { className: "toolbar-group", children: [hasFeature('bold') && (_jsx("button", { type: "button", onClick: formatBold, className: `toolbar-btn ${state.isBold ? 'active' : ''}`, title: "Bold (Ctrl+B)", "aria-label": "Bold", "aria-pressed": state.isBold, children: _jsx("strong", { children: "B" }) })), hasFeature('italic') && (_jsx("button", { type: "button", onClick: formatItalic, className: `toolbar-btn ${state.isItalic ? 'active' : ''}`, title: "Italic (Ctrl+I)", "aria-label": "Italic", "aria-pressed": state.isItalic, children: _jsx("em", { children: "I" }) })), hasFeature('underline') && (_jsx("button", { type: "button", onClick: formatUnderline, className: `toolbar-btn ${state.isUnderline ? 'active' : ''}`, title: "Underline (Ctrl+U)", "aria-label": "Underline", "aria-pressed": state.isUnderline, children: _jsx("span", { style: { textDecoration: 'underline' }, children: "U" }) })), hasFeature('link') && (_jsx("button", { type: "button", onClick: insertLink, className: `toolbar-btn ${state.isLink ? 'active' : ''}`, title: "Insert Link", "aria-label": "Insert Link", "aria-pressed": state.isLink, children: "\uD83D\uDD17" })), hasFeature('upload') && _jsx(ImageUploadButton, {})] }), hasFeature('heading') && (_jsx("div", { className: "toolbar-group", children: _jsxs("select", { className: "toolbar-select", value: state.blockType, onChange: (e) => {
+                        const value = e.target.value;
+                        if (value === 'paragraph')
+                            formatParagraph();
+                        else if (value.startsWith('h'))
+                            formatHeading(value);
+                        else if (value === 'quote')
+                            formatQuote();
+                    }, children: [_jsx("option", { value: "paragraph", children: "Paragraph" }), _jsx("option", { value: "h1", children: "H1" }), _jsx("option", { value: "h2", children: "H2" }), _jsx("option", { value: "h3", children: "H3" })] }) })), (hasFeature('list') || hasFeature('orderedList') || hasFeature('unorderedList')) && (_jsxs("div", { className: "toolbar-group", children: [_jsx("button", { type: "button", onClick: formatBulletList, className: `toolbar-btn ${state.blockType === 'bullet' ? 'active' : ''}`, title: "Bullet List", "aria-label": "Bullet List", children: "\u2022" }), _jsx("button", { type: "button", onClick: formatNumberedList, className: `toolbar-btn ${state.blockType === 'number' ? 'active' : ''}`, title: "Numbered List", "aria-label": "Numbered List", children: "1." })] }))] }));
+    // Render via portal to body for proper positioning
+    return typeof document !== 'undefined' ? createPortal(toolbarContent, document.body) : null;
+}
+export default FloatingToolbarPlugin;

package/dist/client/richtext/plugins/ImagePlugin.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+export declare const ImagePlugin: React.FC;
+//# sourceMappingURL=ImagePlugin.d.ts.map

package/dist/client/richtext/plugins/ImagePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePlugin.d.ts","sourceRoot":"","sources":["../../../../src/client/richtext/plugins/ImagePlugin.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAgF/B,CAAA"}

package/dist/client/richtext/plugins/ImagePlugin.js

@@ -0,0 +1,73 @@
+'use client';
+/**
+ * RevealUI Rich Text Editor - Image Plugin
+ *
+ * Plugin for handling image insertion and management in the editor.
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils';
+import { $getNodeByKey, $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from 'lexical';
+import { useEffect, useState } from 'react';
+import { $createImageNode, ImageNode, INSERT_IMAGE_COMMAND, OPEN_IMAGE_UPLOAD_COMMAND, } from '../nodes/ImageNode.js';
+export const ImagePlugin = () => {
+    const [editor] = useLexicalComposerContext();
+    const [lastSelection, setLastSelection] = useState(null);
+    useEffect(() => {
+        return mergeRegister(editor.registerCommand(INSERT_IMAGE_COMMAND, ({ src, alt, width, height, caption }) => {
+            let selection = $getSelection();
+            if (!$isRangeSelection(selection)) {
+                selection = lastSelection;
+                if (!$isRangeSelection(selection)) {
+                    // No selection, insert at root
+                    editor.update(() => {
+                        const imageNode = $createImageNode({
+                            src,
+                            alt,
+                            width,
+                            height,
+                            caption,
+                        });
+                        $insertNodeToNearestRoot(imageNode);
+                    });
+                    return true;
+                }
+            }
+            const focusNode = selection.focus.getNode();
+            if (focusNode !== null) {
+                editor.update(() => {
+                    const imageNode = $createImageNode({
+                        src,
+                        alt,
+                        width,
+                        height,
+                        caption,
+                    });
+                    $insertNodeToNearestRoot(imageNode);
+                });
+            }
+            return true;
+        }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(OPEN_IMAGE_UPLOAD_COMMAND, ({ data, nodeKey }) => {
+            // Handle image editing/replacement
+            if (nodeKey && data) {
+                editor.update(() => {
+                    const node = $getNodeByKey(nodeKey);
+                    if (node && node instanceof ImageNode) {
+                        node.setData(data);
+                    }
+                });
+                return true;
+            }
+            // Handle new image upload - trigger file input
+            // This will be handled by ImageUploadButton component
+            return false;
+        }, COMMAND_PRIORITY_EDITOR), editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    setLastSelection(selection);
+                }
+            });
+        }));
+    }, [editor, lastSelection]);
+    return null;
+};

package/dist/client/richtext/plugins/PastePlugin.d.ts

@@ -0,0 +1,2 @@
+export declare function PastePlugin(): null;
+//# sourceMappingURL=PastePlugin.d.ts.map

package/dist/client/richtext/plugins/PastePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PastePlugin.d.ts","sourceRoot":"","sources":["../../../../src/client/richtext/plugins/PastePlugin.tsx"],"names":[],"mappings":"AAcA,wBAAgB,WAAW,IAAI,IAAI,CAiClC"}

package/dist/client/richtext/plugins/PastePlugin.js

@@ -0,0 +1,36 @@
+'use client';
+/**
+ * Paste Handling Plugin
+ *
+ * Registers clipboard event handlers for rich text paste support.
+ * Uses @lexical/clipboard for HTML-to-Lexical conversion.
+ */
+import { $generateNodesFromDOM } from '@lexical/html';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, PASTE_COMMAND } from 'lexical';
+import { useEffect } from 'react';
+export function PastePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerCommand(PASTE_COMMAND, (event) => {
+            const clipboardData = event.clipboardData;
+            if (!clipboardData)
+                return false;
+            const htmlData = clipboardData.getData('text/html');
+            if (!htmlData)
+                return false; // Let Lexical handle plain text paste
+            event.preventDefault();
+            editor.update(() => {
+                const selection = $getSelection();
+                if (!$isRangeSelection(selection))
+                    return;
+                const parser = new DOMParser();
+                const dom = parser.parseFromString(htmlData, 'text/html');
+                const nodes = $generateNodesFromDOM(editor, dom);
+                selection.insertNodes(nodes);
+            });
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor]);
+    return null;
+}

package/dist/client/richtext/plugins/ToolbarPlugin.d.ts

@@ -0,0 +1,8 @@
+import type { RichTextFeature } from '../../../richtext/index.js';
+export interface ToolbarPluginProps {
+    features: RichTextFeature[];
+    variant?: 'fixed' | 'inline' | 'floating';
+}
+export declare function ToolbarPlugin({ features, variant }: ToolbarPluginProps): import("react/jsx-runtime").JSX.Element | null;
+export default ToolbarPlugin;
+//# sourceMappingURL=ToolbarPlugin.d.ts.map

package/dist/client/richtext/plugins/ToolbarPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarPlugin.d.ts","sourceRoot":"","sources":["../../../../src/client/richtext/plugins/ToolbarPlugin.tsx"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAsCjE,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,eAAe,EAAE,CAAA;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAA;CAC1C;AAED,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,OAAiB,EAAE,EAAE,kBAAkB,kDA4ZhF;AAED,eAAe,aAAa,CAAA"}

package/dist/client/richtext/plugins/ToolbarPlugin.js

@@ -0,0 +1,204 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RevealUI Rich Text Editor - Toolbar Plugin
+ *
+ * A comprehensive toolbar with formatting commands for the Lexical editor.
+ */
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, REMOVE_LIST_COMMAND, } from '@lexical/list';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode, } from '@lexical/rich-text';
+import { $setBlocksType } from '@lexical/selection';
+import { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
+import { $createParagraphNode, $getSelection, $isRangeSelection, $isRootOrShadowRoot, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_CRITICAL, FORMAT_TEXT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND, } from 'lexical';
+import { useCallback, useEffect, useState } from 'react';
+import { ImageUploadButton } from '../components/ImageUploadButton.js';
+export function ToolbarPlugin({ features, variant = 'fixed' }) {
+    const [editor] = useLexicalComposerContext();
+    const [state, setState] = useState({
+        isBold: false,
+        isItalic: false,
+        isUnderline: false,
+        isStrikethrough: false,
+        isCode: false,
+        isSubscript: false,
+        isSuperscript: false,
+        isLink: false,
+        blockType: 'paragraph',
+        canUndo: false,
+        canRedo: false,
+    });
+    // Update toolbar state based on selection
+    const updateToolbar = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            // Text formatting
+            setState((prev) => ({
+                ...prev,
+                isBold: selection.hasFormat('bold'),
+                isItalic: selection.hasFormat('italic'),
+                isUnderline: selection.hasFormat('underline'),
+                isStrikethrough: selection.hasFormat('strikethrough'),
+                isCode: selection.hasFormat('code'),
+                isSubscript: selection.hasFormat('subscript'),
+                isSuperscript: selection.hasFormat('superscript'),
+            }));
+            // Block type
+            const anchorNode = selection.anchor.getNode();
+            let element = anchorNode.getKey() === 'root'
+                ? anchorNode
+                : $findMatchingParent(anchorNode, (e) => {
+                    const parent = e.getParent();
+                    return parent !== null && $isRootOrShadowRoot(parent);
+                });
+            if (element === null) {
+                element = anchorNode.getTopLevelElementOrThrow();
+            }
+            const elementKey = element.getKey();
+            const elementDOM = editor.getElementByKey(elementKey);
+            if (elementDOM !== null) {
+                // Check list type
+                if ($isListNode(element)) {
+                    const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+                    const type = parentList ? parentList.getListType() : element.getListType();
+                    setState((prev) => ({
+                        ...prev,
+                        blockType: type === 'bullet' ? 'bullet' : type === 'number' ? 'number' : 'check',
+                    }));
+                }
+                else {
+                    // Check heading type
+                    const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+                    if (type === 'paragraph' || type === 'root') {
+                        setState((prev) => ({ ...prev, blockType: 'paragraph' }));
+                    }
+                    else if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(type)) {
+                        setState((prev) => ({ ...prev, blockType: type }));
+                    }
+                    else if (type === 'quote') {
+                        setState((prev) => ({ ...prev, blockType: 'quote' }));
+                    }
+                }
+            }
+            // Link state
+            const node = selection.anchor.getNode();
+            const parent = node.getParent();
+            setState((prev) => ({
+                ...prev,
+                isLink: $isLinkNode(parent) || $isLinkNode(node),
+            }));
+        }
+    }, [editor]);
+    // Register listeners
+    useEffect(() => {
+        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                updateToolbar();
+            });
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            updateToolbar();
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(CAN_UNDO_COMMAND, (payload) => {
+            setState((prev) => ({ ...prev, canUndo: payload }));
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(CAN_REDO_COMMAND, (payload) => {
+            setState((prev) => ({ ...prev, canRedo: payload }));
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL));
+    }, [editor, updateToolbar]);
+    // Format commands
+    const formatBold = () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+    const formatItalic = () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+    const formatUnderline = () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
+    const formatStrikethrough = () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough');
+    const formatCode = () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
+    const formatSubscript = () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript');
+    const formatSuperscript = () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript');
+    const undo = () => editor.dispatchCommand(UNDO_COMMAND, undefined);
+    const redo = () => editor.dispatchCommand(REDO_COMMAND, undefined);
+    // Block type commands
+    const formatParagraph = () => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                $setBlocksType(selection, () => $createParagraphNode());
+            }
+        });
+    };
+    const formatHeading = (tag) => {
+        if (state.blockType !== tag) {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    $setBlocksType(selection, () => $createHeadingNode(tag));
+                }
+            });
+        }
+    };
+    const formatQuote = () => {
+        if (state.blockType !== 'quote') {
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    $setBlocksType(selection, () => $createQuoteNode());
+                }
+            });
+        }
+    };
+    const formatBulletList = () => {
+        if (state.blockType !== 'bullet') {
+            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+        }
+    };
+    const formatNumberedList = () => {
+        if (state.blockType !== 'number') {
+            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+        }
+    };
+    const insertLink = () => {
+        if (!state.isLink) {
+            const url = prompt('Enter URL:');
+            if (url) {
+                editor.dispatchCommand(TOGGLE_LINK_COMMAND, url);
+            }
+        }
+        else {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        }
+    };
+    // Check which features are enabled
+    const hasFeature = (key) => features.some((f) => f.key === key);
+    // Check if fixed toolbar should be shown (don't show for floating/inline)
+    const showToolbar = features.some((f) => {
+        // Check by feature key first (more reliable)
+        if (variant === 'fixed') {
+            return f.key === 'fixedToolbar' || f.key === 'fixed-toolbar';
+        }
+        // For inline/floating variants, check toolbar type (but skip fixed toolbar)
+        if (variant === 'inline' || variant === 'floating') {
+            if (f.type === 'toolbar') {
+                return f.position === variant || !f.position;
+            }
+        }
+        return false;
+    });
+    if (!showToolbar)
+        return null;
+    return (_jsxs("div", { className: `editor-toolbar editor-toolbar--${variant}`, children: [hasFeature('history') && (_jsxs("div", { className: "toolbar-group", children: [_jsx("button", { type: "button", disabled: !state.canUndo, onClick: undo, className: "toolbar-btn", title: "Undo (Ctrl+Z)", "aria-label": "Undo", children: "\u21B6" }), _jsx("button", { type: "button", disabled: !state.canRedo, onClick: redo, className: "toolbar-btn", title: "Redo (Ctrl+Y)", "aria-label": "Redo", children: "\u21B7" })] })), hasFeature('heading') && (_jsx("div", { className: "toolbar-group", children: _jsxs("select", { className: "toolbar-select", value: state.blockType, onChange: (e) => {
+                        const value = e.target.value;
+                        if (value === 'paragraph')
+                            formatParagraph();
+                        else if (value.startsWith('h'))
+                            formatHeading(value);
+                        else if (value === 'quote')
+                            formatQuote();
+                    }, children: [_jsx("option", { value: "paragraph", children: "Paragraph" }), _jsx("option", { value: "h1", children: "Heading 1" }), _jsx("option", { value: "h2", children: "Heading 2" }), _jsx("option", { value: "h3", children: "Heading 3" }), _jsx("option", { value: "h4", children: "Heading 4" })] }) })), _jsxs("div", { className: "toolbar-group", children: [hasFeature('bold') && (_jsx("button", { type: "button", onClick: formatBold, className: `toolbar-btn ${state.isBold ? 'active' : ''}`, title: "Bold (Ctrl+B)", "aria-label": "Bold", "aria-pressed": state.isBold, children: _jsx("strong", { children: "B" }) })), hasFeature('italic') && (_jsx("button", { type: "button", onClick: formatItalic, className: `toolbar-btn ${state.isItalic ? 'active' : ''}`, title: "Italic (Ctrl+I)", "aria-label": "Italic", "aria-pressed": state.isItalic, children: _jsx("em", { children: "I" }) })), hasFeature('underline') && (_jsx("button", { type: "button", onClick: formatUnderline, className: `toolbar-btn ${state.isUnderline ? 'active' : ''}`, title: "Underline (Ctrl+U)", "aria-label": "Underline", "aria-pressed": state.isUnderline, children: _jsx("span", { style: { textDecoration: 'underline' }, children: "U" }) })), hasFeature('strikethrough') && (_jsx("button", { type: "button", onClick: formatStrikethrough, className: `toolbar-btn ${state.isStrikethrough ? 'active' : ''}`, title: "Strikethrough", "aria-label": "Strikethrough", "aria-pressed": state.isStrikethrough, children: _jsx("span", { style: { textDecoration: 'line-through' }, children: "S" }) })), hasFeature('code') && (_jsx("button", { type: "button", onClick: formatCode, className: `toolbar-btn ${state.isCode ? 'active' : ''}`, title: "Inline Code", "aria-label": "Inline Code", "aria-pressed": state.isCode, children: '</>' })), hasFeature('subscript') && (_jsxs("button", { type: "button", onClick: formatSubscript, className: `toolbar-btn ${state.isSubscript ? 'active' : ''}`, title: "Subscript", "aria-label": "Subscript", "aria-pressed": state.isSubscript, children: ["X", _jsx("sub", { children: "2" })] })), hasFeature('superscript') && (_jsxs("button", { type: "button", onClick: formatSuperscript, className: `toolbar-btn ${state.isSuperscript ? 'active' : ''}`, title: "Superscript", "aria-label": "Superscript", "aria-pressed": state.isSuperscript, children: ["X", _jsx("sup", { children: "2" })] }))] }), (hasFeature('list') || hasFeature('orderedList') || hasFeature('unorderedList')) && (_jsxs("div", { className: "toolbar-group", children: [_jsx("button", { type: "button", onClick: formatBulletList, className: `toolbar-btn ${state.blockType === 'bullet' ? 'active' : ''}`, title: "Bullet List", "aria-label": "Bullet List", children: "\u2022" }), _jsx("button", { type: "button", onClick: formatNumberedList, className: `toolbar-btn ${state.blockType === 'number' ? 'active' : ''}`, title: "Numbered List", "aria-label": "Numbered List", children: "1." })] })), hasFeature('link') && (_jsx("div", { className: "toolbar-group", children: _jsx("button", { type: "button", onClick: insertLink, className: `toolbar-btn ${state.isLink ? 'active' : ''}`, title: "Insert Link", "aria-label": "Insert Link", "aria-pressed": state.isLink, children: "\uD83D\uDD17" }) })), hasFeature('quote') && (_jsx("div", { className: "toolbar-group", children: _jsx("button", { type: "button", onClick: formatQuote, className: `toolbar-btn ${state.blockType === 'quote' ? 'active' : ''}`, title: "Block Quote", "aria-label": "Block Quote", children: "\"" }) })), hasFeature('upload') && (_jsx("div", { className: "toolbar-group", children: _jsx(ImageUploadButton, {}) }))] }));
+}
+export default ToolbarPlugin;