@aquera/nile-elements 1.9.5 → 1.9.7

package/src/nile-wysiwyg-editor/engine/plugins/image-view.ts

@@ -0,0 +1,220 @@
+import { Node as PMNode } from 'prosemirror-model';
+import { EditorView, NodeView } from 'prosemirror-view';
+import { NodeSelection } from 'prosemirror-state';
+
+const MIN_WIDTH = 40;
+
+/**
+ * Attaches four corner drag-handles to a wrapper and returns a cleanup
+ * function. Dragging previews by mutating the target's style; on release the
+ * final width is committed through onCommit (one transaction).
+ */
+export function attachResizeHandles(
+  wrapper: HTMLElement,
+  img: HTMLElement,
+  onCommit: (width: number) => void,
+  minWidth: number = MIN_WIDTH
+): void {
+  for (const corner of ['nw', 'ne', 'sw', 'se']) {
+    const handle = document.createElement('span');
+    handle.className = `nile-wysiwyg__resize-handle nile-wysiwyg__resize-handle--${corner}`;
+    handle.dataset.resizeHandle = corner;
+    handle.contentEditable = 'false';
+    handle.addEventListener('mousedown', event => {
+      event.preventDefault();
+      event.stopPropagation();
+      const startX = event.clientX;
+      const startWidth = img.getBoundingClientRect().width;
+      const sign = corner.includes('w') ? -1 : 1;
+      const maxWidth =
+        wrapper.closest('.ProseMirror')?.getBoundingClientRect().width ?? 2000;
+      let width = startWidth;
+      const onMove = (move: MouseEvent): void => {
+        width = Math.max(
+          minWidth,
+          Math.min(maxWidth, startWidth + sign * (move.clientX - startX))
+        );
+        img.style.width = `${Math.round(width)}px`;
+      };
+      const onUp = (): void => {
+        window.removeEventListener('mousemove', onMove);
+        window.removeEventListener('mouseup', onUp);
+        wrapper.classList.remove('nile-wysiwyg__resizing');
+        onCommit(Math.round(width));
+      };
+      // While dragging, iframes inside the wrapper must not swallow mouse
+      // events (they are separate documents); CSS keys off this class.
+      wrapper.classList.add('nile-wysiwyg__resizing');
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onUp);
+    });
+    wrapper.appendChild(handle);
+  }
+}
+
+export function isResizeEvent(event: Event): boolean {
+  return (
+    event.target instanceof HTMLElement && !!event.target.dataset.resizeHandle
+  );
+}
+
+/** Inline image with drag-resize handles shown while selected. */
+export class ImageView implements NodeView {
+  dom: HTMLSpanElement;
+
+  private img: HTMLImageElement;
+
+  constructor(
+    private node: PMNode,
+    view: EditorView,
+    getPos: () => number | undefined
+  ) {
+    this.dom = document.createElement('span');
+    this.dom.className = 'nile-wysiwyg__image-resizer';
+    this.img = document.createElement('img');
+    this.applyAttrs(node);
+    this.dom.appendChild(this.img);
+    attachResizeHandles(this.dom, this.img, width => {
+      const pos = getPos();
+      if (pos === undefined || !view.editable) return;
+      const current = view.state.doc.nodeAt(pos);
+      if (!current) return;
+      view.dispatch(
+        view.state.tr.setNodeMarkup(pos, undefined, { ...current.attrs, width })
+      );
+    });
+  }
+
+  private applyAttrs(node: PMNode): void {
+    const { src, alt, title, width } = node.attrs;
+    this.img.src = src;
+    if (alt) this.img.alt = alt;
+    else this.img.removeAttribute('alt');
+    if (title) this.img.title = title;
+    else this.img.removeAttribute('title');
+    this.img.style.width = width ? `${width}px` : '';
+  }
+
+  update(node: PMNode): boolean {
+    if (node.type !== this.node.type) return false;
+    this.node = node;
+    this.applyAttrs(node);
+    return true;
+  }
+
+  selectNode(): void {
+    this.dom.classList.add('nile-wysiwyg__image-resizer--selected');
+  }
+
+  deselectNode(): void {
+    this.dom.classList.remove('nile-wysiwyg__image-resizer--selected');
+  }
+
+  stopEvent(event: Event): boolean {
+    return isResizeEvent(event);
+  }
+
+  ignoreMutation(): boolean {
+    return true;
+  }
+}
+
+/**
+ * Captioned figure: non-editable image (with resize handles) above an
+ * editable figcaption (the node's content). Clicking the image selects the
+ * whole figure.
+ */
+export class FigureView implements NodeView {
+  dom: HTMLElement;
+
+  contentDOM: HTMLElement;
+
+  private img: HTMLImageElement;
+
+  private wrapper: HTMLSpanElement;
+
+  constructor(
+    private node: PMNode,
+    view: EditorView,
+    getPos: () => number | undefined
+  ) {
+    this.dom = document.createElement('figure');
+    this.dom.className = 'nile-wysiwyg__figure';
+
+    this.wrapper = document.createElement('span');
+    this.wrapper.className = 'nile-wysiwyg__image-resizer';
+    this.wrapper.contentEditable = 'false';
+    this.img = document.createElement('img');
+    this.wrapper.appendChild(this.img);
+
+    this.contentDOM = document.createElement('figcaption');
+    this.contentDOM.className = 'nile-wysiwyg__figcaption';
+
+    this.dom.append(this.wrapper, this.contentDOM);
+    this.applyAttrs(node);
+
+    // Clicking the image selects the figure node (instead of dropping the
+    // cursor into the caption).
+    this.img.addEventListener('mousedown', event => {
+      event.preventDefault();
+      const pos = getPos();
+      if (pos === undefined) return;
+      view.dispatch(
+        view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos))
+      );
+      view.focus();
+    });
+
+    attachResizeHandles(this.wrapper, this.img, width => {
+      const pos = getPos();
+      if (pos === undefined || !view.editable) return;
+      const current = view.state.doc.nodeAt(pos);
+      if (!current) return;
+      view.dispatch(
+        view.state.tr.setNodeMarkup(pos, undefined, { ...current.attrs, width })
+      );
+    });
+  }
+
+  private applyAttrs(node: PMNode): void {
+    const { src, alt, title, width, align } = node.attrs;
+    this.img.src = src;
+    if (alt) this.img.alt = alt;
+    else this.img.removeAttribute('alt');
+    if (title) this.img.title = title;
+    else this.img.removeAttribute('title');
+    this.dom.style.width = width ? `${width}px` : '';
+    if (align) this.dom.setAttribute('data-align', align);
+    else this.dom.removeAttribute('data-align');
+    this.dom.classList.toggle(
+      'nile-wysiwyg__figure--empty-caption',
+      node.content.size === 0
+    );
+  }
+
+  update(node: PMNode): boolean {
+    if (node.type !== this.node.type) return false;
+    this.node = node;
+    this.applyAttrs(node);
+    return true;
+  }
+
+  selectNode(): void {
+    this.dom.classList.add('nile-wysiwyg__figure--selected');
+    this.wrapper.classList.add('nile-wysiwyg__image-resizer--selected');
+  }
+
+  deselectNode(): void {
+    this.dom.classList.remove('nile-wysiwyg__figure--selected');
+    this.wrapper.classList.remove('nile-wysiwyg__image-resizer--selected');
+  }
+
+  stopEvent(event: Event): boolean {
+    return isResizeEvent(event);
+  }
+
+  ignoreMutation(mutation: MutationRecord): boolean {
+    // Caption edits must flow through; image/handle mutations must not.
+    return !this.contentDOM.contains(mutation.target);
+  }
+}

