@catalystsoftware/ui 1.0.12 → 1.0.14

package/dist/components/catalyst-ui/tools/rich-text-editor.tsx

@@ -0,0 +1,1994 @@
+import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { Type, Bold, Italic, Underline, List, ListOrdered, Quote, H1, H2, H3, H4, H5, Code, Link, AlignLeft, AlignCenter, AlignRight, Sparkles, Undo, Redo, Checkbox, Strikethrough, Subscript, Superscript, Table, TableColumn, TableRow, Image, Highlight, At, FileExport, BracketsAngle, LineDashed, AlignJustified, MoodBoy, ColorPicker as ColorPickerIcon, Check, } from "@catalystsoftware/icons";
+import { Button, Drawer, TooltipProvider, Tooltip, TooltipContent, TooltipTrigger, Input, Skeleton, Separator, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, cn, Dock, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "~/components/catalyst-ui";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "~/components/catalyst-ui";
+import { Popover, PopoverTrigger, PopoverContent, PopoverClose, PopoverHeader, PopoverFooter, PopoverTitle, PopoverDescription, PopoverAnchor, } from "~/components/catalyst-ui";
+import { FlickeringGrid, } from '~/components/catalyst-ui/utils/flickering-grid';
+import { ColorPicker3, ColorPickerAlpha3, ColorPickerEyeDropper3, ColorPickerFormat3, ColorPickerHue3, ColorPickerOutput3, ColorPickerSelection3, } from '~/components/catalyst-ui';
+import { ColorPicker1, } from '~/components/catalyst-ui';
+
+
+
+const RTE_LOCAL_STORAGE_KEY = "catalyst/rte";
+const FONT_SIZES = [8, 10, 12, 14, 16, 18, 20, 24, 26, 28, 30, 32, 34, 36, 38, 44];
+const FONT_STYLE = ["font-mono", "font-sans", "font-serif", "font-mono", "font-geist", "mono-text", "font-noto", "font-open-sans"];
+const LINE_HEIGHT = ['1', '1.15', '1.5', '2', '2.5', '3'];
+const EMOJIES = []
+
+
+class History {
+    constructor() {
+        this.stack = [];
+        this.currentIndex = -1;
+        this.maxSize = 50;
+    }
+
+    push(content) {
+        if (this.currentIndex < this.stack.length - 1) {
+            this.stack = this.stack.slice(0, this.currentIndex + 1);
+        }
+        this.stack.push(content);
+        if (this.stack.length > this.maxSize) {
+            this.stack.shift();
+        } else {
+            this.currentIndex++;
+        }
+    }
+
+    undo() {
+        if (this.canUndo()) {
+            this.currentIndex--;
+            return this.stack[this.currentIndex];
+        }
+        return null;
+    }
+
+    redo() {
+        if (this.canRedo()) {
+            this.currentIndex++;
+            return this.stack[this.currentIndex];
+        }
+        return null;
+    }
+
+    canUndo() {
+        return this.currentIndex > 0;
+    }
+
+    canRedo() {
+        return this.currentIndex < this.stack.length - 1;
+    }
+}
+
+
+class EditorCommands {
+    constructor(editorRef) {
+        this.editor = editorRef;
+    }
+
+    execCommand(command, value = null) {
+        document.execCommand(command, false, value);
+    }
+
+    toggleInlineStyle(tag) {
+        this.execCommand('formatBlock', tag);
+    }
+
+    insertBlock(tag) {
+        this.execCommand('formatBlock', `<${tag}>`);
+    }
+
+    wrapSelection(tag, attrs = {}) {
+        const selection = window.getSelection();
+        if (!selection.rangeCount) return;
+
+        const range = selection.getRangeAt(0);
+        const element = document.createElement(tag);
+
+        Object.entries(attrs).forEach(([key, value]) => {
+            element.setAttribute(key, value);
+        });
+
+        try {
+            range.surroundContents(element);
+        } catch (e) {
+            element.appendChild(range.extractContents());
+            range.insertNode(element);
+        }
+    }
+
+    insertOrderedList() {
+        this.execCommand('insertOrderedList');
+    }
+
+    insertUnorderedList() {
+        this.execCommand('insertUnorderedList');
+    }
+
+    insertTaskList() {
+        const selection = window.getSelection();
+        if (!selection.rangeCount) return;
+
+        const ul = document.createElement('ul');
+        ul.style.listStyleType = 'none';
+
+        const li = document.createElement('li');
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.style.marginRight = '8px';
+
+        li.appendChild(checkbox);
+        li.appendChild(document.createTextNode('Task item'));
+        ul.appendChild(li);
+
+        const range = selection.getRangeAt(0);
+        range.insertNode(ul);
+    }
+
+    insertStrike() {
+        this.execCommand('strikeThrough');
+    }
+
+    insertSubscript() {
+        this.execCommand('subscript');
+    }
+
+    insertSuperscript() {
+        this.execCommand('superscript');
+    }
+
+    setInsertTable(dimensions = '2x2') {
+        const [rows, cols] = dimensions.split('x').map(Number);
+        const table = document.createElement('table');
+        table.style.border = '1px solid #ccc';
+        table.style.borderCollapse = 'collapse';
+        table.style.width = '100%';
+
+        for (let i = 0; i < rows; i++) {
+            const tr = document.createElement('tr');
+            for (let j = 0; j < cols; j++) {
+                const td = document.createElement('td');
+                td.style.border = '1px solid #ccc';
+                td.style.padding = '8px';
+                td.textContent = '\u00A0'; // Non-breaking space
+                tr.appendChild(td);
+            }
+            table.appendChild(tr);
+        }
+
+        this.execCommand('insertHTML', table.outerHTML);
+    }
+
+    setInsertColumn() {
+        const selection = window.getSelection();
+        if (!selection.rangeCount) return;
+
+        let node = selection.anchorNode;
+        while (node && node.tagName !== 'TABLE') {
+            node = node.parentElement;
+        }
+
+        if (node && node.tagName === 'TABLE') {
+            const rows = node.querySelectorAll('tr');
+            rows.forEach(row => {
+                const td = document.createElement('td');
+                td.style.border = '1px solid #ccc';
+                td.style.padding = '8px';
+                td.textContent = '\u00A0';
+                row.appendChild(td);
+            });
+        }
+    }
+
+    setInsertRow() {
+        const selection = window.getSelection();
+        if (!selection.rangeCount) return;
+
+        let node = selection.anchorNode;
+        while (node && node.tagName !== 'TABLE') {
+            node = node.parentElement;
+        }
+
+        if (node && node.tagName === 'TABLE') {
+            const firstRow = node.querySelector('tr');
+            if (firstRow) {
+                const newRow = document.createElement('tr');
+                const colCount = firstRow.children.length;
+
+                for (let i = 0; i < colCount; i++) {
+                    const td = document.createElement('td');
+                    td.style.border = '1px solid #ccc';
+                    td.style.padding = '8px';
+                    td.textContent = '\u00A0';
+                    newRow.appendChild(td);
+                }
+
+                node.appendChild(newRow);
+            }
+        }
+    }
+
+    setFormatBlock(useUI, tag) {
+        this.execCommand('formatBlock', `<${tag}>`);
+    }
+
+    setInsertQuote() {
+        this.execCommand('formatBlock', '<blockquote>');
+    }
+
+    insertEmoji(emoji) {
+        this.execCommand('insertText', emoji);
+    }
+
+    setAlignment(align) {
+        this.execCommand(`justify${align.charAt(0).toUpperCase() + align.slice(1)}`);
+    }
+}
+
+type RTEContextProps = {
+    content: string;
+    setContent: (content: string) => void;
+    contentType: string;
+    setContentType: (type: string) => void;
+    h1Active: boolean;
+    setH1Active: (active: boolean) => void;
+    h2Active: boolean;
+    setH2Active: (active: boolean) => void;
+    h3Active: boolean;
+    setH3Active: (active: boolean) => void;
+    h4Active: boolean;
+    setH4Active: (active: boolean) => void;
+    h5Active: boolean;
+    setH5Active: (active: boolean) => void;
+    rte: React.RefObject<HTMLDivElement>;
+    isDirty: boolean;
+    setIsDirty: (dirty: boolean) => void;
+    isSaving: boolean;
+    lastSaved: Date | null;
+    handleManualSave: () => void;
+    plugins: Plugin[];
+    registerPlugin: (plugin: Plugin) => void;
+    unregisterPlugin: (pluginName: string) => void;
+    getPlugin: (pluginName: string) => Plugin | undefined;
+    saveToHistory: () => void;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    commandsRef: React.RefObject<EditorCommands | null>;
+    historyRef: React.RefObject<History>;
+    handleTextSelection: () => void;
+    hideFloatingMenu: () => void;
+    floatingMenuPosition: { x: number; y: number } | null;
+    selectedText: string;
+    hideAnimatedBG: any;
+    defaultDock: any;
+    insertInlineCodeActive: any;
+    font: any;
+    setFont: any;
+    fontSize: any;
+    lineHeightValue: any;
+    setCpValue: any;
+    cpValue: any;
+    // Commands
+    saveSelection: () => Range | null;
+    restoreSelection: (range: Range | null) => void;
+    getSelectedText: () => string;
+    undo: () => void;
+    redo: () => void;
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+    h1: () => void;
+    h2: () => void;
+    h3: () => void;
+    h4: () => void;
+    h5: () => void;
+    orderedList: () => void;
+    unorderedList: () => void;
+    taskList: () => void;
+    bold: () => void;
+    italic: () => void;
+    underline: () => void;
+    insertTable: () => void;
+    insertColumn: () => void;
+    insertRow: () => void;
+    insertCodeBlock: () => void;
+    insertQuote: () => void;
+    insertInlineCode: () => void;
+    insertEmoji: () => void;
+    convertToEmoji: () => void;
+    insertHorizontalRule: () => void;
+    insertImage: () => void;
+    mention: () => void;
+    paragraph: () => void;
+    alignLeft: () => void;
+    alignRight: () => void;
+    alignCenter: () => void;
+    justifyLeft: () => void;
+    justifyCenter: () => void;
+    justifyRight: () => void;
+    highlight: () => void;
+    highlightColor: (color: string) => void;
+    link: () => void;
+    setLink: (url: string) => void;
+    strike: () => void;
+    subscript: () => void;
+    superscript: () => void;
+    characterCount: () => number;
+    insertComment: () => void;
+    setFontFamily: (font: string) => void;
+    setFontSize: (size: string) => void;
+    setLineHeight: (height: string) => void;
+    typography: () => void;
+    exportHTML: () => string;
+    exportMD: () => string;
+    exportText: () => string;
+    exportJSON: () => string;
+    insertContent: (content: string) => void;
+    insertContentAt: (pos: number, content: string) => void;
+    clearContent: () => void;
+    cut: () => void;
+    copy: () => void;
+    keyboardShortcut: (key: string, callback: () => void) => void;
+    selectAll: () => void;
+    convertMD: () => void;
+    highlightCSS: () => void;
+    highlightJS: () => void;
+    highlightTS: () => void;
+    highlightHTML: () => void;
+    insertColorSwatch: () => void;
+    floatingMenu: () => void;
+    convertInsertContentToCurrentType: () => void;
+};
+
+type PluginContext = {
+    rte: React.RefObject<HTMLDivElement>;
+    content: string;
+    setContent: (content: string) => void;
+    commands: EditorCommands | null;
+    history: History;
+};
+
+type Plugin = {
+    name: string;
+    init: (context: PluginContext) => void;
+    destroy?: () => void;
+    toolbar?: () => React.ReactNode;
+    keybindings?: Record<string, () => void>;
+};
+
+const RTEContext = createContext<RTEContextProps | null>(null);
+
+function useRTE() {
+    const context = useContext(RTEContext);
+    if (!context) throw new Error("useRTE must be used within RTEProvider");
+    return context;
+}
+
+export default function CatalystRTE({ options, ...props }) {
+    return (
+        <RTEProvider options={options} {...props} />
+    )
+}
+
+const RTEProvider = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<"div"> & {}
+>(({ options, ...props }, ref) => {
+    const rte = useRef(null)
+    const [activeFormats, setActiveFormats] = useState(new Set());
+    const [contentType, setContentType] = useState('JSON') // html, JSON, md, text
+    const [isSaving, setIsSaving] = useState(false)
+    const [lastSaved, setLastSaved] = useState(null)
+    const [content, setContent] = useState<string>('');
+    const [isDirty, setIsDirty] = useState(false);
+    const [h1Active, setH1Active] = useState(false)
+    const [h2Active, setH2Active] = useState(false)
+    const [h3Active, setH3Active] = useState(false)
+    const [h4Active, setH4Active] = useState(false)
+    const [h5Active, setH5Active] = useState(false)
+    const [cpValue, setCpValue] = useState(false)
+    const [lineHeightValue, setLineHeightValue] = useState(false)
+    const [strikeActive, setStrikeActive] = useState(false)
+    const [subscriptActive, setSubscriptActive] = useState(false)
+    const [superscriptActive, setSuperscriptActive] = useState(false)
+    const [insertInlineCodeActive, setInsertInlineCodeActive] = useState(false)
+    const [alignLeftActive, setAlignLeftActive] = useState(false)
+    const [alignCenterActive, setAlignCenterActive] = useState(false)
+    const [alignRightActive, setAlignRightActive] = useState(false)
+    const [boldActive, setBoldActive] = useState(false)
+    const [italicActive, setItalicActive] = useState(false)
+    const [underlineActive, setUnderlineActive] = useState(false)
+    const [font, setFont] = useState(false)
+    const [fontSize, setFontSizeValue] = useState(false)
+    const [defaultToolbar, setDefaultToolbar] = useState(false)
+    const [defaultFooter, setDefaultFooter] = useState(false)
+    const [defaultFloatingMenu, setDefaultFloatingMenu] = useState(false)
+    const [defaultDock, setDefaultDock] = useState(false)
+    const [hideEditorTitle, setHideEditorTitle] = useState(false)
+    const [theme, setTheme] = useState('dark')
+    const [hideAnimatedBG, setHideAnimatedBG] = useState(true)
+    const [plugins, setPlugins] = useState<Plugin[]>([]);
+    const pluginContextRef = useRef<PluginContext | null>(null);
+    const commandsRef = useRef<EditorCommands | null>(null);
+    const historyRef = useRef(new History());
+    const [canUndoState, setCanUndoState] = useState(false);
+    const [canRedoState, setCanRedoState] = useState(false);
+    const [floatingMenuPosition, setFloatingMenuPosition] = useState<{ x: number; y: number } | null>(null);
+    const [selectedText, setSelectedText] = useState('');
+    const lastContentRef = useRef("");
+    const saveTimeoutRef = useRef(null);
+
+    useEffect(() => {
+        if (rte.current && !commandsRef.current) {
+            commandsRef.current = new EditorCommands(rte);
+        }
+
+        const loadContent = async () => {
+            try {
+                const result = await window.storage.get(RTE_LOCAL_STORAGE_KEY);
+                if (result?.value) {
+                    setContent(result.value);
+                    if (rte.current) {
+                        rte.current.innerHTML = result.value;
+                    }
+                }
+            } catch (error) {
+                console.log('No saved content found');
+            }
+        };
+
+        loadContent();
+    }, []);
+
+    useEffect(() => {
+        pluginContextRef.current = {
+            rte,
+            content,
+            setContent,
+            commands: null, // Will be set in RTE component
+            history: new History()
+        };
+    }, [content]);
+
+    useEffect(() => {
+        if (isDirty && content) {
+            clearTimeout(saveTimeoutRef.current);
+            saveTimeoutRef.current = setTimeout(async () => {
+                setIsSaving(true);
+                try {
+                    await window.storage.set(RTE_LOCAL_STORAGE_KEY, content);
+                    setLastSaved(new Date());
+                    setIsDirty(false);
+                } catch (error) {
+                    console.error("Save failed:", error);
+                } finally {
+                    setIsSaving(false);
+                }
+            }, 2000);
+        }
+        return () => clearTimeout(saveTimeoutRef.current);
+    }, [content, isDirty]);
+
+    const autoSave = useCallback(
+        async (contentToSave: string) => {
+            setIsSaving(true);
+            try {
+                await window.storage.set(RTE_LOCAL_STORAGE_KEY, contentToSave);
+                setLastSaved(new Date());
+            } catch (error) {
+                console.error("Save failed:", error);
+            } finally {
+                setIsSaving(false);
+            }
+        },
+        []
+    );
+
+    const handleManualSave = useCallback(() => {
+        if (isDirty && content) {
+            clearTimeout(saveTimeoutRef.current);
+            autoSave(content);
+            setIsDirty(false);
+        }
+    }, [isDirty, content, autoSave]);
+
+    const saveToHistory = useCallback(() => {
+        if (rte.current) {
+            const currentContent = rte.current.innerHTML;
+            if (currentContent !== lastContentRef.current) {
+                historyRef.current.push(currentContent);
+                lastContentRef.current = currentContent;
+                setCanUndoState(historyRef.current.canUndo());
+                setCanRedoState(historyRef.current.canRedo());
+            }
+        }
+    }, []);
+
+    const updateActiveFormats = useCallback(() => {
+        const formats = new Set();
+        const sel = window.getSelection();
+
+        if (!sel || sel.rangeCount === 0) return;
+
+        let node = sel.anchorNode;
+        while (node && node !== rte.current) {
+            if (node.nodeType === 1) {
+                const tag = (node as Element).tagName?.toLowerCase();
+                if (tag === 'strong' || tag === 'b') {
+                    formats.add('bold');
+                    setBoldActive(true);
+                }
+                if (tag === 'em' || tag === 'i') {
+                    formats.add('italic');
+                    setItalicActive(true);
+                }
+                if (tag === 'u') {
+                    formats.add('underline');
+                    setUnderlineActive(true);
+                }
+                if (tag === 'h1') {
+                    formats.add('h1');
+                    setH1Active(true);
+                }
+                if (tag === 'h2') {
+                    formats.add('h2');
+                    setH2Active(true);
+                }
+                if (tag === 'h3') {
+                    formats.add('h3');
+                    setH3Active(true);
+                }
+                if (tag === 'h4') {
+                    formats.add('h4');
+                    setH4Active(true);
+                }
+                if (tag === 'h5') {
+                    formats.add('h5');
+                    setH5Active(true);
+                }
+                if (tag === 'code') {
+                    formats.add('code');
+                    setInsertInlineCodeActive(true);
+                }
+                if (tag === 'strike' || tag === 's') {
+                    formats.add('strike');
+                    setStrikeActive(true);
+                }
+                if (tag === 'sub') {
+                    formats.add('subscript');
+                    setSubscriptActive(true);
+                }
+                if (tag === 'sup') {
+                    formats.add('superscript');
+                    setSuperscriptActive(true);
+                }
+            }
+            node = node.parentNode;
+        }
+
+        // Reset states that aren't active
+        if (!formats.has('bold')) setBoldActive(false);
+        if (!formats.has('italic')) setItalicActive(false);
+        if (!formats.has('underline')) setUnderlineActive(false);
+        if (!formats.has('h1')) setH1Active(false);
+        if (!formats.has('h2')) setH2Active(false);
+        if (!formats.has('h3')) setH3Active(false);
+        if (!formats.has('h4')) setH4Active(false);
+        if (!formats.has('h5')) setH5Active(false);
+        if (!formats.has('code')) setInsertInlineCodeActive(false);
+        if (!formats.has('strike')) setStrikeActive(false);
+        if (!formats.has('subscript')) setSubscriptActive(false);
+        if (!formats.has('superscript')) setSuperscriptActive(false);
+
+        setActiveFormats(formats);
+    }, [rte]);
+
+    const handleTextSelection = useCallback(() => {
+        const selection = window.getSelection();
+        if (!selection || selection.isCollapsed || !selection.rangeCount) {
+            setFloatingMenuPosition(null);
+            setSelectedText('');
+            return;
+        }
+
+        const text = selection.toString().trim();
+        if (!text) {
+            setFloatingMenuPosition(null);
+            setSelectedText('');
+            return;
+        }
+
+        setSelectedText(text);
+
+        // Get the bounding rectangle of the selection
+        const range = selection.getRangeAt(0);
+        const rect = range.getBoundingClientRect();
+
+        // Position the menu above the selection
+        setFloatingMenuPosition({
+            x: rect.left + rect.width / 2,
+            y: rect.top + window.scrollY
+        });
+    }, []);
+
+    const hideFloatingMenu = useCallback(() => {
+        setFloatingMenuPosition(null);
+        setSelectedText('');
+    }, []);
+
+    /**
+     * so what do i mean by creating it simple and engineer it with the same methodology as shadcn? 
+     * 
+     * BAD EXAMPLE
+     * <button
+            onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+            className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+        >
+              H1
+        </button>
+    
+        GOOD EXAMPLE
+        <button  onClick={() => h1} className={h1Active ? '' : ''}>
+            H1
+        </button>
+     */
+    // Selection Management
+    function saveSelection() {
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount > 0) {
+            return sel.getRangeAt(0);
+        }
+        return null;
+    }
+    function restoreSelection(range: Range | null) {
+        if (range) {
+            const sel = window.getSelection();
+            sel?.removeAllRanges();
+            sel?.addRange(range);
+        }
+    }
+    function getSelectedText() {
+        return window.getSelection()?.toString() || "";
+    }
+    const undo = () => {
+        const prevState = historyRef.current.undo();
+        if (prevState && rte.current) {
+            rte.current.innerHTML = prevState;
+            setContent(prevState);
+            lastContentRef.current = prevState;
+            setCanUndoState(historyRef.current.canUndo());
+            setCanRedoState(historyRef.current.canRedo());
+        }
+    };
+    const redo = () => {
+        const nextState = historyRef.current.redo();
+        if (nextState && rte.current) {
+            rte.current.innerHTML = nextState;
+            setContent(nextState);
+            lastContentRef.current = nextState;
+            setCanUndoState(historyRef.current.canUndo());
+            setCanRedoState(historyRef.current.canRedo());
+        }
+    };
+    const strikethrough = () => {
+        document.execCommand('strikethrough');
+        updateActiveFormats();
+        saveToHistory();
+    };
+    function canUndo() {
+        return canUndoState;
+    }
+    function canRedo() {
+        return canRedoState;
+    }
+    function h1() {
+        commandsRef.current?.insertBlock('h1');
+        setH1Active((prev) => !prev);
+        saveToHistory();
+    }
+    function h2() {
+        commandsRef.current?.insertBlock('h2');
+        setH2Active((prev) => !prev);
+        saveToHistory();
+    }
+    function h3() {
+        commandsRef.current?.insertBlock('h3');
+        saveToHistory();
+        setH3Active((prev) => !prev);
+    }
+    function h4() {
+        commandsRef.current?.insertBlock('h4');
+        setH4Active((prev) => !prev);
+        saveToHistory();
+    }
+    function h5() {
+        commandsRef.current?.insertBlock('h5');
+        setH5Active((prev) => !prev);
+        saveToHistory();
+    }
+    function orderedList() {
+        commandsRef.current?.insertOrderedList();
+        saveToHistory();
+    }
+    function unorderedList() {
+        commandsRef.current?.insertUnorderedList();
+        saveToHistory();
+    }
+    function taskList() {
+        commandsRef.current?.insertTaskList();
+        saveToHistory();
+    }
+    const bold = () => {
+        document.execCommand('bold');
+        setBoldActive((prev) => !prev)
+        updateActiveFormats();
+        saveToHistory();
+    };
+    const italic = () => {
+        document.execCommand('italic');
+        setItalicActive((prev) => !prev)
+        updateActiveFormats();
+        saveToHistory();
+    };
+    const underline = () => {
+        document.execCommand('underline');
+        setUnderlineActive((prev) => !prev)
+        updateActiveFormats();
+        saveToHistory();
+    };
+    function strike() {
+        commandsRef.current?.insertStrike();
+        updateActiveFormats();
+        saveToHistory();
+    }
+    function subscript() {
+        commandsRef.current?.insertSubscript();
+        updateActiveFormats();
+        saveToHistory();
+    }
+    function superscript() {
+        commandsRef.current?.insertSuperscript();
+        updateActiveFormats();
+        saveToHistory();
+    }
+    function alignLeft() {
+        commandsRef.current?.setAlignment('left');
+        setAlignLeftActive((prev) => !prev)
+        saveToHistory();
+    }
+    function alignRight() {
+        commandsRef.current?.setAlignment('right');
+        setAlignRightActive((prev) => !prev)
+        saveToHistory();
+    }
+    function alignCenter() {
+        commandsRef.current?.setAlignment('center');
+        setAlignCenterActive((prev) => !prev)
+        saveToHistory();
+    }
+    function justifyLeft() {
+        alignLeft();
+    }
+    function justifyCenter() {
+        alignCenter();
+    }
+    function justifyRight() {
+        alignRight();
+    }
+    function insertTable() {
+        commandsRef.current?.setInsertTable('2x2');
+        saveToHistory();
+    }
+    function insertColumn() {
+        commandsRef.current?.setInsertColumn();
+        saveToHistory();
+    }
+    function insertRow() {
+        commandsRef.current?.setInsertRow();
+        saveToHistory();
+    }
+    function insertCodeBlock() {
+        commandsRef.current?.setFormatBlock(false, 'pre');
+        saveToHistory();
+    }
+    function insertQuote() {
+        commandsRef.current?.setInsertQuote();
+        saveToHistory();
+    }
+    function insertInlineCode() {
+        commandsRef.current?.wrapSelection('code');
+        saveToHistory();
+    }
+    function insertHorizontalRule() {
+        document.execCommand('insertHorizontalRule', false);
+    }
+    function paragraph() {
+        document.execCommand('formatBlock', false, 'p');
+    }
+    function link() {
+        const url = prompt('Enter URL:');
+        if (url) {
+            commandsRef.current?.wrapSelection('a', { href: url, target: '_blank' });
+            saveToHistory();
+        }
+    }
+    function setLink(url: string) {
+        document.execCommand('createLink', false, url);
+    }
+    const insertImage = () => {
+        const url = prompt('Enter image URL:');
+        if (url) {
+            document.execCommand('insertImage', false, url);
+            saveToHistory();
+        }
+    };
+    function insertEmoji() {
+        const emoji = prompt('Enter emoji:');
+        if (emoji) {
+            commandsRef.current?.insertEmoji(emoji);
+            saveToHistory();
+        }
+    }
+    function convertToEmoji() {
+        // Auto-convert :) to emoji on space
+        console.log('Emoji conversion not yet implemented');
+    }
+    const highlight = () => {
+        document.execCommand('hiliteColor', false, 'yellow');
+        saveToHistory();
+    };
+    function setHighlight() {
+        document.execCommand('hiliteColor', false, 'yellow');
+    }
+    function highlightColor(color: string) {
+        document.execCommand('hiliteColor', false, color);
+    }
+    function setFontFamily(font: string) {
+        document.execCommand('fontName', false, font);
+    }
+    function setFontSize(size: string) {
+        document.execCommand('fontSize', false, size);
+        setFontSizeValue(size)
+    }
+    function setLineHeight(height: string) {
+        if (rte.current) {
+            const sel = window.getSelection();
+            if (sel && sel.rangeCount > 0) {
+                const node = sel.getRangeAt(0).commonAncestorContainer.parentElement;
+                if (node) node.style.lineHeight = height;
+            }
+        }
+        setLineHeightValue(height)
+    }
+    function insertContent(htmlContent: string) {
+        document.execCommand('insertHTML', false, htmlContent);
+    }
+    const insertCode = () => {
+        commandsRef.current?.wrapSelection('code');
+        saveToHistory();
+    };
+    const quote = () => {
+        document.execCommand('formatBlock', false, 'blockquote');
+        saveToHistory();
+    };
+    function insertContentAt(pos: number, htmlContent: string) {
+        if (rte.current) {
+            const textContent = rte.current.textContent || '';
+            const before = textContent.slice(0, pos);
+            const after = textContent.slice(pos);
+            rte.current.innerHTML = before + htmlContent + after;
+        }
+    }
+    const clearContent = () => {
+        if (rte.current) {
+            rte.current.innerHTML = '';
+            setContent('');
+            saveToHistory();
+        }
+    };
+    function cut() {
+        document.execCommand('cut');
+    }
+    function copy() {
+        document.execCommand('copy');
+    }
+    function selectAll() {
+        document.execCommand('selectAll');
+    }
+    const exportHTML = () => rte.current?.innerHTML || '';
+    function exportMD() {
+        // Convert HTML to Markdown
+        console.log('Markdown export not yet implemented');
+        return '';
+    }
+    const exportText = () => rte.current?.textContent || '';
+    const characterCount = () => rte.current?.textContent?.length || 0;
+    const wordCount = () => rte.current?.textContent?.trim().split(/\s+/).filter(Boolean).length || 0;
+    function exportJSON() {
+        return JSON.stringify({ content: rte.current?.innerHTML || '' });
+    }
+    function insertComment() {
+        console.log('Comments not yet implemented');
+    }
+    function mention() {
+        console.log('Mentions not yet implemented');
+    }
+    function typography() {
+        console.log('Typography settings not yet implemented');
+    }
+    function keyboardShortcut(key: string, callback: () => void) {
+        console.log('Custom keyboard shortcuts not yet implemented');
+    }
+    // if user sets renderMD to true, then after each each md type is typed out it converts it to the equivelant to be displayed as such for example when ever the user press space after entering ### it will turn it into an h3
+    function convertMD() {
+        if (!rte.current) return;
+
+        const content = rte.current.innerHTML;
+
+        // Headers
+        let markdown = content
+            .replace(/<h1[^>]*>(.*?)<\/h1>/gi, '# $1\n\n')
+            .replace(/<h2[^>]*>(.*?)<\/h2>/gi, '## $1\n\n')
+            .replace(/<h3[^>]*>(.*?)<\/h3>/gi, '### $1\n\n')
+            .replace(/<h4[^>]*>(.*?)<\/h4>/gi, '#### $1\n\n')
+            .replace(/<h5[^>]*>(.*?)<\/h5>/gi, '##### $1\n\n')
+            .replace(/<h6[^>]*>(.*?)<\/h6>/gi, '###### $1\n\n');
+
+        // Bold and Italic
+        markdown = markdown
+            .replace(/<strong[^>]*>(.*?)<\/strong>/gi, '**$1**')
+            .replace(/<b[^>]*>(.*?)<\/b>/gi, '**$1**')
+            .replace(/<em[^>]*>(.*?)<\/em>/gi, '*$1*')
+            .replace(/<i[^>]*>(.*?)<\/i>/gi, '*$1*');
+
+        // Links
+        markdown = markdown
+            .replace(/<a[^>]*href="([^"]*)"[^>]*>(.*?)<\/a>/gi, '[$2]($1)');
+
+        // Images
+        markdown = markdown
+            .replace(/<img[^>]*src="([^"]*)"[^>]*alt="([^"]*)"[^>]*>/gi, '![$2]($1)')
+            .replace(/<img[^>]*src="([^"]*)"[^>]*>/gi, '![]($1)');
+
+        // Code
+        markdown = markdown
+            .replace(/<code[^>]*>(.*?)<\/code>/gi, '`$1`')
+            .replace(/<pre[^>]*><code[^>]*>(.*?)<\/code><\/pre>/gi, '```\n$1\n```')
+            .replace(/<pre[^>]*>(.*?)<\/pre>/gi, '```\n$1\n```');
+
+        // Lists
+        markdown = markdown
+            .replace(/<ul[^>]*>(.*?)<\/ul>/gis, (match, content) => {
+                return content.replace(/<li[^>]*>(.*?)<\/li>/gi, '- $1\n');
+            })
+            .replace(/<ol[^>]*>(.*?)<\/ol>/gis, (match, content) => {
+                let index = 1;
+                return content.replace(/<li[^>]*>(.*?)<\/li>/gi, () => `${index++}. $1\n`);
+            });
+
+        // Blockquotes
+        markdown = markdown
+            .replace(/<blockquote[^>]*>(.*?)<\/blockquote>/gi, '> $1\n');
+
+        // Horizontal rules
+        markdown = markdown
+            .replace(/<hr[^>]*>/gi, '\n---\n');
+
+        // Paragraphs
+        markdown = markdown
+            .replace(/<p[^>]*>(.*?)<\/p>/gi, '$1\n\n');
+
+        // Line breaks
+        markdown = markdown
+            .replace(/<br[^>]*>/gi, '\n');
+
+        // Remove remaining HTML tags
+        markdown = markdown.replace(/<[^>]*>/g, '');
+
+        // Clean up
+        markdown = markdown
+            .replace(/\n{3,}/g, '\n\n')
+            .trim();
+
+        return markdown;
+    }
+    // Auto-convert Markdown as user types
+    function handleMarkdownAutoConvert(e: KeyboardEvent) {
+        if (e.key !== ' ' || !rte.current) return;
+
+        const selection = window.getSelection();
+        if (!selection || !selection.rangeCount) return;
+
+        const range = selection.getRangeAt(0);
+        const textNode = range.startContainer;
+
+        if (textNode.nodeType !== Node.TEXT_NODE) return;
+
+        const text = textNode.textContent || '';
+        const cursorPos = range.startOffset;
+        const textBeforeCursor = text.substring(0, cursorPos);
+
+        // Check for Markdown patterns
+        const patterns = [
+            { regex: /^#{6}\s$/, tag: 'h6', remove: 7 },
+            { regex: /^#{5}\s$/, tag: 'h5', remove: 6 },
+            { regex: /^#{4}\s$/, tag: 'h4', remove: 5 },
+            { regex: /^#{3}\s$/, tag: 'h3', remove: 4 },
+            { regex: /^#{2}\s$/, tag: 'h2', remove: 3 },
+            { regex: /^#{1}\s$/, tag: 'h1', remove: 2 },
+            { regex: /^[-*]\s$/, command: 'insertUnorderedList', remove: 2 },
+            { regex: /^\d+\.\s$/, command: 'insertOrderedList', remove: textBeforeCursor.length },
+            { regex: /^>\s$/, tag: 'blockquote', remove: 2 },
+            { regex: /^```\s$/, tag: 'pre', remove: 4 },
+        ];
+
+        for (const pattern of patterns) {
+            if (pattern.regex.test(textBeforeCursor)) {
+                e.preventDefault();
+
+                // Remove the Markdown syntax
+                const newText = text.substring(0, cursorPos - pattern.remove) + text.substring(cursorPos);
+                textNode.textContent = newText;
+
+                // Apply formatting
+                if (pattern.tag) {
+                    document.execCommand('formatBlock', false, `<${pattern.tag}>`);
+                } else if (pattern.command) {
+                    document.execCommand(pattern.command);
+                }
+
+                saveToHistory();
+                break;
+            }
+        }
+    }
+    function converJSON() {
+        return null
+    }
+    function converText() {
+        return null
+    }
+    function converHtml() {
+        return null
+    }
+    function insertColorSwatch(color) {
+        console.log(`color value: ${color}`);
+        setCpValue(color)
+    }
+    // user can turn on or off, and configure a floating menu that appears when a user selects a range of text using tooltip or whatever
+    /**
+     * <FloatingMenu>
+     * <button  onClick={() => h1} className={h1Active ? '' : ''}>
+            H1
+        </button>
+     * </FloatingMenu>
+     * 
+     */
+    function floatingMenu() {
+        return null
+    }
+    function convertInsertContentToCurrentType() {
+        return null
+    }
+    // Add this function to highlight code blocks
+    function highlightCodeBlock(language: string) {
+        if (!rte.current) return;
+
+        const selection = window.getSelection();
+        if (!selection || !selection.rangeCount) return;
+
+        let node = selection.anchorNode;
+        while (node && node !== rte.current) {
+            if (node.nodeType === 1 && (node as Element).tagName === 'PRE') {
+                const pre = node as HTMLPreElement;
+                const code = pre.querySelector('code') || pre;
+                const text = code.textContent || '';
+
+                code.className = `language-${language}`;
+
+                // Basic syntax highlighting patterns
+                let highlighted = text;
+
+                if (language === 'javascript' || language === 'typescript') {
+                    highlighted = text
+                        .replace(/\b(const|let|var|function|return|if|else|for|while|class|import|export|from|async|await)\b/g, '<span style="color: #c678dd;">$1</span>')
+                        .replace(/\b(true|false|null|undefined)\b/g, '<span style="color: #d19a66;">$1</span>')
+                        .replace(/(["'`])(.*?)\1/g, '<span style="color: #98c379;">$1$2$1</span>')
+                        .replace(/\/\/(.*?)$/gm, '<span style="color: #5c6370;">\/\/$1</span>')
+                        .replace(/\/\*([\s\S]*?)\*\//g, '<span style="color: #5c6370;">/*$1*/</ span>');
+                } else if (language === 'css') {
+                    highlighted = text
+                        .replace(/([.#]?[\w-]+)\s*{/g, '<span style="color: #e06c75;">$1</span> {')
+                        .replace(/([\w-]+):/g, '<span style="color: #61afef;">$1</span>:')
+                        .replace(/:\s*([^;]+);/g, ': <span style="color: #98c379;">$1</span>;')
+                        .replace(/\/\*([\s\S]*?)\*\//g, '<span style="color: #5c6370;">/*$1*/</span>');
+                } else if (language === 'html') {
+                    highlighted = text
+                        .replace(/(&lt;\/?)(\w+)([^&]*?)(&gt;)/g, '<span style="color: #e06c75;">$1$2</span><span style="color: #d19a66;">$3</span><span style="color: #e06c75;">$4</span>')
+                        .replace(/(\w+)=/g, '<span style="color: #61afef;">$1</span>=')
+                        .replace(/=(["'])(.*?)\1/g, '=<span style="color: #98c379;">$1$2$1</span>');
+                }
+
+                code.innerHTML = highlighted;
+                return;
+            }
+            node = node.parentElement;
+        }
+    }
+
+    function highlightCSS() {
+        highlightCodeBlock('css');
+    }
+
+    function highlightJS() {
+        highlightCodeBlock('javascript');
+    }
+
+    function highlightTS() {
+        highlightCodeBlock('typescript');
+    }
+
+    function highlightHTML() {
+        highlightCodeBlock('html');
+    }
+
+    const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+        if (e.metaKey || e.ctrlKey) {
+            switch (e.key) {
+                case 'b':
+                    e.preventDefault();
+                    bold();
+                    break;
+                case 'i':
+                    e.preventDefault();
+                    italic();
+                    break;
+                case 'u':
+                    e.preventDefault();
+                    underline();
+                    break;
+                case 'z':
+                    if (e.shiftKey) {
+                        e.preventDefault();
+                        redo();
+                    } else {
+                        e.preventDefault();
+                        undo();
+                    }
+                    break;
+            }
+        }
+        if (e.altKey) {
+            switch (e.key) {
+                case 's':
+                    e.preventDefault();
+                    handleManualSave();
+                    break;
+                case 'z':
+                    e.preventDefault();
+                    undo();
+                    break;
+                case 'y':
+                    e.preventDefault();
+                    redo();
+                    break;
+                case '1':
+                    e.preventDefault();
+                    h1();
+                    break;
+                case '2':
+                    e.preventDefault();
+                    h2();
+                    break;
+                case '3':
+                    e.preventDefault();
+                    h3();
+                    break;
+                case '4':
+                    e.preventDefault();
+                    h4();
+                    break;
+                case '5':
+                    e.preventDefault();
+                    h5();
+                    break;
+                case 'b':
+                    e.preventDefault();
+                    alignLeft();
+                    break;
+                case 'n':
+                    e.preventDefault();
+                    alignCenter();
+                    break;
+                case 'm':
+                    e.preventDefault();
+                    alignRight();
+                    break;
+                case 'g':
+                    e.preventDefault();
+                    strikethrough();
+                    break;
+                case 'h':
+                    e.preventDefault();
+                    subscript();
+                    break;
+                case 'j':
+                    e.preventDefault();
+                    superscript();
+                    break;
+                case 'k':
+                    e.preventDefault();
+                    insertInlineCode();
+                    break;
+                case 'l':
+                    e.preventDefault();
+                    link();
+                    break;
+                case 'u':
+                    e.preventDefault();
+                    unorderedList();
+                    break;
+                case 'i':
+                    e.preventDefault();
+                    taskList();
+                    break;
+                case 'o':
+                    e.preventDefault();
+                    orderedList();
+                    break;
+                default:
+                    break;
+            }
+        }
+        // Call plugin keybindings
+        plugins.forEach(plugin => {
+            if (plugin.keybindings) {
+                const key = `${e.ctrlKey ? 'Ctrl+' : ''}${e.metaKey ? 'Cmd+' : ''}${e.shiftKey ? 'Shift+' : ''}${e.altKey ? 'Alt+' : ''}${e.key}`;
+                const handler = plugin.keybindings[key];
+                if (handler) {
+                    e.preventDefault();
+                    handler();
+                }
+            }
+        });
+    }, [plugins, bold, italic, underline, undo, redo, handleManualSave, h1, h2, h3, h4, h5, alignLeft, alignCenter, alignRight, strikethrough, subscript, superscript, insertInlineCode, link, unorderedList, taskList, orderedList]);
+
+    const registerPlugin = useCallback((plugin: Plugin) => {
+        setPlugins(prev => {
+            if (prev.find(p => p.name === plugin.name)) {
+                console.warn(`Plugin ${plugin.name} already registered`);
+                return prev;
+            }
+
+            if (pluginContextRef.current) {
+                plugin.init(pluginContextRef.current);
+            }
+
+            return [...prev, plugin];
+        });
+    }, []);
+
+    const unregisterPlugin = useCallback((pluginName: string) => {
+        setPlugins(prev => {
+            const plugin = prev.find(p => p.name === pluginName);
+            if (plugin?.destroy) {
+                plugin.destroy();
+            }
+            return prev.filter(p => p.name !== pluginName);
+        });
+    }, []);
+
+    const getPlugin = useCallback((pluginName: string) => {
+        return plugins.find(p => p.name === pluginName);
+    }, [plugins]);
+
+    const contextValue = React.useMemo<RTEContextProps>(
+        () => ({
+            content, setContent, contentType, setContentType, isDirty, setIsDirty,
+            isSaving, lastSaved, handleManualSave, h1Active, setH1Active, h2Active, insertCode,
+            quote, handleMarkdownAutoConvert,
+            wordCount,
+            setH2Active, rte, saveSelection, restoreSelection, getSelectedText,
+            undo, redo, canUndo, canRedo, saveToHistory, handleKeyDown, commandsRef,
+            historyRef, h1, h2, h3, h4, h5, orderedList, unorderedList, taskList,
+            bold, italic, underline, strike, subscript, superscript, insertTable,
+            insertColumn, insertRow, insertCodeBlock, insertQuote, insertInlineCode,
+            insertEmoji, convertToEmoji, insertHorizontalRule, insertImage, mention,
+            paragraph, alignLeft, alignRight, alignCenter, justifyLeft, justifyCenter,
+            justifyRight, highlight, highlightColor, link, setLink, characterCount,
+            insertComment, setFontFamily, setFontSize, setLineHeight, typography,
+            exportHTML, exportMD, exportText, exportJSON, insertContent, insertContentAt,
+            clearContent, cut, copy, keyboardShortcut, selectAll, convertMD, highlightCSS,
+            highlightJS, highlightTS, highlightHTML, insertColorSwatch, floatingMenu,
+            convertInsertContentToCurrentType, h3Active, setH3Active, h4Active, setH4Active,
+            h5Active, setH5Active, plugins, registerPlugin, unregisterPlugin, getPlugin,
+            highlightJS, highlightTS, highlightHTML, defaultToolbar, setDefaultToolbar,
+            defaultFooter, setDefaultFooter, defaultFloatingMenu, setDefaultFloatingMenu,
+            defaultDock, setDefaultDock, hideEditorTitle, setHideEditorTitle, theme,
+            setTheme, hideAnimatedBG, setHideAnimatedBG, lineHeightValue, setLineHeightValue,
+            strikeActive, setStrikeActive, subscriptActive, setSubscriptActive,
+            superscriptActive, setSuperscriptActive, insertInlineCodeActive,
+            setInsertInlineCodeActive, alignLeftActive, setAlignLeftActive,
+            alignCenterActive, setAlignCenterActive, alignRightActive, setAlignRightActive,
+            boldActive, setBoldActive, italicActive, setItalicActive, underlineActive,
+            setUnderlineActive, font, setFont, fontSize, setFontSize, setHighlight,
+            converJSON, converText, converHtml, handleTextSelection, hideFloatingMenu,
+            floatingMenuPosition, selectedText, updateActiveFormats
+        }),
+        [content, contentType, h1Active, h2Active, h3Active, h4Active, h5Active, isDirty,
+            isSaving, lastSaved, plugins, floatingMenuPosition, selectedText]
+    );
+
+    const Context = RTEContext;
+
+    return (
+        <Context.Provider value={contextValue}>
+            <TooltipProvider delayDuration={0}>
+                <div ref={ref} {...props}>
+                    <RTE />
+                </div>
+            </TooltipProvider>
+        </Context.Provider>
+    );
+});
+
+export function createPlugin(config: {
+    name: string;
+    onInit?: (context: PluginContext) => void;
+    onDestroy?: () => void;
+    toolbar?: () => React.ReactNode;
+    keybindings?: Record<string, (context: PluginContext) => void>;
+}): Plugin {
+    let pluginContext: PluginContext | null = null;
+
+    return {
+        name: config.name,
+        init: (context) => {
+            pluginContext = context;
+            config.onInit?.(context);
+        },
+        destroy: config.onDestroy,
+        toolbar: config.toolbar,
+        keybindings: config.keybindings ?
+            Object.fromEntries(
+                Object.entries(config.keybindings).map(([key, fn]) => [
+                    key,
+                    () => pluginContext && fn(pluginContext)
+                ])
+            ) : undefined
+    };
+}
+
+export function RTE({
+    toolbar,
+    defaultToolbar = false,
+    footer,
+    defaultFooter = false,
+    dockItems = null,
+    floatingMenu,
+    className = '',
+    CN = {},
+    options = {
+        editorPlaceholder: "Start writing something amazing...",
+        toolbarTitle: "Catalyst-RTE",
+        toolbarIcon: <Sparkles className="h-4 w-4 text-purple-300" />
+    },
+}: {
+    toolbar?: React.ReactNode;
+    defaultToolbar?: boolean;
+    footer?: React.ReactNode;
+    defaultFooter?: boolean;
+    dockItems?: any;
+    floatingMenu?: React.ReactNode;
+    className?: string;
+    CN?: any;
+    options?: any;
+}) {
+    const { content, setContent, setIsDirty, rte, handleKeyDown, saveToHistory, canUndo, canRedo, undo, redo, bold, italic, underline, h1, h2, h3, h4, h5, alignLeft, alignCenter, alignRight, commandsRef, hideAnimatedBG, defaultDock, insertInlineCodeActive, font, setFont, fontSize, lineHeightValue, setLineHeight, strike, setCpValue, cpValue, insertColorSwatch, handleMarkdownAutoConvert, updateActiveFormats, floatingMenuPosition, handleTextSelection, hideFloatingMenu, strikeActive, subscriptActive, superscriptActive, subscript, superscript, insertTable, insertColumn, insertRow, insertCodeBlock, insertQuote, insertInlineCode, insertHorizontalRule, paragraph, link, insertImage, highlight, mention, exportJSON, defaultFloatingMenu, exportText, exportHTML, exportMD } = useRTE();
+
+    const [value, setValue] = useState(false)
+    const [open, setOpen] = useState(false)
+    const [openColorPicker, setOpenColorPicker] = useState(false)
+    const [openColorPicker2, setOpenColorPicker2] = useState(false)
+    const wordCount = () => rte.current?.textContent?.trim().split(/\s+/).filter(Boolean).length || 0;
+
+    const handleInput = useCallback((e) => {
+        if (rte.current) {
+            setContent(rte.current.innerHTML);
+            setIsDirty(true);
+            updateActiveFormats();
+
+            // Debounced history save
+            clearTimeout((window as any).editorHistoryTimeout);
+            (window as any).editorHistoryTimeout = setTimeout(saveToHistory, 500);
+        }
+    }, [updateActiveFormats, saveToHistory, setContent, setIsDirty, rte]);
+
+    useEffect(() => {
+        const editor = rte.current;
+        if (!editor) return;
+
+        const handleKeyPress = (e: KeyboardEvent) => {
+            handleMarkdownAutoConvert(e);
+        };
+
+        editor.addEventListener('keydown', handleKeyPress);
+        return () => editor.removeEventListener('keydown', handleKeyPress);
+    }, [rte]);
+
+    useEffect(() => {
+        const editor = rte.current;
+        if (!editor) return;
+
+        const handleKeyPress = (e: KeyboardEvent) => {
+            handleMarkdownAutoConvert(e);
+        };
+
+        const handleMouseUp = () => {
+            // Delay to ensure selection is complete
+            setTimeout(handleTextSelection, 10);
+        };
+
+        const handleKeyUp = () => {
+            setTimeout(handleTextSelection, 10);
+        };
+
+        const handleMouseDown = (e: MouseEvent) => {
+            // Hide menu when clicking outside
+            if (floatingMenuPosition && !(e.target as Element).closest('.floating-menu')) {
+                hideFloatingMenu();
+            }
+        };
+
+        editor.addEventListener('keydown', handleKeyPress);
+        editor.addEventListener('mouseup', handleMouseUp);
+        editor.addEventListener('keyup', handleKeyUp);
+        document.addEventListener('mousedown', handleMouseDown);
+
+        return () => {
+            editor.removeEventListener('keydown', handleKeyPress);
+            editor.removeEventListener('mouseup', handleMouseUp);
+            editor.removeEventListener('keyup', handleKeyUp);
+            document.removeEventListener('mousedown', handleMouseDown);
+        };
+    }, [rte, handleTextSelection, hideFloatingMenu, floatingMenuPosition]);
+
+
+    function ToolbarButton({ onClick, isActive, children, title, disabled = false }) {
+        return (
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        onClick={onClick}
+                        disabled={disabled}
+                        size='sm'
+                        variant='ghost'
+                        className={cn(
+                            "h-9 w-9 transition-all duration-300 hover:scale-105 bg-white/10 backdrop-blur-md border border-white/20 rounded-xl hover:bg-white/20 hover:border-white/30 hover:shadow-lg hover:shadow-purple-500/20 group relative overflow-hidden disabled:opacity-40 disabled:cursor-not-allowed",
+                            isActive ? 'bg-purple-500/30 text-white border-purple-400/50 shadow-lg shadow-purple-500/30' : '',
+                            CN.toolbarButton || ''
+                        )}
+                    >
+                        <div className="absolute inset-0 bg-gradient-to-r from-purple-400/0 via-purple-400/20 to-purple-400/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700" />
+                        <div className="relative z-10 text-white/90 group-hover:text-white flex items-center justify-center">
+                            {children}
+                        </div>
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>{title}</p>
+                </TooltipContent>
+            </Tooltip>
+        )
+    }
+
+    const renderToolbar = () => {
+        if (toolbar) return toolbar;
+        if (!defaultToolbar) return null;
+        const { hideEditorTitle, h1Active, h2Active, h3Active, h4Active, h5Active, fontSize, setFontSize,
+            boldActive, italicActive, underlineActive, alignLeftActive, alignCenterActive, alignRightActive, unorderedList, orderedList, taskList, } = useRTE();
+
+        return (
+            <div className={cn("flex items-center gap-2 p-6 bg-white/5 backdrop-blur-xl border-b border-white/10 relative flex-wrap", CN.toolbar)}>
+                {hideEditorTitle === false && (
+                    <div className="flex items-center gap-2 mr-4">
+                        <div className="p-2 bg-purple-500/20 backdrop-blur-sm rounded-xl border border-purple-400/30">
+                            {options.toolbarIcon}
+                        </div>
+                        <span className="text-sm font-semibold text-white/90 font-sans">{options.toolbarTitle}</span>
+                    </div>
+                )}
+
+                <div className="flex items-center gap-1">
+                    <ToolbarButton onClick={undo} disabled={!canUndo()} title="Undo (Ctrl+Z)">
+                        <Undo className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={redo} disabled={!canRedo()} title="Redo (Ctrl+Shift+Z)">
+                        <Redo className="h-4 w-4" />
+                    </ToolbarButton>
+                </div>
+
+                <div className="w-px h-6 bg-border mx-2" />
+
+                <div className="flex items-center gap-1">
+                    <ToolbarButton onClick={h1} isActive={h1Active} title="Heading 1">
+                        <H1 className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={h2} isActive={h2Active} title="Heading 2">
+                        <H2 className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={h3} isActive={h3Active} title="Heading 3">
+                        <H3 className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={h4} isActive={h4Active} title="Heading 3">
+                        <H4 className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={h5} isActive={h5Active} title="Heading 3">
+                        <H5 className="h-4 w-4" />
+                    </ToolbarButton>
+                </div>
+
+                <div className="w-px h-6 bg-border mx-2" />
+
+                <div className="flex items-center gap-1">
+                    <ToolbarButton onClick={bold} isActive={boldActive} title="Bold (Ctrl+B)">
+                        <Bold className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={italic} isActive={italicActive} title="Italic (Ctrl+I)">
+                        <Italic className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={underline} isActive={underlineActive} title="Underline (Ctrl+U)">
+                        <Underline className="h-4 w-4" />
+                    </ToolbarButton>
+
+                    <ToolbarButton onClick={strike} isActive={strikeActive} title="Strikethrough">
+                        <Strikethrough className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={subscript} isActive={subscriptActive} title="Subscript">
+                        <Subscript className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={superscript} isActive={superscriptActive} title="Superscript">
+                        <Superscript className="h-4 w-4" />
+                    </ToolbarButton>
+                </div>
+
+                <div className="w-px h-6 bg-border mx-2" />
+
+                <div className="flex items-center gap-1">
+                    <ToolbarButton onClick={alignLeft} isActive={alignLeftActive} title="Align Left">
+                        <AlignLeft className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={alignCenter} isActive={alignCenterActive} title="Align Center">
+                        <AlignCenter className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={alignRight} isActive={alignRightActive} title="Align Right">
+                        <AlignRight className="h-4 w-4" />
+                    </ToolbarButton>
+                </div>
+
+                <div className="w-px h-6 bg-border mx-2" />
+
+                <div className="flex items-center gap-1">
+                    <ToolbarButton onClick={link} title="Insert Link">
+                        <Link className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={insertInlineCode} isActive={insertInlineCodeActive} title="Inline Code">
+                        <Code className="h-4 w-4" />
+                    </ToolbarButton>
+                </div>
+
+                <div className="w-px h-6 bg-border mx-2" />
+
+                <div className="flex items-center gap-1">
+                    <ToolbarButton onClick={unorderedList} title="List">
+                        <List className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={orderedList} title="Ordered List">
+                        <ListOrdered className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={taskList} title="Task List">
+                        <Checkbox className="h-4 w-4" />
+                    </ToolbarButton>
+                </div>
+
+                <div className="w-px h-6 bg-border mx-2" />
+
+                <div className="flex items-center gap-1">
+                    <Select defaultValue={fontSize}>
+                        <SelectTrigger className="max-w-[180px] border-transparent">
+                            <SelectValue placeholder="Text Size" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {FONT_SIZES.map((size, index) => (
+                                <SelectItem 
+                                    key={index}
+                                    onClick={() => { setFontSize(size); }}
+                                    className={cn("text-muted-foreground hover:text-foreground", size === fontSize ? "bg-muted  font-semibold" : "")}
+                                >
+                                    {size} px
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                    <Select defaultValue={font}>
+                        <SelectTrigger className="max-w-[180px] border-transparent">
+                            <SelectValue placeholder="Font" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {FONT_STYLE.map((style, index) => (
+                                <SelectItem 
+                                    key={index}
+                                    onClick={() => { setFont(style); }}
+                                    className={cn("text-muted-foreground hover:text-foreground", style === fontSize ? "bg-muted  font-semibold" : "")}
+                                >
+                                    {style}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                    <Select defaultValue={lineHeightValue}>
+                        <SelectTrigger className="max-w-[180px] border-transparent">
+                            <SelectValue placeholder="Line Height" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {LINE_HEIGHT.map((height, index) => (
+                                <SelectItem
+                                    key={index}
+                                    onClick={() => { setLineHeight(height); }}
+                                    className={cn("text-muted-foreground hover:text-foreground", height === lineHeightValue ? "bg-muted  font-semibold" : "")}
+                                >
+                                    {height}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+
+                <div className="w-px h-6 bg-border mx-2" />
+
+                <div className="flex items-center gap-1">
+                    <Popover>
+                        <PopoverTrigger>
+                            <ToolbarButton >
+                                <Table className="h-4 w-4" />
+                            </ToolbarButton>
+                        </PopoverTrigger>
+                        <PopoverContent className='flex items-center gap-1 bg-background text-foreground p-3'>
+                            <ToolbarButton onClick={insertTable} title="Add Table">
+                                <Table className="h-4 w-4" />
+                            </ToolbarButton>
+                            <ToolbarButton onClick={insertColumn} title="Add Table Column">
+                                <TableColumn className="h-4 w-4" />
+                            </ToolbarButton>
+                            <ToolbarButton onClick={insertRow} title="Add Table Row">
+                                <TableRow className="h-4 w-4" />
+                            </ToolbarButton>
+                        </PopoverContent>
+                    </Popover>
+                    <ToolbarButton onClick={insertCodeBlock} title="Code Block">
+                        <Code className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={insertQuote} title="Quote">
+                        <Quote className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={insertInlineCode} title="Inline Code">
+                        <BracketsAngle className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={insertHorizontalRule} title="Horizontal Rule">
+                        <LineDashed className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={paragraph} title="Paragraph">
+                        <AlignJustified className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={link} title="Link">
+                        <Link className="h-4 w-4" />
+                    </ToolbarButton>
+
+                    <ToolbarButton onClick={insertImage} title="Image">
+                        <Image className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={link} title="Link">
+                        <Link className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={highlight} title="Highlight">
+                        <Highlight className="h-4 w-4" />
+                    </ToolbarButton>
+
+                    <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                            <Button size='sm' variant="ghost" role="combobox" aria-expanded={open}  >
+                                <MoodBoy className="h-4 w-4" />
+                            </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[200px] p-0">
+                            <Command>
+                                <CommandInput placeholder="Search emojis..." className="h-9" />
+                                <CommandList>
+                                    <CommandEmpty>No Emojis found.</CommandEmpty>
+                                    <CommandGroup>
+                                        {EMOJIES.map((e, index) => (
+                                            <CommandItem
+                                                key={index}
+                                                value={e.value}
+                                                onSelect={(currentValue) => {
+                                                    setValue(currentValue === value ? "" : currentValue)
+                                                    setOpen(false)
+                                                }}
+                                            >
+                                                {e.label}
+                                                <Check
+                                                    className={cn(
+                                                        "ml-auto",
+                                                        value === e.value ? "opacity-100" : "opacity-0"
+                                                    )}
+                                                />
+                                            </CommandItem>
+                                        ))}
+                                    </CommandGroup>
+                                </CommandList>
+                            </Command>
+                        </PopoverContent>
+                    </Popover>
+                    <Select defaultValue={lineHeightValue}>
+                        <SelectTrigger className="max-w-[50px] border-transparent">
+                            <FileExport className="h-4 w-4" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem className="text-muted-foreground hover:text-foreground" onClick={() => { exportHTML(); }}  >
+                                Export HTML
+                            </SelectItem>
+                            <SelectItem className="text-muted-foreground hover:text-foreground" onClick={() => { exportMD(); }}  >
+                                Export MD
+                            </SelectItem>
+                            <SelectItem className="text-muted-foreground hover:text-foreground" onClick={() => { exportText(); }}  >
+                                Export Text
+                            </SelectItem>
+                            <SelectItem className="text-muted-foreground hover:text-foreground" onClick={() => { exportJSON(); }}  >
+                                Export JSON
+                            </SelectItem>
+                        </SelectContent>
+                    </Select>
+                    <ToolbarButton onClick={mention} title="Mention">
+                        <At className="h-4 w-4" />
+                    </ToolbarButton>
+                    <Popover open={openColorPicker} onOpenChange={setOpenColorPicker}>
+                        <PopoverTrigger asChild>
+                            <Button size='sm' variant="ghost" role="combobox" aria-expanded={open}  >
+                                <ColorPickerIcon className="h-4 w-4" />
+                            </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="max-w-sm  p-0">
+                            <ColorPicker defaultValue="#ff0000" onSelect={(color) => insertColorSwatch(color)} />
+                            <ColorPicker className="max-w-sm rounded-md border bg-background p-4 shadow-sm"
+                                value={cpValue}
+                                onChange={(color) => insertColorSwatch(color)}>
+                                <ColorPickerSelection3 />
+                                <div className="flex items-center gap-4">
+                                    <ColorPickerEyeDropper3 />
+                                    <div className="grid w-full gap-1">
+                                        <ColorPickerHue3 />
+                                        <ColorPickerAlpha3 />
+                                    </div>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <ColorPickerOutput3 />
+                                    <ColorPickerFormat3 />
+                                </div>
+                            </ColorPicker>
+                        </PopoverContent>
+                    </Popover>
+                    <Popover open={openColorPicker2} onOpenChange={setOpenColorPicker2}>
+                        <PopoverTrigger asChild>
+                            <Button size='sm' variant="ghost" role="combobox" aria-expanded={open}  >
+                                <ColorPickerIcon className="h-4 w-4" />
+                            </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="w-[300px] p-0">
+                            <ColorPicker1 defaultValue="#ff0000" onSelect={(color) => insertColorSwatch(color)} />
+                        </PopoverContent>
+                    </Popover>
+                </div>
+
+            </div>
+        );
+    };
+
+    const renderFloatingMenu = () => {
+        if (floatingMenu) return floatingMenu;
+        if (!defaultFloatingMenu) return null;
+        if (!floatingMenuPosition) return null;
+
+
+        return (
+            <div
+                className={cn(
+                    "floating-menu fixed z-50 flex items-center gap-1 p-2 bg-white/10 backdrop-blur-xl border border-white/20 rounded-xl shadow-2xl shadow-black/40",
+                    CN.floatingMenu
+                )}
+                style={{
+                    left: `${floatingMenuPosition.x}px`,
+                    top: `${floatingMenuPosition.y - 60}px`,
+                    transform: 'translateX(-50%)',
+                }}
+            >
+                <div className="flex items-center gap-1">
+                    <ToolbarButton onClick={() => { bold(); handleTextSelection(); }} title="Bold">
+                        <Bold className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={() => { italic(); handleTextSelection(); }} title="Italic">
+                        <Italic className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={() => { underline(); handleTextSelection(); }} title="Underline">
+                        <Underline className="h-4 w-4" />
+                    </ToolbarButton>
+
+                    <ToolbarButton onClick={() => { strike(); handleTextSelection(); }} title="Strikethrough">
+                        <Strikethrough className="h-4 w-4" />
+                    </ToolbarButton>
+                </div>
+
+                <div className="w-px h-6 bg-white/20 mx-1" />
+
+                <div className="flex items-center gap-1">
+                    <ToolbarButton onClick={() => { link(); handleTextSelection(); }} title="Insert Link">
+                        <Link className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={() => { insertInlineCode(); handleTextSelection(); }} title="Inline Code">
+                        <Code className="h-4 w-4" />
+                    </ToolbarButton>
+                    <ToolbarButton onClick={() => { highlight(); handleTextSelection(); }} title="Highlight">
+                        <Highlight className="h-4 w-4" />
+                    </ToolbarButton>
+                </div>
+            </div>
+        );
+    };
+
+    const renderFooter = () => {
+        if (footer) return footer;
+        if (!defaultFooter) return null;
+
+        return (
+            <div className={cn("flex items-center justify-between px-8 py-6 bg-white/5 backdrop-blur-xl border-t border-white/10 text-sm text-white/60 relative", CN.footer)}>
+                <div className="flex items-center gap-6">
+                    <span className="flex items-center gap-2">
+                        <Type className="h-4 w-4 text-purple-300" />
+                        Words: <span className="text-white/90 font-medium">
+                            {wordCount()}
+                        </span>
+                    </span>
+                    <span className="flex items-center gap-2">
+                        Characters: <span className="text-white/90 font-medium">{content.replace(/<[^>]*>/g, '').length}</span>
+                    </span>
+                </div>
+                <div className="text-xs text-white/50 flex items-center gap-3">
+                    <kbd className="px-2 py-1 bg-white/10 backdrop-blur-sm rounded-lg text-xs border border-white/20">⌘B</kbd>
+                    <span>Bold</span>
+                    <kbd className="px-2 py-1 bg-white/10 backdrop-blur-sm rounded-lg text-xs border border-white/20">⌘I</kbd>
+                    <span>Italic</span>
+                    <kbd className="px-2 py-1 bg-white/10 backdrop-blur-sm rounded-lg text-xs border border-white/20">⌘U</kbd>
+                    <span>Underline</span>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className={cn("min-h-screen flex items-center justify-center p-4 bg-background relative", CN.page, font,)}>
+            {hideAnimatedBG === false && (<AnimatedBackground />)}
+
+            <div className={cn("w-full max-w-4xl  backdrop-blur-2xl border border-border rounded-3xl shadow-2xl shadow-black/40 overflow-hidden relative z-10", CN.bg, CN.width)}>
+                <div className={cn("absolute inset-0 rounded-3xl pointer-events-none", CN.bg)} />
+
+                {renderToolbar()}
+
+                <div className="relative">
+                    <div
+                        ref={rte}
+                        contentEditable
+                        onInput={handleInput}
+                        onKeyDown={handleKeyDown}
+                        onMouseUp={updateActiveFormats}
+                        onKeyUp={updateActiveFormats}
+                        className={cn("min-h-[500px] p-8 focus:outline-none relative z-10 text-white/95 leading-relaxed [&>h1]:text-4xl [&>h1]:font-bold [&>h1]:text-white [&>h1]:mb-6 [&>h1]:mt-8 [&>h2]:text-3xl [&>h2]:font-semibold [&>h2]:text-white/95 [&>h2]:mb-4 [&>h2]:mt-6 [&>h3]:text-2xl [&>h3]:font-medium [&>h3]:text-white/90 [&>h3]:mb-3 [&>h3]:mt-5 [&>p]:mb-4 [&>p]:leading-relaxed [&>p]:text-white/90 [&_strong]:font-bold [&_em]:italic [&_u]:underline [&_a]:text-purple-300 [&_a]:underline [&_a]:decoration-purple-300/50 [&_code]:bg-purple-500/20 [&_code]:px-2 [&_code]:py-1 [&_code]:rounded [&_code]:text-sm [&_code]:font-mono [&_code]:text-purple-200 selection:bg-purple-500/30 selection:text-white empty:before:content-[attr(data-placeholder)] empty:before:text-white/40 empty:before:pointer-events-none", CN.editor, fontSize, font)}
+                        data-placeholder={options.editorPlaceholder}
+                        suppressContentEditableWarning={true}
+                    />
+                </div>
+
+                {renderFooter()}
+            </div>
+            {renderFloatingMenu()}
+            {defaultDock || dockItems && (<Dock items={dockItems} />)}
+        </div>
+    );
+}
+
+export function UsersRTE() {
+    const { registerPlugin, setDefaultToolbar, setDefaultFooter, setTheme, setHideEditorTitle, setDefaultDock, insertContent, highlightCSS, hightlightJS, hightlightTS, hightlightHTML, } = useRTE();
+
+    useEffect(() => {
+        setDefaultToolbar(false)
+        setDefaultFooter(false)
+        setTheme('dark')
+        setHideEditorTitle(false)
+        setDefaultDock(false)
+        insertContent('')
+        highlightCSS()
+        hightlightJS()
+        hightlightTS()
+        hightlightHTML()
+    }, []);
+    const emojiPlugin = createPlugin({
+        name: 'emoji',
+        onInit: (ctx) => {
+            console.log('Emoji plugin loaded');
+        },
+        toolbar: () => <button>😀</button>,
+        keybindings: {
+            'Ctrl+E': (ctx) => {
+                ctx.commands?.insertEmoji();
+            }
+        }
+    });
+    registerPlugin(emojiPlugin);
+    function MyCustomToolbar() {
+        return null
+    }
+    function MyCustomFooter() {
+        return null
+    }
+    function MyCustomFloatingMenu() {
+        return null
+    }
+    const dockItems = [
+        {
+            label: "",
+            onClick: "",
+            icon: "",
+        }
+    ]
+    return (
+        <CatalystRTE>
+            <RTE
+                // toolbar={<MyCustomToolbar />}
+                // footer={<MyCustomFooter />}
+                // floatingMenu={<MyCustomFloatingMenu />}
+                dockItems={dockItems}
+                options={{
+                    toolbarTitle: "",
+                      editorPlaceholder: ""
+                    // toolbarIcon={}
+                }}
+              
+                CN={{
+                    page: "", // min-h-screen flex items-center justify-center p-4 bg-[#0A0A0A] relative
+                    toolbar: "", // flex items-center gap-2 p-6 bg-white/5 backdrop-blur-xl border-b border-white/10 relative flex-wrap
+                    floatingMenu: "",
+                    toolbarButton: "", // h-9 w-9 transition-all duration-300 hover:scale-105 bg-white/10 backdrop-blur-md border border-white/20 rounded-xl hover:bg-white/20 hover:border-white/30 hover:shadow-lg hover:shadow-purple-500/20  group relative overflow-hidden disabled:opacity-40 disabled:cursor-not-allowed
+                    footer: "", // flex items-center justify-between px-8 py-6 bg-white/5 backdrop-blur-xl border-t border-white/10 text-sm text-white/60 relative
+                    width: "", // w-full max-w-4xl bg-white/5 backdrop-blur-2xl border border-white/10 rounded-3xl shadow-2xl shadow-black/40 overflow-hidden relative z-10
+                    bg: "", // absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-purple-500/5 rounded-3xl pointer-events-none
+                    editor: "", // min-h-[500px] p-8 focus:outline-none relative z-10 text-white/95 leading-relaxed [&>h1]:text-4xl [&>h1]:font-bold [&>h1]:text-white [&>h1]:mb-6 [&>h1]:mt-8 [&>h2]:text-3xl [&>h2]:font-semibold [&>h2]:text-white/95 [&>h2]:mb-4 [&>h2]:mt-6 [&>h3]:text-2xl [&>h3]:font-medium [&>h3]:text-white/90 [&>h3]:mb-3 [&>h3]:mt-5 [&>p]:mb-4 [&>p]:leading-relaxed [&>p]:text-white/90 [&_strong]:font-bold [&_em]:italic [&_u]:underline [&_a]:text-purple-300 [&_a]:underline [&_a]:decoration-purple-300/50 [&_code]:bg-purple-500/20 [&_code]:px-2 [&_code]:py-1 [&_code]:rounded [&_code]:text-sm [&_code]:font-mono [&_code]:text-purple-200 selection:bg-purple-500/30 selection:text-white empty:before:content-[attr(data-placeholder)] empty:before:text-white/40 empty:before:pointer-events-none
+
+                }}
+            />
+        </CatalystRTE>
+
+    )
+}
+
+function AnimatedBackground() {
+    return (
+        <>
+            <FlickeringGrid
+                className="z-0 absolute inset-0 size-full"
+                squareSize={4}
+                gridGap={6}
+                color="#fafafa"
+                maxOpacity={0.4}
+                flickerChance={0.3}
+            />
+        </>
+    )
+}
+
+export type { Plugin, PluginContext };