@arsedizioni/ars-utils 22.6.85 → 22.6.88

package/fesm2022/arsedizioni-ars-utils-ui.tinymce.mjs

@@ -1,658 +1,725 @@
-import * as i0 from '@angular/core';
-import { Service, input, output, inject, ElementRef, ChangeDetectorRef, forwardRef, Directive, signal, ChangeDetectionStrategy, Component } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ThemeService } from '@arsedizioni/ars-utils/core';
-import { form, disabled, FormField } from '@angular/forms/signals';
-import * as i2 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
-import * as i1 from '@arsedizioni/ars-utils/ui';
-import { FlexLayoutModule } from '@arsedizioni/ars-utils/ui';
-
-/**
- * The editor profiles the applications ask for, ready to be handed to
- * `[tinymceConfig]` on {@link TinymceEditorDirective}.
- *
- * They describe **what the editor offers** — plugins, toolbar, formats, link and image
- * behaviour — and nothing else. Everything about *loading* TinyMCE (`base_url`, `suffix`,
- * `language`, `language_url`, `license_key`) and about the *theme* (`skin`, `content_css`)
- * belongs to `TinymceLoaderService` and to the directive, which resolve them against the
- * document base href and against `ThemeService`: a preset repeating them could only get them
- * wrong, and used to — the old ones pinned a relative `assets/tinymce` that broke under a
- * sub-path, and read the skin from `prefers-color-scheme` instead of the theme the user chose.
- *
- * Uploads are the same story: `automatic_uploads`, `paste_data_images` and `file_picker_types`
- * follow the `tinymceImageUploader` input, so an editor without a handler cannot end up
- * offering an upload tab that leads nowhere.
- *
- * Each accessor returns a **fresh deep copy**: a caller that tweaks a returned object — as the
- * editor dialog does with its toolbar — cannot corrupt the preset for everyone else.
- */
-class TinymceUtils {
-    /**
-     * Everything TinyMCE 8 open source has to offer, for a full-page editor.
-     *
-     * Adapted from the TinyMCE 5 profile the library used to ship: `paste`, `print`, `hr`,
-     * `textpattern` and the `fullpage_*` options no longer exist (paste and text patterns moved
-     * into the core, `fullpage` and `print` were dropped in v6), and `checklist`,
-     * `openCodeMirrorButton` and `insertMediaButton` are premium or application-specific buttons
-     * that a self-hosted GPL build has no way to render.
-     */
-    static { this.FULL = {
-        height: 500,
-        width: '100%',
-        min_height: 250,
-        onboarding: false,
-        browser_spellcheck: true,
-        custom_undo_redo_levels: 50,
-        // Three   per TAB, and no wrapping of the inserted spaces.
-        nonbreaking_force_tab: true,
-        nonbreaking_wrap: false,
-        help_tabs: ['shortcuts', 'keyboardnav', 'versions'],
-        menubar: false,
-        plugins: 'advlist anchor autolink autosave charmap code fullscreen help image insertdatetime'
-            + ' link lists media nonbreaking pagebreak preview quickbars searchreplace table'
-            + ' visualblocks visualchars',
-        toolbar: [
-            'fullscreen | undo redo searchreplace | code preview | link image media charmap nonbreaking | table tableprops tabledelete',
-            'bold italic superscript subscript forecolor backcolor | alignleft aligncenter alignright alignjustify | removeformat | bullist numlist'
-        ],
-        quickbars_insert_toolbar: false,
-        quickbars_selection_toolbar: 'removeformat | bold italic | superscript subscript | quicklink h2 h3 blockquote',
-        style_formats: [
-            {
-                title: 'Immagini float', items: [
-                    { title: 'Immagine a SX', selector: 'img', styles: { float: 'left', margin: '0 10px 0 10px' } },
-                    { title: 'Immagine a DX', selector: 'img', styles: { float: 'right', margin: '0 10px 0 10px' } }
-                ]
-            },
-            {
-                title: 'Formati', items: [
-                    { title: 'Grassetto', format: 'bold' },
-                    { title: 'Corsivo', format: 'italic' },
-                    { title: 'Sottolineato', format: 'underline' },
-                    { title: 'Barrato', format: 'strikethrough' },
-                    { title: 'Superscript', format: 'superscript' },
-                    { title: 'Subscript', format: 'subscript' },
-                    { title: 'Codice', format: 'code' }
-                ]
-            }
-        ],
-        // Spans with an inline style rather than <u>/<strike>: the content travels by e-mail, where
-        // the presentational tags are the first thing a client strips.
-        formats: {
-            underline: { inline: 'span', styles: { 'text-decoration': 'underline' }, exact: true },
-            strikethrough: { inline: 'span', styles: { 'text-decoration': 'line-through' }, exact: true }
-        },
-        insertdatetime_formats: ['%d/%m/%Y', '%d %b %Y', '%A, %d %B %Y'],
-        link_default_target: '_blank',
-        link_title: true,
-        link_assume_external_targets: 'https',
-        link_class_list: [
-            { title: 'Nessuno', value: '' },
-            { title: 'Rilevante', value: 'relevant' },
-        ],
-        link_context_toolbar: true,
-        link_quicklink: true,
-        image_advtab: true,
-        image_caption: true,
-        image_title: true,
-    }; }
-    /**
-     * The one for a field inside a form: it grows with the text instead of owning the page, the
-     * toolbar sits under it and collapses into groups, and there is no status bar or context menu
-     * to compete with the form around it.
-     */
-    static { this.COMPACT = {
-        ...TinymceUtils.FULL,
-        height: 200,
-        min_height: 200,
-        max_height: 500,
-        statusbar: false,
-        contextmenu: false,
-        toolbar_location: 'bottom',
-        plugins: 'advlist anchor autolink autoresize autosave charmap code image insertdatetime'
-            + ' link lists media nonbreaking preview quickbars searchreplace table'
-            + ' visualblocks visualchars',
-        toolbar: ['undo redo | quickimage | formatgroup paragraphgroup'],
-        toolbar_groups: {
-            formatgroup: {
-                icon: 'format',
-                tooltip: 'Formattazione',
-                items: 'bold italic underline superscript subscript | forecolor backcolor | removeformat'
-            },
-            paragraphgroup: {
-                icon: 'paragraph',
-                tooltip: 'Formato paragrafo',
-                items: 'h1 h2 h3 | bullist numlist | alignleft aligncenter alignright alignjustify | indent outdent'
-            },
-            insertgroup: {
-                icon: 'plus',
-                tooltip: 'Inserisci',
-                items: 'quickimage media | link charmap nonbreaking | table tableprops tabledelete'
-            }
-        },
-        quickbars_insert_toolbar: 'quickimage',
-        link_class_list: [],
-    }; }
-    /** The compact one plus full screen, the insert group and the source view. */
-    static { this.COMPACT_EXTENDED = {
-        ...TinymceUtils.COMPACT,
-        plugins: 'advlist anchor autolink autoresize autosave charmap code fullscreen image'
-            + ' insertdatetime link lists media nonbreaking preview quickbars searchreplace table'
-            + ' visualblocks visualchars',
-        toolbar: ['undo redo | quickimage insertgroup | formatgroup paragraphgroup | code | fullscreen'],
-    }; }
-    /**
-     * The full-page profile.
-     * @returns A fresh copy of the configuration, safe to modify.
-     */
-    static get TinymceConfig() {
-        return structuredClone(TinymceUtils.FULL);
-    }
-    /**
-     * The in-form profile.
-     * @returns A fresh copy of the configuration, safe to modify.
-     */
-    static get TinymceCompactConfig() {
-        return structuredClone(TinymceUtils.COMPACT);
-    }
-    /**
-     * The in-form profile with full screen and source view.
-     * @returns A fresh copy of the configuration, safe to modify.
-     */
-    static get TinymceCompactExtendedConfig() {
-        return structuredClone(TinymceUtils.COMPACT_EXTENDED);
-    }
-}
-
-/**
- * Loads the self-hosted TinyMCE bundle on demand.
- *
- * TinyMCE is deliberately NOT imported by any module: a static import would pull ~500 kB into
- * whichever chunk referenced it, and the editor is needed by exactly one dialog. The library is
- * copied to `assets/tinymce` by the build (see `angular.json`) and injected here as a plain
- * `<script>` the first time an editor is created, so it costs nothing until then and is served
- * from the browser cache afterwards. Loading it this way also lets TinyMCE resolve its own theme,
- * model, plugins and skin relative to `base_url`, which is how the self-hosted distribution
- * expects to work.
- */
-class TinymceLoaderService {
-    /**
-     * The absolute URL of the TinyMCE asset folder, resolved against the document base href so the
-     * app keeps working when it is served from a sub-path.
-     * @returns The base URL, without a trailing slash.
-     */
-    get baseUrl() {
-        return new URL('assets/tinymce', document.baseURI).href.replace(/\/$/, '');
-    }
-    /**
-     * Loads TinyMCE, reusing the script already injected by a previous call.
-     * @returns A promise resolving with the global TinyMCE instance.
-     */
-    load() {
-        if (window.tinymce)
-            return Promise.resolve(window.tinymce);
-        // A failed load clears `pending`, so a later attempt can retry instead of being stuck on the
-        // rejected promise forever (e.g. the first open happened while the network was down).
-        this.pending ??= new Promise((resolve, reject) => {
-            const script = document.createElement('script');
-            script.src = `${this.baseUrl}/tinymce.min.js`;
-            script.async = true;
-            script.referrerPolicy = 'origin';
-            script.onload = () => {
-                if (window.tinymce) {
-                    resolve(window.tinymce);
-                }
-                else {
-                    this.pending = undefined;
-                    reject(new Error('TinyMCE caricato ma non disponibile.'));
-                }
-            };
-            script.onerror = () => {
-                this.pending = undefined;
-                script.remove();
-                reject(new Error('Impossibile caricare l\'editor.'));
-            };
-            document.head.appendChild(script);
-        });
-        return this.pending;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TinymceLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
-    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.7", ngImport: i0, type: TinymceLoaderService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TinymceLoaderService, decorators: [{
-            type: Service
-        }] });
-
-/**
- * Turns a `<textarea>` into a rich text editor backed by the self-hosted TinyMCE bundle, and wires
- * it to Angular forms as a `ControlValueAccessor`, so `[(ngModel)]`, `required` and the
- * pristine/dirty state keep working exactly as they do on a plain control.
- *
- * The library itself is fetched on demand by <see cref="TinymceLoaderService"/>: nothing about
- * TinyMCE reaches the bundle until an editor is actually created.
- *
- * Usage: `<textarea tinymceEditor [(ngModel)]="item.text" name="text" required></textarea>`
- *
- */
-class TinymceEditorDirective {
-    constructor() {
-        /** Extra TinyMCE options, merged over (and able to override) the defaults below. */
-        this.tinymceConfig = input({}, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "tinymceConfig" }] : /* istanbul ignore next */ []));
-        /** Whether the toolbar is pinned above the content (`fixed`) or floats on focus (`inline`). */
-        this.tinymceToolbarMode = input('fixed', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "tinymceToolbarMode" }] : /* istanbul ignore next */ []));
-        /**
-         * Handler invoked for every image dropped, pasted or picked in the editor. When not provided
-         * the upload tab is hidden and only images referenced by URL can be inserted.
-         */
-        this.tinymceImageUploader = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "tinymceImageUploader" }] : /* istanbul ignore next */ []));
-        /** Emitted once the editor is up, for callers that want to enable UI only when it is usable. */
-        this.ready = output();
-        /** Emitted when the editor could not be loaded or initialised. */
-        this.failed = output();
-        this.host = inject(ElementRef);
-        this.loader = inject(TinymceLoaderService);
-        this.themeService = inject(ThemeService);
-        this.changeDetector = inject(ChangeDetectorRef);
-        /** True while the editor is showing itself full screen. */
-        this.fullscreen = false;
-        /** True once the directive has been destroyed, so a late init resolves into a no-op. */
-        this.destroyed = false;
-        /**
-         * True while the directive itself is pushing a value into the editor. TinyMCE raises the same
-         * content events for a programmatic `setContent` as for a keystroke, so without this flag
-         * `writeValue` would immediately echo back through `onChange` and mark a freshly loaded form
-         * as dirty.
-         */
-        this.writingValue = false;
-        /** The value received before the editor existed, applied as soon as it does. */
-        this.value = '';
-        this.disabled = false;
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        /**
-         * Leaves full screen on Escape, for the keystrokes that happen outside the content: with the
-         * classic editor the content is an iframe, and a keydown in there never reaches this document.
-         * Bound on the capture phase and stopped, so a dialog hosting the editor does not take the
-         * Escape and close, throwing the edit away when the user only meant to leave full screen.
-         */
-        this.onDocumentKeydown = (event) => {
-            if (!this.shouldEscapeLeaveFullscreen(event))
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-            this.exitFullscreen();
-        };
-    }
-    /**
-     * Loads TinyMCE and initialises the editor over the host textarea.
-     * @returns A promise that completes once the editor is ready (or has failed).
-     */
-    async ngOnInit() {
-        try {
-            const tinymce = await this.loader.load();
-            if (this.destroyed)
-                return;
-            const dark = this.themeService.getTheme() === 'dark';
-            const uploader = this.tinymceImageUploader();
-            const inline = this.tinymceToolbarMode() === 'inline';
-            // Caught here rather than left to TinyMCE, which would fail deep inside its own setup
-            // with a message that says nothing about the actual mistake.
-            if (inline && this.host.nativeElement.tagName === 'TEXTAREA') {
-                throw new Error('La modalità inline richiede un <div>, non un <textarea>.');
-            }
-            // TinyMCE ships its language packs outside the npm package, so `it.js` is committed
-            // under `src/assets/tinymce/langs/`: the existing `src/assets` build rule publishes it
-            // exactly where TinyMCE looks for it, relative to `base_url`.
-            const defaults = {
-                // Self-hosting TinyMCE 8 requires an explicit license key: without one the editor
-                // refuses to start. 'gpl' selects the GPLv2+ terms.
-                license_key: 'gpl',
-                language: 'it',
-                branding: false,
-                promotion: false,
-                menubar: false,
-                statusbar: false,
-                resize: false,
-                // Pins the toolbar while the container scrolls. In inline mode it is what keeps
-                // the floating toolbar attached to the text instead of drifting off with it.
-                toolbar_sticky: true,
-                // An inline editor takes the size of the element it edits; only the classic one
-                // has a box of its own to dimension.
-                ...(inline ? {} : { height: 360 }),
-                // The dialog body scrolls, and 'split' is what keeps the toolbar menus anchored
-                // to the editor while it does: the popup sink is attached next to the editor, so
-                // it shares its scrolling ancestry. It does NOT affect the modal dialogs — those
-                // always go to <body> — which is why the CDK overlay has to be kept out of the
-                // top layer (see OVERLAY_DEFAULT_CONFIG in app.config.ts).
-                ui_mode: 'split',
-                skin: dark ? 'oxide-dark' : 'oxide',
-                content_css: dark ? 'dark' : 'default',
-                // Absolute URLs must survive untouched: the content ends up in an e-mail, where a
-                // relative image path resolves against nothing.
-                convert_urls: false,
-                plugins: 'advlist autolink lists link image table charmap searchreplace code fullscreen',
-                toolbar: 'undo redo | blocks | bold italic underline | forecolor backcolor'
-                    + ' | bullist numlist | link image table | removeformat code fullscreen',
-                content_style: 'body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }',
-                // Pasted and dropped images go through the same upload path as the image dialog.
-                automatic_uploads: !!uploader,
-                paste_data_images: !!uploader,
-                images_file_types: 'jpeg,jpg,png,gif,webp',
-                file_picker_types: uploader ? 'image' : '',
-                images_upload_handler: uploader
-                    ? (blobInfo) => uploader(new File([blobInfo.blob()], blobInfo.filename(), { type: blobInfo.blob().type }))
-                    : undefined,
-            };
-            await tinymce.init({
-                ...defaults,
-                // The caller's profile wins over every default above: that is what the presets in
-                // `TinymceUtils` are for.
-                ...this.tinymceConfig(),
-                // Not negotiable, whatever the profile says. `target` and `base_url` are resolved
-                // here and nowhere else, `inline` is the input's job, and replacing `setup` would
-                // unhook the editor from the form and leave a ControlValueAccessor that never
-                // reports a change.
-                target: this.host.nativeElement,
-                base_url: this.loader.baseUrl,
-                inline,
-                setup: (editor) => {
-                    /*
-                     * Typing, toolbar commands, undo/redo and programmatic inserts all have to reach
-                     * the form; the two guards keep everything else out.
-                     *
-                     * `writingValue` keeps our own writes from bouncing back. `!this.editor` — which
-                     * stays unset until the `init` handler below — keeps out the one content event
-                     * that fires BEFORE the editor exists, and it is the one that made an editor
-                     * impossible to fill: TinyMCE's own `loadInitialContent` reads the textarea and
-                     * calls `setContent(..., { initial: true })`, which dispatches `SetContent`
-                     * because only `no_events` suppresses it. The textarea is empty — the form
-                     * writes through the ControlValueAccessor, never into the DOM element — so this
-                     * handler took that empty string for a user edit, overwrote the value the form
-                     * had already handed us, and reported '' back to the model. `init` then applied
-                     * the value it had just destroyed, and the editor came up blank whatever was
-                     * passed to it. Saving from there stored the empty string as well.
-                     */
-                    editor.on('change input undo redo SetContent', () => {
-                        if (this.writingValue || !this.editor)
-                            return;
-                        this.value = editor.getContent();
-                        this.onChange(this.value);
-                        this.changeDetector.markForCheck();
-                    });
-                    editor.on('blur', () => {
-                        this.onTouched();
-                        this.changeDetector.markForCheck();
-                    });
-                    editor.on('FullscreenStateChanged', (event) => {
-                        this.handleFullscreenChanged(event.state === true);
-                    });
-                    // The content of a classic editor lives in an iframe, so its keystrokes are
-                    // only visible from the editor itself.
-                    editor.on('keydown', (event) => {
-                        if (!this.shouldEscapeLeaveFullscreen(event))
-                            return;
-                        event.preventDefault();
-                        event.stopPropagation();
-                        this.exitFullscreen();
-                    });
-                    editor.on('init', () => {
-                        // Assigned BEFORE applying the value, and that order is the contract with
-                        // the guard above: from here on content events are genuine, and the one
-                        // raised by `applyValue` itself is covered by `writingValue`.
-                        this.editor = editor;
-                        this.applyValue(this.value);
-                        this.applyDisabled(this.disabled);
-                        this.ready.emit(editor);
-                        this.changeDetector.markForCheck();
-                    });
-                },
-            });
-        }
-        catch (error) {
-            if (this.destroyed)
-                return;
-            this.failed.emit(error instanceof Error ? error : new Error(String(error)));
-            this.changeDetector.markForCheck();
-        }
-    }
-    /**
-     * Tears the editor down. TinyMCE keeps global state per instance, so leaving it behind when a
-     * dialog closes leaks both DOM and editor registrations.
-     * @returns void
-     */
-    ngOnDestroy() {
-        this.destroyed = true;
-        // Removing the editor does not raise the full-screen event, so the session is closed by
-        // hand here: the Escape listener would otherwise stay attached to the document forever.
-        this.releaseFullscreen();
-        this.editor?.remove();
-        this.editor = undefined;
-    }
-    /**
-     * Decides whether an Escape press means "leave full screen": it does whenever the editor is
-     * full screen, full stop. While full screen the editor owns Escape, and the press is stopped
-     * here so it can never reach the dialog hosting it — leaving full screen must not also throw
-     * away what is being written.
-     * @param event The keyboard event, from the document or from the editor's content.
-     * @returns True when full screen should be left.
-     */
-    shouldEscapeLeaveFullscreen(event) {
-        return event.key === 'Escape' && this.fullscreen;
-    }
-    /**
-     * Asks the editor to leave full screen. Safe to call when it is not in full screen.
-     * @returns void
-     */
-    exitFullscreen() {
-        if (!this.fullscreen)
-            return;
-        this.editor?.execCommand('mceFullScreen');
-    }
-    /**
-     * Attaches or detaches everything that only makes sense while the editor is full screen.
-     * @param state True when the editor has just entered full screen.
-     * @returns void
-     */
-    handleFullscreenChanged(state) {
-        if (state === this.fullscreen)
-            return;
-        this.fullscreen = state;
-        if (state) {
-            document.addEventListener('keydown', this.onDocumentKeydown, true);
-        }
-        else {
-            this.releaseFullscreen();
-        }
-        this.changeDetector.markForCheck();
-    }
-    /**
-     * Detaches the listener that only makes sense while the editor is full screen.
-     * @returns void
-     */
-    releaseFullscreen() {
-        document.removeEventListener('keydown', this.onDocumentKeydown, true);
-        this.fullscreen = false;
-    }
-    /**
-     * Pushes a value coming from the form into the editor.
-     * @param value The new content, or null/undefined for an empty editor.
-     * @returns void
-     */
-    writeValue(value) {
-        this.value = value ?? '';
-        this.applyValue(this.value);
-    }
-    /**
-     * Registers the callback used to report content changes to the form.
-     * @param fn The callback supplied by Angular forms.
-     * @returns void
-     */
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    /**
-     * Registers the callback used to report the first blur to the form.
-     * @param fn The callback supplied by Angular forms.
-     * @returns void
-     */
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    /**
-     * Enables or disables editing.
-     * @param isDisabled True to switch the editor to read-only.
-     * @returns void
-     */
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.applyDisabled(isDisabled);
-    }
-    /**
-     * Writes content into the editor when it exists, guarding against the echo described on
-     * <see cref="writingValue"/>.
-     * @param value The content to write.
-     * @returns void
-     */
-    applyValue(value) {
-        const editor = this.editor;
-        if (!editor)
-            return;
-        // Comparing with the serialized content avoids resetting the caret on every form patch
-        // that did not actually change anything.
-        if (editor.getContent() === value)
-            return;
-        this.writingValue = true;
-        try {
-            editor.setContent(value);
-        }
-        finally {
-            this.writingValue = false;
-        }
-    }
-    /**
-     * Applies the disabled state to the editor when it exists.
-     * @param isDisabled True to switch the editor to read-only.
-     * @returns void
-     */
-    applyDisabled(isDisabled) {
-        this.editor?.mode.set(isDisabled ? 'readonly' : 'design');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TinymceEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: TinymceEditorDirective, isStandalone: true, selector: "textarea[tinymceEditor], div[tinymceEditor]", inputs: { tinymceConfig: { classPropertyName: "tinymceConfig", publicName: "tinymceConfig", isSignal: true, isRequired: false, transformFunction: null }, tinymceToolbarMode: { classPropertyName: "tinymceToolbarMode", publicName: "tinymceToolbarMode", isSignal: true, isRequired: false, transformFunction: null }, tinymceImageUploader: { classPropertyName: "tinymceImageUploader", publicName: "tinymceImageUploader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ready: "ready", failed: "failed" }, providers: [{
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => TinymceEditorDirective),
-                multi: true
-            }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TinymceEditorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // Both hosts are accepted because the two modes need different ones: the classic editor
-                    // replaces a textarea, the inline editor edits a div in place.
-                    selector: 'textarea[tinymceEditor], div[tinymceEditor]',
-                    providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => TinymceEditorDirective),
-                            multi: true
-                        }]
-                }]
-        }], propDecorators: { tinymceConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "tinymceConfig", required: false }] }], tinymceToolbarMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "tinymceToolbarMode", required: false }] }], tinymceImageUploader: [{ type: i0.Input, args: [{ isSignal: true, alias: "tinymceImageUploader", required: false }] }], ready: [{ type: i0.Output, args: ["ready"] }], failed: [{ type: i0.Output, args: ["failed"] }] } });
-
-/**
- * A dialog that is nothing but an editor: the caller hands it a text and gets the edited one
- * back through {@link saving}.
- *
- * The editor is {@link TinymceEditorDirective} on a plain `<textarea>`, so this dialog costs
- * exactly what any other editor in the application costs — the TinyMCE bundle is fetched on
- * first use and nothing about it reaches the initial chunk.
- */
-class TinyMceEditorComponent {
-    constructor() {
-        /** Emitted with the edited text when the user saves. */
-        this.saving = output();
-        this.dialogRef = inject((MatDialogRef));
-        /** Dialog configuration, injected and exposed as a signal. */
-        this.dialogData = signal((() => {
-            const data = inject(MAT_DIALOG_DATA) ?? {};
-            return { ...data, text: data.text ?? '' };
-        })(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
-        /** Whether the editor is in read-only mode. */
-        this.disabled = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        /**
-         * Why the editor could not be shown, when it could not.
-         *
-         * Without it a failure looked exactly like an empty document: the directive reported it on its
-         * `failed` output, nothing was listening, and the user was left with a blank box and no reason
-         * for it. The message is the directive's own — the bundle did not load, or TinyMCE refused to
-         * start — and it also goes to the console, because that is where whoever is asked about it will
-         * look first.
-         */
-        this.error = signal(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-        /** Current editor content. */
-        this.text = signal('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-        /**
-         * Signal form bound to the editor textarea. The disabled state is pushed to the
-         * TinymceEditorDirective through the ControlValueAccessor interop.
-         */
-        this.textForm = form(this.text, p => {
-            disabled(p, () => this.disabled());
-        });
-        /** The profile handed to the editor directive, merged over its defaults. */
-        this.tinymceConfig = {};
-        const data = this.dialogData();
-        this.text.set(data.text);
-        // The accessor already returns a private copy, so the toolbar override below cannot leak
-        // into the preset shared with the rest of the application.
-        this.tinymceConfig = data.configuration
-            ? { ...data.configuration }
-            : TinymceUtils.TinymceCompactExtendedConfig;
-        // No full screen: the editor already owns the whole dialog.
-        this.tinymceConfig.toolbar = ['undo redo | quickimage insertgroup | formatgroup paragraphgroup | code'];
-        this.disabled.set(data.disabled ?? false);
-    }
-    /**
-     * Records that the editor could not be shown.
-     * @param error - What the directive could not do.
-     * @returns void
-     */
-    failed(error) {
-        console.error('[TinyMceEditorComponent] editor non disponibile', error);
-        this.error.set(error?.message || 'Editor non disponibile.');
-    }
-    /**
-     * Save the current editor content and close the dialog.
-     */
-    ok() {
-        this.saving.emit(this.text() ?? '');
-        setTimeout(() => {
-            this.dialogRef.close();
-        }, 500);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TinyMceEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: TinyMceEditorComponent, isStandalone: true, selector: "ng-component", outputs: { saving: "saving" }, ngImport: i0, template: "<mat-dialog-content style=\"padding: 10px 10px 0 10px\">\n  @if (error()) {\n  <!-- The textarea is gone with the editor that could not replace it: left in place it would be a\n       plain box the form does not write into, which is the empty editor this message exists to\n       explain. -->\n  <div class=\"editor-error\">\n    <div class=\"editor-error-title\">Non \u00E8 stato possibile aprire l'editor.</div>\n    <div class=\"editor-error-detail\">{{ error() }}</div>\n    <div class=\"editor-error-detail\">Il testo non \u00E8 stato modificato: chiudi e riprova.</div>\n  </div>\n  } @else {\n  <textarea tinymceEditor class=\"full-screen-editor\" [tinymceConfig]=\"tinymceConfig\"\n    [formField]=\"textForm\" (failed)=\"failed($event)\"></textarea>\n  }\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\n    <div fxFlex=\"50\">\n      @if(dialogData().onShowInfo) {\n      <button mat-stroked-button (click)=\"dialogData().onShowInfo()\">{{dialogData().infoButtonLabel ?? 'Informazioni'}}\n      </button>\n      }\n    </div>\n    <div fxFlex=\"50\" fxLayoutAlign=\"end\">\n      <!-- Nothing to save when there was no editor: the only way out is the one that changes\n           nothing. -->\n      @if (disabled() || error()) {\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Chiudi</button>\n      } @else {\n      <button mat-flat-button (click)=\"ok()\">Salva</button>\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\n      }\n    </div>\n  </div>\n</mat-dialog-actions>\n", styles: [".mat-mdc-dialog-content{height:calc(100% - 52px)!important;max-height:calc(100% - 52px)!important}::ng-deep .full-screen-editor+.tox-tinymce{height:100%!important}.editor-error{display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center;height:100%;min-height:120px;padding:24px;text-align:center}.editor-error .editor-error-title{font-weight:500}.editor-error .editor-error-detail{font-size:small;opacity:.8}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: TinymceEditorDirective, selector: "textarea[tinymceEditor], div[tinymceEditor]", inputs: ["tinymceConfig", "tinymceToolbarMode", "tinymceImageUploader"], outputs: ["ready", "failed"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1.FxLayoutDirective, selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1.FxFlexDirective, selector: "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i1.FxLayoutAlignDirective, selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1.FxLayoutGapDirective, selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1.FxFlexFillDirective, selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: TinyMceEditorComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogContent, TinymceEditorDirective, FormField, MatDialogActions, FlexLayoutModule,
-                        MatButtonModule, MatDialogClose], template: "<mat-dialog-content style=\"padding: 10px 10px 0 10px\">\n  @if (error()) {\n  <!-- The textarea is gone with the editor that could not replace it: left in place it would be a\n       plain box the form does not write into, which is the empty editor this message exists to\n       explain. -->\n  <div class=\"editor-error\">\n    <div class=\"editor-error-title\">Non \u00E8 stato possibile aprire l'editor.</div>\n    <div class=\"editor-error-detail\">{{ error() }}</div>\n    <div class=\"editor-error-detail\">Il testo non \u00E8 stato modificato: chiudi e riprova.</div>\n  </div>\n  } @else {\n  <textarea tinymceEditor class=\"full-screen-editor\" [tinymceConfig]=\"tinymceConfig\"\n    [formField]=\"textForm\" (failed)=\"failed($event)\"></textarea>\n  }\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\n    <div fxFlex=\"50\">\n      @if(dialogData().onShowInfo) {\n      <button mat-stroked-button (click)=\"dialogData().onShowInfo()\">{{dialogData().infoButtonLabel ?? 'Informazioni'}}\n      </button>\n      }\n    </div>\n    <div fxFlex=\"50\" fxLayoutAlign=\"end\">\n      <!-- Nothing to save when there was no editor: the only way out is the one that changes\n           nothing. -->\n      @if (disabled() || error()) {\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Chiudi</button>\n      } @else {\n      <button mat-flat-button (click)=\"ok()\">Salva</button>\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\n      }\n    </div>\n  </div>\n</mat-dialog-actions>\n", styles: [".mat-mdc-dialog-content{height:calc(100% - 52px)!important;max-height:calc(100% - 52px)!important}::ng-deep .full-screen-editor+.tox-tinymce{height:100%!important}.editor-error{display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center;height:100%;min-height:120px;padding:24px;text-align:center}.editor-error .editor-error-title{font-weight:500}.editor-error .editor-error-detail{font-size:small;opacity:.8}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { saving: [{ type: i0.Output, args: ["saving"] }] } });
-
-/*
- * Public API Surface of @arsedizioni/ars-utils/ui.tinymce
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, ElementRef, Service, forwardRef, inject, input, output, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { ThemeService } from "@arsedizioni/ars-utils/core";
+import { FormField, disabled, form } from "@angular/forms/signals";
+import * as i2 from "@angular/material/button";
+import { MatButtonModule } from "@angular/material/button";
+import { MAT_DIALOG_DATA, MatDialogActions, MatDialogClose, MatDialogContent, MatDialogRef } from "@angular/material/dialog";
+import * as i1 from "@arsedizioni/ars-utils/ui";
+import { FlexLayoutModule } from "@arsedizioni/ars-utils/ui";
+var TinymceUtils = class TinymceUtils {
+	static {
+		this.FULL = {
+			height: 500,
+			width: "100%",
+			min_height: 250,
+			onboarding: false,
+			browser_spellcheck: true,
+			custom_undo_redo_levels: 50,
+			nonbreaking_force_tab: true,
+			nonbreaking_wrap: false,
+			help_tabs: [
+				"shortcuts",
+				"keyboardnav",
+				"versions"
+			],
+			menubar: false,
+			plugins: "advlist anchor autolink autosave charmap code fullscreen help image insertdatetime link lists media nonbreaking pagebreak preview quickbars searchreplace table visualblocks visualchars",
+			toolbar: ["fullscreen | undo redo searchreplace | code preview | link image media charmap nonbreaking | table tableprops tabledelete", "bold italic superscript subscript forecolor backcolor | alignleft aligncenter alignright alignjustify | removeformat | bullist numlist"],
+			quickbars_insert_toolbar: false,
+			quickbars_selection_toolbar: "removeformat | bold italic | superscript subscript | quicklink h2 h3 blockquote",
+			style_formats: [{
+				title: "Immagini float",
+				items: [{
+					title: "Immagine a SX",
+					selector: "img",
+					styles: {
+						float: "left",
+						margin: "0 10px 0 10px"
+					}
+				}, {
+					title: "Immagine a DX",
+					selector: "img",
+					styles: {
+						float: "right",
+						margin: "0 10px 0 10px"
+					}
+				}]
+			}, {
+				title: "Formati",
+				items: [
+					{
+						title: "Grassetto",
+						format: "bold"
+					},
+					{
+						title: "Corsivo",
+						format: "italic"
+					},
+					{
+						title: "Sottolineato",
+						format: "underline"
+					},
+					{
+						title: "Barrato",
+						format: "strikethrough"
+					},
+					{
+						title: "Superscript",
+						format: "superscript"
+					},
+					{
+						title: "Subscript",
+						format: "subscript"
+					},
+					{
+						title: "Codice",
+						format: "code"
+					}
+				]
+			}],
+			formats: {
+				underline: {
+					inline: "span",
+					styles: { "text-decoration": "underline" },
+					exact: true
+				},
+				strikethrough: {
+					inline: "span",
+					styles: { "text-decoration": "line-through" },
+					exact: true
+				}
+			},
+			insertdatetime_formats: [
+				"%d/%m/%Y",
+				"%d %b %Y",
+				"%A, %d %B %Y"
+			],
+			link_default_target: "_blank",
+			link_title: true,
+			link_assume_external_targets: "https",
+			link_class_list: [{
+				title: "Nessuno",
+				value: ""
+			}, {
+				title: "Rilevante",
+				value: "relevant"
+			}],
+			link_context_toolbar: true,
+			link_quicklink: true,
+			image_advtab: true,
+			image_caption: true,
+			image_title: true
+		};
+	}
+	static {
+		this.COMPACT = {
+			...TinymceUtils.FULL,
+			height: 200,
+			min_height: 200,
+			max_height: 500,
+			statusbar: false,
+			contextmenu: false,
+			toolbar_location: "bottom",
+			plugins: "advlist anchor autolink autoresize autosave charmap code image insertdatetime link lists media nonbreaking preview quickbars searchreplace table visualblocks visualchars",
+			toolbar: ["undo redo | quickimage | formatgroup paragraphgroup"],
+			toolbar_groups: {
+				formatgroup: {
+					icon: "format",
+					tooltip: "Formattazione",
+					items: "bold italic underline superscript subscript | forecolor backcolor | removeformat"
+				},
+				paragraphgroup: {
+					icon: "paragraph",
+					tooltip: "Formato paragrafo",
+					items: "h1 h2 h3 | bullist numlist | alignleft aligncenter alignright alignjustify | indent outdent"
+				},
+				insertgroup: {
+					icon: "plus",
+					tooltip: "Inserisci",
+					items: "quickimage media | link charmap nonbreaking | table tableprops tabledelete"
+				}
+			},
+			quickbars_insert_toolbar: "quickimage",
+			link_class_list: []
+		};
+	}
+	static {
+		this.COMPACT_EXTENDED = {
+			...TinymceUtils.COMPACT,
+			plugins: "advlist anchor autolink autoresize autosave charmap code fullscreen image insertdatetime link lists media nonbreaking preview quickbars searchreplace table visualblocks visualchars",
+			toolbar: ["undo redo | quickimage insertgroup | formatgroup paragraphgroup | code | fullscreen"]
+		};
+	}
+	static get TinymceConfig() {
+		return structuredClone(TinymceUtils.FULL);
+	}
+	static get TinymceCompactConfig() {
+		return structuredClone(TinymceUtils.COMPACT);
+	}
+	static get TinymceCompactExtendedConfig() {
+		return structuredClone(TinymceUtils.COMPACT_EXTENDED);
+	}
+};
+var TinymceLoaderService = class TinymceLoaderService {
+	get baseUrl() {
+		return new URL("assets/tinymce", document.baseURI).href.replace(/\/$/, "");
+	}
+	load() {
+		if (window.tinymce) return Promise.resolve(window.tinymce);
+		this.pending ??= new Promise((resolve, reject) => {
+			const script = document.createElement("script");
+			script.src = `${this.baseUrl}/tinymce.min.js`;
+			script.async = true;
+			script.referrerPolicy = "origin";
+			script.onload = () => {
+				if (window.tinymce) resolve(window.tinymce);
+				else {
+					this.pending = void 0;
+					reject(/* @__PURE__ */ new Error("TinyMCE caricato ma non disponibile."));
+				}
+			};
+			script.onerror = () => {
+				this.pending = void 0;
+				script.remove();
+				reject(/* @__PURE__ */ new Error("Impossibile caricare l'editor."));
+			};
+			document.head.appendChild(script);
+		});
+		return this.pending;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: TinymceLoaderService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Service
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareService({
+			minVersion: "22.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: TinymceLoaderService
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: TinymceLoaderService,
+	decorators: [{ type: Service }]
+});
+var TinymceEditorDirective = class TinymceEditorDirective {
+	constructor() {
+		this.tinymceConfig = input({}, ...ngDevMode ? [{ debugName: "tinymceConfig" }] : /* istanbul ignore next */ []);
+		this.tinymceToolbarMode = input("fixed", ...ngDevMode ? [{ debugName: "tinymceToolbarMode" }] : /* istanbul ignore next */ []);
+		this.tinymceImageUploader = input(void 0, ...ngDevMode ? [{ debugName: "tinymceImageUploader" }] : /* istanbul ignore next */ []);
+		this.ready = output();
+		this.failed = output();
+		this.host = inject(ElementRef);
+		this.loader = inject(TinymceLoaderService);
+		this.themeService = inject(ThemeService);
+		this.changeDetector = inject(ChangeDetectorRef);
+		this.fullscreen = false;
+		this.destroyed = false;
+		this.writingValue = false;
+		this.value = "";
+		this.disabled = false;
+		this.onChange = () => {};
+		this.onTouched = () => {};
+		this.onDocumentKeydown = (event) => {
+			if (!this.shouldEscapeLeaveFullscreen(event)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			this.exitFullscreen();
+		};
+	}
+	async ngOnInit() {
+		try {
+			const tinymce = await this.loader.load();
+			if (this.destroyed) return;
+			const dark = this.themeService.getTheme() === "dark";
+			const uploader = this.tinymceImageUploader();
+			const inline = this.tinymceToolbarMode() === "inline";
+			if (inline && this.host.nativeElement.tagName === "TEXTAREA") throw new Error("La modalità inline richiede un <div>, non un <textarea>.");
+			const defaults = {
+				license_key: "gpl",
+				language: "it",
+				branding: false,
+				promotion: false,
+				menubar: false,
+				statusbar: false,
+				resize: false,
+				toolbar_sticky: true,
+				...inline ? {} : { height: 360 },
+				ui_mode: "split",
+				skin: dark ? "oxide-dark" : "oxide",
+				content_css: dark ? "dark" : "default",
+				convert_urls: false,
+				plugins: "advlist autolink lists link image table charmap searchreplace code fullscreen",
+				toolbar: "undo redo | blocks | bold italic underline | forecolor backcolor | bullist numlist | link image table | removeformat code fullscreen",
+				content_style: "body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }",
+				automatic_uploads: !!uploader,
+				paste_data_images: !!uploader,
+				images_file_types: "jpeg,jpg,png,gif,webp",
+				file_picker_types: uploader ? "image" : "",
+				images_upload_handler: uploader ? (blobInfo) => uploader(new File([blobInfo.blob()], blobInfo.filename(), { type: blobInfo.blob().type })) : void 0
+			};
+			await tinymce.init({
+				...defaults,
+				...this.tinymceConfig(),
+				target: this.host.nativeElement,
+				base_url: this.loader.baseUrl,
+				inline,
+				setup: (editor) => {
+					editor.on("change input undo redo SetContent", () => {
+						if (this.writingValue || !this.editor) return;
+						this.value = editor.getContent();
+						this.onChange(this.value);
+						this.changeDetector.markForCheck();
+					});
+					editor.on("blur", () => {
+						this.onTouched();
+						this.changeDetector.markForCheck();
+					});
+					editor.on("FullscreenStateChanged", (event) => {
+						this.handleFullscreenChanged(event.state === true);
+					});
+					editor.on("keydown", (event) => {
+						if (!this.shouldEscapeLeaveFullscreen(event)) return;
+						event.preventDefault();
+						event.stopPropagation();
+						this.exitFullscreen();
+					});
+					editor.on("init", () => {
+						this.editor = editor;
+						this.applyValue(this.value);
+						this.applyDisabled(this.disabled);
+						this.ready.emit(editor);
+						this.changeDetector.markForCheck();
+					});
+				}
+			});
+		} catch (error) {
+			if (this.destroyed) return;
+			this.failed.emit(error instanceof Error ? error : new Error(String(error)));
+			this.changeDetector.markForCheck();
+		}
+	}
+	ngOnDestroy() {
+		this.destroyed = true;
+		this.releaseFullscreen();
+		this.editor?.remove();
+		this.editor = void 0;
+	}
+	shouldEscapeLeaveFullscreen(event) {
+		return event.key === "Escape" && this.fullscreen;
+	}
+	exitFullscreen() {
+		if (!this.fullscreen) return;
+		this.editor?.execCommand("mceFullScreen");
+	}
+	handleFullscreenChanged(state) {
+		if (state === this.fullscreen) return;
+		this.fullscreen = state;
+		if (state) document.addEventListener("keydown", this.onDocumentKeydown, true);
+		else this.releaseFullscreen();
+		this.changeDetector.markForCheck();
+	}
+	releaseFullscreen() {
+		document.removeEventListener("keydown", this.onDocumentKeydown, true);
+		this.fullscreen = false;
+	}
+	writeValue(value) {
+		this.value = value ?? "";
+		this.applyValue(this.value);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.disabled = isDisabled;
+		this.applyDisabled(isDisabled);
+	}
+	applyValue(value) {
+		const editor = this.editor;
+		if (!editor) return;
+		if (editor.getContent() === value) return;
+		this.writingValue = true;
+		try {
+			editor.setContent(value);
+		} finally {
+			this.writingValue = false;
+		}
+	}
+	applyDisabled(isDisabled) {
+		this.editor?.mode.set(isDisabled ? "readonly" : "design");
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: TinymceEditorDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.1",
+			type: TinymceEditorDirective,
+			isStandalone: true,
+			selector: "textarea[tinymceEditor], div[tinymceEditor]",
+			inputs: {
+				tinymceConfig: {
+					classPropertyName: "tinymceConfig",
+					publicName: "tinymceConfig",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tinymceToolbarMode: {
+					classPropertyName: "tinymceToolbarMode",
+					publicName: "tinymceToolbarMode",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tinymceImageUploader: {
+					classPropertyName: "tinymceImageUploader",
+					publicName: "tinymceImageUploader",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				ready: "ready",
+				failed: "failed"
+			},
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => TinymceEditorDirective),
+				multi: true
+			}],
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: TinymceEditorDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "textarea[tinymceEditor], div[tinymceEditor]",
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => TinymceEditorDirective),
+				multi: true
+			}]
+		}]
+	}],
+	propDecorators: {
+		tinymceConfig: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tinymceConfig",
+				required: false
+			}]
+		}],
+		tinymceToolbarMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tinymceToolbarMode",
+				required: false
+			}]
+		}],
+		tinymceImageUploader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tinymceImageUploader",
+				required: false
+			}]
+		}],
+		ready: [{
+			type: i0.Output,
+			args: ["ready"]
+		}],
+		failed: [{
+			type: i0.Output,
+			args: ["failed"]
+		}]
+	}
+});
+var TinyMceEditorComponent = class TinyMceEditorComponent {
+	constructor() {
+		this.saving = output();
+		this.dialogRef = inject(MatDialogRef);
+		this.dialogData = signal((() => {
+			const data = inject(MAT_DIALOG_DATA) ?? {};
+			return {
+				...data,
+				text: data.text ?? ""
+			};
+		})(), ...ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []);
+		this.disabled = signal(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this.error = signal(void 0, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+		this.text = signal("", ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+		this.textForm = form(this.text, (p) => {
+			disabled(p, () => this.disabled());
+		});
+		this.tinymceConfig = {};
+		const data = this.dialogData();
+		this.text.set(data.text);
+		this.tinymceConfig = data.configuration ? { ...data.configuration } : TinymceUtils.TinymceCompactExtendedConfig;
+		this.tinymceConfig.toolbar = ["undo redo | quickimage insertgroup | formatgroup paragraphgroup | code"];
+		this.disabled.set(data.disabled ?? false);
+	}
+	failed(error) {
+		console.error("[TinyMceEditorComponent] editor non disponibile", error);
+		this.error.set(error?.message || "Editor non disponibile.");
+	}
+	ok() {
+		this.saving.emit(this.text() ?? "");
+		setTimeout(() => {
+			this.dialogRef.close();
+		}, 500);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.1",
+			ngImport: i0,
+			type: TinyMceEditorComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.1",
+			type: TinyMceEditorComponent,
+			isStandalone: true,
+			selector: "ng-component",
+			outputs: { saving: "saving" },
+			ngImport: i0,
+			template: "<mat-dialog-content style=\"padding: 10px 10px 0 10px\">\n  @if (error()) {\n  <!-- The textarea is gone with the editor that could not replace it: left in place it would be a\n       plain box the form does not write into, which is the empty editor this message exists to\n       explain. -->\n  <div class=\"editor-error\">\n    <div class=\"editor-error-title\">Non è stato possibile aprire l'editor.</div>\n    <div class=\"editor-error-detail\">{{ error() }}</div>\n    <div class=\"editor-error-detail\">Il testo non è stato modificato: chiudi e riprova.</div>\n  </div>\n  } @else {\n  <textarea tinymceEditor class=\"full-screen-editor\" [tinymceConfig]=\"tinymceConfig\"\n    [formField]=\"textForm\" (failed)=\"failed($event)\"></textarea>\n  }\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\n    <div fxFlex=\"50\">\n      @if(dialogData().onShowInfo) {\n      <button mat-stroked-button (click)=\"dialogData().onShowInfo()\">{{dialogData().infoButtonLabel ?? 'Informazioni'}}\n      </button>\n      }\n    </div>\n    <div fxFlex=\"50\" fxLayoutAlign=\"end\">\n      <!-- Nothing to save when there was no editor: the only way out is the one that changes\n           nothing. -->\n      @if (disabled() || error()) {\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Chiudi</button>\n      } @else {\n      <button mat-flat-button (click)=\"ok()\">Salva</button>\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\n      }\n    </div>\n  </div>\n</mat-dialog-actions>\n",
+			styles: [".mat-mdc-dialog-content{height:calc(100% - 52px)!important;max-height:calc(100% - 52px)!important}::ng-deep .full-screen-editor+.tox-tinymce{height:100%!important}.editor-error{display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center;height:100%;min-height:120px;padding:24px;text-align:center}.editor-error .editor-error-title{font-weight:500}.editor-error .editor-error-detail{font-size:small;opacity:.8}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: MatDialogContent,
+					selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]"
+				},
+				{
+					kind: "directive",
+					type: TinymceEditorDirective,
+					selector: "textarea[tinymceEditor], div[tinymceEditor]",
+					inputs: [
+						"tinymceConfig",
+						"tinymceToolbarMode",
+						"tinymceImageUploader"
+					],
+					outputs: ["ready", "failed"]
+				},
+				{
+					kind: "directive",
+					type: FormField,
+					selector: "[formField]",
+					inputs: ["formField"],
+					exportAs: ["formField"]
+				},
+				{
+					kind: "directive",
+					type: MatDialogActions,
+					selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]",
+					inputs: ["align"]
+				},
+				{
+					kind: "ngmodule",
+					type: FlexLayoutModule
+				},
+				{
+					kind: "directive",
+					type: i1.FxLayoutDirective,
+					selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ",
+					inputs: [
+						"fxLayout",
+						"fxLayout.xs",
+						"fxLayout.sm",
+						"fxLayout.md",
+						"fxLayout.lg",
+						"fxLayout.xl",
+						"fxLayout.lt-sm",
+						"fxLayout.lt-md",
+						"fxLayout.lt-lg",
+						"fxLayout.lt-xl",
+						"fxLayout.gt-xs",
+						"fxLayout.gt-sm",
+						"fxLayout.gt-md",
+						"fxLayout.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i1.FxFlexDirective,
+					selector: "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ",
+					inputs: [
+						"fxFlex",
+						"fxFlex.xs",
+						"fxFlex.sm",
+						"fxFlex.md",
+						"fxFlex.lg",
+						"fxFlex.xl",
+						"fxFlex.lt-sm",
+						"fxFlex.lt-md",
+						"fxFlex.lt-lg",
+						"fxFlex.lt-xl",
+						"fxFlex.gt-xs",
+						"fxFlex.gt-sm",
+						"fxFlex.gt-md",
+						"fxFlex.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i1.FxLayoutAlignDirective,
+					selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ",
+					inputs: [
+						"fxLayoutAlign",
+						"fxLayoutAlign.xs",
+						"fxLayoutAlign.sm",
+						"fxLayoutAlign.md",
+						"fxLayoutAlign.lg",
+						"fxLayoutAlign.xl",
+						"fxLayoutAlign.lt-sm",
+						"fxLayoutAlign.lt-md",
+						"fxLayoutAlign.lt-lg",
+						"fxLayoutAlign.lt-xl",
+						"fxLayoutAlign.gt-xs",
+						"fxLayoutAlign.gt-sm",
+						"fxLayoutAlign.gt-md",
+						"fxLayoutAlign.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i1.FxLayoutGapDirective,
+					selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ",
+					inputs: [
+						"fxLayoutGap",
+						"fxLayoutGap.xs",
+						"fxLayoutGap.sm",
+						"fxLayoutGap.md",
+						"fxLayoutGap.lg",
+						"fxLayoutGap.xl",
+						"fxLayoutGap.lt-sm",
+						"fxLayoutGap.lt-md",
+						"fxLayoutGap.lt-lg",
+						"fxLayoutGap.lt-xl",
+						"fxLayoutGap.gt-xs",
+						"fxLayoutGap.gt-sm",
+						"fxLayoutGap.gt-md",
+						"fxLayoutGap.gt-lg"
+					]
+				},
+				{
+					kind: "directive",
+					type: i1.FxFlexFillDirective,
+					selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ",
+					inputs: [
+						"fxFlexFill",
+						"fxFill",
+						"fxFlexFill.xs",
+						"fxFlexFill.sm",
+						"fxFlexFill.md",
+						"fxFlexFill.lg",
+						"fxFlexFill.xl",
+						"fxFlexFill.lt-sm",
+						"fxFlexFill.lt-md",
+						"fxFlexFill.lt-lg",
+						"fxFlexFill.lt-xl",
+						"fxFlexFill.gt-xs",
+						"fxFlexFill.gt-sm",
+						"fxFlexFill.gt-md",
+						"fxFlexFill.gt-lg"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: MatButtonModule
+				},
+				{
+					kind: "component",
+					type: i2.MatButton,
+					selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+					inputs: ["matButton"],
+					exportAs: ["matButton", "matAnchor"]
+				},
+				{
+					kind: "directive",
+					type: MatDialogClose,
+					selector: "[mat-dialog-close], [matDialogClose]",
+					inputs: [
+						"aria-label",
+						"type",
+						"mat-dialog-close",
+						"matDialogClose"
+					],
+					exportAs: ["matDialogClose"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: TinyMceEditorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				MatDialogContent,
+				TinymceEditorDirective,
+				FormField,
+				MatDialogActions,
+				FlexLayoutModule,
+				MatButtonModule,
+				MatDialogClose
+			],
+			template: "<mat-dialog-content style=\"padding: 10px 10px 0 10px\">\n  @if (error()) {\n  <!-- The textarea is gone with the editor that could not replace it: left in place it would be a\n       plain box the form does not write into, which is the empty editor this message exists to\n       explain. -->\n  <div class=\"editor-error\">\n    <div class=\"editor-error-title\">Non è stato possibile aprire l'editor.</div>\n    <div class=\"editor-error-detail\">{{ error() }}</div>\n    <div class=\"editor-error-detail\">Il testo non è stato modificato: chiudi e riprova.</div>\n  </div>\n  } @else {\n  <textarea tinymceEditor class=\"full-screen-editor\" [tinymceConfig]=\"tinymceConfig\"\n    [formField]=\"textForm\" (failed)=\"failed($event)\"></textarea>\n  }\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\n    <div fxFlex=\"50\">\n      @if(dialogData().onShowInfo) {\n      <button mat-stroked-button (click)=\"dialogData().onShowInfo()\">{{dialogData().infoButtonLabel ?? 'Informazioni'}}\n      </button>\n      }\n    </div>\n    <div fxFlex=\"50\" fxLayoutAlign=\"end\">\n      <!-- Nothing to save when there was no editor: the only way out is the one that changes\n           nothing. -->\n      @if (disabled() || error()) {\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Chiudi</button>\n      } @else {\n      <button mat-flat-button (click)=\"ok()\">Salva</button>\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\n      }\n    </div>\n  </div>\n</mat-dialog-actions>\n",
+			styles: [".mat-mdc-dialog-content{height:calc(100% - 52px)!important;max-height:calc(100% - 52px)!important}::ng-deep .full-screen-editor+.tox-tinymce{height:100%!important}.editor-error{display:flex;flex-direction:column;gap:6px;justify-content:center;align-items:center;height:100%;min-height:120px;padding:24px;text-align:center}.editor-error .editor-error-title{font-weight:500}.editor-error .editor-error-detail{font-size:small;opacity:.8}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { saving: [{
+		type: i0.Output,
+		args: ["saving"]
+	}] }
+});
 export { TinyMceEditorComponent, TinymceEditorDirective, TinymceLoaderService, TinymceUtils };
-//# sourceMappingURL=arsedizioni-ars-utils-ui.tinymce.mjs.map
+
+//# sourceMappingURL=arsedizioni-ars-utils-ui.tinymce.mjs.map