@notectl/angular 2.0.1 → 2.0.3

package/dist/fesm2022/notectl-angular.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, DestroyRef, input, model, output, signal, computed, viewChild, afterNextRender, effect, ChangeDetectionStrategy, Component, forwardRef, Directive, Injectable } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, DestroyRef, input, model, output, signal, computed, viewChild, afterNextRender, effect, forwardRef, ChangeDetectionStrategy, Component, Directive, Injectable } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ThemePreset, NotectlEditor } from '@notectl/core';
 export { DARK_THEME, LIGHT_THEME, ThemePreset, createTheme } from '@notectl/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject } from 'rxjs';
 export { STARTER_FONTS } from '@notectl/core/fonts';
 export { TextFormattingPlugin } from '@notectl/core/plugins/text-formatting';
@@ -25,6 +25,142 @@ export { TextDirectionPlugin } from '@notectl/core/plugins/text-direction';
 export { SuperSubPlugin } from '@notectl/core/plugins/super-sub';
 export { ToolbarPlugin } from '@notectl/core/plugins/toolbar';
 
+const EMPTY_HTML = '<p></p>';
+/** Escapes HTML special characters before inserting plain text. */
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function isDocumentValue(value) {
+    return typeof value === 'object' && value !== null;
+}
+async function readEditorValue(editor, format) {
+    switch (format) {
+        case 'html':
+            return editor.getContentHTML();
+        case 'text':
+            return editor.getText();
+        default:
+            return editor.getJSON();
+    }
+}
+async function writeEditorValue(editor, format, value) {
+    if (value === null || value === '') {
+        await editor.setContentHTML(EMPTY_HTML);
+        return;
+    }
+    if (format === 'json' && isDocumentValue(value)) {
+        editor.setJSON(value);
+        return;
+    }
+    if (format === 'text' && typeof value === 'string') {
+        await editor.setContentHTML(`<p>${escapeHtml(value)}</p>`);
+        return;
+    }
+    if (typeof value === 'string') {
+        await editor.setContentHTML(value);
+        return;
+    }
+    editor.setJSON(value);
+}
+
+class EditorValueController {
+    options;
+    lastDocument;
+    mutedControlChanges = 0;
+    serializedReadVersion = 0;
+    writeQueue = Promise.resolve();
+    constructor(options) {
+        this.options = options;
+    }
+    reset() {
+        this.lastDocument = undefined;
+        this.serializedReadVersion++;
+    }
+    handleEditorStateChange(doc) {
+        this.lastDocument = doc;
+        this.options.updateContent(doc);
+        if (this.mutedControlChanges > 0)
+            return;
+        const readVersion = ++this.serializedReadVersion;
+        void this.readCurrentValue().then((value) => {
+            if (readVersion !== this.serializedReadVersion)
+                return;
+            this.options.emitControlValue(value);
+        });
+    }
+    syncExternalContent(doc) {
+        if (doc === this.lastDocument)
+            return;
+        this.lastDocument = doc;
+        void this.enqueueSilent(async (editor) => {
+            editor.setJSON(doc);
+        });
+    }
+    writeControlValue(value) {
+        void this.enqueueSilent(async (editor) => {
+            await writeEditorValue(editor, this.options.getFormat(), value);
+        });
+    }
+    setDocument(doc) {
+        this.lastDocument = doc;
+        return this.enqueueInteractive(async (editor) => {
+            editor.setJSON(doc);
+        });
+    }
+    setSerializedValue(value) {
+        return this.enqueueInteractive(async (editor) => {
+            await writeEditorValue(editor, this.options.getFormat(), value);
+        });
+    }
+    applyInitialDocument(editor, doc) {
+        this.lastDocument = doc;
+        return this.runSilent(async () => {
+            editor.setJSON(doc);
+        });
+    }
+    async readCurrentValue() {
+        const editor = this.options.getEditor();
+        if (!editor)
+            return null;
+        return readEditorValue(editor, this.options.getFormat());
+    }
+    enqueueSilent(task) {
+        return this.enqueue(task, true);
+    }
+    enqueueInteractive(task) {
+        return this.enqueue(task, false);
+    }
+    enqueue(task, silent) {
+        const next = this.writeQueue.then(async () => {
+            await this.options.whenReady();
+            const editor = this.options.getEditor();
+            if (!editor)
+                return;
+            if (silent) {
+                await this.runSilent(() => task(editor));
+                return;
+            }
+            await task(editor);
+        });
+        this.writeQueue = next.catch(() => undefined);
+        return next;
+    }
+    async runSilent(task) {
+        this.mutedControlChanges++;
+        try {
+            await task();
+        }
+        finally {
+            this.mutedControlChanges--;
+        }
+    }
+}
+
 /**
  * Default configuration applied to all `<notectl-editor>` instances within
  * the injector scope. Component-level inputs override these defaults.
@@ -65,59 +201,38 @@ function provideNotectl(options = {}) {
     return makeEnvironmentProviders(providers);
 }
 
-/**
- * Angular standalone component wrapping the `<ntl-editor>` Web Component.
- *
- * Uses `afterNextRender()` for SSR-safe initialization and `effect()` for
- * reactive input tracking — no lifecycle interfaces needed.
- *
- * @example
- * ```html
- * <!-- Basic usage -->
- * <ntl-editor [toolbar]="toolbar" [plugins]="plugins" />
- *
- * <!-- Two-way content binding -->
- * <ntl-editor [(content)]="myDocument" [toolbar]="toolbar" />
- *
- * <!-- Reactive forms -->
- * <ntl-editor [formControl]="editorControl" [toolbar]="toolbar" />
- * ```
- */
+function initConfigEquals(a, b) {
+    return (a.plugins === b.plugins &&
+        a.toolbar === b.toolbar &&
+        a.features === b.features &&
+        a.autofocus === b.autofocus &&
+        a.maxHistoryDepth === b.maxHistoryDepth &&
+        a.locale === b.locale &&
+        a.styleNonce === b.styleNonce);
+}
 class NotectlEditorComponent {
-    // --- Injected dependencies ---
     destroyRef = inject(DestroyRef);
     defaultConfig = inject(NOTECTL_DEFAULT_CONFIG, { optional: true });
-    // --- Signal Inputs (1:1 with Web Component config) ---
-    plugins = input([], ...(ngDevMode ? [{ debugName: "plugins" }] : []));
-    toolbar = input(...(ngDevMode ? [undefined, { debugName: "toolbar" }] : []));
-    features = input(...(ngDevMode ? [undefined, { debugName: "features" }] : []));
-    placeholder = input('Start typing...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
-    readonlyMode = input(false, ...(ngDevMode ? [{ debugName: "readonlyMode" }] : []));
-    autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : []));
-    maxHistoryDepth = input(...(ngDevMode ? [undefined, { debugName: "maxHistoryDepth" }] : []));
-    theme = input(ThemePreset.Light, ...(ngDevMode ? [{ debugName: "theme" }] : []));
-    // --- Two-way content binding via model() ---
-    /**
-     * Two-way bindable document content.
-     *
-     * `undefined` means no external content was provided — the editor manages
-     * its own state. Once the editor emits changes, the model updates to the
-     * current `Document`.
-     *
-     * @example
-     * ```html
-     * <ntl-editor [(content)]="myDocument" />
-     * ```
-     */
-    content = model(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
-    // --- Signal Outputs (events bridged from Web Component) ---
+    contentFormat = inject(NOTECTL_CONTENT_FORMAT, { optional: true }) ?? 'json';
+    plugins = input(undefined, ...(ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []));
+    toolbar = input(undefined, ...(ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []));
+    features = input(undefined, ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    readonlyMode = input(undefined, ...(ngDevMode ? [{ debugName: "readonlyMode" }] : /* istanbul ignore next */ []));
+    autofocus = input(undefined, ...(ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []));
+    maxHistoryDepth = input(undefined, ...(ngDevMode ? [{ debugName: "maxHistoryDepth" }] : /* istanbul ignore next */ []));
+    theme = input(undefined, ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+    paperSize = input(undefined, ...(ngDevMode ? [{ debugName: "paperSize" }] : /* istanbul ignore next */ []));
+    dir = input(undefined, ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+    locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    styleNonce = input(undefined, ...(ngDevMode ? [{ debugName: "styleNonce" }] : /* istanbul ignore next */ []));
+    content = model(undefined, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
     stateChange = output();
     selectionChange = output();
     editorFocus = output();
     editorBlur = output();
     ready = output();
-    // --- Reactive State ---
-    editorState = signal(null, ...(ngDevMode ? [{ debugName: "editorState" }] : []));
+    editorState = signal(null, ...(ngDevMode ? [{ debugName: "editorState" }] : /* istanbul ignore next */ []));
     isEmpty = computed(() => {
         const state = this.editorState();
         if (!state)
@@ -131,126 +246,147 @@ class NotectlEditorComponent {
         if (!block)
             return true;
         return block.type === 'paragraph' && block.children.length === 0;
-    }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : []));
-    // --- Internal state ---
+    }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    resolvedPlugins = computed(() => this.plugins() ?? this.defaultConfig?.plugins ?? [], ...(ngDevMode ? [{ debugName: "resolvedPlugins" }] : /* istanbul ignore next */ []));
+    resolvedToolbar = computed(() => this.toolbar() ?? this.defaultConfig?.toolbar, ...(ngDevMode ? [{ debugName: "resolvedToolbar" }] : /* istanbul ignore next */ []));
+    resolvedFeatures = computed(() => this.features() ?? this.defaultConfig?.features, ...(ngDevMode ? [{ debugName: "resolvedFeatures" }] : /* istanbul ignore next */ []));
+    resolvedPlaceholder = computed(() => this.placeholder() ?? this.defaultConfig?.placeholder ?? 'Start typing...', ...(ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []));
+    resolvedReadonlyMode = computed(() => this.readonlyMode() ?? this.defaultConfig?.readonly ?? false, ...(ngDevMode ? [{ debugName: "resolvedReadonlyMode" }] : /* istanbul ignore next */ []));
+    resolvedAutofocus = computed(() => this.autofocus() ?? this.defaultConfig?.autofocus ?? false, ...(ngDevMode ? [{ debugName: "resolvedAutofocus" }] : /* istanbul ignore next */ []));
+    resolvedMaxHistoryDepth = computed(() => this.maxHistoryDepth() ?? this.defaultConfig?.maxHistoryDepth, ...(ngDevMode ? [{ debugName: "resolvedMaxHistoryDepth" }] : /* istanbul ignore next */ []));
+    resolvedTheme = computed(() => this.theme() ?? this.defaultConfig?.theme ?? ThemePreset.Light, ...(ngDevMode ? [{ debugName: "resolvedTheme" }] : /* istanbul ignore next */ []));
+    resolvedPaperSize = computed(() => this.paperSize() ?? this.defaultConfig?.paperSize, ...(ngDevMode ? [{ debugName: "resolvedPaperSize" }] : /* istanbul ignore next */ []));
+    resolvedDir = computed(() => this.dir() ?? this.defaultConfig?.dir, ...(ngDevMode ? [{ debugName: "resolvedDir" }] : /* istanbul ignore next */ []));
+    resolvedLocale = computed(() => this.locale() ?? this.defaultConfig?.locale, ...(ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []));
+    resolvedStyleNonce = computed(() => this.styleNonce() ?? this.defaultConfig?.styleNonce, ...(ngDevMode ? [{ debugName: "resolvedStyleNonce" }] : /* istanbul ignore next */ []));
+    effectiveReadonly = computed(() => this.disabledByForms() || this.resolvedReadonlyMode(), ...(ngDevMode ? [{ debugName: "effectiveReadonly" }] : /* istanbul ignore next */ []));
     hostRef = viewChild.required('host');
+    initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
+    disabledByForms = signal(false, ...(ngDevMode ? [{ debugName: "disabledByForms" }] : /* istanbul ignore next */ []));
+    valueController = new EditorValueController({
+        emitControlValue: (value) => this.onChange(value),
+        getEditor: () => this.editorRef,
+        getFormat: () => this.contentFormat,
+        updateContent: (doc) => this.content.set(doc),
+        whenReady: () => this.readyPromise,
+    });
     editorRef = null;
     readyResolve = null;
-    readyPromise = new Promise((resolve) => {
-        this.readyResolve = resolve;
-    });
-    initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
-    /** Tracks the last document set from within the editor to prevent feedback loops. */
-    lastEditorDoc = null;
+    readyPromise;
+    lastInitConfig = null;
+    queuedInitConfig = null;
+    reinitializePromise = null;
+    pendingInitialDocument;
+    onChange = () => { };
+    onTouched = () => { };
     constructor() {
-        // SSR-safe: only runs in the browser after first render
+        this.resetReadyPromise();
         afterNextRender(() => {
-            this.initEditor();
+            this.initEditor(this.captureInitConfig());
         });
-        // React to input changes via effect() — replaces ngOnChanges
         effect(() => {
-            const currentTheme = this.theme();
-            const currentPlaceholder = this.placeholder();
-            const currentReadonly = this.readonlyMode();
             const editor = this.editorRef;
             if (!this.initialized() || !editor)
                 return;
-            editor.setTheme(currentTheme);
+            editor.setTheme(this.resolvedTheme());
             editor.configure({
-                placeholder: currentPlaceholder,
-                readonly: currentReadonly,
+                dir: this.resolvedDir(),
+                paperSize: this.resolvedPaperSize(),
+                placeholder: this.resolvedPlaceholder(),
+                readonly: this.effectiveReadonly(),
             });
         });
-        // Sync external content model changes into the editor.
-        // Skips when the document was set by the editor itself (feedback loop prevention).
         effect(() => {
             const doc = this.content();
-            const editor = this.editorRef;
-            if (!this.initialized() || !editor || !doc)
-                return;
-            // Skip if this document originated from the editor's own state change
-            if (doc === this.lastEditorDoc)
+            if (!doc)
                 return;
-            editor.setJSON(doc);
+            this.valueController.syncExternalContent(doc);
+        });
+        effect(() => {
+            this.scheduleReinitialization(this.captureInitConfig());
         });
         this.destroyRef.onDestroy(() => {
-            this.destroyEditor();
+            void this.destroyEditor();
         });
     }
-    // --- Public API (proxy to Web Component) ---
-    /** Returns the document as JSON. */
     getJSON() {
         return this.requireEditor().getJSON();
     }
-    /** Sets the document from JSON. */
     setJSON(doc) {
-        this.requireEditor().setJSON(doc);
+        void this.valueController.setDocument(doc);
     }
-    /** Returns sanitized HTML representation of the document. */
     async getContentHTML() {
         return this.requireEditor().getContentHTML();
     }
-    /** Sets content from HTML (sanitized). */
     async setContentHTML(html) {
-        return this.requireEditor().setContentHTML(html);
+        await this.valueController.setSerializedValue(html);
     }
-    /** Returns plain text content. */
     getText() {
         return this.requireEditor().getText();
     }
-    /** Proxy to the Web Component's `commands` object. */
     get commands() {
         return this.requireEditor().commands;
     }
-    /** Proxy to the Web Component's `can()` capability checker. */
     can() {
         return this.requireEditor().can();
     }
-    /** Executes a named command registered by a plugin. */
     executeCommand(name) {
-        if (!this.editorRef)
-            return false;
-        return this.editorRef.executeCommand(name);
+        return this.editorRef?.executeCommand(name) ?? false;
     }
-    /** Configures a plugin at runtime. */
     configurePlugin(pluginId, config) {
         this.editorRef?.configurePlugin(pluginId, config);
     }
-    /** Dispatches a transaction. */
     dispatch(tr) {
         this.editorRef?.dispatch(tr);
     }
-    /** Returns the current editor state. */
     getState() {
         return this.requireEditor().getState();
     }
-    /** Changes the theme at runtime. */
     setTheme(theme) {
         this.editorRef?.setTheme(theme);
     }
-    /** Returns the current theme setting. */
     getTheme() {
-        return this.editorRef?.getTheme() ?? this.theme();
+        return this.editorRef?.getTheme() ?? this.resolvedTheme();
     }
-    /** Sets the readonly state programmatically (used by ControlValueAccessor). */
     setReadonly(readonlyState) {
         this.editorRef?.configure({ readonly: readonlyState });
     }
-    /** Resolves when the editor is ready. */
     whenReady() {
         return this.readyPromise;
     }
-    // --- Private ---
-    initEditor() {
+    focus(options) {
+        const editor = this.editorRef;
+        if (!editor)
+            return;
+        const focusTarget = editor.shadowRoot?.querySelector('[contenteditable]') ?? editor;
+        focusTarget.focus(options);
+    }
+    writeValue(value) {
+        this.valueController.writeControlValue(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledByForms.set(isDisabled);
+    }
+    resetReadyPromise() {
+        this.readyPromise = new Promise((resolve) => {
+            this.readyResolve = resolve;
+        });
+    }
+    initEditor(snapshot) {
         const hostElement = this.hostRef().nativeElement;
-        const config = this.buildConfig();
         const editor = new NotectlEditor();
         this.editorRef = editor;
-        // Register event listeners BEFORE appending to DOM, because
-        // appendChild triggers connectedCallback → init() synchronously.
+        this.lastInitConfig = snapshot;
+        this.valueController.reset();
         editor.on('stateChange', (event) => {
             this.editorState.set(event.newState);
-            this.syncContentModel(event.newState.doc);
+            this.valueController.handleEditorStateChange(event.newState.doc);
             this.stateChange.emit(event);
         });
         editor.on('selectionChange', (event) => {
@@ -260,211 +396,146 @@ class NotectlEditorComponent {
             this.editorFocus.emit();
         });
         editor.on('blur', () => {
+            this.onTouched();
             this.editorBlur.emit();
         });
         editor.on('ready', () => {
             this.initialized.set(true);
-            const state = editor.getState();
-            this.editorState.set(state);
-            // Apply initial content model if set before editor was ready
-            const initialContent = this.content();
-            if (initialContent) {
-                editor.setJSON(initialContent);
-            }
-            this.readyResolve?.();
-            this.ready.emit();
+            this.editorState.set(editor.getState());
+            void this.applyInitialContent(editor).finally(() => {
+                this.readyResolve?.();
+                this.ready.emit();
+            });
         });
-        // Init with config BEFORE appending to DOM. appendChild triggers
-        // connectedCallback which calls init() without config — by calling
-        // init(config) first, the editor initializes with the full config
-        // and connectedCallback's init() becomes a no-op (already initialized).
-        editor.init(config);
+        editor.init(this.buildConfig());
         hostElement.appendChild(editor);
     }
+    async applyInitialContent(editor) {
+        const currentContent = this.content();
+        const initialContent = currentContent ?? this.pendingInitialDocument;
+        this.pendingInitialDocument = undefined;
+        if (!initialContent)
+            return;
+        await this.valueController.applyInitialDocument(editor, initialContent);
+    }
     buildConfig() {
-        const defaults = this.defaultConfig ?? {};
-        const toolbar = this.toolbar();
-        const features = this.features();
-        const maxHistory = this.maxHistoryDepth();
         const config = {
-            ...defaults,
-            plugins: this.plugins(),
-            placeholder: this.placeholder(),
-            readonly: this.readonlyMode(),
-            autofocus: this.autofocus(),
-            theme: this.theme(),
+            ...this.defaultConfig,
+            autofocus: this.resolvedAutofocus(),
+            dir: this.resolvedDir(),
+            locale: this.resolvedLocale(),
+            maxHistoryDepth: this.resolvedMaxHistoryDepth(),
+            paperSize: this.resolvedPaperSize(),
+            placeholder: this.resolvedPlaceholder(),
+            plugins: this.resolvedPlugins(),
+            readonly: this.effectiveReadonly(),
+            styleNonce: this.resolvedStyleNonce(),
+            theme: this.resolvedTheme(),
         };
+        const toolbar = this.resolvedToolbar();
         if (toolbar !== undefined) {
             config.toolbar = toolbar;
         }
+        const features = this.resolvedFeatures();
         if (features !== undefined) {
             config.features = features;
         }
-        if (maxHistory !== undefined) {
-            config.maxHistoryDepth = maxHistory;
-        }
         return config;
     }
-    /** Syncs editor document changes to the content model without feedback loops. */
-    syncContentModel(doc) {
-        this.lastEditorDoc = doc;
-        this.content.set(doc);
+    captureInitConfig() {
+        return {
+            autofocus: this.resolvedAutofocus(),
+            features: this.resolvedFeatures(),
+            locale: this.resolvedLocale(),
+            maxHistoryDepth: this.resolvedMaxHistoryDepth(),
+            plugins: this.resolvedPlugins(),
+            styleNonce: this.resolvedStyleNonce(),
+            toolbar: this.resolvedToolbar(),
+        };
+    }
+    scheduleReinitialization(snapshot) {
+        if (!this.initialized() || !this.lastInitConfig)
+            return;
+        if (initConfigEquals(snapshot, this.lastInitConfig))
+            return;
+        this.queuedInitConfig = snapshot;
+        if (this.reinitializePromise)
+            return;
+        this.reinitializePromise = (async () => {
+            while (this.queuedInitConfig) {
+                const nextSnapshot = this.queuedInitConfig;
+                this.queuedInitConfig = null;
+                this.pendingInitialDocument = this.editorRef?.getJSON();
+                this.resetReadyPromise();
+                this.initialized.set(false);
+                await this.destroyEditor();
+                this.initEditor(nextSnapshot);
+                await this.readyPromise;
+            }
+        })().finally(() => {
+            this.reinitializePromise = null;
+        });
     }
-    destroyEditor() {
-        if (this.editorRef) {
-            this.editorRef.destroy();
-            this.editorRef = null;
+    async destroyEditor() {
+        const editor = this.editorRef;
+        if (!editor) {
+            this.initialized.set(false);
+            this.editorState.set(null);
+            return;
         }
+        this.editorRef = null;
+        editor.remove();
+        await editor.destroy();
         this.initialized.set(false);
+        this.editorState.set(null);
     }
     requireEditor() {
         const editor = this.editorRef;
-        if (!editor) {
+        if (!editor || !this.initialized()) {
             throw new Error('NotectlEditor is not initialized. Await whenReady() first.');
         }
         return editor;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotectlEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.0", type: NotectlEditorComponent, isStandalone: true, selector: "ntl-editor", inputs: { plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyMode: { classPropertyName: "readonlyMode", publicName: "readonlyMode", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, maxHistoryDepth: { classPropertyName: "maxHistoryDepth", publicName: "maxHistoryDepth", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { content: "contentChange", stateChange: "stateChange", selectionChange: "selectionChange", editorFocus: "editorFocus", editorBlur: "editorBlur", ready: "ready" }, viewQueries: [{ propertyName: "hostRef", first: true, predicate: ["host"], descendants: true, isSignal: true }], ngImport: i0, template: '<div #host></div>', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotectlEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: NotectlEditorComponent, isStandalone: true, selector: "ntl-editor", inputs: { plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonlyMode: { classPropertyName: "readonlyMode", publicName: "readonlyMode", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, maxHistoryDepth: { classPropertyName: "maxHistoryDepth", publicName: "maxHistoryDepth", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, paperSize: { classPropertyName: "paperSize", publicName: "paperSize", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, styleNonce: { classPropertyName: "styleNonce", publicName: "styleNonce", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { content: "contentChange", stateChange: "stateChange", selectionChange: "selectionChange", editorFocus: "editorFocus", editorBlur: "editorBlur", ready: "ready" }, host: { properties: { "attr.aria-disabled": "effectiveReadonly() ? \"true\" : null", "class.ntl-editor-disabled": "effectiveReadonly()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NotectlEditorComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "hostRef", first: true, predicate: ["host"], descendants: true, isSignal: true }], ngImport: i0, template: '<div #host></div>', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotectlEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotectlEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ntl-editor', template: '<div #host></div>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyMode", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], maxHistoryDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHistoryDepth", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }, { type: i0.Output, args: ["contentChange"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], editorFocus: [{ type: i0.Output, args: ["editorFocus"] }], editorBlur: [{ type: i0.Output, args: ["editorBlur"] }], ready: [{ type: i0.Output, args: ["ready"] }], hostRef: [{ type: i0.ViewChild, args: ['host', { isSignal: true }] }] } });
+            args: [{ selector: 'ntl-editor', standalone: true, template: '<div #host></div>', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NotectlEditorComponent),
+                            multi: true,
+                        },
+                    ], host: {
+                        '[attr.aria-disabled]': 'effectiveReadonly() ? "true" : null',
+                        '[class.ntl-editor-disabled]': 'effectiveReadonly()',
+                    }, styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonlyMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyMode", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], maxHistoryDepth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHistoryDepth", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], paperSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "paperSize", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], styleNonce: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleNonce", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }, { type: i0.Output, args: ["contentChange"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], editorFocus: [{ type: i0.Output, args: ["editorFocus"] }], editorBlur: [{ type: i0.Output, args: ["editorBlur"] }], ready: [{ type: i0.Output, args: ["ready"] }], hostRef: [{ type: i0.ViewChild, args: ['host', { isSignal: true }] }] } });
 
-/** Escapes HTML special characters to prevent XSS when inserting plain text. */
-function escapeHtml(text) {
-    return text
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
 /**
- * `ControlValueAccessor` directive for Angular forms integration.
- *
- * Supports Reactive Forms (`formControl`, `formControlName`) and
- * template-driven forms (`ngModel`).
+ * @deprecated Angular Forms support is built into `NotectlEditorComponent`.
  *
- * The content format is configurable via `provideNotectl({ contentFormat })` or
- * the `NOTECTL_CONTENT_FORMAT` injection token:
- * - `'json'` (default) — form value is a `Document` object
- * - `'html'` — form value is a sanitized HTML string
- * - `'text'` — form value is a plain text string
+ * This directive remains as a compatibility shim so existing imports do not break,
+ * but it no longer participates in value accessor registration.
  */
 class NotectlValueAccessorDirective {
-    editor = inject(NotectlEditorComponent);
-    destroyRef = inject(DestroyRef);
-    format = inject(NOTECTL_CONTENT_FORMAT, { optional: true }) ?? 'json';
-    onChange = () => { };
-    onTouched = () => { };
-    pendingValue = null;
-    suppressEmit = false;
-    stateChangeSub = this.editor.stateChange.subscribe((_event) => {
-        if (this.suppressEmit)
-            return;
-        void this.readValue().then((value) => {
-            this.onChange(value);
-        });
-    });
-    blurSub = this.editor.editorBlur.subscribe(() => {
-        this.onTouched();
-    });
-    constructor() {
-        this.destroyRef.onDestroy(() => {
-            this.stateChangeSub.unsubscribe();
-            this.blurSub.unsubscribe();
-        });
-    }
-    writeValue(value) {
-        if (!value)
-            return;
-        try {
-            this.editor.getState();
-            void this.writeValueToEditor(value);
-            return;
-        }
-        catch {
-            // Editor not ready yet — defer
-        }
-        this.pendingValue = value;
-        void this.editor.whenReady().then(async () => {
-            if (this.pendingValue !== null) {
-                await this.writeValueToEditor(this.pendingValue);
-                this.pendingValue = null;
-            }
-        });
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.editor.setReadonly(isDisabled);
-    }
-    async writeValueToEditor(value) {
-        this.suppressEmit = true;
-        try {
-            if (this.format === 'json' && typeof value === 'object') {
-                this.editor.setJSON(value);
-            }
-            else if (this.format === 'html' && typeof value === 'string') {
-                await this.editor.setContentHTML(value);
-            }
-            else if (this.format === 'text' && typeof value === 'string') {
-                await this.editor.setContentHTML(`<p>${escapeHtml(value)}</p>`);
-            }
-            else if (typeof value === 'string') {
-                await this.editor.setContentHTML(value);
-            }
-            else {
-                this.editor.setJSON(value);
-            }
-        }
-        finally {
-            this.suppressEmit = false;
-        }
-    }
-    async readValue() {
-        try {
-            switch (this.format) {
-                case 'html':
-                    return await this.editor.getContentHTML();
-                case 'text':
-                    return this.editor.getText();
-                default:
-                    return this.editor.getJSON();
-            }
-        }
-        catch {
-            return null;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotectlValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: NotectlValueAccessorDirective, isStandalone: true, selector: "ntl-editor[formControl], ntl-editor[formControlName], ntl-editor[ngModel]", providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => NotectlValueAccessorDirective),
-                multi: true,
-            },
-        ], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotectlValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: NotectlValueAccessorDirective, isStandalone: true, selector: "ntl-editor[formControl], ntl-editor[formControlName], ntl-editor[ngModel]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotectlValueAccessorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotectlValueAccessorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ntl-editor[formControl], ntl-editor[formControlName], ntl-editor[ngModel]',
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => NotectlValueAccessorDirective),
-                            multi: true,
-                        },
-                    ],
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * Optional injectable service for programmatic editor access via DI.
@@ -498,10 +569,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  */
 class NotectlEditorService {
     destroyRef = inject(DestroyRef);
-    editorRef = signal(null, ...(ngDevMode ? [{ debugName: "editorRef" }] : []));
+    editorRef = signal(null, ...(ngDevMode ? [{ debugName: "editorRef" }] : /* istanbul ignore next */ []));
     stateChangeSubject = new Subject();
     /** Whether an editor is currently registered with this service. */
-    hasEditor = computed(() => this.editorRef() !== null, ...(ngDevMode ? [{ debugName: "hasEditor" }] : []));
+    hasEditor = computed(() => this.editorRef() !== null, ...(ngDevMode ? [{ debugName: "hasEditor" }] : /* istanbul ignore next */ []));
     /** Observable stream of state change events from the editor. */
     stateChanges$ = this.stateChangeSubject.asObservable();
     stateChangeSub = null;
@@ -548,10 +619,10 @@ class NotectlEditorService {
     dispatch(tr) {
         this.editorRef()?.dispatch(tr);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotectlEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotectlEditorService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotectlEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotectlEditorService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NotectlEditorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: NotectlEditorService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });