@xlabs-store/core 0.0.1

package/dist/collection/components/x-editor/x-editor.js

@@ -0,0 +1,1636 @@
+import { h, Host, } from "@stencil/core";
+import { EditorSelection } from "./editor-selection";
+import { EditorNormalizer } from "./editor-normalizer";
+import { EditorHistory } from "./editor-history";
+import { parseDOM, /* stateToHTML, */ stateToDOM } from "./editor-parser";
+import { translate } from "../../locales/locale.service";
+/**
+ * WYSIWYG Editor Component
+ *
+ * A Notion-style editor with:
+ * - Inline formatting (bold, italic, underline)
+ * - Block editing (paragraph, headings, blockquote, code)
+ * - Undo/Redo
+ * - Paste sanitization
+ * - Slash command
+ */
+export class XEditor {
+    el;
+    /**
+     * Initial HTML content to be loaded into the editor.
+     * @type {string}
+     * @example
+     * <x-editor initialValue="<h1>Hello World</h1><p>Start editing...</p>"></x-editor>
+     */
+    initialValue = '';
+    /**
+     * Placeholder text displayed when the editor is empty.
+     * @type {string}
+     * @example
+     * <x-editor placeholder="Type / for commands..."></x-editor>
+     */
+    placeholder = translate('Editor.placeholder', {}, 'Start typing...');
+    /**
+     * Whether the editor is in read-only mode.
+     * @type {boolean}
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Toggles the visibility of the top toolbar.
+     * @type {boolean}
+     * @default true
+     */
+    showToolbar = true;
+    /**
+     * Configuration for the toolbar groups and actions.
+     * Allows customizing which tools are available to the user.
+     * @type {ToolbarConfig}
+     */
+    toolbar = [
+        {
+            name: 'history',
+            actions: [
+                { type: 'undo', title: translate('Editor.undo', {}, 'Undo (Ctrl+Z)') },
+                { type: 'redo', title: translate('Editor.redo', {}, 'Redo (Ctrl+Shift+Z)') },
+            ]
+        },
+        'divider',
+        {
+            name: 'text',
+            actions: [
+                { type: 'bold', title: translate('Editor.bold', {}, 'Bold (Ctrl+B)') },
+                { type: 'italic', title: translate('Editor.italic', {}, 'Italic (Ctrl+I)') },
+                { type: 'underline', title: translate('Editor.underline', {}, 'Underline (Ctrl+U)') },
+                { type: 'strikethrough', title: translate('Editor.strikethrough', {}, 'Strikethrough') },
+            ]
+        },
+        'divider',
+        {
+            name: 'colors',
+            actions: [
+                { type: 'textColor', title: translate('Editor.textColor', {}, 'Text Color') },
+                { type: 'backgroundColor', title: translate('Editor.backgroundColor', {}, 'Background Color') },
+            ]
+        },
+        'divider',
+        {
+            name: 'typography',
+            actions: [
+                { type: 'fontFamily', title: translate('Editor.fontFamily', {}, 'Font Family') },
+                { type: 'fontSize', title: translate('Editor.fontSize', {}, 'Font Size') },
+            ]
+        },
+        'divider',
+        {
+            name: 'blocks',
+            actions: [
+                { type: 'h1', title: translate('Editor.h1', {}, 'Heading 1') },
+                { type: 'h2', title: translate('Editor.h2', {}, 'Heading 2') },
+                { type: 'h3', title: translate('Editor.h3', {}, 'Heading 3') },
+                { type: 'h4', title: translate('Editor.h4', {}, 'Heading 4') },
+                { type: 'h5', title: translate('Editor.h5', {}, 'Heading 5') },
+                { type: 'h6', title: translate('Editor.h6', {}, 'Heading 6') },
+                { type: 'paragraph', title: translate('Editor.paragraph', {}, 'Paragraph') },
+                { type: 'blockquote', title: translate('Editor.blockquote', {}, 'Quote') },
+                { type: 'code', title: translate('Editor.codeBlock', {}, 'Code Block') },
+            ]
+        },
+        'divider',
+        {
+            name: 'alignment',
+            actions: [
+                { type: 'alignLeft', title: translate('Editor.alignLeft', {}, 'Align Left') },
+                { type: 'alignCenter', title: translate('Editor.alignCenter', {}, 'Align Center') },
+                { type: 'alignRight', title: translate('Editor.alignRight', {}, 'Align Right') },
+                { type: 'alignJustify', title: translate('Editor.alignJustify', {}, 'Align Justify') },
+            ]
+        },
+        'divider',
+        {
+            name: 'indentation',
+            actions: [
+                { type: 'outdent', title: translate('Editor.outdent', {}, 'Decrease Indent') },
+                { type: 'indent', title: translate('Editor.indent', {}, 'Increase Indent') },
+            ]
+        },
+        'divider',
+        {
+            name: 'insert',
+            actions: [
+                { type: 'link', title: translate('Editor.insertLink', {}, 'Insert Link') },
+                { type: 'image', title: translate('Editor.insertImage', {}, 'Insert Image') },
+                { type: 'video', title: translate('Editor.insertVideo', {}, 'Insert Video') },
+                { type: 'file', title: translate('Editor.insertFile', {}, 'Insert File') },
+                { type: 'table', title: translate('Editor.insertTable', {}, 'Insert Table') },
+                { type: 'hr', title: translate('Editor.horizontalLine', {}, 'Horizontal Line') },
+            ]
+        },
+    ];
+    /**
+     * Emit value change events
+     */
+    valueChange;
+    // Internal state
+    _showSlashMenu = false;
+    _slashMenuPosition = { x: 0, y: 0 };
+    _slashFilter = '';
+    _activeFormats = new Set();
+    _activeBlockType = 'paragraph';
+    _activeModal = null;
+    _modalData = {};
+    _activeAlignment = 'left';
+    // Editor helpers
+    editorRoot;
+    selectionHelper;
+    normalizer;
+    history;
+    // Slash command saved range
+    slashCommandSavedRange = null;
+    _toolbarSavedSelection = null;
+    // Slash command items
+    slashCommands = [
+        { id: 'h1', label: translate('Editor.h1', {}, 'Heading 1'), blockType: 'heading', headingLevel: 1, icon: 'H1' },
+        { id: 'h2', label: translate('Editor.h2', {}, 'Heading 2'), blockType: 'heading', headingLevel: 2, icon: 'H2' },
+        { id: 'h3', label: translate('Editor.h3', {}, 'Heading 3'), blockType: 'heading', headingLevel: 3, icon: 'H3' },
+        { id: 'quote', label: translate('Editor.blockquote', {}, 'Quote'), blockType: 'blockquote', icon: '"' },
+        { id: 'code', label: translate('Editor.codeBlock', {}, 'Code Block'), blockType: 'code', icon: '</>' },
+        { id: 'paragraph', label: translate('Editor.paragraph', {}, 'Plain Text'), blockType: 'paragraph', icon: 'P' },
+    ];
+    componentWillLoad() {
+        this.selectionHelper = new EditorSelection();
+        this.normalizer = new EditorNormalizer();
+        this.history = new EditorHistory();
+    }
+    componentDidLoad() {
+        // Set initial content
+        if (this.initialValue) {
+            this.setHTML(this.initialValue);
+        }
+        else {
+            this.setHTML('<p><br></p>');
+        }
+        // Save initial state to history and update selection tracking
+        this.saveToHistory();
+        setTimeout(() => this.updateActiveStates(), 0);
+    }
+    /**
+     * Retrieves the current editor state as a structured object.
+     * This includes the block hierarchy and formatting metadata.
+     * @returns {Promise<EditorState>} The parsed state object.
+     */
+    async getState() {
+        return parseDOM(this.editorRoot);
+    }
+    /**
+     * Reconstructs the editor content from a provided state object.
+     * @param {EditorState} state - The state object to apply.
+     * @returns {Promise<void>}
+     */
+    async setState(state) {
+        stateToDOM(state, this.editorRoot);
+        this.emitValueChange();
+    }
+    /**
+     * Retrieves the current RAW HTML content of the editor.
+     * @returns {Promise<string>} The HTML string.
+     */
+    async getHTML() {
+        return this.editorRoot?.innerHTML || '';
+    }
+    /**
+     * Replaces the entire editor content with the provided HTML string.
+     * Content is automatically normalized after insertion.
+     * @param {string} html - The new HTML content.
+     * @returns {Promise<void>}
+     */
+    async setHTML(html) {
+        if (!this.editorRoot)
+            return;
+        this.editorRoot.innerHTML = html;
+        this.normalizer.normalize(this.editorRoot);
+        this.emitValueChange();
+    }
+    /**
+     * Programmatically sets focus to the editor root element.
+     * @returns {Promise<void>}
+     */
+    async focusEditor() {
+        this.selectionHelper?.focus(this.editorRoot);
+    }
+    /**
+     * Resets the editor to its empty state (single paragraph) and clears history.
+     * @returns {Promise<void>}
+     */
+    async clear() {
+        this.setHTML('<p><br></p>');
+        this.history.clear();
+        this.saveToHistory();
+    }
+    /**
+     * Undo last action
+     */
+    async undo() {
+        const currentHtml = await this.getHTML();
+        const previousState = this.history.undo(currentHtml);
+        if (previousState) {
+            await this.setHTML(previousState);
+        }
+    }
+    /**
+     * Redo last undone action
+     */
+    async redo() {
+        const currentHtml = await this.getHTML();
+        const nextState = this.history.redo(currentHtml);
+        if (nextState) {
+            await this.setHTML(nextState);
+        }
+    }
+    /**
+     * Check if undo is available
+     */
+    async canUndo() {
+        return this.history.canUndo();
+    }
+    /**
+     * Check if redo is available
+     */
+    async canRedo() {
+        return this.history.canRedo();
+    }
+    /**
+     * General handler for input events (typing, deleting).
+     *
+     * Flow:
+     * 1. Normalizes the DOM structure (ensures blocks are valid).
+     * 2. Saves the current state to the undo/redo history.
+     * 3. Emits the `valueChange` event to notify external listeners.
+     * 4. Updates toolbar active states (bold, heading level, etc.).
+     */
+    handleInput = () => {
+        this.normalizer.normalize(this.editorRoot);
+        this.saveToHistory();
+        this.emitValueChange();
+        this.updateActiveStates();
+    };
+    /**
+     * Main keyboard event handler.
+     * Manages shortcuts (Ctrl+B, Ctrl+Z, etc.) and special keys like Enter/Backspace.
+     *
+     * Short-circuiting:
+     * - Ignores all input if the editor is `disabled`.
+     */
+    handleKeyDown = (e) => {
+        if (this.disabled)
+            return;
+        // Handle Formatting Shortcuts (Ctrl/Cmd + Key)
+        if (e.ctrlKey || e.metaKey) {
+            if (e.key === 'b') {
+                e.preventDefault();
+                this.toggleFormat('bold');
+                return;
+            }
+            if (e.key === 'i') {
+                e.preventDefault();
+                this.toggleFormat('italic');
+                return;
+            }
+            if (e.key === 'u') {
+                e.preventDefault();
+                this.toggleFormat('underline');
+                return;
+            }
+            // History Shortcuts
+            if (e.key === 'z') {
+                e.preventDefault();
+                if (e.shiftKey)
+                    this.redo();
+                else
+                    this.undo();
+                return;
+            }
+            if (e.key === 'y') {
+                e.preventDefault();
+                this.redo();
+                return;
+            }
+        }
+        // Handle Enter Key (Block Management)
+        if (e.key === 'Enter') {
+            // If slash menu is visible, Enter is used to select or close
+            if (this._showSlashMenu) {
+                this.closeSlashMenu();
+                return;
+            }
+            if (e.shiftKey) {
+                // Shift+Enter: Insert a soft line break (<br>) within the current block
+                e.preventDefault();
+                this.insertLineBreak();
+            }
+            else {
+                // Plain Enter: Split the block or create a new paragraph
+                e.preventDefault();
+                this.handleEnter();
+            }
+            return;
+        }
+        // Handle Backspace at start of block (Merging logic)
+        if (e.key === 'Backspace') {
+            this.handleBackspace();
+        }
+        // Handle Slash Command Trigger (/)
+        if (e.key === '/') {
+            // Trigger slash command only if at the very beginning of a block
+            if (this.selectionHelper.isAtBlockStart()) {
+                // Delay to allow the '/' character to be inserted before showing the menu
+                setTimeout(() => {
+                    this.handleSlashCommand();
+                }, 0);
+            }
+        }
+        // Handle Escape key to close floating menus
+        if (e.key === 'Escape' && this._showSlashMenu) {
+            this.closeSlashMenu();
+        }
+        // Update the slash command filtering if the menu is active
+        if (this._showSlashMenu) {
+            setTimeout(() => {
+                this.updateSlashFilter();
+            }, 0);
+        }
+    };
+    updateSlashFilter() {
+        const range = this.selectionHelper.getRange();
+        if (!range || !range.startContainer || range.startContainer.nodeType !== Node.TEXT_NODE)
+            return;
+        const text = range.startContainer.textContent || '';
+        const offset = range.startOffset;
+        const slashIndex = text.lastIndexOf('/', offset - 1);
+        if (slashIndex !== -1) {
+            this._slashFilter = text.substring(slashIndex + 1, offset).trim();
+        }
+        else {
+            this.closeSlashMenu();
+        }
+    }
+    /**
+     * Handles clipboard paste events.
+     * Sanitizes the incoming HTML or plain text to prevent XSS and preserve design consistency.
+     *
+     * Flow:
+     * 1. Prevents default browser paste behavior.
+     * 2. Checks if HTML content is available in clipboard.
+     * 3. Sanitizes HTML (removes unwanted styles/scripts) and inserts.
+     * 4. If only text is available, escapes special chars and inserts as plain text.
+     * 5. Normalizes the whole editor and saves state.
+     */
+    handlePaste = (e) => {
+        if (this.disabled)
+            return;
+        e.preventDefault();
+        const html = e.clipboardData?.getData('text/html');
+        const text = e.clipboardData?.getData('text/plain');
+        if (html) {
+            const sanitizedHtml = this.normalizer.sanitizePaste(html);
+            this.selectionHelper.insertHTML(sanitizedHtml);
+        }
+        else if (text) {
+            this.selectionHelper.insertHTML(this.escapeHtml(text));
+        }
+        setTimeout(() => {
+            this.normalizer.normalize(this.editorRoot);
+            this.saveToHistory();
+            this.emitValueChange();
+        }, 0);
+    };
+    /**
+     * Internal handler for mouse click event.
+     * Closes the slash command menu if active.
+     */
+    handleClick = () => {
+        if (this._showSlashMenu) {
+            this.closeSlashMenu();
+        }
+        this.updateActiveStates();
+    };
+    /**
+     * Internal handler for focus event.
+     */
+    handleFocus = () => {
+        this.updateActiveStates();
+    };
+    /**
+     * Internal handler for blur event.
+     */
+    handleBlur = () => {
+        // Optional: clear active states or keep them
+    };
+    /**
+     * Internal handler for key up events (specifically for arrow navigation).
+     */
+    handleKeyUp = (e) => {
+        if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key)) {
+            this.updateActiveStates();
+        }
+    };
+    /**
+     * Updates toolbar active states based on current selection.
+     * Queries the DOM/Selection API for active formatting and block types.
+     */
+    updateActiveStates = () => {
+        const formats = new Set();
+        if (this.selectionHelper.isFormatApplied('bold'))
+            formats.add('bold');
+        if (this.selectionHelper.isFormatApplied('italic'))
+            formats.add('italic');
+        if (this.selectionHelper.isFormatApplied('underline'))
+            formats.add('underline');
+        if (this.selectionHelper.isFormatApplied('strikethrough'))
+            formats.add('strikethrough');
+        this._activeFormats = new Set(formats);
+        this._activeBlockType = this.selectionHelper.getCurrentBlockType();
+        // Track text alignment using document.queryCommandState
+        try {
+            if (document.queryCommandState('justifyLeft'))
+                this._activeAlignment = 'left';
+            else if (document.queryCommandState('justifyCenter'))
+                this._activeAlignment = 'center';
+            else if (document.queryCommandState('justifyRight'))
+                this._activeAlignment = 'right';
+            else if (document.queryCommandState('justifyFull'))
+                this._activeAlignment = 'justify';
+        }
+        catch {
+            // Ignore errors if selection is outside
+        }
+    };
+    handleDropdownOpenChange = (open) => {
+        if (open) {
+            this._toolbarSavedSelection = this.selectionHelper.saveSelection();
+        }
+    };
+    restoreRange() {
+        this.editorRoot.focus();
+        if (this._toolbarSavedSelection) {
+            this.selectionHelper.restoreSelection(this._toolbarSavedSelection);
+        }
+    }
+    // Handle composition start
+    handleCompositionStart = () => {
+        this.history.setComposing(true);
+    };
+    // Handle composition end
+    handleCompositionEnd = () => {
+        this.history.setComposing(false);
+        this.saveToHistory();
+        this.emitValueChange();
+    };
+    // Insert line break (Shift+Enter)
+    insertLineBreak() {
+        this.selectionHelper.insertHTML('<br>');
+        this.emitValueChange();
+    }
+    // Handle Enter key
+    /**
+     * Handle Enter key press.
+     *
+     * Flow:
+     * 1. Gets current selection range.
+     * 2. Identifies current block element.
+     * 3. Checks special cases:
+     *    - Empty special block -> converts to paragraph.
+     *    - End of heading -> creates paragraph.
+     * 4. Default action:
+     *    - Creates new block of same type (or paragraph for headings).
+     *    - Inserts after current block.
+     *    - Moves cursor to new block.
+     * 5. Saves history.
+     */
+    async handleEnter() {
+        const range = this.selectionHelper.getRange();
+        if (!range)
+            return;
+        const container = range.startContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        const blockElement = element?.closest('p, h1, h2, h3, h4, h5, h6, blockquote, pre');
+        if (!blockElement)
+            return;
+        // Get current block type
+        const currentBlockType = this.selectionHelper.getCurrentBlockType();
+        const isAtEnd = this.selectionHelper.isAtBlockEnd();
+        const isEmpty = !blockElement.textContent?.trim();
+        // Notion-style: Enter in empty special block converts to paragraph
+        if (isEmpty && currentBlockType !== 'paragraph') {
+            this.convertBlock('paragraph');
+            return;
+        }
+        // Enter at end of heading creates paragraph
+        if (isAtEnd && currentBlockType === 'heading') {
+            const newBlock = document.createElement('p');
+            newBlock.innerHTML = '<br>';
+            if (blockElement.nextSibling) {
+                blockElement.parentNode?.insertBefore(newBlock, blockElement.nextSibling);
+            }
+            else {
+                blockElement.parentNode?.appendChild(newBlock);
+            }
+            this.selectionHelper.setCursorAtEnd(newBlock);
+            this.emitValueChange();
+            return;
+        }
+        // Default: split block (simple version: create new paragraph after)
+        // For a more advanced split, we'd use range.extractContents()
+        const newBlock = document.createElement(currentBlockType === 'heading' ? 'p' : blockElement.tagName.toLowerCase());
+        newBlock.innerHTML = '<br>';
+        if (blockElement.nextSibling) {
+            blockElement.parentNode?.insertBefore(newBlock, blockElement.nextSibling);
+        }
+        else {
+            blockElement.parentNode?.appendChild(newBlock);
+        }
+        this.selectionHelper.setCursorAtEnd(newBlock);
+        await this.saveToHistory();
+        this.emitValueChange();
+    }
+    // Handle backspace at block start
+    /**
+     * Handle Backspace at start of block.
+     *
+     * Flow:
+     * 1. Checks if cursor is at block start.
+     * 2. Identifies previous block.
+     * 3. If previous block exists:
+     *    - Merges content of current block into previous block.
+     *    - Preserves cursor position at merge point.
+     *    - Removes current block.
+     * 4. Saves history.
+     */
+    async handleBackspace() {
+        if (!this.selectionHelper.isAtBlockStart())
+            return;
+        const range = this.selectionHelper.getRange();
+        if (!range)
+            return;
+        const container = range.startContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        const blockElement = element?.closest('p, h1, h2, h3, h4, h5, h6, blockquote, pre');
+        if (!blockElement || !blockElement.previousSibling) {
+            // If at start of first block, maybe convert to paragraph if it's special
+            if (blockElement && this.selectionHelper.getCurrentBlockType() !== 'paragraph') {
+                this.convertBlock('paragraph');
+            }
+            return;
+        }
+        // Get previous block
+        const prevBlock = blockElement.previousSibling;
+        if (prevBlock.nodeType !== Node.ELEMENT_NODE)
+            return;
+        // Save selection position in prevBlock (at the end)
+        const selection = this.selectionHelper.getSelection();
+        if (selection) {
+            // Merge content
+            const content = blockElement.innerHTML === '<br>' ? '' : blockElement.innerHTML;
+            // If prevBlock is empty (only <br>), clear it before merging
+            if (prevBlock.innerHTML === '<br>') {
+                prevBlock.innerHTML = '';
+            }
+            // Add marker to know where to put the cursor
+            const marker = document.createElement('span');
+            marker.id = 'cursor-marker';
+            prevBlock.appendChild(marker);
+            // Append content
+            if (content) {
+                prevBlock.innerHTML += content;
+            }
+            // Restore cursor to marker position
+            const newRange = document.createRange();
+            const markerElement = prevBlock.querySelector('#cursor-marker');
+            if (markerElement) {
+                newRange.setStartBefore(markerElement);
+                newRange.collapse(true);
+                markerElement.remove();
+            }
+            else {
+                newRange.selectNodeContents(prevBlock);
+                newRange.collapse(false);
+            }
+            selection.removeAllRanges();
+            selection.addRange(newRange);
+            // Remove current block
+            blockElement.remove();
+            await this.saveToHistory();
+            this.emitValueChange();
+        }
+    }
+    /**
+     * Displays the floating slash command menu at the current cursor position.
+     * Logic:
+     * 1. Clones the current range to remember where to insert the command.
+     * 2. Calculates the menu coordinates relative to the editor container.
+     * 3. Resets filters and toggles menu visibility.
+     */
+    handleSlashCommand() {
+        const selection = this.selectionHelper.getSelection();
+        if (!selection)
+            return;
+        const range = this.selectionHelper.getRange();
+        if (!range)
+            return;
+        // Save range for later use
+        this.slashCommandSavedRange = range.cloneRange();
+        // Get cursor position for menu
+        const rect = range.getBoundingClientRect();
+        const editorRect = this.el.getBoundingClientRect();
+        this._slashMenuPosition = {
+            x: rect.left - editorRect.left,
+            y: rect.top - editorRect.top + 20, // Offset below cursor
+        };
+        this._slashFilter = '';
+        this._showSlashMenu = true;
+    }
+    /**
+     * Hides the slash command menu and clears the saved range.
+     */
+    closeSlashMenu() {
+        this._showSlashMenu = false;
+        this.slashCommandSavedRange = null;
+    }
+    /**
+     * Finalizes the selection from the slash menu.
+     * Logic:
+     * 1. Restores the selection range that was active when the menu opened.
+     * 2. Removes the triggering '/' and any typed search filter text.
+     * 3. Converts the line to the chosen block type (e.g., H1, Quote).
+     *
+     * @param {SlashCommandItem} command - The command to execute.
+     */
+    executeSlashCommand(command) {
+        if (!this.slashCommandSavedRange) {
+            this.closeSlashMenu();
+            return;
+        }
+        // Restore selection
+        const selection = this.selectionHelper.getSelection();
+        if (selection) {
+            selection.removeAllRanges();
+            selection.addRange(this.slashCommandSavedRange);
+        }
+        // Delete the '/' character and filter text
+        const range = this.selectionHelper.getRange();
+        if (range && range.startContainer.nodeType === Node.TEXT_NODE) {
+            const textNode = range.startContainer;
+            const text = textNode.textContent || '';
+            if (text.endsWith('/')) {
+                textNode.textContent = text.slice(0, -1);
+            }
+            else if (text.includes('/')) {
+                // Find and remove the slash and anything after it
+                const slashIndex = text.lastIndexOf('/');
+                textNode.textContent = text.substring(0, slashIndex);
+            }
+        }
+        // Convert block to selected type
+        this.convertBlock(command.blockType, command.headingLevel);
+        this.updateActiveStates();
+        this.closeSlashMenu();
+    }
+    // Convert current block to another type
+    /**
+     * Convert current block type.
+     *
+     * Flow:
+     * 1. Identifies current block element.
+     * 2. Creates new element tag based on `blockType`.
+     * 3. Moves content children to new element.
+     * 4. Replaces old element with new one in DOM.
+     * 5. Restores selection range.
+     * 6. Saves history.
+     *
+     * @param blockType - Target block type.
+     * @param headingLevel - Level for headings.
+     */
+    convertBlock(blockType, headingLevel) {
+        const range = this.selectionHelper.getRange();
+        if (!range)
+            return;
+        const container = range.startContainer;
+        const element = container.nodeType === Node.TEXT_NODE
+            ? container.parentElement
+            : container;
+        const blockElement = element?.closest('p, h1, h2, h3, h4, h5, h6, blockquote, pre');
+        if (!blockElement)
+            return;
+        // Create new element
+        let newTag;
+        switch (blockType) {
+            case 'heading':
+                newTag = `h${headingLevel || 1}`;
+                break;
+            case 'blockquote':
+                newTag = 'blockquote';
+                break;
+            case 'code':
+                newTag = 'pre';
+                break;
+            default:
+                newTag = 'p';
+        }
+        const newElement = document.createElement(newTag);
+        // Preserve content
+        if (blockType === 'code') {
+            const code = document.createElement('code');
+            while (blockElement.firstChild) {
+                code.appendChild(blockElement.firstChild);
+            }
+            newElement.appendChild(code);
+        }
+        else {
+            while (blockElement.firstChild) {
+                newElement.appendChild(blockElement.firstChild);
+            }
+        }
+        // Preserve selection if possible
+        const selection = this.selectionHelper.getSelection();
+        let offsets = null;
+        if (selection && selection.rangeCount > 0) {
+            const currentRange = selection.getRangeAt(0);
+            if (blockElement.contains(currentRange.startContainer) && blockElement.contains(currentRange.endContainer)) {
+                // Simple offset calculation
+                const preRange = document.createRange();
+                preRange.setStart(blockElement, 0);
+                preRange.setEnd(currentRange.startContainer, currentRange.startOffset);
+                const start = preRange.toString().length;
+                offsets = {
+                    start,
+                    end: start + currentRange.toString().length
+                };
+            }
+        }
+        // Replace element
+        if (blockElement.parentNode) {
+            blockElement.parentNode.replaceChild(newElement, blockElement);
+        }
+        // Restore selection to the new element
+        if (selection) {
+            const newRange = document.createRange();
+            if (offsets) {
+                // Try to restore offsets (simplified)
+                // For now, let's just select the whole new element if it was a selection, 
+                // or put cursor at the same text offset.
+                // Actually, just putting it at the start is safer unless we do proper text node traversal.
+                // Let's at least keep it highlighting the content if it was more than a cursor.
+                if (offsets.start !== offsets.end) {
+                    newRange.selectNodeContents(newElement);
+                }
+                else {
+                    newRange.setStart(newElement, 0);
+                    newRange.collapse(true);
+                }
+            }
+            else {
+                newRange.setStart(newElement, 0);
+                newRange.collapse(true);
+            }
+            selection.removeAllRanges();
+            selection.addRange(newRange);
+        }
+        this.saveToHistory();
+        this.emitValueChange();
+    }
+    /**
+     * Toggles an inline format (bold, italic, etc.) on the current selection.
+     * @param {FormatType} format - The format label.
+     */
+    toggleFormat(format) {
+        this.selectionHelper.toggleFormat(format);
+        this.updateActiveStates();
+        this.saveToHistory();
+        this.emitValueChange();
+    }
+    // Check if format is applied
+    isFormatActive(format) {
+        // During render, we use the cached state for performance and reactivity
+        if (this._activeFormats.has(format))
+            return true;
+        // Fallback to helper for immediate checks
+        return this.selectionHelper.isFormatApplied(format);
+    }
+    // Get current block type
+    getCurrentBlockType() {
+        return this._activeBlockType || this.selectionHelper.getCurrentBlockType();
+    }
+    /**
+     * Saves the current HTML snapshot to the history stack.
+     * Used for undo/redo functionality.
+     * @returns {Promise<void>}
+     */
+    async saveToHistory() {
+        const html = await this.getHTML();
+        this.history.push(html);
+    }
+    /**
+     * Internal helper to parse the current DOM and emit the `valueChange` event.
+     * Data is emitted as a JSON-stringified `EditorState`.
+     */
+    emitValueChange() {
+        const state = parseDOM(this.editorRoot);
+        this.valueChange.emit(JSON.stringify(state));
+    }
+    // Escape HTML
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    // Filter slash commands
+    getFilteredSlashCommands() {
+        if (!this._slashFilter) {
+            return this.slashCommands;
+        }
+        const filter = this._slashFilter.toLowerCase();
+        return this.slashCommands.filter(cmd => cmd.label.toLowerCase().includes(filter) ||
+            cmd.id.toLowerCase().includes(filter));
+    }
+    renderToolbarItem(item) {
+        if (item === 'divider') {
+            return h("div", { class: "toolbar-divider" });
+        }
+        if (item.actions) {
+            const group = item;
+            // Alignment group as dropdown
+            if (group.name === 'alignment') {
+                const items = group.actions.filter(a => a !== 'divider').map(a => ({
+                    key: a.type,
+                    label: a.title || a.type,
+                    icon: this.getIconSvg(a.type)
+                }));
+                const isActive = group.actions.some(a => a.type.toLowerCase().includes(this._activeAlignment));
+                return (h("x-dropdown", { trigger: "click", menu: { items }, onXOpenChange: (e) => this.handleDropdownOpenChange(e.detail.open), onXMenuClick: (e) => this.handleToolbarAction({ type: e.detail.key }) }, h("x-button", { onMouseDown: (e) => e.preventDefault(), type: "text", size: "small", shape: "round", class: { 'toolbar-btn': true, 'active': isActive } }, this.renderToolbarIcon(('align' + this._activeAlignment.charAt(0).toUpperCase() + this._activeAlignment.slice(1))))));
+            }
+            // Blocks (Heading) group as dropdown
+            if (group.name === 'blocks') {
+                const items = group.actions.filter(a => a !== 'divider').map(a => {
+                    const action = a;
+                    const level = action.type.startsWith('h') ? action.type.slice(1) : null;
+                    return {
+                        key: action.type,
+                        label: level ? `<h${level} style="margin:0; font-size: 1.1em; line-height: 1.2;">${action.title || action.type}</h${level}>` : (action.title || action.type),
+                        icon: action.type.startsWith('h') ? `<span class="text-icon">H${level}</span>` : this.getIconSvg(action.type)
+                    };
+                });
+                const isActive = group.actions.some(a => a.type === this._activeBlockType);
+                return (h("x-dropdown", { trigger: "click", menu: { items }, onXOpenChange: (e) => this.handleDropdownOpenChange(e.detail.open), onXMenuClick: (e) => this.handleToolbarAction({ type: e.detail.key }) }, h("x-button", { onMouseDown: (e) => e.preventDefault(), type: "text", size: "small", shape: "round", class: { 'toolbar-btn': true, 'active': isActive } }, h("span", { class: "text-icon" }, "Heading"))));
+            }
+            // Typography (Font Family, Font Size)
+            if (group.name === 'typography') {
+                return (h("div", { class: "toolbar-group" }, group.actions.map(a => {
+                    if (a === 'divider')
+                        return h("div", { class: "toolbar-divider" });
+                    const action = a;
+                    const menuItems = action.type === 'fontFamily'
+                        ? [
+                            { key: 'Arial', label: 'Arial' },
+                            { key: 'Georgia', label: 'Georgia' },
+                            { key: 'Times New Roman', label: 'Times New Roman' },
+                            { key: 'Courier New', label: 'Courier New' }
+                        ]
+                        : [
+                            { key: '12px', label: '12' },
+                            { key: '14px', label: '14' },
+                            { key: '16px', label: '16' },
+                            { key: '18px', label: '18' },
+                            { key: '24px', label: '24' },
+                            { key: '32px', label: '32' }
+                        ];
+                    const isActive = false;
+                    //  const currentLabel = action.type === 'fontFamily' ? this._activeFontFamily : this._activeFontSize;
+                    return (h("x-dropdown", { trigger: "click", menu: { items: menuItems }, onXOpenChange: (e) => this.handleDropdownOpenChange(e.detail.open), onXMenuClick: (e) => this.handleToolbarAction({ type: action.type }, e.detail.key) }, h("x-button", { onMouseDown: (e) => e.preventDefault(), type: "text", size: "small", shape: "round", class: { 'toolbar-btn': true, [action.type]: true, 'active': isActive } }, this.renderToolbarIcon(action.type))));
+                })));
+            }
+            // Insert group as dropdown
+            if (group.name === 'insert') {
+                const items = group.actions.filter(a => a !== 'divider').map(a => ({
+                    key: a.type,
+                    label: a.title || a.type,
+                    icon: this.getIconSvg(a.type)
+                }));
+                return (h("x-dropdown", { trigger: "click", menu: { items }, onXOpenChange: (e) => this.handleDropdownOpenChange(e.detail.open), onXMenuClick: (e) => this.handleToolbarAction({ type: e.detail.key }) }, h("x-button", { onMouseDown: (e) => e.preventDefault(), type: "text", size: "small", shape: "round", class: "toolbar-btn" }, h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })))));
+            }
+            return (h("div", { class: "toolbar-group" }, group.actions.map(action => action === 'divider' ? h("div", { class: "toolbar-divider" }) : this.renderToolbarAction(action))));
+        }
+        return this.renderToolbarAction(item);
+    }
+    renderToolbarAction(action) {
+        const isActive = this.getToolbarActionState(action.type);
+        const isDisabled = this.getToolbarActionDisabled(action.type);
+        // Color Picker
+        if (action.type === 'textColor' || action.type === 'backgroundColor') {
+            return (h("x-color-picker", { size: "small", value: action.type === 'textColor' ? '#000000' : '#ffffff', disabled: isDisabled, onXOpenChange: (e) => this.handleDropdownOpenChange(e.detail.open), onXChange: (e) => {
+                    const color = e.detail.color.toHexString();
+                    this.handleToolbarAction({ ...action }, color);
+                } }, h("div", { class: { 'toolbar-btn': true, 'active': isActive }, title: action.title }, this.renderToolbarIcon(action.type))));
+        }
+        // Dropdowns
+        if (action.type === 'h1' || action.type === 'h2' || action.type === 'h3') {
+            // We'll render Heading as a single dropdown if we encounter h1? 
+            // Actually, let's keep it simple for now or combine them.
+        }
+        const type = action.type;
+        const isDropdown = ['fontFamily', 'fontSize', 'h1', 'h2', 'h3'].includes(type) || type.startsWith('align');
+        if (isDropdown) {
+            // For now, let's just use the current button but we'll adapt for dropdowns if they were grouped.
+            // But the user said "Toolbar align, Heading, fontFamily, font size, thì sử dụng component dropdown"
+            // This implies these should be dropdowns. 
+            // I'll implement specific renderers for these.
+        }
+        return (h("x-button", { onMouseDown: (e) => e.preventDefault(), type: "text", size: "small", shape: "round", class: { 'toolbar-btn-wrapper': true, [type]: true, 'active': isActive }, onXClick: (e) => {
+                if (e.detail && e.detail.preventDefault)
+                    e.detail.preventDefault();
+                this.handleToolbarAction(action);
+            }, title: action.title, disabled: isDisabled }, h("div", { class: "toolbar-btn-inner" }, this.renderToolbarIcon(action.type), action.label && h("span", { class: "toolbar-btn-label" }, action.label))));
+    }
+    getToolbarActionState(type) {
+        switch (type) {
+            case 'bold':
+            case 'italic':
+            case 'underline':
+                return this.isFormatActive(type);
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'blockquote':
+            case 'code':
+                return this.getCurrentBlockType() === type;
+            case 'paragraph':
+                return this.getCurrentBlockType() === 'paragraph';
+            default:
+                return false;
+        }
+    }
+    getToolbarActionDisabled(type) {
+        if (type === 'undo')
+            return !this.history.canUndo();
+        if (type === 'redo')
+            return !this.history.canRedo();
+        return false;
+    }
+    handleToolbarAction(action, value) {
+        this.restoreRange();
+        switch (action.type) {
+            case 'bold':
+            case 'italic':
+            case 'underline':
+            case 'strikethrough':
+                this.toggleFormat(action.type);
+                break;
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+                this.convertBlock('heading', parseInt(action.type.slice(1)));
+                break;
+            case 'blockquote':
+            case 'code':
+            case 'paragraph':
+                this.convertBlock(action.type);
+                break;
+            case 'alignLeft':
+            case 'alignCenter':
+            case 'alignRight':
+            case 'alignJustify':
+                document.execCommand('justify' + action.type.replace('align', ''), false);
+                break;
+            case 'indent':
+                document.execCommand('indent', false);
+                break;
+            case 'outdent':
+                document.execCommand('outdent', false);
+                break;
+            case 'hr':
+                document.execCommand('insertHorizontalRule', false);
+                break;
+            case 'link':
+            case 'image':
+            case 'video':
+            case 'file':
+            case 'table':
+                this._activeModal = action.type;
+                this._modalData = {};
+                break;
+            case 'textColor':
+                if (value)
+                    document.execCommand('foreColor', false, value);
+                break;
+            case 'backgroundColor':
+                if (value) {
+                    if (!document.execCommand('hiliteColor', false, value)) {
+                        document.execCommand('backColor', false, value);
+                    }
+                }
+                break;
+            case 'fontFamily':
+                if (value)
+                    document.execCommand('fontName', false, value);
+                break;
+            case 'fontSize':
+                if (value) {
+                    const sizeMap = { '12px': '2', '14px': '3', '16px': '4', '18px': '5', '24px': '6', '32px': '7' };
+                    document.execCommand('fontSize', false, sizeMap[value] || '3');
+                }
+                break;
+            case 'undo':
+                this.undo();
+                break;
+            case 'redo':
+                this.redo();
+                break;
+        }
+        // Focus back to editor and restore selection
+        this.restoreRange();
+        this._toolbarSavedSelection = null; // Clear after use
+        setTimeout(() => {
+            this.updateActiveStates();
+            this.saveToHistory();
+            this.emitValueChange();
+        }, 0);
+    }
+    getIconSvg(type) {
+        const svgs = {
+            bold: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M15.6 11.8c1-.7 1.6-1.8 1.6-2.8 0-2.5-2-4.5-4.5-4.5H7v14h7c2.2 0 4-1.8 4-4 0-1.2-.6-2.2-1.4-2.7zM10 7.5h2.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H10v-3zm3.5 9H10v-3h3.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5z"/></svg>',
+            italic: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M10 5v3h2.2l-3.4 8H6v3h8v-3h-2.2l3.4-8H18V5h-8z"/></svg>',
+            underline: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M12 17c3.3 0 6-2.7 6-6V3h-2.5v8c0 1.9-1.6 3.5-3.5 3.5S8.5 12.9 8.5 11V3H6v8c0 3.3 2.7 6 6 6zm-7 2v2h14v-2H5z"/></svg>',
+            alignLeft: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z"/></svg>',
+            alignCenter: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M7 15v2h10v-2H7zm-4 4v2h18v-2H3zm0-16v2h18V3H3zm4 4v2h10V7H7zm-4 4v2h18v-2H3z"/></svg>',
+            alignRight: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M21 15H9v2h12v-2zM21 7H9v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z"/></svg>',
+            alignJustify: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V3H3v2z"/></svg>',
+            link: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>',
+            image: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>',
+            video: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>',
+            file: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>',
+            table: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z"/></svg>',
+            hr: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M19 13H5v-2h14v2z"/></svg>',
+            blockquote: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M6 17h3l2-4V7H5v6h3l-2 4zm8 0h3l2-4V7h-6v6h3l-2 4z"/></svg>',
+            code: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>'
+        };
+        return svgs[type] || '';
+    }
+    renderToolbarIcon(type) {
+        switch (type) {
+            case 'bold':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M15.6 11.8c1-.7 1.6-1.8 1.6-2.8 0-2.5-2-4.5-4.5-4.5H7v14h7c2.2 0 4-1.8 4-4 0-1.2-.6-2.2-1.4-2.7zM10 7.5h2.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H10v-3zm3.5 9H10v-3h3.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5z" }));
+            case 'italic':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M10 5v3h2.2l-3.4 8H6v3h8v-3h-2.2l3.4-8H18V5h-8z" }));
+            case 'underline':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M12 17c3.3 0 6-2.7 6-6V3h-2.5v8c0 1.9-1.6 3.5-3.5 3.5S8.5 12.9 8.5 11V3H6v8c0 3.3 2.7 6 6 6zm-7 2v2h14v-2H5z" }));
+            case 'h1': return h("span", { class: "text-icon" }, "H1");
+            case 'h2': return h("span", { class: "text-icon" }, "H2");
+            case 'h3': return h("span", { class: "text-icon" }, "H3");
+            case 'h4': return h("span", { class: "text-icon" }, "H4");
+            case 'h5': return h("span", { class: "text-icon" }, "H5");
+            case 'h6': return h("span", { class: "text-icon" }, "H6");
+            case 'blockquote':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M6 17h3l2-4V7H5v6h3l-2 4zm8 0h3l2-4V7h-6v6h3l-2 4z" }));
+            case 'code':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }));
+            case 'undo':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M12.5 8c-2.6 0-5 1-6.9 2.6L3 8v9h9l-3.6-3.6c1.3-1.1 3-1.8 4.7-1.8 3.5 0 6.4 2.5 7.1 5.8l2.4-.6c-1-4.2-4.7-7.4-9.1-7.4z" }));
+            case 'redo':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M18.4 10.6C16.5 9 14.1 8 11.5 8c-4.4 0-8.1 3.2-9.1 7.4l2.4.6c.7-3.3 3.6-5.8 7.1-5.8 1.7 0 3.4.7 4.7 1.8L13 17h9V8l-2.6 2.6z" }));
+            case 'strikethrough':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" }));
+            case 'alignLeft':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }));
+            case 'alignCenter':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M7 15v2h10v-2H7zm-4 4v2h18v-2H3zm0-16v2h18V3H3zm4 4v2h10V7H7zm-4 4v2h18v-2H3z" }));
+            case 'alignRight':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M21 15H9v2h12v-2zM21 7H9v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }));
+            case 'alignJustify':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V3H3v2z" }));
+            case 'indent':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
+            case 'outdent':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M11 17h10v-2H11v2zM7 16V8l-4 4 4 4zm-4 5h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
+            case 'link':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }));
+            case 'image':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }));
+            case 'video':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" }));
+            case 'file':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" }));
+            case 'table':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z" }));
+            case 'hr':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M19 13H5v-2h14v2z" }));
+            case 'textColor':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62zM4 20v2h16v-2H4z" }));
+            case 'backgroundColor':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5zM2 20h20v4H2v-4z" }));
+            case 'fontFamily':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M9.93 13.5h4.14L12 7.98zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z" }));
+            case 'fontSize':
+                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z" }));
+            default: return type;
+        }
+    }
+    renderModal() {
+        if (!this._activeModal)
+            return null;
+        let title = 'Insert';
+        let content = null;
+        switch (this._activeModal) {
+            case 'link':
+                title = 'Insert Link';
+                content = (h("div", { class: "modal-form" }, h("div", { class: "form-item" }, h("label", null, "Link URL"), h("x-input", { placeholder: "https://example.com", value: this._modalData.url, onXChange: (e) => {
+                        this._modalData = { ...this._modalData, url: e.detail.value };
+                    } }))));
+                break;
+            case 'image':
+                title = 'Insert Image';
+                content = (h("div", { class: "modal-form" }, h("div", { class: "form-item" }, h("label", null, "Image URL"), h("x-input", { placeholder: "https://example.com/image.png", value: this._modalData.url, onXChange: (e) => {
+                        this._modalData = { ...this._modalData, url: e.detail.value };
+                    } }))));
+                break;
+            case 'video':
+                title = 'Insert Video';
+                content = (h("div", { class: "modal-form" }, h("div", { class: "form-item" }, h("label", null, "Video Embed URL"), h("x-input", { placeholder: "https://www.youtube.com/embed/...", value: this._modalData.url, onXChange: (e) => {
+                        this._modalData = { ...this._modalData, url: e.detail.value };
+                    } }))));
+                break;
+            case 'table':
+                title = 'Insert Table';
+                content = (h("div", { class: "modal-form" }, h("div", { class: "form-item" }, h("label", null, "Rows"), h("x-input-number", { placeholder: "Rows", min: 1, value: this._modalData.rows || 3, onXChange: (e) => {
+                        this._modalData = { ...this._modalData, rows: e.detail.value };
+                    } })), h("div", { class: "form-item" }, h("label", null, "Columns"), h("x-input-number", { placeholder: "Columns", min: 1, value: this._modalData.cols || 3, onXChange: (e) => {
+                        this._modalData = { ...this._modalData, cols: e.detail.value };
+                    } }))));
+                break;
+        }
+        return (h("x-modal", { visible: !!this._activeModal, modalTitle: title, onXOk: () => this.handleModalOk(), onXCancel: () => this._activeModal = null }, content));
+    }
+    /**
+     * Handles the 'OK' action from insertion modals (Link, Image, etc.).
+     * Logic:
+     * 1. Consumes the modal data.
+     * 2. Executes the corresponding `execCommand` or custom HTML insertion.
+     * 3. Closes the modal and updates editor history.
+     */
+    handleModalOk() {
+        this.restoreRange();
+        const type = this._activeModal;
+        const data = this._modalData;
+        this._activeModal = null;
+        switch (type) {
+            case 'link':
+                if (data.url)
+                    document.execCommand('createLink', false, data.url);
+                break;
+            case 'image':
+                if (data.url)
+                    document.execCommand('insertImage', false, data.url);
+                break;
+            case 'video':
+                if (data.url) {
+                    const videoHtml = `<iframe width="100%" height="315" src="${data.url}" frameborder="0" allowfullscreen></iframe><p><br></p>`;
+                    document.execCommand('insertHTML', false, videoHtml);
+                }
+                break;
+            case 'table': {
+                const rows = data.rows || 3;
+                const cols = data.cols || 3;
+                let tableHtml = '<table border="1" style="width:100%; border-collapse: collapse;">';
+                for (let i = 0; i < rows; i++) {
+                    tableHtml += '<tr>';
+                    for (let j = 0; j < cols; j++) {
+                        tableHtml += '<td style="padding: 8px; border: 1px solid #ddd;">&nbsp;</td>';
+                    }
+                    tableHtml += '</tr>';
+                }
+                tableHtml += '</table><p><br></p>';
+                document.execCommand('insertHTML', false, tableHtml);
+                break;
+            }
+        }
+        this.updateActiveStates();
+        this.saveToHistory();
+        this.emitValueChange();
+    }
+    render() {
+        return (h(Host, { key: 'e8b30279f566786aea6b0f12fd877a079c3fb2c0' }, h("div", { key: '10727c39d7d0b71cb50f81696623772a1fdc624e', class: "editor-container" }, this.showToolbar && !this.disabled && (h("div", { key: '75ab27cfb4f754d59bc418c79ab63e4f49898bc6', class: "editor-toolbar", onMouseDown: (e) => e.preventDefault() }, this.toolbar.map(item => this.renderToolbarItem(item)))), h("div", { key: 'da9b8193b67f62c22f090a28e1495d08a20edc25', ref: (el) => {
+                this.editorRoot = el;
+                if (el) {
+                    this.selectionHelper.setRootElement(el);
+                }
+            }, class: {
+                'editor-content': true,
+                'disabled': this.disabled,
+            }, contentEditable: !this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onPaste: this.handlePaste, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, onMouseUp: this.updateActiveStates, "data-placeholder": this.placeholder }), this._showSlashMenu && (h("div", { key: '85242de39b0eeac2c99735b390926ed9391f7ddf', class: "slash-menu", style: {
+                left: `${this._slashMenuPosition.x}px`,
+                top: `${this._slashMenuPosition.y}px`,
+            } }, this.getFilteredSlashCommands().map((cmd) => (h("div", { class: "slash-menu-item", onClick: () => this.executeSlashCommand(cmd) }, h("div", { class: "slash-menu-icon" }, cmd.icon), h("span", { class: "slash-menu-label" }, cmd.label))))))), this.renderModal()));
+    }
+    static get is() { return "x-editor"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-editor.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-editor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "initialValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "example",
+                            "text": "<x-editor initialValue=\"<h1>Hello World</h1><p>Start editing...</p>\"></x-editor>"
+                        }],
+                    "text": "Initial HTML content to be loaded into the editor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initial-value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }, {
+                            "name": "example",
+                            "text": "<x-editor placeholder=\"Type / for commands...\"></x-editor>"
+                        }],
+                    "text": "Placeholder text displayed when the editor is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "translate('Editor.placeholder', {}, 'Start typing...')"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the editor is in read-only mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "showToolbar": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Toggles the visibility of the top toolbar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-toolbar",
+                "defaultValue": "true"
+            },
+            "toolbar": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToolbarConfig",
+                    "resolved": "(\"divider\" | ToolbarAction | ToolbarGroup)[]",
+                    "references": {
+                        "ToolbarConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-editor/types.ts::ToolbarConfig",
+                            "referenceLocation": "ToolbarConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "type",
+                            "text": "{ToolbarConfig}"
+                        }],
+                    "text": "Configuration for the toolbar groups and actions.\r\nAllows customizing which tools are available to the user."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    {\r\n      name: 'history',\r\n      actions: [\r\n        { type: 'undo', title: translate('Editor.undo', {}, 'Undo (Ctrl+Z)') },\r\n        { type: 'redo', title: translate('Editor.redo', {}, 'Redo (Ctrl+Shift+Z)') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'text',\r\n      actions: [\r\n        { type: 'bold', title: translate('Editor.bold', {}, 'Bold (Ctrl+B)') },\r\n        { type: 'italic', title: translate('Editor.italic', {}, 'Italic (Ctrl+I)') },\r\n        { type: 'underline', title: translate('Editor.underline', {}, 'Underline (Ctrl+U)') },\r\n        { type: 'strikethrough', title: translate('Editor.strikethrough', {}, 'Strikethrough') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'colors',\r\n      actions: [\r\n        { type: 'textColor', title: translate('Editor.textColor', {}, 'Text Color') },\r\n        { type: 'backgroundColor', title: translate('Editor.backgroundColor', {}, 'Background Color') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'typography',\r\n      actions: [\r\n        { type: 'fontFamily', title: translate('Editor.fontFamily', {}, 'Font Family') },\r\n        { type: 'fontSize', title: translate('Editor.fontSize', {}, 'Font Size') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'blocks',\r\n      actions: [\r\n        { type: 'h1', title: translate('Editor.h1', {}, 'Heading 1') },\r\n        { type: 'h2', title: translate('Editor.h2', {}, 'Heading 2') },\r\n        { type: 'h3', title: translate('Editor.h3', {}, 'Heading 3') },\r\n        { type: 'h4', title: translate('Editor.h4', {}, 'Heading 4') },\r\n        { type: 'h5', title: translate('Editor.h5', {}, 'Heading 5') },\r\n        { type: 'h6', title: translate('Editor.h6', {}, 'Heading 6') },\r\n        { type: 'paragraph', title: translate('Editor.paragraph', {}, 'Paragraph') },\r\n        { type: 'blockquote', title: translate('Editor.blockquote', {}, 'Quote') },\r\n        { type: 'code', title: translate('Editor.codeBlock', {}, 'Code Block') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'alignment',\r\n      actions: [\r\n        { type: 'alignLeft', title: translate('Editor.alignLeft', {}, 'Align Left') },\r\n        { type: 'alignCenter', title: translate('Editor.alignCenter', {}, 'Align Center') },\r\n        { type: 'alignRight', title: translate('Editor.alignRight', {}, 'Align Right') },\r\n        { type: 'alignJustify', title: translate('Editor.alignJustify', {}, 'Align Justify') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'indentation',\r\n      actions: [\r\n        { type: 'outdent', title: translate('Editor.outdent', {}, 'Decrease Indent') },\r\n        { type: 'indent', title: translate('Editor.indent', {}, 'Increase Indent') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'insert',\r\n      actions: [\r\n        { type: 'link', title: translate('Editor.insertLink', {}, 'Insert Link') },\r\n        { type: 'image', title: translate('Editor.insertImage', {}, 'Insert Image') },\r\n        { type: 'video', title: translate('Editor.insertVideo', {}, 'Insert Video') },\r\n        { type: 'file', title: translate('Editor.insertFile', {}, 'Insert File') },\r\n        { type: 'table', title: translate('Editor.insertTable', {}, 'Insert Table') },\r\n        { type: 'hr', title: translate('Editor.horizontalLine', {}, 'Horizontal Line') },\r\n      ]\r\n    },\r\n  ]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_showSlashMenu": {},
+            "_slashMenuPosition": {},
+            "_slashFilter": {},
+            "_activeFormats": {},
+            "_activeBlockType": {},
+            "_activeModal": {},
+            "_modalData": {},
+            "_activeAlignment": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emit value change events"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getState": {
+                "complexType": {
+                    "signature": "() => Promise<EditorState>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "EditorState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-editor/types.ts::EditorState",
+                            "referenceLocation": "EditorState"
+                        }
+                    },
+                    "return": "Promise<EditorState>"
+                },
+                "docs": {
+                    "text": "Retrieves the current editor state as a structured object.\r\nThis includes the block hierarchy and formatting metadata.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The parsed state object."
+                        }]
+                }
+            },
+            "setState": {
+                "complexType": {
+                    "signature": "(state: EditorState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "EditorState",
+                            "docs": "- The state object to apply."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "EditorState": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-editor/types.ts::EditorState",
+                            "referenceLocation": "EditorState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reconstructs the editor content from a provided state object.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "state - The state object to apply."
+                        }, {
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getHTML": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Retrieves the current RAW HTML content of the editor.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "The HTML string."
+                        }]
+                }
+            },
+            "setHTML": {
+                "complexType": {
+                    "signature": "(html: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "html",
+                            "type": "string",
+                            "docs": "- The new HTML content."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Replaces the entire editor content with the provided HTML string.\r\nContent is automatically normalized after insertion.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "html - The new HTML content."
+                        }, {
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "focusEditor": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically sets focus to the editor root element.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Resets the editor to its empty state (single paragraph) and clears history.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": undefined
+                        }]
+                }
+            },
+            "undo": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Undo last action",
+                    "tags": []
+                }
+            },
+            "redo": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Redo last undone action",
+                    "tags": []
+                }
+            },
+            "canUndo": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Check if undo is available",
+                    "tags": []
+                }
+            },
+            "canRedo": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Check if redo is available",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}