@arsedizioni/ars-utils 22.5.9 → 22.5.11

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

@@ -1,80 +1,69 @@
 import * as i0 from '@angular/core';
-import { output, inject, signal, ChangeDetectionStrategy, Component } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
-import { SystemUtils } from '@arsedizioni/ars-utils/core';
+import { Service, input, output, inject, ElementRef, ChangeDetectorRef, forwardRef, Directive, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { ThemeService } from '@arsedizioni/ars-utils/core';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
 import * as i2 from '@arsedizioni/ars-utils/ui';
 import { FlexLayoutModule } from '@arsedizioni/ars-utils/ui';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { EditorComponent } from '@tinymce/tinymce-angular';
 
+/**
+ * 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 {
     /**
-     * Returns `true` when the user agent currently prefers a dark color scheme.
-     * Evaluated on demand (not frozen at module load) and SSR-safe.
+     * 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 prefersDark() {
-        return typeof window !== 'undefined'
-            && typeof window.matchMedia === 'function'
-            && window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-    /** URL of the TinyMCE script hosted on the Tiny Cloud CDN. */
-    static { this.CDN_URL = 'https://cdn.tiny.cloud/1/5lnoc6ohmpjau6zyzgqyhyf52cueoennkcs8v1yfoak57ku9/tinymce/7/tinymce.min.js'; }
-    /** URL of the locally bundled TinyMCE script. */
-    static { this.LOCAL_URL = '/assets/tinymce/tinymce.min.js'; }
-    /**
-     * Full-featured TinyMCE base configuration with all standard plugins and toolbar.
-     */
-    static { this.TinymceConfig = {
-        base_url: 'assets/tinymce',
-        suffix: '.min',
-        license_key: 'gpl', // per evitare il warning riportarla direttamente nell'html: <editor licenseKey="gpl" ...></editor>
-        language: 'it',
-        language_url: "assets/tinymce/langs/it.js",
+    static { this.FULL = {
         height: 500,
         width: '100%',
         min_height: 250,
-        ui_mode: 'split',
         onboarding: false,
-        branding: false,
-        convert_urls: false,
-        quickbars_insert_toolbar: false,
-        quickbars_selection_toolbar: 'removeformat | bold italic | superscript subscript | quicklink h2 h3 blockquote',
-        fullpage_default_doctype: '<!DOCTYPE html>',
-        fullpage_default_encoding: 'UTF-8',
-        fullpage_default_font_family: '\'Helvetica Neue\', sans-serif', // '\'Times New Roman\', Georgia, Serif',
-        fullpage_default_xml_pi: false,
-        fullpage_hide_in_source_view: false,
         browser_spellcheck: true,
-        spellchecker_language: 'it_IT',
-        save_enablewhendirty: true,
         custom_undo_redo_levels: 50,
-        nonbreaking_force_tab: true, // inserisce 3 &nbsp; per ogni pressione di TAB
+        // Three &nbsp; per TAB, and no wrapping of the inserted spaces.
+        nonbreaking_force_tab: true,
         nonbreaking_wrap: false,
         help_tabs: ['shortcuts', 'keyboardnav', 'versions'],
-        plugins: 'advlist anchor autolink autosave charmap code fullscreen help hr image insertdatetime link lists media table nonbreaking paste preview print quickbars searchreplace  textpattern visualblocks visualchars',
         menubar: false,
-        skin: TinymceUtils.prefersDark() ? "oxide-dark" : "oxide",
-        content_css: TinymceUtils.prefersDark() ? "dark" : "default",
+        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 openCodeMirrorButton preview  fullpage | link image media insertMediaButton charmap nonbreaking | table tableprops tabledelete',
-            'bold italic superscript subscript forecolor backcolor | alignleft aligncenter alignright alignjustify | removeformat | bullist numlist checklist'
+            '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: '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' } }
                 ]
             },
             {
@@ -89,6 +78,8 @@ class TinymceUtils {
                 ]
             }
         ],
+        // 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 }
@@ -103,91 +94,467 @@ class TinymceUtils {
         ],
         link_context_toolbar: true,
         link_quicklink: true,
-        rel_list: false,
         image_advtab: true,
-        paste_data_images: true,
         image_caption: true,
         image_title: true,
-        automatic_uploads: true,
-        images_reuse_filename: true,
-        images_upload_credentials: true,
-        file_picker_types: 'file image',
     }; }
     /**
-     * Compact TinyMCE configuration with autoresize, bottom toolbar, and grouped toolbar buttons.
-     * Extends `TinymceConfig` with reduced height and a simplified toolbar.
+     * 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.TinymceCompactConfig = Object.assign(structuredClone(this.TinymceConfig), {
+    static { this.COMPACT = {
+        ...TinymceUtils.FULL,
         height: 200,
-        width: '100%',
-        suffix: '.min',
-        license_key: 'gpl',
-        ui_mode: 'split',
         min_height: 200,
         max_height: 500,
-        quickbars_insert_toolbar: 'quickimage hr',
-        quickbars_selection_toolbar: 'removeformat | bold italic | superscript subscript | quicklink h2 h3 blockquote',
-        plugins: 'advlist anchor autolink autosave autoresize charmap code image insertdatetime link lists media table nonbreaking preview quickbars searchreplace  visualblocks visualchars',
         statusbar: false,
-        menubar: false,
         contextmenu: false,
         toolbar_location: 'bottom',
-        toolbar: ['undo redo | quickimage | formatgroup paragraphgroup '],
+        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: 'Formatting',
+                tooltip: 'Formattazione',
                 items: 'bold italic underline superscript subscript | forecolor backcolor | removeformat'
             },
             paragraphgroup: {
                 icon: 'paragraph',
-                tooltip: 'Paragraph format',
+                tooltip: 'Formato paragrafo',
                 items: 'h1 h2 h3 | bullist numlist | alignleft aligncenter alignright alignjustify | indent outdent'
             },
             insertgroup: {
                 icon: 'plus',
-                tooltip: 'Insert',
+                tooltip: 'Inserisci',
                 items: 'quickimage media | link charmap nonbreaking | table tableprops tabledelete'
             }
         },
-        formats: {
-            underline: { inline: 'span', styles: { 'text-decoration': 'underline' }, exact: true },
-            strikethrough: { inline: 'span', styles: { 'text-decoration': 'line-through' }, exact: true }
-        },
-        link_default_target: '_blank',
-        link_title: true,
-        link_assume_external_targets: 'https',
+        quickbars_insert_toolbar: 'quickimage',
         link_class_list: [],
-    }); }
-    /**
-     * Extended compact TinyMCE configuration that adds fullscreen support and an insert group.
-     * Extends `TinymceCompactConfig`.
-     */
-    static { this.TinymceCompactExtendedConfig = Object.assign(structuredClone(this.TinymceCompactConfig), {
-        license_key: 'gpl',
-        ui_mode: 'split',
-        plugins: 'advlist anchor autolink autosave autoresize charmap code image insertdatetime fullscreen link lists media table nonbreaking preview quickbars searchreplace visualblocks visualchars',
-        toolbar: ['undo redo | quickimage insertgroup | formatgroup paragraphgroup | code | fullscreen '],
-    }); }
-    /**
-     * Inject the TinyMCE script tag into the document head if it is not already present.
-     * @param useCDN - When `true`, loads from the Tiny Cloud CDN; otherwise uses the local asset.
-     */
-    static loadTinyMCEScript(useCDN) {
-        if (typeof document === 'undefined')
-            return; // SSR: no-op
-        const url = useCDN === true ? this.CDN_URL : this.LOCAL_URL;
-        if (!document.querySelector(`script[src="${url}"]`)) {
+    }; }
+    /** 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 = url;
+            script.src = `${this.baseUrl}/tinymce.min.js`;
+            script.async = true;
             script.referrerPolicy = 'origin';
-            script.onerror = () => console.error(`Impossibile caricare lo script TinyMCE da: ${url}`);
+            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.3", ngImport: i0, type: TinymceLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Service }); }
+    static { this.ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.3", ngImport: i0, type: TinymceLoaderService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", 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 guard keeps our own writes from bouncing back.
+                    editor.on('change input undo redo SetContent', () => {
+                        if (this.writingValue)
+                            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', () => {
+                        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.3", ngImport: i0, type: TinymceEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", 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.3", 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"] }] } });
 
-class FullScreenEditorComponent {
+/**
+ * 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();
@@ -203,17 +570,17 @@ class FullScreenEditorComponent {
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /** Current editor content, kept as a plain field for [(ngModel)] two-way binding. */
         this.text = '';
