@aquera/nile-elements 2.0.16 → 2.0.17

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-editor.js

@@ -5,7 +5,7 @@ import { EditorView } from 'prosemirror-view';
 import { TextSelection } from 'prosemirror-state';
 import NileElement from '../internal/nile-element';
 import { styles } from './nile-wysiwyg-editor.css';
-import { defaultSchema, createEditorState, computeToolbarState, htmlToDoc, htmlToSlice, docToHtml, docToText, docToMarkdown, markdownToHtml, docToJson, jsonToDoc, isDocEmpty, sanitizeHtml, getCommand, getMarkRange, flattenToSingleParagraph, imageUploadKey, findUploadPos, countWords, TaskItemView, ImageView, FigureView, EmbedView, StyleBlockView, MathView, isOfficeHtml, cleanOfficeHtml, toInlineStyledHtml, buildWordDocument, buildPrintDocument, isFormatPainterArmed, armFormatPainter, disarmFormatPainter, applyFormatPainter, getFindState, searchTr, findStepTr, clearFindTr, replaceActiveTr, replaceAllTr, } from './engine';
+import { defaultSchema, createEditorState, computeToolbarState, htmlToDoc, htmlToSlice, docToHtml, docToText, docToMarkdown, markdownToHtml, docToJson, jsonToDoc, isDocEmpty, sanitizeHtml, relocateEmailContainers, getCommand, getMarkRange, flattenToSingleParagraph, imageUploadKey, findUploadPos, countWords, TaskItemView, ImageView, FigureView, EmbedView, StyleBlockView, MathView, isOfficeHtml, cleanOfficeHtml, toInlineStyledHtml, buildWordDocument, buildPrintDocument, isFormatPainterArmed, armFormatPainter, disarmFormatPainter, applyFormatPainter, getFindState, searchTr, findStepTr, clearFindTr, replaceActiveTr, replaceAllTr, normalizeEmailAllowedStyles, parseAllowedStylesAttr, } from './engine';
 import { selectedImageInfo } from './engine/commands';
 import { DEFAULT_TOOLBAR } from './types';
 import { EMOJI } from './emoji';
@@ -126,6 +126,8 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
         this.noSlashCommands = false;
         /** Disables the ":" emoji picker. */
         this.noEmoji = false;
+        /** Hides the floating table toolbar; with `email-fidelity` it also hides in layout tables. */
+        this.noTableMenu = false;
         /** Maximum character count; further input is rejected. 0 = unlimited. */
         this.maxLength = 0;
         /** Always show the word/character counter footer (implied by maxlength). */
@@ -144,6 +146,10 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
         this.pasteAsPlainText = false;
         /** Disables Markdown detection on plain-text pastes. */
         this.noMarkdownPaste = false;
+        /** Opt-in mode for table-based email HTML; off by default (output unchanged). */
+        this.emailFidelity = false;
+        /** Extra inline CSS to keep per tag under `email-fidelity`: `{ td: ['letter-spacing'] }` or `"td: letter-spacing"`. */
+        this.allowedStyles = {};
         /** Disables typography autocorrect (smart quotes, dashes, (c) → ©). */
         this.noTextTransform = false;
         /** Expands the editor to fill the viewport. Esc exits. */
@@ -155,6 +161,9 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
         this.counter = { words: 0, characters: 0 };
         /** Which list the shared insert-menu is showing, if open. */
         this.insertMenuMode = null;
+        /** Validated `allowedStyles`, recomputed once per config change (so the
+         * drop warnings fire once, not on every paste). */
+        this.normalizedAllowedStyles = new Map();
         this.mentionMatch = null;
         this.slashMatch = null;
         this.emojiMatch = null;
@@ -164,6 +173,9 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
         this.lastAutosaveValue = '';
         this.defaultValue = '';
         this.syncingValue = false;
+        /** Last raw HTML given to setContent; a re-parse reads it while the document is unedited. */
+        this.lastSourceHtml = '';
+        this.lastSerializedValue = '';
         this.pendingChange = false;
         /** Body overflow value before fullscreen locked it; null = not locked. */
         this.previousBodyOverflow = null;
@@ -181,6 +193,7 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
                     menu.open = false;
             });
         };