package/src/nile-wysiwyg-editor/engine/plugins/image.ts

@@ -0,0 +1,80 @@
+import { Plugin, PluginKey, EditorState } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+
+export const imageUploadKey = new PluginKey<DecorationSet>('nileImageUpload');
+
+interface UploadMeta {
+  add?: { id: string; pos: number };
+  remove?: { id: string };
+}
+
+export interface ImagePluginOptions {
+  /** Called with image files pasted or dropped into the editor. */
+  onImageFiles?: (files: File[], pos: number | null) => void;
+}
+
+function imageFilesFrom(data: DataTransfer | null): File[] {
+  if (!data) return [];
+  return Array.from(data.files).filter(file => file.type.startsWith('image/'));
+}
+
+/**
+ * Image behaviors: routes pasted/dropped image files to the host's upload
+ * flow and tracks "uploading…" widget decorations that survive concurrent
+ * edits by mapping through transactions.
+ */
+export function imagePlugin(options: ImagePluginOptions = {}): Plugin<DecorationSet> {
+  return new Plugin<DecorationSet>({
+    key: imageUploadKey,
+
+    state: {
+      init: () => DecorationSet.empty,
+      apply(tr, set) {
+        let mapped = set.map(tr.mapping, tr.doc);
+        const meta = tr.getMeta(imageUploadKey) as UploadMeta | undefined;
+        if (meta?.add) {
+          const widget = document.createElement('span');
+          widget.className = 'nile-wysiwyg__upload-placeholder';
+          widget.textContent = 'Uploading image…';
+          mapped = mapped.add(tr.doc, [
+            Decoration.widget(meta.add.pos, widget, { id: meta.add.id }),
+          ]);
+        }
+        if (meta?.remove) {
+          mapped = mapped.remove(
+            mapped.find(undefined, undefined, spec => spec.id === meta.remove!.id)
+          );
+        }
+        return mapped;
+      },
+    },
+
+    props: {
+      decorations(state) {
+        return imageUploadKey.getState(state);
+      },
+
+      handlePaste(_view, event) {
+        const files = imageFilesFrom(event.clipboardData);
+        if (files.length === 0 || !options.onImageFiles) return false;
+        options.onImageFiles(files, null);
+        return true;
+      },
+
+      handleDrop(view, event) {
+        const files = imageFilesFrom(event.dataTransfer);
+        if (files.length === 0 || !options.onImageFiles) return false;
+        const drop = view.posAtCoords({ left: event.clientX, top: event.clientY });
+        options.onImageFiles(files, drop ? drop.pos : null);
+        return true;
+      },
+    },
+  });
+}
+
+/** Position of an upload placeholder, after mapping through edits. */
+export function findUploadPos(state: EditorState, id: string): number | null {
+  const set = imageUploadKey.getState(state);
+  const found = set?.find(undefined, undefined, spec => spec.id === id);
+  return found && found.length ? found[0].from : null;
+}