-        /** TinyMCE editor configuration. */
+        /** The profile handed to the editor directive, merged over its defaults. */
         this.tinymceConfig = {};
         const data = this.dialogData();
         this.text = data.text;
-        if (data.configuration) {
-            this.tinymceConfig = { ...data.configuration, license_key: 'gpl' };
-        }
-        else {
-            this.tinymceConfig = SystemUtils.clone(TinymceUtils.TinymceCompactExtendedConfig);
-        }
-        this.tinymceConfig['toolbar'] = ['undo redo | formatgroup paragraphgroup insertgroup | code openCodeMirrorButton'];
+        // 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);
     }
     /**
@@ -225,13 +592,13 @@ class FullScreenEditorComponent {
             this.dialogRef.close();
         }, 500);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: FullScreenEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: FullScreenEditorComponent, isStandalone: true, selector: "ng-component", outputs: { saving: "saving" }, ngImport: i0, template: "<mat-dialog-content style=\"padding: 10px 10px 0 10px\">\r\n  <editor style=\"height: 100%;\" [init]=\"tinymceConfig\" class=\"full-screen-editor\" [disabled]=\"disabled()\"\r\n    [(ngModel)]=\"text\" licenseKey=\"gpl\">\r\n  </editor>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\r\n    <div fxFlex=\"50\">\r\n      @if(dialogData().onShowInfo) {\r\n      <button mat-stroked-button (click)=\"dialogData().onShowInfo()\">{{dialogData().infoButtonLabel ?? 'Informazioni'}}\r\n      </button>\r\n      }\r\n    </div>\r\n    <div fxFlex=\"50\" fxLayoutAlign=\"end\">\r\n      @if (disabled()) {\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Chiudi</button>\r\n      } @else {\r\n      <button mat-flat-button (click)=\"ok()\">Salva</button>\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</mat-dialog-actions>\r\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}\n"], dependencies: [{ kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: EditorComponent, selector: "editor", inputs: ["cloudChannel", "apiKey", "licenseKey", "init", "id", "initialValue", "outputFormat", "inline", "tagName", "plugins", "toolbar", "modelEvents", "allowedEvents", "ignoreEvents", "readonly", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i2.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: i2.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: i2.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: i2.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: i2.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: i3.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: TinyMceEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: TinyMceEditorComponent, isStandalone: true, selector: "ng-component", outputs: { saving: "saving" }, ngImport: i0, template: "<mat-dialog-content style=\"padding: 10px 10px 0 10px\">\r\n  <textarea tinymceEditor class=\"full-screen-editor\" name=\"text\" [tinymceConfig]=\"tinymceConfig\"\r\n    [disabled]=\"disabled()\" [(ngModel)]=\"text\"></textarea>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\r\n    <div fxFlex=\"50\">\r\n      @if(dialogData().onShowInfo) {\r\n      <button mat-stroked-button (click)=\"dialogData().onShowInfo()\">{{dialogData().infoButtonLabel ?? 'Informazioni'}}\r\n      </button>\r\n      }\r\n    </div>\r\n    <div fxFlex=\"50\" fxLayoutAlign=\"end\">\r\n      @if (disabled()) {\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Chiudi</button>\r\n      } @else {\r\n      <button mat-flat-button (click)=\"ok()\">Salva</button>\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</mat-dialog-actions>\r\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}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i2.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: i2.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: i2.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: i2.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: i2.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: i3.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.3", ngImport: i0, type: FullScreenEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: TinyMceEditorComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogContent, EditorComponent, FormsModule, MatDialogActions, FlexLayoutModule,
-                        MatButtonModule, MatDialogClose], template: "<mat-dialog-content style=\"padding: 10px 10px 0 10px\">\r\n  <editor style=\"height: 100%;\" [init]=\"tinymceConfig\" class=\"full-screen-editor\" [disabled]=\"disabled()\"\r\n    [(ngModel)]=\"text\" licenseKey=\"gpl\">\r\n  </editor>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\r\n    <div fxFlex=\"50\">\r\n      @if(dialogData().onShowInfo) {\r\n      <button mat-stroked-button (click)=\"dialogData().onShowInfo()\">{{dialogData().infoButtonLabel ?? 'Informazioni'}}\r\n      </button>\r\n      }\r\n    </div>\r\n    <div fxFlex=\"50\" fxLayoutAlign=\"end\">\r\n      @if (disabled()) {\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Chiudi</button>\r\n      } @else {\r\n      <button mat-flat-button (click)=\"ok()\">Salva</button>\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</mat-dialog-actions>\r\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}\n"] }]
+            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogContent, TinymceEditorDirective, FormsModule, MatDialogActions, FlexLayoutModule,
+                        MatButtonModule, MatDialogClose], template: "<mat-dialog-content style=\"padding: 10px 10px 0 10px\">\r\n  <textarea tinymceEditor class=\"full-screen-editor\" name=\"text\" [tinymceConfig]=\"tinymceConfig\"\r\n    [disabled]=\"disabled()\" [(ngModel)]=\"text\"></textarea>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxLayoutAlign=\"start center\" fxFill>\r\n    <div fxFlex=\"50\">\r\n      @if(dialogData().onShowInfo) {\r\n      <button mat-stroked-button (click)=\"dialogData().onShowInfo()\">{{dialogData().infoButtonLabel ?? 'Informazioni'}}\r\n      </button>\r\n      }\r\n    </div>\r\n    <div fxFlex=\"50\" fxLayoutAlign=\"end\">\r\n      @if (disabled()) {\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Chiudi</button>\r\n      } @else {\r\n      <button mat-flat-button (click)=\"ok()\">Salva</button>\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</mat-dialog-actions>\r\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}\n"] }]
         }], ctorParameters: () => [], propDecorators: { saving: [{ type: i0.Output, args: ["saving"] }] } });
 
 /*
@@ -242,5 +609,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FullScreenEditorComponent, TinymceUtils };
+export { TinyMceEditorComponent, TinymceEditorDirective, TinymceLoaderService, TinymceUtils };
 //# sourceMappingURL=arsedizioni-ars-utils-ui.tinymce.mjs.map