+        this.renderProbe = null;
         /**
          * True while a drag-selection is in progress with the format painter armed.
          * Suppresses the mid-drag auto-apply in {@link handleTransaction} so the
@@ -330,11 +343,16 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
         }
     }
     updated(changed) {
-        if (changed.has('value') && this.view && !this.syncingValue) {
-            const current = docToHtml(this.view.state.doc);
-            if (current !== this.value)
-                this.setContent(this.value);
-        }
+        // Normalize the allowlist first; a value change is external only if it differs from the serialized doc.
+        if (changed.has('allowedStyles')) {
+            this.normalizedAllowedStyles = normalizeEmailAllowedStyles(this.allowedStyles);
+        }
+        const externalValueChange = changed.has('value') &&
+            !!this.view &&
+            !this.syncingValue &&
+            this.serializeDoc(this.view.state.doc) !== this.value;
+        if (externalValueChange)
+            this.setContent(this.value);
         this.syncingValue = false;
         if ((changed.has('disabled') || changed.has('readonly')) && this.view) {
             this.view.setProps({});
@@ -358,6 +376,19 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
         if (changed.has('noTextTransform') && this.view && !changed.has('value')) {
             this.view.updateState(this.buildState(this.view.state.doc));
         }
+        // Toggling fidelity re-parses the current value: the flag changes how the
+        // same HTML maps to the document model (container styles, cell layout…).
+        if (changed.has('emailFidelity') && this.view && !externalValueChange) {
+            this.setContent(this.reparseSource());
+        }
+        // A new allowlist re-parses so the newly-allowed properties take effect on
+        // already-loaded content (recovering them from the raw source when unedited).
+        else if (changed.has('allowedStyles') && this.view && !externalValueChange) {
+            this.setContent(this.reparseSource());
+        }
+        if (changed.has('noTableMenu') || changed.has('emailFidelity')) {
+            this.updateOverlays();
+        }
         // Lock page scrolling while fullscreen covers the viewport.
         if (changed.has('fullscreen')) {
             if (this.fullscreen) {
@@ -425,6 +456,8 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
             getMaxLength: () => this.maxLength,
             getForcePlainText: () => this.pasteAsPlainText,
             getMarkdownPaste: () => !this.noMarkdownPaste,
+            getEmailFidelity: () => this.emailFidelity,
+            getAllowedStyles: () => this.normalizedAllowedStyles,
             getSanitize: () => this.sanitize,
             textTransform: !this.noTextTransform,
         });
@@ -442,11 +475,49 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
             formatPainter: isFormatPainterArmed(state),
         };
     }
+    /** HTML to re-parse when fidelity / the allowlist changes: the raw source when
+     * the document is still unedited (so a newly-allowed property can be recovered),
+     * otherwise the current serialized value (so user edits are kept). */
+    reparseSource() {
+        return this.value === this.lastSerializedValue ? this.lastSourceHtml : this.value;
+    }
+    /** The saved HTML; with email-fidelity it carries the editor's table rendering. */
+    serializeDoc(doc) {
+        return docToHtml(doc, this.emailFidelity ? this.emailRenderDefaults() : undefined);
+    }
+    /** Theme-resolved table border and header colours; null where the theme draws none. */
+    emailRenderDefaults() {
+        const root = this.shadowRoot;
+        if (!root || !this.isConnected)
+            return { borderColor: null, headerBackground: null };
+        if (!this.renderProbe || !this.renderProbe.isConnected) {
+            const probe = document.createElement('span');
+            probe.setAttribute('aria-hidden', 'true');
+            probe.style.cssText =
+                'position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;' +
+                    'border-top:1px solid var(--nile-wysiwyg-table-border, var(--nile-colors-neutral-300, var(--ng-colors-border-primary)));' +
+                    'background-color:var(--nile-wysiwyg-table-header-bg, var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary)));';
+            root.appendChild(probe);
+            this.renderProbe = probe;
+        }
+        const computed = getComputedStyle(this.renderProbe);
+        const background = computed.backgroundColor;
+        return {
+            borderColor: computed.borderTopStyle === 'solid' ? computed.borderTopColor : null,
+            headerBackground: background && background !== 'transparent' && background !== 'rgba(0, 0, 0, 0)'
+                ? background
+                : null,
+        };
+    }
+    /** Email-fidelity options threaded to every sanitize/parse call. */
+    emailOptions() {
+        return { emailFidelity: this.emailFidelity, allowedStyles: this.normalizedAllowedStyles };
+    }
     mountView() {
         if (this.view || !this.surfaceEl)
             return;
         let doc = this.value
-            ? htmlToDoc(defaultSchema, this.value, this.sanitize)
+            ? htmlToDoc(defaultSchema, this.value, this.sanitize, this.emailOptions())
             : undefined;
         if (doc && this.singleLine)
             doc = flattenToSingleParagraph(doc);
@@ -458,7 +529,12 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
                 // Word/Google Docs clipboard HTML gets normalized (real lists, no
                 // mso noise) before the sanitizer clamps it to the schema.
                 const cleaned = isOfficeHtml(pasted) ? cleanOfficeHtml(pasted) : pasted;
-                return this.sanitize ? sanitizeHtml(cleaned) : cleaned;
+                let out = this.sanitize ? sanitizeHtml(cleaned, this.emailOptions()) : cleaned;
+                // Lift container background/font off the markup so pasted email HTML
+                // doesn't bloat into per-run marks (fidelity only).
+                if (this.emailFidelity)
+                    out = relocateEmailContainers(out);
+                return out;
             },
             handleDOMEvents: {
                 mousedown: () => {
@@ -551,7 +627,7 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
         }
     }
     buildChangeDetail(doc) {
-        const value = isDocEmpty(doc) ? '' : docToHtml(doc);
+        const value = isDocEmpty(doc) ? '' : this.serializeDoc(doc);
         return { value, json: docToJson(doc), content: value };
     }
     scheduleChange() {
@@ -572,7 +648,7 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
     syncFormValue(doc) {
         if (!this.internals)
             return;
-        const value = isDocEmpty(doc) ? '' : docToHtml(doc);
+        const value = isDocEmpty(doc) ? '' : this.serializeDoc(doc);
         this.internals.setFormValue(value === '' ? null : value);
         this.updateValidity();
     }
@@ -653,7 +729,12 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
             this.bubbleMenuEl.updateComplete.then(() => this.positionOverlay(this.bubbleMenuEl, 'above'));
         }
         if (this.tableMenuEl) {
-            const showTable = this.hasFocus && !!this.toolbarState && this.toolbarState.inTable && !panelOpen;
+            const showTable = !this.noTableMenu &&
+                this.hasFocus &&
+                !!this.toolbarState &&
+                this.toolbarState.inTable &&
+                !(this.emailFidelity && this.toolbarState.tableLayout) &&
+                !panelOpen;
             this.tableMenuEl.open = showTable;
             if (showTable) {
                 this.tableMenuEl.updateComplete.then(() => this.positionOverlay(this.tableMenuEl, 'below'));
@@ -1426,7 +1507,7 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
     }
     getHTML() {
         return this.view && !isDocEmpty(this.view.state.doc)
-            ? docToHtml(this.view.state.doc)
+            ? this.serializeDoc(this.view.state.doc)
             : '';
     }
     getJSON() {
@@ -1464,15 +1545,18 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
                 this.value = content;
             return;
         }
+        if (typeof content === 'string')
+            this.lastSourceHtml = content;
         let doc = typeof content === 'string'
-            ? htmlToDoc(defaultSchema, content, this.sanitize)
+            ? htmlToDoc(defaultSchema, content, this.sanitize, this.emailOptions())
             : jsonToDoc(defaultSchema, content);
         if (this.singleLine)
             doc = flattenToSingleParagraph(doc);
         this.view.updateState(this.buildState(doc));
         this.toolbarState = this.snapshotToolbar(this.view.state);
         this.syncingValue = true;
-        this.value = isDocEmpty(doc) ? '' : docToHtml(doc);
+        this.value = isDocEmpty(doc) ? '' : this.serializeDoc(doc);
+        this.lastSerializedValue = this.value;
         this.syncFormValue(doc);
         if (emitChange) {
             this.emit('nile-input', this.buildChangeDetail(doc));
@@ -1486,7 +1570,7 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
     insertHTML(htmlContent) {
         if (!this.view)
             return;
-        const slice = htmlToSlice(defaultSchema, htmlContent, this.sanitize);
+        const slice = htmlToSlice(defaultSchema, htmlContent, this.sanitize, this.emailOptions());
         this.view.dispatch(this.view.state.tr.replaceSelection(slice).scrollIntoView());
         this.view.focus();
     }
@@ -2001,6 +2085,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'no-emoji' })
 ], NileWysiwygEditor.prototype, "noEmoji", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-table-menu' })
+], NileWysiwygEditor.prototype, "noTableMenu", void 0);
 __decorate([
     property({ type: Number, attribute: 'maxlength' })
 ], NileWysiwygEditor.prototype, "maxLength", void 0);
@@ -2082,6 +2169,17 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'no-markdown-paste' })
 ], NileWysiwygEditor.prototype, "noMarkdownPaste", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'email-fidelity', reflect: true })
+], NileWysiwygEditor.prototype, "emailFidelity", void 0);
+__decorate([
+    property({
+        attribute: 'allowed-styles',
+        converter: {
+            fromAttribute: (value) => parseAllowedStylesAttr(value ?? ''),
+        },
+    })
+], NileWysiwygEditor.prototype, "allowedStyles", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'no-text-transform' })
 ], NileWysiwygEditor.prototype, "noTextTransform", void 0);