@flogeez/angular-tiptap-editor 3.6.0 → 3.7.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, inject, Injectable, computed, Directive, ApplicationRef, EnvironmentInjector, createComponent, input, booleanAttribute, effect, untracked, Component, ChangeDetectionStrategy, HostListener, ElementRef, ViewEncapsulation, output, viewChild, DestroyRef, Injector, isDevMode, makeEnvironmentProviders, APP_INITIALIZER } from '@angular/core';
+import { isDevMode, InjectionToken, signal, inject, Injectable, computed, Directive, ApplicationRef, EnvironmentInjector, createComponent, input, booleanAttribute, effect, untracked, Component, ChangeDetectionStrategy, HostListener, ElementRef, ViewEncapsulation, output, viewChild, DestroyRef, Injector, makeEnvironmentProviders, APP_INITIALIZER } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Node as Node$1, mergeAttributes, nodeInputRule, Extension, getAttributes, Editor } from '@tiptap/core';
 import StarterKit from '@tiptap/starter-kit';
@@ -11,11 +11,11 @@ import { Highlight } from '@tiptap/extension-highlight';
 import { TextStyle } from '@tiptap/extension-text-style';
 import { Color } from '@tiptap/extension-color';
 import OfficePaste from '@intevation/tiptap-extension-office-paste';
+import { isObservable, firstValueFrom, Subscription, concat, defer, of, tap } from 'rxjs';
 import { Plugin, PluginKey, NodeSelection, TextSelection } from '@tiptap/pm/state';
 import { DecorationSet, Decoration } from '@tiptap/pm/view';
-import { Fragment, Slice } from '@tiptap/pm/model';
+import { Fragment, Slice, DOMSerializer } from '@tiptap/pm/model';
 import { Table, TableRow, TableHeader, TableCell } from '@tiptap/extension-table';
-import { Subscription, isObservable, firstValueFrom, concat, defer, of, tap } from 'rxjs';
 import tippy, { sticky } from 'tippy.js';
 import { DomSanitizer } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
@@ -23,6 +23,25 @@ import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { CellSelection } from '@tiptap/pm/tables';
 
