@aquera/nile-elements 1.9.5 → 1.9.7

package/src/nile-wysiwyg-editor/engine/plugins/code-highlight.ts

@@ -0,0 +1,173 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { Node as PMNode } from 'prosemirror-model';
+import hljs from 'highlight.js/lib/core';
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import json from 'highlight.js/lib/languages/json';
+import xml from 'highlight.js/lib/languages/xml';
+import css from 'highlight.js/lib/languages/css';
+import scss from 'highlight.js/lib/languages/scss';
+import sql from 'highlight.js/lib/languages/sql';
+import python from 'highlight.js/lib/languages/python';
+import java from 'highlight.js/lib/languages/java';
+import bash from 'highlight.js/lib/languages/bash';
+import shell from 'highlight.js/lib/languages/shell';
+import markdown from 'highlight.js/lib/languages/markdown';
+import plaintext from 'highlight.js/lib/languages/plaintext';
+import c from 'highlight.js/lib/languages/c';
+import cpp from 'highlight.js/lib/languages/cpp';
+import csharp from 'highlight.js/lib/languages/csharp';
+import go from 'highlight.js/lib/languages/go';
+import rust from 'highlight.js/lib/languages/rust';
+import php from 'highlight.js/lib/languages/php';
+import ruby from 'highlight.js/lib/languages/ruby';
+import kotlin from 'highlight.js/lib/languages/kotlin';
+import swift from 'highlight.js/lib/languages/swift';
+import yaml from 'highlight.js/lib/languages/yaml';
+import dockerfile from 'highlight.js/lib/languages/dockerfile';
+import diff from 'highlight.js/lib/languages/diff';
+import graphql from 'highlight.js/lib/languages/graphql';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('xml', xml);
+hljs.registerAliases(['html'], { languageName: 'xml' });
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('scss', scss);
+hljs.registerLanguage('sql', sql);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('shell', shell);
+hljs.registerLanguage('markdown', markdown);
+hljs.registerLanguage('plaintext', plaintext);
+hljs.registerLanguage('c', c);
+hljs.registerLanguage('cpp', cpp);
+hljs.registerLanguage('csharp', csharp);
+hljs.registerLanguage('go', go);
+hljs.registerLanguage('rust', rust);
+hljs.registerLanguage('php', php);
+hljs.registerLanguage('ruby', ruby);
+hljs.registerLanguage('kotlin', kotlin);
+hljs.registerLanguage('swift', swift);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('dockerfile', dockerfile);
+hljs.registerLanguage('diff', diff);
+hljs.registerLanguage('graphql', graphql);
+
+export const codeHighlightKey = new PluginKey<DecorationSet>('nileCodeHighlight');
+
+/** Languages offered in the code block language picker. '' = auto-detect. */
+export const CODE_LANGUAGES: { value: string; label: string }[] = [
+  { value: '', label: 'Auto' },
+  { value: 'plaintext', label: 'Plain text' },
+  { value: 'javascript', label: 'JavaScript' },
+  { value: 'typescript', label: 'TypeScript' },
+  { value: 'json', label: 'JSON' },
+  { value: 'html', label: 'HTML' },
+  { value: 'css', label: 'CSS' },
+  { value: 'scss', label: 'SCSS' },
+  { value: 'sql', label: 'SQL' },
+  { value: 'python', label: 'Python' },
+  { value: 'java', label: 'Java' },
+  { value: 'c', label: 'C' },
+  { value: 'cpp', label: 'C++' },
+  { value: 'csharp', label: 'C#' },
+  { value: 'go', label: 'Go' },
+  { value: 'rust', label: 'Rust' },
+  { value: 'php', label: 'PHP' },
+  { value: 'ruby', label: 'Ruby' },
+  { value: 'kotlin', label: 'Kotlin' },
+  { value: 'swift', label: 'Swift' },
+  { value: 'bash', label: 'Bash' },
+  { value: 'shell', label: 'Shell' },
+  { value: 'yaml', label: 'YAML' },
+  { value: 'dockerfile', label: 'Dockerfile' },
+  { value: 'graphql', label: 'GraphQL' },
+  { value: 'diff', label: 'Diff' },
+  { value: 'markdown', label: 'Markdown' },
+];
+
+const AUTO_DETECT_SUBSET = [
+  'javascript', 'typescript', 'json', 'xml', 'css', 'sql', 'python', 'java',
+  'bash', 'go', 'rust', 'ruby',
+];
+
+const MAX_HIGHLIGHT_LENGTH = 20000;
+
+/**
+ * Converts highlight.js' emitted HTML into inline decorations. hljs escapes
+ * but never reorders text, so parsed text offsets map 1:1 onto the node.
+ */
+function decorationsForCode(text: string, language: string | null, base: number): Decoration[] {
+  if (!text || text.length > MAX_HIGHLIGHT_LENGTH) return [];
+  let value: string;
+  try {
+    if (language && hljs.getLanguage(language)) {
+      value = hljs.highlight(text, { language }).value;
+    } else if (language === 'plaintext') {
+      return [];
+    } else {
+      value = hljs.highlightAuto(text, AUTO_DETECT_SUBSET).value;
+    }
+  } catch {
+    return [];
+  }
+
+  const template = document.createElement('template');
+  template.innerHTML = value;
+  const decorations: Decoration[] = [];
+  let offset = 0;
+  const walk = (node: globalThis.Node, classes: string[]): void => {
+    node.childNodes.forEach(child => {
+      if (child.nodeType === 3) {
+        const length = child.nodeValue?.length ?? 0;
+        if (classes.length && length) {
+          decorations.push(
+            Decoration.inline(base + offset, base + offset + length, {
+              class: classes.join(' '),
+            })
+          );
+        }
+        offset += length;
+      } else if (child.nodeType === 1) {
+        const el = child as Element;
+        walk(el, [...classes, ...el.className.split(/\s+/).filter(Boolean)]);
+      }
+    });
+  };
+  walk(template.content, []);
+  return decorations;
+}
+
+function buildDecorations(doc: PMNode): DecorationSet {
+  const decorations: Decoration[] = [];
+  doc.descendants((node, pos) => {
+    if (node.type.name === 'code_block') {
+      decorations.push(
+        ...decorationsForCode(node.textContent, node.attrs.language, pos + 1)
+      );
+      return false;
+    }
+    return true;
+  });
+  return decorations.length ? DecorationSet.create(doc, decorations) : DecorationSet.empty;
+}
+
+/** Syntax highlighting for code blocks, recomputed on document changes. */
+export function codeHighlightPlugin(): Plugin<DecorationSet> {
+  return new Plugin<DecorationSet>({
+    key: codeHighlightKey,
+    state: {
+      init: (_config, state) => buildDecorations(state.doc),
+      apply: (tr, old) => (tr.docChanged ? buildDecorations(tr.doc) : old),
+    },
+    props: {
+      decorations(state) {
+        return codeHighlightKey.getState(state);
+      },
+    },
+  });
+}

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

