@aquera/nile-elements 1.9.6 → 1.9.7

package/src/nile-wysiwyg-editor/engine/create-state.ts

@@ -0,0 +1,117 @@
+import { EditorState, Plugin, PluginKey } from 'prosemirror-state';
+import { Node as PMNode, Schema } from 'prosemirror-model';
+import { history } from 'prosemirror-history';
+import { dropCursor } from 'prosemirror-dropcursor';
+import { gapCursor } from 'prosemirror-gapcursor';
+import { buildKeymapPlugins, KeymapOptions } from './keymap';
+import { buildInputRules } from './inputrules';
+import { placeholderPlugin } from './plugins/placeholder';
+import { linkPlugin, LinkPluginOptions } from './plugins/link';
+import { singleLinePlugin } from './plugins/single-line';
+import { tablePlugins } from './plugins/tables';
+import { imagePlugin, ImagePluginOptions } from './plugins/image';
+import { suggestionPlugin, SuggestionOptions } from './plugins/suggestions';
+import { findReplacePlugin } from './plugins/find-replace';
+import { maxLengthPlugin } from './plugins/max-length';
+import { codeHighlightPlugin } from './plugins/code-highlight';
+import { embedPastePlugin } from './plugins/embeds';
+import { pastePlugin } from './plugins/paste';
+import { formatPainterPlugin } from './plugins/format-painter';
+import { defaultSchema } from './schema';
+
+export const mentionSuggestKey = new PluginKey('nileMentionSuggest');
+export const slashSuggestKey = new PluginKey('nileSlashSuggest');
+export const emojiSuggestKey = new PluginKey('nileEmojiSuggest');
+
+export interface CreateStateOptions
+  extends KeymapOptions,
+    LinkPluginOptions,
+    ImagePluginOptions {
+  schema?: Schema;
+  doc?: PMNode;
+  /** Read live so the placeholder updates without rebuilding state. */
+  getPlaceholder?: () => string;
+  singleLine?: boolean;
+  /** Mention suggestions (omit onChange to disable the plugin). */
+  mentions?: Omit<SuggestionOptions, 'startOfLine'>;
+  /** Slash-command suggestions, anchored to the start of a block. */
+  slashCommands?: Omit<SuggestionOptions, 'startOfLine' | 'getTriggers'>;
+  /** ":" emoji suggestions (activates after two query characters). */
+  emoji?: Omit<SuggestionOptions, 'startOfLine' | 'getTriggers' | 'minQueryLength'>;
+  /** Character limit, read live. Return 0/undefined for unlimited. */
+  getMaxLength?: () => number;
+  /** Read live: when true, all pastes drop formatting. */
+  getForcePlainText?: () => boolean;
+  /** Read live: when false, plain-text pastes are never parsed as Markdown. */
+  getMarkdownPaste?: () => boolean;
+  /** Read live: whether pasted/parsed HTML is sanitized. Defaults to on. */
+  getSanitize?: () => boolean;
+  /** Typography autocorrect (smart quotes, dashes, (c)…). Defaults to on. */
+  textTransform?: boolean;
+  /** Extra plugins appended after the built-in set (later phases, tests). */
+  plugins?: Plugin[];
+}
+
+export function createEditorState(options: CreateStateOptions = {}): EditorState {
+  const schema = options.schema ?? defaultSchema;
+  const plugins: Plugin[] = [];
+
+  // Suggestion plugins must come BEFORE the keymaps: handleKeyDown props run
+  // in plugin order, and the popup needs first claim on Enter/Tab/arrows
+  // while a mention or slash query is active.
+  if (options.mentions) {
+    plugins.push(suggestionPlugin(mentionSuggestKey, options.mentions));
+  }
+  if (options.slashCommands) {
+    plugins.push(
+      suggestionPlugin(slashSuggestKey, {
+        ...options.slashCommands,
+        getTriggers: () => ['/'],
+        startOfLine: true,
+      })
+    );
+  }
+  if (options.emoji) {
+    plugins.push(
+      suggestionPlugin(emojiSuggestKey, {
+        ...options.emoji,
+        getTriggers: () => [':'],
+        minQueryLength: 2,
+      })
+    );
+  }
+
+  plugins.push(
+    buildInputRules(schema, { textTransform: options.textTransform }),
+    ...buildKeymapPlugins(schema, {
+      onLinkShortcut: options.onLinkShortcut,
+      onFindShortcut: options.onFindShortcut,
+      onShortcutHelp: options.onShortcutHelp,
+    }),
+    history(),
+    dropCursor(),
+    gapCursor(),
+    placeholderPlugin(options.getPlaceholder ?? (() => '')),
+    linkPlugin({ onOpenLink: options.onOpenLink }),
+    ...tablePlugins(),
+    imagePlugin({ onImageFiles: options.onImageFiles }),
+    findReplacePlugin(),
+    codeHighlightPlugin(),
+    embedPastePlugin(),
+    formatPainterPlugin(),
+    pastePlugin(schema, {
+      getForcePlainText: options.getForcePlainText,
+      getMarkdownPaste: options.getMarkdownPaste,
+      getSanitize: options.getSanitize,
+    })
+  );
+  if (options.getMaxLength) plugins.push(maxLengthPlugin(options.getMaxLength));
+  if (options.singleLine) plugins.push(singleLinePlugin());
+  if (options.plugins) plugins.push(...options.plugins);
+
+  return EditorState.create({
+    schema,
+    doc: options.doc,
+    plugins,
+  });
+}

