@ship-ui/core 0.22.15 → 0.22.17

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

@@ -7,7 +7,6 @@ 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),
@@ -29,11 +28,8 @@ class ShipEditor {
     #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() {
@@ -42,7 +38,6 @@ class ShipEditor {
         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 */
@@ -53,7 +48,6 @@ class ShipEditor {
         ...(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 */
@@ -70,7 +64,6 @@ class ShipEditor {
         ...(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 */
@@ -183,7 +176,6 @@ class ShipEditor {
                 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 */
@@ -196,13 +188,11 @@ class ShipEditor {
         ...(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 */
@@ -213,7 +203,6 @@ class ShipEditor {
         ...(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 */
@@ -226,7 +215,6 @@ class ShipEditor {
         ...(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 */
@@ -243,28 +231,22 @@ class ShipEditor {
         ...(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();
@@ -273,7 +255,6 @@ class ShipEditor {
                 }
             }
         });
-        // Auto-focus image dialog elements when opened based on configuration
         effect(() => {
             if (this.showImageModal()) {
                 const uploadBtn = this.uploadBtn();
@@ -290,12 +271,9 @@ class ShipEditor {
                 }
             }
         });
-        // 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;
@@ -304,14 +282,12 @@ class ShipEditor {
                 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;
@@ -322,7 +298,6 @@ class ShipEditor {
                 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;
@@ -333,7 +308,6 @@ class ShipEditor {
                 else if (fmt === 'json') {
                     newValue = this.#htmlToJSON(html);
                 }
-                // 3. Update the model and DOM
                 this.#isWriting = true;
                 this.value.set(newValue);
                 this.#lastValueWrittenFromDOM = newValue;
@@ -359,7 +333,6 @@ class ShipEditor {
                 this.#isWriting = false;
             }
         });
-        // Recalculate metrics whenever raw content updates
         effect(() => {
             const val = this.value();
             const fmt = this.format();
@@ -384,7 +357,6 @@ class ShipEditor {
             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();
@@ -398,7 +370,6 @@ class ShipEditor {
         });
     }
     ngOnInit() {
-        // Empty hook
     }
     ngAfterViewInit() {
         this.#syncModelToDOM(this.value());
@@ -409,7 +380,6 @@ class ShipEditor {
             clearTimeout(this.#typingTimeout);
         }
     }
-    // --- CONTROL VALUE ACCESSOR ---
     writeValue(obj) {
         this.#isWriting = true;
         this.value.set(obj);
@@ -423,9 +393,7 @@ class ShipEditor {
         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 === '') {
@@ -446,7 +414,6 @@ class ShipEditor {
             html = '<p><br></p>';
         }
         const isNewValue = val !== this.#lastValueWrittenFromDOM;
-        // Set code editor value
         if (this.format() === 'markdown' && typeof val === 'string') {
             this.rawCodeValue.set(val);
         }
@@ -456,11 +423,9 @@ class ShipEditor {
         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) {
@@ -477,13 +442,11 @@ class ShipEditor {
         }
         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 = '';
         }
@@ -510,11 +473,9 @@ class ShipEditor {
         }
         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) {
@@ -568,13 +529,11 @@ class ShipEditor {
                 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;
@@ -764,7 +723,6 @@ class ShipEditor {
                 selection.addRange(newRange);
             }
             catch (e) {
-                // Fallback
             }
         }
         this.#updateValueFromDOM();