@@ -0,0 +1,85 @@
+import { Node as PMNode } from 'prosemirror-model';
+import { EditorView, NodeView } from 'prosemirror-view';
+import { attachResizeHandles, isResizeEvent } from './image-view';
+
+/** Below this a 16:9 player is unusable and its own controls stop fitting. */
+const MIN_EMBED_WIDTH = 160;
+
+/**
+ * Video embed (YouTube/Vimeo/Loom) with the same corner drag-resize handles
+ * as images. Only the width is dragged; the 16:9 aspect ratio comes from CSS,
+ * so the height follows automatically.
+ */
+export class EmbedView implements NodeView {
+  dom: HTMLDivElement;
+
+  private iframe: HTMLIFrameElement;
+
+  constructor(
+    private node: PMNode,
+    view: EditorView,
+    getPos: () => number | undefined
+  ) {
+    this.dom = document.createElement('div');
+    this.dom.className = 'nile-wysiwyg__embed';
+    this.iframe = document.createElement('iframe');
+    this.iframe.setAttribute('frameborder', '0');
+    this.iframe.setAttribute('allowfullscreen', 'true');
+    this.iframe.setAttribute(
+      'allow',
+      'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+    );
+    this.dom.appendChild(this.iframe);
+    this.applyAttrs(node);
+
+    attachResizeHandles(
+      this.dom,
+      this.dom,
+      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 })
+        );
+      },
+      MIN_EMBED_WIDTH
+    );
+  }
+
+  private applyAttrs(node: PMNode): void {
+    const { src, provider, title, width, align } = node.attrs;
+    if (this.iframe.getAttribute('src') !== src) this.iframe.setAttribute('src', src);
+    this.dom.setAttribute('data-embed-provider', provider ?? 'generic');
+    if (title) this.iframe.title = title;
+    else this.iframe.removeAttribute('title');
+    if (width) {
+      this.dom.setAttribute('data-width', String(width));
+      this.dom.style.width = `${width}px`;
+    } else {
+      this.dom.removeAttribute('data-width');
+      this.dom.style.width = '';
+    }
+    // Block alignment via auto margins (mirrors the image figure).
+    if (align) this.dom.setAttribute('data-align', align);
+    else this.dom.removeAttribute('data-align');
+    this.dom.style.marginLeft = align === 'center' || align === 'right' ? 'auto' : '';
+    this.dom.style.marginRight = align === 'center' ? 'auto' : '';
+  }
+
+  update(node: PMNode): boolean {
+    if (node.type !== this.node.type) return false;
+    this.node = node;
+    this.applyAttrs(node);
+    return true;
+  }
+
+  stopEvent(event: Event): boolean {
+    return isResizeEvent(event);
+  }
+
+  ignoreMutation(): boolean {
+    return true;
+  }
+}

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