package/src/nile-wysiwyg-editor/engine/export.test.ts

@@ -0,0 +1,113 @@
+import { expect } from '@open-wc/testing';
+import { toInlineStyledHtml, buildWordDocument, buildPrintDocument } from './export';
+
+/** Renders HTML into a live, attached, styled element and returns its root. */
+function styledRoot(inner: string, css = ''): HTMLElement {
+  const host = document.createElement('div');
+  if (css) {
+    const style = document.createElement('style');
+    style.textContent = css;
+    host.appendChild(style);
+  }
+  const root = document.createElement('div');
+  root.innerHTML = inner;
+  host.appendChild(root);
+  document.body.appendChild(host);
+  return root;
+}
+
+describe('export', () => {
+  describe('toInlineStyledHtml', () => {
+    it('folds computed colour into an inline style attribute', () => {
+      const root = styledRoot('<p class="c">hi</p>', '.c { color: rgb(255, 0, 0); }');
+      const out = toInlineStyledHtml(root);
+      root.parentElement!.remove();
+      expect(out).to.match(/<p[^>]*style="[^"]*color: rgb\(255, 0, 0\)/);
+    });
+
+    it('strips classes and editor-only attributes', () => {
+      const root = styledRoot('<p class="foo" contenteditable="true" data-x="1">t</p>');
+      const out = toInlineStyledHtml(root);
+      root.parentElement!.remove();
+      expect(out).to.not.include('class=');
+      expect(out).to.not.include('contenteditable');
+      expect(out).to.not.include('data-x');
+    });
+
+    it('keeps structural attributes like href and src', () => {
+      const root = styledRoot('<p><a href="https://a.b">x</a></p>');
+      const out = toInlineStyledHtml(root);
+      root.parentElement!.remove();
+      expect(out).to.include('href="https://a.b"');
+    });
+
+    it('does not repeat inherited values already set on the parent', () => {
+      const root = styledRoot(
+        '<div class="wrap"><p>child</p></div>',
+        '.wrap { color: rgb(0, 128, 0); }'
+      );
+      const out = toInlineStyledHtml(root);
+      root.parentElement!.remove();
+      // The wrapper carries the colour; the inheriting <p> should not repeat it.
+      const pMatch = /<p([^>]*)>/.exec(out);
+      expect(pMatch![1]).to.not.include('color: rgb(0, 128, 0)');
+    });
+
+    it('caps images at 100% width', () => {
+      const root = styledRoot('<p><img src="data:image/png;base64,AA" alt="x"></p>');
+      const out = toInlineStyledHtml(root);
+      root.parentElement!.remove();
+      expect(out).to.match(/<img[^>]*max-width: 100%/);
+    });
+
+    it('emits borders on table cells', () => {
+      const root = styledRoot(
+        '<table><tbody><tr><td class="cell">a</td></tr></tbody></table>',
+        '.cell { border: 2px solid rgb(0, 0, 0); }'
+      );
+      const out = toInlineStyledHtml(root);
+      root.parentElement!.remove();
+      // Four equal sides serialize to the border-width/style/color shorthand.
+      expect(out).to.match(/<td[^>]*border-width: 2px/);
+      expect(out).to.match(/<td[^>]*border-style: solid/);
+    });
+  });
+
+  describe('buildWordDocument', () => {
+    it('wraps body in a Word-openable document with office namespaces', () => {
+      const doc = buildWordDocument('<p>hi</p>', 'My File');
+      expect(doc).to.include('xmlns:w="urn:schemas-microsoft-com:office:word"');
+      expect(doc).to.include('<w:WordDocument>');
+      expect(doc).to.include('<title>My File</title>');
+      expect(doc).to.include('<p>hi</p>');
+    });
+
+    it('escapes the title', () => {
+      const doc = buildWordDocument('<p>x</p>', '<evil>');
+      expect(doc).to.include('<title>&lt;evil&gt;</title>');
+    });
+  });
+
+  describe('buildPrintDocument', () => {
+    it('includes page CSS and the body', () => {
+      const doc = buildPrintDocument('<p>hi</p>', { title: 'Doc' });
+      expect(doc).to.include('@page');
+      expect(doc).to.include('<p>hi</p>');
+      expect(doc).to.include('page-break-before: always');
+    });
+
+    it('renders a running header and footer when provided', () => {
+      const doc = buildPrintDocument('<p>x</p>', { header: 'Top', footer: 'Bottom' });
+      expect(doc).to.include('nw-print-header');
+      expect(doc).to.include('Top');
+      expect(doc).to.include('nw-print-footer');
+      expect(doc).to.include('Bottom');
+    });
+
+    it('omits header/footer bands when not provided', () => {
+      const doc = buildPrintDocument('<p>x</p>', { title: 'Doc' });
+      expect(doc).to.not.include('nw-print-header');
+      expect(doc).to.not.include('nw-print-footer');
+    });
+  });
+});

