@aquera/nile-elements 1.9.5 → 1.9.7

package/dist/src/nile-wysiwyg-editor/engine/plugins/embeds.js

@@ -0,0 +1,96 @@
+import { Plugin } from 'prosemirror-state';
+/**
+ * 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) {
+    let parsed;
+    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) {
+    let parsed;
+    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() {
+    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;
+            },
+        },
+    });
+}
+//# sourceMappingURL=embeds.js.map

package/dist/src/nile-wysiwyg-editor/engine/plugins/embeds.js.map

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

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

@@ -0,0 +1,26 @@
+import { Plugin, PluginKey, EditorState, Transaction } from 'prosemirror-state';
+export declare const findReplaceKey: PluginKey<FindState>;
+export interface FindMatch {
+    from: number;
+    to: number;
+}
+export interface FindState {
+    query: string;
+    caseSensitive: boolean;
+    matches: FindMatch[];
+    activeIndex: number;
+}
+/**
+ * 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 declare function findReplacePlugin(): Plugin<FindState>;
+export declare function getFindState(state: EditorState): FindState;
+export declare function searchTr(state: EditorState, query: string, caseSensitive?: boolean): Transaction;
+export declare function findStepTr(state: EditorState, direction: 'next' | 'prev'): Transaction;
+export declare function clearFindTr(state: EditorState): Transaction;
+/** Replaces the active match. Returns the transaction, or null when idle. */
+export declare function replaceActiveTr(state: EditorState, replacement: string): Transaction | null;
+/** Replaces every match in one transaction. Returns null when idle. */
+export declare function replaceAllTr(state: EditorState, replacement: string): Transaction | null;

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