@@ -0,0 +1,99 @@
+import { Plugin } from 'prosemirror-state';
+
+export interface EmbedTarget {
+  src: string;
+  provider: 'youtube' | 'vimeo' | 'loom';
+}
+
+/**
+ * Converts share/watch URLs from supported providers into their embed URLs.
+ * Returns null for anything unrecognized — only these providers are allowed.
+ */
+export function toEmbedUrl(url: string): EmbedTarget | null {
+  let parsed: URL;
+  try {
+    parsed = new URL(url.trim());
+  } catch {
+    return null;
+  }
+  if (parsed.protocol !== 'https:') return null;
+  const host = parsed.hostname.replace(/^www\./, '');
+
+  // YouTube: watch?v=ID, youtu.be/ID, shorts/ID, embed/ID
+  if (host === 'youtube.com' || host === 'youtube-nocookie.com' || host === 'youtu.be') {
+    let id = '';
+    if (host === 'youtu.be') id = parsed.pathname.slice(1).split('/')[0];
+    else if (parsed.pathname === '/watch') id = parsed.searchParams.get('v') ?? '';
+    else {
+      const match = /^\/(embed|shorts)\/([\w-]+)/.exec(parsed.pathname);
+      if (match) id = match[2];
+    }
+    if (/^[\w-]{6,20}$/.test(id)) {
+      return { src: `https://www.youtube-nocookie.com/embed/${id}`, provider: 'youtube' };
+    }
+    return null;
+  }
+
+  // Vimeo: vimeo.com/123456789, player.vimeo.com/video/123456789
+  if (host === 'vimeo.com' || host === 'player.vimeo.com') {
+    const match = /\/(?:video\/)?(\d{6,12})(?:$|[/?])/.exec(parsed.pathname);
+    if (match) {
+      return { src: `https://player.vimeo.com/video/${match[1]}`, provider: 'vimeo' };
+    }
+    return null;
+  }
+
+  // Loom: loom.com/share/ID or loom.com/embed/ID
+  if (host === 'loom.com') {
+    const match = /^\/(share|embed)\/([0-9a-f]{16,40})/.exec(parsed.pathname);
+    if (match) {
+      return { src: `https://www.loom.com/embed/${match[2]}`, provider: 'loom' };
+    }
+    return null;
+  }
+
+  return null;
+}
+
+/** True when a URL is already a permitted embed src (sanitizer check). */
+export function isAllowedEmbedSrc(src: string): boolean {
+  let parsed: URL;
+  try {
+    parsed = new URL(src.trim());
+  } catch {
+    return false;
+  }
+  if (parsed.protocol !== 'https:') return false;
+  const host = parsed.hostname.replace(/^www\./, '');
+  return (
+    ((host === 'youtube.com' || host === 'youtube-nocookie.com') &&
+      parsed.pathname.startsWith('/embed/')) ||
+    (host === 'player.vimeo.com' && parsed.pathname.startsWith('/video/')) ||
+    (host === 'loom.com' && parsed.pathname.startsWith('/embed/'))
+  );
+}
+
+/**
+ * Pasting a bare provider URL onto an empty selection inserts an embed
+ * instead of plain text. (Pasting over selected text still creates a link.)
+ */
+export function embedPastePlugin(): Plugin {
+  return new Plugin({
+    props: {
+      handlePaste(view, event) {
+        const { state } = view;
+        if (!state.selection.empty) return false;
+        const text = event.clipboardData?.getData('text/plain')?.trim();
+        if (!text || /\s/.test(text)) return false;
+        const target = toEmbedUrl(text);
+        if (!target) return false;
+        const embed = state.schema.nodes.embed.create({
+          src: target.src,
+          provider: target.provider,
+        });
+        view.dispatch(state.tr.replaceSelectionWith(embed).scrollIntoView());
+        return true;
+      },
+    },
+  });
+}

