@aquera/nile-elements 1.9.8 → 1.9.10

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

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

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

@@ -1,14 +1,29 @@
 import { Plugin } from 'prosemirror-state';
 export interface EmbedTarget {
     src: string;
-    provider: 'youtube' | 'vimeo' | 'loom';
+    provider: 'youtube' | 'vimeo' | 'loom' | 'generic';
 }
 /**
- * Converts share/watch URLs from supported providers into their embed URLs.
- * Returns null for anything unrecognized — only these providers are allowed.
+ * Sandbox tokens applied to every embed iframe. Notably this OMITS
+ * `allow-top-navigation`, so a framed page cannot redirect the whole tab
+ * (the main clickjacking/phishing vector); scripts and same-origin are
+ * allowed so third-party players still run. Kept in sync with the sanitizer.
+ */
+export declare const EMBED_SANDBOX = "allow-scripts allow-same-origin allow-presentation allow-popups";
+/** Limits the referrer leaked to the embedded third-party host. */
+export declare const EMBED_REFERRER_POLICY = "strict-origin-when-cross-origin";
+/**
+ * Converts a URL into an embed target. Known providers (YouTube/Vimeo/Loom)
+ * are canonicalized to their dedicated embed URLs; any other `https://` URL
+ * is accepted as a `generic` embed. The iframe is always sandboxed on render
+ * (see EMBED_SANDBOX), so untrusted hosts cannot navigate the top window.
+ * Returns null only for non-https or unparseable URLs.
  */
 export declare function toEmbedUrl(url: string): EmbedTarget | null;