+async function ateResolveImageSrc(resolver, src) {
+    if (!resolver || !src) {
+        return src;
+    }
+    try {
+        const result = resolver(src);
+        const resolved = isObservable(result) ? await firstValueFrom(result) : await result;
+        if (typeof resolved === "string" && resolved) {
+            return resolved;
+        }
+    }
+    catch (error) {
+        if (isDevMode()) {
+            console.warn("[ATE] imageSrcResolver failed, showing the original src instead.", src, error);
+        }
+    }
+    return src;
+}
+
 const AteResizableImage = Node$1.create({
     name: "resizableImage",
     addOptions() {
@@ -30,6 +49,12 @@ const AteResizableImage = Node$1.create({
             inline: false,
             allowBase64: false,
             HTMLAttributes: {},
+            srcResolver: () => null,
+        };
+    },
+    addStorage() {
+        return {
+            srcRefreshers: new Set(),
         };
     },
     inline() {
@@ -120,8 +145,13 @@ const AteResizableImage = Node$1.create({
         ];
     },
     addNodeView() {
+        const options = this.options;
+        const storage = this.storage;
         return ({ node, getPos, editor }) => {
             let currentNode = node;
+            let requestedSrc = null;
+            let requestedWith = null;
+            let destroyed = false;
             const wrapper = document.createElement("div");
             wrapper.className = "resizable-image-wrapper";
             wrapper.style.display = "block";
@@ -134,7 +164,6 @@ const AteResizableImage = Node$1.create({
             container.style.position = "relative";
             container.style.display = "inline-block";
             const img = document.createElement("img");
-            img.src = currentNode.attrs["src"];
             img.alt = currentNode.attrs["alt"] || "";
             img.title = currentNode.attrs["title"] || "";
             img.className = "ate-image";
@@ -145,6 +174,32 @@ const AteResizableImage = Node$1.create({
             if (currentNode.attrs["height"]) {
                 img.height = currentNode.attrs["height"];
             }
+            const applySrc = (src) => {
+                const resolver = options.srcResolver() ?? null;
+                if (!resolver || !src) {
+                    requestedSrc = null;
+                    requestedWith = null;
+                    img.src = src ?? "";
+                    return;
+                }
+                if (src === requestedSrc && resolver === requestedWith) {
+                    return;
+                }
+                // A new resolver for the same src keeps the current image until the new URL is ready, so it does not blink
+                if (src !== requestedSrc) {
+                    img.removeAttribute("src");
+                }
+                requestedSrc = src;
+                requestedWith = resolver;
+                ateResolveImageSrc(resolver, src).then(resolved => {
+                    if (!destroyed && requestedSrc === src && requestedWith === resolver) {
+                        img.src = resolved;
+                    }
+                });
+            };
+            const refreshSrc = () => applySrc(currentNode.attrs["src"]);
+            refreshSrc();
+            storage.srcRefreshers.add(refreshSrc);
             wrapper.appendChild(container);
             container.appendChild(img);
             // Allow selection in read-only mode to show bubble menu/download
@@ -276,7 +331,7 @@ const AteResizableImage = Node$1.create({
                         return false;
                     }
                     currentNode = updatedNode;
-                    img.src = updatedNode.attrs["src"];
+                    applySrc(updatedNode.attrs["src"]);
                     img.alt = updatedNode.attrs["alt"] || "";
                     img.title = updatedNode.attrs["title"] || "";
                     if (updatedNode.attrs["width"]) {
@@ -300,6 +355,10 @@ const AteResizableImage = Node$1.create({
                     return !!target.closest(".resize-controls");
                 },
                 ignoreMutation: () => true,
+                destroy: () => {
+                    destroyed = true;
+                    storage.srcRefreshers.delete(refreshSrc);
+                },
             };
         };
     },
@@ -996,6 +1055,127 @@ const AteBlockShortcuts = Extension.create({
     },
 });
 
+/** Set on HTML copied from an editor, so a later paste knows it comes from an editor */
+const EDITOR_CLIPBOARD_MARKER = "data-ate-copy";
+const OFFICE_HTML = /urn:schemas-microsoft-com:office|class="?Mso|mso-/i;
+/** Detects where clipboard HTML comes from. Must run on the HTML as copied, before any cleanup */
+function detectPasteSource(html) {
+    if (html.includes(EDITOR_CLIPBOARD_MARKER)) {
+        return "editor";
+    }
+    return OFFICE_HTML.test(html) ? "office" : "external";
+}
+/** Removes the formats turned off in `config` (`colors`, `highlights`) from pasted HTML */
+function stripPastedFormats(html, config) {
+    const keepColors = config.colors !== false;
+    const keepHighlights = config.highlights !== false;
+    if (keepColors && keepHighlights) {
+        return html;
+    }
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    const content = template.content;
+    const styleProperties = [
+        ...(keepColors ? [] : ["color"]),
+        ...(keepHighlights ? [] : ["background-color", "background"]),
+    ];
+    content.querySelectorAll("[style]").forEach(element => {
+        styleProperties.forEach(property => element.style.removeProperty(property));
+        if (!element.getAttribute("style")?.trim()) {
+            element.removeAttribute("style");
+        }
+    });
+    if (!keepColors) {
+        content.querySelectorAll("font[color]").forEach(font => font.removeAttribute("color"));
+    }
+    if (!keepHighlights) {
+        content.querySelectorAll("[bgcolor]").forEach(element => element.removeAttribute("bgcolor"));
+        content
+            .querySelectorAll("mark")
+            .forEach(mark => mark.replaceWith(...Array.from(mark.childNodes)));
+    }
+    return template.innerHTML;
+}
+/**
+ * Runs before every other paste cleanup (the Office cleanup removes the markers it relies on):
+ * records the source of each paste, and marks HTML copied from the editor.
+ */
+const AtePasteSourceTracker = Extension.create({
+    name: "atePasteSourceTracker",
+    priority: 100000,
+    addProseMirrorPlugins() {
+        const editor = this.editor;
+        const serializer = DOMSerializer.fromSchema(editor.schema);
+        return [
+            new Plugin({
+                key: new PluginKey("atePasteSourceTracker"),
+                props: {
+                    transformPastedHTML: html => {
+                        editor.storage.atePaste.source = detectPasteSource(html);
+                        return html;
+                    },
+                    clipboardSerializer: {
+                        serializeFragment: (fragment, options) => {
+                            const dom = serializer.serializeFragment(fragment, options);
+                            dom.firstElementChild?.setAttribute(EDITOR_CLIPBOARD_MARKER, "");
+                            return dom;
+                        },
+                    },
+                },
+            }),
+        ];
+    },
+});
+/**
+ * Applies `AtePasteConfig` to pasted and dropped HTML, after the Office cleanup:
+ * removes the formats turned off for content from other apps, then calls `transformHTML`.
+ */
+const AtePaste = Extension.create({
+    name: "atePaste",
+    addOptions() {
+        return {
+            config: () => ({}),
+        };
+    },
+    addStorage() {
+        return {
+            source: "external",
+        };
+    },
+    addExtensions() {
+        return [AtePasteSourceTracker];
+    },
+    addProseMirrorPlugins() {
+        const options = this.options;
+        const storage = this.storage;
+        return [
+            new Plugin({
+                key: new PluginKey("atePaste"),
+                props: {
+                    transformPastedHTML: html => {
+                        const config = options.config();
+                        const source = storage.source;
+                        const stripped = source === "editor" ? html : stripPastedFormats(html, config);
+                        if (!config.transformHTML) {
+                            return stripped;
+                        }
+                        try {
+                            const transformed = config.transformHTML(stripped, { source });
+                            return typeof transformed === "string" ? transformed : stripped;
+                        }
+                        catch (error) {
+                            if (isDevMode()) {
+                                console.warn("[ATE] paste.transformHTML failed, inserting the HTML unchanged.", error);
+                            }
+                            return stripped;
+                        }
+                    },
+                },
+            }),
+        ];
+    },
+});
+
 const AteTableExtension = Extension.create({
     name: "tableExtension",
     addExtensions() {
@@ -2995,6 +3175,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Translations seen by one editor instance. The editor provides its own copy and binds its
+ * `locale` input to it; without a locale (or outside an editor) it follows the global
+ * `AteI18nService` locale. Internal: not part of the public API.
+ */
+class AteEditorI18n {
+    constructor() {
+        this.global = inject(AteI18nService);
+        this.localeSource = signal(() => undefined);
+        this.translations = computed(() => {
+            const locale = this.localeSource()();
+            return (locale && this.global.getTranslations(locale)) || this.global.translations();
+        });
+        this.toolbar = computed(() => this.translations().toolbar);
+        this.bubbleMenu = computed(() => this.translations().bubbleMenu);
+        this.slashCommands = computed(() => this.translations().slashCommands);
+        this.table = computed(() => this.translations().table);
+        this.imageUpload = computed(() => this.translations().imageUpload);
+        this.editor = computed(() => this.translations().editor);
+        this.common = computed(() => this.translations().common);
+        this.export = computed(() => this.translations().export);
+    }
+    bindLocale(source) {
+        this.localeSource.set(source);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditorI18n, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditorI18n, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AteEditorI18n, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
 /**
  * Table of Contents Component (Notion-style)
  * Dynamically extracts headings from the active editor and displays them.
@@ -3046,7 +3259,7 @@ class AteTableOfContentsComponent {
             },
         });
         this.registry = inject(AteEditorRegistry);
-        this.i18n = inject(AteI18nService);
+        this.i18n = inject(AteEditorI18n);
         // Computed header title with fallback to i18n
         this.headerTitle = computed(() => {
             const custom = this.title();
@@ -3608,6 +3821,14 @@ const AteTiptapStateExtension = Extension.create({
 
 // Pre-calculate platform once to avoid repeated checks
 const IS_MAC = typeof window !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+const DURATION = [100, 100];
+// After a tooltip closes, the next one still opens at once if hovered within this gap
+const WARM_GAP = 300;
+// Shared by every tooltip: the first one waits for its delay, the next ones open at once,
+// without animation, as long as the pointer moves from one control to the next.
+let openTooltip = null;
+let warm = false;
+let coolTimeout;
 class AteTooltipDirective {
     constructor() {
         this.el = inject(ElementRef);
@@ -3699,7 +3920,7 @@ class AteTooltipDirective {
             allowHTML,
             placement,
             delay,
-            duration: [100, 100],
+            duration: DURATION,
             offset: [0, 6],
             theme: "ate-tooltip",
             touch: ["hold", 500],
@@ -3708,6 +3929,30 @@ class AteTooltipDirective {
             aria: {
                 content: "describedby",
             },
+            onTrigger: (instance, event) => {
+                const base = this.delay();
+                const instant = warm && event.type === "mouseenter";
+                instance.setProps({
+                    delay: instant ? [0, Array.isArray(base) ? base[1] : base] : base,
+                    duration: instant ? [0, DURATION[1]] : DURATION,
+                });
+            },
+            onShow: instance => {
+                // Only one tooltip at a time: the previous one goes away at once
+                if (openTooltip && openTooltip !== instance) {
+                    openTooltip.unmount();
+                }
+                openTooltip = instance;
+                warm = true;
+                clearTimeout(coolTimeout);
+            },
+            onHidden: instance => {
+                if (openTooltip !== instance) {
+                    return;
+                }
+                openTooltip = null;
+                coolTimeout = setTimeout(() => (warm = false), WARM_GAP);
+            },
             popperOptions: {
                 modifiers: [
                     {
@@ -3723,6 +3968,9 @@ class AteTooltipDirective {
     }
     destroyTippy() {
         if (this.tippyInstance) {
+            if (openTooltip === this.tippyInstance) {
+                openTooltip = null;
+            }
             this.tippyInstance.destroy();
             this.tippyInstance = null;
         }
@@ -3868,7 +4116,7 @@ class AteImageService {
         this.isImageSelected = computed(() => this.selectedImage() !== null);
         /** Resizing state */
         this.isResizing = signal(false);
-        this.i18n = inject(AteI18nService);
+        this.i18n = inject(AteEditorI18n);
         this.t = this.i18n.imageUpload;
         /** Upload state signals */
         this.isUploading = signal(false);
@@ -3879,6 +4127,7 @@ class AteImageService {
          * If set, this handler replaces the default base64 conversion.
          */
         this.uploadHandler = null;
+        this.srcResolver = null;
         this.currentEditor = null;
     }
     /** Select and track an image from the editor */
@@ -3975,7 +4224,10 @@ class AteImageService {
         img.onload = () => {
             this.resizeImage(editor, { width: img.naturalWidth, height: img.naturalHeight });
         };
-        img.src = editor.getAttributes("resizableImage")["src"];
+        const storedSrc = editor.getAttributes("resizableImage")["src"];
+        ateResolveImageSrc(this.srcResolver, storedSrc).then(src => {
+            img.src = src;
+        });
     }
     /** Get current image dimensions */
     getImageDimensions(editor) {
@@ -4001,8 +4253,10 @@ class AteImageService {
         if (!attrs || !attrs["src"]) {
             return;
         }
-        const src = attrs["src"];
         const fileName = attrs["alt"] || "image";
+        ateResolveImageSrc(this.srcResolver, attrs["src"]).then(src => this.downloadResolvedImage(src, fileName));
+    }
+    downloadResolvedImage(src, fileName) {
         // Detect if it's base64 or remote URL
         if (src.startsWith("data:") ||
             src.startsWith("blob:") ||
@@ -5031,6 +5285,12 @@ class AteEditorCommandsService {
     set uploadHandler(handler) {
         this.imageService.uploadHandler = handler;
     }
+    get srcResolver() {
+        return this.imageService.srcResolver;
+    }
+    set srcResolver(resolver) {
+        this.imageService.srcResolver = resolver;
+    }
     /** Update state (called by TiptapStateExtension) */
     updateState(state) {
         this._editorState.set(state);
@@ -5464,7 +5724,7 @@ class AteColorPickerComponent {
         this.disabled = input(false);
         this.anchorToText = input(false);
         this.colorPickerSvc = inject(AteColorPickerService);
-        this.i18nService = inject(AteI18nService);
+        this.i18nService = inject(AteEditorI18n);
         this.editorCommands = inject(AteEditorCommandsService);
         this.t = this.i18nService.toolbar;
         this.state = this.editorCommands.editorState;
@@ -5578,7 +5838,7 @@ class AteToolbarComponent {
         this.config = input.required();
         this.imageUpload = input({});
         this.floating = input(false);
-        this.i18nService = inject(AteI18nService);
+        this.i18nService = inject(AteEditorI18n);
         this.editorCommands = inject(AteEditorCommandsService);
         this.t = this.i18nService.toolbar;
         this.state = this.editorCommands.editorState;
@@ -6183,6 +6443,11 @@ const ATE_DEFAULT_IMAGE_UPLOAD_CONFIG = {
     allowedTypes: ["image/jpeg", "image/png", "image/gif", "image/webp"],
     quality: 0.8,
 };
+/** Default paste settings: everything pasted from other apps is kept */
+const ATE_DEFAULT_PASTE_CONFIG = {
+    colors: true,
+    highlights: true,
+};
 /**
  * Ultimate default configuration for the Angular Tiptap Editor.
  * This serves as the 'Level 4' fallback in the configuration hierarchy:
@@ -6221,6 +6486,7 @@ const ATE_DEFAULT_CONFIG = {
     bubbleMenu: ATE_DEFAULT_BUBBLE_MENU_CONFIG,
     imageBubbleMenu: ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG,
     imageUpload: ATE_DEFAULT_IMAGE_UPLOAD_CONFIG,
+    paste: ATE_DEFAULT_PASTE_CONFIG,
     tableBubbleMenu: ATE_DEFAULT_TABLE_MENU_CONFIG,
     cellBubbleMenu: ATE_DEFAULT_CELL_MENU_CONFIG,
     slashCommands: {},
@@ -6237,7 +6503,7 @@ const ATE_DEFAULT_CONFIG = {
  */
 class AteBaseBubbleMenu {
     constructor() {
-        this.i18nService = inject(AteI18nService);
+        this.i18nService = inject(AteEditorI18n);
         this.editorCommands = inject(AteEditorCommandsService);
         // Core Inputs
         this.editor = input.required();
@@ -7442,7 +7708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 class AteBaseSubBubbleMenu {
     constructor() {
-        this.i18nService = inject(AteI18nService);
+        this.i18nService = inject(AteEditorI18n);
         this.editorCommands = inject(AteEditorCommandsService);
         // Core Inputs
         this.editor = input.required();
@@ -8337,7 +8603,7 @@ function filterSlashCommands(config, i18n, commands, imageOptions) {
 // Default command definitions are now centralized in src/lib/config/slash-commands.config.ts
 class AteSlashCommandsComponent {
     constructor() {
-        this.i18nService = inject(AteI18nService);
+        this.i18nService = inject(AteEditorI18n);
         this.editor = input.required();
         this.config = input(undefined);
         this.menuRef = viewChild.required("menuRef");
@@ -8683,7 +8949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 class AteBlockControlsComponent {
     constructor() {
-        this.i18n = inject(AteI18nService);
+        this.i18n = inject(AteEditorI18n);
         this.editor = input.required();
         this.hoveredData = input(null);
         this.menuRef = viewChild.required("menuRef");
@@ -9521,6 +9787,8 @@ const ATE_BUILTIN_UI_DEPENDENCIES = {
     ateLinkShortcut: "Mod+K link editor shortcut",
     highlight: "toolbar/bubble menu highlight picker, AteMarksCalculator",
     resizableImage: "image node view, image bubble menu, image upload/resize service, AteImageCalculator",
+    atePaste: "paste settings (`paste` input / config): format filters and `transformHTML`",
+    atePasteSourceTracker: "paste source detection (`editor` / `office` / `external`) for the `paste` settings",
     atePastedImage: "pasted HTML image sanitization and base64 re-hosting",
     ateUploadProgress: "image upload progress overlay",
     tableExtension: "toolbar/slash menu table insertion, table/cell bubble menus, AteTableCalculator",
@@ -9635,6 +9903,11 @@ class AngularTiptapEditorComponent {
         this.stateCalculators = input(undefined);
         // Nouveau input pour la configuration de l'upload d'images
         this.imageUpload = input(undefined);
+        /**
+         * What is kept from HTML pasted or dropped from other apps (`colors`, `highlights`),
+         * and an optional `transformHTML` hook. Merged over `config.paste`.
+         */
+        this.paste = input(undefined);
         /**
          * Custom handler for image uploads.
          * When provided, images will be processed through this handler instead of being converted to base64.
@@ -9655,6 +9928,11 @@ class AngularTiptapEditorComponent {
          * ```
          */
         this.imageUploadHandler = input(undefined);
+        /**
+         * Maps the `src` stored in the document to the URL the editor displays and downloads.
+         * The document, `getHTML()` and exports keep the original `src`.
+         */
+        this.imageSrcResolver = input(undefined);
         /**
          * Optional unique identifier for the editor instance in the registry.
          * If not specified, a unique ID is automatically generated.
@@ -9814,7 +10092,7 @@ class AngularTiptapEditorComponent {
                 ? fromInputOptions
                 : fromConfigOptions;
             return {
-                commands: filterSlashCommands(baseConfig || {}, this.i18nService, this.editorCommandsService, this.finalImageUploadConfig()),
+                commands: filterSlashCommands(baseConfig || {}, this.editorI18n, this.editorCommandsService, this.finalImageUploadConfig()),
             };
         });
         // Behavior
@@ -9833,6 +10111,12 @@ class AngularTiptapEditorComponent {
         this.finalAngularNodesConfig = computed(() => this.effectiveConfig().angularNodes ?? [], {
             equal: shallowArrayEqual,
         });
+        // Paste
+        this.finalPasteConfig = computed(() => ({
+            ...ATE_DEFAULT_PASTE_CONFIG,
+            ...this.effectiveConfig().paste,
+            ...this.paste(),
+        }));
         // Image Upload
         this.finalImageUploadConfig = computed(() => {
             const fromInput = this.imageUpload();
@@ -9848,15 +10132,11 @@ class AngularTiptapEditorComponent {
                 maxSize: (merged.maxSize ?? 5) * 1024 * 1024, // Convert MB to bytes for internal service
             };
         });
+        this.finalImageSrcResolver = computed(() => this.imageSrcResolver() ?? this.effectiveConfig().imageSrcResolver);
         this.finalImageUploadHandler = computed(() => this.imageUploadHandler() ?? this.effectiveConfig().imageUpload?.handler);
-        // Computed for current translations (allows per-instance override via config or input)
-        this.currentTranslations = computed(() => {
-            const localeOverride = this.finalLocale();
-            if (localeOverride) {
-                return this.i18nService.getTranslations(localeOverride) ?? this.i18nService.translations();
-            }
-            return this.i18nService.translations();
-        });
+        this.editorI18n = inject(AteEditorI18n);
+        // Current translations (per-instance override via config or input, else the global locale)
+        this.currentTranslations = this.editorI18n.translations;
         this._destroyRef = inject(DestroyRef);
         // NgControl for management of FormControls
         this.ngControl = inject(NgControl, { self: true, optional: true });
@@ -9880,6 +10160,7 @@ class AngularTiptapEditorComponent {
             const fromGlobal = this.globalConfig || {};
             return { ...ATE_DEFAULT_CONFIG, ...fromGlobal, ...fromInput };
         });
+        this.editorI18n.bindLocale(this.finalLocale);
         // Effect to update editor content (with anti-echo)
         effect(() => {
             const content = this.content(); // Sole reactive dependency
@@ -9935,6 +10216,23 @@ class AngularTiptapEditorComponent {
             const handler = this.finalImageUploadHandler();
             this.editorCommandsService.uploadHandler = handler || null;
         }, { allowSignalWrites: true });
+        // Effect to refresh the placeholder decoration when its resolved text changes
+        effect(() => {
+            const editor = this.editor();
+            this.finalPlaceholder();
+            if (editor && !editor.isDestroyed) {
+                untracked(() => editor.view.dispatch(editor.state.tr));
+            }
+        });
+        // Effect to re-apply the image src resolver to the displayed images when it changes
+        // (e.g. a resolver set after the editor was created, or a new one after a token refresh)
+        effect(() => {
+            this.editorCommandsService.srcResolver = this.finalImageSrcResolver() ?? null;
+            const editor = untracked(() => this.editor());
+            if (editor && !editor.isDestroyed) {
+                editor.storage.resizableImage?.srcRefreshers.forEach(refresh => refresh());
+            }
+        });
         // Effect to update character count limit dynamically
         effect(() => {
             const editor = this.editor();
@@ -9993,6 +10291,7 @@ class AngularTiptapEditorComponent {
         }
     }
     initEditor() {
+        this.editorCommandsService.srcResolver = this.finalImageSrcResolver() ?? null;
         const starterKitOptions = this.finalStarterKitOptions();
         const customExtensions = this.finalTiptapExtensions();
         const customNames = new Set(customExtensions.map(getExtensionName).filter((name) => !!name));
@@ -10038,7 +10337,7 @@ class AngularTiptapEditorComponent {
                 types: ["textStyle"],
             }),
             Placeholder.configure({
-                placeholder: this.finalPlaceholder(),
+                placeholder: () => this.finalPlaceholder(),
             }),
             Superscript,
             Subscript,
@@ -10049,6 +10348,9 @@ class AngularTiptapEditorComponent {
             AteBlockShortcuts.configure({
                 enabled: () => this.finalEnableBlockShortcuts(),
             }),
+            AtePaste.configure({
+                config: () => this.finalPasteConfig(),
+            }),
             AteLinkShortcut.configure({
                 canOpen: () => this.editorCommandsService.editorState().can.toggleLink,
                 open: editor => this.editorCommandsService.execute(editor, "toggleLink"),
@@ -10065,6 +10367,7 @@ class AngularTiptapEditorComponent {
                 HTMLAttributes: {
                     class: "ate-image",
                 },
+                srcResolver: () => this.editorCommandsService.srcResolver,
             }),
             AtePastedImage.configure({
                 shouldRehost: () => this.editorCommandsService.hasUploadHandler,
@@ -10377,12 +10680,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 }, enableBlockShortcuts: { classPropertyName: "enableBlockShortcuts", publicName: "enableBlockShortcuts", 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 }, mode: { classPropertyName: "mode", publicName: "mode", 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 }, starterKitOptions: { classPropertyName: "starterKitOptions", publicName: "starterKitOptions", 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", imageRejected: "imageRejected", pastedImageRejected: "pastedImageRejected" }, 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: [
+    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 }, enableBlockShortcuts: { classPropertyName: "enableBlockShortcuts", publicName: "enableBlockShortcuts", 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 }, mode: { classPropertyName: "mode", publicName: "mode", 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 }, starterKitOptions: { classPropertyName: "starterKitOptions", publicName: "starterKitOptions", 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 }, paste: { classPropertyName: "paste", publicName: "paste", isSignal: true, isRequired: false, transformFunction: null }, imageUploadHandler: { classPropertyName: "imageUploadHandler", publicName: "imageUploadHandler", isSignal: true, isRequired: false, transformFunction: null }, imageSrcResolver: { classPropertyName: "imageSrcResolver", publicName: "imageSrcResolver", 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", imageRejected: "imageRejected", pastedImageRejected: "pastedImageRejected" }, 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,
+            AteEditorI18n,
         ], viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorElement"], descendants: true, isSignal: true }], hostDirectives: [{ directive: AteNoopValueAccessorDirective }], ngImport: i0, template: `
     <div class="ate-editor">
       <!-- Toolbar -->
@@ -10552,6 +10856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         AteColorPickerService,
                         AteLinkService,
                         AteExportService,
+                        AteEditorI18n,
                     ], template: `
     <div class="ate-editor">
       <!-- Toolbar -->
@@ -10873,5 +11178,5 @@ const ATE_DEFAULT_TOC_CONFIG = {
  * 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_ICONS, ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ATE_DEFAULT_IMAGE_UPLOAD_CONFIG, ATE_DEFAULT_SLASH_COMMANDS_CONFIG, ATE_DEFAULT_TABLE_MENU_CONFIG, ATE_DEFAULT_TOC_CONFIG, ATE_DEFAULT_TOOLBAR_CONFIG, ATE_GLOBAL_CONFIG, ATE_ICONS, ATE_IMAGE_BUBBLE_MENU_KEYS, ATE_INITIAL_EDITOR_STATE, ATE_MATERIAL_SYMBOLS_VIEWBOX, ATE_SLASH_COMMAND_KEYS, ATE_STROKE_ICONS, ATE_TABLE_BUBBLE_MENU_KEYS, ATE_TOOLBAR_KEYS, AngularTiptapEditorComponent, AteAngularNodeView, AteBlockShortcuts, AteColorPickerService, AteDiscoveryCalculator, AteEditorCommandsService, AteEditorRef, AteEditorRegistry, AteExportService, AteI18nService, AteIconComponent, AteIconRegistry, AteImageCalculator, AteImageService, AteImageValidationError, AteLinkService, AteLinkShortcut, AteMarksCalculator, AteNodeViewRenderer, AteNoopValueAccessorDirective, AtePastedImage, AteSelectionCalculator, AteStructureCalculator, AteTableCalculator, AteTableOfContentsComponent, AteTocNodeComponent, AteTocNodeOptions, AteTooltipDirective, classifyPastedImageSrc, createAngularComponentExtension, createDefaultSlashCommands, dataUriToFile, filterSlashCommands, getAteTocNodeExtension, isLinkShortcut, provideAteEditor, provideAteIcons, registerAngularComponent, sanitizePastedImages };
+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_ICONS, ATE_DEFAULT_IMAGE_BUBBLE_MENU_CONFIG, ATE_DEFAULT_IMAGE_UPLOAD_CONFIG, ATE_DEFAULT_PASTE_CONFIG, ATE_DEFAULT_SLASH_COMMANDS_CONFIG, ATE_DEFAULT_TABLE_MENU_CONFIG, ATE_DEFAULT_TOC_CONFIG, ATE_DEFAULT_TOOLBAR_CONFIG, ATE_GLOBAL_CONFIG, ATE_ICONS, ATE_IMAGE_BUBBLE_MENU_KEYS, ATE_INITIAL_EDITOR_STATE, ATE_MATERIAL_SYMBOLS_VIEWBOX, ATE_SLASH_COMMAND_KEYS, ATE_STROKE_ICONS, ATE_TABLE_BUBBLE_MENU_KEYS, ATE_TOOLBAR_KEYS, AngularTiptapEditorComponent, AteAngularNodeView, AteBlockShortcuts, AteColorPickerService, AteDiscoveryCalculator, AteEditorCommandsService, AteEditorRef, AteEditorRegistry, AteExportService, AteI18nService, AteIconComponent, AteIconRegistry, AteImageCalculator, AteImageService, AteImageValidationError, AteLinkService, AteLinkShortcut, AteMarksCalculator, AteNodeViewRenderer, AteNoopValueAccessorDirective, AtePastedImage, AteSelectionCalculator, AteStructureCalculator, AteTableCalculator, AteTableOfContentsComponent, AteTocNodeComponent, AteTocNodeOptions, AteTooltipDirective, classifyPastedImageSrc, createAngularComponentExtension, createDefaultSlashCommands, dataUriToFile, filterSlashCommands, getAteTocNodeExtension, isLinkShortcut, provideAteEditor, provideAteIcons, registerAngularComponent, sanitizePastedImages };
 //# sourceMappingURL=flogeez-angular-tiptap-editor.mjs.map