@flogeez/angular-tiptap-editor 3.1.5 → 3.2.1

package/fesm2022/flogeez-angular-tiptap-editor.mjs

@@ -1660,6 +1660,9 @@ class AteImageService {
             this.forceEditorUpdate();
             // Final insertion
             insertionStrategy(editor, result);
+            if (this.onImageUploadedCallback) {
+                this.onImageUploadedCallback(result);
+            }
             this.resetUploadState();
         }
         catch (error) {
@@ -2219,9 +2222,7 @@ function convertNode(node, ctx) {
     if (tag === "pre") {
         // Extract language from code class e.g. "language-typescript"
         const codeEl = el.querySelector("code");
-        const lang = codeEl
-            ? (codeEl.className.match(/language-(\S+)/) || [])[1] || ""
-            : "";
+        const lang = codeEl ? (codeEl.className.match(/language-(\S+)/) || [])[1] || "" : "";
         const code = codeEl ? codeEl.textContent || "" : el.textContent || "";
         return `\n\n\`\`\`${lang}\n${code}\n\`\`\`\n\n`;
     }
@@ -2492,6 +2493,9 @@ class AteEditorCommandsService {
     setToolbarInteracting(value) {
         this._isToolbarInteracting.set(value);
     }
+    set onImageUploaded(callback) {
+        this.imageService.onImageUploadedCallback = callback || undefined;
+    }
     set uploadHandler(handler) {
         this.imageService.uploadHandler = handler;
     }
@@ -6360,6 +6364,416 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
   `, styles: [".ate-edit-toggle-container{position:absolute;margin-top:16px;right:16px;z-index:50}\n"] }]
         }] });
 
+/**
+ * A wrapper class that holds a reference to a registered editor component.
+ * It provides direct, type-safe facade methods to interact with the editor
+ * and execute formatting/utility commands without needing to manage the raw
+ * TipTap editor instance directly.
+ */
+class AteEditorRef {
+    constructor(id, getEditorInstance, commandsService) {
+        this.id = id;
+        this.getEditorInstance = getEditorInstance;
+        this.commandsService = commandsService;
+    }
+    /** Get the raw TipTap Editor instance. */
+    get editor() {
+        return this.getEditorInstance();
+    }
+    /** Get the current editor state snapshot. */
+    get state() {
+        return this.commandsService.editorState();
+    }
+    /** Get the reactive editor state as a Signal. */
+    get stateSignal() {
+        return this.commandsService.editorState;
+    }
+    /** Execute a generic command by name. */
+    execute(command, ...args) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.execute(editor, command, ...args);
+        }
+    }
+    // ============================================
+    // Facade Formatting Commands
+    // ============================================
+    toggleBold() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleBold(editor);
+        }
+    }
+    toggleItalic() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleItalic(editor);
+        }
+    }
+    toggleStrike() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleStrike(editor);
+        }
+    }
+    toggleCode() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleCode(editor);
+        }
+    }
+    toggleCodeBlock() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleCodeBlock(editor);
+        }
+    }
+    toggleUnderline() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleUnderline(editor);
+        }
+    }
+    toggleSuperscript() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleSuperscript(editor);
+        }
+    }
+    toggleSubscript() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleSubscript(editor);
+        }
+    }
+    toggleHeading(level) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleHeading(editor, level);
+        }
+    }
+    toggleBulletList() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleBulletList(editor);
+        }
+    }
+    toggleOrderedList() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleOrderedList(editor);
+        }
+    }
+    toggleBlockquote() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleBlockquote(editor);
+        }
+    }
+    setTextAlign(alignment) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.setTextAlign(editor, alignment);
+        }
+    }
+    insertHorizontalRule() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.insertHorizontalRule(editor);
+        }
+    }
+    insertImage(options) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.insertImage(editor, options);
+        }
+    }
+    uploadImage(file, options) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.uploadImage(editor, file, options);
+        }
+    }
+    toggleHighlight(color) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleHighlight(editor, color);
+        }
+    }
+    undo() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.undo(editor);
+        }
+    }
+    redo() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.redo(editor);
+        }
+    }
+    // ============================================
+    // Table Commands
+    // ============================================
+    insertTable(rows, cols) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.insertTable(editor, rows, cols);
+        }
+    }
+    addColumnBefore() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.addColumnBefore(editor);
+        }
+    }
+    addColumnAfter() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.addColumnAfter(editor);
+        }
+    }
+    deleteColumn() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.deleteColumn(editor);
+        }
+    }
+    addRowBefore() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.addRowBefore(editor);
+        }
+    }
+    addRowAfter() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.addRowAfter(editor);
+        }
+    }
+    deleteRow() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.deleteRow(editor);
+        }
+    }
+    deleteTable() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.deleteTable(editor);
+        }
+    }
+    mergeCells() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.mergeCells(editor);
+        }
+    }
+    splitCell() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.splitCell(editor);
+        }
+    }
+    toggleHeaderColumn() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleHeaderColumn(editor);
+        }
+    }
+    toggleHeaderRow() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.toggleHeaderRow(editor);
+        }
+    }
+    // ============================================
+    // Color Picker & Link Commands
+    // ============================================
+    applyColor(color, selectionOnly, closeMenu) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.execute(editor, "applyColor", color, selectionOnly, closeMenu);
+        }
+    }
+    applyHighlight(color, selectionOnly, closeMenu) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.execute(editor, "applyHighlight", color, selectionOnly, closeMenu);
+        }
+    }
+    unsetColor(selectionOnly) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.execute(editor, "unsetColor", selectionOnly);
+        }
+    }
+    unsetHighlight(selectionOnly) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.execute(editor, "unsetHighlight", selectionOnly);
+        }
+    }
+    toggleLink(event) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.execute(editor, "toggleLink", event);
+        }
+    }
+    unsetLink() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.execute(editor, "unsetLink");
+        }
+    }
+    toggleColorPicker(mode, event) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.execute(editor, "toggleColorPicker", mode, event);
+        }
+    }
+    // ============================================
+    // General Controls & Content
+    // ============================================
+    clearContent() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.clearContent(editor);
+        }
+    }
+    setContent(content, emitUpdate = true) {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.setContent(editor, content, emitUpdate);
+        }
+    }
+    getContent(format) {
+        const editor = this.editor;
+        return editor ? this.commandsService.getContent(editor, format) : "";
+    }
+    getHTML() {
+        const editor = this.editor;
+        return editor ? editor.getHTML() : "";
+    }
+    getJSON() {
+        const editor = this.editor;
+        return editor ? editor.getJSON() : undefined;
+    }
+    getText() {
+        const editor = this.editor;
+        return editor ? editor.getText() : "";
+    }
+    async exportAs(format, method, options) {
+        const editor = this.editor;
+        if (editor) {
+            await this.commandsService.exportAs(editor, format, method, options);
+        }
+    }
+    focus() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.focus(editor);
+        }
+    }
+    blur() {
+        const editor = this.editor;
+        if (editor) {
+            this.commandsService.blur(editor);
+        }
+    }
+}
+
+/**
+ * A root-level registry service to register, unregister, and manage active editor instances.
+ * This service is provided in 'root' and can be injected anywhere in the application.
+ */
+class AteEditorRegistry {
+    constructor() {
+        // Map of registered editors
+        this._editors = signal(new Map());
+        this.editors = this._editors.asReadonly();
+        // Active (last focused or last registered) editor ID
+        this._activeEditorId = signal(null);
+        this.activeEditorId = this._activeEditorId.asReadonly();
+        // List of all active editor IDs reactively
+        this.editorIds = computed(() => Array.from(this._editors().keys()));
+        // Active AteEditorRef reactively
+        this.activeEditor = computed(() => {
+            const activeId = this._activeEditorId();
+            if (!activeId) {
+                return null;
+            }
+            return this._editors().get(activeId) || null;
+        });
+    }
+    static { this.counter = 0; }
+    /**
+     * Register an editor instance.
+     * Returns the final registered ID.
+     */
+    register(id, getEditor, commandsService) {
+        const finalId = id || `ate-editor-${++AteEditorRegistry.counter}`;
+        const editorRef = new AteEditorRef(finalId, getEditor, commandsService);
+        this._editors.update(map => {
+            const newMap = new Map(map);
+            newMap.set(finalId, editorRef);
+            return newMap;
+        });
+        // If there is no active editor, make this one active
+        if (!this._activeEditorId()) {
+            this._activeEditorId.set(finalId);
+        }
+        return finalId;
+    }
+    /**
+     * Unregister an editor instance by ID.
+     */
+    unregister(id) {
+        this._editors.update(map => {
+            const newMap = new Map(map);
+            newMap.delete(id);
+            return newMap;
+        });
+        // If the active editor is the one being unregistered, find a fallback
+        if (this._activeEditorId() === id) {
+            const remainingIds = this.editorIds();
+            if (remainingIds.length > 0) {
+                // Set active to the last registered one remaining
+                this._activeEditorId.set(remainingIds[remainingIds.length - 1]);
+            }
+            else {
+                this._activeEditorId.set(null);
+            }
+        }
+    }
+    /**
+     * Mark an editor as active (usually on focus).
+     */
+    setActive(id) {
+        if (this._editors().has(id)) {
+            this._activeEditorId.set(id);
+        }
+    }
+    /**
+     * Retrieve an editor reference by ID, or the active editor if ID is not specified.
+     */
+    get(id) {
+        if (id) {
+            return this._editors().get(id);
+        }
+        const activeId = this._activeEditorId();
+        return activeId ? this._editors().get(activeId) : undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditorRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditorRegistry, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditorRegistry, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }] });
+
 /**
  * Noop Value Accessor Directive
  * @link https://medium.com/netanelbasal/forwarding-form-controls-to-custom-control-components-in-angular-701e8406cc55
@@ -7351,6 +7765,11 @@ class AngularTiptapEditorComponent {
          * ```
          */
         this.imageUploadHandler = input(undefined);
+        /**
+         * Optional unique identifier for the editor instance in the registry.
+         * If not specified, a unique ID is automatically generated.
+         */
+        this.editorId = input(undefined);
         // Nouveaux outputs
         this.contentChange = output();
         this.editorCreated = output();
@@ -7358,6 +7777,7 @@ class AngularTiptapEditorComponent {
         this.editorFocus = output();
         this.editorBlur = output();
         this.editableChange = output();
+        this.imageUploaded = output();
         // ViewChild with signal
         this.editorElement = viewChild.required("editorElement");
         // Private signals for internal state
@@ -7543,6 +7963,9 @@ class AngularTiptapEditorComponent {
         this.editorCommandsService = inject(AteEditorCommandsService);
         // Access editor state via service
         this.editorState = this.editorCommandsService.editorState;
+        this.editorRegistry = inject(AteEditorRegistry);
+        this._registeredId = signal(null);
+        this.registeredId = this._registeredId.asReadonly();
         this.injector = inject(Injector);
         this.globalConfig = inject(ATE_GLOBAL_CONFIG, { optional: true });
         /**
@@ -7639,6 +8062,9 @@ class AngularTiptapEditorComponent {
                 }
             });
         }, { allowSignalWrites: true });
+        this.editorCommandsService.onImageUploaded = result => {
+            this.imageUploaded.emit(result);
+        };
     }
     ngAfterViewInit() {
         // La vue est déjà complètement initialisée dans ngAfterViewInit
@@ -7653,6 +8079,11 @@ class AngularTiptapEditorComponent {
             currentEditor.destroy();
         }
         this._editorFullyInitialized.set(false);
+        // Unregister from the global registry
+        const id = this.registeredId();
+        if (id) {
+            this.editorRegistry.unregister(id);
+        }
     }
     initEditor() {
         const extensions = [
@@ -7825,6 +8256,10 @@ class AngularTiptapEditorComponent {
                 }, 100);
             },
             onFocus: ({ editor, event }) => {
+                const id = this.registeredId();
+                if (id) {
+                    this.editorRegistry.setActive(id);
+                }
                 this.editorFocus.emit({ editor, event });
             },
             onBlur: ({ editor, event }) => {
@@ -7837,6 +8272,9 @@ class AngularTiptapEditorComponent {
         });
         // Stocker la référence de l'éditeur immédiatement
         this._editor.set(newEditor);
+        // Register editor in the global registry
+        const registeredId = this.editorRegistry.register(this.editorId(), () => this.editor(), this.editorCommandsService);
+        this._registeredId.set(registeredId);
     }
     toggleEditMode(event) {
         event.preventDefault();
@@ -7963,7 +8401,13 @@ class AngularTiptapEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AngularTiptapEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fillContainer: { classPropertyName: "fillContainer", publicName: "fillContainer", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, showWordCount: { classPropertyName: "showWordCount", publicName: "showWordCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommands: { classPropertyName: "slashCommands", publicName: "slashCommands", isSignal: true, isRequired: false, transformFunction: null }, customSlashCommands: { classPropertyName: "customSlashCommands", publicName: "customSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, blockControls: { classPropertyName: "blockControls", publicName: "blockControls", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, seamless: { classPropertyName: "seamless", publicName: "seamless", isSignal: true, isRequired: false, transformFunction: null }, floatingToolbar: { classPropertyName: "floatingToolbar", publicName: "floatingToolbar", isSignal: true, isRequired: false, transformFunction: null }, showEditToggle: { classPropertyName: "showEditToggle", publicName: "showEditToggle", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, tiptapExtensions: { classPropertyName: "tiptapExtensions", publicName: "tiptapExtensions", isSignal: true, isRequired: false, transformFunction: null }, tiptapOptions: { classPropertyName: "tiptapOptions", publicName: "tiptapOptions", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, showTableBubbleMenu: { classPropertyName: "showTableBubbleMenu", publicName: "showTableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, tableBubbleMenu: { classPropertyName: "tableBubbleMenu", publicName: "tableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showCellBubbleMenu: { classPropertyName: "showCellBubbleMenu", publicName: "showCellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, cellBubbleMenu: { classPropertyName: "cellBubbleMenu", publicName: "cellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, stateCalculators: { classPropertyName: "stateCalculators", publicName: "stateCalculators", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, imageUploadHandler: { classPropertyName: "imageUploadHandler", publicName: "imageUploadHandler", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur", editableChange: "editableChange" }, host: { properties: { "class.fill-container": "finalFillContainer()", "class.floating-toolbar": "finalFloatingToolbar()", "class.is-readonly": "!finalEditable() && !mergedDisabled()", "class.is-disabled": "mergedDisabled()", "style.--ate-border-width": "finalSeamless() || mergedDisabled() ? '0' : null", "style.--ate-background": "finalSeamless() ? 'transparent' : (mergedDisabled() ? 'var(--ate-surface-tertiary)' : null)", "style.--ate-toolbar-border-color": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-background": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-border-color": "finalSeamless() ? 'transparent' : null", "class.dark": "config().theme === 'dark'", "class.ate-blocks-inside": "finalBlockControls() === 'inside'", "class.ate-blocks-outside": "finalBlockControls() === 'outside'", "attr.data-theme": "config().theme" } }, providers: [AteEditorCommandsService, AteImageService, AteColorPickerService, AteLinkService, AteExportService], viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: AteNoopValueAccessorDirective }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AngularTiptapEditorComponent, isStandalone: true, selector: "angular-tiptap-editor", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, fillContainer: { classPropertyName: "fillContainer", publicName: "fillContainer", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showCharacterCount: { classPropertyName: "showCharacterCount", publicName: "showCharacterCount", isSignal: true, isRequired: false, transformFunction: null }, showWordCount: { classPropertyName: "showWordCount", publicName: "showWordCount", isSignal: true, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: true, isRequired: false, transformFunction: null }, enableOfficePaste: { classPropertyName: "enableOfficePaste", publicName: "enableOfficePaste", isSignal: true, isRequired: false, transformFunction: null }, enableSlashCommands: { classPropertyName: "enableSlashCommands", publicName: "enableSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, slashCommands: { classPropertyName: "slashCommands", publicName: "slashCommands", isSignal: true, isRequired: false, transformFunction: null }, customSlashCommands: { classPropertyName: "customSlashCommands", publicName: "customSlashCommands", isSignal: true, isRequired: false, transformFunction: null }, blockControls: { classPropertyName: "blockControls", publicName: "blockControls", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, seamless: { classPropertyName: "seamless", publicName: "seamless", isSignal: true, isRequired: false, transformFunction: null }, floatingToolbar: { classPropertyName: "floatingToolbar", publicName: "floatingToolbar", isSignal: true, isRequired: false, transformFunction: null }, showEditToggle: { classPropertyName: "showEditToggle", publicName: "showEditToggle", isSignal: true, isRequired: false, transformFunction: null }, spellcheck: { classPropertyName: "spellcheck", publicName: "spellcheck", isSignal: true, isRequired: false, transformFunction: null }, tiptapExtensions: { classPropertyName: "tiptapExtensions", publicName: "tiptapExtensions", isSignal: true, isRequired: false, transformFunction: null }, tiptapOptions: { classPropertyName: "tiptapOptions", publicName: "tiptapOptions", isSignal: true, isRequired: false, transformFunction: null }, showBubbleMenu: { classPropertyName: "showBubbleMenu", publicName: "showBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showImageBubbleMenu: { classPropertyName: "showImageBubbleMenu", publicName: "showImageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, imageBubbleMenu: { classPropertyName: "imageBubbleMenu", publicName: "imageBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, showTableBubbleMenu: { classPropertyName: "showTableBubbleMenu", publicName: "showTableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, tableBubbleMenu: { classPropertyName: "tableBubbleMenu", publicName: "tableBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, showCellBubbleMenu: { classPropertyName: "showCellBubbleMenu", publicName: "showCellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, cellBubbleMenu: { classPropertyName: "cellBubbleMenu", publicName: "cellBubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, stateCalculators: { classPropertyName: "stateCalculators", publicName: "stateCalculators", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, imageUploadHandler: { classPropertyName: "imageUploadHandler", publicName: "imageUploadHandler", isSignal: true, isRequired: false, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChange: "contentChange", editorCreated: "editorCreated", editorUpdate: "editorUpdate", editorFocus: "editorFocus", editorBlur: "editorBlur", editableChange: "editableChange", imageUploaded: "imageUploaded" }, host: { properties: { "class.fill-container": "finalFillContainer()", "class.floating-toolbar": "finalFloatingToolbar()", "class.is-readonly": "!finalEditable() && !mergedDisabled()", "class.is-disabled": "mergedDisabled()", "style.--ate-border-width": "finalSeamless() || mergedDisabled() ? '0' : null", "style.--ate-background": "finalSeamless() ? 'transparent' : (mergedDisabled() ? 'var(--ate-surface-tertiary)' : null)", "style.--ate-toolbar-border-color": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-background": "finalSeamless() ? 'transparent' : null", "style.--ate-counter-border-color": "finalSeamless() ? 'transparent' : null", "class.dark": "config().theme === 'dark'", "class.ate-blocks-inside": "finalBlockControls() === 'inside'", "class.ate-blocks-outside": "finalBlockControls() === 'outside'", "attr.data-theme": "config().theme" } }, providers: [
+            AteEditorCommandsService,
+            AteImageService,
+            AteColorPickerService,
+            AteLinkService,
+            AteExportService,
+        ], viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: AteNoopValueAccessorDirective }], ngImport: i0, template: `
     <div class="ate-editor">
       <!-- Toolbar -->
       @if (finalEditable() && !mergedDisabled() && finalShowToolbar() && editor()) {
@@ -8118,7 +8562,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         AteColorBubbleMenuComponent,
                         AteEditToggleComponent,
                         AteBlockControlsComponent,
-                    ], providers: [AteEditorCommandsService, AteImageService, AteColorPickerService, AteLinkService, AteExportService], template: `
+                    ], providers: [
+                        AteEditorCommandsService,
+                        AteImageService,
+                        AteColorPickerService,
+                        AteLinkService,
+                        AteExportService,
+                    ], template: `
     <div class="ate-editor">
       <!-- Toolbar -->
       @if (finalEditable() && !mergedDisabled() && finalShowToolbar() && editor()) {
@@ -8326,5 +8776,5 @@ const ATE_TOOLBAR_KEYS = [
  * Generated bundle index. Do not edit.
  */
 
-export { ATE_BUBBLE_MENU_KEYS, ATE_CELL_BUBBLE_MENU_KEYS, ATE_DEFAULT_BUBBLE_MENU_CONFIG, ATE_DEFAULT_CELL_MENU_CONFIG, ATE_DEFAULT_CONFIG, ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ATE_DEFAULT_IMAGE_UPLOAD_CONFIG, ATE_DEFAULT_SLASH_COMMANDS_CONFIG, ATE_DEFAULT_TABLE_MENU_CONFIG, ATE_DEFAULT_TOOLBAR_CONFIG, ATE_GLOBAL_CONFIG, ATE_IMAGE_BUBBLE_MENU_KEYS, ATE_INITIAL_EDITOR_STATE, ATE_SLASH_COMMAND_KEYS, ATE_TABLE_BUBBLE_MENU_KEYS, ATE_TOOLBAR_KEYS, AngularTiptapEditorComponent, AteAngularNodeView, AteColorPickerService, AteDiscoveryCalculator, AteEditorCommandsService, AteExportService, AteI18nService, AteImageCalculator, AteImageService, AteLinkService, AteMarksCalculator, AteNodeViewRenderer, AteNoopValueAccessorDirective, AteSelectionCalculator, AteStructureCalculator, AteTableCalculator, AteTooltipDirective, createAngularComponentExtension, createDefaultSlashCommands, filterSlashCommands, provideAteEditor, registerAngularComponent };
+export { ATE_BUBBLE_MENU_KEYS, ATE_CELL_BUBBLE_MENU_KEYS, ATE_DEFAULT_BUBBLE_MENU_CONFIG, ATE_DEFAULT_CELL_MENU_CONFIG, ATE_DEFAULT_CONFIG, ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ATE_DEFAULT_IMAGE_UPLOAD_CONFIG, ATE_DEFAULT_SLASH_COMMANDS_CONFIG, ATE_DEFAULT_TABLE_MENU_CONFIG, ATE_DEFAULT_TOOLBAR_CONFIG, ATE_GLOBAL_CONFIG, ATE_IMAGE_BUBBLE_MENU_KEYS, ATE_INITIAL_EDITOR_STATE, ATE_SLASH_COMMAND_KEYS, ATE_TABLE_BUBBLE_MENU_KEYS, ATE_TOOLBAR_KEYS, AngularTiptapEditorComponent, AteAngularNodeView, AteColorPickerService, AteDiscoveryCalculator, AteEditorCommandsService, AteEditorRef, AteEditorRegistry, AteExportService, AteI18nService, AteImageCalculator, AteImageService, AteLinkService, AteMarksCalculator, AteNodeViewRenderer, AteNoopValueAccessorDirective, AteSelectionCalculator, AteStructureCalculator, AteTableCalculator, AteTooltipDirective, createAngularComponentExtension, createDefaultSlashCommands, filterSlashCommands, provideAteEditor, registerAngularComponent };
 //# sourceMappingURL=flogeez-angular-tiptap-editor.mjs.map