@@ -0,0 +1,123 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+export const findReplaceKey = new PluginKey('nileFindReplace');
+const EMPTY = { query: '', caseSensitive: false, matches: [], activeIndex: 0 };
+function findMatches(doc, query, caseSensitive) {
+    if (!query)
+        return [];
+    const matches = [];
+    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, meta, doc) {
+    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() {
+    return new Plugin({
+        key: findReplaceKey,
+        state: {
+            init: () => EMPTY,
+            apply(tr, prev) {
+                const meta = tr.getMeta(findReplaceKey);
+                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) {
+    return findReplaceKey.getState(state) ?? EMPTY;
+}
+export function searchTr(state, query, caseSensitive) {
+    return state.tr.setMeta(findReplaceKey, { type: 'search', query, caseSensitive });
+}
+export function findStepTr(state, direction) {
+    return state.tr.setMeta(findReplaceKey, { type: direction });
+}
+export function clearFindTr(state) {
+    return state.tr.setMeta(findReplaceKey, { type: 'clear' });
+}
+/** Replaces the active match. Returns the transaction, or null when idle. */
+export function replaceActiveTr(state, replacement) {
+    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, replacement) {
+    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;
+}
+//# sourceMappingURL=find-replace.js.map

package/dist/src/nile-wysiwyg-editor/engine/plugins/find-replace.js.map

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

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

@@ -0,0 +1,28 @@
+/**
+ * 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 declare const formatPainterKey: PluginKey<FormatPainterState>;
+export declare function formatPainterPlugin(): Plugin<FormatPainterState>;
+/** True while the painter is armed (marks captured, waiting to apply). */
+export declare function isFormatPainterArmed(state: EditorState): boolean;
+/**
+ * Arms the painter, capturing the current formatting. Returns a transaction to
+ * dispatch, or null when there is nothing to copy.
+ */
+export declare function armFormatPainter(state: EditorState): Transaction | null;
+/** Disarms the painter without applying. */
+export declare function disarmFormatPainter(state: EditorState): Transaction;
+/**
+ * Applies the copied formatting to the current (non-empty) selection and
+ * disarms. Returns null when not armed or the selection is empty.
+ */
+export declare function applyFormatPainter(state: EditorState): Transaction | null;
+export {};

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

@@ -0,0 +1,72 @@
+/**
+ * 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 { Plugin, PluginKey } from 'prosemirror-state';
+export const formatPainterKey = new PluginKey('nileFormatPainter');
+export function formatPainterPlugin() {
+    return new Plugin({
+        key: formatPainterKey,
+        state: {
+            init: () => ({ marks: null }),
+            apply(tr, value) {
+                const meta = tr.getMeta(formatPainterKey);
+                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' }
+                : {}),
+        },
+    });
+}
+/** True while the painter is armed (marks captured, waiting to apply). */
+export function isFormatPainterArmed(state) {
+    return !!formatPainterKey.getState(state)?.marks;
+}
+/** The inline marks to copy from the current selection/caret. */
+function capturedMarks(state) {
+    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) {
+    const marks = capturedMarks(state);
+    return state.tr.setMeta(formatPainterKey, { type: 'arm', marks });
+}
+/** Disarms the painter without applying. */
+export function disarmFormatPainter(state) {
+    return state.tr.setMeta(formatPainterKey, { type: 'disarm' });
+}
+/**
+ * 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) {
+    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' });
+    return tr;
+}
+//# sourceMappingURL=format-painter.js.map

package/dist/src/nile-wysiwyg-editor/engine/plugins/format-painter.js.map

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

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

@@ -0,0 +1,41 @@
+import { Node as PMNode } from 'prosemirror-model';
+import { EditorView, NodeView } from 'prosemirror-view';
+/**
+ * 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 declare function attachResizeHandles(wrapper: HTMLElement, img: HTMLElement, onCommit: (width: number) => void, minWidth?: number): void;
+export declare function isResizeEvent(event: Event): boolean;
+/** Inline image with drag-resize handles shown while selected. */
+export declare class ImageView implements NodeView {
+    private node;
+    dom: HTMLSpanElement;
+    private img;
+    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined);
+    private applyAttrs;
+    update(node: PMNode): boolean;
+    selectNode(): void;
+    deselectNode(): void;
+    stopEvent(event: Event): boolean;
+    ignoreMutation(): boolean;
+}
+/**
+ * Captioned figure: non-editable image (with resize handles) above an
+ * editable figcaption (the node's content). Clicking the image selects the
+ * whole figure.
+ */
+export declare class FigureView implements NodeView {
+    private node;
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    private img;
+    private wrapper;
+    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined);
+    private applyAttrs;
+    update(node: PMNode): boolean;
+    selectNode(): void;
+    deselectNode(): void;
+    stopEvent(event: Event): boolean;
+    ignoreMutation(mutation: MutationRecord): boolean;
+}

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

@@ -0,0 +1,176 @@
+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, img, onCommit, minWidth = MIN_WIDTH) {
+    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) => {
+                width = Math.max(minWidth, Math.min(maxWidth, startWidth + sign * (move.clientX - startX)));
+                img.style.width = `${Math.round(width)}px`;
+            };
+            const onUp = () => {
+                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) {
+    return (event.target instanceof HTMLElement && !!event.target.dataset.resizeHandle);
+}
+/** Inline image with drag-resize handles shown while selected. */
+export class ImageView {
+    constructor(node, view, getPos) {
+        this.node = node;
+        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 }));
+        });
+    }
+    applyAttrs(node) {
+        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) {
+        if (node.type !== this.node.type)
+            return false;
+        this.node = node;
+        this.applyAttrs(node);
+        return true;
+    }
+    selectNode() {
+        this.dom.classList.add('nile-wysiwyg__image-resizer--selected');
+    }
+    deselectNode() {
+        this.dom.classList.remove('nile-wysiwyg__image-resizer--selected');
+    }
+    stopEvent(event) {
+        return isResizeEvent(event);
+    }
+    ignoreMutation() {
+        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 {
+    constructor(node, view, getPos) {
+        this.node = node;
+        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 }));
+        });
+    }
+    applyAttrs(node) {
+        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) {
+        if (node.type !== this.node.type)
+            return false;
+        this.node = node;
+        this.applyAttrs(node);
+        return true;
+    }
+    selectNode() {
+        this.dom.classList.add('nile-wysiwyg__figure--selected');
+        this.wrapper.classList.add('nile-wysiwyg__image-resizer--selected');
+    }
+    deselectNode() {
+        this.dom.classList.remove('nile-wysiwyg__figure--selected');
+        this.wrapper.classList.remove('nile-wysiwyg__image-resizer--selected');
+    }
+    stopEvent(event) {
+        return isResizeEvent(event);
+    }
+    ignoreMutation(mutation) {
+        // Caption edits must flow through; image/handle mutations must not.
+        return !this.contentDOM.contains(mutation.target);
+    }
+}
+//# sourceMappingURL=image-view.js.map

package/dist/src/nile-wysiwyg-editor/engine/plugins/image-view.js.map

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