package/src/nile-wysiwyg-editor/engine/plugins/link.ts

@@ -0,0 +1,42 @@
+import { Plugin } from 'prosemirror-state';
+import { isSafeUrl } from '../sanitize';
+
+const URL_PATTERN = /^https?:\/\/\S+$/i;
+
+export interface LinkPluginOptions {
+  /** Called with the href when a link is Mod/Ctrl-clicked. */
+  onOpenLink?: (href: string) => void;
+}
+
+/**
+ * Link behaviors that belong to the document, not the chrome:
+ * - Mod/Ctrl-click opens the link.
+ * - Pasting a bare URL over a text selection turns the selection into a link.
+ */
+export function linkPlugin(options: LinkPluginOptions = {}): Plugin {
+  return new Plugin({
+    props: {
+      handleClick(view, _pos, event) {
+        if (!(event.metaKey || event.ctrlKey)) return false;
+        const target = (event.target as HTMLElement | null)?.closest?.('a[href]');
+        if (!target) return false;
+        const href = target.getAttribute('href')!;
+        if (!isSafeUrl(href)) return false;
+        if (options.onOpenLink) options.onOpenLink(href);
+        else window.open(href, '_blank', 'noopener,noreferrer');
+        return true;
+      },
+
+      handlePaste(view, event) {
+        const { state } = view;
+        const { empty, from, to } = state.selection;
+        if (empty) return false;
+        const text = event.clipboardData?.getData('text/plain')?.trim();
+        if (!text || !URL_PATTERN.test(text) || !isSafeUrl(text)) return false;
+        const linkMark = state.schema.marks.link.create({ href: text });
+        view.dispatch(state.tr.addMark(from, to, linkMark));
+        return true;
+      },
+    },
+  });
+}

package/src/nile-wysiwyg-editor/engine/plugins/math-view.ts