package/src/nile-wysiwyg-editor/engine/plugins/find-replace.ts

@@ -0,0 +1,155 @@
+import { Plugin, PluginKey, EditorState, Transaction } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { Node as PMNode } from 'prosemirror-model';
+
+export const findReplaceKey = new PluginKey<FindState>('nileFindReplace');
+
+export interface FindMatch {
+  from: number;
+  to: number;
+}
+
+export interface FindState {
+  query: string;
+  caseSensitive: boolean;
+  matches: FindMatch[];
+  activeIndex: number;
+}
+
+const EMPTY: FindState = { query: '', caseSensitive: false, matches: [], activeIndex: 0 };
+
+type FindMeta =
+  | { type: 'search'; query: string; caseSensitive?: boolean }
+  | { type: 'next' }
+  | { type: 'prev' }
+  | { type: 'clear' };
+
+function findMatches(doc: PMNode, query: string, caseSensitive: boolean): FindMatch[] {
+  if (!query) return [];
+  const matches: FindMatch[] = [];
+  const needle = caseSensitive ? query : query.toLowerCase();
+  doc.descendants((node, pos) => {
+    if (!node.isTextblock) return true;
+    const text = node.textBetween(0, node.content.size, '\0', '\0');
+    const haystack = caseSensitive ? text : text.toLowerCase();
+    let index = 0;
+    // eslint-disable-next-line no-cond-assign
+    while ((index = haystack.indexOf(needle, index)) !== -1) {
+      matches.push({ from: pos + 1 + index, to: pos + 1 + index + needle.length });
+      index += needle.length;
+    }
+    return false;
+  });
+  return matches;
+}
+
+function applyMeta(state: FindState, meta: FindMeta, doc: PMNode): FindState {
+  switch (meta.type) {
+    case 'search': {
+      const caseSensitive = meta.caseSensitive ?? state.caseSensitive;
+      return {
+        query: meta.query,
+        caseSensitive,
+        matches: findMatches(doc, meta.query, caseSensitive),
+        activeIndex: 0,
+      };
+    }
+    case 'next':
+      return state.matches.length
+        ? { ...state, activeIndex: (state.activeIndex + 1) % state.matches.length }
+        : state;
+    case 'prev':
+      return state.matches.length
+        ? {
+            ...state,
+            activeIndex:
+              (state.activeIndex - 1 + state.matches.length) % state.matches.length,
+          }
+        : state;
+    case 'clear':
+    default:
+      return EMPTY;
+  }
+}
+
+/**
+ * Find & replace: match highlighting with an active match, controlled via
+ * transaction meta. Replacement itself is a normal text transaction issued
+ * by the host (see findReplaceCommands).
+ */
+export function findReplacePlugin(): Plugin<FindState> {
+  return new Plugin<FindState>({
+    key: findReplaceKey,
+
+    state: {
+      init: () => EMPTY,
+      apply(tr, prev) {
+        const meta = tr.getMeta(findReplaceKey) as FindMeta | undefined;
+        if (meta) return applyMeta(prev, meta, tr.doc);
+        if (tr.docChanged && prev.query) {
+          const matches = findMatches(tr.doc, prev.query, prev.caseSensitive);
+          return {
+            ...prev,
+            matches,
+            activeIndex: Math.min(prev.activeIndex, Math.max(0, matches.length - 1)),
+          };
+        }
+        return prev;
+      },
+    },
+
+    props: {
+      decorations(state) {
+        const find = findReplaceKey.getState(state);
+        if (!find || !find.matches.length) return null;
+        return DecorationSet.create(
+          state.doc,
+          find.matches.map((match, index) =>
+            Decoration.inline(match.from, match.to, {
+              class:
+                index === find.activeIndex
+                  ? 'nile-wysiwyg__find-match nile-wysiwyg__find-active'
+                  : 'nile-wysiwyg__find-match',
+            })
+          )
+        );
+      },
+    },
+  });
+}
+
+export function getFindState(state: EditorState): FindState {
+  return findReplaceKey.getState(state) ?? EMPTY;
+}
+
+export function searchTr(state: EditorState, query: string, caseSensitive?: boolean): Transaction {
+  return state.tr.setMeta(findReplaceKey, { type: 'search', query, caseSensitive });
+}
+
+export function findStepTr(state: EditorState, direction: 'next' | 'prev'): Transaction {
+  return state.tr.setMeta(findReplaceKey, { type: direction });
+}
+
+export function clearFindTr(state: EditorState): Transaction {
+  return state.tr.setMeta(findReplaceKey, { type: 'clear' });
+}
+
+/** Replaces the active match. Returns the transaction, or null when idle. */
+export function replaceActiveTr(state: EditorState, replacement: string): Transaction | null {
+  const find = getFindState(state);
+  const match = find.matches[find.activeIndex];
+  if (!match) return null;
+  return state.tr.insertText(replacement, match.from, match.to);
+}
+
+/** Replaces every match in one transaction. Returns null when idle. */
+export function replaceAllTr(state: EditorState, replacement: string): Transaction | null {
+  const find = getFindState(state);
+  if (!find.matches.length) return null;
+  const tr = state.tr;
+  // Back to front so earlier positions stay valid.
+  for (const match of [...find.matches].reverse()) {
+    tr.insertText(replacement, match.from, match.to);
+  }
+  return tr;
+}

