@ship-ui/core 0.22.14 → 0.22.16

package/fesm2022/ship-ui-core-ship-editor.mjs

@@ -0,0 +1,2673 @@
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, inject, PLATFORM_ID, ElementRef, viewChild, model, input, signal, computed, output, effect, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { shipComponentClasses, ShipTooltip } from '@ship-ui/core';
+import { ShipIcon } from '@ship-ui/core/ship-icon';
+import { ShipMenu } from '@ship-ui/core/ship-menu';
+import { ShipA11yKeybindingsService } from '@ship-ui/core/ship-a11y-keybindings';
+
+// Value Accessor Provider
+const SHIP_EDITOR_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => ShipEditor),
+    multi: true,
+};
+class ShipEditor {
+    #document;
+    #platformId;
+    #isBrowser;
+    #elementRef;
+    #keybindings;
+    get #doc() {
+        return this.#document;
+    }
+    #lastValueWrittenFromDOM;
+    #lastEditorElement;
+    #historyStack;
+    #historyIndex;
+    #maxHistorySize;
+    #isInternalDOMUpdate;
+    #typingTimeout;
+    // Image layout overlay signals
+    #selectedImage;
+    // Selection backup for inserting links/images when modal is open
+    #savedRange;
+    // Track outer changes
+    #isWriting;
+    #lastFormat;
+    constructor() {
+        this.#document = inject(DOCUMENT);
+        this.#platformId = inject(PLATFORM_ID);
+        this.#isBrowser = isPlatformBrowser(this.#platformId);
+        this.#elementRef = inject(ElementRef);
+        this.#keybindings = inject(ShipA11yKeybindingsService);
+        // Elements
+        this.editorRef = viewChild('editorRef', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editorRef" }] : /* istanbul ignore next */ []));
+        this.codeEditorRef = viewChild('codeEditorRef', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "codeEditorRef" }] : /* istanbul ignore next */ []));
+        this.uploadBtn = viewChild('uploadBtn', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uploadBtn" }] : /* istanbul ignore next */ []));
+        this.imageInput = viewChild('imageInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageInput" }] : /* istanbul ignore next */ []));
+        this.linkInput = viewChild('linkInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkInput" }] : /* istanbul ignore next */ []));
+        // Configuration inputs & model signals
+        this.value = model('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.format = input('html', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('Type your content here...', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.toolbar = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
+        this.color = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.variant = input('base', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+        this.customCommands = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "customCommands" }] : /* istanbul ignore next */ []));
+        // Slash commands state signals
+        this.showSlashMenu = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSlashMenu" }] : /* istanbul ignore next */ []));
+        this.slashSearchQuery = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "slashSearchQuery" }] : /* istanbul ignore next */ []));
+        this.slashMenuTop = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "slashMenuTop" }] : /* istanbul ignore next */ []));
+        this.slashMenuLeft = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "slashMenuLeft" }] : /* istanbul ignore next */ []));
+        this.#lastValueWrittenFromDOM = undefined;
+        this.#lastEditorElement = null;
+        this.#historyStack = [];
+        this.#historyIndex = -1;
+        this.#maxHistorySize = 100;
+        this.#isInternalDOMUpdate = false;
+        this.defaultCommands = computed(() => [
+            {
+                id: 'paragraph',
+                label: 'Normal Text',
+                icon: 'paragraph',
+                description: 'Start writing with plain text',
+                action: (editor) => editor.selectBlockType('p'),
+            },
+            {
+                id: 'h1',
+                label: 'Heading 1',
+                icon: 'text-h-one',
+                description: 'Big section heading',
+                action: (editor) => editor.selectBlockType('h1'),
+            },
+            {
+                id: 'h2',
+                label: 'Heading 2',
+                icon: 'text-h-two',
+                description: 'Medium section heading',
+                action: (editor) => editor.selectBlockType('h2'),
+            },
+            {
+                id: 'h3',
+                label: 'Heading 3',
+                icon: 'text-h-three',
+                description: 'Small section heading',
+                action: (editor) => editor.selectBlockType('h3'),
+            },
+            {
+                id: 'bullet-list',
+                label: 'Bullet List',
+                icon: 'list-bullets',
+                description: 'Create a simple bullet list',
+                action: (editor) => editor.formatText('insertUnorderedList'),
+            },
+            {
+                id: 'ordered-list',
+                label: 'Numbered List',
+                icon: 'list-numbers',
+                description: 'Create a list with numbering',
+                action: (editor) => editor.formatText('insertOrderedList'),
+            },
+            {
+                id: 'quote',
+                label: 'Quote',
+                icon: 'quotes',
+                description: 'Capture a quote',
+                action: (editor) => editor.selectBlockType('blockquote'),
+            },
+            {
+                id: 'code-block',
+                label: 'Code Block',
+                icon: 'code',
+                description: 'Write code snippets',
+                action: (editor) => editor.selectBlockType('pre'),
+            },
+            {
+                id: 'image',
+                label: 'Image',
+                icon: 'image',
+                description: 'Insert an image from URL or upload',
+                action: (editor) => editor.openImageModal(),
+            },
+            {
+                id: 'link',
+                label: 'Link',
+                icon: 'link',
+                description: 'Insert a hyperlink',
+                action: (editor) => editor.openLinkModal(),
+            },
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultCommands" }] : /* istanbul ignore next */ []));
+        this.slashCommands = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "slashCommands" }] : /* istanbul ignore next */ []));
+        this.allCommands = computed(() => [...this.defaultCommands(), ...this.customCommands()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allCommands" }] : /* istanbul ignore next */ []));
+        this.enabledCommands = computed(() => {
+            const sc = this.slashCommands();
+            if (sc === false)
+                return [];
+            if (Array.isArray(sc)) {
+                return this.allCommands().filter((cmd) => sc.includes(cmd.id));
+            }
+            return this.allCommands();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enabledCommands" }] : /* istanbul ignore next */ []));
+        this.hasSlashCommands = computed(() => !this.readonly() && this.enabledCommands().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSlashCommands" }] : /* istanbul ignore next */ []));
+        this.filteredCommands = computed(() => {
+            const query = this.slashSearchQuery().toLowerCase().trim();
+            if (!query)
+                return this.enabledCommands();
+            return this.enabledCommands().filter((cmd) => cmd.label.toLowerCase().includes(query) ||
+                (cmd.description && cmd.description.toLowerCase().includes(query)) ||
+                cmd.id.toLowerCase().includes(query));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredCommands" }] : /* istanbul ignore next */ []));
+        // Toolbar group configuration inputs
+        this.showFormats = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showFormats" }] : /* istanbul ignore next */ []));
+        this.showBlocks = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showBlocks" }] : /* istanbul ignore next */ []));
+        this.showLists = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showLists" }] : /* istanbul ignore next */ []));
+        this.showAlignments = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showAlignments" }] : /* istanbul ignore next */ []));
+        this.showInsertions = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showInsertions" }] : /* istanbul ignore next */ []));
+        this.showHistory = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showHistory" }] : /* istanbul ignore next */ []));
+        // File upload output hook & configuration
+        this.customUpload = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "customUpload" }] : /* istanbul ignore next */ []));
+        this.imageUploadEnabled = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageUploadEnabled" }] : /* istanbul ignore next */ []));
+        this.imageUpload = output();
+        // Image layout overlay signals
+        this.#selectedImage = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#selectedImage" }] : /* istanbul ignore next */ []));
+        this.imgToolbarTop = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imgToolbarTop" }] : /* istanbul ignore next */ []));
+        this.imgToolbarLeft = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imgToolbarLeft" }] : /* istanbul ignore next */ []));
+        this.imgMode = signal('content', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imgMode" }] : /* istanbul ignore next */ []));
+        this.imgSize = signal('auto', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imgSize" }] : /* istanbul ignore next */ []));
+        // Local state signals
+        this.viewMode = signal('design', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewMode" }] : /* istanbul ignore next */ []));
+        this.isFocused = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+        this.showLinkModal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showLinkModal" }] : /* istanbul ignore next */ []));
+        this.showImageModal = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showImageModal" }] : /* istanbul ignore next */ []));
+        this.rawCodeValue = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rawCodeValue" }] : /* istanbul ignore next */ []));
+        this.showBlockMenu = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showBlockMenu" }] : /* istanbul ignore next */ []));
+        // Toolbar active states
+        this.isBold = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isBold" }] : /* istanbul ignore next */ []));
+        this.isItalic = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isItalic" }] : /* istanbul ignore next */ []));
+        this.isUnderline = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isUnderline" }] : /* istanbul ignore next */ []));
+        this.isStrike = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isStrike" }] : /* istanbul ignore next */ []));
+        this.align = signal('left', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.activeBlock = signal('p', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeBlock" }] : /* istanbul ignore next */ []));
+        this.canUndo = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+        this.canRedo = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
+        // Selection backup for inserting links/images when modal is open
+        this.#savedRange = null;
+        // Text metrics signals
+        this.charCount = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "charCount" }] : /* istanbul ignore next */ []));
+        this.wordCount = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wordCount" }] : /* istanbul ignore next */ []));
+        // Form accessors callbacks
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        // Host CSS classes resolver
+        this.hostClasses = shipComponentClasses('editor', {
+            color: this.color,
+            variant: this.variant,
+            readonly: this.readonly,
+        });
+        // Track outer changes
+        this.#isWriting = false;
+        this.#lastFormat = null;
+        // --- IMAGE FILE HANDLING & LAYOUT OVERLAYS ---
+        this.selectedImage = this.#selectedImage.asReadonly();
+        // Auto-focus link dialog input when opened
+        effect(() => {
+            if (this.showLinkModal()) {
+                const linkInput = this.linkInput();
+                if (linkInput) {
+                    linkInput.nativeElement.focus();
+                }
+            }
+        });
+        // Auto-focus image dialog elements when opened based on configuration
+        effect(() => {
+            if (this.showImageModal()) {
+                const uploadBtn = this.uploadBtn();
+                const imageInput = this.imageInput();
+                if (this.imageUploadEnabled()) {
+                    if (uploadBtn) {
+                        uploadBtn.nativeElement.focus();
+                    }
+                }
+                else {
+                    if (imageInput) {
+                        imageInput.nativeElement.focus();
+                    }
+                }
+            }
+        });
+        // Keep DOM inside editor in sync with value model changes reactively (when written from parent)
+        effect(() => {
+            const val = this.value();
+            const editor = this.editorRef()?.nativeElement;
+            // If the DOM element itself has changed (re-created during HMR), we must reset
+            // lastValueWrittenFromDOM to force content initialization onto the new element.
+            if (editor && editor !== this.#lastEditorElement) {
+                this.#lastEditorElement = editor;
+                this.#lastValueWrittenFromDOM = undefined;
+            }
+            if (val === this.#lastValueWrittenFromDOM)
+                return;
+            this.#syncModelToDOM(val);
+        });
+        // React to format changes by converting the model value to the new format reactively
+        effect(() => {
+            const fmt = this.format();
+            const prev = this.#lastFormat;
+            this.#lastFormat = fmt;
+            if (prev !== null && prev !== fmt) {
+                const val = this.value();
+                // 1. Convert current value in prev format to HTML
+                let html = '';
+                if (prev === 'html' && typeof val === 'string') {
+                    html = val;
+                }
+                else if (prev === 'markdown' && typeof val === 'string') {
+                    html = this.#markdownToHTML(val);
+                }
+                else if (prev === 'json' && Array.isArray(val)) {
+                    html = this.#jsonToHTML(val);
+                }
+                // 2. Convert HTML to the new format
+                let newValue = '';
+                if (fmt === 'html') {
+                    newValue = html;
+                }
+                else if (fmt === 'markdown') {
+                    newValue = this.#htmlToMarkdown(html);
+                }
+                else if (fmt === 'json') {
+                    newValue = this.#htmlToJSON(html);
+                }
+                // 3. Update the model and DOM
+                this.#isWriting = true;
+                this.value.set(newValue);
+                this.#lastValueWrittenFromDOM = newValue;
+                this.onChange(newValue);
+                if (fmt === 'markdown' && typeof newValue === 'string') {
+                    this.rawCodeValue.set(newValue);
+                }
+                else if (fmt === 'json' && Array.isArray(newValue)) {
+                    this.rawCodeValue.set(JSON.stringify(newValue, null, 2));
+                }
+                else {
+                    this.rawCodeValue.set(html);
+                }
+                const editor = this.editorRef()?.nativeElement;
+                if (editor) {
+                    const normalizedHTML = html === '<p><br></p>' ? '' : html;
+                    const currentNormalized = editor.innerHTML === '<p><br></p>' ? '' : editor.innerHTML;
+                    if (normalizedHTML !== currentNormalized) {
+                        editor.innerHTML = html;
+                    }
+                    this.#ensureImagesFocusable();
+                }
+                this.#isWriting = false;
+            }
+        });
+        // Recalculate metrics whenever raw content updates
+        effect(() => {
+            const val = this.value();
+            const fmt = this.format();
+            let html = '';
+            if (!val) {
+                html = '';
+            }
+            else if (typeof val === 'string') {
+                if (fmt === 'markdown') {
+                    html = this.#markdownToHTML(val);
+                }
+                else {
+                    html = val;
+                }
+            }
+            else if (Array.isArray(val)) {
+                html = this.#jsonToHTML(val);
+            }
+            const temp = this.#document.createElement('div');
+            temp.innerHTML = html;
+            const text = (temp.textContent || '').replace(/\u00a0/g, ' ').trim();
+            this.charCount.set(text.length);
+            this.wordCount.set(text === '' ? 0 : text.split(/\s+/).filter((w) => w.length > 0).length);
+        });
+        // Reinitialize toolbar tabindexes when visibility inputs change
+        effect(() => {
+            this.showFormats();
+            this.showBlocks();
+            this.showLists();
+            this.showAlignments();
+            this.showInsertions();
+            this.showHistory();
+            this.toolbar();
+            this.readonly();
+            this.#initializeToolbarTabindexes();
+        });
+    }
+    ngOnInit() {
+        // Empty hook
+    }
+    ngAfterViewInit() {
+        this.#syncModelToDOM(this.value());
+    }
+    ngOnDestroy() {
+        this.#savedRange = null;
+        if (this.#typingTimeout) {
+            clearTimeout(this.#typingTimeout);
+        }
+    }
+    // --- CONTROL VALUE ACCESSOR ---
+    writeValue(obj) {
+        this.#isWriting = true;
+        this.value.set(obj);
+        this.#syncModelToDOM(obj);
+        this.#isWriting = false;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // In Angular forms, this matches readonly
+    }
+    // --- MODEL TO DOM SYNCING ---
+    #syncModelToDOM(val) {
+        let html = '';
+        if (val === null || val === undefined || val === '') {
+            html = '<p><br></p>';
+        }
+        else if (typeof val === 'string') {
+            if (this.format() === 'markdown') {
+                html = this.#markdownToHTML(val);
+            }
+            else {
+                html = val;
+            }
+        }
+        else if (Array.isArray(val)) {
+            html = this.#jsonToHTML(val);
+        }
+        else {
+            html = '<p><br></p>';
+        }
+        const isNewValue = val !== this.#lastValueWrittenFromDOM;
+        // Set code editor value
+        if (this.format() === 'markdown' && typeof val === 'string') {
+            this.rawCodeValue.set(val);
+        }
+        else if (this.format() === 'json' && Array.isArray(val)) {
+            this.rawCodeValue.set(JSON.stringify(val, null, 2));
+        }
+        else {
+            this.rawCodeValue.set(html);
+        }
+        // Update WYSIWYG editor surface if in design mode
+        const editor = this.editorRef()?.nativeElement;
+        if (editor) {
+            this.#lastValueWrittenFromDOM = val;
+            // Avoid resetting selection if html content is equivalent
+            const normalizedHTML = html === '<p><br></p>' ? '' : html;
+            const currentNormalized = editor.innerHTML === '<p><br></p>' ? '' : editor.innerHTML;
+            if (normalizedHTML !== currentNormalized) {
+                editor.innerHTML = html;
+            }
+            this.#ensureImagesFocusable();
+            if (isNewValue) {
+                this.#historyStack = [];
+                this.#historyIndex = -1;
+            }
+            if (this.#historyStack.length === 0) {
+                this.#saveHistory();
+            }
+        }
+        this.#updateHistoryStates();
+    }
+    // --- DOM TO MODEL SYNCING ---
+    #updateValueFromDOM() {
+        const editor = this.editorRef()?.nativeElement;
+        if (!editor)
+            return;
+        let html = editor.innerHTML;
+        // Normalize empty editor contents to empty string or basic paragraph
+        if (html === '' || html === '<br>' || html === '<p><br></p>') {
+            html = '';
+        }
+        this.#isWriting = true;
+        const currentFormat = this.format();
+        if (currentFormat === 'html') {
+            this.value.set(html);
+            this.#lastValueWrittenFromDOM = html;
+            this.onChange(html);
+        }
+        else if (currentFormat === 'markdown') {
+            const md = this.#htmlToMarkdown(html);
+            this.value.set(md);
+            this.#lastValueWrittenFromDOM = md;
+            this.onChange(md);
+            this.rawCodeValue.set(md);
+        }
+        else if (currentFormat === 'json') {
+            const json = this.#htmlToJSON(html);
+            this.value.set(json);
+            this.#lastValueWrittenFromDOM = json;
+            this.onChange(json);
+            this.rawCodeValue.set(JSON.stringify(json, null, 2));
+        }
+        this.#isWriting = false;
+    }
+    // --- COMPONENT HANDLERS ---
+    onDOMInput() {
+        this.#ensureImagesFocusable();
+        this.#updateValueFromDOM();
+        // Debounce history save on typing (500ms) or save immediately on word/sentence boundaries
+        const selection = window.getSelection();
+        let saveImmediately = false;
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            const textNode = range.startContainer;
+            if (textNode.nodeType === Node.TEXT_NODE) {
+                const char = textNode.textContent?.charAt(range.startOffset - 1);
+                if (char && /[\s.,!?;/]/.test(char)) {
+                    saveImmediately = true;
+                }
+            }
+        }
+        if (this.#typingTimeout) {
+            clearTimeout(this.#typingTimeout);
+        }
+        if (saveImmediately) {
+            this.#saveHistory();
+        }
+        else {
+            this.#typingTimeout = setTimeout(() => {
+                this.#saveHistory();
+            }, 500);
+        }
+    }
+    onDOMBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    onCodeInput(event) {
+        const textarea = event.target;
+        this.rawCodeValue.set(textarea.value);
+    }
+    onCodeBlur(event) {
+        this.isFocused.set(false);
+        const textarea = event.target;
+        const codeVal = textarea.value;
+        this.#isWriting = true;
+        const currentFormat = this.format();
+        if (currentFormat === 'html') {
+            this.value.set(codeVal);
+            this.onChange(codeVal);
+        }
+        else if (currentFormat === 'markdown') {
+            this.value.set(codeVal);
+            this.onChange(codeVal);
+        }
+        else if (currentFormat === 'json') {
+            try {
+                const parsed = JSON.parse(codeVal);
+                this.value.set(parsed);
+                this.onChange(parsed);
+            }
+            catch (e) {
+                // invalid JSON, do not update model, let user fix it
+            }
+        }
+        this.#isWriting = false;
+        this.onTouched();
+    }
+    // --- SELECTION STATE & COMMANDS ---
+    formatText(command, value = '') {
+        if (this.readonly())
+            return;
+        if (this.viewMode() === 'code')
+            return;
+        const cmd = command.toLowerCase();
+        if (cmd === 'bold') {
+            this.applyInlineStyle('strong');
+        }
+        else if (cmd === 'italic') {
+            this.applyInlineStyle('em');
+        }
+        else if (cmd === 'underline') {
+            this.applyInlineStyle('u');
+        }
+        else if (cmd === 'strikethrough') {
+            this.applyInlineStyle('s');
+        }
+        else if (cmd === 'undo') {
+            this.undo();
+        }
+        else if (cmd === 'redo') {
+            this.redo();
+        }
+        else if (cmd === 'insertunorderedlist') {
+            this.toggleList('ul');
+        }
+        else if (cmd === 'insertorderedlist') {
+            this.toggleList('ol');
+        }
+        else if (cmd === 'inserthorizontalrule') {
+            this.insertHorizontalRule();
+        }
+        else if (cmd === 'removeformat') {
+            this.removeFormat();
+        }
+        else if (cmd === 'justifyleft') {
+            this.setAlign('left');
+        }
+        else if (cmd === 'justifycenter') {
+            this.setAlign('center');
+        }
+        else if (cmd === 'justifyright') {
+            this.setAlign('right');
+        }
+        else if (cmd === 'formatblock') {
+            this.setBlockType(value);
+        }
+    }
+    applyInlineStyle(tag) {
+        if (this.readonly() || this.viewMode() === 'code')
+            return;
+        this.#restoreSelection();
+        const editor = this.editorRef()?.nativeElement;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0 || selection.isCollapsed)
+            return;
+        const range = selection.getRangeAt(0);
+        if (!editor?.contains(range.commonAncestorContainer))
+            return;
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = true;
+        const textNodes = getTextNodesInRange(range);
+        if (textNodes.length === 0) {
+            this.#isInternalDOMUpdate = false;
+            return;
+        }
+        const tagName = tag.toUpperCase();
+        const allWrapped = textNodes.every((node) => isNodeWrappedInTag(node, tag, editor));
+        let finalStartNode = range.startContainer;
+        let finalStartOffset = range.startOffset;
+        let finalEndNode = range.endContainer;
+        let finalEndOffset = range.endOffset;
+        if (allWrapped) {
+            const elementsToUnwrap = new Set();
+            for (const node of textNodes) {
+                let current = node.parentNode;
+                while (current && current !== editor) {
+                    if (current.nodeType === Node.ELEMENT_NODE && current.tagName === tagName) {
+                        elementsToUnwrap.add(current);
+                    }
+                    current = current.parentNode;
+                }
+            }
+            for (const el of elementsToUnwrap) {
+                const parent = el.parentNode;
+                if (parent) {
+                    while (el.firstChild) {
+                        parent.insertBefore(el.firstChild, el);
+                    }
+                    parent.removeChild(el);
+                }
+            }
+        }
+        else {
+            for (const node of textNodes) {
+                const isStart = node === range.startContainer;
+                const isEnd = node === range.endContainer;
+                let start = isStart ? range.startOffset : 0;
+                let end = isEnd ? range.endOffset : node.textContent.length;
+                if (start >= end)
+                    continue;
+                let targetNode = node;
+                if (isStart && start > 0) {
+                    targetNode = node.splitText(start);
+                    if (isEnd) {
+                        finalEndNode = targetNode;
+                        finalEndOffset = end - start;
+                    }
+                    finalStartNode = targetNode;
+                    finalStartOffset = 0;
+                    end = end - start;
+                    start = 0;
+                }
+                if (isEnd && finalEndOffset < targetNode.textContent.length) {
+                    targetNode.splitText(finalEndOffset);
+                    finalEndNode = targetNode;
+                    finalEndOffset = targetNode.textContent.length;
+                    end = targetNode.textContent.length;
+                }
+                if (!isNodeWrappedInTag(targetNode, tag, editor)) {
+                    const element = node.ownerDocument.createElement(tag);
+                    targetNode.parentNode?.insertBefore(element, targetNode);
+                    element.appendChild(targetNode);
+                }
+            }
+        }
+        const newRange = this.#document.createRange();
+        try {
+            newRange.setStart(finalStartNode, finalStartOffset);
+            newRange.setEnd(finalEndNode, finalEndOffset);
+            selection.removeAllRanges();
+            selection.addRange(newRange);
+        }
+        catch (e) { }
+        this.#updateValueFromDOM();
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = false;
+        this.onSelectionChange();
+    }
+    toggleLink(url) {
+        if (this.readonly() || this.viewMode() === 'code')
+            return;
+        this.#restoreSelection();
+        const editor = this.editorRef()?.nativeElement;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        if (!editor?.contains(range.commonAncestorContainer))
+            return;
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = true;
+        let existingLink = null;
+        let node = range.commonAncestorContainer;
+        while (node && node !== editor) {
+            if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'A') {
+                existingLink = node;
+                break;
+            }
+            node = node.parentNode;
+        }
+        if (existingLink) {
+            if (!url) {
+                const parent = existingLink.parentNode;
+                if (parent) {
+                    while (existingLink.firstChild) {
+                        parent.insertBefore(existingLink.firstChild, existingLink);
+                    }
+                    parent.removeChild(existingLink);
+                }
+            }
+            else {
+                existingLink.href = url;
+            }
+        }
+        else if (url && !selection.isCollapsed) {
+            const link = this.#document.createElement('a');
+            link.href = url;
+            link.target = '_blank';
+            try {
+                link.appendChild(range.extractContents());
+                range.insertNode(link);
+                const newRange = this.#document.createRange();
+                newRange.selectNodeContents(link);
+                selection.removeAllRanges();
+                selection.addRange(newRange);
+            }
+            catch (e) {
+                // Fallback
+            }
+        }
+        this.#updateValueFromDOM();
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = false;
+        this.onSelectionChange();
+    }
+    setBlockType(tag) {
+        if (this.readonly() || this.viewMode() === 'code')
+            return;
+        this.#restoreSelection();
+        const editor = this.editorRef()?.nativeElement;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        if (!editor?.contains(range.commonAncestorContainer))
+            return;
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = true;
+        let blockNode = null;
+        let node = range.commonAncestorContainer;
+        while (node && node !== editor) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (el.parentElement === editor) {
+                    blockNode = el;
+                    break;
+                }
+            }
+            node = node.parentNode;
+        }
+        if (!blockNode) {
+            node = range.commonAncestorContainer;
+            while (node && node !== editor) {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    const el = node;
+                    const tagName = el.tagName.toLowerCase();
+                    if (['p', 'h1', 'h2', 'h3', 'blockquote', 'pre', 'ul', 'ol', 'li'].includes(tagName)) {
+                        blockNode = el;
+                        break;
+                    }
+                }
+                node = node.parentNode;
+            }
+        }
+        if (blockNode) {
+            const newBlock = this.#document.createElement(tag);
+            newBlock.innerHTML = blockNode.innerHTML;
+            if (blockNode.className) {
+                newBlock.className = blockNode.className;
+            }
+            if (tag === 'pre') {
+                newBlock.innerHTML = `<code>${blockNode.innerText || blockNode.innerHTML}</code>`;
+            }
+            else if (blockNode.tagName.toLowerCase() === 'pre' && tag !== 'pre') {
+                const codeEl = blockNode.querySelector('code');
+                if (codeEl) {
+                    newBlock.innerHTML = codeEl.innerHTML;
+                }
+            }
+            // Ensure empty block has placeholder <br> so caret is visible and focusable
+            if (!newBlock.innerHTML || newBlock.innerHTML === '<br>') {
+                newBlock.innerHTML = '<br>';
+            }
+            const parent = blockNode.parentNode;
+            if (parent) {
+                parent.replaceChild(newBlock, blockNode);
+                try {
+                    const newRange = this.#document.createRange();
+                    if (newBlock.textContent?.trim() === '') {
+                        newRange.setStart(newBlock, 0);
+                        newRange.collapse(true);
+                    }
+                    else {
+                        newRange.selectNodeContents(newBlock);
+                        newRange.collapse(false);
+                    }
+                    selection.removeAllRanges();
+                    selection.addRange(newRange);
+                }
+                catch (e) { }
+            }
+        }
+        else {
+            const newBlock = this.#document.createElement(tag);
+            newBlock.appendChild(range.extractContents());
+            range.insertNode(newBlock);
+        }
+        this.#updateValueFromDOM();
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = false;
+        this.onSelectionChange();
+    }
+    toggleList(listType) {
+        if (this.readonly() || this.viewMode() === 'code')
+            return;
+        this.#restoreSelection();
+        const editor = this.editorRef()?.nativeElement;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        if (!editor?.contains(range.commonAncestorContainer))
+            return;
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = true;
+        let listNode = null;
+        let listTagName = '';
+        let node = range.commonAncestorContainer;
+        while (node && node !== editor) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                const tag = el.tagName.toLowerCase();
+                if (tag === 'ul' || tag === 'ol') {
+                    listNode = el;
+                    listTagName = tag;
+                    break;
+                }
+            }
+            node = node.parentNode;
+        }
+        if (listNode) {
+            if (listTagName === listType) {
+                const parent = listNode.parentNode;
+                if (parent) {
+                    const items = Array.from(listNode.querySelectorAll('li'));
+                    let lastP = null;
+                    items.forEach((item) => {
+                        const p = this.#document.createElement('p');
+                        p.innerHTML = item.innerHTML;
+                        if (!p.innerHTML || p.innerHTML === '<br>') {
+                            p.innerHTML = '<br>';
+                        }
+                        parent.insertBefore(p, listNode);
+                        lastP = p;
+                    });
+                    parent.removeChild(listNode);
+                    if (lastP) {
+                        try {
+                            const newRange = this.#document.createRange();
+                            if (lastP.textContent?.trim() === '') {
+                                newRange.setStart(lastP, 0);
+                                newRange.collapse(true);
+                            }
+                            else {
+                                newRange.selectNodeContents(lastP);
+                                newRange.collapse(false);
+                            }
+                            selection.removeAllRanges();
+                            selection.addRange(newRange);
+                        }
+                        catch (e) { }
+                    }
+                }
+            }
+            else {
+                const newList = this.#document.createElement(listType);
+                newList.innerHTML = listNode.innerHTML;
+                const parent = listNode.parentNode;
+                if (parent) {
+                    parent.replaceChild(newList, listNode);
+                    const firstItem = newList.querySelector('li');
+                    if (firstItem) {
+                        try {
+                            const newRange = this.#document.createRange();
+                            if (firstItem.textContent?.trim() === '') {
+                                newRange.setStart(firstItem, 0);
+                                newRange.collapse(true);
+                            }
+                            else {
+                                newRange.selectNodeContents(firstItem);
+                                newRange.collapse(false);
+                            }
+                            selection.removeAllRanges();
+                            selection.addRange(newRange);
+                        }
+                        catch (e) { }
+                    }
+                }
+            }
+        }
+        else {
+            let blockNode = null;
+            let node = range.commonAncestorContainer;
+            while (node && node !== editor) {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    const el = node;
+                    if (el.parentElement === editor) {
+                        blockNode = el;
+                        break;
+                    }
+                }
+                node = node.parentNode;
+            }
+            if (blockNode) {
+                const newList = this.#document.createElement(listType);
+                const item = this.#document.createElement('li');
+                item.innerHTML = blockNode.innerHTML;
+                if (!item.innerHTML || item.innerHTML === '<br>') {
+                    item.innerHTML = '<br>';
+                }
+                newList.appendChild(item);
+                const parent = blockNode.parentNode;
+                if (parent) {
+                    parent.replaceChild(newList, blockNode);
+                    try {
+                        const newRange = this.#document.createRange();
+                        if (item.textContent?.trim() === '') {
+                            newRange.setStart(item, 0);
+                            newRange.collapse(true);
+                        }
+                        else {
+                            newRange.selectNodeContents(item);
+                            newRange.collapse(false);
+                        }
+                        selection.removeAllRanges();
+                        selection.addRange(newRange);
+                    }
+                    catch (e) { }
+                }
+            }
+        }
+        this.#updateValueFromDOM();
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = false;
+        this.onSelectionChange();
+    }
+    insertHorizontalRule() {
+        if (this.readonly() || this.viewMode() === 'code')
+            return;
+        this.#restoreSelection();
+        const editor = this.editorRef()?.nativeElement;
+        if (!editor)
+            return;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        if (!editor.contains(range.commonAncestorContainer))
+            return;
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = true;
+        const hr = this.#document.createElement('hr');
+        range.deleteContents();
+        range.insertNode(hr);
+        const p = this.#document.createElement('p');
+        p.innerHTML = '<br>';
+        if (hr.nextSibling) {
+            hr.parentNode?.insertBefore(p, hr.nextSibling);
+        }
+        else {
+            hr.parentNode?.appendChild(p);
+        }
+        const newRange = this.#document.createRange();
+        newRange.setStart(p, 0);
+        newRange.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+        this.#updateValueFromDOM();
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = false;
+        this.onSelectionChange();
+    }
+    setAlign(direction) {
+        if (this.readonly() || this.viewMode() === 'code')
+            return;
+        this.#restoreSelection();
+        const editor = this.editorRef()?.nativeElement;
+        if (!editor)
+            return;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        if (!editor.contains(range.commonAncestorContainer))
+            return;
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = true;
+        let blockNode = null;
+        let node = range.commonAncestorContainer;
+        while (node && node !== editor) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                const tag = el.tagName.toLowerCase();
+                if (['p', 'h1', 'h2', 'h3', 'blockquote', 'pre', 'li'].includes(tag)) {
+                    blockNode = el;
+                    break;
+                }
+            }
+            node = node.parentNode;
+        }
+        if (blockNode) {
+            blockNode.style.textAlign = direction;
+        }
+        this.#updateValueFromDOM();
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = false;
+        this.onSelectionChange();
+    }
+    removeFormat() {
+        if (this.readonly() || this.viewMode() === 'code')
+            return;
+        this.#restoreSelection();
+        const editor = this.editorRef()?.nativeElement;
+        if (!editor)
+            return;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0 || selection.isCollapsed)
+            return;
+        const range = selection.getRangeAt(0);
+        if (!editor.contains(range.commonAncestorContainer))
+            return;
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = true;
+        const fragment = range.extractContents();
+        const stripTags = ['strong', 'em', 'u', 's', 'a', 'b', 'i', 'span'];
+        const container = this.#document.createElement('div');
+        container.appendChild(fragment);
+        stripTags.forEach((tag) => {
+            const els = Array.from(container.querySelectorAll(tag));
+            els.forEach((el) => {
+                const parent = el.parentNode;
+                if (parent) {
+                    while (el.firstChild) {
+                        parent.insertBefore(el.firstChild, el);
+                    }
+                    parent.removeChild(el);
+                }
+            });
+        });
+        range.insertNode(container.firstChild || container);
+        this.#updateValueFromDOM();
+        this.#saveHistory();
+        this.#isInternalDOMUpdate = false;
+        this.onSelectionChange();
+    }
+    undo() {
+        if (this.#historyIndex <= 0)
+            return;
+        this.#historyIndex--;
+        this.#restoreHistoryState(this.#historyStack[this.#historyIndex]);
+    }
+    redo() {
+        if (this.#historyIndex >= this.#historyStack.length - 1)
+            return;
+        this.#historyIndex++;
+        this.#restoreHistoryState(this.#historyStack[this.#historyIndex]);
+    }
+    #saveHistory() {
+        if (!this.#isBrowser)
+            return;
+        const editor = this.editorRef()?.nativeElement;
+        if (!editor)
+            return;
+        const html = editor.innerHTML;
+        if (this.#historyIndex >= 0 && this.#historyStack[this.#historyIndex].html === html) {
+            return;
+        }
+        let caret = null;
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            if (editor.contains(range.commonAncestorContainer)) {
+                caret = {
+                    startPath: getNodePath(editor, range.startContainer),
+                    startOffset: range.startOffset,
+                    endPath: getNodePath(editor, range.endContainer),
+                    endOffset: range.endOffset,
+                };
+            }
+        }
+        if (this.#historyIndex < this.#historyStack.length - 1) {
+            this.#historyStack = this.#historyStack.slice(0, this.#historyIndex + 1);
+        }
+        this.#historyStack.push({ html, caret });
+        if (this.#historyStack.length > this.#maxHistorySize) {
+            this.#historyStack.shift();
+        }
+        else {
+            this.#historyIndex++;
+        }
+        this.#updateHistoryStates();
+    }
+    #restoreHistoryState(state) {
+        const editor = this.editorRef()?.nativeElement;
+        if (!editor)
+            return;
+        this.#isWriting = true;
+        editor.innerHTML = state.html;
+        this.#ensureImagesFocusable();
+        this.#updateValueFromDOM();
+        this.#isWriting = false;
+        if (state.caret) {
+            const startNode = getNodeByPath(editor, state.caret.startPath);
+            const endNode = getNodeByPath(editor, state.caret.endPath);
+            const selection = window.getSelection();
+            if (selection) {
+                try {
+                    const range = this.#document.createRange();
+                    range.setStart(startNode, state.caret.startOffset);
+                    range.setEnd(endNode, state.caret.endOffset);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+                catch (e) {
+                    // Fallback
+                }
+            }
+        }
+        this.#updateHistoryStates();
+    }
+    toggleViewMode() {
+        const nextMode = this.viewMode() === 'design' ? 'code' : 'design';
+        this.viewMode.set(nextMode);
+        // Give time to render then sync and focus
+        setTimeout(() => {
+            if (nextMode === 'design') {
+                const editor = this.editorRef()?.nativeElement;
+                if (editor) {
+                    this.#syncModelToDOM(this.value());
+                    editor.focus();
+                }
+            }
+            else {
+                const codeEditor = this.codeEditorRef()?.nativeElement;
+                if (codeEditor) {
+                    codeEditor.focus();
+                }
+            }
+            this.#updateHistoryStates();
+        });
+    }
+    #updateHistoryStates() {
+        if (!this.#isBrowser || this.viewMode() === 'code') {
+            this.canUndo.set(false);
+            this.canRedo.set(false);
+            return;
+        }
+        this.canUndo.set(this.#historyIndex > 0);
+        this.canRedo.set(this.#historyIndex < this.#historyStack.length - 1);
+    }
+    #restoreSelection() {
+        if (!this.#isBrowser)
+            return;
+        const selection = window.getSelection();
+        const editor = this.editorRef()?.nativeElement;
+        if (selection && this.#savedRange && editor) {
+            let isInside = false;
+            if (selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                if (editor.contains(range.commonAncestorContainer)) {
+                    isInside = true;
+                }
+            }
+            if (!isInside) {
+                editor.focus();
+                try {
+                    selection.removeAllRanges();
+                    selection.addRange(this.#savedRange);
+                }
+                catch (e) { }
+            }
+        }
+    }
+    onSelectionChange() {
+        if (!this.#isBrowser)
+            return;
+        this.#updateHistoryStates();
+        if (this.readonly() || this.viewMode() === 'code')
+            return;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        const editorEl = this.editorRef()?.nativeElement;
+        if (!editorEl || !editorEl.contains(range.commonAncestorContainer)) {
+            return;
+        }
+        // Save selection range for modal operations
+        this.#savedRange = range.cloneRange();
+        // DOM tree traversal for formatting active states
+        let current = range.commonAncestorContainer;
+        let bold = false;
+        let italic = false;
+        let underline = false;
+        let strike = false;
+        let textAlign = 'left';
+        while (current && current !== editorEl) {
+            if (current.nodeType === Node.ELEMENT_NODE) {
+                const el = current;
+                const tag = el.tagName.toLowerCase();
+                if (tag === 'strong' || tag === 'b')
+                    bold = true;
+                if (tag === 'em' || tag === 'i')
+                    italic = true;
+                if (tag === 'u')
+                    underline = true;
+                if (tag === 's' || tag === 'del')
+                    strike = true;
+                if (['p', 'h1', 'h2', 'h3', 'blockquote', 'pre', 'li'].includes(tag)) {
+                    const alignValue = el.style.textAlign || window.getComputedStyle(el).textAlign;
+                    if (alignValue === 'center')
+                        textAlign = 'center';
+                    else if (alignValue === 'right')
+                        textAlign = 'right';
+                    else
+                        textAlign = 'left';
+                }
+            }
+            current = current.parentNode;
+        }
+        this.isBold.set(bold);
+        this.isItalic.set(italic);
+        this.isUnderline.set(underline);
+        this.isStrike.set(strike);
+        this.align.set(textAlign);
+        // Active block traverse
+        let node = selection.anchorNode;
+        let blockType = 'p';
+        while (node && node !== editorEl) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const tag = node.tagName.toLowerCase();
+                if (['h1', 'h2', 'h3', 'blockquote', 'pre', 'ul', 'ol', 'li'].includes(tag)) {
+                    blockType = tag;
+                    break;
+                }
+            }
+            node = node.parentNode;
+        }
+        this.activeBlock.set(blockType);
+        // Track active block class for paragraph placeholders
+        const activeBlocks = editorEl.querySelectorAll('.sh-editor-active-block');
+        activeBlocks.forEach((b) => b.classList.remove('sh-editor-active-block'));
+        let activeNode = selection.anchorNode;
+        if (activeNode) {
+            if (activeNode.nodeType === Node.TEXT_NODE) {
+                activeNode = activeNode.parentElement;
+            }
+            while (activeNode && activeNode !== editorEl) {
+                if (activeNode.parentElement === editorEl) {
+                    activeNode.classList.add('sh-editor-active-block');
+                    break;
+                }
+                activeNode = activeNode.parentElement;
+            }
+        }
+    }
+    // --- MODALS (LINK & IMAGE) ---
+    openLinkModal() {
+        // Back up current selection before focus shifts to modal
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            this.#savedRange = selection.getRangeAt(0).cloneRange();
+        }
+        this.showLinkModal.set(true);
+    }
+    applyLink(url) {
+        this.showLinkModal.set(false);
+        if (!url)
+            return;
+        const editor = this.editorRef()?.nativeElement;
+        if (!editor)
+            return;
+        // Restore selection range
+        const selection = window.getSelection();
+        if (selection && this.#savedRange) {
+            selection.removeAllRanges();
+            selection.addRange(this.#savedRange);
+        }
+        editor.focus();
+        this.toggleLink(url);
+    }
+    openImageModal() {
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            this.#savedRange = selection.getRangeAt(0).cloneRange();
+        }
+        this.showImageModal.set(true);
+    }
+    applyImage(url) {
+        this.showImageModal.set(false);
+        this.insertImage(url);
+    }
+    onComponentFocusIn(event) {
+        if (!this.#isBrowser)
+            return;
+        const target = event.target;
+        if (target && target.tagName === 'IMG') {
+            this.#selectedImage.set(target);
+            const className = target.className || '';
+            if (className.includes('sh-editor-img-theater')) {
+                this.imgMode.set('theater');
+            }
+            else if (className.includes('sh-editor-img-float')) {
+                this.imgMode.set('float');
+            }
+            else if (className.includes('sh-editor-img-custom') || className.includes('sh-editor-img-auto')) {
+                this.imgMode.set('custom');
+            }
+            else {
+                this.imgMode.set('content');
+            }
+            if (className.includes('sh-editor-img-size-small')) {
+                this.imgSize.set('small');
+            }
+            else if (className.includes('sh-editor-img-size-medium')) {
+                this.imgSize.set('medium');
+            }
+            else if (className.includes('sh-editor-img-size-large')) {
+                this.imgSize.set('large');
+            }
+            else {
+                this.imgSize.set('auto');
+            }
+            this.updateImgToolbarPosition();
+        }
+    }
+    onComponentClick(event) {
+        if (!this.#isBrowser)
+            return;
+        const target = event.target;
+        if (target && !target.closest('.sh-editor-dropdown')) {
+            this.showBlockMenu.set(false);
+        }
+        if (target && target.tagName === 'IMG') {
+            target.focus();
+            const selection = window.getSelection();
+            if (selection) {
+                const range = this.#document.createRange();
+                range.selectNode(target);
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+            this.#selectedImage.set(target);
+            const className = target.className || '';
+            if (className.includes('sh-editor-img-theater')) {
+                this.imgMode.set('theater');
+            }
+            else if (className.includes('sh-editor-img-float')) {
+                this.imgMode.set('float');
+            }
+            else if (className.includes('sh-editor-img-custom') || className.includes('sh-editor-img-auto')) {
+                this.imgMode.set('custom');
+            }
+            else {
+                this.imgMode.set('content');
+            }
+            if (className.includes('sh-editor-img-size-small')) {
+                this.imgSize.set('small');
+            }
+            else if (className.includes('sh-editor-img-size-medium')) {
+                this.imgSize.set('medium');
+            }
+            else if (className.includes('sh-editor-img-size-large')) {
+                this.imgSize.set('large');
+            }
+            else {
+                this.imgSize.set('auto');
+            }
+            this.updateImgToolbarPosition();
+        }
+        else {
+            // If clicking inside image toolbar itself, don't dismiss
+            if (target && target.closest('.sh-editor-img-toolbar')) {
+                return;
+            }
+            this.#selectedImage.set(null);
+        }
+    }
+    onKeyDown(event) {
+        if (!this.#isBrowser)
+            return;
+        if (this.readonly())
+            return;
+        if (this.viewMode() === 'design') {
+            const selection = window.getSelection();
+            if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                const anchorNode = selection.anchorNode;
+                if (anchorNode) {
+                    const editorEl = this.editorRef()?.nativeElement;
+                    if (editorEl) {
+                        let currentBlock = null;
+                        if (anchorNode.nodeType === Node.TEXT_NODE) {
+                            currentBlock = anchorNode.parentElement;
+                        }
+                        else {
+                            currentBlock = anchorNode;
+                        }
+                        // Traverse up to find blockquote, pre, or li
+                        let blockquoteEl = null;
+                        let preEl = null;
+                        let liEl = null;
+                        let node = currentBlock;
+                        while (node && node !== editorEl) {
+                            const tagName = node.tagName.toLowerCase();
+                            if (tagName === 'blockquote') {
+                                blockquoteEl = node;
+                            }
+                            else if (tagName === 'pre') {
+                                preEl = node;
+                            }
+                            else if (tagName === 'li') {
+                                liEl = node;
+                            }
+                            node = node.parentElement;
+                        }
+                        // 1. Exit block with Ctrl+Enter or Cmd+Enter
+                        if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+                            const targetBlock = preEl || blockquoteEl || liEl;
+                            if (targetBlock) {
+                                event.preventDefault();
+                                const p = this.#document.createElement('p');
+                                p.innerHTML = '<br>';
+                                // If we are in a list item, we should insert the paragraph after the parent list (ul/ol)
+                                let insertAfterNode = targetBlock;
+                                if (liEl) {
+                                    const listParent = liEl.closest('ul, ol');
+                                    if (listParent && editorEl.contains(listParent)) {
+                                        insertAfterNode = listParent;
+                                    }
+                                }
+                                insertAfterNode.parentNode?.insertBefore(p, insertAfterNode.nextSibling);
+                                // Focus the new paragraph
+                                const newRange = this.#document.createRange();
+                                newRange.setStart(p, 0);
+                                newRange.collapse(true);
+                                selection.removeAllRanges();
+                                selection.addRange(newRange);
+                                p.focus();
+                                this.#updateValueFromDOM();
+                                return;
+                            }
+                        }
+                        // 2. Double enter on empty blockquote or list item
+                        if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
+                            const targetBlock = blockquoteEl || liEl;
+                            if (targetBlock) {
+                                const text = targetBlock.textContent?.trim() || '';
+                                if (text === '') {
+                                    event.preventDefault();
+                                    const p = this.#document.createElement('p');
+                                    p.innerHTML = '<br>';
+                                    if (liEl) {
+                                        const listParent = liEl.closest('ul, ol');
+                                        if (listParent) {
+                                            if (listParent.children.length <= 1) {
+                                                listParent.parentNode?.replaceChild(p, listParent);
+                                            }
+                                            else {
+                                                listParent.parentNode?.insertBefore(p, listParent.nextSibling);
+                                                liEl.remove();
+                                            }
+                                        }
+                                    }
+                                    else {
+                                        targetBlock.parentNode?.replaceChild(p, targetBlock);
+                                    }
+                                    // Focus new paragraph
+                                    const newRange = this.#document.createRange();
+                                    newRange.setStart(p, 0);
+                                    newRange.collapse(true);
+                                    selection.removeAllRanges();
+                                    selection.addRange(newRange);
+                                    p.focus();
+                                    this.#updateValueFromDOM();
+                                    return;
+                                }
+                            }
+                        }
+                        // 3. Enter inside pre (code block) to insert newline instead of splitting tag
+                        if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+                            if (preEl) {
+                                event.preventDefault();
+                                // Insert a newline character at current caret position
+                                const selection = window.getSelection();
+                                if (selection && selection.rangeCount > 0) {
+                                    const range = selection.getRangeAt(0);
+                                    const textNode = this.#document.createTextNode('\n');
+                                    range.insertNode(textNode);
+                                    // Move caret after the new line character
+                                    range.setStartAfter(textNode);
+                                    range.setEndAfter(textNode);
+                                    selection.removeAllRanges();
+                                    selection.addRange(range);
+                                    this.#updateValueFromDOM();
+                                }
+                                return;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        const img = this.#selectedImage();
+        if (img && (event.key === 'Backspace' || event.key === 'Delete')) {
+            const activeEl = this.#document.activeElement;
+            if (activeEl === img ||
+                window.getSelection()?.anchorNode === img ||
+                window.getSelection()?.focusNode === img ||
+                window.getSelection()?.anchorNode?.contains(img)) {
+                event.preventDefault();
+                this.deleteImage();
+            }
+        }
+    }
+    onKeyUp(event) {
+        if (!this.#isBrowser)
+            return;
+        if (this.readonly() || this.viewMode() === 'code')
+            return;
+        const sc = this.slashCommands();
+        if (sc === false || (Array.isArray(sc) && sc.length === 0)) {
+            this.showSlashMenu.set(false);
+            return;
+        }
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            this.showSlashMenu.set(false);
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        const textNode = range.startContainer;
+        const editorEl = this.editorRef()?.nativeElement;
+        if (!editorEl || !editorEl.contains(textNode)) {
+            this.showSlashMenu.set(false);
+            return;
+        }
+        if (textNode.nodeType === Node.TEXT_NODE) {
+            const text = textNode.textContent || '';
+            const offset = range.startOffset;
+            const textBeforeCaret = text.substring(0, offset);
+            const match = textBeforeCaret.match(/(?:^|\s)\/([a-zA-Z0-9_-]*)$/);
+            if (match) {
+                this.showSlashMenu.set(true);
+                this.slashSearchQuery.set(match[1]);
+                this.#updateSlashMenuPosition(range);
+                return;
+            }
+        }
+        this.showSlashMenu.set(false);
+    }
+    executeCommand(cmd) {
+        this.#restoreSelection();
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            const textNode = range.startContainer;
+            if (textNode.nodeType === Node.TEXT_NODE) {
+                const text = textNode.textContent || '';
+                const offset = range.startOffset;
+                const textBeforeCaret = text.substring(0, offset);
+                const match = textBeforeCaret.match(/(?:^|\s)\/([a-zA-Z0-9_-]*)$/);
+                if (match) {
+                    const slashIndex = textBeforeCaret.lastIndexOf('/');
+                    if (slashIndex !== -1) {
+                        range.setStart(textNode, slashIndex);
+                        range.setEnd(textNode, offset);
+                        selection.removeAllRanges();
+                        selection.addRange(range);
+                        range.deleteContents();
+                    }
+                }
+            }
+        }
+        this.showSlashMenu.set(false);
+        cmd.action(this);
+    }
+    #updateSlashMenuPosition(range) {
+        const editorEl = this.editorRef()?.nativeElement;
+        if (!editorEl)
+            return;
+        const editorRect = editorEl.getBoundingClientRect();
+        const rect = range.getBoundingClientRect();
+        let top = 0;
+        let left = 0;
+        if (rect.top === 0 && rect.left === 0) {
+            let parentNode = range.startContainer;
+            if (parentNode.nodeType === Node.TEXT_NODE) {
+                parentNode = parentNode.parentElement;
+            }
+            const parentRect = parentNode.getBoundingClientRect();
+            top = parentRect.bottom - editorRect.top + editorEl.scrollTop + 4;
+            left = parentRect.left - editorRect.left;
+        }
+        else {
+            top = rect.bottom - editorRect.top + editorEl.scrollTop + 4;
+            left = rect.left - editorRect.left;
+        }
+        this.slashMenuTop.set(top);
+        this.slashMenuLeft.set(left);
+    }
+    getBlockLabel() {
+        const block = this.activeBlock();
+        if (block === 'h1')
+            return 'Heading 1';
+        if (block === 'h2')
+            return 'Heading 2';
+        if (block === 'h3')
+            return 'Heading 3';
+        if (block === 'blockquote')
+            return 'Quote';
+        if (block === 'pre')
+            return 'Code Block';
+        return 'Normal text';
+    }
+    toggleBlockMenu() {
+        if (this.readonly())
+            return;
+        this.showBlockMenu.update((v) => !v);
+    }
+    selectBlockType(tag) {
+        this.setBlockType(tag);
+        this.showBlockMenu.set(false);
+    }
+    onToolbarKeyDown(event) {
+        if (!this.#isBrowser)
+            return;
+        const target = event.target;
+        const toolbarEl = target.closest('.sh-editor-toolbar');
+        if (!toolbarEl)
+            return;
+        const items = Array.from(toolbarEl.querySelectorAll('.sh-editor-btn, .sh-editor-dropdown-trigger')).filter((el) => {
+            const btn = el;
+            return !btn.disabled && el.getAttribute('disabled') === null;
+        });
+        if (items.length === 0)
+            return;
+        const currentIndex = items.indexOf(target);
+        if (currentIndex === -1)
+            return;
+        const isGroupJump = event.ctrlKey || event.altKey || event.metaKey;
+        if (this.#keybindings.matches(event, 'editor-toolbar.next')) {
+            event.preventDefault();
+            if (isGroupJump) {
+                const currentGroup = target.closest('.sh-editor-toolbar-group');
+                if (currentGroup) {
+                    const groups = Array.from(toolbarEl.querySelectorAll('.sh-editor-toolbar-group'));
+                    const groupIndex = groups.indexOf(currentGroup);
+                    if (groupIndex !== -1) {
+                        for (let i = 1; i <= groups.length; i++) {
+                            const nextGroupIndex = (groupIndex + i) % groups.length;
+                            const groupItems = Array.from(groups[nextGroupIndex].querySelectorAll('.sh-editor-btn, .sh-editor-dropdown-trigger')).filter((el) => {
+                                const btn = el;
+                                return !btn.disabled && el.getAttribute('disabled') === null && el.offsetWidth > 0;
+                            });
+                            if (groupItems.length > 0) {
+                                groupItems[0].focus();
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                const nextIndex = (currentIndex + 1) % items.length;
+                items[nextIndex].focus();
+            }
+        }
+        else if (this.#keybindings.matches(event, 'editor-toolbar.prev')) {
+            event.preventDefault();
+            if (isGroupJump) {
+                const currentGroup = target.closest('.sh-editor-toolbar-group');
+                if (currentGroup) {
+                    const groups = Array.from(toolbarEl.querySelectorAll('.sh-editor-toolbar-group'));
+                    const groupIndex = groups.indexOf(currentGroup);
+                    if (groupIndex !== -1) {
+                        for (let i = 1; i <= groups.length; i++) {
+                            const prevGroupIndex = (groupIndex - i + groups.length) % groups.length;
+                            const groupItems = Array.from(groups[prevGroupIndex].querySelectorAll('.sh-editor-btn, .sh-editor-dropdown-trigger')).filter((el) => {
+                                const btn = el;
+                                return !btn.disabled && el.getAttribute('disabled') === null && el.offsetWidth > 0;
+                            });
+                            if (groupItems.length > 0) {
+                                groupItems[0].focus();
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                const nextIndex = (currentIndex - 1 + items.length) % items.length;
+                items[nextIndex].focus();
+            }
+        }
+        else if (this.#keybindings.matches(event, 'editor-toolbar.home')) {
+            event.preventDefault();
+            items[0].focus();
+        }
+        else if (this.#keybindings.matches(event, 'editor-toolbar.end')) {
+            event.preventDefault();
+            items[items.length - 1].focus();
+        }
+    }
+    onToolbarFocusIn(event) {
+        if (!this.#isBrowser)
+            return;
+        const target = event.target;
+        const toolbarEl = target.closest('.sh-editor-toolbar');
+        if (!toolbarEl)
+            return;
+        const items = Array.from(toolbarEl.querySelectorAll('.sh-editor-btn, .sh-editor-dropdown-trigger')).filter((el) => {
+            const btn = el;
+            return !btn.disabled && el.getAttribute('disabled') === null;
+        });
+        items.forEach((item) => {
+            if (item === target) {
+                item.setAttribute('tabindex', '0');
+            }
+            else {
+                item.setAttribute('tabindex', '-1');
+            }
+        });
+    }
+    #initializeToolbarTabindexes() {
+        if (!this.#isBrowser)
+            return;
+        setTimeout(() => {
+            const toolbarEl = this.editorRef()?.nativeElement?.parentElement?.querySelector('.sh-editor-toolbar');
+            if (!toolbarEl)
+                return;
+            const items = Array.from(toolbarEl.querySelectorAll('.sh-editor-btn, .sh-editor-dropdown-trigger')).filter((el) => {
+                const btn = el;
+                return !btn.disabled && el.getAttribute('disabled') === null;
+            });
+            items.forEach((item, idx) => {
+                item.setAttribute('tabindex', idx === 0 ? '0' : '-1');
+            });
+        });
+    }
+    #ensureImagesFocusable() {
+        const editor = this.editorRef()?.nativeElement;
+        if (!editor)
+            return;
+        const imgs = editor.querySelectorAll('img');
+        Array.from(imgs).forEach((img) => {
+            if (!img.hasAttribute('tabindex')) {
+                img.setAttribute('tabindex', '0');
+            }
+        });
+    }
+    onComponentScroll(event) {
+        if (this.#selectedImage()) {
+            this.updateImgToolbarPosition();
+        }
+    }
+    onWindowResize() {
+        if (this.#selectedImage()) {
+            this.updateImgToolbarPosition();
+        }
+    }
+    updateImgToolbarPosition() {
+        const img = this.#selectedImage();
+        const editorEl = this.editorRef()?.nativeElement;
+        if (!img || !editorEl)
+            return;
+        const imgRect = img.getBoundingClientRect();
+        const editorRect = editorEl.getBoundingClientRect();
+        // Position toolbar just above the top-left edge of the image
+        const top = imgRect.top - editorRect.top - 55 + editorEl.scrollTop;
+        const left = imgRect.left - editorRect.left;
+        this.imgToolbarTop.set(top);
+        this.imgToolbarLeft.set(left);
+    }
+    setImageMode(mode) {
+        const img = this.#selectedImage();
+        if (!img)
+            return;
+        img.classList.remove('sh-editor-img-content', 'sh-editor-img-theater', 'sh-editor-img-float', 'sh-editor-img-custom', 'sh-editor-img-auto');
+        img.classList.add(`sh-editor-img-${mode}`);
+        this.imgMode.set(mode);
+        // If switching to content or theater (which do not support sizes), strip size classes
+        if (mode === 'content' || mode === 'theater') {
+            img.classList.remove('sh-editor-img-size-auto', 'sh-editor-img-size-small', 'sh-editor-img-size-medium', 'sh-editor-img-size-large');
+            this.imgSize.set('auto');
+        }
+        // Reposition overlay after CSS layout transition
+        setTimeout(() => this.updateImgToolbarPosition(), 50);
+        this.#updateValueFromDOM();
+    }
+    setImageSize(size) {
+        const img = this.#selectedImage();
+        if (!img)
+            return;
+        img.classList.remove('sh-editor-img-size-auto', 'sh-editor-img-size-small', 'sh-editor-img-size-medium', 'sh-editor-img-size-large');
+        img.classList.add(`sh-editor-img-size-${size}`);
+        this.imgSize.set(size);
+        // Reposition overlay after CSS layout transition
+        setTimeout(() => this.updateImgToolbarPosition(), 50);
+        this.#updateValueFromDOM();
+    }
+    deleteImage() {
+        const img = this.#selectedImage();
+        if (img) {
+            img.remove();
+            this.#selectedImage.set(null);
+            this.#updateValueFromDOM();
+        }
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            this.#handleImageUpload(input.files[0]);
+            this.showImageModal.set(false);
+        }
+    }
+    onDrop(event) {
+        if (!this.#isBrowser)
+            return;
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            const file = files[0];
+            if (file.type.startsWith('image/')) {
+                event.preventDefault();
+                this.#handleImageUpload(file);
+            }
+        }
+    }
+    onPaste(event) {
+        if (!this.#isBrowser)
+            return;
+        const items = event.clipboardData?.items;
+        if (items) {
+            for (let i = 0; i < items.length; i++) {
+                if (items[i].type.indexOf('image') !== -1) {
+                    const file = items[i].getAsFile();
+                    if (file) {
+                        event.preventDefault();
+                        this.#handleImageUpload(file);
+                    }
+                }
+            }
+        }
+    }
+    #handleImageUpload(file) {
+        if (this.customUpload()) {
+            this.imageUpload.emit(file);
+        }
+        else {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const base64Url = e.target?.result;
+                this.insertImage(base64Url);
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    insertImage(url) {
+        if (!url)
+            return;
+        const editor = this.editorRef()?.nativeElement;
+        if (!editor)
+            return;
+        // Restore selection range
+        const selection = window.getSelection();
+        if (selection && this.#savedRange) {
+            selection.removeAllRanges();
+            selection.addRange(this.#savedRange);
+        }
+        editor.focus();
+        // Insert image markup with default content layout class
+        const imgHtml = `<img src="${url}" class="sh-editor-img-content" alt="Image">`;
+        const range = selection?.getRangeAt(0);
+        if (range) {
+            this.#saveHistory();
+            this.#isInternalDOMUpdate = true;
+            range.deleteContents();
+            const el = this.#document.createElement('div');
+            el.innerHTML = imgHtml;
+            const child = el.firstChild;
+            if (child) {
+                range.insertNode(child);
+                const newRange = this.#document.createRange();
+                newRange.setStartAfter(child);
+                newRange.collapse(true);
+                selection?.removeAllRanges();
+                selection?.addRange(newRange);
+            }
+            this.#updateValueFromDOM();
+            this.#saveHistory();
+            this.#isInternalDOMUpdate = false;
+            this.onSelectionChange();
+        }
+    }
+    // --- PUBLIC API METHODS ---
+    getHTML() {
+        const editor = this.editorRef()?.nativeElement;
+        if (editor) {
+            return editor.innerHTML;
+        }
+        // Fallback if not rendered
+        const val = this.value();
+        if (typeof val === 'string') {
+            return this.format() === 'markdown' ? this.#markdownToHTML(val) : val;
+        }
+        if (Array.isArray(val)) {
+            return this.#jsonToHTML(val);
+        }
+        return '';
+    }
+    getMarkdown() {
+        const html = this.getHTML();
+        return this.#htmlToMarkdown(html);
+    }
+    getJSON() {
+        const html = this.getHTML();
+        return this.#htmlToJSON(html);
+    }
+    setHTML(html) {
+        this.#isWriting = true;
+        const currentFormat = this.format();
+        if (currentFormat === 'html') {
+            this.value.set(html);
+            this.onChange(html);
+        }
+        else if (currentFormat === 'markdown') {
+            const md = this.#htmlToMarkdown(html);
+            this.value.set(md);
+            this.onChange(md);
+        }
+        else if (currentFormat === 'json') {
+            const json = this.#htmlToJSON(html);
+            this.value.set(json);
+            this.onChange(json);
+        }
+        this.#syncModelToDOM(this.value());
+        this.#isWriting = false;
+    }
+    setMarkdown(md) {
+        this.#isWriting = true;
+        const currentFormat = this.format();
+        if (currentFormat === 'markdown') {
+            this.value.set(md);
+            this.onChange(md);
+        }
+        else if (currentFormat === 'html') {
+            const html = this.#markdownToHTML(md);
+            this.value.set(html);
+            this.onChange(html);
+        }
+        else if (currentFormat === 'json') {
+            const html = this.#markdownToHTML(md);
+            const json = this.#htmlToJSON(html);
+            this.value.set(json);
+            this.onChange(json);
+        }
+        this.#syncModelToDOM(this.value());
+        this.#isWriting = false;
+    }
+    setJSON(json) {
+        this.#isWriting = true;
+        const currentFormat = this.format();
+        if (currentFormat === 'json') {
+            this.value.set(json);
+            this.onChange(json);
+        }
+        else if (currentFormat === 'html') {
+            const html = this.#jsonToHTML(json);
+            this.value.set(html);
+            this.onChange(html);
+        }
+        else if (currentFormat === 'markdown') {
+            const html = this.#jsonToHTML(json);
+            const md = this.#htmlToMarkdown(html);
+            this.value.set(md);
+            this.onChange(md);
+        }
+        this.#syncModelToDOM(this.value());
+        this.#isWriting = false;
+    }
+    clear() {
+        this.value.set('');
+        this.#lastValueWrittenFromDOM = '';
+        this.rawCodeValue.set('');
+        this.onChange('');
+        const editor = this.editorRef()?.nativeElement;
+        if (editor) {
+            editor.innerHTML = '<p><br></p>';
+        }
+    }
+    // --- PARSERS & SERIALIZERS ---
+    #escapeHTML(str) {
+        return str
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
+    }
+    // JSON => HTML Converter
+    #jsonToHTML(doc) {
+        if (!doc || !Array.isArray(doc))
+            return '';
+        return doc
+            .map((block) => {
+            const alignStyle = block.attrs?.align ? ` style="text-align: ${block.attrs.align};"` : '';
+            switch (block.type) {
+                case 'paragraph': {
+                    const contentHtml = this.#inlineToHTML(block.content || []);
+                    return `<p${alignStyle}>${contentHtml || '<br>'}</p>`;
+                }
+                case 'heading': {
+                    const level = block.attrs?.level || 1;
+                    const contentHtml = this.#inlineToHTML(block.content || []);
+                    return `<h${level}${alignStyle}>${contentHtml || '<br>'}</h${level}>`;
+                }
+                case 'quote': {
+                    const contentHtml = this.#inlineToHTML(block.content || []);
+                    return `<blockquote>${contentHtml || '<br>'}</blockquote>`;
+                }
+                case 'code-block': {
+                    const codeText = (block.content || []).map((node) => node.text || '').join('');
+                    const langClass = block.attrs?.language ? ` class="language-${block.attrs.language}"` : '';
+                    return `<pre><code${langClass}>${this.#escapeHTML(codeText)}</code></pre>`;
+                }
+                case 'bullet-list': {
+                    const itemsHtml = (block.content || [])
+                        .map((item) => `<li>${this.#inlineToHTML(item.content || [])}</li>`)
+                        .join('');
+                    return `<ul>${itemsHtml}</ul>`;
+                }
+                case 'ordered-list': {
+                    const itemsHtml = (block.content || [])
+                        .map((item) => `<li>${this.#inlineToHTML(item.content || [])}</li>`)
+                        .join('');
+                    return `<ol>${itemsHtml}</ol>`;
+                }
+                case 'hr':
+                    return '<hr>';
+                case 'image': {
+                    const src = block.attrs?.src || '';
+                    const alt = block.attrs?.alt || '';
+                    const mode = block.attrs?.mode || 'content';
+                    const size = block.attrs?.size || 'auto';
+                    if (mode === 'content' || mode === 'theater') {
+                        return `<img src="${src}" alt="${alt}" class="sh-editor-img-${mode}">`;
+                    }
+                    return `<img src="${src}" alt="${alt}" class="sh-editor-img-${mode} sh-editor-img-size-${size}">`;
+                }
+                default:
+                    return '';
+            }
+        })
+            .join('');
+    }
+    #inlineToHTML(nodes) {
+        if (!nodes || !Array.isArray(nodes))
+            return '';
+        return nodes
+            .map((node) => {
+            let text = this.#escapeHTML(node.text || '');
+            if (!node.marks)
+                return text;
+            node.marks.forEach((mark) => {
+                if (mark.type === 'bold') {
+                    text = `<strong>${text}</strong>`;
+                }
+                else if (mark.type === 'italic') {
+                    text = `<em>${text}</em>`;
+                }
+                else if (mark.type === 'underline') {
+                    text = `<u>${text}</u>`;
+                }
+                else if (mark.type === 'strike') {
+                    text = `<s>${text}</s>`;
+                }
+                else if (mark.type === 'code') {
+                    text = `<code>${text}</code>`;
+                }
+                else if (mark.type === 'link') {
+                    const href = mark.attrs?.href || '';
+                    const target = mark.attrs?.target ? ` target="${mark.attrs.target}"` : '';
+                    text = `<a href="${href}"${target}>${text}</a>`;
+                }
+            });
+            return text;
+        })
+            .join('');
+    }
+    // HTML => JSON Converter
+    #htmlToJSON(html) {
+        const doc = [];
+        const temp = this.#document.createElement('div');
+        temp.innerHTML = html;
+        const children = Array.from(temp.childNodes);
+        for (const node of children) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                const tagName = el.tagName.toLowerCase();
+                if (['p', 'div'].includes(tagName)) {
+                    doc.push({
+                        type: 'paragraph',
+                        attrs: { align: this.#getAlign(el) },
+                        content: this.#parseInlineNodes(el),
+                    });
+                }
+                else if (/^h[1-6]$/.test(tagName)) {
+                    const level = parseInt(tagName.charAt(1), 10);
+                    doc.push({
+                        type: 'heading',
+                        attrs: { level, align: this.#getAlign(el) },
+                        content: this.#parseInlineNodes(el),
+                    });
+                }
+                else if (tagName === 'blockquote') {
+                    doc.push({
+                        type: 'quote',
+                        content: this.#parseInlineNodes(el),
+                    });
+                }
+                else if (tagName === 'pre') {
+                    const codeEl = el.querySelector('code');
+                    const lang = codeEl?.getAttribute('class')?.replace('language-', '') || '';
+                    doc.push({
+                        type: 'code-block',
+                        attrs: { language: lang },
+                        content: [{ type: 'text', text: codeEl ? codeEl.textContent || '' : el.textContent || '' }],
+                    });
+                }
+                else if (tagName === 'ul') {
+                    doc.push({
+                        type: 'bullet-list',
+                        content: this.#parseListItems(el),
+                    });
+                }
+                else if (tagName === 'ol') {
+                    doc.push({
+                        type: 'ordered-list',
+                        content: this.#parseListItems(el),
+                    });
+                }
+                else if (tagName === 'hr') {
+                    doc.push({ type: 'hr' });
+                }
+                else if (tagName === 'img') {
+                    const className = el.getAttribute('class') || '';
+                    let mode = 'content';
+                    if (className.includes('sh-editor-img-theater'))
+                        mode = 'theater';
+                    else if (className.includes('sh-editor-img-float'))
+                        mode = 'float';
+                    else if (className.includes('sh-editor-img-custom') || className.includes('sh-editor-img-auto'))
+                        mode = 'custom';
+                    let size = 'auto';
+                    if (className.includes('sh-editor-img-size-small'))
+                        size = 'small';
+                    else if (className.includes('sh-editor-img-size-medium'))
+                        size = 'medium';
+                    else if (className.includes('sh-editor-img-size-large'))
+                        size = 'large';
+                    doc.push({
+                        type: 'image',
+                        attrs: {
+                            src: el.getAttribute('src') || '',
+                            alt: el.getAttribute('alt') || '',
+                            mode,
+                            size,
+                        },
+                    });
+                }
+                else {
+                    doc.push({
+                        type: 'paragraph',
+                        content: this.#parseInlineNodes(el),
+                    });
+                }
+            }
+            else if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent?.trim();
+                if (text) {
+                    doc.push({
+                        type: 'paragraph',
+                        content: [{ type: 'text', text }],
+                    });
+                }
+            }
+        }
+        return doc;
+    }
+    #getAlign(el) {
+        const align = el.style.textAlign || el.getAttribute('align');
+        if (align === 'center' || align === 'right' || align === 'left') {
+            return align;
+        }
+        return undefined;
+    }
+    #parseListItems(listEl) {
+        const items = [];
+        for (const child of Array.from(listEl.childNodes)) {
+            if (child.nodeType === Node.ELEMENT_NODE && child.tagName.toLowerCase() === 'li') {
+                items.push({
+                    type: 'list-item',
+                    content: this.#parseInlineNodes(child),
+                });
+            }
+        }
+        return items;
+    }
+    #parseInlineNodes(parentEl) {
+        const inlineNodes = [];
+        const traverse = (node, marks) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent || '';
+                if (text) {
+                    inlineNodes.push({
+                        type: 'text',
+                        text,
+                        marks: marks.length > 0 ? [...marks] : undefined,
+                    });
+                }
+            }
+            else if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                const tagName = el.tagName.toLowerCase();
+                const currentMarks = [...marks];
+                if (['strong', 'b'].includes(tagName)) {
+                    currentMarks.push({ type: 'bold' });
+                }
+                else if (['em', 'i'].includes(tagName)) {
+                    currentMarks.push({ type: 'italic' });
+                }
+                else if (tagName === 'u') {
+                    currentMarks.push({ type: 'underline' });
+                }
+                else if (['strike', 's', 'del'].includes(tagName)) {
+                    currentMarks.push({ type: 'strike' });
+                }
+                else if (tagName === 'code') {
+                    currentMarks.push({ type: 'code' });
+                }
+                else if (tagName === 'a') {
+                    currentMarks.push({
+                        type: 'link',
+                        attrs: {
+                            href: el.getAttribute('href') || '',
+                            target: el.getAttribute('target') || undefined,
+                        },
+                    });
+                }
+                for (const child of Array.from(el.childNodes)) {
+                    traverse(child, currentMarks);
+                }
+            }
+        };
+        for (const child of Array.from(parentEl.childNodes)) {
+            traverse(child, []);
+        }
+        return inlineNodes;
+    }
+    // HTML => Markdown Converter
+    #htmlToMarkdown(html) {
+        const temp = this.#document.createElement('div');
+        temp.innerHTML = html;
+        let markdown = '';
+        const children = Array.from(temp.childNodes);
+        for (const node of children) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                const tagName = el.tagName.toLowerCase();
+                if (['p', 'div'].includes(tagName)) {
+                    const inlineMd = this.#elementToMarkdownInline(el);
+                    if (inlineMd.trim()) {
+                        markdown += inlineMd + '\n\n';
+                    }
+                }
+                else if (/^h[1-6]$/.test(tagName)) {
+                    const level = parseInt(tagName.charAt(1), 10);
+                    const prefix = '#'.repeat(level) + ' ';
+                    markdown += prefix + this.#elementToMarkdownInline(el) + '\n\n';
+                }
+                else if (tagName === 'blockquote') {
+                    const text = this.#elementToMarkdownInline(el);
+                    markdown += '> ' + text.replace(/\n/g, '\n> ') + '\n\n';
+                }
+                else if (tagName === 'pre') {
+                    const codeEl = el.querySelector('code');
+                    const lang = codeEl?.getAttribute('class')?.replace('language-', '') || '';
+                    const codeText = codeEl ? codeEl.textContent || '' : el.textContent || '';
+                    markdown += '```' + lang + '\n' + codeText.trim() + '\n```\n\n';
+                }
+                else if (tagName === 'ul') {
+                    const items = Array.from(el.querySelectorAll(':scope > li'));
+                    items.forEach((li) => {
+                        markdown += '* ' + this.#elementToMarkdownInline(li) + '\n';
+                    });
+                    markdown += '\n';
+                }
+                else if (tagName === 'ol') {
+                    const items = Array.from(el.querySelectorAll(':scope > li'));
+                    items.forEach((li, idx) => {
+                        markdown += `${idx + 1}. ` + this.#elementToMarkdownInline(li) + '\n';
+                    });
+                    markdown += '\n';
+                }
+                else if (tagName === 'hr') {
+                    markdown += '---\n\n';
+                }
+                else if (tagName === 'img') {
+                    const src = el.getAttribute('src') || '';
+                    const alt = el.getAttribute('alt') || '';
+                    markdown += `![${alt}](${src})\n\n`;
+                }
+                else {
+                    const inlineMd = this.#elementToMarkdownInline(el);
+                    if (inlineMd.trim()) {
+                        markdown += inlineMd + '\n\n';
+                    }
+                }
+            }
+            else if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.textContent?.trim();
+                if (text) {
+                    markdown += text + '\n\n';
+                }
+            }
+        }
+        return markdown.trim();
+    }
+    #elementToMarkdownInline(parentEl) {
+        let md = '';
+        const traverse = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                md += node.textContent || '';
+            }
+            else if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                const tagName = el.tagName.toLowerCase();
+                let prefix = '';
+                let suffix = '';
+                if (['strong', 'b'].includes(tagName)) {
+                    prefix = '**';
+                    suffix = '**';
+                }
+                else if (['em', 'i'].includes(tagName)) {
+                    prefix = '*';
+                    suffix = '*';
+                }
+                else if (tagName === 'u') {
+                    prefix = '<u>';
+                    suffix = '</u>';
+                }
+                else if (['strike', 's', 'del'].includes(tagName)) {
+                    prefix = '~~';
+                    suffix = '~~';
+                }
+                else if (tagName === 'code') {
+                    prefix = '`';
+                    suffix = '`';
+                }
+                else if (tagName === 'a') {
+                    prefix = '[';
+                    suffix = `](${el.getAttribute('href') || ''})`;
+                }
+                else if (tagName === 'br') {
+                    md += '\n';
+                    return;
+                }
+                md += prefix;
+                for (const child of Array.from(el.childNodes)) {
+                    traverse(child);
+                }
+                md += suffix;
+            }
+        };
+        for (const child of Array.from(parentEl.childNodes)) {
+            traverse(child);
+        }
+        return md;
+    }
+    // Markdown => HTML Converter
+    #markdownToHTML(markdown) {
+        if (!markdown)
+            return '';
+        const blocks = markdown.split(/\n\s*\n/);
+        let html = '';
+        let inList = false;
+        let listType = null;
+        for (let block of blocks) {
+            block = block.trim();
+            if (!block)
+                continue;
+            const isBullet = /^[*-]\s+/.test(block);
+            const isOrdered = /^\d+\.\s+/.test(block);
+            if (inList && !isBullet && !isOrdered) {
+                html += listType === 'ul' ? '</ul>' : '</ol>';
+                inList = false;
+                listType = null;
+            }
+            if (block.startsWith('```')) {
+                const lines = block.split('\n');
+                const firstLine = lines[0];
+                const lang = firstLine.replace('```', '').trim();
+                const codeLines = lines.slice(1, lines.length - (lines[lines.length - 1] === '```' ? 1 : 0));
+                const codeText = codeLines.join('\n');
+                const langClass = lang ? ` class="language-${lang}"` : '';
+                html += `<pre><code${langClass}>${this.#escapeHTML(codeText)}</code></pre>`;
+            }
+            else if (block.startsWith('#')) {
+                const match = block.match(/^(#{1,6})\s+(.*)$/);
+                if (match) {
+                    const level = match[1].length;
+                    const content = this.#parseInlineMarkdown(match[2]);
+                    html += `<h${level}>${content}</h${level}>`;
+                }
+                else {
+                    html += `<p>${this.#parseInlineMarkdown(block)}</p>`;
+                }
+            }
+            else if (block.startsWith('>')) {
+                const lines = block.split('\n').map((line) => line.replace(/^>\s?/, ''));
+                const content = this.#parseInlineMarkdown(lines.join('<br>'));
+                html += `<blockquote>${content}</blockquote>`;
+            }
+            else if (block === '---') {
+                html += '<hr>';
+            }
+            else if (isBullet) {
+                if (!inList || listType !== 'ul') {
+                    if (inList) {
+                        html += listType === 'ul' ? '</ul>' : '</ol>';
+                    }
+                    html += '<ul>';
+                    inList = true;
+                    listType = 'ul';
+                }
+                const lines = block.split('\n');
+                lines.forEach((line) => {
+                    const itemText = line.replace(/^[*-]\s+/, '');
+                    html += `<li>${this.#parseInlineMarkdown(itemText)}</li>`;
+                });
+            }
+            else if (isOrdered) {
+                if (!inList || listType !== 'ol') {
+                    if (inList) {
+                        html += listType === 'ul' ? '</ul>' : '</ol>';
+                    }
+                    html += '<ol>';
+                    inList = true;
+                    listType = 'ol';
+                }
+                const lines = block.split('\n');
+                lines.forEach((line) => {
+                    const itemText = line.replace(/^\d+\.\s+/, '');
+                    html += `<li>${this.#parseInlineMarkdown(itemText)}</li>`;
+                });
+            }
+            else if (block.startsWith('![') && block.includes('](')) {
+                const match = block.match(/^!\[(.*?)\]\((.*?)\)$/);
+                if (match) {
+                    html += `<img src="${match[2]}" alt="${match[1]}">`;
+                }
+                else {
+                    html += `<p>${this.#parseInlineMarkdown(block)}</p>`;
+                }
+            }
+            else {
+                html += `<p>${this.#parseInlineMarkdown(block)}</p>`;
+            }
+        }
+        if (inList) {
+            html += listType === 'ul' ? '</ul>' : '</ol>';
+        }
+        return html;
+    }
+    #parseInlineMarkdown(text) {
+        let html = this.#escapeHTML(text);
+        // Bold
+        html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+        html = html.replace(/__(.*?)__/g, '<strong>$1</strong>');
+        // Italic
+        html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
+        html = html.replace(/_(.*?)_/g, '<em>$1</em>');
+        // Underline (un-escape decoded <u> tags)
+        html = html.replace(/&lt;u&gt;(.*?)&lt;\/u&gt;/g, '<u>$1</u>');
+        // Strike
+        html = html.replace(/~~(.*?)~~/g, '<s>$1</s>');
+        // Code
+        html = html.replace(/`(.*?)`/g, '<code>$1</code>');
+        // Images
+        html = html.replace(/!\[(.*?)\]\((.*?)\)/g, '<img src="$2" alt="$1">');
+        // Links
+        html = html.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>');
+        return html;
+    }
+    // Helper to extract plain text from JSON doc for metrics
+    #getJSONText(doc) {
+        return doc
+            .map((block) => {
+            if (['paragraph', 'heading', 'quote', 'list-item'].includes(block.type)) {
+                const content = block.content;
+                return content ? content.map((node) => node.text || '').join('') : '';
+            }
+            if (['bullet-list', 'ordered-list'].includes(block.type)) {
+                const content = block.content;
+                return content ? this.#getJSONText(content) : '';
+            }
+            if (block.type === 'code-block') {
+                const content = block.content;
+                return content ? content.map((node) => node.text || '').join('') : '';
+            }
+            return '';
+        })
+            .join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ShipEditor, isStandalone: true, selector: "sh-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, customCommands: { classPropertyName: "customCommands", publicName: "customCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommands: { classPropertyName: "slashCommands", publicName: "slashCommands", isSignal: true, isRequired: false, transformFunction: null }, showFormats: { classPropertyName: "showFormats", publicName: "showFormats", isSignal: true, isRequired: false, transformFunction: null }, showBlocks: { classPropertyName: "showBlocks", publicName: "showBlocks", isSignal: true, isRequired: false, transformFunction: null }, showLists: { classPropertyName: "showLists", publicName: "showLists", isSignal: true, isRequired: false, transformFunction: null }, showAlignments: { classPropertyName: "showAlignments", publicName: "showAlignments", isSignal: true, isRequired: false, transformFunction: null }, showInsertions: { classPropertyName: "showInsertions", publicName: "showInsertions", isSignal: true, isRequired: false, transformFunction: null }, showHistory: { classPropertyName: "showHistory", publicName: "showHistory", isSignal: true, isRequired: false, transformFunction: null }, customUpload: { classPropertyName: "customUpload", publicName: "customUpload", isSignal: true, isRequired: false, transformFunction: null }, imageUploadEnabled: { classPropertyName: "imageUploadEnabled", publicName: "imageUploadEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", imageUpload: "imageUpload" }, host: { listeners: { "document:selectionchange": "onSelectionChange()", "focusin": "onComponentFocusIn($event)", "click": "onComponentClick($event)", "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)", "scroll": "onComponentScroll($event)", "window:resize": "onWindowResize()", "drop": "onDrop($event)", "paste": "onPaste($event)" }, properties: { "class": "hostClasses()", "class.sh-editor-readonly": "readonly()", "class.sh-editor-focused": "isFocused()" } }, providers: [SHIP_EDITOR_VALUE_ACCESSOR], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editorRef"], descendants: true, isSignal: true }, { propertyName: "codeEditorRef", first: true, predicate: ["codeEditorRef"], descendants: true, isSignal: true }, { propertyName: "uploadBtn", first: true, predicate: ["uploadBtn"], descendants: true, isSignal: true }, { propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true, isSignal: true }, { propertyName: "linkInput", first: true, predicate: ["linkInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sh-editor-container\">\n  <!-- Editor Toolbar -->\n  @if (toolbar() && !readonly()) {\n    <div\n      class=\"sh-editor-toolbar\"\n      role=\"toolbar\"\n      aria-label=\"Rich Text Editor Formatting Toolbar\"\n      (keydown)=\"onToolbarKeyDown($event)\"\n      (focusin)=\"onToolbarFocusIn($event)\">\n      <!-- Text formatting group -->\n      @if (showFormats()) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"Text formatting\">\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"isBold()\"\n            [attr.aria-pressed]=\"isBold()\"\n            (click)=\"formatText('bold')\"\n            shTooltip=\"Bold\">\n            <sh-icon>text-b</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"isItalic()\"\n            [attr.aria-pressed]=\"isItalic()\"\n            (click)=\"formatText('italic')\"\n            shTooltip=\"Italic\">\n            <sh-icon>text-italic</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"isUnderline()\"\n            [attr.aria-pressed]=\"isUnderline()\"\n            (click)=\"formatText('underline')\"\n            shTooltip=\"Underline\">\n            <sh-icon>text-underline</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"isStrike()\"\n            [attr.aria-pressed]=\"isStrike()\"\n            (click)=\"formatText('strikeThrough')\"\n            shTooltip=\"Strikethrough\">\n            <sh-icon>text-strikethrough</sh-icon>\n          </button>\n          <button type=\"button\" class=\"sh-editor-btn\" (click)=\"formatText('removeFormat')\" shTooltip=\"Clear Formatting\">\n            <sh-icon>eraser</sh-icon>\n          </button>\n        </div>\n      }\n\n      <!-- Headings & Block types Dropdown -->\n      @if (showBlocks()) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"Text styles\">\n          <sh-menu [(isOpen)]=\"showBlockMenu\" [openIndicator]=\"true\" class=\"sh-editor-dropdown\">\n            <button trigger class=\"sh-editor-dropdown-trigger\" aria-label=\"Text Style\" shTooltip=\"Text Style\">\n              <span class=\"sh-editor-dropdown-label\">{{ getBlockLabel() }}</span>\n            </button>\n            <div menu>\n              <button (click)=\"selectBlockType('p')\" [class.active]=\"activeBlock() === 'p'\">\n                <sh-icon>paragraph</sh-icon>\n                <span>Normal text</span>\n              </button>\n              <button (click)=\"selectBlockType('h1')\" [class.active]=\"activeBlock() === 'h1'\">\n                <sh-icon>text-h-one</sh-icon>\n                <span>Heading 1</span>\n              </button>\n              <button (click)=\"selectBlockType('h2')\" [class.active]=\"activeBlock() === 'h2'\">\n                <sh-icon>text-h-two</sh-icon>\n                <span>Heading 2</span>\n              </button>\n              <button (click)=\"selectBlockType('h3')\" [class.active]=\"activeBlock() === 'h3'\">\n                <sh-icon>text-h-three</sh-icon>\n                <span>Heading 3</span>\n              </button>\n              <button (click)=\"selectBlockType('blockquote')\" [class.active]=\"activeBlock() === 'blockquote'\">\n                <sh-icon>quotes</sh-icon>\n                <span>Quote</span>\n              </button>\n              <button (click)=\"selectBlockType('pre')\" [class.active]=\"activeBlock() === 'pre'\">\n                <sh-icon>code</sh-icon>\n\n                <span>Code Block</span>\n              </button>\n            </div>\n          </sh-menu>\n        </div>\n      }\n\n      <!-- Lists -->\n      @if (showLists()) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"Lists\">\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"activeBlock() === 'ul' || activeBlock() === 'li'\"\n            [attr.aria-pressed]=\"activeBlock() === 'ul' || activeBlock() === 'li'\"\n            (click)=\"formatText('insertUnorderedList')\"\n            shTooltip=\"Bullet List\">\n            <sh-icon>list-bullets</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"activeBlock() === 'ol'\"\n            [attr.aria-pressed]=\"activeBlock() === 'ol'\"\n            (click)=\"formatText('insertOrderedList')\"\n            shTooltip=\"Numbered List\">\n            <sh-icon>list-numbers</sh-icon>\n          </button>\n        </div>\n      }\n\n      <!-- Alignments -->\n      @if (showAlignments()) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"Text alignment\">\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"align() === 'left'\"\n            [attr.aria-pressed]=\"align() === 'left'\"\n            (click)=\"formatText('justifyLeft')\"\n            shTooltip=\"Align Left\">\n            <sh-icon>text-align-left</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"align() === 'center'\"\n            [attr.aria-pressed]=\"align() === 'center'\"\n            (click)=\"formatText('justifyCenter')\"\n            shTooltip=\"Align Center\">\n            <sh-icon>text-align-center</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"align() === 'right'\"\n            [attr.aria-pressed]=\"align() === 'right'\"\n            (click)=\"formatText('justifyRight')\"\n            shTooltip=\"Align Right\">\n            <sh-icon>text-align-right</sh-icon>\n          </button>\n        </div>\n      }\n\n      <!-- Links, images and lines -->\n      @if (showInsertions()) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"Insert elements\">\n          <button type=\"button\" class=\"sh-editor-btn\" (click)=\"openLinkModal()\" shTooltip=\"Insert Link\">\n            <sh-icon>link</sh-icon>\n          </button>\n          <button type=\"button\" class=\"sh-editor-btn\" (click)=\"openImageModal()\" shTooltip=\"Insert Image\">\n            <sh-icon>image</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            (click)=\"formatText('insertHorizontalRule')\"\n            shTooltip=\"Horizontal Line\">\n            <sh-icon>minus</sh-icon>\n          </button>\n        </div>\n      }\n\n      <!-- Configured custom commands group -->\n      @if (customCommands().length > 0) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"Custom actions\">\n          @for (cmd of customCommands(); track cmd.id) {\n            <button type=\"button\" class=\"sh-editor-btn\" (click)=\"executeCommand(cmd)\" [shTooltip]=\"cmd.label\">\n              <sh-icon>{{ cmd.icon }}</sh-icon>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Custom projected buttons -->\n      <div class=\"sh-editor-toolbar-group sh-editor-toolbar-extra\" role=\"group\" aria-label=\"Extra actions\">\n        <ng-content />\n      </div>\n\n      <div class=\"spacer\"></div>\n\n      <!-- Undo, Redo and Source View -->\n      @if (showHistory()) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"History and view\">\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [disabled]=\"!canUndo()\"\n            (click)=\"formatText('undo')\"\n            shTooltip=\"Undo\">\n            <sh-icon>arrow-u-up-left</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [disabled]=\"!canRedo()\"\n            (click)=\"formatText('redo')\"\n            shTooltip=\"Redo\">\n            <sh-icon>arrow-u-up-right</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn view-toggle\"\n            [class.active]=\"viewMode() === 'code'\"\n            [attr.aria-pressed]=\"viewMode() === 'code'\"\n            (click)=\"toggleViewMode()\"\n            shTooltip=\"Toggle Code View\">\n            @if (viewMode() === 'design') {\n              <sh-icon>terminal</sh-icon>\n            } @else {\n              <sh-icon>article</sh-icon>\n            }\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Simple Dialogs for Link and Image Inputs -->\n  @if (showLinkModal()) {\n    <div class=\"sh-editor-modal\">\n      <div class=\"sh-editor-modal-backdrop\" (click)=\"showLinkModal.set(false)\"></div>\n      <div class=\"sh-editor-modal-content\">\n        <h4>Insert Link</h4>\n        <input\n          #linkInput\n          type=\"text\"\n          placeholder=\"https://example.com\"\n          class=\"sh-editor-input\"\n          (keyup.enter)=\"applyLink(linkInput.value)\"\n          autofocus />\n        <div class=\"sh-editor-modal-actions\">\n          <button type=\"button\" class=\"sh-editor-modal-btn cancel\" (click)=\"showLinkModal.set(false)\">Cancel</button>\n          <button type=\"button\" class=\"sh-editor-modal-btn confirm\" (click)=\"applyLink(linkInput.value)\">Insert</button>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (showImageModal()) {\n    <div class=\"sh-editor-modal\">\n      <div class=\"sh-editor-modal-backdrop\" (click)=\"showImageModal.set(false)\"></div>\n      <div class=\"sh-editor-modal-content\">\n        <h4>Insert Image</h4>\n\n        @if (imageUploadEnabled()) {\n          <input #fileInput type=\"file\" accept=\"image/*\" style=\"display: none\" (change)=\"onFileSelected($event)\" />\n          <button #uploadBtn type=\"button\" class=\"sh-editor-upload-btn\" (click)=\"fileInput.click()\">\n            <sh-icon>upload-simple</sh-icon>\n            Choose local file...\n          </button>\n\n          <div class=\"sh-editor-modal-divider\"><span>or insert from URL</span></div>\n        }\n\n        <input\n          #imageInput\n          type=\"text\"\n          placeholder=\"https://example.com/image.jpg\"\n          class=\"sh-editor-input\"\n          (keyup.enter)=\"applyImage(imageInput.value)\" />\n        <div class=\"sh-editor-modal-actions\">\n          <button type=\"button\" class=\"sh-editor-modal-btn cancel\" (click)=\"showImageModal.set(false)\">Cancel</button>\n          <button type=\"button\" class=\"sh-editor-modal-btn confirm\" (click)=\"applyImage(imageInput.value)\">\n            Insert\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Image layout options floating toolbar -->\n  @if (selectedImage() && !readonly()) {\n    <div class=\"sh-editor-img-toolbar\" [style.top.px]=\"imgToolbarTop()\" [style.left.px]=\"imgToolbarLeft()\">\n      <button\n        type=\"button\"\n        class=\"sh-editor-img-toolbar-btn\"\n        [class.active]=\"imgMode() === 'content'\"\n        (click)=\"setImageMode('content')\">\n        Content\n      </button>\n      <button\n        type=\"button\"\n        class=\"sh-editor-img-toolbar-btn\"\n        [class.active]=\"imgMode() === 'theater'\"\n        (click)=\"setImageMode('theater')\">\n        Theater\n      </button>\n      <button\n        type=\"button\"\n        class=\"sh-editor-img-toolbar-btn\"\n        [class.active]=\"imgMode() === 'float'\"\n        (click)=\"setImageMode('float')\">\n        Float\n      </button>\n      <button\n        type=\"button\"\n        class=\"sh-editor-img-toolbar-btn\"\n        [class.active]=\"imgMode() === 'custom'\"\n        (click)=\"setImageMode('custom')\">\n        Custom\n      </button>\n\n      @if (imgMode() === 'float' || imgMode() === 'custom') {\n        <div class=\"sh-editor-img-toolbar-divider\"></div>\n\n        <button\n          type=\"button\"\n          class=\"sh-editor-img-toolbar-btn\"\n          [class.active]=\"imgSize() === 'auto'\"\n          (click)=\"setImageSize('auto')\">\n          Auto\n        </button>\n        <button\n          type=\"button\"\n          class=\"sh-editor-img-toolbar-btn\"\n          [class.active]=\"imgSize() === 'small'\"\n          (click)=\"setImageSize('small')\">\n          Small\n        </button>\n        <button\n          type=\"button\"\n          class=\"sh-editor-img-toolbar-btn\"\n          [class.active]=\"imgSize() === 'medium'\"\n          (click)=\"setImageSize('medium')\">\n          Medium\n        </button>\n        <button\n          type=\"button\"\n          class=\"sh-editor-img-toolbar-btn\"\n          [class.active]=\"imgSize() === 'large'\"\n          (click)=\"setImageSize('large')\">\n          Large\n        </button>\n      }\n\n      <div class=\"sh-editor-img-toolbar-divider\"></div>\n\n      <button type=\"button\" class=\"sh-editor-img-toolbar-btn danger\" (click)=\"deleteImage()\" shTooltip=\"Delete Image\">\n        <sh-icon>trash</sh-icon>\n      </button>\n    </div>\n  }\n\n  <!-- Slash Commands floating menu using design system sh-menu component -->\n  @if (filteredCommands().length > 0 && !readonly()) {\n    <sh-menu\n      #slashMenu\n      [(isOpen)]=\"showSlashMenu\"\n      [searchable]=\"false\"\n      [openIndicator]=\"false\"\n      class=\"sh-editor-slash-menu-container\"\n      [style.top.px]=\"slashMenuTop()\"\n      [style.left.px]=\"slashMenuLeft()\">\n      <div trigger class=\"sh-editor-slash-anchor\"></div>\n      <div menu>\n        @for (cmd of filteredCommands(); track cmd.id; let idx = $index) {\n          <button\n            type=\"button\"\n            class=\"sh-editor-slash-item\"\n            [class.active]=\"idx === slashMenu.activeOptionIndex()\"\n            [attr.aria-selected]=\"idx === slashMenu.activeOptionIndex() ? 'true' : 'false'\"\n            (click)=\"executeCommand(cmd)\"\n            (mouseenter)=\"slashMenu.activeOptionIndex.set(idx)\">\n            <div class=\"sh-editor-slash-item-icon\">\n              <sh-icon>{{ cmd.icon }}</sh-icon>\n            </div>\n            <div class=\"sh-editor-slash-item-content\">\n              <div class=\"sh-editor-slash-item-label\">{{ cmd.label }}</div>\n              @if (cmd.description) {\n                <div class=\"sh-editor-slash-item-desc\">{{ cmd.description }}</div>\n              }\n            </div>\n          </button>\n        }\n      </div>\n    </sh-menu>\n  }\n\n  <!-- Body / Editor Surface -->\n  <div class=\"sh-editor-body\">\n    @if (viewMode() === 'design') {\n      <div\n        #editorRef\n        class=\"sh-editor-content\"\n        [class.has-slash-commands]=\"hasSlashCommands()\"\n        [attr.contenteditable]=\"readonly() ? 'false' : 'true'\"\n        [attr.placeholder]=\"placeholder()\"\n        role=\"textbox\"\n        aria-multiline=\"true\"\n        (input)=\"onDOMInput()\"\n        (blur)=\"onDOMBlur()\"\n        (focus)=\"isFocused.set(true)\"></div>\n    } @else {\n      <textarea\n        #codeEditorRef\n        class=\"sh-editor-code\"\n        [attr.readonly]=\"readonly() ? '' : null\"\n        [value]=\"rawCodeValue()\"\n        (input)=\"onCodeInput($event)\"\n        (blur)=\"onCodeBlur($event)\"\n        (focus)=\"isFocused.set(true)\"></textarea>\n    }\n  </div>\n\n  <!-- Footer / Status Bar -->\n  <div class=\"sh-editor-footer\">\n    <div class=\"word-count\">{{ wordCount() }} words, {{ charCount() }} characters</div>\n    <div class=\"spacer\"></div>\n    <div class=\"storage-format\">Storage: {{ format().toUpperCase() }}</div>\n  </div>\n</div>\n", styles: ["sh-editor{--editor-bg: var(--base-1);--editor-code-bg: var(--base-2);--editor-border-color: var(--base-4);--editor-toolbar-bg: rgb(from var(--base-1) r g b / 70%);--editor-toolbar-border: var(--base-4);--editor-btn-hover: var(--base-3);--editor-btn-active-bg: var(--primary-3);--editor-btn-active-c: var(--primary-11);--editor-footer-bg: var(--base-2);--editor-p: 1rem 1.25rem;--editor-min-h: 13.75rem;--editor-border-focus: var(--primary-8);--editor-shadow-focus: 0 0 0 3px var(--primary-3);display:block;width:100%;margin-bottom:1rem}sh-editor .sh-editor-container{position:relative;display:flex;flex-direction:column;background-color:var(--editor-bg);border:var(--border-10);border-color:var(--editor-border-color);border-radius:var(--shape-3);box-shadow:var(--box-shadow-10);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}sh-editor.sh-editor-focused .sh-editor-container{border-color:var(--editor-border-focus);box-shadow:var(--editor-shadow-focus)}sh-editor.sh-editor-readonly .sh-editor-content{cursor:not-allowed}sh-editor .sh-editor-toolbar{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.375rem .5rem;background-color:var(--editor-toolbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--editor-toolbar-border);border-top-left-radius:calc(var(--shape-3) - 1px);border-top-right-radius:calc(var(--shape-3) - 1px)}sh-editor .sh-editor-toolbar-group{display:flex;align-items:center;gap:.125rem;padding-right:.375rem;border-right:1px solid var(--editor-toolbar-border)}sh-editor .sh-editor-toolbar-group:last-child,sh-editor .sh-editor-toolbar-group.view-toggle{border-right:none}sh-editor .sh-editor-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:transparent;border:none;border-radius:var(--shape-1);color:var(--base-11);cursor:pointer;font-size:1rem;transition:all .15s ease}sh-editor .sh-editor-btn:hover:not(:disabled){background-color:var(--editor-btn-hover);color:var(--base-12)}sh-editor .sh-editor-btn:disabled{opacity:.35;cursor:not-allowed}sh-editor .sh-editor-btn.active{background-color:var(--editor-btn-active-bg);color:var(--editor-btn-active-c);font-weight:700}sh-editor .sh-editor-btn i{font-style:normal;line-height:1}sh-editor .sh-editor-body{position:relative;display:flex;flex-direction:column;min-height:var(--editor-min-h)}sh-editor .sh-editor-content{flex:1 1 auto;padding:var(--editor-p);min-height:var(--editor-min-h);outline:none;color:var(--base-12);font:var(--paragraph-20);line-height:1.6;word-break:break-word}sh-editor .sh-editor-content p{margin-top:0;margin-bottom:.75rem}sh-editor .sh-editor-content p:last-child{margin-bottom:0}sh-editor .sh-editor-content h1,sh-editor .sh-editor-content h2,sh-editor .sh-editor-content h3{color:var(--base-12);font-weight:700;margin-top:1rem;margin-bottom:.5rem;line-height:1.3}sh-editor .sh-editor-content h1{font:var(--title-30B)}sh-editor .sh-editor-content h2{font:var(--title-20B)}sh-editor .sh-editor-content h3{font:var(--title-10B)}sh-editor .sh-editor-content blockquote{margin:1rem 0;padding:.5rem 1rem;border-left:4px solid var(--primary-8);background-color:var(--base-2);color:var(--base-11);border-radius:0 var(--shape-2) var(--shape-2) 0;font-style:italic}sh-editor .sh-editor-content pre{background-color:var(--editor-code-bg);border-radius:var(--shape-2);padding:.75rem 1rem;margin:1rem 0;overflow-x:auto}sh-editor .sh-editor-content pre code{font:var(--code-20);background:transparent;padding:0;border-radius:0}sh-editor .sh-editor-content code{font:var(--code-20);background-color:var(--base-2);padding:.125rem .375rem;border-radius:var(--shape-1);color:var(--primary-11)}sh-editor .sh-editor-content ul,sh-editor .sh-editor-content ol{margin-top:0;margin-bottom:1rem;padding-left:1.5rem}sh-editor .sh-editor-content li{margin-bottom:.25rem}sh-editor .sh-editor-content hr{border:none;border-top:1px solid var(--editor-border-color);margin:1.5rem 0}sh-editor .sh-editor-content img{height:auto;max-width:100%;transition:all .2s ease;border:var(--border-10);border-color:var(--base-3);cursor:pointer}sh-editor .sh-editor-content img:hover{outline:2px solid var(--primary-7)}sh-editor .sh-editor-content img:focus{outline:2px solid var(--primary-8)}sh-editor .sh-editor-content img.sh-editor-img-content{display:block;margin:1rem auto;box-sizing:border-box;border-radius:var(--shape-2)}sh-editor .sh-editor-content img.sh-editor-img-content.sh-editor-img-size-small{width:15rem;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-content.sh-editor-img-size-medium{width:30rem;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-content.sh-editor-img-size-large{width:calc(100% - 3rem);max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-content:not([class*=sh-editor-img-size-]){width:calc(100% - 3rem);max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-theater{display:block;width:calc(100% + 2.5rem);max-width:none!important;margin:1rem -1.25rem;padding:0;border-radius:0;border-left:none;border-right:none}sh-editor .sh-editor-content img.sh-editor-img-float{float:left;margin:.5rem 1rem .5rem 0;border-radius:var(--shape-2)}sh-editor .sh-editor-content img.sh-editor-img-float.sh-editor-img-size-auto{width:auto;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-float.sh-editor-img-size-small{width:15rem;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-float.sh-editor-img-size-medium{width:30rem;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-float.sh-editor-img-size-large{width:100%;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-float:not([class*=sh-editor-img-size-]){width:auto;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-custom,sh-editor .sh-editor-content img.sh-editor-img-auto{display:inline-block;margin:.75rem 0;border-radius:var(--shape-2)}sh-editor .sh-editor-content img.sh-editor-img-custom.sh-editor-img-size-auto,sh-editor .sh-editor-content img.sh-editor-img-auto.sh-editor-img-size-auto{width:auto;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-custom.sh-editor-img-size-small,sh-editor .sh-editor-content img.sh-editor-img-auto.sh-editor-img-size-small{width:15rem;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-custom.sh-editor-img-size-medium,sh-editor .sh-editor-content img.sh-editor-img-auto.sh-editor-img-size-medium{width:30rem;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-custom.sh-editor-img-size-large,sh-editor .sh-editor-content img.sh-editor-img-auto.sh-editor-img-size-large{width:100%;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-custom:not([class*=sh-editor-img-size-]),sh-editor .sh-editor-content img.sh-editor-img-auto:not([class*=sh-editor-img-size-]){width:auto;max-width:100%!important}sh-editor .sh-editor-content a{color:var(--primary-9);text-decoration:underline;cursor:pointer}sh-editor .sh-editor-content a:hover{color:var(--primary-11)}sh-editor .sh-editor-content:empty:before{content:attr(placeholder);color:var(--base-8);font-style:italic;pointer-events:none;display:block}sh-editor .sh-editor-content p{position:relative}sh-editor .sh-editor-content.has-slash-commands p.sh-editor-active-block:empty:before,sh-editor .sh-editor-content.has-slash-commands p.sh-editor-active-block:has(>br:only-child):before{content:\"Type '/' for commands...\";position:absolute;left:0;top:0;pointer-events:none;color:var(--base-6);font-style:normal;font-weight:400;opacity:.6}sh-editor .sh-editor-code{flex:1 1 auto;width:100%;min-height:var(--editor-min-h);padding:var(--editor-p);background-color:var(--editor-code-bg);color:var(--base-12);font:var(--code-20);border:none;resize:vertical;outline:none;font-family:monospace;line-height:1.5}sh-editor .sh-editor-footer{display:flex;align-items:center;padding:.375rem .75rem;background-color:var(--editor-footer-bg);border-top:1px solid var(--editor-border-color);font:var(--paragraph-10);color:var(--base-8);border-bottom-left-radius:calc(var(--shape-3) - 1px);border-bottom-right-radius:calc(var(--shape-3) - 1px)}sh-editor .sh-editor-modal{position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem}sh-editor .sh-editor-modal-backdrop{position:absolute;inset:0;background-color:rgb(from var(--base-1) r g b/40%);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}sh-editor .sh-editor-modal-content{position:relative;z-index:101;width:100%;max-width:22.5rem;padding:1.25rem;background-color:var(--base-1);border:var(--border-10);border-color:var(--base-4);border-radius:var(--shape-3);box-shadow:var(--box-shadow-40)}sh-editor .sh-editor-modal-content h4{margin-top:0;margin-bottom:.75rem;font:var(--title-10B);color:var(--base-12)}sh-editor .sh-editor-input{width:100%;padding:.5rem .75rem;background-color:var(--base-2);border:var(--border-10);border-color:var(--base-4);border-radius:var(--shape-2);color:var(--base-12);font:var(--paragraph-20);outline:none;margin-bottom:1rem;transition:border-color .15s ease}sh-editor .sh-editor-input:focus{border-color:var(--primary-8)}sh-editor .sh-editor-modal-actions{display:flex;justify-content:flex-end;gap:.5rem}sh-editor .sh-editor-modal-btn{padding:.375rem .75rem;border-radius:var(--shape-2);font:var(--paragraph-20);cursor:pointer;border:none;transition:all .15s ease}sh-editor .sh-editor-modal-btn.cancel{background-color:transparent;color:var(--base-11)}sh-editor .sh-editor-modal-btn.cancel:hover{background-color:var(--base-3)}sh-editor .sh-editor-modal-btn.confirm{background-color:var(--primary-9);color:var(--primary-1)}sh-editor .sh-editor-modal-btn.confirm:hover{background-color:var(--primary-10)}sh-editor .sh-editor-img-toolbar{position:absolute;z-index:50;display:flex;align-items:center;gap:.25rem;padding:.25rem .375rem;background-color:rgb(from var(--base-1) r g b/85%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:var(--border-10);border-color:var(--base-4);border-radius:var(--shape-2);box-shadow:var(--box-shadow-20);pointer-events:auto;transition:opacity .2s ease,transform .2s ease}sh-editor .sh-editor-img-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .5rem;background:transparent;border:none;border-radius:var(--shape-1);color:var(--base-11);cursor:pointer;font:var(--paragraph-10);font-weight:500;transition:all .15s ease}sh-editor .sh-editor-img-toolbar-btn:hover{background-color:var(--editor-btn-hover);color:var(--base-12)}sh-editor .sh-editor-img-toolbar-btn.active{background-color:var(--editor-btn-active-bg);color:var(--editor-btn-active-c)}sh-editor .sh-editor-img-toolbar-btn.danger{color:var(--error-9)}sh-editor .sh-editor-img-toolbar-btn.danger:hover{background-color:var(--error-3);color:var(--error-11)}sh-editor .sh-editor-img-toolbar-divider{width:1px;height:1rem;background-color:var(--editor-toolbar-border);margin:0 .125rem}sh-editor .sh-editor-upload-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.625rem 1rem;background-color:var(--base-2);border:1px dashed var(--editor-border-color);border-radius:var(--shape-2);color:var(--base-11);font:var(--paragraph-20);cursor:pointer;transition:all .15s ease;margin-bottom:.75rem}sh-editor .sh-editor-upload-btn:hover{background-color:var(--base-3);border-color:var(--primary-7);color:var(--base-12)}sh-editor .sh-editor-upload-btn sh-icon{font-size:1.125rem}sh-editor .sh-editor-modal-divider{display:flex;align-items:center;text-align:center;color:var(--base-8);font:var(--paragraph-10);margin-bottom:.75rem;width:100%}sh-editor .sh-editor-modal-divider:before,sh-editor .sh-editor-modal-divider:after{content:\"\";flex:1;border-bottom:1px solid var(--editor-border-color)}sh-editor .sh-editor-modal-divider:not(:empty):before{margin-right:.5rem}sh-editor .sh-editor-modal-divider:not(:empty):after{margin-left:.5rem}sh-editor .sh-editor-dropdown{position:relative;display:inline-block}sh-editor .sh-editor-dropdown-trigger{display:inline-flex;align-items:center;gap:.375rem;height:1.75rem;padding:0 .5rem;background:transparent;border:none;border-radius:var(--shape-1);color:var(--base-11);cursor:pointer;font:var(--paragraph-20);font-weight:600;transition:all .15s ease;outline:none}sh-editor .sh-editor-dropdown-trigger:hover{background-color:var(--editor-btn-hover);color:var(--base-12)}sh-editor .sh-editor-dropdown-trigger:focus{outline:2px solid var(--primary-8)}sh-editor .sh-editor-dropdown-label{white-space:nowrap}sh-editor .sh-editor-slash-item{display:flex;align-items:center;gap:.625rem;width:100%;padding:.375rem .625rem;background:transparent;border:none;border-radius:var(--shape-2);text-align:left;cursor:pointer;transition:all .1s ease;outline:none}sh-editor .sh-editor-slash-item.active,sh-editor .sh-editor-slash-item:hover{background-color:var(--editor-btn-hover)}sh-editor .sh-editor-slash-item.active .sh-editor-slash-item-icon,sh-editor .sh-editor-slash-item:hover .sh-editor-slash-item-icon{background-color:var(--editor-btn-active-bg);color:var(--editor-btn-active-c)}sh-editor .sh-editor-slash-item .sh-editor-slash-item-icon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:var(--shape-1);background-color:var(--base-3);color:var(--base-11);font-size:1rem;transition:all .15s ease;flex-shrink:0}sh-editor .sh-editor-slash-item .sh-editor-slash-item-content{display:flex;flex-direction:column;overflow:hidden}sh-editor .sh-editor-slash-item .sh-editor-slash-item-label{font:var(--paragraph-20);font-weight:600;color:var(--base-12);line-height:1.2}sh-editor .sh-editor-slash-item .sh-editor-slash-item-desc{font:var(--paragraph-10);color:var(--base-8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.125rem}\n"], dependencies: [{ kind: "directive", type: ShipTooltip, selector: "[shTooltip]", inputs: ["shTooltip"] }, { kind: "component", type: ShipIcon, selector: "sh-icon", inputs: ["color", "size"] }, { kind: "component", type: ShipMenu, selector: "sh-menu", inputs: ["asMultiLayer", "openIndicator", "disabled", "customOptionElementSelectors", "keepClickedOptionActive", "closeOnClick", "isOpen", "searchable"], outputs: ["isOpenChange", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ShipEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'sh-editor', standalone: true, encapsulation: ViewEncapsulation.None, imports: [ShipTooltip, ShipIcon, ShipMenu], providers: [SHIP_EDITOR_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                        '[class.sh-editor-readonly]': 'readonly()',
+                        '[class.sh-editor-focused]': 'isFocused()',
+                    }, template: "<div class=\"sh-editor-container\">\n  <!-- Editor Toolbar -->\n  @if (toolbar() && !readonly()) {\n    <div\n      class=\"sh-editor-toolbar\"\n      role=\"toolbar\"\n      aria-label=\"Rich Text Editor Formatting Toolbar\"\n      (keydown)=\"onToolbarKeyDown($event)\"\n      (focusin)=\"onToolbarFocusIn($event)\">\n      <!-- Text formatting group -->\n      @if (showFormats()) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"Text formatting\">\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"isBold()\"\n            [attr.aria-pressed]=\"isBold()\"\n            (click)=\"formatText('bold')\"\n            shTooltip=\"Bold\">\n            <sh-icon>text-b</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"isItalic()\"\n            [attr.aria-pressed]=\"isItalic()\"\n            (click)=\"formatText('italic')\"\n            shTooltip=\"Italic\">\n            <sh-icon>text-italic</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"isUnderline()\"\n            [attr.aria-pressed]=\"isUnderline()\"\n            (click)=\"formatText('underline')\"\n            shTooltip=\"Underline\">\n            <sh-icon>text-underline</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"isStrike()\"\n            [attr.aria-pressed]=\"isStrike()\"\n            (click)=\"formatText('strikeThrough')\"\n            shTooltip=\"Strikethrough\">\n            <sh-icon>text-strikethrough</sh-icon>\n          </button>\n          <button type=\"button\" class=\"sh-editor-btn\" (click)=\"formatText('removeFormat')\" shTooltip=\"Clear Formatting\">\n            <sh-icon>eraser</sh-icon>\n          </button>\n        </div>\n      }\n\n      <!-- Headings & Block types Dropdown -->\n      @if (showBlocks()) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"Text styles\">\n          <sh-menu [(isOpen)]=\"showBlockMenu\" [openIndicator]=\"true\" class=\"sh-editor-dropdown\">\n            <button trigger class=\"sh-editor-dropdown-trigger\" aria-label=\"Text Style\" shTooltip=\"Text Style\">\n              <span class=\"sh-editor-dropdown-label\">{{ getBlockLabel() }}</span>\n            </button>\n            <div menu>\n              <button (click)=\"selectBlockType('p')\" [class.active]=\"activeBlock() === 'p'\">\n                <sh-icon>paragraph</sh-icon>\n                <span>Normal text</span>\n              </button>\n              <button (click)=\"selectBlockType('h1')\" [class.active]=\"activeBlock() === 'h1'\">\n                <sh-icon>text-h-one</sh-icon>\n                <span>Heading 1</span>\n              </button>\n              <button (click)=\"selectBlockType('h2')\" [class.active]=\"activeBlock() === 'h2'\">\n                <sh-icon>text-h-two</sh-icon>\n                <span>Heading 2</span>\n              </button>\n              <button (click)=\"selectBlockType('h3')\" [class.active]=\"activeBlock() === 'h3'\">\n                <sh-icon>text-h-three</sh-icon>\n                <span>Heading 3</span>\n              </button>\n              <button (click)=\"selectBlockType('blockquote')\" [class.active]=\"activeBlock() === 'blockquote'\">\n                <sh-icon>quotes</sh-icon>\n                <span>Quote</span>\n              </button>\n              <button (click)=\"selectBlockType('pre')\" [class.active]=\"activeBlock() === 'pre'\">\n                <sh-icon>code</sh-icon>\n\n                <span>Code Block</span>\n              </button>\n            </div>\n          </sh-menu>\n        </div>\n      }\n\n      <!-- Lists -->\n      @if (showLists()) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"Lists\">\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"activeBlock() === 'ul' || activeBlock() === 'li'\"\n            [attr.aria-pressed]=\"activeBlock() === 'ul' || activeBlock() === 'li'\"\n            (click)=\"formatText('insertUnorderedList')\"\n            shTooltip=\"Bullet List\">\n            <sh-icon>list-bullets</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"activeBlock() === 'ol'\"\n            [attr.aria-pressed]=\"activeBlock() === 'ol'\"\n            (click)=\"formatText('insertOrderedList')\"\n            shTooltip=\"Numbered List\">\n            <sh-icon>list-numbers</sh-icon>\n          </button>\n        </div>\n      }\n\n      <!-- Alignments -->\n      @if (showAlignments()) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"Text alignment\">\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"align() === 'left'\"\n            [attr.aria-pressed]=\"align() === 'left'\"\n            (click)=\"formatText('justifyLeft')\"\n            shTooltip=\"Align Left\">\n            <sh-icon>text-align-left</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"align() === 'center'\"\n            [attr.aria-pressed]=\"align() === 'center'\"\n            (click)=\"formatText('justifyCenter')\"\n            shTooltip=\"Align Center\">\n            <sh-icon>text-align-center</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [class.active]=\"align() === 'right'\"\n            [attr.aria-pressed]=\"align() === 'right'\"\n            (click)=\"formatText('justifyRight')\"\n            shTooltip=\"Align Right\">\n            <sh-icon>text-align-right</sh-icon>\n          </button>\n        </div>\n      }\n\n      <!-- Links, images and lines -->\n      @if (showInsertions()) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"Insert elements\">\n          <button type=\"button\" class=\"sh-editor-btn\" (click)=\"openLinkModal()\" shTooltip=\"Insert Link\">\n            <sh-icon>link</sh-icon>\n          </button>\n          <button type=\"button\" class=\"sh-editor-btn\" (click)=\"openImageModal()\" shTooltip=\"Insert Image\">\n            <sh-icon>image</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            (click)=\"formatText('insertHorizontalRule')\"\n            shTooltip=\"Horizontal Line\">\n            <sh-icon>minus</sh-icon>\n          </button>\n        </div>\n      }\n\n      <!-- Configured custom commands group -->\n      @if (customCommands().length > 0) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"Custom actions\">\n          @for (cmd of customCommands(); track cmd.id) {\n            <button type=\"button\" class=\"sh-editor-btn\" (click)=\"executeCommand(cmd)\" [shTooltip]=\"cmd.label\">\n              <sh-icon>{{ cmd.icon }}</sh-icon>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Custom projected buttons -->\n      <div class=\"sh-editor-toolbar-group sh-editor-toolbar-extra\" role=\"group\" aria-label=\"Extra actions\">\n        <ng-content />\n      </div>\n\n      <div class=\"spacer\"></div>\n\n      <!-- Undo, Redo and Source View -->\n      @if (showHistory()) {\n        <div class=\"sh-editor-toolbar-group\" role=\"group\" aria-label=\"History and view\">\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [disabled]=\"!canUndo()\"\n            (click)=\"formatText('undo')\"\n            shTooltip=\"Undo\">\n            <sh-icon>arrow-u-up-left</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn\"\n            [disabled]=\"!canRedo()\"\n            (click)=\"formatText('redo')\"\n            shTooltip=\"Redo\">\n            <sh-icon>arrow-u-up-right</sh-icon>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sh-editor-btn view-toggle\"\n            [class.active]=\"viewMode() === 'code'\"\n            [attr.aria-pressed]=\"viewMode() === 'code'\"\n            (click)=\"toggleViewMode()\"\n            shTooltip=\"Toggle Code View\">\n            @if (viewMode() === 'design') {\n              <sh-icon>terminal</sh-icon>\n            } @else {\n              <sh-icon>article</sh-icon>\n            }\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Simple Dialogs for Link and Image Inputs -->\n  @if (showLinkModal()) {\n    <div class=\"sh-editor-modal\">\n      <div class=\"sh-editor-modal-backdrop\" (click)=\"showLinkModal.set(false)\"></div>\n      <div class=\"sh-editor-modal-content\">\n        <h4>Insert Link</h4>\n        <input\n          #linkInput\n          type=\"text\"\n          placeholder=\"https://example.com\"\n          class=\"sh-editor-input\"\n          (keyup.enter)=\"applyLink(linkInput.value)\"\n          autofocus />\n        <div class=\"sh-editor-modal-actions\">\n          <button type=\"button\" class=\"sh-editor-modal-btn cancel\" (click)=\"showLinkModal.set(false)\">Cancel</button>\n          <button type=\"button\" class=\"sh-editor-modal-btn confirm\" (click)=\"applyLink(linkInput.value)\">Insert</button>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (showImageModal()) {\n    <div class=\"sh-editor-modal\">\n      <div class=\"sh-editor-modal-backdrop\" (click)=\"showImageModal.set(false)\"></div>\n      <div class=\"sh-editor-modal-content\">\n        <h4>Insert Image</h4>\n\n        @if (imageUploadEnabled()) {\n          <input #fileInput type=\"file\" accept=\"image/*\" style=\"display: none\" (change)=\"onFileSelected($event)\" />\n          <button #uploadBtn type=\"button\" class=\"sh-editor-upload-btn\" (click)=\"fileInput.click()\">\n            <sh-icon>upload-simple</sh-icon>\n            Choose local file...\n          </button>\n\n          <div class=\"sh-editor-modal-divider\"><span>or insert from URL</span></div>\n        }\n\n        <input\n          #imageInput\n          type=\"text\"\n          placeholder=\"https://example.com/image.jpg\"\n          class=\"sh-editor-input\"\n          (keyup.enter)=\"applyImage(imageInput.value)\" />\n        <div class=\"sh-editor-modal-actions\">\n          <button type=\"button\" class=\"sh-editor-modal-btn cancel\" (click)=\"showImageModal.set(false)\">Cancel</button>\n          <button type=\"button\" class=\"sh-editor-modal-btn confirm\" (click)=\"applyImage(imageInput.value)\">\n            Insert\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Image layout options floating toolbar -->\n  @if (selectedImage() && !readonly()) {\n    <div class=\"sh-editor-img-toolbar\" [style.top.px]=\"imgToolbarTop()\" [style.left.px]=\"imgToolbarLeft()\">\n      <button\n        type=\"button\"\n        class=\"sh-editor-img-toolbar-btn\"\n        [class.active]=\"imgMode() === 'content'\"\n        (click)=\"setImageMode('content')\">\n        Content\n      </button>\n      <button\n        type=\"button\"\n        class=\"sh-editor-img-toolbar-btn\"\n        [class.active]=\"imgMode() === 'theater'\"\n        (click)=\"setImageMode('theater')\">\n        Theater\n      </button>\n      <button\n        type=\"button\"\n        class=\"sh-editor-img-toolbar-btn\"\n        [class.active]=\"imgMode() === 'float'\"\n        (click)=\"setImageMode('float')\">\n        Float\n      </button>\n      <button\n        type=\"button\"\n        class=\"sh-editor-img-toolbar-btn\"\n        [class.active]=\"imgMode() === 'custom'\"\n        (click)=\"setImageMode('custom')\">\n        Custom\n      </button>\n\n      @if (imgMode() === 'float' || imgMode() === 'custom') {\n        <div class=\"sh-editor-img-toolbar-divider\"></div>\n\n        <button\n          type=\"button\"\n          class=\"sh-editor-img-toolbar-btn\"\n          [class.active]=\"imgSize() === 'auto'\"\n          (click)=\"setImageSize('auto')\">\n          Auto\n        </button>\n        <button\n          type=\"button\"\n          class=\"sh-editor-img-toolbar-btn\"\n          [class.active]=\"imgSize() === 'small'\"\n          (click)=\"setImageSize('small')\">\n          Small\n        </button>\n        <button\n          type=\"button\"\n          class=\"sh-editor-img-toolbar-btn\"\n          [class.active]=\"imgSize() === 'medium'\"\n          (click)=\"setImageSize('medium')\">\n          Medium\n        </button>\n        <button\n          type=\"button\"\n          class=\"sh-editor-img-toolbar-btn\"\n          [class.active]=\"imgSize() === 'large'\"\n          (click)=\"setImageSize('large')\">\n          Large\n        </button>\n      }\n\n      <div class=\"sh-editor-img-toolbar-divider\"></div>\n\n      <button type=\"button\" class=\"sh-editor-img-toolbar-btn danger\" (click)=\"deleteImage()\" shTooltip=\"Delete Image\">\n        <sh-icon>trash</sh-icon>\n      </button>\n    </div>\n  }\n\n  <!-- Slash Commands floating menu using design system sh-menu component -->\n  @if (filteredCommands().length > 0 && !readonly()) {\n    <sh-menu\n      #slashMenu\n      [(isOpen)]=\"showSlashMenu\"\n      [searchable]=\"false\"\n      [openIndicator]=\"false\"\n      class=\"sh-editor-slash-menu-container\"\n      [style.top.px]=\"slashMenuTop()\"\n      [style.left.px]=\"slashMenuLeft()\">\n      <div trigger class=\"sh-editor-slash-anchor\"></div>\n      <div menu>\n        @for (cmd of filteredCommands(); track cmd.id; let idx = $index) {\n          <button\n            type=\"button\"\n            class=\"sh-editor-slash-item\"\n            [class.active]=\"idx === slashMenu.activeOptionIndex()\"\n            [attr.aria-selected]=\"idx === slashMenu.activeOptionIndex() ? 'true' : 'false'\"\n            (click)=\"executeCommand(cmd)\"\n            (mouseenter)=\"slashMenu.activeOptionIndex.set(idx)\">\n            <div class=\"sh-editor-slash-item-icon\">\n              <sh-icon>{{ cmd.icon }}</sh-icon>\n            </div>\n            <div class=\"sh-editor-slash-item-content\">\n              <div class=\"sh-editor-slash-item-label\">{{ cmd.label }}</div>\n              @if (cmd.description) {\n                <div class=\"sh-editor-slash-item-desc\">{{ cmd.description }}</div>\n              }\n            </div>\n          </button>\n        }\n      </div>\n    </sh-menu>\n  }\n\n  <!-- Body / Editor Surface -->\n  <div class=\"sh-editor-body\">\n    @if (viewMode() === 'design') {\n      <div\n        #editorRef\n        class=\"sh-editor-content\"\n        [class.has-slash-commands]=\"hasSlashCommands()\"\n        [attr.contenteditable]=\"readonly() ? 'false' : 'true'\"\n        [attr.placeholder]=\"placeholder()\"\n        role=\"textbox\"\n        aria-multiline=\"true\"\n        (input)=\"onDOMInput()\"\n        (blur)=\"onDOMBlur()\"\n        (focus)=\"isFocused.set(true)\"></div>\n    } @else {\n      <textarea\n        #codeEditorRef\n        class=\"sh-editor-code\"\n        [attr.readonly]=\"readonly() ? '' : null\"\n        [value]=\"rawCodeValue()\"\n        (input)=\"onCodeInput($event)\"\n        (blur)=\"onCodeBlur($event)\"\n        (focus)=\"isFocused.set(true)\"></textarea>\n    }\n  </div>\n\n  <!-- Footer / Status Bar -->\n  <div class=\"sh-editor-footer\">\n    <div class=\"word-count\">{{ wordCount() }} words, {{ charCount() }} characters</div>\n    <div class=\"spacer\"></div>\n    <div class=\"storage-format\">Storage: {{ format().toUpperCase() }}</div>\n  </div>\n</div>\n", styles: ["sh-editor{--editor-bg: var(--base-1);--editor-code-bg: var(--base-2);--editor-border-color: var(--base-4);--editor-toolbar-bg: rgb(from var(--base-1) r g b / 70%);--editor-toolbar-border: var(--base-4);--editor-btn-hover: var(--base-3);--editor-btn-active-bg: var(--primary-3);--editor-btn-active-c: var(--primary-11);--editor-footer-bg: var(--base-2);--editor-p: 1rem 1.25rem;--editor-min-h: 13.75rem;--editor-border-focus: var(--primary-8);--editor-shadow-focus: 0 0 0 3px var(--primary-3);display:block;width:100%;margin-bottom:1rem}sh-editor .sh-editor-container{position:relative;display:flex;flex-direction:column;background-color:var(--editor-bg);border:var(--border-10);border-color:var(--editor-border-color);border-radius:var(--shape-3);box-shadow:var(--box-shadow-10);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}sh-editor.sh-editor-focused .sh-editor-container{border-color:var(--editor-border-focus);box-shadow:var(--editor-shadow-focus)}sh-editor.sh-editor-readonly .sh-editor-content{cursor:not-allowed}sh-editor .sh-editor-toolbar{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.375rem .5rem;background-color:var(--editor-toolbar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--editor-toolbar-border);border-top-left-radius:calc(var(--shape-3) - 1px);border-top-right-radius:calc(var(--shape-3) - 1px)}sh-editor .sh-editor-toolbar-group{display:flex;align-items:center;gap:.125rem;padding-right:.375rem;border-right:1px solid var(--editor-toolbar-border)}sh-editor .sh-editor-toolbar-group:last-child,sh-editor .sh-editor-toolbar-group.view-toggle{border-right:none}sh-editor .sh-editor-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:transparent;border:none;border-radius:var(--shape-1);color:var(--base-11);cursor:pointer;font-size:1rem;transition:all .15s ease}sh-editor .sh-editor-btn:hover:not(:disabled){background-color:var(--editor-btn-hover);color:var(--base-12)}sh-editor .sh-editor-btn:disabled{opacity:.35;cursor:not-allowed}sh-editor .sh-editor-btn.active{background-color:var(--editor-btn-active-bg);color:var(--editor-btn-active-c);font-weight:700}sh-editor .sh-editor-btn i{font-style:normal;line-height:1}sh-editor .sh-editor-body{position:relative;display:flex;flex-direction:column;min-height:var(--editor-min-h)}sh-editor .sh-editor-content{flex:1 1 auto;padding:var(--editor-p);min-height:var(--editor-min-h);outline:none;color:var(--base-12);font:var(--paragraph-20);line-height:1.6;word-break:break-word}sh-editor .sh-editor-content p{margin-top:0;margin-bottom:.75rem}sh-editor .sh-editor-content p:last-child{margin-bottom:0}sh-editor .sh-editor-content h1,sh-editor .sh-editor-content h2,sh-editor .sh-editor-content h3{color:var(--base-12);font-weight:700;margin-top:1rem;margin-bottom:.5rem;line-height:1.3}sh-editor .sh-editor-content h1{font:var(--title-30B)}sh-editor .sh-editor-content h2{font:var(--title-20B)}sh-editor .sh-editor-content h3{font:var(--title-10B)}sh-editor .sh-editor-content blockquote{margin:1rem 0;padding:.5rem 1rem;border-left:4px solid var(--primary-8);background-color:var(--base-2);color:var(--base-11);border-radius:0 var(--shape-2) var(--shape-2) 0;font-style:italic}sh-editor .sh-editor-content pre{background-color:var(--editor-code-bg);border-radius:var(--shape-2);padding:.75rem 1rem;margin:1rem 0;overflow-x:auto}sh-editor .sh-editor-content pre code{font:var(--code-20);background:transparent;padding:0;border-radius:0}sh-editor .sh-editor-content code{font:var(--code-20);background-color:var(--base-2);padding:.125rem .375rem;border-radius:var(--shape-1);color:var(--primary-11)}sh-editor .sh-editor-content ul,sh-editor .sh-editor-content ol{margin-top:0;margin-bottom:1rem;padding-left:1.5rem}sh-editor .sh-editor-content li{margin-bottom:.25rem}sh-editor .sh-editor-content hr{border:none;border-top:1px solid var(--editor-border-color);margin:1.5rem 0}sh-editor .sh-editor-content img{height:auto;max-width:100%;transition:all .2s ease;border:var(--border-10);border-color:var(--base-3);cursor:pointer}sh-editor .sh-editor-content img:hover{outline:2px solid var(--primary-7)}sh-editor .sh-editor-content img:focus{outline:2px solid var(--primary-8)}sh-editor .sh-editor-content img.sh-editor-img-content{display:block;margin:1rem auto;box-sizing:border-box;border-radius:var(--shape-2)}sh-editor .sh-editor-content img.sh-editor-img-content.sh-editor-img-size-small{width:15rem;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-content.sh-editor-img-size-medium{width:30rem;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-content.sh-editor-img-size-large{width:calc(100% - 3rem);max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-content:not([class*=sh-editor-img-size-]){width:calc(100% - 3rem);max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-theater{display:block;width:calc(100% + 2.5rem);max-width:none!important;margin:1rem -1.25rem;padding:0;border-radius:0;border-left:none;border-right:none}sh-editor .sh-editor-content img.sh-editor-img-float{float:left;margin:.5rem 1rem .5rem 0;border-radius:var(--shape-2)}sh-editor .sh-editor-content img.sh-editor-img-float.sh-editor-img-size-auto{width:auto;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-float.sh-editor-img-size-small{width:15rem;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-float.sh-editor-img-size-medium{width:30rem;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-float.sh-editor-img-size-large{width:100%;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-float:not([class*=sh-editor-img-size-]){width:auto;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-custom,sh-editor .sh-editor-content img.sh-editor-img-auto{display:inline-block;margin:.75rem 0;border-radius:var(--shape-2)}sh-editor .sh-editor-content img.sh-editor-img-custom.sh-editor-img-size-auto,sh-editor .sh-editor-content img.sh-editor-img-auto.sh-editor-img-size-auto{width:auto;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-custom.sh-editor-img-size-small,sh-editor .sh-editor-content img.sh-editor-img-auto.sh-editor-img-size-small{width:15rem;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-custom.sh-editor-img-size-medium,sh-editor .sh-editor-content img.sh-editor-img-auto.sh-editor-img-size-medium{width:30rem;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-custom.sh-editor-img-size-large,sh-editor .sh-editor-content img.sh-editor-img-auto.sh-editor-img-size-large{width:100%;max-width:100%!important}sh-editor .sh-editor-content img.sh-editor-img-custom:not([class*=sh-editor-img-size-]),sh-editor .sh-editor-content img.sh-editor-img-auto:not([class*=sh-editor-img-size-]){width:auto;max-width:100%!important}sh-editor .sh-editor-content a{color:var(--primary-9);text-decoration:underline;cursor:pointer}sh-editor .sh-editor-content a:hover{color:var(--primary-11)}sh-editor .sh-editor-content:empty:before{content:attr(placeholder);color:var(--base-8);font-style:italic;pointer-events:none;display:block}sh-editor .sh-editor-content p{position:relative}sh-editor .sh-editor-content.has-slash-commands p.sh-editor-active-block:empty:before,sh-editor .sh-editor-content.has-slash-commands p.sh-editor-active-block:has(>br:only-child):before{content:\"Type '/' for commands...\";position:absolute;left:0;top:0;pointer-events:none;color:var(--base-6);font-style:normal;font-weight:400;opacity:.6}sh-editor .sh-editor-code{flex:1 1 auto;width:100%;min-height:var(--editor-min-h);padding:var(--editor-p);background-color:var(--editor-code-bg);color:var(--base-12);font:var(--code-20);border:none;resize:vertical;outline:none;font-family:monospace;line-height:1.5}sh-editor .sh-editor-footer{display:flex;align-items:center;padding:.375rem .75rem;background-color:var(--editor-footer-bg);border-top:1px solid var(--editor-border-color);font:var(--paragraph-10);color:var(--base-8);border-bottom-left-radius:calc(var(--shape-3) - 1px);border-bottom-right-radius:calc(var(--shape-3) - 1px)}sh-editor .sh-editor-modal{position:absolute;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem}sh-editor .sh-editor-modal-backdrop{position:absolute;inset:0;background-color:rgb(from var(--base-1) r g b/40%);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}sh-editor .sh-editor-modal-content{position:relative;z-index:101;width:100%;max-width:22.5rem;padding:1.25rem;background-color:var(--base-1);border:var(--border-10);border-color:var(--base-4);border-radius:var(--shape-3);box-shadow:var(--box-shadow-40)}sh-editor .sh-editor-modal-content h4{margin-top:0;margin-bottom:.75rem;font:var(--title-10B);color:var(--base-12)}sh-editor .sh-editor-input{width:100%;padding:.5rem .75rem;background-color:var(--base-2);border:var(--border-10);border-color:var(--base-4);border-radius:var(--shape-2);color:var(--base-12);font:var(--paragraph-20);outline:none;margin-bottom:1rem;transition:border-color .15s ease}sh-editor .sh-editor-input:focus{border-color:var(--primary-8)}sh-editor .sh-editor-modal-actions{display:flex;justify-content:flex-end;gap:.5rem}sh-editor .sh-editor-modal-btn{padding:.375rem .75rem;border-radius:var(--shape-2);font:var(--paragraph-20);cursor:pointer;border:none;transition:all .15s ease}sh-editor .sh-editor-modal-btn.cancel{background-color:transparent;color:var(--base-11)}sh-editor .sh-editor-modal-btn.cancel:hover{background-color:var(--base-3)}sh-editor .sh-editor-modal-btn.confirm{background-color:var(--primary-9);color:var(--primary-1)}sh-editor .sh-editor-modal-btn.confirm:hover{background-color:var(--primary-10)}sh-editor .sh-editor-img-toolbar{position:absolute;z-index:50;display:flex;align-items:center;gap:.25rem;padding:.25rem .375rem;background-color:rgb(from var(--base-1) r g b/85%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:var(--border-10);border-color:var(--base-4);border-radius:var(--shape-2);box-shadow:var(--box-shadow-20);pointer-events:auto;transition:opacity .2s ease,transform .2s ease}sh-editor .sh-editor-img-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;padding:.25rem .5rem;background:transparent;border:none;border-radius:var(--shape-1);color:var(--base-11);cursor:pointer;font:var(--paragraph-10);font-weight:500;transition:all .15s ease}sh-editor .sh-editor-img-toolbar-btn:hover{background-color:var(--editor-btn-hover);color:var(--base-12)}sh-editor .sh-editor-img-toolbar-btn.active{background-color:var(--editor-btn-active-bg);color:var(--editor-btn-active-c)}sh-editor .sh-editor-img-toolbar-btn.danger{color:var(--error-9)}sh-editor .sh-editor-img-toolbar-btn.danger:hover{background-color:var(--error-3);color:var(--error-11)}sh-editor .sh-editor-img-toolbar-divider{width:1px;height:1rem;background-color:var(--editor-toolbar-border);margin:0 .125rem}sh-editor .sh-editor-upload-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.625rem 1rem;background-color:var(--base-2);border:1px dashed var(--editor-border-color);border-radius:var(--shape-2);color:var(--base-11);font:var(--paragraph-20);cursor:pointer;transition:all .15s ease;margin-bottom:.75rem}sh-editor .sh-editor-upload-btn:hover{background-color:var(--base-3);border-color:var(--primary-7);color:var(--base-12)}sh-editor .sh-editor-upload-btn sh-icon{font-size:1.125rem}sh-editor .sh-editor-modal-divider{display:flex;align-items:center;text-align:center;color:var(--base-8);font:var(--paragraph-10);margin-bottom:.75rem;width:100%}sh-editor .sh-editor-modal-divider:before,sh-editor .sh-editor-modal-divider:after{content:\"\";flex:1;border-bottom:1px solid var(--editor-border-color)}sh-editor .sh-editor-modal-divider:not(:empty):before{margin-right:.5rem}sh-editor .sh-editor-modal-divider:not(:empty):after{margin-left:.5rem}sh-editor .sh-editor-dropdown{position:relative;display:inline-block}sh-editor .sh-editor-dropdown-trigger{display:inline-flex;align-items:center;gap:.375rem;height:1.75rem;padding:0 .5rem;background:transparent;border:none;border-radius:var(--shape-1);color:var(--base-11);cursor:pointer;font:var(--paragraph-20);font-weight:600;transition:all .15s ease;outline:none}sh-editor .sh-editor-dropdown-trigger:hover{background-color:var(--editor-btn-hover);color:var(--base-12)}sh-editor .sh-editor-dropdown-trigger:focus{outline:2px solid var(--primary-8)}sh-editor .sh-editor-dropdown-label{white-space:nowrap}sh-editor .sh-editor-slash-item{display:flex;align-items:center;gap:.625rem;width:100%;padding:.375rem .625rem;background:transparent;border:none;border-radius:var(--shape-2);text-align:left;cursor:pointer;transition:all .1s ease;outline:none}sh-editor .sh-editor-slash-item.active,sh-editor .sh-editor-slash-item:hover{background-color:var(--editor-btn-hover)}sh-editor .sh-editor-slash-item.active .sh-editor-slash-item-icon,sh-editor .sh-editor-slash-item:hover .sh-editor-slash-item-icon{background-color:var(--editor-btn-active-bg);color:var(--editor-btn-active-c)}sh-editor .sh-editor-slash-item .sh-editor-slash-item-icon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:var(--shape-1);background-color:var(--base-3);color:var(--base-11);font-size:1rem;transition:all .15s ease;flex-shrink:0}sh-editor .sh-editor-slash-item .sh-editor-slash-item-content{display:flex;flex-direction:column;overflow:hidden}sh-editor .sh-editor-slash-item .sh-editor-slash-item-label{font:var(--paragraph-20);font-weight:600;color:var(--base-12);line-height:1.2}sh-editor .sh-editor-slash-item .sh-editor-slash-item-desc{font:var(--paragraph-10);color:var(--base-8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.125rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editorRef: [{ type: i0.ViewChild, args: ['editorRef', { isSignal: true }] }], codeEditorRef: [{ type: i0.ViewChild, args: ['codeEditorRef', { isSignal: true }] }], uploadBtn: [{ type: i0.ViewChild, args: ['uploadBtn', { isSignal: true }] }], imageInput: [{ type: i0.ViewChild, args: ['imageInput', { isSignal: true }] }], linkInput: [{ type: i0.ViewChild, args: ['linkInput', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], customCommands: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCommands", required: false }] }], slashCommands: [{ type: i0.Input, args: [{ isSignal: true, alias: "slashCommands", required: false }] }], showFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFormats", required: false }] }], showBlocks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBlocks", required: false }] }], showLists: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLists", required: false }] }], showAlignments: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAlignments", required: false }] }], showInsertions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInsertions", required: false }] }], showHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHistory", required: false }] }], customUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "customUpload", required: false }] }], imageUploadEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUploadEnabled", required: false }] }], imageUpload: [{ type: i0.Output, args: ["imageUpload"] }], onSelectionChange: [{
+                type: HostListener,
+                args: ['document:selectionchange']
+            }], onComponentFocusIn: [{
+                type: HostListener,
+                args: ['focusin', ['$event']]
+            }], onComponentClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onKeyUp: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }], onComponentScroll: [{
+                type: HostListener,
+                args: ['scroll', ['$event']]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }], onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }] } });
+function getNodePath(parent, node) {
+    const path = [];
+    let current = node;
+    while (current && current !== parent) {
+        const parentNode = current.parentNode;
+        if (!parentNode)
+            break;
+        const siblingIndex = Array.prototype.indexOf.call(parentNode.childNodes, current);
+        if (siblingIndex === -1)
+            break;
+        path.unshift(siblingIndex);
+        current = parentNode;
+    }
+    return path;
+}
+function getNodeByPath(parent, path) {
+    let current = parent;
+    for (const index of path) {
+        if (current.childNodes[index]) {
+            current = current.childNodes[index];
+        }
+        else {
+            break;
+        }
+    }
+    return current;
+}
+function isNodeWrappedInTag(node, tag, limit) {
+    const tagName = tag.toUpperCase();
+    let current = node.parentNode;
+    while (current && current !== limit) {
+        if (current.nodeType === Node.ELEMENT_NODE && current.tagName === tagName) {
+            return true;
+        }
+        current = current.parentNode;
+    }
+    return false;
+}
+function getTextNodesInRange(range) {
+    const textNodes = [];
+    const commonAncestor = range.commonAncestorContainer;
+    if (commonAncestor.nodeType === Node.TEXT_NODE) {
+        textNodes.push(commonAncestor);
+        return textNodes;
+    }
+    const walker = commonAncestor.ownerDocument.createTreeWalker(commonAncestor, NodeFilter.SHOW_TEXT);
+    let node = walker.nextNode();
+    while (node) {
+        if (range.intersectsNode(node)) {
+            textNodes.push(node);
+        }
+        node = walker.nextNode();
+    }
+    return textNodes;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ShipEditor };
+//# sourceMappingURL=ship-ui-core-ship-editor.mjs.map