@@ -0,0 +1,56 @@
+import { Node as PMNode } from 'prosemirror-model';
+import { NodeView } from 'prosemirror-view';
+
+/** Turns a LaTeX string into HTML (KaTeX/MathJax/MathML). Host-provided. */
+export type MathRenderer = (latex: string, display: 'inline' | 'block') => string;
+
+/**
+ * Inline atom rendering a math formula. When the host supplies a renderer the
+ * formula is drawn with it; otherwise the raw LaTeX is shown in a math chip so
+ * the content is still visible and editable without a math engine.
+ */
+export class MathView implements NodeView {
+  dom: HTMLSpanElement;
+
+  private renderer?: MathRenderer;
+
+  constructor(node: PMNode, renderer?: MathRenderer) {
+    this.renderer = renderer;
+    this.dom = document.createElement('span');
+    this.dom.contentEditable = 'false';
+    this.render(node);
+  }
+
+  private render(node: PMNode): void {
+    const latex = (node.attrs.latex as string) ?? '';
+    const display = (node.attrs.display as 'inline' | 'block') ?? 'inline';
+    this.dom.className =
+      display === 'block'
+        ? 'nile-wysiwyg__math nile-wysiwyg__math--block'
+        : 'nile-wysiwyg__math';
+    this.dom.setAttribute('data-math', latex);
+    this.dom.setAttribute('data-math-display', display);
+    this.dom.title = latex;
+    if (this.renderer) {
+      try {
+        // Host renderer output is trusted (same trust level as uploadHandler).
+        this.dom.innerHTML = this.renderer(latex, display);
+        return;
+      } catch {
+        // Fall back to raw LaTeX if the renderer throws.
+      }
+    }
+    this.dom.textContent = latex;
+  }
+
+  update(node: PMNode): boolean {
+    if (node.type.name !== 'math') return false;
+    this.render(node);
+    return true;
+  }
+
+  /** Atom node: ProseMirror owns selection; never read our subtree back. */
+  ignoreMutation(): boolean {
+    return true;
+  }
+}

package/src/nile-wysiwyg-editor/engine/plugins/max-length.ts

@@ -0,0 +1,24 @@
+import { Plugin } from 'prosemirror-state';
+import { docToText } from '../serializer';
+
+function charCount(doc: import('prosemirror-model').Node): number {
+  return docToText(doc).replace(/\n/g, '').length;
+}
+
+/**
+ * Enforces a character limit by rejecting transactions that grow the
+ * document past it. Shrinking edits are always allowed, even while over the
+ * limit (e.g. after the limit was lowered), so users can recover.
+ */
+export function maxLengthPlugin(getMaxLength: () => number): Plugin {
+  return new Plugin({
+    filterTransaction(tr, state) {
+      if (!tr.docChanged) return true;
+      const max = getMaxLength();
+      if (!max || max <= 0) return true;
+      const after = charCount(tr.doc);
+      if (after <= max) return true;
+      return after < charCount(state.doc);
+    },
+  });
+}

package/src/nile-wysiwyg-editor/engine/plugins/paste.ts

@@ -0,0 +1,74 @@
+import { Plugin } from 'prosemirror-state';
+import { Slice, Fragment, Node as PMNode, Schema } from 'prosemirror-model';
+import { markdownToHtml, looksLikeMarkdown } from '../markdown-parse';
+import { htmlToSlice } from '../serializer';
+
+/**
+ * Builds a slice of plain paragraphs from text, splitting on newlines. Open
+ * depth 1 on both ends lets the first/last block merge into the surrounding
+ * paragraph, matching how a normal plain-text paste behaves.
+ */
+export function plainTextSlice(schema: Schema, text: string): Slice {
+  const blocks = text.split(/\r\n?|\n/);
+  const nodes: PMNode[] = blocks.map(line =>
+    schema.nodes.paragraph.create(null, line ? schema.text(line) : null)
+  );
+  return new Slice(Fragment.from(nodes), 1, 1);
+}
+
+/** Reduces a pasted slice to unstyled text, preserving block breaks. */
+export function stripSliceFormatting(schema: Schema, slice: Slice): Slice {
+  const text = slice.content.textBetween(0, slice.content.size, '\n', '\n');
+  return plainTextSlice(schema, text);
+}
+
+export interface PasteOptions {
+  /**
+   * Read live: when it returns true, every paste drops formatting (the
+   * persistent "paste as plain text" toggle). The Ctrl+Shift+V shortcut is a
+   * separate one-shot handled in the keymap.
+   */
+  getForcePlainText?: () => boolean;
+  /**
+   * Read live: when false, plain-text pastes are never parsed as Markdown.
+   * Defaults to on.
+   */
+  getMarkdownPaste?: () => boolean;
+  /** Read live: whether pasted HTML is sanitized. Defaults to on. */
+  getSanitize?: () => boolean;
+}
+
+/**
+ * Paste behavior: plain-text pastes that look like Markdown are parsed into
+ * rich content (headings, lists, code fences, tables, inline marks), and all
+ * pastes drop formatting while the host's plain-text toggle is on.
+ */
+export function pastePlugin(schema: Schema, options: PasteOptions = {}): Plugin {
+  return new Plugin({
+    props: {
+      handlePaste(view, event) {
+        if (options.getForcePlainText?.()) return false;
+        if (options.getMarkdownPaste && !options.getMarkdownPaste()) return false;
+        // Only plain-text pastes qualify: an HTML flavor means the source
+        // was already rich, and code blocks take text verbatim.
+        const html = event.clipboardData?.getData('text/html') ?? '';
+        const text = event.clipboardData?.getData('text/plain') ?? '';
+        if (html.trim() || !text.trim()) return false;
+        if (view.state.selection.$from.parent.type.spec.code) return false;
+        if (!looksLikeMarkdown(text)) return false;
+        const slice = htmlToSlice(
+          schema,
+          markdownToHtml(text),
+          options.getSanitize?.() ?? true
+        );
+        view.dispatch(view.state.tr.replaceSelection(slice).scrollIntoView());
+        return true;
+      },
+      transformPasted(slice) {
+        return options.getForcePlainText?.()
+          ? stripSliceFormatting(schema, slice)
+          : slice;
+      },
+    },
+  });
+}