package/src/nile-wysiwyg-editor/engine/plugins/format-painter.ts

@@ -0,0 +1,80 @@
+/**
+ * Format painter: copy the inline formatting (marks) at the current selection,
+ * then apply it to the next selection the user makes — like the paint-roller
+ * tool in word processors. The plugin only holds the copied marks and an
+ * "armed" flag; the host drives arm/apply through the exported helpers.
+ */
+import { EditorState, Plugin, PluginKey, Transaction } from 'prosemirror-state';
+import { Mark } from 'prosemirror-model';
+
+interface FormatPainterState {
+  marks: readonly Mark[] | null;
+}
+
+export const formatPainterKey = new PluginKey<FormatPainterState>('nileFormatPainter');
+
+type PainterMeta = { type: 'arm'; marks: readonly Mark[] } | { type: 'disarm' };
+
+export function formatPainterPlugin(): Plugin<FormatPainterState> {
+  return new Plugin<FormatPainterState>({
+    key: formatPainterKey,
+    state: {
+      init: () => ({ marks: null }),
+      apply(tr, value) {
+        const meta = tr.getMeta(formatPainterKey) as PainterMeta | undefined;
+        if (meta?.type === 'arm') return { marks: meta.marks };
+        if (meta?.type === 'disarm') return { marks: null };
+        return value;
+      },
+    },
+    props: {
+      attributes: state =>
+        (formatPainterKey.getState(state)?.marks
+          ? { class: 'nile-wysiwyg--painting' }
+          : {}) as Record<string, string>,
+    },
+  });
+}
+
+/** True while the painter is armed (marks captured, waiting to apply). */
+export function isFormatPainterArmed(state: EditorState): boolean {
+  return !!formatPainterKey.getState(state)?.marks;
+}
+
+/** The inline marks to copy from the current selection/caret. */
+function capturedMarks(state: EditorState): readonly Mark[] {
+  const { $from, empty } = state.selection;
+  if (empty) return state.storedMarks ?? $from.marks();
+  // Marks that hold across the selection start — the visible formatting.
+  return $from.marksAcross(state.selection.$to) ?? $from.marks();
+}
+
+/**
+ * Arms the painter, capturing the current formatting. Returns a transaction to
+ * dispatch, or null when there is nothing to copy.
+ */
+export function armFormatPainter(state: EditorState): Transaction | null {
+  const marks = capturedMarks(state);
+  return state.tr.setMeta(formatPainterKey, { type: 'arm', marks } as PainterMeta);
+}
+
+/** Disarms the painter without applying. */
+export function disarmFormatPainter(state: EditorState): Transaction {
+  return state.tr.setMeta(formatPainterKey, { type: 'disarm' } as PainterMeta);
+}
+
+/**
+ * Applies the copied formatting to the current (non-empty) selection and
+ * disarms. Returns null when not armed or the selection is empty.
+ */
+export function applyFormatPainter(state: EditorState): Transaction | null {
+  const painter = formatPainterKey.getState(state);
+  if (!painter?.marks) return null;
+  const { from, to, empty } = state.selection;
+  if (empty) return null;
+  const tr = state.tr;
+  tr.removeMark(from, to, null);
+  for (const mark of painter.marks) tr.addMark(from, to, mark);
+  tr.setMeta(formatPainterKey, { type: 'disarm' } as PainterMeta);
+  return tr;
+}