package/src/nile-wysiwyg-editor/engine/export.ts

@@ -0,0 +1,242 @@
+/**
+ * Document export helpers: inline-styled HTML (email-safe), Word (.doc) and
+ * print-to-PDF. All three start from the *live, rendered* content DOM so the
+ * output reflects exactly what the user sees — chosen fonts, colours,
+ * alignment and table borders — rather than a re-derived approximation.
+ *
+ * These functions are dependency-free. PDF export relies on the browser's own
+ * print-to-PDF pipeline (see buildPrintDocument); Word export emits an HTML
+ * document Word opens natively.
+ */
+
+/** Inherited text properties: emitted only when they differ from the parent. */
+const INHERITED_PROPS = [
+  'color',
+  'font-family',
+  'font-size',
+  'font-weight',
+  'font-style',
+  'line-height',
+  'text-align',
+  'text-transform',
+] as const;
+
+/**
+ * Box/decoration properties: emitted only when they differ from their initial
+ * value (listed here). Longhands are used because getComputedStyle does not
+ * reliably return the `margin`/`padding`/`border` shorthands.
+ */
+const BOX_DEFAULTS: Record<string, string[]> = {
+  'background-color': ['rgba(0, 0, 0, 0)', 'transparent'],
+  'text-decoration-line': ['none'],
+  'margin-top': ['0px'],
+  'margin-right': ['0px'],
+  'margin-bottom': ['0px'],
+  'margin-left': ['0px'],
+  'padding-top': ['0px'],
+  'padding-right': ['0px'],
+  'padding-bottom': ['0px'],
+  'padding-left': ['0px'],
+  'vertical-align': ['baseline'],
+};
+
+/** Table-ish elements get their borders folded in for email/Word fidelity. */
+const BORDER_TAGS = new Set(['TABLE', 'TD', 'TH', 'THEAD', 'TBODY', 'TR']);
+
+/** Attributes worth preserving; everything else (class, contenteditable,
+ * spellcheck, data-*, pm-*) is dropped from the exported markup. */
+const KEEP_ATTRS = new Set([
+  'href',
+  'src',
+  'alt',
+  'title',
+  'colspan',
+  'rowspan',
+  'width',
+  'height',
+  'align',
+  'target',
+  'rel',
+]);
+
+function emitBorders(source: Element, style: CSSStyleDeclaration, clone: HTMLElement): void {
+  if (!BORDER_TAGS.has(source.tagName)) return;
+  const cs = getComputedStyle(source);
+  const collapse = cs.getPropertyValue('border-collapse');
+  if (collapse === 'collapse') clone.style.setProperty('border-collapse', 'collapse');
+  for (const side of ['top', 'right', 'bottom', 'left']) {
+    const width = cs.getPropertyValue(`border-${side}-width`);
+    if (width && width !== '0px') {
+      const st = cs.getPropertyValue(`border-${side}-style`) || 'solid';
+      const color = cs.getPropertyValue(`border-${side}-color`);
+      clone.style.setProperty(`border-${side}`, `${width} ${st} ${color}`);
+    }
+  }
+  void style;
+}
+
+/** Folds computed styles from a live source element into a detached clone. */
+function styleElement(source: Element, clone: HTMLElement, parent: Element | null): void {
+  const cs = getComputedStyle(source);
+  const parentCs = parent ? getComputedStyle(parent) : null;
+
+  for (const prop of INHERITED_PROPS) {
+    const value = cs.getPropertyValue(prop);
+    if (!value) continue;
+    if (!parentCs || parentCs.getPropertyValue(prop) !== value) {
+      clone.style.setProperty(prop, value);
+    }
+  }
+
+  for (const [prop, defaults] of Object.entries(BOX_DEFAULTS)) {
+    const value = cs.getPropertyValue(prop);
+    if (value && !defaults.includes(value)) clone.style.setProperty(prop, value);
+  }
+
+  // List markers: emit the resolved bullet/number style on the list container.
+  if (source.tagName === 'UL' || source.tagName === 'OL') {
+    const marker = cs.getPropertyValue('list-style-type');
+    if (marker && marker !== 'none') clone.style.setProperty('list-style-type', marker);
+  }
+
+  // Images and embeds should never overflow the exported page/email column.
+  if (source.tagName === 'IMG' || source.tagName === 'IFRAME') {
+    clone.style.setProperty('max-width', '100%');
+  }
+
+  emitBorders(source, cs, clone);
+
+  // Prune attributes down to the structural allow-list, keeping only style.
+  for (const attr of Array.from(clone.attributes)) {
+    if (attr.name !== 'style' && !KEEP_ATTRS.has(attr.name)) clone.removeAttribute(attr.name);
+  }
+}
+
+/** Recursively clones `source` into `target`'s document, inlining styles. */
+function cloneWithStyles(
+  source: Node,
+  doc: Document,
+  parent: Element | null
+): Node | null {
+  if (source.nodeType === Node.TEXT_NODE) {
+    return doc.createTextNode(source.textContent ?? '');
+  }
+  if (source.nodeType !== Node.ELEMENT_NODE) return null;
+
+  const el = source as Element;
+  // ProseMirror decorations (find-highlights, gap/drop cursors, trailing
+  // break hacks) carry these classes — never part of the real content.
+  if (el.classList.contains('ProseMirror-gapcursor')) return null;
+  if (el.classList.contains('ProseMirror-separator')) return null;
+
+  const clone = doc.createElement(el.tagName.toLowerCase());
+  for (const attr of Array.from(el.attributes)) clone.setAttribute(attr.name, attr.value);
+  styleElement(el, clone as HTMLElement, parent);
+
+  for (const child of Array.from(el.childNodes)) {
+    const cloned = cloneWithStyles(child, doc, el);
+    if (cloned) clone.appendChild(cloned);
+  }
+  return clone;
+}
+
+/**
+ * Serializes the live content root to an HTML string with all styling folded
+ * into inline `style` attributes. Suitable for pasting into email clients that
+ * strip `<style>` blocks and classes.
+ */
+export function toInlineStyledHtml(root: HTMLElement): string {
+  const doc = document.implementation.createHTMLDocument('');
+  const container = doc.createElement('div');
+  for (const child of Array.from(root.childNodes)) {
+    const cloned = cloneWithStyles(child, doc, root);
+    if (cloned) container.appendChild(cloned);
+  }
+  return container.innerHTML;
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+/**
+ * Wraps inline-styled body HTML in a Word-openable HTML document. Word reads
+ * the `ProgId`/`xmlns:w` hints and opens it as a formatted document rather than
+ * raw HTML, preserving headings, lists, tables, colours and images.
+ */
+export function buildWordDocument(bodyHtml: string, title = 'Document'): string {
+  return (
+    '<!DOCTYPE html>\n' +
+    '<html xmlns:o="urn:schemas-microsoft-com:office:office" ' +
+    'xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">' +
+    '<head><meta charset="utf-8">' +
+    `<title>${escapeHtml(title)}</title>` +
+    '<!--[if gte mso 9]><xml><w:WordDocument>' +
+    '<w:View>Print</w:View><w:Zoom>100</w:Zoom><w:DoNotOptimizeForBrowser/>' +
+    '</w:WordDocument></xml><![endif]-->' +
+    '<style>@page { size: A4; margin: 2cm; } ' +
+    'body { font-family: Calibri, Arial, sans-serif; } ' +
+    'table { border-collapse: collapse; } td, th { border: 1px solid #999; padding: 4px; }</style>' +
+    '</head><body>' +
+    bodyHtml +
+    '</body></html>'
+  );
+}
+
+/** Options for the print-to-PDF document. */
+export interface PrintOptions {
+  title?: string;
+  /** Optional running header text (top of every printed page). */
+  header?: string;
+  /** Optional running footer text (bottom of every printed page). */
+  footer?: string;
+  /** Base font family for the printed page. */
+  fontFamily?: string;
+}
+
+/**
+ * Builds a standalone HTML document tuned for print-to-PDF. Page breaks,
+ * embedded images and a chosen base font are honoured by the browser's print
+ * engine; headers/footers render via a fixed running band on each page.
+ */
+export function buildPrintDocument(bodyHtml: string, options: PrintOptions = {}): string {
+  const {
+    title = 'Document',
+    header = '',
+    footer = '',
+    fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+  } = options;
+
+  const runningBands =
+    (header ? `<div class="nw-print-header">${escapeHtml(header)}</div>` : '') +
+    (footer ? `<div class="nw-print-footer">${escapeHtml(footer)}</div>` : '');
+
+  return (
+    '<!DOCTYPE html>\n<html><head><meta charset="utf-8">' +
+    `<title>${escapeHtml(title)}</title><style>` +
+    '@page { size: A4; margin: 20mm; }' +
+    `body { font-family: ${fontFamily}; color: #101828; line-height: 1.5; margin: 0; }` +
+    'img, iframe { max-width: 100%; }' +
+    'table { border-collapse: collapse; width: 100%; }' +
+    'td, th { border: 1px solid #d0d5dd; padding: 6px 8px; }' +
+    'pre, blockquote, table, figure, img { break-inside: avoid; page-break-inside: avoid; }' +
+    'h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }' +
+    '.nw-page-break { break-before: page; page-break-before: always; }' +
+    (header
+      ? '.nw-print-header { position: fixed; top: 0; left: 0; right: 0; ' +
+        'font-size: 10px; color: #667085; padding: 6px 0; }'
+      : '') +
+    (footer
+      ? '.nw-print-footer { position: fixed; bottom: 0; left: 0; right: 0; ' +
+        'font-size: 10px; color: #667085; padding: 6px 0; text-align: center; }'
+      : '') +
+    '</style></head><body>' +
+    runningBands +
+    `<main>${bodyHtml}</main>` +
+    '</body></html>'
+  );
+}

package/src/nile-wysiwyg-editor/engine/index.ts

@@ -0,0 +1,69 @@
+export { createSchema, defaultSchema } from './schema';
+export type { Alignment } from './schema';
+export { sanitizeHtml, isSafeUrl } from './sanitize';
+export {
+  htmlToDoc,
+  htmlToSlice,
+  docToHtml,
+  docToText,
+  docToJson,
+  jsonToDoc,
+  isDocEmpty,
+} from './serializer';
+export { getCommand, getMarkRange } from './commands';
+export type { CommandName, CommandAttrs } from './commands';
+export { docToMarkdown } from './markdown';
+export { markdownToHtml, looksLikeMarkdown } from './markdown-parse';
+export { isOfficeHtml, isExcelHtml, cleanOfficeHtml } from './office-paste';
+export {
+  toInlineStyledHtml,
+  buildWordDocument,
+  buildPrintDocument,
+} from './export';
+export type { PrintOptions } from './export';
+export { selectedImageInfo } from './commands';
+export { ImageView, FigureView } from './plugins/image-view';
+export { EmbedView } from './plugins/embed-view';
+export { MathView } from './plugins/math-view';
+export type { MathRenderer } from './plugins/math-view';
+export { INDENT_STEP_PX, MAX_INDENT, BULLET_STYLES, ORDERED_STYLES } from './schema';
+export { computeToolbarState } from './selection-state';
+export type { ToolbarState } from './selection-state';
+export {
+  createEditorState,
+  mentionSuggestKey,
+  slashSuggestKey,
+  emojiSuggestKey,
+} from './create-state';
+export { maxLengthPlugin } from './plugins/max-length';
+export { TaskItemView } from './plugins/task-list';
+export { codeHighlightPlugin, CODE_LANGUAGES } from './plugins/code-highlight';
+export { toEmbedUrl, isAllowedEmbedSrc, embedPastePlugin } from './plugins/embeds';
+export type { EmbedTarget } from './plugins/embeds';
+export type { CreateStateOptions } from './create-state';
+export { countWords } from './serializer';
+export type { SuggestionMatch, SuggestionOptions } from './plugins/suggestions';
+export {
+  findReplaceKey,
+  getFindState,
+  searchTr,
+  findStepTr,
+  clearFindTr,
+  replaceActiveTr,
+  replaceAllTr,
+} from './plugins/find-replace';
+export type { FindState, FindMatch } from './plugins/find-replace';
+export { placeholderPlugin } from './plugins/placeholder';
+export {
+  formatPainterPlugin,
+  formatPainterKey,
+  isFormatPainterArmed,
+  armFormatPainter,
+  disarmFormatPainter,
+  applyFormatPainter,
+} from './plugins/format-painter';
+export { linkPlugin } from './plugins/link';
+export { singleLinePlugin, flattenToSingleParagraph } from './plugins/single-line';
+export { tablePlugins } from './plugins/tables';
+export { imagePlugin, imageUploadKey, findUploadPos } from './plugins/image';
+export { pastePlugin, plainTextSlice, stripSliceFormatting } from './plugins/paste';