package/src/nile-wysiwyg-editor/engine/plugins/placeholder.ts

@@ -0,0 +1,24 @@
+import { Plugin } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { isDocEmpty } from '../serializer';
+
+/**
+ * Shows placeholder text on the first paragraph while the document is empty.
+ * The text itself is rendered by CSS (`content: attr(data-placeholder)`) so
+ * it never enters the document.
+ */
+export function placeholderPlugin(getText: () => string): Plugin {
+  return new Plugin({
+    props: {
+      decorations(state) {
+        const text = getText();
+        if (!text || !isDocEmpty(state.doc)) return null;
+        const deco = Decoration.node(0, state.doc.firstChild!.nodeSize, {
+          class: 'nile-wysiwyg__empty',
+          'data-placeholder': text,
+        });
+        return DecorationSet.create(state.doc, [deco]);
+      },
+    },
+  });
+}

package/src/nile-wysiwyg-editor/engine/plugins/single-line.ts

@@ -0,0 +1,47 @@
+import { Plugin } from 'prosemirror-state';
+import { Slice, Fragment, Node as PMNode } from 'prosemirror-model';
+
+/** Flattens a multi-block document into a single paragraph, keeping marks. */
+export function flattenToSingleParagraph(doc: PMNode): PMNode {
+  if (doc.childCount <= 1) return doc;
+  const schema = doc.type.schema;
+  const inline: PMNode[] = [];
+  doc.descendants(node => {
+    if (node.isInline) {
+      if (node.type === schema.nodes.hard_break) return false;
+      inline.push(node);
+      return false;
+    }
+    return true;
+  });
+  return schema.nodes.doc.create(null, schema.nodes.paragraph.create(null, inline));
+}
+
+/**
+ * Constrains the document to a single paragraph: Enter is inert, pasted
+ * multi-block content is flattened to one line, and any transaction that
+ * would still produce extra blocks is rejected.
+ */
+export function singleLinePlugin(): Plugin {
+  return new Plugin({
+    filterTransaction(tr) {
+      return !tr.docChanged || tr.doc.childCount <= 1;
+    },
+    props: {
+      handleKeyDown(_view, event) {
+        return event.key === 'Enter';
+      },
+      transformPasted(slice) {
+        const inline: PMNode[] = [];
+        slice.content.descendants(node => {
+          if (node.isInline) {
+            inline.push(node);
+            return false;
+          }
+          return true;
+        });
+        return new Slice(Fragment.from(inline), 0, 0);
+      },
+    },
+  });
+}

package/src/nile-wysiwyg-editor/engine/plugins/suggestions.ts

