@flogeez/angular-tiptap-editor 3.1.4 → 3.2.0

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

@@ -1090,6 +1090,19 @@ const ENGLISH_TRANSLATIONS = {
         error: "Error",
         success: "Success",
     },
+    export: {
+        export: "Export",
+        html: "HTML",
+        markdown: "Markdown",
+        text: "Plain Text",
+        copyHtml: "Copy as HTML",
+        copyMarkdown: "Copy as Markdown",
+        copyText: "Copy as plain text",
+        downloadHtml: "Download .html",
+        downloadMarkdown: "Download .md",
+        downloadText: "Download .txt",
+        copiedSuccess: "Copied to clipboard!",
+    },
 };
 const FRENCH_TRANSLATIONS = {
     toolbar: {
@@ -1263,6 +1276,19 @@ const FRENCH_TRANSLATIONS = {
         error: "Erreur",
         success: "Succès",
     },
+    export: {
+        export: "Exporter",
+        html: "HTML",
+        markdown: "Markdown",
+        text: "Texte brut",
+        copyHtml: "Copier en HTML",
+        copyMarkdown: "Copier en Markdown",
+        copyText: "Copier en texte brut",
+        downloadHtml: "Télécharger .html",
+        downloadMarkdown: "Télécharger .md",
+        downloadText: "Télécharger .txt",
+        copiedSuccess: "Copié dans le presse-papiers !",
+    },
 };
 class AteI18nService {
     constructor() {
@@ -1285,6 +1311,7 @@ class AteI18nService {
         this.imageUpload = computed(() => this.translations().imageUpload);
         this.editor = computed(() => this.translations().editor);
         this.common = computed(() => this.translations().common);
+        this.export = computed(() => this.translations().export);
         // Automatically detect browser language
         this.detectBrowserLanguage();
     }
@@ -2141,11 +2168,259 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Injectable
         }] });
 
