fluentui-tiptap-editor 1.0.0

package/lib/TiptapEditor.js

@@ -0,0 +1,866 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DefaultButton, PrimaryButton } from '@fluentui/react';
+import { Button, Checkbox, Field, Input, Popover, PopoverSurface, PopoverTrigger, Toolbar, ToolbarButton, Tooltip } from '@fluentui/react-components';
+import { ArrowDownloadRegular, ArrowLeftRegular, ArrowRightRegular, ArrowUploadRegular, ChevronDownRegular, DeleteRegular, DocumentPageBreakRegular, HighlightRegular, LinkDismissRegular, LinkRegular, PaintBrushRegular, TableRegular, TextAlignCenterRegular, TextAlignJustifyRegular, TextAlignLeftRegular, TextAlignRightRegular, TextBoldRegular, TextBulletListRegular, TextCaseLowercaseRegular, TextCaseUppercaseRegular, TextColorRegular, TextItalicRegular, TextNumberListLtrRegular, TextQuoteRegular, TextStrikethroughRegular, TextSubscriptRegular, TextSuperscriptRegular, TextUnderlineRegular, } from '@fluentui/react-icons';
+import { Extension, mergeAttributes, Node } from '@tiptap/core';
+import FontFamily from '@tiptap/extension-font-family';
+import Highlight from '@tiptap/extension-highlight';
+import Image from '@tiptap/extension-image';
+import Link from '@tiptap/extension-link';
+import Placeholder from '@tiptap/extension-placeholder';
+import Subscript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import { TableKit } from '@tiptap/extension-table';
+import TextAlign from '@tiptap/extension-text-align';
+import { Color, TextStyleKit } from '@tiptap/extension-text-style';
+import Underline from '@tiptap/extension-underline';
+import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { DOMParser as PMDOMParser } from 'prosemirror-model';
+import { Plugin } from 'prosemirror-state';
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import './EditorStyle.css';
+export var ContentEditorLevel;
+(function (ContentEditorLevel) {
+    ContentEditorLevel["None"] = "none";
+    ContentEditorLevel["Basic"] = "basic";
+    ContentEditorLevel["Standard"] = "standard";
+    ContentEditorLevel["Pro"] = "pro";
+})(ContentEditorLevel || (ContentEditorLevel = {}));
+const HEADING_OPTIONS = {
+    paragraph: 'Normal',
+    heading1: 'Heading 1',
+    heading2: 'Heading 2',
+    heading3: 'Heading 3',
+    heading4: 'Heading 4',
+    heading5: 'Heading 5',
+    heading6: 'Heading 6',
+};
+const FONT_OPTIONS = ['Arial', 'Courier New', 'Comic Sans MS', 'Georgia', 'Times New Roman', 'Verdana', 'Lucida Serif', 'Trebuchet MS', 'Tahoma'];
+const FONT_SIZE_OPTIONS = Array.from({ length: 69 }, (_, i) => `${i + 8}px`);
+const BlockWrapper = Node.create({
+    name: 'blockWrapper',
+    group: 'block',
+    content: 'block+',
+    defining: true,
+    addAttributes() {
+        return {
+            'data-block': {
+                default: null,
+                parseHTML: (element) => element.getAttribute('data-block'),
+                renderHTML: (attrs) => (attrs['data-block'] ? { 'data-block': attrs['data-block'] } : {}),
+            },
+        };
+    },
+    parseHTML() {
+        return [{ tag: 'div[data-block]' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes(HTMLAttributes), 0];
+    },
+});
+const TextTransformExtension = Extension.create({
+    name: 'textTransform',
+    addOptions() {
+        return {
+            types: ['textStyle'],
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    textTransform: {
+                        default: null,
+                        parseHTML: (element) => element.style.textTransform?.replace(/['"]+/g, '') || null,
+                        renderHTML: (attributes) => {
+                            if (!attributes.textTransform)
+                                return {};
+                            return {
+                                style: `text-transform: ${attributes.textTransform}`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+});
+const getWordCount = (text) => {
+    const trimmed = text.trim();
+    if (!trimmed)
+        return 0;
+    return trimmed.split(/\s+/).length;
+};
+const WordLimitExtension = Extension.create({
+    name: 'characterLimit',
+    addOptions() {
+        return {
+            limit: null,
+        };
+    },
+    addProseMirrorPlugins() {
+        const extension = this;
+        return [
+            new Plugin({
+                filterTransaction: (tr, state) => {
+                    const limit = extension.options.limit;
+                    if (!limit)
+                        return true;
+                    if (!tr.docChanged)
+                        return true;
+                    const oldText = state.doc.textContent;
+                    const newText = tr.doc.textContent;
+                    const oldWordCount = getWordCount(oldText);
+                    const newWordCount = getWordCount(newText);
+                    // Allow delete/backspace/replacements reducing count
+                    if (newWordCount <= oldWordCount) {
+                        return true;
+                    }
+                    // Block new input after limit
+                    if (newWordCount > limit) {
+                        return false;
+                    }
+                    return true;
+                },
+            }),
+        ];
+    },
+});
+const EDITOR_EXTENSIONS = [
+    StarterKit,
+    TextStyleKit.configure({ types: ['textStyle'] }),
+    TextTransformExtension,
+    WordLimitExtension,
+    FontFamily,
+    Subscript,
+    Superscript,
+    Color,
+    Underline,
+    Image.configure({ allowBase64: true }),
+    TableKit.configure({ table: { resizable: true } }),
+    Link.configure({ openOnClick: false, autolink: true }),
+    Highlight.configure({ multicolor: true }),
+    TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    BlockWrapper,
+];
+// Helper function for colors
+function cpHexToRgb(hex) {
+    let h = hex.replace('#', '');
+    if (h.length === 3)
+        h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    if (h.length !== 6 || !/^[0-9a-fA-F]{6}$/.test(h))
+        return [0, 0, 0];
+    const n = parseInt(h, 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function cpRgbToHex(r, g, b) {
+    return ('#' +
+        [r, g, b]
+            .map((v) => Math.max(0, Math.min(255, Math.round(v)))
+            .toString(16)
+            .padStart(2, '0'))
+            .join(''));
+}
+function cpRgbToHsv(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min;
+    let h = 0;
+    if (d > 0) {
+        if (max === r)
+            h = (g - b) / d + (g < b ? 6 : 0);
+        else if (max === g)
+            h = (b - r) / d + 2;
+        else
+            h = (r - g) / d + 4;
+        h *= 60;
+    }
+    return [h, max === 0 ? 0 : d / max, max];
+}
+function cpHsvToRgb(h, s, v) {
+    const c = v * s, x = c * (1 - Math.abs(((h / 60) % 2) - 1)), m = v - c;
+    let r = 0, g = 0, b = 0;
+    if (h < 60) {
+        r = c;
+        g = x;
+    }
+    else if (h < 120) {
+        r = x;
+        g = c;
+    }
+    else if (h < 180) {
+        g = c;
+        b = x;
+    }
+    else if (h < 240) {
+        g = x;
+        b = c;
+    }
+    else if (h < 300) {
+        r = x;
+        b = c;
+    }
+    else {
+        r = c;
+        b = x;
+    }
+    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)];
+}
+const CP_VALID_HEX = (h) => /^#[0-9a-fA-F]{6}$/.test(h);
+const CP_PRESETS = [
+    '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#d9d9d9', '#ffffff', '#980000',
+    '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff'
+];
+function findBlockPositions(editor, kind) {
+    const result = [];
+    editor.state.doc.forEach((node, offset) => {
+        if (node.type.name === 'blockWrapper' && node.attrs['data-block'] === kind) {
+            result.push({ pos: offset, size: node.nodeSize });
+        }
+    });
+    return result;
+}
+function getTableDimensions(editor) {
+    const { state } = editor;
+    let rows = 0;
+    let cols = 0;
+    state.doc.nodesBetween(state.selection.from, state.selection.to, (node) => {
+        if (node.type.name === 'table') {
+            rows = node.childCount;
+            if (rows > 0) {
+                cols = node.child(0).childCount;
+            }
+            return false;
+        }
+    });
+    return { rows, cols };
+}
+function parseHTMLToNode(editor, html) {
+    const container = document.createElement('div');
+    container.innerHTML = html;
+    return PMDOMParser.fromSchema(editor.schema).parse(container);
+}
+const TiptapEditor = forwardRef(({ content, onChange, onChangeJSON, onFocus, onBlur, readOnly = false, autoFocus = false, placeholder, className, width, height, margin, contentHeight, level = ContentEditorLevel.Standard, wordLimit, onWordLimitExceeded, errorMessage, }, ref) => {
+    const [charCount, setCharCount] = useState(0);
+    const [wordCount, setWordCount] = useState(0);
+    const [isEmpty, setIsEmpty] = useState(true);
+    const previousOverLimitRef = useRef(false);
+    const handleUpdate = useCallback(({ editor }) => {
+        onChange?.(editor.getHTML());
+        onChangeJSON?.(editor.getJSON());
+        const text = editor.getText();
+        setCharCount(text.length);
+        setWordCount(getWordCount(text));
+        setIsEmpty(editor.isEmpty);
+    }, [onChange, onChangeJSON]);
+    const isAutoFocus = autoFocus === true;
+    const editor = useEditor({
+        extensions: [
+            ...EDITOR_EXTENSIONS,
+            Placeholder.configure({
+                placeholder: ({ editor }) => {
+                    return editor.customPlaceholder || 'Type something...';
+                },
+            }),
+        ],
+        content,
+        editable: !readOnly,
+        autofocus: isAutoFocus ? 'start' : false,
+        onUpdate: handleUpdate,
+        onFocus: () => onFocus?.(),
+        onBlur: () => onBlur?.(),
+        onCreate: ({ editor }) => {
+            editor.customPlaceholder = placeholder;
+            const text = editor.getText();
+            setCharCount(text.length);
+            setWordCount(getWordCount(text));
+            setIsEmpty(editor.isEmpty);
+            if (isAutoFocus && !readOnly) {
+                requestAnimationFrame(() => {
+                    editor.commands.focus('start');
+                });
+            }
+        },
+        editorProps: {
+            attributes: {
+                class: 'tiptap-prosemirror',
+            },
+        },
+        immediatelyRender: false,
+    });
+    useEffect(() => {
+        editor?.setEditable(!readOnly);
+    }, [editor, readOnly]);
+    useEffect(() => {
+        if (!editor || readOnly)
+            return;
+        const isAutoFocusProp = autoFocus === true;
+        if (isAutoFocusProp) {
+            requestAnimationFrame(() => {
+                if (!editor.isFocused) {
+                    editor.commands.focus('start');
+                }
+            });
+        }
+        else {
+            requestAnimationFrame(() => {
+                if (editor.isFocused) {
+                    editor.commands.blur();
+                }
+            });
+        }
+    }, [editor, autoFocus, readOnly]);
+    useEffect(() => {
+        if (!editor || content === undefined)
+            return;
+        const currentHTML = editor.getHTML();
+        if (currentHTML !== content) {
+            const isPropEmpty = content === '' || content === '<p></p>';
+            const isEditorEmpty = currentHTML === '' || currentHTML === '<p></p>';
+            const text = editor.getText();
+            if (isPropEmpty && isEditorEmpty) {
+                return;
+            }
+            editor.commands.setContent(content, { emitUpdate: false });
+            setCharCount(text.length);
+            setWordCount(getWordCount(text));
+            setIsEmpty(editor.isEmpty);
+        }
+    }, [editor, content]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.customPlaceholder = placeholder;
+        editor.view.dispatch(editor.state.tr);
+    }, [editor, placeholder]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const limitExtension = editor.extensionManager.extensions.find((ext) => ext.name === 'characterLimit');
+        if (limitExtension) {
+            limitExtension.options.limit = wordLimit ?? null;
+        }
+    }, [editor, wordLimit]);
+    const isOverLimit = wordLimit !== undefined &&
+        wordCount > wordLimit;
+    useEffect(() => {
+        if (wordLimit === undefined || !onWordLimitExceeded)
+            return;
+        const wasOverLimit = previousOverLimitRef.current;
+        if (isOverLimit !== wasOverLimit) {
+            onWordLimitExceeded({
+                wordCount,
+                wordLimit,
+                exceeded: isOverLimit,
+            });
+            previousOverLimitRef.current = isOverLimit;
+        }
+    }, [isOverLimit, charCount, wordLimit, onWordLimitExceeded]);
+    const getWordCount = (text) => {
+        const trimmed = text.trim();
+        if (!trimmed)
+            return 0;
+        return trimmed.split(/\s+/).length;
+    };
+    useImperativeHandle(ref, () => ({
+        getHTML: () => editor?.getHTML() ?? '',
+        setValue: (html) => editor?.commands.setContent(html),
+        getJSON: () => editor?.getJSON() ?? { type: 'doc', content: [] },
+        setJSON: (json) => editor?.commands.setContent(json),
+        getText: () => editor?.getText() ?? '',
+        isEmpty: () => editor?.isEmpty ?? true,
+        clear: () => editor?.commands.clearContent(true),
+        insertHTML: (html) => editor?.chain().focus().insertContent(html).run(),
+        focus: () => editor?.commands.focus(),
+        blur: () => editor?.commands.blur(),
+        undo: () => editor?.chain().focus().undo().run(),
+        redo: () => editor?.chain().focus().redo().run(),
+        toggleBold: () => editor?.chain().focus().toggleBold().run(),
+        toggleItalic: () => editor?.chain().focus().toggleItalic().run(),
+        toggleUnderline: () => editor?.chain().focus().toggleUnderline().run(),
+        toggleStrike: () => editor?.chain().focus().toggleStrike().run(),
+        toggleHighlight: (color = '#fef08a') => editor?.chain().focus().toggleHighlight({ color }).run(),
+        setHeading: (level) => {
+            if (!editor)
+                return;
+            level === 0
+                ? editor.chain().focus().setParagraph().run()
+                : editor
+                    .chain()
+                    .focus()
+                    .setHeading({ level: level })
+                    .run();
+        },
+        setFontFamily: (font) => editor?.chain().focus().setFontFamily(font).run(),
+        setFontSize: (size) => editor?.chain().focus().setMark('textStyle', { fontSize: size }).run(),
+        setTextColor: (color) => editor?.chain().focus().setColor(color).run(),
+        setTextAlign: (align) => editor?.chain().focus().setTextAlign(align).run(),
+        transformText: (transform) => {
+            if (!editor)
+                return;
+            const { from, to } = editor.state.selection;
+            editor.commands.command(({ tr, state }) => {
+                state.doc.nodesBetween(from, to, (node, pos) => {
+                    if (!node.isText)
+                        return;
+                    let text = node.text ?? '';
+                    if (transform === 'uppercase')
+                        text = text.toUpperCase();
+                    else if (transform === 'lowercase')
+                        text = text.toLowerCase();
+                    else
+                        text = text.replace(/\b\w/g, (c) => c.toUpperCase());
+                    tr.insertText(text, pos, pos + node.nodeSize);
+                    return false;
+                });
+                return true;
+            });
+        },
+        isActive: (name, attrs) => editor?.isActive(name, attrs) ?? false,
+        hasBlock: (kind) => {
+            if (!editor)
+                return false;
+            let found = false;
+            editor.state.doc.forEach((node) => {
+                if (node.type.name === 'blockWrapper' && node.attrs['data-block'] === kind) {
+                    found = true;
+                }
+            });
+            return found;
+        },
+        upsertBlock: ({ kind, html, position = 'end' }) => {
+            if (!editor)
+                return;
+            const wrappedHTML = `<div data-block="${kind}">${html}</div>`;
+            const parsed = parseHTMLToNode(editor, wrappedHTML);
+            const newNode = parsed.firstChild;
+            if (!newNode)
+                return;
+            const existing = findBlockPositions(editor, kind);
+            editor
+                .chain()
+                .command(({ tr }) => {
+                if (existing.length > 0) {
+                    const [first, ...rest] = existing;
+                    tr.replaceWith(first.pos, first.pos + first.size, newNode);
+                    const delta = newNode.nodeSize - first.size;
+                    [...rest].reverse().forEach(({ pos, size }) => {
+                        tr.delete(pos + delta, pos + delta + size);
+                    });
+                }
+                else {
+                    if (kind === 'signature') {
+                        const isEditorEmpty = tr.doc.childCount === 1 && tr.doc.firstChild?.type.name === 'paragraph' && tr.doc.firstChild?.content.size === 0;
+                        if (isEditorEmpty) {
+                            const insertPos = tr?.doc?.firstChild?.nodeSize;
+                            tr.insert(insertPos, newNode);
+                        }
+                        else {
+                            const lastNode = tr.doc.lastChild;
+                            const insertPos = lastNode && lastNode.type.name === 'paragraph' && lastNode.content.size === 0 ? tr.doc.content.size - lastNode.nodeSize : tr.doc.content.size;
+                            tr.insert(insertPos, newNode);
+                        }
+                    }
+                    else if (position === 'end') {
+                        const lastNode = tr.doc.lastChild;
+                        const insertPos = lastNode && lastNode.type.name === 'paragraph' && lastNode.content.size === 0 ? tr.doc.content.size - lastNode.nodeSize : tr.doc.content.size;
+                        tr.insert(insertPos, newNode);
+                    }
+                    else {
+                        tr.insert(0, newNode);
+                    }
+                }
+                return true;
+            })
+                .run();
+        },
+        removeBlock: (kind) => {
+            if (!editor)
+                return;
+            const blocks = findBlockPositions(editor, kind);
+            if (blocks.length === 0)
+                return;
+            editor
+                .chain()
+                .command(({ tr }) => {
+                [...blocks].reverse().forEach(({ pos, size }) => {
+                    tr.delete(pos, pos + size);
+                });
+                return true;
+            })
+                .run();
+        },
+    }), [editor]);
+    if (!editor)
+        return null;
+    const shouldShowError = isOverLimit;
+    return (_jsxs("div", { className: `tiptap-editor${className ? ` ${className}` : ''}`, style: {
+            width: width ?? '100%',
+            height: height ?? '100%',
+            margin: margin ?? '5px auto',
+            border: shouldShowError
+                ? '1px solid #c4272c'
+                : undefined,
+            backgroundColor: isOverLimit ? '#fafafa' : undefined,
+            transition: 'border-color 0.2s, background-color 0.2s',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [!readOnly && level !== ContentEditorLevel.None && _jsx(ToolBar, { editor: editor, level: level }), !readOnly && level !== ContentEditorLevel.Basic && level !== ContentEditorLevel.None && _jsx(TableMenu, { editor: editor }), _jsx("div", { className: "tiptap-content-wrapper", style: {
+                    flex: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minHeight: 0,
+                    pointerEvents: 'auto',
+                }, children: _jsx(EditorContent, { editor: editor, className: 'tiptap-content', style: { height: contentHeight ?? '100%', flex: 1, display: 'flex', flexDirection: 'column' } }) }), (wordLimit !== undefined || errorMessage) && (_jsxs("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: '8px 16px',
+                    borderTop: '1px solid #e4e4e7',
+                    background: '#fafafa',
+                }, children: [_jsx("div", { style: { flex: 1 }, children: shouldShowError && (_jsx("span", { style: {
+                                color: '#c4272c',
+                                fontSize: '12px',
+                                fontWeight: 600,
+                            }, children: errorMessage || 'Max word limit reached' })) }), wordLimit !== undefined && (_jsxs("span", { style: {
+                            fontSize: '11px',
+                            color: isOverLimit ? '#c4272c' : '#888',
+                            fontWeight: isOverLimit ? 600 : 400,
+                            transition: 'color 0.2s, font-weight 0.2s',
+                        }, children: [wordCount, " / ", wordLimit, " words"] }))] }))] }));
+});
+export default memo(TiptapEditor);
+const LinkComponent = memo(({ editor }) => {
+    const [linkUrl, setLinkUrl] = useState('');
+    const [linkText, setLinkText] = useState('');
+    const [isOpen, setIsOpen] = useState(false);
+    const handleSetLink = useCallback(() => {
+        const url = linkUrl.trim();
+        const text = linkText.trim();
+        if (!url || !text)
+            return;
+        editor.chain().focus().insertContent(`<a href="${url}" target="_blank">${text}</a>`).run();
+        setIsOpen(false);
+    }, [editor, linkUrl, linkText]);
+    const handleOpenChange = useCallback((_, data) => {
+        setIsOpen(data.open);
+        if (data.open) {
+            setLinkText(editor.state.doc.textBetween(editor.state.selection.from, editor.state.selection.to));
+        }
+        else {
+            setLinkText('');
+            setLinkUrl('');
+        }
+    }, [editor]);
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: handleOpenChange, positioning: 'below', withArrow: true, children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: (triggerProps) => {
+                    const { ref, ...props } = triggerProps;
+                    return (_jsx("span", { ref: ref, ...props, className: 'tiptap-link-trigger', children: _jsx(Tooltip, { content: 'Add Link', relationship: 'label', children: _jsx(ToolbarButton, { appearance: 'subtle', icon: _jsx(LinkRegular, {}), className: `tiptap-toolbar-btn ${isOpen ? 'is-active' : ''}` }) }) }));
+                } }), _jsxs(PopoverSurface, { className: 'tiptap-link-popover', children: [_jsxs("div", { className: 'tiptap-link-row', children: [_jsx("label", { children: "Text" }), _jsx(Field, { children: _jsx(Input, { placeholder: 'text', value: linkText, onChange: (_, d) => setLinkText(d.value) }) })] }), _jsxs("div", { className: 'tiptap-link-row', children: [_jsx("label", { children: "Link" }), _jsx(Field, { children: _jsx(Input, { type: 'url', placeholder: 'Link', value: linkUrl, onChange: (_, d) => setLinkUrl(d.value) }) })] }), _jsxs("div", { className: 'tiptap-link-actions', children: [_jsx(DefaultButton, { onClick: () => setIsOpen(false), children: "Cancel" }), _jsx(PrimaryButton, { onClick: handleSetLink, disabled: !linkUrl.trim() || !linkText.trim(), children: "Add" })] })] })] }));
+});
+const ColorPickerPopover = memo(({ label, icon, tooltip, defaultColor, onApply }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [committed, setCommitted] = useState(defaultColor);
+    const [hue, setHue] = useState(0);
+    const [sat, setSat] = useState(0);
+    const [val, setVal] = useState(0);
+    const [hexInput, setHexInput] = useState(defaultColor);
+    const hRef = useRef(0);
+    const sRef = useRef(0);
+    const vRef = useRef(0);
+    const currentHex = useMemo(() => cpRgbToHex(...cpHsvToRgb(hue, sat, val)), [hue, sat, val]);
+    const hueColor = useMemo(() => cpRgbToHex(...cpHsvToRgb(hue, 1, 1)), [hue]);
+    const applyHsv = useCallback((h, s, v) => {
+        hRef.current = h;
+        sRef.current = s;
+        vRef.current = v;
+        setHue(h);
+        setSat(s);
+        setVal(v);
+        setHexInput(cpRgbToHex(...cpHsvToRgb(h, s, v)));
+    }, []);
+    const applyHex = useCallback((hex) => {
+        if (!CP_VALID_HEX(hex))
+            return;
+        const [r, g, b] = cpHexToRgb(hex);
+        const [h, s, v] = cpRgbToHsv(r, g, b);
+        applyHsv(h, s, v);
+    }, [applyHsv]);
+    const handleSvPointerDown = useCallback((e) => {
+        e.currentTarget.setPointerCapture(e.pointerId);
+        const rect = e.currentTarget.getBoundingClientRect();
+        const ns = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        const nv = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));
+        applyHsv(hRef.current, ns, nv);
+    }, [applyHsv]);
+    const handleSvPointerMove = useCallback((e) => {
+        if (e.buttons === 0)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const ns = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        const nv = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));
+        applyHsv(hRef.current, ns, nv);
+    }, [applyHsv]);
+    const handleHuePointerDown = useCallback((e) => {
+        e.currentTarget.setPointerCapture(e.pointerId);
+        const rect = e.currentTarget.getBoundingClientRect();
+        const nh = Math.max(0, Math.min(360, ((e.clientX - rect.left) / rect.width) * 360));
+        applyHsv(nh, sRef.current, vRef.current);
+    }, [applyHsv]);
+    const handleHuePointerMove = useCallback((e) => {
+        if (e.buttons === 0)
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const nh = Math.max(0, Math.min(360, ((e.clientX - rect.left) / rect.width) * 360));
+        applyHsv(nh, sRef.current, vRef.current);
+    }, [applyHsv]);
+    const handleHexInputChange = useCallback((_, data) => {
+        const v = data.value;
+        setHexInput(v);
+        if (CP_VALID_HEX(v))
+            applyHex(v);
+    }, [applyHex]);
+    const handleHexInputBlur = useCallback(() => {
+        if (!CP_VALID_HEX(hexInput))
+            setHexInput(currentHex);
+    }, [hexInput, currentHex]);
+    const handleOpenChange = useCallback((_, data) => {
+        setIsOpen(data.open);
+        if (data.open)
+            applyHex(committed);
+    }, [committed, applyHex]);
+    const handleApply = useCallback(() => {
+        setCommitted(currentHex);
+        onApply(currentHex);
+        setIsOpen(false);
+    }, [currentHex, onApply]);
+    const handleClose = useCallback(() => setIsOpen(false), []);
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: handleOpenChange, positioning: 'below', children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: (tp) => {
+                    const { ref, ...props } = tp;
+                    return (_jsx("span", { ref: ref, ...props, children: _jsx(Tooltip, { content: tooltip, relationship: 'label', children: _jsx(ToolbarButton, { appearance: 'subtle', icon: icon, className: `tiptap-toolbar-btn ${isOpen ? 'is-active' : ''}` }) }) }));
+                } }), _jsxs(PopoverSurface, { className: 'tiptap-color-popover cp-surface', children: [_jsxs("div", { className: 'cp-header', children: [_jsx("div", { className: 'cp-preview', style: { background: currentHex } }), _jsx("span", { className: 'cp-label', children: label })] }), _jsxs("div", { className: 'cp-hex-row', children: [_jsx("span", { className: 'cp-hex-label', children: "Hex" }), _jsx("div", { className: 'cp-hex-input-wrap', children: _jsx(Field, { children: _jsx(Input, { className: 'cp-hex-input', value: hexInput, maxLength: 7, onChange: handleHexInputChange, onBlur: handleHexInputBlur, spellCheck: false }) }) })] }), _jsx("div", { className: 'cp-presets', children: CP_PRESETS.map((c) => (_jsx("button", { className: `cp-swatch${currentHex.toLowerCase() === c.toLowerCase() ? ' cp-swatch--active' : ''}`, style: { background: c }, title: c, onClick: () => applyHex(c) }, c))) }), _jsxs("div", { className: 'cp-sv-area', onPointerDown: handleSvPointerDown, onPointerMove: handleSvPointerMove, children: [_jsx("div", { className: 'cp-sv-hue', style: { background: hueColor } }), _jsx("div", { className: 'cp-sv-white' }), _jsx("div", { className: 'cp-sv-black' }), _jsx("div", { className: 'cp-sv-thumb', style: { left: `${sat * 100}%`, top: `${(1 - val) * 100}%` } })] }), _jsx("div", { className: 'cp-hue-area', onPointerDown: handleHuePointerDown, onPointerMove: handleHuePointerMove, children: _jsx("div", { className: 'cp-hue-thumb', style: { left: `${(hue / 360) * 100}%` } }) }), _jsx("div", { className: 'cp-active-preview', style: { background: currentHex } }), _jsxs("div", { className: 'cp-actions', children: [_jsx(PrimaryButton, { onClick: handleApply, children: "Apply" }), _jsx(DefaultButton, { onClick: handleClose, children: "Close" })] })] })] }));
+});
+const TableComponent = memo(({ editor }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [rows, setRows] = useState('');
+    const [cols, setCols] = useState('');
+    const handleInsertTable = useCallback(() => {
+        const r = Number(rows);
+        const c = Number(cols);
+        if (!r || !c)
+            return;
+        editor
+            .chain()
+            .focus()
+            .insertTable({
+            rows: r,
+            cols: c,
+            withHeaderRow: true,
+        })
+            .run();
+        setIsOpen(false);
+    }, [editor, rows, cols]);
+    return (_jsxs(Popover, { open: isOpen, onOpenChange: (_, d) => {
+            setIsOpen(d.open);
+            if (!d.open) {
+                setRows('');
+                setCols('');
+            }
+        }, positioning: 'below', withArrow: true, children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: (tp) => {
+                    const { ref, ...props } = tp;
+                    return (_jsx("span", { ref: ref, ...props, children: _jsx(Tooltip, { content: 'Insert Table', relationship: 'label', children: _jsx(ToolbarButton, { appearance: 'subtle', icon: _jsx(TableRegular, {}), className: `tiptap-toolbar-btn ${isOpen ? 'is-active' : ''}` }) }) }));
+                } }), _jsxs(PopoverSurface, { className: 'tiptap-table-popover', children: [_jsxs("div", { className: 'tiptap-table-row', children: [_jsx("label", { children: "Rows" }), _jsx(Field, { children: _jsx(Input, { placeholder: 'Row', type: 'number', min: 1, value: rows, onChange: (_, d) => setRows(d.value) }) })] }), _jsxs("div", { className: 'tiptap-table-row', children: [_jsx("label", { children: "Columns" }), _jsx(Field, { children: _jsx(Input, { placeholder: 'Column', type: 'number', min: 1, value: cols, onChange: (_, d) => setCols(d.value) }) })] }), _jsxs("div", { className: 'tiptap-table-actions', children: [_jsx(DefaultButton, { onClick: () => {
+                                    setIsOpen(false);
+                                    setRows('');
+                                    setCols('');
+                                }, children: "Cancel" }), _jsx(PrimaryButton, { onClick: () => {
+                                    handleInsertTable();
+                                    setRows('');
+                                    setCols('');
+                                }, disabled: !String(rows).trim() || !String(cols).trim(), children: "Add" })] })] })] }));
+});
+const TableMenu = memo(({ editor }) => {
+    const [open, setOpen] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const [position, setPosition] = useState({ top: 0, left: 0 });
+    const prevPos = useRef({ top: 0, left: 0 });
+    useEffect(() => {
+        if (!editor)
+            return;
+        const update = () => {
+            if (!editor.isActive('table')) {
+                setVisible(false);
+                return;
+            }
+            const { from } = editor.state.selection;
+            const domAtPos = editor.view.domAtPos(from);
+            let node = domAtPos.node;
+            if (node.nodeType === 3)
+                node = node.parentElement;
+            const cell = node.closest('td, th');
+            if (!cell) {
+                setVisible(false);
+                return;
+            }
+            const cellRect = cell.getBoundingClientRect();
+            const editorEl = editor.view.dom.closest('.tiptap-content');
+            if (!editorEl)
+                return;
+            const editorRect = editorEl.getBoundingClientRect();
+            const top = cellRect.top - editorRect.top + editorEl.scrollTop + cellRect.height / 2;
+            const left = cellRect.right - editorRect.left + editorEl.scrollLeft;
+            const cellText = cell.innerText?.trim();
+            const isEmpty = !cellText;
+            if (prevPos.current.top !== top || prevPos.current.left !== left) {
+                prevPos.current = { top, left };
+                setPosition({ top, left });
+            }
+            setVisible(isEmpty);
+        };
+        update();
+        editor.on('selectionUpdate', update);
+        editor.on('transaction', update);
+        window.addEventListener('resize', update);
+        window.addEventListener('scroll', update, true);
+        return () => {
+            editor.off('selectionUpdate', update);
+            editor.off('transaction', update);
+            window.removeEventListener('resize', update);
+            window.removeEventListener('scroll', update, true);
+        };
+    }, [editor]);
+    if (!visible)
+        return null;
+    return (_jsx("div", { className: 'table-menu-wrapper', style: position, children: _jsxs(Popover, { open: open, onOpenChange: (_, d) => setOpen(d.open), positioning: 'below-start', withArrow: true, children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsx(Button, { appearance: 'subtle', className: 'table-trigger-btn', children: _jsx(ChevronDownRegular, { fontSize: 12 }) }) }), _jsxs(PopoverSurface, { className: 'table-dropdown-surface', children: [_jsxs("div", { className: 'table-dropdown-section', children: [_jsx("div", { className: 'table-dropdown-title', children: "Insert" }), [
+                                    { icon: _jsx(ArrowUploadRegular, {}), label: 'Add row above', action: () => editor.chain().focus().addRowBefore().run() },
+                                    { icon: _jsx(ArrowDownloadRegular, {}), label: 'Add row below', action: () => editor.chain().focus().addRowAfter().run() },
+                                    { icon: _jsx(ArrowLeftRegular, {}), label: 'Add column left', action: () => editor.chain().focus().addColumnBefore().run() },
+                                    { icon: _jsx(ArrowRightRegular, {}), label: 'Add column right', action: () => editor.chain().focus().addColumnAfter().run() },
+                                ].map(({ icon, label, action }) => (_jsx(Button, { appearance: 'subtle', icon: icon, className: 'table-dropdown-btn', onClick: () => {
+                                        action();
+                                        setOpen(false);
+                                    }, children: label }, label)))] }), _jsx("div", { className: 'table-dropdown-divider' }), _jsxs("div", { className: 'table-dropdown-section', children: [_jsx("div", { className: 'table-dropdown-title', children: "Delete" }), [
+                                    {
+                                        label: 'Delete row',
+                                        action: () => {
+                                            const { rows } = getTableDimensions(editor);
+                                            rows <= 1 ? editor.chain().focus().deleteTable().run() : editor.chain().focus().deleteRow().run();
+                                        },
+                                    },
+                                    {
+                                        label: 'Delete column',
+                                        action: () => {
+                                            const { cols } = getTableDimensions(editor);
+                                            cols <= 1 ? editor.chain().focus().deleteTable().run() : editor.chain().focus().deleteColumn().run();
+                                        },
+                                    },
+                                    {
+                                        label: 'Delete table',
+                                        action: () => editor.chain().focus().deleteTable().run(),
+                                    },
+                                ].map(({ label, action }) => (_jsx(Button, { appearance: 'subtle', className: 'table-dropdown-btn danger', icon: _jsx(DeleteRegular, {}), onClick: () => {
+                                        action();
+                                        setOpen(false);
+                                    }, children: label }, label)))] })] })] }) }));
+});
+const ToolBar = memo(({ editor, level = ContentEditorLevel.Basic }) => {
+    const isBold = useEditorState({ editor, selector: (c) => c.editor.isActive('bold') });
+    const isItalic = useEditorState({ editor, selector: (c) => c.editor.isActive('italic') });
+    const isUnderline = useEditorState({ editor, selector: (c) => c.editor.isActive('underline') });
+    const isStrike = useEditorState({ editor, selector: (c) => c.editor.isActive('strike') });
+    const isSubscript = useEditorState({ editor, selector: (c) => c.editor.isActive('subscript') });
+    const isSuperscript = useEditorState({ editor, selector: (c) => c.editor.isActive('superscript') });
+    const isHighlight = useEditorState({ editor, selector: (c) => c.editor.isActive('highlight') });
+    const isBulletList = useEditorState({ editor, selector: (c) => c.editor.isActive('bulletList') });
+    const isOrderedList = useEditorState({ editor, selector: (c) => c.editor.isActive('orderedList') });
+    const isBlockquote = useEditorState({ editor, selector: (c) => c.editor.isActive('blockquote') });
+    const isLink = useEditorState({ editor, selector: (c) => c.editor.isActive('link') });
+    const isAlignLeft = useEditorState({ editor, selector: (c) => c.editor.isActive({ textAlign: 'left' }) });
+    const isAlignCenter = useEditorState({ editor, selector: (c) => c.editor.isActive({ textAlign: 'center' }) });
+    const isAlignRight = useEditorState({ editor, selector: (c) => c.editor.isActive({ textAlign: 'right' }) });
+    const isAlignJustify = useEditorState({ editor, selector: (c) => c.editor.isActive({ textAlign: 'justify' }) });
+    const fontFamily = useEditorState({ editor, selector: (c) => c.editor.getAttributes('textStyle')?.fontFamily || 'Lucida Serif' });
+    const currentFontSize = useEditorState({ editor, selector: (c) => c.editor.getAttributes('textStyle')?.fontSize || '15px' });
+    const textTransform = useEditorState({ editor, selector: (c) => c.editor.getAttributes('textStyle')?.textTransform || '' });
+    const isHeading1 = useEditorState({ editor, selector: (c) => c.editor.isActive('heading', { level: 1 }) });
+    const isHeading2 = useEditorState({ editor, selector: (c) => c.editor.isActive('heading', { level: 2 }) });
+    const isHeading3 = useEditorState({ editor, selector: (c) => c.editor.isActive('heading', { level: 3 }) });
+    const isHeading4 = useEditorState({ editor, selector: (c) => c.editor.isActive('heading', { level: 4 }) });
+    const isHeading5 = useEditorState({ editor, selector: (c) => c.editor.isActive('heading', { level: 5 }) });
+    const isHeading6 = useEditorState({ editor, selector: (c) => c.editor.isActive('heading', { level: 6 }) });
+    const selectedHeading = useMemo(() => {
+        if (isHeading1)
+            return 'heading1';
+        if (isHeading2)
+            return 'heading2';
+        if (isHeading3)
+            return 'heading3';
+        if (isHeading4)
+            return 'heading4';
+        if (isHeading5)
+            return 'heading5';
+        if (isHeading6)
+            return 'heading6';
+        return 'paragraph';
+    }, [isHeading1, isHeading2, isHeading3, isHeading4, isHeading5, isHeading6]);
+    const handleHeadingChange = useCallback((v) => {
+        if (v === 'paragraph') {
+            editor.chain().focus().setParagraph().run();
+            return;
+        }
+        editor
+            .chain()
+            .focus()
+            .setHeading({ level: parseInt(v.replace('heading', '')) })
+            .run();
+    }, [editor]);
+    const handleFontFamilyChange = useCallback((f) => editor.chain().focus().setFontFamily(f).run(), [editor]);
+    const handleFontSizeChange = useCallback((s) => editor.chain().focus().setMark('textStyle', { fontSize: s }).run(), [editor]);
+    const applyTextTransform = useCallback((t) => {
+        const current = editor.getAttributes('textStyle')?.textTransform;
+        if (current === t) {
+            editor.chain().focus().setMark('textStyle', { textTransform: null }).run();
+        }
+        else {
+            editor.chain().focus().setMark('textStyle', { textTransform: t }).run();
+        }
+    }, [editor]);
+    const applyTextColor = useCallback((c) => editor.chain().focus().setColor(c).run(), [editor]);
+    const applyHighlight = useCallback((c) => editor.chain().focus().toggleHighlight({ color: c }).run(), [editor]);
+    const btn = (active) => `tiptap-toolbar-btn${active ? ' is-active' : ''}`;
+    return (_jsxs(Toolbar, { "aria-label": 'Editor toolbar', className: 'tiptap-toolbar', children: [_jsx(Tooltip, { content: 'Bold', relationship: 'label', children: _jsx(ToolbarButton, { appearance: 'subtle', icon: _jsx(TextBoldRegular, {}), className: btn(isBold), onClick: () => editor.chain().focus().toggleBold().run() }) }), _jsx(Tooltip, { content: 'Italic', relationship: 'label', children: _jsx(ToolbarButton, { appearance: 'subtle', icon: _jsx(TextItalicRegular, {}), className: btn(isItalic), onClick: () => editor.chain().focus().toggleItalic().run() }) }), _jsx(Tooltip, { content: 'Underline', relationship: 'label', children: _jsx(ToolbarButton, { appearance: 'subtle', icon: _jsx(TextUnderlineRegular, {}), className: btn(isUnderline), onClick: () => editor.chain().focus().toggleUnderline().run() }) }), _jsx("div", { className: 'tiptap-divider' }), _jsx(ColorPickerPopover, { label: 'Text color', icon: _jsx(TextColorRegular, {}), tooltip: 'Text Color', defaultColor: '#000000', onApply: applyTextColor }), _jsx(ColorPickerPopover, { label: 'Background color', icon: _jsx(PaintBrushRegular, {}), tooltip: 'Background Color', defaultColor: '#fef08a', onApply: applyHighlight }), _jsx("div", { className: 'tiptap-divider' }), isLink ? (_jsx(Tooltip, { content: 'Remove Link', relationship: 'label', children: _jsx(ToolbarButton, { appearance: 'subtle', icon: _jsx(LinkDismissRegular, {}), className: 'tiptap-toolbar-btn is-active', onClick: () => editor.chain().focus().extendMarkRange('link').unsetLink().run() }) })) : (_jsx(LinkComponent, { editor: editor })), level !== ContentEditorLevel.Basic && _jsx(TableComponent, { editor: editor }), level !== ContentEditorLevel.Basic && _jsx("div", { className: 'tiptap-divider' }), _jsx(HeadingDropdown, { selected: selectedHeading, onChange: handleHeadingChange }), _jsx("div", { className: 'tiptap-divider' }), _jsx(FontFamilyDropdown, { fontFamily: fontFamily, onChange: handleFontFamilyChange }), _jsx("div", { className: 'tiptap-divider' }), _jsx(FontSizeDropdown, { currentSize: currentFontSize, onChange: handleFontSizeChange }), _jsx("div", { className: 'tiptap-divider' }), _jsx(TextToolsDropdown, { editor: editor, textTransform: textTransform, isStrike: isStrike, isSubscript: isSubscript, isSuperscript: isSuperscript, isHighlight: isHighlight, isBulletList: isBulletList, isOrderedList: isOrderedList, isBlockquote: isBlockquote, onTransform: applyTextTransform }), _jsx("div", { className: 'tiptap-divider' }), _jsx(AlignDropdown, { editor: editor, isAlignLeft: isAlignLeft, isAlignCenter: isAlignCenter, isAlignRight: isAlignRight, isAlignJustify: isAlignJustify })] }));
+});
+const HeadingDropdown = memo(({ selected, onChange }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsxs(Popover, { positioning: 'below-start', withArrow: true, open: isOpen, onOpenChange: (_, d) => setIsOpen(d.open), children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsxs("button", { className: `heading-trigger ${isOpen ? 'active' : ''}`, children: [_jsx("span", { children: HEADING_OPTIONS[selected] }), _jsx(ChevronDownRegular, {})] }) }), _jsx(PopoverSurface, { className: 'heading-menu', children: Object.entries(HEADING_OPTIONS).map(([v, label]) => (_jsx("button", { className: `heading-menu-item ${selected === v ? 'active' : ''}`, onClick: () => {
+                        onChange(v);
+                        setIsOpen(false);
+                    }, children: label }, v))) })] }));
+});
+const FontFamilyDropdown = memo(({ fontFamily, onChange }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsxs(Popover, { positioning: 'below-start', withArrow: true, open: isOpen, onOpenChange: (_, d) => setIsOpen(d.open), children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsxs("button", { className: `heading-trigger font-family-trigger ${isOpen ? 'active' : ''}`, children: [_jsx("span", { style: { fontFamily }, children: fontFamily }), _jsx(ChevronDownRegular, {})] }) }), _jsx(PopoverSurface, { className: 'heading-menu font-family-menu', children: FONT_OPTIONS.map((f) => (_jsxs("button", { className: `heading-menu-item ${fontFamily === f ? 'active' : ''}`, style: { fontFamily: f }, onClick: () => {
+                        onChange(f);
+                        setIsOpen(false);
+                    }, children: [_jsx("span", { children: f }), fontFamily === f && _jsx("span", { children: "\u2713" })] }, f))) })] }));
+});
+const FontSizeDropdown = memo(({ currentSize, onChange }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsxs(Popover, { positioning: 'below-start', withArrow: true, open: isOpen, onOpenChange: (_, d) => setIsOpen(d.open), children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsxs("button", { className: `heading-trigger font-size-trigger ${isOpen ? 'active' : ''}`, children: [_jsx("span", { children: currentSize }), _jsx(ChevronDownRegular, {})] }) }), _jsx(PopoverSurface, { className: 'heading-menu font-size-menu', children: FONT_SIZE_OPTIONS.map((s) => (_jsxs("button", { className: `heading-menu-item ${currentSize === s ? 'active' : ''}`, onClick: () => {
+                        onChange(s);
+                        setIsOpen(false);
+                    }, children: [_jsx("span", { children: s }), currentSize === s && _jsx("span", { children: "\u2713" })] }, s))) })] }));
+});
+const TextToolsDropdown = memo((props) => {
+    const { editor, textTransform, isStrike, isSubscript, isSuperscript, isHighlight, isBulletList, isOrderedList, isBlockquote, onTransform } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const renderItem = (label, icon, isActive, onClick) => (_jsxs("button", { className: `heading-menu-item ${isActive ? 'active' : ''}`, onClick: onClick, children: [_jsx(Checkbox, { checked: isActive, tabIndex: -1, style: { pointerEvents: 'none' } }), icon, _jsx("span", { children: label })] }));
+    return (_jsxs(Popover, { positioning: 'below-start', withArrow: true, open: isOpen, onOpenChange: (_, d) => setIsOpen(d.open), children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsxs("button", { className: `heading-trigger text-tools-trigger ${isOpen ? 'active' : ''}`, children: [_jsx("span", { children: "Text" }), _jsx(ChevronDownRegular, {})] }) }), _jsxs(PopoverSurface, { className: 'heading-menu text-tools-menu', children: [renderItem('Uppercase', _jsx(TextCaseUppercaseRegular, {}), textTransform === 'uppercase', () => onTransform('uppercase')), renderItem('Lowercase', _jsx(TextCaseLowercaseRegular, {}), textTransform === 'lowercase', () => onTransform('lowercase')), renderItem('Capitalize', _jsx(TextCaseUppercaseRegular, {}), textTransform === 'capitalize', () => onTransform('capitalize')), _jsx("div", { className: 'text-tools-divider' }), renderItem('Strikethrough', _jsx(TextStrikethroughRegular, {}), isStrike, () => editor.chain().focus().toggleStrike().run()), renderItem('Subscript', _jsx(TextSubscriptRegular, {}), isSubscript, () => editor.chain().focus().toggleSubscript().run()), renderItem('Superscript', _jsx(TextSuperscriptRegular, {}), isSuperscript, () => editor.chain().focus().toggleSuperscript().run()), renderItem('Highlight', _jsx(HighlightRegular, {}), isHighlight, () => editor.chain().focus().toggleHighlight().run()), _jsx("div", { className: 'text-tools-divider' }), renderItem('Bullet list', _jsx(TextBulletListRegular, {}), isBulletList, () => editor.chain().focus().toggleBulletList().run()), renderItem('Number list', _jsx(TextNumberListLtrRegular, {}), isOrderedList, () => editor.chain().focus().toggleOrderedList().run()), renderItem('Page break', _jsx(DocumentPageBreakRegular, {}), false, () => editor.chain().focus().setHardBreak().run()), renderItem('Quote', _jsx(TextQuoteRegular, {}), isBlockquote, () => editor.chain().focus().toggleBlockquote().run())] })] }));
+});
+const AlignDropdown = memo((props) => {
+    const { editor, isAlignLeft, isAlignCenter, isAlignRight, isAlignJustify } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsxs(Popover, { positioning: 'below-start', withArrow: true, open: isOpen, onOpenChange: (_, d) => setIsOpen(d.open), children: [_jsx(PopoverTrigger, { disableButtonEnhancement: true, children: _jsxs("button", { className: `heading-trigger text-tools-trigger ${isOpen ? 'active' : ''}`, children: [_jsx("span", { children: "Align" }), _jsx(ChevronDownRegular, {})] }) }), _jsxs(PopoverSurface, { className: 'heading-menu text-tools-menu', children: [_jsxs("button", { className: `heading-menu-item ${isAlignLeft ? 'active' : ''}`, onClick: () => editor.chain().focus().setTextAlign('left').run(), children: [_jsx(TextAlignLeftRegular, {}), _jsx("span", { children: "Left Align" })] }), _jsxs("button", { className: `heading-menu-item ${isAlignCenter ? 'active' : ''}`, onClick: () => editor.chain().focus().setTextAlign('center').run(), children: [_jsx(TextAlignCenterRegular, {}), _jsx("span", { children: "Center Align" })] }), _jsxs("button", { className: `heading-menu-item ${isAlignRight ? 'active' : ''}`, onClick: () => editor.chain().focus().setTextAlign('right').run(), children: [_jsx(TextAlignRightRegular, {}), _jsx("span", { children: "Right Align" })] }), _jsxs("button", { className: `heading-menu-item ${isAlignJustify ? 'active' : ''}`, onClick: () => editor.chain().focus().setTextAlign('justify').run(), children: [_jsx(TextAlignJustifyRegular, {}), _jsx("span", { children: "Justify Align" })] })] })] }));
+});