@neural-ui/core 1.5.14 → 1.6.1

package/fesm2022/neural-ui-core-rich-text-editor.mjs

@@ -0,0 +1,773 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, viewChild, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NeuButtonComponent } from '@neural-ui/core/button';
+
+const NEU_RICH_TEXT_ALLOWED_TAGS = new Set([
+    'a',
+    'b',
+    'blockquote',
+    'br',
+    'div',
+    'em',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'i',
+    'img',
+    'li',
+    'ol',
+    'p',
+    'span',
+    'strong',
+    'table',
+    'tbody',
+    'td',
+    'th',
+    'thead',
+    'tr',
+    'u',
+    'ul',
+]);
+const VOID_TAGS = new Set(['br', 'img']);
+const BLOCKED_TAGS = 'script|style|iframe|object|embed|form|input|button|textarea|select|option|meta|link|svg|math';
+function normalizeRichTextHtml(value) {
+    const clean = value.trim();
+    if (!clean) {
+        return '';
+    }
+    return hasHtmlTags(clean) ? sanitizeRichTextHtml(clean) : plainTextToRichTextHtml(clean);
+}
+function plainTextToRichTextHtml(value) {
+    return value
+        .trim()
+        .split(/\n{2,}/)
+        .map((paragraph) => `<p>${escapeRichTextHtml(paragraph).replace(/\n/g, '<br>')}</p>`)
+        .join('');
+}
+function sanitizeRichTextHtml(value) {
+    const blockedTagPattern = new RegExp(`<\\s*(?:${BLOCKED_TAGS})[\\s\\S]*?>[\\s\\S]*?<\\s*\\/\\s*(?:${BLOCKED_TAGS})\\s*>`, 'gi');
+    const blockedSingleTagPattern = new RegExp(`<\\s*\\/?\\s*(?:${BLOCKED_TAGS})[^>]*>`, 'gi');
+    const withoutDangerousContent = value
+        .replace(/<!--[\s\S]*?-->/g, '')
+        .replace(blockedTagPattern, '')
+        .replace(blockedSingleTagPattern, '')
+        .replace(/\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '')
+        .replace(/\s+style\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '');
+    return withoutDangerousContent
+        .replace(/<\/?([a-z][a-z0-9]*)([^>]*)>/gi, (match, tagName, rawAttributes) => {
+        const tag = tagName.toLowerCase();
+        const isClosing = /^<\s*\//.test(match);
+        if (!NEU_RICH_TEXT_ALLOWED_TAGS.has(tag)) {
+            return '';
+        }
+        if (isClosing) {
+            return VOID_TAGS.has(tag) ? '' : `</${tag}>`;
+        }
+        return `<${tag}${sanitizeAttributes(tag, rawAttributes || '')}>`;
+    })
+        .trim();
+}
+function escapeRichTextHtml(value) {
+    return value
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#039;');
+}
+function escapeRichTextAttribute(value) {
+    return escapeRichTextHtml(value).replaceAll('`', '&#096;');
+}
+function sanitizeAttributes(tag, rawAttributes) {
+    const attributes = new Map();
+    rawAttributes.replace(/([a-zA-Z:-]+)(?:\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>`]+)))?/g, (_match, rawName, _rawValue, doubleQuoted, singleQuoted, bareValue) => {
+        const name = rawName.toLowerCase();
+        const value = doubleQuoted ?? singleQuoted ?? bareValue ?? '';
+        if (name.startsWith('on') || name === 'style' || !isAllowedAttribute(tag, name)) {
+            return '';
+        }
+        if (tag === 'a' && name === 'href') {
+            if (isSafeHref(value)) {
+                attributes.set('href', value.trim());
+                attributes.set('target', '_blank');
+                attributes.set('rel', 'noopener noreferrer');
+            }
+            return '';
+        }
+        if (tag === 'img' && name === 'src') {
+            if (isSafeImageSource(value)) {
+                attributes.set('src', value.trim());
+            }
+            return '';
+        }
+        if ((name === 'width' || name === 'height') && !/^\d{1,4}$/.test(value.trim())) {
+            return '';
+        }
+        if (name === 'target' || name === 'rel') {
+            return '';
+        }
+        attributes.set(name, value.trim());
+        return '';
+    });
+    return Array.from(attributes.entries())
+        .filter(([, value]) => value.length > 0)
+        .map(([name, value]) => ` ${name}="${escapeRichTextAttribute(value)}"`)
+        .join('');
+}
+function isAllowedAttribute(tag, name) {
+    if (name === 'title') {
+        return true;
+    }
+    if (tag === 'a') {
+        return ['href', 'target', 'rel'].includes(name);
+    }
+    if (tag === 'img') {
+        return ['src', 'alt', 'width', 'height'].includes(name);
+    }
+    if (['td', 'th'].includes(tag)) {
+        return ['colspan', 'rowspan'].includes(name);
+    }
+    return false;
+}
+function hasHtmlTags(value) {
+    return /<\/?[a-z][\s\S]*>/i.test(value);
+}
+function isSafeHref(value) {
+    const clean = value.trim();
+    return /^{{[a-zA-Z0-9_. -]+}}$/.test(clean) || /^(https?:|mailto:|tel:)/i.test(clean);
+}
+function isSafeImageSource(value) {
+    const clean = value.trim();
+    if (/^https?:\/\//i.test(clean)) {
+        return true;
+    }
+    return (/^data:image\/(?:png|jpe?g|gif|webp);base64,[a-z0-9+/=\s]+$/i.test(clean) &&
+        clean.length <= 1_500_000);
+}
+
+const DEFAULT_RICH_TEXT_EDITOR_LABELS = {
+    toolbar: 'Rich text editor',
+    formatGroup: 'Text formatting',
+    listsGroup: 'Lists',
+    insertGroup: 'Insert',
+    clearGroup: 'Clear',
+    bold: 'Bold',
+    italic: 'Italic',
+    underline: 'Underline',
+    unorderedList: 'Bullet list',
+    orderedList: 'Numbered list',
+    addLink: 'Add link',
+    addImageUrl: 'Add image by URL',
+    clearFormat: 'Clear formatting',
+    linkUrlPrompt: 'Link URL',
+    linkTextPrompt: 'Link text',
+    imageUrlPrompt: 'Image URL',
+    imageAltPrompt: 'Alternative text',
+    imageAltFallback: 'Image',
+    pastedImageAlt: 'Pasted image',
+};
+let _neuRichTextEditorIdSeq = 0;
+class NeuRichTextEditorComponent {
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('Write here...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    hint = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    minHeight = input('180px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated Use `labels.toolbar` instead.
+     */
+    toolbarAriaLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarAriaLabel" }] : /* istanbul ignore next */ []));
+    labels = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    variables = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variables" }] : /* istanbul ignore next */ []));
+    variablesLabel = input('Variables', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variablesLabel" }] : /* istanbul ignore next */ []));
+    variablesAriaLabel = input('Available variables', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variablesAriaLabel" }] : /* istanbul ignore next */ []));
+    maxPastedImageBytes = input(1_500_000, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxPastedImageBytes" }] : /* istanbul ignore next */ []));
+    showPreview = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPreview" }] : /* istanbul ignore next */ []));
+    previewLabel = input('Preview', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previewLabel" }] : /* istanbul ignore next */ []));
+    editorId = input(`neu-rich-text-editor-${++_neuRichTextEditorIdSeq}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editorId" }] : /* istanbul ignore next */ []));
+    valueChange = output();
+    imageRejected = output();
+    value = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    editorRef = viewChild('editorRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editorRef" }] : /* istanbul ignore next */ []));
+    viewReady = false;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    isDisabledFinal = computed(() => this.disabled() || this.readonly() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabledFinal" }] : /* istanbul ignore next */ []));
+    mergedLabels = computed(() => ({
+        ...DEFAULT_RICH_TEXT_EDITOR_LABELS,
+        ...(this.toolbarAriaLabel() ? { toolbar: this.toolbarAriaLabel() } : {}),
+        ...this.labels(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mergedLabels" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.errorMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    ariaDescribedBy = computed(() => {
+        if (this.hasError()) {
+            return `${this.editorId()}-error`;
+        }
+        return this.hint() ? `${this.editorId()}-hint` : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        this.viewReady = true;
+        this.renderValue(this.value());
+    }
+    writeValue(value) {
+        const html = normalizeRichTextHtml(value ?? '');
+        this.value.set(html);
+        this.renderValue(html);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    format(command) {
+        if (this.isDisabledFinal())
+            return;
+        this.focus();
+        document.execCommand(command);
+        this.syncValueFromEditor();
+    }
+    addLink() {
+        if (this.isDisabledFinal())
+            return;
+        const url = window.prompt(this.mergedLabels().linkUrlPrompt);
+        if (!url)
+            return;
+        const text = window.prompt(this.mergedLabels().linkTextPrompt) || url;
+        this.insertHtml(`<a href="${escapeRichTextAttribute(url)}">${escapeRichTextHtml(text)}</a>`);
+    }
+    addImageUrl() {
+        if (this.isDisabledFinal())
+            return;
+        const url = window.prompt(this.mergedLabels().imageUrlPrompt);
+        if (!url)
+            return;
+        const alt = window.prompt(this.mergedLabels().imageAltPrompt) || this.mergedLabels().imageAltFallback;
+        this.insertHtml(`<img src="${escapeRichTextAttribute(url)}" alt="${escapeRichTextAttribute(alt)}">`);
+    }
+    insertVariable(variable) {
+        if (this.isDisabledFinal())
+            return;
+        this.insertHtml(escapeRichTextHtml(variable));
+    }
+    handleInput() {
+        this.syncValueFromEditor();
+    }
+    onFocus() {
+        this.focused.set(true);
+    }
+    onBlur() {
+        this.focused.set(false);
+        this.onTouched();
+    }
+    handlePaste(event) {
+        if (this.isDisabledFinal())
+            return;
+        const imageFile = Array.from(event.clipboardData?.files ?? []).find((file) => file.type.startsWith('image/'));
+        if (imageFile) {
+            event.preventDefault();
+            this.insertPastedImage(imageFile);
+            return;
+        }
+        const html = event.clipboardData?.getData('text/html');
+        if (html) {
+            event.preventDefault();
+            this.insertHtml(sanitizeRichTextHtml(html));
+            return;
+        }
+        const text = event.clipboardData?.getData('text/plain');
+        if (text) {
+            event.preventDefault();
+            this.insertHtml(plainTextToRichTextHtml(text));
+        }
+    }
+    insertPastedImage(file) {
+        const maxBytes = this.maxPastedImageBytes();
+        if (file.size > maxBytes) {
+            this.imageRejected.emit({ file, maxBytes, reason: 'size' });
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = () => {
+            const src = typeof reader.result === 'string' ? reader.result : '';
+            this.insertHtml(sanitizeRichTextHtml(`<img src="${escapeRichTextAttribute(src)}" alt="${escapeRichTextAttribute(this.mergedLabels().pastedImageAlt)}">`));
+        };
+        reader.readAsDataURL(file);
+    }
+    insertHtml(html) {
+        this.focus();
+        document.execCommand('insertHTML', false, sanitizeRichTextHtml(html));
+        this.syncValueFromEditor();
+    }
+    syncValueFromEditor() {
+        const html = sanitizeRichTextHtml(this.editorRef()?.nativeElement.innerHTML ?? '');
+        this.value.set(html);
+        this.onChange(html);
+        this.valueChange.emit(html);
+    }
+    focus() {
+        this.editorRef()?.nativeElement.focus();
+    }
+    renderValue(html) {
+        const editor = this.editorRef()?.nativeElement;
+        if (!this.viewReady || !editor)
+            return;
+        if (editor.innerHTML !== html) {
+            editor.innerHTML = html;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuRichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NeuRichTextEditorComponent, isStandalone: true, selector: "neu-rich-text-editor", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, toolbarAriaLabel: { classPropertyName: "toolbarAriaLabel", publicName: "toolbarAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: true, isRequired: false, transformFunction: null }, variablesLabel: { classPropertyName: "variablesLabel", publicName: "variablesLabel", isSignal: true, isRequired: false, transformFunction: null }, variablesAriaLabel: { classPropertyName: "variablesAriaLabel", publicName: "variablesAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, maxPastedImageBytes: { classPropertyName: "maxPastedImageBytes", publicName: "maxPastedImageBytes", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, previewLabel: { classPropertyName: "previewLabel", publicName: "previewLabel", isSignal: true, isRequired: false, transformFunction: null }, editorId: { classPropertyName: "editorId", publicName: "editorId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", imageRejected: "imageRejected" }, host: { properties: { "class.neu-rich-text-editor-host--sm": "size() === \"sm\"", "class.neu-rich-text-editor-host--lg": "size() === \"lg\"" }, classAttribute: "neu-rich-text-editor-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NeuRichTextEditorComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editorRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="neu-rich-text-editor" [class.neu-rich-text-editor--disabled]="isDisabledFinal()">
+      @if (label()) {
+        <label class="neu-rich-text-editor__label" [id]="editorId() + '-label'" [for]="editorId()">
+          {{ label() }}
+        </label>
+      }
+
+      <div
+        class="neu-rich-text-editor__frame"
+        [class.neu-rich-text-editor__frame--focused]="focused()"
+        [class.neu-rich-text-editor__frame--error]="hasError()"
+      >
+        <div
+          class="neu-rich-text-editor__toolbar"
+          role="toolbar"
+          [attr.aria-label]="mergedLabels().toolbar"
+        >
+          <div
+            class="neu-rich-text-editor__toolbar-group"
+            role="group"
+            [attr.aria-label]="mergedLabels().formatGroup"
+          >
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideBold"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().bold"
+              [title]="mergedLabels().bold"
+              [disabled]="isDisabledFinal()"
+              (click)="format('bold')"
+            ></button>
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideItalic"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().italic"
+              [title]="mergedLabels().italic"
+              [disabled]="isDisabledFinal()"
+              (click)="format('italic')"
+            ></button>
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideUnderline"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().underline"
+              [title]="mergedLabels().underline"
+              [disabled]="isDisabledFinal()"
+              (click)="format('underline')"
+            ></button>
+          </div>
+
+          <div
+            class="neu-rich-text-editor__toolbar-group"
+            role="group"
+            [attr.aria-label]="mergedLabels().listsGroup"
+          >
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideList"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().unorderedList"
+              [title]="mergedLabels().unorderedList"
+              [disabled]="isDisabledFinal()"
+              (click)="format('insertUnorderedList')"
+            ></button>
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideListOrdered"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().orderedList"
+              [title]="mergedLabels().orderedList"
+              [disabled]="isDisabledFinal()"
+              (click)="format('insertOrderedList')"
+            ></button>
+          </div>
+
+          <div
+            class="neu-rich-text-editor__toolbar-group"
+            role="group"
+            [attr.aria-label]="mergedLabels().insertGroup"
+          >
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideLink"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().addLink"
+              [title]="mergedLabels().addLink"
+              [disabled]="isDisabledFinal()"
+              (click)="addLink()"
+            ></button>
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideImage"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().addImageUrl"
+              [title]="mergedLabels().addImageUrl"
+              [disabled]="isDisabledFinal()"
+              (click)="addImageUrl()"
+            ></button>
+          </div>
+
+          <div
+            class="neu-rich-text-editor__toolbar-group"
+            role="group"
+            [attr.aria-label]="mergedLabels().clearGroup"
+          >
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideEraser"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().clearFormat"
+              [title]="mergedLabels().clearFormat"
+              [disabled]="isDisabledFinal()"
+              (click)="format('removeFormat')"
+            ></button>
+          </div>
+        </div>
+
+        @if (variables().length) {
+          <div class="neu-rich-text-editor__variables" [attr.aria-label]="variablesAriaLabel()">
+            <span class="neu-rich-text-editor__variables-label">{{ variablesLabel() }}</span>
+            @for (variable of variables(); track variable) {
+              <button
+                class="neu-rich-text-editor__variable"
+                type="button"
+                [disabled]="isDisabledFinal()"
+                (click)="insertVariable(variable)"
+              >
+                {{ variable }}
+              </button>
+            }
+          </div>
+        }
+
+        <div
+          #editorRef
+          class="neu-rich-text-editor__surface"
+          role="textbox"
+          aria-multiline="true"
+          [id]="editorId()"
+          [attr.aria-label]="label() ? null : mergedLabels().toolbar"
+          [attr.aria-labelledby]="label() ? editorId() + '-label' : null"
+          [attr.contenteditable]="isDisabledFinal() ? 'false' : 'true'"
+          [attr.data-placeholder]="placeholder()"
+          [attr.aria-describedby]="ariaDescribedBy()"
+          [attr.aria-invalid]="hasError() ? 'true' : null"
+          [style.min-height]="minHeight()"
+          (input)="handleInput()"
+          (focus)="onFocus()"
+          (blur)="onBlur()"
+          (paste)="handlePaste($event)"
+        ></div>
+      </div>
+
+      @if (hasError()) {
+        <p class="neu-rich-text-editor__error" [id]="editorId() + '-error'" role="alert">
+          {{ errorMessage() }}
+        </p>
+      } @else if (hint()) {
+        <p class="neu-rich-text-editor__hint" [id]="editorId() + '-hint'">{{ hint() }}</p>
+      }
+
+      @if (showPreview() && value()) {
+        <details class="neu-rich-text-editor__preview">
+          <summary>{{ previewLabel() }}</summary>
+          <div class="neu-rich-text-editor__preview-content" [innerHTML]="value()"></div>
+        </details>
+      }
+    </div>
+  `, isInline: true, styles: [".neu-rich-text-editor-host{display:block;font-family:var(--neu-font-sans)}.neu-rich-text-editor{display:grid;gap:var(--neu-space-2, .5rem);color:var(--neu-text)}.neu-rich-text-editor__label{color:var(--neu-text);font-size:var(--neu-text-sm);font-weight:700;line-height:1.2}.neu-rich-text-editor__frame{overflow:hidden;background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius-lg, .75rem);box-shadow:var(--neu-shadow-sm, 0 1px 2px rgba(15, 23, 42, .08));transition:border-color var(--neu-transition),box-shadow var(--neu-transition),background-color var(--neu-transition)}.neu-rich-text-editor__frame--focused{border-color:var(--neu-border-focus, var(--neu-primary));box-shadow:var(--neu-focus-ring, 0 0 0 3px rgba(0, 176, 160, .18))}.neu-rich-text-editor__frame--error{border-color:var(--neu-error)}.neu-rich-text-editor__toolbar{display:flex;flex-wrap:wrap;gap:var(--neu-space-2, .5rem);align-items:center;min-height:46px;padding:var(--neu-space-2, .5rem);background:var(--neu-surface-2, #f8fafc);border-bottom:1px solid var(--neu-border)}.neu-rich-text-editor__toolbar-group{display:inline-flex;align-items:center;gap:2px;padding:2px;background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius, .5rem)}.neu-rich-text-editor__toolbar .neu-button--ghost{color:var(--neu-text-muted)}.neu-rich-text-editor__toolbar .neu-button--ghost:hover:not(:disabled):not(.neu-button--disabled){color:var(--neu-text);background:var(--neu-primary-50, rgba(0, 176, 160, .1))}.neu-rich-text-editor__variables{display:flex;flex-wrap:wrap;gap:var(--neu-space-2, .5rem);align-items:center;padding:var(--neu-space-2, .5rem) var(--neu-space-3, .75rem);background:var(--neu-surface);border-bottom:1px solid var(--neu-border)}.neu-rich-text-editor__variables-label{color:var(--neu-text-muted);font-size:var(--neu-text-xs, .75rem);font-weight:700}.neu-rich-text-editor__variable{min-height:28px;padding:0 var(--neu-space-2, .5rem);color:var(--neu-primary-dark, var(--neu-primary));font:inherit;font-size:var(--neu-text-xs, .75rem);font-weight:700;cursor:pointer;background:var(--neu-primary-50, rgba(0, 176, 160, .1));border:1px solid var(--neu-primary-100, rgba(0, 176, 160, .22));border-radius:var(--neu-radius-full, 999px)}.neu-rich-text-editor__variable:hover:not(:disabled){background:var(--neu-primary-100, rgba(0, 176, 160, .18))}.neu-rich-text-editor__surface{min-height:180px;max-height:min(60vh,560px);padding:var(--neu-space-4, 1rem);overflow:auto;color:var(--neu-text);font-size:var(--neu-text-base, 1rem);line-height:1.55;background:var(--neu-surface);outline:none;-webkit-overflow-scrolling:touch}.neu-rich-text-editor-host--sm .neu-rich-text-editor__surface{min-height:140px;padding:var(--neu-space-3, .75rem);font-size:var(--neu-text-sm, .875rem)}.neu-rich-text-editor-host--lg .neu-rich-text-editor__surface{min-height:240px;padding:var(--neu-space-5, 1.25rem);font-size:var(--neu-text-lg, 1.125rem)}.neu-rich-text-editor__surface:empty:before{color:var(--neu-text-muted);pointer-events:none;content:attr(data-placeholder)}.neu-rich-text-editor__surface :where(p,ul,ol,blockquote,table){margin:0 0 .85em}.neu-rich-text-editor__surface :where(p:last-child,ul:last-child,ol:last-child,blockquote:last-child){margin-bottom:0}.neu-rich-text-editor__surface :where(ul,ol){padding-left:1.4rem}.neu-rich-text-editor__surface :where(a){color:var(--neu-primary-dark, var(--neu-primary));text-decoration:underline;text-underline-offset:2px}.neu-rich-text-editor__surface :where(img){max-width:100%;height:auto;border-radius:var(--neu-radius-sm, .375rem)}.neu-rich-text-editor__surface :where(blockquote){padding-left:var(--neu-space-4, 1rem);color:var(--neu-text-muted);border-left:3px solid var(--neu-primary-100, rgba(0, 176, 160, .22))}.neu-rich-text-editor__surface :where(table){width:100%;border-collapse:collapse}.neu-rich-text-editor__surface :where(td,th){padding:.45rem;border:1px solid var(--neu-border)}.neu-rich-text-editor__hint,.neu-rich-text-editor__error{margin:0;font-size:var(--neu-text-xs, .75rem);line-height:1.45}.neu-rich-text-editor__hint{color:var(--neu-text-muted)}.neu-rich-text-editor__error{color:var(--neu-error);font-weight:600}.neu-rich-text-editor__preview{padding:var(--neu-space-3, .75rem);background:var(--neu-surface-2, #f8fafc);border:1px solid var(--neu-border);border-radius:var(--neu-radius, .5rem)}.neu-rich-text-editor__preview summary{cursor:pointer;color:var(--neu-text);font-weight:700}.neu-rich-text-editor__preview-content{margin-top:var(--neu-space-3, .75rem)}.neu-rich-text-editor--disabled{opacity:.72}.neu-rich-text-editor--disabled .neu-rich-text-editor__surface{cursor:not-allowed;background:var(--neu-surface-2, #f8fafc)}\n"], dependencies: [{ kind: "component", type: NeuButtonComponent, selector: "button[neu-button]", inputs: ["variant", "size", "disabled", "loading", "fullWidth", "icon", "iconPosition", "iconOnly", "ariaLabel"], outputs: ["neuClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuRichTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'neu-rich-text-editor', imports: [NeuButtonComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'neu-rich-text-editor-host',
+                        '[class.neu-rich-text-editor-host--sm]': 'size() === "sm"',
+                        '[class.neu-rich-text-editor-host--lg]': 'size() === "lg"',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NeuRichTextEditorComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <div class="neu-rich-text-editor" [class.neu-rich-text-editor--disabled]="isDisabledFinal()">
+      @if (label()) {
+        <label class="neu-rich-text-editor__label" [id]="editorId() + '-label'" [for]="editorId()">
+          {{ label() }}
+        </label>
+      }
+
+      <div
+        class="neu-rich-text-editor__frame"
+        [class.neu-rich-text-editor__frame--focused]="focused()"
+        [class.neu-rich-text-editor__frame--error]="hasError()"
+      >
+        <div
+          class="neu-rich-text-editor__toolbar"
+          role="toolbar"
+          [attr.aria-label]="mergedLabels().toolbar"
+        >
+          <div
+            class="neu-rich-text-editor__toolbar-group"
+            role="group"
+            [attr.aria-label]="mergedLabels().formatGroup"
+          >
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideBold"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().bold"
+              [title]="mergedLabels().bold"
+              [disabled]="isDisabledFinal()"
+              (click)="format('bold')"
+            ></button>
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideItalic"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().italic"
+              [title]="mergedLabels().italic"
+              [disabled]="isDisabledFinal()"
+              (click)="format('italic')"
+            ></button>
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideUnderline"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().underline"
+              [title]="mergedLabels().underline"
+              [disabled]="isDisabledFinal()"
+              (click)="format('underline')"
+            ></button>
+          </div>
+
+          <div
+            class="neu-rich-text-editor__toolbar-group"
+            role="group"
+            [attr.aria-label]="mergedLabels().listsGroup"
+          >
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideList"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().unorderedList"
+              [title]="mergedLabels().unorderedList"
+              [disabled]="isDisabledFinal()"
+              (click)="format('insertUnorderedList')"
+            ></button>
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideListOrdered"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().orderedList"
+              [title]="mergedLabels().orderedList"
+              [disabled]="isDisabledFinal()"
+              (click)="format('insertOrderedList')"
+            ></button>
+          </div>
+
+          <div
+            class="neu-rich-text-editor__toolbar-group"
+            role="group"
+            [attr.aria-label]="mergedLabels().insertGroup"
+          >
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideLink"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().addLink"
+              [title]="mergedLabels().addLink"
+              [disabled]="isDisabledFinal()"
+              (click)="addLink()"
+            ></button>
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideImage"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().addImageUrl"
+              [title]="mergedLabels().addImageUrl"
+              [disabled]="isDisabledFinal()"
+              (click)="addImageUrl()"
+            ></button>
+          </div>
+
+          <div
+            class="neu-rich-text-editor__toolbar-group"
+            role="group"
+            [attr.aria-label]="mergedLabels().clearGroup"
+          >
+            <button
+              neu-button
+              type="button"
+              variant="ghost"
+              size="sm"
+              icon="lucideEraser"
+              [iconOnly]="true"
+              [ariaLabel]="mergedLabels().clearFormat"
+              [title]="mergedLabels().clearFormat"
+              [disabled]="isDisabledFinal()"
+              (click)="format('removeFormat')"
+            ></button>
+          </div>
+        </div>
+
+        @if (variables().length) {
+          <div class="neu-rich-text-editor__variables" [attr.aria-label]="variablesAriaLabel()">
+            <span class="neu-rich-text-editor__variables-label">{{ variablesLabel() }}</span>
+            @for (variable of variables(); track variable) {
+              <button
+                class="neu-rich-text-editor__variable"
+                type="button"
+                [disabled]="isDisabledFinal()"
+                (click)="insertVariable(variable)"
+              >
+                {{ variable }}
+              </button>
+            }
+          </div>
+        }
+
+        <div
+          #editorRef
+          class="neu-rich-text-editor__surface"
+          role="textbox"
+          aria-multiline="true"
+          [id]="editorId()"
+          [attr.aria-label]="label() ? null : mergedLabels().toolbar"
+          [attr.aria-labelledby]="label() ? editorId() + '-label' : null"
+          [attr.contenteditable]="isDisabledFinal() ? 'false' : 'true'"
+          [attr.data-placeholder]="placeholder()"
+          [attr.aria-describedby]="ariaDescribedBy()"
+          [attr.aria-invalid]="hasError() ? 'true' : null"
+          [style.min-height]="minHeight()"
+          (input)="handleInput()"
+          (focus)="onFocus()"
+          (blur)="onBlur()"
+          (paste)="handlePaste($event)"
+        ></div>
+      </div>
+
+      @if (hasError()) {
+        <p class="neu-rich-text-editor__error" [id]="editorId() + '-error'" role="alert">
+          {{ errorMessage() }}
+        </p>
+      } @else if (hint()) {
+        <p class="neu-rich-text-editor__hint" [id]="editorId() + '-hint'">{{ hint() }}</p>
+      }
+
+      @if (showPreview() && value()) {
+        <details class="neu-rich-text-editor__preview">
+          <summary>{{ previewLabel() }}</summary>
+          <div class="neu-rich-text-editor__preview-content" [innerHTML]="value()"></div>
+        </details>
+      }
+    </div>
+  `, styles: [".neu-rich-text-editor-host{display:block;font-family:var(--neu-font-sans)}.neu-rich-text-editor{display:grid;gap:var(--neu-space-2, .5rem);color:var(--neu-text)}.neu-rich-text-editor__label{color:var(--neu-text);font-size:var(--neu-text-sm);font-weight:700;line-height:1.2}.neu-rich-text-editor__frame{overflow:hidden;background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius-lg, .75rem);box-shadow:var(--neu-shadow-sm, 0 1px 2px rgba(15, 23, 42, .08));transition:border-color var(--neu-transition),box-shadow var(--neu-transition),background-color var(--neu-transition)}.neu-rich-text-editor__frame--focused{border-color:var(--neu-border-focus, var(--neu-primary));box-shadow:var(--neu-focus-ring, 0 0 0 3px rgba(0, 176, 160, .18))}.neu-rich-text-editor__frame--error{border-color:var(--neu-error)}.neu-rich-text-editor__toolbar{display:flex;flex-wrap:wrap;gap:var(--neu-space-2, .5rem);align-items:center;min-height:46px;padding:var(--neu-space-2, .5rem);background:var(--neu-surface-2, #f8fafc);border-bottom:1px solid var(--neu-border)}.neu-rich-text-editor__toolbar-group{display:inline-flex;align-items:center;gap:2px;padding:2px;background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius, .5rem)}.neu-rich-text-editor__toolbar .neu-button--ghost{color:var(--neu-text-muted)}.neu-rich-text-editor__toolbar .neu-button--ghost:hover:not(:disabled):not(.neu-button--disabled){color:var(--neu-text);background:var(--neu-primary-50, rgba(0, 176, 160, .1))}.neu-rich-text-editor__variables{display:flex;flex-wrap:wrap;gap:var(--neu-space-2, .5rem);align-items:center;padding:var(--neu-space-2, .5rem) var(--neu-space-3, .75rem);background:var(--neu-surface);border-bottom:1px solid var(--neu-border)}.neu-rich-text-editor__variables-label{color:var(--neu-text-muted);font-size:var(--neu-text-xs, .75rem);font-weight:700}.neu-rich-text-editor__variable{min-height:28px;padding:0 var(--neu-space-2, .5rem);color:var(--neu-primary-dark, var(--neu-primary));font:inherit;font-size:var(--neu-text-xs, .75rem);font-weight:700;cursor:pointer;background:var(--neu-primary-50, rgba(0, 176, 160, .1));border:1px solid var(--neu-primary-100, rgba(0, 176, 160, .22));border-radius:var(--neu-radius-full, 999px)}.neu-rich-text-editor__variable:hover:not(:disabled){background:var(--neu-primary-100, rgba(0, 176, 160, .18))}.neu-rich-text-editor__surface{min-height:180px;max-height:min(60vh,560px);padding:var(--neu-space-4, 1rem);overflow:auto;color:var(--neu-text);font-size:var(--neu-text-base, 1rem);line-height:1.55;background:var(--neu-surface);outline:none;-webkit-overflow-scrolling:touch}.neu-rich-text-editor-host--sm .neu-rich-text-editor__surface{min-height:140px;padding:var(--neu-space-3, .75rem);font-size:var(--neu-text-sm, .875rem)}.neu-rich-text-editor-host--lg .neu-rich-text-editor__surface{min-height:240px;padding:var(--neu-space-5, 1.25rem);font-size:var(--neu-text-lg, 1.125rem)}.neu-rich-text-editor__surface:empty:before{color:var(--neu-text-muted);pointer-events:none;content:attr(data-placeholder)}.neu-rich-text-editor__surface :where(p,ul,ol,blockquote,table){margin:0 0 .85em}.neu-rich-text-editor__surface :where(p:last-child,ul:last-child,ol:last-child,blockquote:last-child){margin-bottom:0}.neu-rich-text-editor__surface :where(ul,ol){padding-left:1.4rem}.neu-rich-text-editor__surface :where(a){color:var(--neu-primary-dark, var(--neu-primary));text-decoration:underline;text-underline-offset:2px}.neu-rich-text-editor__surface :where(img){max-width:100%;height:auto;border-radius:var(--neu-radius-sm, .375rem)}.neu-rich-text-editor__surface :where(blockquote){padding-left:var(--neu-space-4, 1rem);color:var(--neu-text-muted);border-left:3px solid var(--neu-primary-100, rgba(0, 176, 160, .22))}.neu-rich-text-editor__surface :where(table){width:100%;border-collapse:collapse}.neu-rich-text-editor__surface :where(td,th){padding:.45rem;border:1px solid var(--neu-border)}.neu-rich-text-editor__hint,.neu-rich-text-editor__error{margin:0;font-size:var(--neu-text-xs, .75rem);line-height:1.45}.neu-rich-text-editor__hint{color:var(--neu-text-muted)}.neu-rich-text-editor__error{color:var(--neu-error);font-weight:600}.neu-rich-text-editor__preview{padding:var(--neu-space-3, .75rem);background:var(--neu-surface-2, #f8fafc);border:1px solid var(--neu-border);border-radius:var(--neu-radius, .5rem)}.neu-rich-text-editor__preview summary{cursor:pointer;color:var(--neu-text);font-weight:700}.neu-rich-text-editor__preview-content{margin-top:var(--neu-space-3, .75rem)}.neu-rich-text-editor--disabled{opacity:.72}.neu-rich-text-editor--disabled .neu-rich-text-editor__surface{cursor:not-allowed;background:var(--neu-surface-2, #f8fafc)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], toolbarAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarAriaLabel", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], variables: [{ type: i0.Input, args: [{ isSignal: true, alias: "variables", required: false }] }], variablesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "variablesLabel", required: false }] }], variablesAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "variablesAriaLabel", required: false }] }], maxPastedImageBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxPastedImageBytes", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], previewLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewLabel", required: false }] }], editorId: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorId", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], imageRejected: [{ type: i0.Output, args: ["imageRejected"] }], editorRef: [{ type: i0.ViewChild, args: ['editorRef', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NEU_RICH_TEXT_ALLOWED_TAGS, NeuRichTextEditorComponent, escapeRichTextAttribute, escapeRichTextHtml, normalizeRichTextHtml, plainTextToRichTextHtml, sanitizeRichTextHtml };
+//# sourceMappingURL=neural-ui-core-rich-text-editor.mjs.map