-/** True when a URL is already a permitted embed src (sanitizer check). */
+/**
+ * True when a URL is permitted as an embed src (sanitizer check). Any
+ * `https://` URL is allowed; the iframe is sandboxed at render time.
+ */
 export declare function isAllowedEmbedSrc(src: string): boolean;
 /**
  * Pasting a bare provider URL onto an empty selection inserts an embed

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

@@ -1,7 +1,19 @@
 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.
+ * Sandbox tokens applied to every embed iframe. Notably this OMITS
+ * `allow-top-navigation`, so a framed page cannot redirect the whole tab
+ * (the main clickjacking/phishing vector); scripts and same-origin are
+ * allowed so third-party players still run. Kept in sync with the sanitizer.
+ */
+export const EMBED_SANDBOX = 'allow-scripts allow-same-origin allow-presentation allow-popups';
+/** Limits the referrer leaked to the embedded third-party host. */
+export const EMBED_REFERRER_POLICY = 'strict-origin-when-cross-origin';
+/**
+ * Converts a URL into an embed target. Known providers (YouTube/Vimeo/Loom)
+ * are canonicalized to their dedicated embed URLs; any other `https://` URL
+ * is accepted as a `generic` embed. The iframe is always sandboxed on render
+ * (see EMBED_SANDBOX), so untrusted hosts cannot navigate the top window.
+ * Returns null only for non-https or unparseable URLs.
  */
 export function toEmbedUrl(url) {
     let parsed;
@@ -29,42 +41,35 @@ export function toEmbedUrl(url) {
         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') {
+    else 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') {
+    else 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;
+    // Any other https URL: embed as-is, sandboxed.
+    return { src: parsed.href, provider: 'generic' };
 }
-/** True when a URL is already a permitted embed src (sanitizer check). */
+/**
+ * True when a URL is permitted as an embed src (sanitizer check). Any
+ * `https://` URL is allowed; the iframe is sandboxed at render time.
+ */
 export function isAllowedEmbedSrc(src) {
-    let parsed;
     try {
-        parsed = new URL(src.trim());
+        return new URL(src.trim()).protocol === 'https:';
     }
     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

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

@@ -1 +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"]}
+{"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' | 'generic';\n}\n\n/**\n * Sandbox tokens applied to every embed iframe. Notably this OMITS\n * `allow-top-navigation`, so a framed page cannot redirect the whole tab\n * (the main clickjacking/phishing vector); scripts and same-origin are\n * allowed so third-party players still run. Kept in sync with the sanitizer.\n */\nexport const EMBED_SANDBOX = 'allow-scripts allow-same-origin allow-presentation allow-popups';\n\n/** Limits the referrer leaked to the embedded third-party host. */\nexport const EMBED_REFERRER_POLICY = 'strict-origin-when-cross-origin';\n\n/**\n * Converts a URL into an embed target. Known providers (YouTube/Vimeo/Loom)\n * are canonicalized to their dedicated embed URLs; any other `https://` URL\n * is accepted as a `generic` embed. The iframe is always sandboxed on render\n * (see EMBED_SANDBOX), so untrusted hosts cannot navigate the top window.\n * Returns null only for non-https or unparseable URLs.\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  }\n\n  // Vimeo: vimeo.com/123456789, player.vimeo.com/video/123456789\n  else 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  }\n\n  // Loom: loom.com/share/ID or loom.com/embed/ID\n  else 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  }\n\n  // Any other https URL: embed as-is, sandboxed.\n  return { src: parsed.href, provider: 'generic' };\n}\n\n/**\n * True when a URL is permitted as an embed src (sanitizer check). Any\n * `https://` URL is allowed; the iframe is sandboxed at render time.\n */\nexport function isAllowedEmbedSrc(src: string): boolean {\n  try {\n    return new URL(src.trim()).protocol === 'https:';\n  } catch {\n    return false;\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/math-view.d.ts

@@ -3,13 +3,18 @@ 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.
+ * Inline atom rendering a math formula. Precedence:
+ *   1. A host-supplied `mathRenderer` (full control — e.g. KaTeX HTML, MathJax).
+ *   2. The built-in default: KaTeX compiled to **MathML**, which browsers render
+ *      natively with no stylesheet or web fonts (works cleanly inside the
+ *      editor's shadow root).
+ *   3. If KaTeX can't load / parse, the raw LaTeX stays visible.
  */
 export declare class MathView implements NodeView {
     dom: HTMLSpanElement;
     private renderer?;
+    /** Bumps on every render so a slow async KaTeX result for a stale node is dropped. */
+    private token;
     constructor(node: PMNode, renderer?: MathRenderer);
     private render;
     update(node: PMNode): boolean;

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

@@ -1,10 +1,26 @@
 /**
- * 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.
+ * Lazy-loaded KaTeX module (loaded once, only when the first formula renders,
+ * so editors without math pay nothing). Resolves to the katex default export.
+ */
+let katexPromise = null;
+function loadKatex() {
+    if (!katexPromise) {
+        katexPromise = import('katex').then(m => m.default);
+    }
+    return katexPromise;
+}
+/**
+ * Inline atom rendering a math formula. Precedence:
+ *   1. A host-supplied `mathRenderer` (full control — e.g. KaTeX HTML, MathJax).
+ *   2. The built-in default: KaTeX compiled to **MathML**, which browsers render
+ *      natively with no stylesheet or web fonts (works cleanly inside the
+ *      editor's shadow root).
+ *   3. If KaTeX can't load / parse, the raw LaTeX stays visible.
  */
 export class MathView {
     constructor(node, renderer) {
+        /** Bumps on every render so a slow async KaTeX result for a stale node is dropped. */
+        this.token = 0;
         this.renderer = renderer;
         this.dom = document.createElement('span');
         this.dom.contentEditable = 'false';
@@ -20,6 +36,8 @@ export class MathView {
         this.dom.setAttribute('data-math', latex);
         this.dom.setAttribute('data-math-display', display);
         this.dom.title = latex;
+        const token = ++this.token;
+        // 1. Host renderer wins.
         if (this.renderer) {
             try {
                 // Host renderer output is trusted (same trust level as uploadHandler).
@@ -27,10 +45,29 @@ export class MathView {
                 return;
             }
             catch {
-                // Fall back to raw LaTeX if the renderer throws.
+                // Fall through to the built-in renderer.
             }
         }
+        // 2. Built-in KaTeX → MathML. Show raw LaTeX until the (lazy) engine loads.
         this.dom.textContent = latex;
+        loadKatex()
+            .then(katex => {
+            if (token !== this.token)
+                return; // node changed while loading
+            try {
+                this.dom.innerHTML = katex.renderToString(latex, {
+                    output: 'mathml',
+                    displayMode: display === 'block',
+                    throwOnError: false,
+                });
+            }
+            catch {
+                this.dom.textContent = latex;
+            }
+        })
+            .catch(() => {
+            /* KaTeX unavailable — keep the raw LaTeX already shown. */
+        });
     }
     update(node) {
         if (node.type.name !== 'math')

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

@@ -1 +1 @@
-{"version":3,"file":"math-view.js","sourceRoot":"","sources":["../../../../../src/nile-wysiwyg-editor/engine/plugins/math-view.ts"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,MAAM,OAAO,QAAQ;IAKnB,YAAY,IAAY,EAAE,QAAuB;QAC/C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC1C,IAAI,CAAC,GAAG,CAAC,eAAe,GAAG,OAAO,CAAC;QACnC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC;IAEO,MAAM,CAAC,IAAY;QACzB,MAAM,KAAK,GAAI,IAAI,CAAC,KAAK,CAAC,KAAgB,IAAI,EAAE,CAAC;QACjD,MAAM,OAAO,GAAI,IAAI,CAAC,KAAK,CAAC,OAA8B,IAAI,QAAQ,CAAC;QACvE,IAAI,CAAC,GAAG,CAAC,SAAS;YAChB,OAAO,KAAK,OAAO;gBACjB,CAAC,CAAC,8CAA8C;gBAChD,CAAC,CAAC,oBAAoB,CAAC;QAC3B,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC;QACpD,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;QACvB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC;gBACH,uEAAuE;gBACvE,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;gBACnD,OAAO;YACT,CAAC;YAAC,MAAM,CAAC;gBACP,iDAAiD;YACnD,CAAC;QACH,CAAC;QACD,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;IAC/B,CAAC;IAED,MAAM,CAAC,IAAY;QACjB,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM;YAAE,OAAO,KAAK,CAAC;QAC5C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,0EAA0E;IAC1E,cAAc;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;CACF","sourcesContent":["import { Node as PMNode } from 'prosemirror-model';\nimport { NodeView } from 'prosemirror-view';\n\n/** Turns a LaTeX string into HTML (KaTeX/MathJax/MathML). Host-provided. */\nexport type MathRenderer = (latex: string, display: 'inline' | 'block') => string;\n\n/**\n * Inline atom rendering a math formula. When the host supplies a renderer the\n * formula is drawn with it; otherwise the raw LaTeX is shown in a math chip so\n * the content is still visible and editable without a math engine.\n */\nexport class MathView implements NodeView {\n  dom: HTMLSpanElement;\n\n  private renderer?: MathRenderer;\n\n  constructor(node: PMNode, renderer?: MathRenderer) {\n    this.renderer = renderer;\n    this.dom = document.createElement('span');\n    this.dom.contentEditable = 'false';\n    this.render(node);\n  }\n\n  private render(node: PMNode): void {\n    const latex = (node.attrs.latex as string) ?? '';\n    const display = (node.attrs.display as 'inline' | 'block') ?? 'inline';\n    this.dom.className =\n      display === 'block'\n        ? 'nile-wysiwyg__math nile-wysiwyg__math--block'\n        : 'nile-wysiwyg__math';\n    this.dom.setAttribute('data-math', latex);\n    this.dom.setAttribute('data-math-display', display);\n    this.dom.title = latex;\n    if (this.renderer) {\n      try {\n        // Host renderer output is trusted (same trust level as uploadHandler).\n        this.dom.innerHTML = this.renderer(latex, display);\n        return;\n      } catch {\n        // Fall back to raw LaTeX if the renderer throws.\n      }\n    }\n    this.dom.textContent = latex;\n  }\n\n  update(node: PMNode): boolean {\n    if (node.type.name !== 'math') return false;\n    this.render(node);\n    return true;\n  }\n\n  /** Atom node: ProseMirror owns selection; never read our subtree back. */\n  ignoreMutation(): boolean {\n    return true;\n  }\n}\n"]}
+{"version":3,"file":"math-view.js","sourceRoot":"","sources":["../../../../../src/nile-wysiwyg-editor/engine/plugins/math-view.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,IAAI,YAAY,GACd,IAAI,CAAC;AACP,SAAS,SAAS;IAChB,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACtD,CAAC;IACD,OAAO,YAAY,CAAC;AACtB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,OAAO,QAAQ;IAQnB,YAAY,IAAY,EAAE,QAAuB;QAHjD,sFAAsF;QAC9E,UAAK,GAAG,CAAC,CAAC;QAGhB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC1C,IAAI,CAAC,GAAG,CAAC,eAAe,GAAG,OAAO,CAAC;QACnC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC;IAEO,MAAM,CAAC,IAAY;QACzB,MAAM,KAAK,GAAI,IAAI,CAAC,KAAK,CAAC,KAAgB,IAAI,EAAE,CAAC;QACjD,MAAM,OAAO,GAAI,IAAI,CAAC,KAAK,CAAC,OAA8B,IAAI,QAAQ,CAAC;QACvE,IAAI,CAAC,GAAG,CAAC,SAAS;YAChB,OAAO,KAAK,OAAO;gBACjB,CAAC,CAAC,8CAA8C;gBAChD,CAAC,CAAC,oBAAoB,CAAC;QAC3B,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC;QACpD,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;QAEvB,MAAM,KAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC;QAE3B,yBAAyB;QACzB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC;gBACH,uEAAuE;gBACvE,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;gBACnD,OAAO;YACT,CAAC;YAAC,MAAM,CAAC;gBACP,yCAAyC;YAC3C,CAAC;QACH,CAAC;QAED,4EAA4E;QAC5E,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;QAC7B,SAAS,EAAE;aACR,IAAI,CAAC,KAAK,CAAC,EAAE;YACZ,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK;gBAAE,OAAO,CAAC,6BAA6B;YAC/D,IAAI,CAAC;gBACH,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,EAAE;oBAC/C,MAAM,EAAE,QAAQ;oBAChB,WAAW,EAAE,OAAO,KAAK,OAAO;oBAChC,YAAY,EAAE,KAAK;iBACpB,CAAC,CAAC;YACL,CAAC;YAAC,MAAM,CAAC;gBACP,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,2DAA2D;QAC7D,CAAC,CAAC,CAAC;IACP,CAAC;IAED,MAAM,CAAC,IAAY;QACjB,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM;YAAE,OAAO,KAAK,CAAC;QAC5C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,0EAA0E;IAC1E,cAAc;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;CACF","sourcesContent":["import { Node as PMNode } from 'prosemirror-model';\nimport { NodeView } from 'prosemirror-view';\n\n/** Turns a LaTeX string into HTML (KaTeX/MathJax/MathML). Host-provided. */\nexport type MathRenderer = (latex: string, display: 'inline' | 'block') => string;\n\n/**\n * Lazy-loaded KaTeX module (loaded once, only when the first formula renders,\n * so editors without math pay nothing). Resolves to the katex default export.\n */\nlet katexPromise: Promise<{ renderToString(tex: string, opts?: Record<string, unknown>): string }> | null =\n  null;\nfunction loadKatex() {\n  if (!katexPromise) {\n    katexPromise = import('katex').then(m => m.default);\n  }\n  return katexPromise;\n}\n\n/**\n * Inline atom rendering a math formula. Precedence:\n *   1. A host-supplied `mathRenderer` (full control — e.g. KaTeX HTML, MathJax).\n *   2. The built-in default: KaTeX compiled to **MathML**, which browsers render\n *      natively with no stylesheet or web fonts (works cleanly inside the\n *      editor's shadow root).\n *   3. If KaTeX can't load / parse, the raw LaTeX stays visible.\n */\nexport class MathView implements NodeView {\n  dom: HTMLSpanElement;\n\n  private renderer?: MathRenderer;\n\n  /** Bumps on every render so a slow async KaTeX result for a stale node is dropped. */\n  private token = 0;\n\n  constructor(node: PMNode, renderer?: MathRenderer) {\n    this.renderer = renderer;\n    this.dom = document.createElement('span');\n    this.dom.contentEditable = 'false';\n    this.render(node);\n  }\n\n  private render(node: PMNode): void {\n    const latex = (node.attrs.latex as string) ?? '';\n    const display = (node.attrs.display as 'inline' | 'block') ?? 'inline';\n    this.dom.className =\n      display === 'block'\n        ? 'nile-wysiwyg__math nile-wysiwyg__math--block'\n        : 'nile-wysiwyg__math';\n    this.dom.setAttribute('data-math', latex);\n    this.dom.setAttribute('data-math-display', display);\n    this.dom.title = latex;\n\n    const token = ++this.token;\n\n    // 1. Host renderer wins.\n    if (this.renderer) {\n      try {\n        // Host renderer output is trusted (same trust level as uploadHandler).\n        this.dom.innerHTML = this.renderer(latex, display);\n        return;\n      } catch {\n        // Fall through to the built-in renderer.\n      }\n    }\n\n    // 2. Built-in KaTeX → MathML. Show raw LaTeX until the (lazy) engine loads.\n    this.dom.textContent = latex;\n    loadKatex()\n      .then(katex => {\n        if (token !== this.token) return; // node changed while loading\n        try {\n          this.dom.innerHTML = katex.renderToString(latex, {\n            output: 'mathml',\n            displayMode: display === 'block',\n            throwOnError: false,\n          });\n        } catch {\n          this.dom.textContent = latex;\n        }\n      })\n      .catch(() => {\n        /* KaTeX unavailable — keep the raw LaTeX already shown. */\n      });\n  }\n\n  update(node: PMNode): boolean {\n    if (node.type.name !== 'math') return false;\n    this.render(node);\n    return true;\n  }\n\n  /** Atom node: ProseMirror owns selection; never read our subtree back. */\n  ignoreMutation(): boolean {\n    return true;\n  }\n}\n"]}

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

@@ -0,0 +1,17 @@
+import { Node as PMNode } from 'prosemirror-model';
+import { NodeView } from 'prosemirror-view';
+/**
+ * Node view for an author `<style>` block. It injects the CSS live — scoped to
+ * the content root — so the styles apply to the document as authored, with no
+ * visible chip. The block itself renders nothing (a hidden `<style>` host); it
+ * round-trips to `<style>` in the output via the schema's toDOM, and the same
+ * raw CSS is what the HTML-source preview renders.
+ */
+export declare class StyleBlockView implements NodeView {
+    private node;
+    dom: HTMLElement;
+    private styleEl;
+    constructor(node: PMNode);
+    update(node: PMNode): boolean;
+    ignoreMutation(): boolean;
+}

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

@@ -0,0 +1,174 @@
+/** Content root the editor mounts the document under. Author CSS is scoped to
+ * it so a rule such as `div { background: green }` styles the content only and
+ * can never paint the editor chrome (toolbar, panels, surface) that shares the
+ * same shadow root. */
+const CONTENT_SCOPE = '.ProseMirror';
+/** Advances past a quoted string starting at `i` (the opening quote), honoring
+ * backslash escapes; returns the index just after the closing quote. */
+function skipString(css, i) {
+    const quote = css[i];
+    i += 1;
+    while (i < css.length) {
+        if (css[i] === '\\') {
+            i += 2;
+            continue;
+        }
+        if (css[i] === quote)
+            return i + 1;
+        i += 1;
+    }
+    return i;
+}
+/** Splits on a top-level separator, ignoring ones inside (), [] or strings. */
+function splitTopLevel(str, sep) {
+    const parts = [];
+    let depth = 0;
+    let buf = '';
+    for (let i = 0; i < str.length; i += 1) {
+        const c = str[i];
+        if (c === '"' || c === "'") {
+            const end = skipString(str, i);
+            buf += str.slice(i, end);
+            i = end - 1;
+            continue;
+        }
+        if (c === '(' || c === '[')
+            depth += 1;
+        else if (c === ')' || c === ']')
+            depth -= 1;
+        if (c === sep && depth === 0) {
+            parts.push(buf);
+            buf = '';
+            continue;
+        }
+        buf += c;
+    }
+    parts.push(buf);
+    return parts;
+}
+/** Confines one complex selector to the content root. `html`/`body`/`:root`
+ * map onto the root itself. */
+function scopeSelector(selector, scope) {
+    const sel = selector.trim();
+    if (!sel)
+        return sel;
+    if (/^(?:html|body|:root)$/i.test(sel))
+        return scope;
+    const root = sel.match(/^(?:html|body|:root)\b\s*/i);
+    return root ? `${scope} ${sel.slice(root[0].length)}`.trim() : `${scope} ${sel}`;
+}
+/** Confines a comma-separated selector list to the content root. */
+function scopeSelectorList(list, scope) {
+    return splitTopLevel(list, ',')
+        .map(part => scopeSelector(part, scope))
+        .filter(Boolean)
+        .join(', ');
+}
+const NESTED_AT_RULES = new Set(['media', 'supports', 'container', 'layer', 'scope']);
+/**
+ * Scopes every rule in a CSS block to the content root by prefixing selectors,
+ * keeping each declaration block **verbatim**. Declarations are never re-parsed
+ * (a CSSOM round-trip drops `var()` inside shorthands, e.g. gradient text), and
+ * strings/nested braces are tracked so `content: "}"` can't derail it. Nested
+ * conditionals (`@media`, `@supports`, …) recurse; other at-rules
+ * (`@keyframes`, `@font-face`, …) pass through untouched.
+ */
+function scopeBlock(css, scope) {
+    let out = '';
+    let i = 0;
+    const n = css.length;
+    while (i < n) {
+        let j = i;
+        while (j < n) {
+            const c = css[j];
+            if (c === '"' || c === "'") {
+                j = skipString(css, j);
+                continue;
+            }
+            if (c === '{' || c === ';')
+                break;
+            j += 1;
+        }
+        if (j >= n) {
+            out += css.slice(i);
+            break;
+        }
+        if (css[j] === ';') {
+            // A statement at-rule (e.g. a stray @charset) — keep verbatim.
+            out += css.slice(i, j + 1);
+            i = j + 1;
+            continue;
+        }
+        const prelude = css.slice(i, j).trim();
+        let depth = 1;
+        let k = j + 1;
+        while (k < n && depth > 0) {
+            const c = css[k];
+            if (c === '"' || c === "'") {
+                k = skipString(css, k);
+                continue;
+            }
+            if (c === '{')
+                depth += 1;
+            else if (c === '}')
+                depth -= 1;
+            k += 1;
+        }
+        const body = css.slice(j + 1, k - 1);
+        if (prelude.startsWith('@')) {
+            const name = (prelude.match(/^@([a-z-]+)/i)?.[1] ?? '').toLowerCase();
+            out += NESTED_AT_RULES.has(name)
+                ? `${prelude} {${scopeBlock(body, scope)}}`
+                : `${prelude} {${body}}`;
+        }
+        else if (prelude) {
+            out += `${scopeSelectorList(prelude, scope)} {${body}}`;
+        }
+        i = k;
+    }
+    return out;
+}
+/** Returns author CSS confined to the content root. */
+function scopeCss(css, scope) {
+    if (!css.trim())
+        return '';
+    try {
+        return scopeBlock(css, scope);
+    }
+    catch {
+        return css;
+    }
+}
+/**
+ * Node view for an author `<style>` block. It injects the CSS live — scoped to
+ * the content root — so the styles apply to the document as authored, with no
+ * visible chip. The block itself renders nothing (a hidden `<style>` host); it
+ * round-trips to `<style>` in the output via the schema's toDOM, and the same
+ * raw CSS is what the HTML-source preview renders.
+ */
+export class StyleBlockView {
+    constructor(node) {
+        this.node = node;
+        this.dom = document.createElement('div');
+        this.dom.className = 'nile-wysiwyg__style-block';
+        this.dom.contentEditable = 'false';
+        // A <style> applies regardless of its (display:none) host, so the block is
+        // invisible yet its rules take effect on the content.
+        this.styleEl = document.createElement('style');
+        this.styleEl.textContent = scopeCss(node.attrs.css, CONTENT_SCOPE);
+        this.dom.append(this.styleEl);
+    }
+    update(node) {
+        if (node.type !== this.node.type)
+            return false;
+        if (node.attrs.css !== this.node.attrs.css) {
+            this.styleEl.textContent = scopeCss(node.attrs.css, CONTENT_SCOPE);
+        }
+        this.node = node;
+        return true;
+    }
+    ignoreMutation() {
+        return true;
+    }
+}
+//# sourceMappingURL=style-block-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style-block-view.js","sourceRoot":"","sources":["../../../../../src/nile-wysiwyg-editor/engine/plugins/style-block-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { Node as PMNode } from 'prosemirror-model';\nimport { NodeView } from 'prosemirror-view';\n\n/** Content root the editor mounts the document under. Author CSS is scoped to\n * it so a rule such as `div { background: green }` styles the content only and\n * can never paint the editor chrome (toolbar, panels, surface) that shares the\n * same shadow root. */\nconst CONTENT_SCOPE = '.ProseMirror';\n\n/** Advances past a quoted string starting at `i` (the opening quote), honoring\n * backslash escapes; returns the index just after the closing quote. */\nfunction skipString(css: string, i: number): number {\n  const quote = css[i];\n  i += 1;\n  while (i < css.length) {\n    if (css[i] === '\\\\') {\n      i += 2;\n      continue;\n    }\n    if (css[i] === quote) return i + 1;\n    i += 1;\n  }\n  return i;\n}\n\n/** Splits on a top-level separator, ignoring ones inside (), [] or strings. */\nfunction splitTopLevel(str: string, sep: string): string[] {\n  const parts: string[] = [];\n  let depth = 0;\n  let buf = '';\n  for (let i = 0; i < str.length; i += 1) {\n    const c = str[i];\n    if (c === '\"' || c === \"'\") {\n      const end = skipString(str, i);\n      buf += str.slice(i, end);\n      i = end - 1;\n      continue;\n    }\n    if (c === '(' || c === '[') depth += 1;\n    else if (c === ')' || c === ']') depth -= 1;\n    if (c === sep && depth === 0) {\n      parts.push(buf);\n      buf = '';\n      continue;\n    }\n    buf += c;\n  }\n  parts.push(buf);\n  return parts;\n}\n\n/** Confines one complex selector to the content root. `html`/`body`/`:root`\n * map onto the root itself. */\nfunction scopeSelector(selector: string, scope: string): string {\n  const sel = selector.trim();\n  if (!sel) return sel;\n  if (/^(?:html|body|:root)$/i.test(sel)) return scope;\n  const root = sel.match(/^(?:html|body|:root)\\b\\s*/i);\n  return root ? `${scope} ${sel.slice(root[0].length)}`.trim() : `${scope} ${sel}`;\n}\n\n/** Confines a comma-separated selector list to the content root. */\nfunction scopeSelectorList(list: string, scope: string): string {\n  return splitTopLevel(list, ',')\n    .map(part => scopeSelector(part, scope))\n    .filter(Boolean)\n    .join(', ');\n}\n\nconst NESTED_AT_RULES = new Set(['media', 'supports', 'container', 'layer', 'scope']);\n\n/**\n * Scopes every rule in a CSS block to the content root by prefixing selectors,\n * keeping each declaration block **verbatim**. Declarations are never re-parsed\n * (a CSSOM round-trip drops `var()` inside shorthands, e.g. gradient text), and\n * strings/nested braces are tracked so `content: \"}\"` can't derail it. Nested\n * conditionals (`@media`, `@supports`, …) recurse; other at-rules\n * (`@keyframes`, `@font-face`, …) pass through untouched.\n */\nfunction scopeBlock(css: string, scope: string): string {\n  let out = '';\n  let i = 0;\n  const n = css.length;\n  while (i < n) {\n    let j = i;\n    while (j < n) {\n      const c = css[j];\n      if (c === '\"' || c === \"'\") {\n        j = skipString(css, j);\n        continue;\n      }\n      if (c === '{' || c === ';') break;\n      j += 1;\n    }\n    if (j >= n) {\n      out += css.slice(i);\n      break;\n    }\n    if (css[j] === ';') {\n      // A statement at-rule (e.g. a stray @charset) — keep verbatim.\n      out += css.slice(i, j + 1);\n      i = j + 1;\n      continue;\n    }\n    const prelude = css.slice(i, j).trim();\n    let depth = 1;\n    let k = j + 1;\n    while (k < n && depth > 0) {\n      const c = css[k];\n      if (c === '\"' || c === \"'\") {\n        k = skipString(css, k);\n        continue;\n      }\n      if (c === '{') depth += 1;\n      else if (c === '}') depth -= 1;\n      k += 1;\n    }\n    const body = css.slice(j + 1, k - 1);\n    if (prelude.startsWith('@')) {\n      const name = (prelude.match(/^@([a-z-]+)/i)?.[1] ?? '').toLowerCase();\n      out += NESTED_AT_RULES.has(name)\n        ? `${prelude} {${scopeBlock(body, scope)}}`\n        : `${prelude} {${body}}`;\n    } else if (prelude) {\n      out += `${scopeSelectorList(prelude, scope)} {${body}}`;\n    }\n    i = k;\n  }\n  return out;\n}\n\n/** Returns author CSS confined to the content root. */\nfunction scopeCss(css: string, scope: string): string {\n  if (!css.trim()) return '';\n  try {\n    return scopeBlock(css, scope);\n  } catch {\n    return css;\n  }\n}\n\n/**\n * Node view for an author `<style>` block. It injects the CSS live — scoped to\n * the content root — so the styles apply to the document as authored, with no\n * visible chip. The block itself renders nothing (a hidden `<style>` host); it\n * round-trips to `<style>` in the output via the schema's toDOM, and the same\n * raw CSS is what the HTML-source preview renders.\n */\nexport class StyleBlockView implements NodeView {\n  dom: HTMLElement;\n\n  private styleEl: HTMLStyleElement;\n\n  constructor(private node: PMNode) {\n    this.dom = document.createElement('div');\n    this.dom.className = 'nile-wysiwyg__style-block';\n    this.dom.contentEditable = 'false';\n\n    // A <style> applies regardless of its (display:none) host, so the block is\n    // invisible yet its rules take effect on the content.\n    this.styleEl = document.createElement('style');\n    this.styleEl.textContent = scopeCss(node.attrs.css, CONTENT_SCOPE);\n    this.dom.append(this.styleEl);\n  }\n\n  update(node: PMNode): boolean {\n    if (node.type !== this.node.type) return false;\n    if (node.attrs.css !== this.node.attrs.css) {\n      this.styleEl.textContent = scopeCss(node.attrs.css, CONTENT_SCOPE);\n    }\n    this.node = node;\n    return true;\n  }\n\n  ignoreMutation(): boolean {\n    return true;\n  }\n}\n"]}

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

@@ -1,4 +1,32 @@
-import { tableEditing, columnResizing } from 'prosemirror-tables';
+import { tableEditing, columnResizing, TableView } from 'prosemirror-tables';
+/**
+ * TableView that also reflects the author's `class`/`id` onto the inner
+ * `<table>` element (the base TableView leaves it bare and puts its own class on
+ * the wrapper div). The attributes round-trip via the schema's toDOM on export;
+ * this makes `table.grid …` style rules match in the live editor too. Passed to
+ * `columnResizing` as its `View`, so column resizing keeps working.
+ */
+class HtmlAttrTableView extends TableView {
+    constructor(node, defaultCellMinWidth) {
+        super(node, defaultCellMinWidth);
+        this.applyHtmlAttrs(node);
+    }
+    applyHtmlAttrs(node) {
+        const htmlClass = node.attrs.htmlClass;
+        const htmlId = node.attrs.htmlId;
+        this.table.className = htmlClass ?? '';
+        if (htmlId)
+            this.table.id = htmlId;
+        else
+            this.table.removeAttribute('id');
+    }
+    update(node) {
+        const updated = super.update(node);
+        if (updated)
+            this.applyHtmlAttrs(node);
+        return updated;
+    }
+}
 /**
  * prosemirror-tables wiring: cell selections, fix-tables normalization, and
  * draggable column resizing (widths persist as `data-colwidth`). The CSS
@@ -6,6 +34,9 @@ import { tableEditing, columnResizing } from 'prosemirror-tables';
  * is inlined in nile-wysiwyg-editor.css.ts.
  */
 export function tablePlugins() {
-    return [columnResizing(), tableEditing({ allowTableNodeSelection: true })];
+    return [
+        columnResizing({ View: HtmlAttrTableView }),
+        tableEditing({ allowTableNodeSelection: true }),
+    ];
 }
 //# sourceMappingURL=tables.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tables.js","sourceRoot":"","sources":["../../../../../src/nile-wysiwyg-editor/engine/plugins/tables.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAElE;;;;;GAKG;AACH,MAAM,UAAU,YAAY;IAC1B,OAAO,CAAC,cAAc,EAAE,EAAE,YAAY,CAAC,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAC7E,CAAC","sourcesContent":["import { Plugin } from 'prosemirror-state';\nimport { tableEditing, columnResizing } from 'prosemirror-tables';\n\n/**\n * prosemirror-tables wiring: cell selections, fix-tables normalization, and\n * draggable column resizing (widths persist as `data-colwidth`). The CSS\n * these plugins rely on (.selectedCell, .column-resize-handle, .resize-cursor)\n * is inlined in nile-wysiwyg-editor.css.ts.\n */\nexport function tablePlugins(): Plugin[] {\n  return [columnResizing(), tableEditing({ allowTableNodeSelection: true })];\n}\n"]}
+{"version":3,"file":"tables.js","sourceRoot":"","sources":["../../../../../src/nile-wysiwyg-editor/engine/plugins/tables.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE7E;;;;;;GAMG;AACH,MAAM,iBAAkB,SAAQ,SAAS;IACvC,YAAY,IAAY,EAAE,mBAA2B;QACnD,KAAK,CAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC;QACjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAEO,cAAc,CAAC,IAAY;QACjC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAA0B,CAAC;QACxD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAuB,CAAC;QAClD,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE,CAAC;QACvC,IAAI,MAAM;YAAE,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,MAAM,CAAC;;YAC9B,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC;IAED,MAAM,CAAC,IAAY;QACjB,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,OAAO;YAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACvC,OAAO,OAAO,CAAC;IACjB,CAAC;CACF;AAED;;;;;GAKG;AACH,MAAM,UAAU,YAAY;IAC1B,OAAO;QACL,cAAc,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC;QAC3C,YAAY,CAAC,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;KAChD,CAAC;AACJ,CAAC","sourcesContent":["import { Plugin } from 'prosemirror-state';\nimport { Node as PMNode } from 'prosemirror-model';\nimport { tableEditing, columnResizing, TableView } from 'prosemirror-tables';\n\n/**\n * TableView that also reflects the author's `class`/`id` onto the inner\n * `<table>` element (the base TableView leaves it bare and puts its own class on\n * the wrapper div). The attributes round-trip via the schema's toDOM on export;\n * this makes `table.grid …` style rules match in the live editor too. Passed to\n * `columnResizing` as its `View`, so column resizing keeps working.\n */\nclass HtmlAttrTableView extends TableView {\n  constructor(node: PMNode, defaultCellMinWidth: number) {\n    super(node, defaultCellMinWidth);\n    this.applyHtmlAttrs(node);\n  }\n\n  private applyHtmlAttrs(node: PMNode): void {\n    const htmlClass = node.attrs.htmlClass as string | null;\n    const htmlId = node.attrs.htmlId as string | null;\n    this.table.className = htmlClass ?? '';\n    if (htmlId) this.table.id = htmlId;\n    else this.table.removeAttribute('id');\n  }\n\n  update(node: PMNode): boolean {\n    const updated = super.update(node);\n    if (updated) this.applyHtmlAttrs(node);\n    return updated;\n  }\n}\n\n/**\n * prosemirror-tables wiring: cell selections, fix-tables normalization, and\n * draggable column resizing (widths persist as `data-colwidth`). The CSS\n * these plugins rely on (.selectedCell, .column-resize-handle, .resize-cursor)\n * is inlined in nile-wysiwyg-editor.css.ts.\n */\nexport function tablePlugins(): Plugin[] {\n  return [\n    columnResizing({ View: HtmlAttrTableView }),\n    tableEditing({ allowTableNodeSelection: true }),\n  ];\n}\n"]}