+/**
+ * HTML to Markdown converter utility (no external dependencies).
+ */
+function htmlToMarkdown(html) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, "text/html");
+    const result = convertNode(doc.body, { listDepth: 0, listType: null });
+    // Normalize multiple blank lines to max two
+    return result.replace(/\n{3,}/g, "\n\n").trim();
+}
+function convertNode(node, ctx) {
+    if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent || "";
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+        return "";
+    }
+    const el = node;
+    const tag = el.tagName.toLowerCase();
+    const children = Array.from(el.childNodes);
+    const inner = (overrideCtx) => children.map(c => convertNode(c, { ...ctx, ...overrideCtx })).join("");
+    // ── Block-level elements ──────────────────────────────────
+    if (tag === "br") {
+        return "\n";
+    }
+    if (tag === "hr") {
+        return "\n\n---\n\n";
+    }
+    if (/^h[1-6]$/.test(tag)) {
+        const level = parseInt(tag[1], 10);
+        const prefix = "#".repeat(level);
+        return `\n\n${prefix} ${inner().trim()}\n\n`;
+    }
+    if (tag === "p") {
+        const content = inner().trim();
+        if (!content) {
+            return "";
+        }
+        return `\n\n${content}\n\n`;
+    }
+    if (tag === "blockquote") {
+        const content = inner()
+            .trim()
+            .split("\n")
+            .map(line => `> ${line}`)
+            .join("\n");
+        return `\n\n${content}\n\n`;
+    }
+    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 code = codeEl ? codeEl.textContent || "" : el.textContent || "";
+        return `\n\n\`\`\`${lang}\n${code}\n\`\`\`\n\n`;
+    }
+    if (tag === "ul" || tag === "ol") {
+        const isTaskList = el.getAttribute("data-type") === "taskList";
+        const items = children
+            .filter(c => c.tagName?.toLowerCase() === "li")
+            .map((li, idx) => convertListItem(li, {
+            listDepth: ctx.listDepth + 1,
+            listType: tag === "ul" ? "ul" : "ol",
+            orderedIndex: idx + 1,
+            isTaskList,
+        }))
+            .join("\n");
+        const block = `\n\n${items}\n\n`;
+        // Only add surrounding newlines for root-level lists
+        return ctx.listDepth === 0 ? block : `\n${items}`;
+    }
+    if (tag === "table") {
+        return convertTable(el);
+    }
+    // ── Inline elements ──────────────────────────────────────
+    if (tag === "strong" || tag === "b") {
+        const content = inner();
+        return content ? `**${content}**` : "";
+    }
+    if (tag === "em" || tag === "i") {
+        const content = inner();
+        return content ? `*${content}*` : "";
+    }
+    if (tag === "s" || tag === "del" || tag === "strike") {
+        const content = inner();
+        return content ? `~~${content}~~` : "";
+    }
+    if (tag === "u") {
+        // No standard Markdown for underline — use HTML passthrough
+        const content = inner();
+        return content ? `<u>${content}</u>` : "";
+    }
+    if (tag === "code") {
+        // Inline code (not inside pre)
+        const content = el.textContent || "";
+        return content ? `\`${content}\`` : "";
+    }
+    if (tag === "a") {
+        const href = el.getAttribute("href") || "";
+        const content = inner().trim();
+        if (!content && !href) {
+            return "";
+        }
+        if (!content) {
+            return href;
+        }
+        return `[${content}](${href})`;
+    }
+    if (tag === "img") {
+        const src = el.getAttribute("src") || "";
+        const alt = el.getAttribute("alt") || "";
+        return `![${alt}](${src})`;
+    }
+    // ── Wrapper / Unknown elements → recurse ─────────────────
+    return inner();
+}
+function convertListItem(li, ctx) {
+    const indent = "  ".repeat(ctx.listDepth - 1);
+    // Task list item
+    if (ctx.isTaskList) {
+        const checked = li.getAttribute("data-checked") === "true";
+        const checkMark = checked ? "[x]" : "[ ]";
+        const content = Array.from(li.childNodes)
+            .map(c => convertNode(c, { listDepth: ctx.listDepth, listType: ctx.listType }))
+            .join("")
+            .trim();
+        return `${indent}- ${checkMark} ${content}`;
+    }
+    // Normal list item
+    const bullet = ctx.listType === "ol" ? `${ctx.orderedIndex}.` : "-";
+    // Check if li contains nested lists
+    const nestedListNodes = Array.from(li.childNodes).filter(c => c.tagName?.toLowerCase() === "ul" ||
+        c.tagName?.toLowerCase() === "ol");
+    const textNodes = Array.from(li.childNodes).filter(c => !["ul", "ol"].includes(c.tagName?.toLowerCase()));
+    const textContent = textNodes
+        .map(c => convertNode(c, { listDepth: ctx.listDepth, listType: ctx.listType }))
+        .join("")
+        .trim();
+    const nestedContent = nestedListNodes
+        .map(c => convertNode(c, { listDepth: ctx.listDepth, listType: ctx.listType }))
+        .join("")
+        .trimEnd();
+    return `${indent}${bullet} ${textContent}${nestedContent}`;
+}
+function convertTable(table) {
+    const rows = Array.from(table.querySelectorAll("tr"));
+    if (rows.length === 0) {
+        return "";
+    }
+    const tableData = rows.map(row => Array.from(row.querySelectorAll("th, td")).map(cell => cell.textContent?.replace(/\n/g, " ").trim() || ""));
+    if (tableData.length === 0) {
+        return "";
+    }
+    const colCount = Math.max(...tableData.map(r => r.length));
+    // Pad rows to same width
+    const normalized = tableData.map(row => {
+        while (row.length < colCount) {
+            row.push("");
+        }
+        return row;
+    });
+    // Calculate column widths
+    const colWidths = Array.from({ length: colCount }, (_, i) => Math.max(...normalized.map(r => (r[i] || "").length), 3));
+    const pad = (str, len) => str.padEnd(len, " ");
+    const separator = colWidths.map(w => "-".repeat(w)).join(" | ");
+    // Build rows
+    const lines = [];
+    normalized.forEach((row, rowIdx) => {
+        const line = row.map((cell, i) => pad(cell, colWidths[i])).join(" | ");
+        lines.push(`| ${line} |`);
+        // Add separator after header row (first row)
+        if (rowIdx === 0) {
+            lines.push(`| ${separator} |`);
+        }
+    });
+    return `\n\n${lines.join("\n")}\n\n`;
+}
+
+class AteExportService {
+    // ============================================================
+    // Public Content Getters
+    // ============================================================
+    /** Returns the editor content as HTML string. */
+    getHtml(editor) {
+        return editor.getHTML();
+    }
+    /** Returns the editor content as plain text. */
+    getText(editor) {
+        return editor.getText();
+    }
+    /** Returns the editor content converted to Markdown. */
+    getMarkdown(editor) {
+        const html = editor.getHTML();
+        return htmlToMarkdown(html);
+    }
+    /** Returns the editor content in the specified format. */
+    getContent(editor, format) {
+        switch (format) {
+            case "html":
+                return this.getHtml(editor);
+            case "markdown":
+                return this.getMarkdown(editor);
+            case "text":
+                return this.getText(editor);
+        }
+    }
+    // ============================================================
+    // Export Methods
+    // ============================================================
+    /** Copies the editor content to the clipboard. */
+    async exportToClipboard(editor, format) {
+        const content = this.getContent(editor, format);
+        await navigator.clipboard.writeText(content);
+    }
+    /** Downloads the editor content as a file. */
+    exportToFile(editor, format, options) {
+        const content = this.getContent(editor, format);
+        const baseName = options?.filename || "document";
+        const extensions = {
+            html: "html",
+            markdown: "md",
+            text: "txt",
+        };
+        const mimeTypes = {
+            html: "text/html;charset=utf-8",
+            markdown: "text/markdown;charset=utf-8",
+            text: "text/plain;charset=utf-8",
+        };
+        const filename = `${baseName}.${extensions[format]}`;
+        const blob = new Blob([content], { type: mimeTypes[format] });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteExportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteExportService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteExportService, decorators: [{
+            type: Injectable
+        }] });
+
 class AteEditorCommandsService {
     constructor() {
         this.imageService = inject(AteImageService);
         this.colorPickerSvc = inject(AteColorPickerService);
         this.linkSvc = inject(AteLinkService);
+        this.exportSvc = inject(AteExportService);
         this._editorState = signal(ATE_INITIAL_EDITOR_STATE, {
             equal: (a, b) => {
                 // 1. Primitive global states
@@ -2353,6 +2628,9 @@ class AteEditorCommandsService {
             case "clearContent":
                 this.clearContent(editor);
                 break;
+            case "exportAs":
+                void this.exportAs(editor, args[0], args[1], args[2]);
+                break;
         }
     }
     // --- Formatting Commands ---
@@ -2545,6 +2823,34 @@ class AteEditorCommandsService {
         }
         editor.commands.clearContent(true);
     }
+    // --- Export Commands ---
+    /**
+     * Returns the editor content in the given format.
+     * @param format 'html' | 'markdown' | 'text'
+     */
+    getContent(editor, format) {
+        if (!editor) {
+            return "";
+        }
+        return this.exportSvc.getContent(editor, format);
+    }
+    /**
+     * Exports the editor content.
+     * @param format  'html' | 'markdown' | 'text'
+     * @param method  'clipboard' | 'download'
+     * @param options Optional filename for download
+     */
+    async exportAs(editor, format, method, options) {
+        if (!editor) {
+            return;
+        }
+        if (method === "clipboard") {
+            await this.exportSvc.exportToClipboard(editor, format);
+        }
+        else {
+            this.exportSvc.exportToFile(editor, format, options);
+        }
+    }
     focus(editor) {
         if (!editor) {
             return;
@@ -6054,6 +6360,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
@@ -7045,6 +7761,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();
@@ -7237,6 +7958,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 });
         /**
@@ -7347,6 +8071,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 = [
@@ -7519,6 +8248,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 }) => {
@@ -7531,6 +8264,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();
@@ -7657,7 +8393,7 @@ 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], 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" }, 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()) {
@@ -7812,7 +8548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         AteColorBubbleMenuComponent,
                         AteEditToggleComponent,
                         AteBlockControlsComponent,
-                    ], providers: [AteEditorCommandsService, AteImageService, AteColorPickerService, AteLinkService], template: `
+                    ], providers: [AteEditorCommandsService, AteImageService, AteColorPickerService, AteLinkService, AteExportService], template: `
     <div class="ate-editor">
       <!-- Toolbar -->
       @if (finalEditable() && !mergedDisabled() && finalShowToolbar() && editor()) {
@@ -8020,5 +8756,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, 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