@@ -0,0 +1,110 @@
+import { Plugin, PluginKey, EditorState } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+
+/** Live state of a trigger-character suggestion (mention or slash command). */
+export interface SuggestionMatch {
+  active: boolean;
+  trigger: string;
+  query: string;
+  /** Doc range spanning trigger + query, to replace on selection. */
+  from: number;
+  to: number;
+}
+
+export const INACTIVE_SUGGESTION: SuggestionMatch = {
+  active: false,
+  trigger: '',
+  query: '',
+  from: 0,
+  to: 0,
+};
+
+export interface SuggestionOptions {
+  /** Read live so trigger config can change without rebuilding state. */
+  getTriggers: () => string[];
+  /** Restrict to the start of an empty-ish textblock (slash commands). */
+  startOfLine?: boolean;
+  /** Stay inactive until the query reaches this length (emoji ":" noise). */
+  minQueryLength?: number;
+  /** Notified on every state change (including becoming inactive). */
+  onChange: (match: SuggestionMatch) => void;
+  /** Intercept keys (arrows/Enter/Escape) while a suggestion is active. */
+  onKeyDown?: (event: KeyboardEvent, match: SuggestionMatch) => boolean;
+}
+
+const MAX_QUERY_LENGTH = 50;
+
+function findSuggestion(state: EditorState, options: SuggestionOptions): SuggestionMatch {
+  const { $from, empty } = state.selection;
+  if (!empty || !$from.parent.isTextblock || $from.parent.type.spec.code) {
+    return INACTIVE_SUGGESTION;
+  }
+  const textBefore = $from.parent.textBetween(0, $from.parentOffset, '\0', '\0');
+  // Longest triggers first so '{{' wins over '{'.
+  const triggers = [...options.getTriggers()].sort((a, b) => b.length - a.length);
+  for (const trigger of triggers) {
+    if (!trigger) continue;
+    const index = textBefore.lastIndexOf(trigger);
+    if (index === -1) continue;
+    if (options.startOfLine && index !== 0) continue;
+    // Trigger must start a word: preceded by nothing or whitespace.
+    const before = textBefore[index - 1];
+    if (before !== undefined && !/\s/.test(before)) continue;
+    const query = textBefore.slice(index + trigger.length);
+    if (query.length > MAX_QUERY_LENGTH || /\s/.test(query)) continue;
+    if (query.length < (options.minQueryLength ?? 0)) continue;
+    return {
+      active: true,
+      trigger,
+      query,
+      from: $from.start() + index,
+      to: $from.pos,
+    };
+  }
+  return INACTIVE_SUGGESTION;
+}
+
+/**
+ * Generic trigger-character suggestion tracker. Recomputes the active
+ * trigger/query from the selection on every transaction, notifies the host,
+ * and softly highlights the query text. Insertion/UI is the host's job.
+ */
+export function suggestionPlugin(key: PluginKey, options: SuggestionOptions): Plugin {
+  return new Plugin<SuggestionMatch>({
+    key,
+
+    state: {
+      init: () => INACTIVE_SUGGESTION,
+      apply(tr, prev, _old, newState) {
+        const next = findSuggestion(newState, options);
+        if (
+          next.active !== prev.active ||
+          next.query !== prev.query ||
+          next.trigger !== prev.trigger ||
+          next.from !== prev.from
+        ) {
+          options.onChange(next);
+        }
+        return next;
+      },
+    },
+
+    props: {
+      decorations(state) {
+        const match = key.getState(state) as SuggestionMatch;
+        if (!match.active) return null;
+        return DecorationSet.create(state.doc, [
+          Decoration.inline(match.from, match.to, {
+            class: 'nile-wysiwyg__suggestion',
+          }),
+        ]);
+      },
+
+      handleKeyDown(view, event) {
+        const match = key.getState(view.state) as SuggestionMatch;
+        if (!match.active || !options.onKeyDown) return false;
+        return options.onKeyDown(event, match);
+      },
+    },
+  });
+}

package/src/nile-wysiwyg-editor/engine/plugins/tables.ts

@@ -0,0 +1,12 @@
+import { Plugin } from 'prosemirror-state';
+import { tableEditing, columnResizing } from 'prosemirror-tables';
+
+/**
+ * prosemirror-tables wiring: cell selections, fix-tables normalization, and
+ * draggable column resizing (widths persist as `data-colwidth`). The CSS
+ * these plugins rely on (.selectedCell, .column-resize-handle, .resize-cursor)
+ * is inlined in nile-wysiwyg-editor.css.ts.
+ */
+export function tablePlugins(): Plugin[] {
+  return [columnResizing(), tableEditing({ allowTableNodeSelection: true })];
+}