@ceedcv-maya/shared-editor-react 0.9.0 → 0.11.0

package/src/lib/renderTiptapJson.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from 'vitest';
+import { renderTiptapJsonToHtml } from './renderTiptapJson';
+import type { TiptapDoc } from '../types';
+
+describe('renderTiptapJsonToHtml', () => {
+  it('renders a wrapped doc', () => {
+    const doc: TiptapDoc = {
+      type: 'doc',
+      content: [
+        { type: 'paragraph', content: [{ type: 'text', text: 'hola' }] },
+      ],
+    };
+    const html = renderTiptapJsonToHtml(doc);
+    expect(html).toContain('<p');
+    expect(html).toContain('hola');
+  });
+
+  it('accepts a bare content array (the shape MayaEditor emits)', () => {
+    const html = renderTiptapJsonToHtml([
+      { type: 'heading', attrs: { level: 2 }, content: [{ type: 'text', text: 'Sección' }] },
+    ]);
+    expect(html).toMatch(/<h2[^>]*>.*Sección.*<\/h2>/s);
+  });
+
+  it('renders bold marks as <strong>', () => {
+    const html = renderTiptapJsonToHtml([
+      {
+        type: 'paragraph',
+        content: [
+          { type: 'text', text: 'plain ' },
+          { type: 'text', text: 'bold', marks: [{ type: 'bold' }] },
+        ],
+      },
+    ]);
+    expect(html).toMatch(/<strong[^>]*>bold<\/strong>/);
+  });
+
+  it('renders a code block without interpreting markdown inside it', () => {
+    const html = renderTiptapJsonToHtml([
+      { type: 'codeBlock', content: [{ type: 'text', text: '## not a heading' }] },
+    ]);
+    expect(html).toContain('<pre');
+    expect(html).toContain('## not a heading');
+  });
+
+  it('does NOT turn literal markdown text into formatting (data, not render)', () => {
+    // Regression guard: markdown stored as plain text must render literally —
+    // this is why the fix lives at ingestion, not in the renderer.
+    const html = renderTiptapJsonToHtml([
+      { type: 'paragraph', content: [{ type: 'text', text: '## Programa **negrita**' }] },
+    ]);
+    expect(html).toContain('## Programa **negrita**');
+    expect(html).not.toContain('<h2');
+    expect(html).not.toContain('<strong>');
+  });
+
+  it('renders a table', () => {
+    const html = renderTiptapJsonToHtml([
+      {
+        type: 'table',
+        content: [
+          {
+            type: 'tableRow',
+            content: [
+              { type: 'tableHeader', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'A' }] }] },
+              { type: 'tableCell', content: [{ type: 'paragraph', content: [{ type: 'text', text: 'B' }] }] },
+            ],
+          },
+        ],
+      },
+    ]);
+    expect(html).toContain('<table');
+    expect(html).toContain('A');
+    expect(html).toContain('B');
+  });
+
+  it('returns empty string for null/empty content', () => {
+    expect(renderTiptapJsonToHtml(null)).toBe('');
+    expect(renderTiptapJsonToHtml([])).toBe('');
+    expect(renderTiptapJsonToHtml(undefined)).toBe('');
+  });
+});

package/src/lib/renderTiptapJson.ts

@@ -0,0 +1,72 @@
+/**
+ * Render a stored TipTap/ProseMirror JSON document to an HTML string using
+ * TipTap's official static renderer.
+ *
+ * This replaces hand-rolled JSON→HTML walkers (which drift from the live
+ * editor and from the server-side `TiptapHtmlRenderer.php`). The static
+ * renderer builds the schema from the canonical extension set and runs each
+ * extension's `renderHTML`, so custom nodes (AlertBlock, IframeBlock, …) and
+ * marks render exactly as the editor defines them — a single source of truth
+ * on the JS side.
+ *
+ * The returned HTML is NOT sanitised; pass it through `EditorContentHtml`
+ * (DOMPurify) or use the `EditorContentJson` component for read-only views.
+ *
+ * Accepts both shapes persisted by the platform:
+ *  - a wrapped doc `{ type: 'doc', content: [...] }`
+ *  - a bare content array (`MayaEditor` emits `onChange(doc.content)`)
+ *
+ * Static-renderer caveats (per TipTap docs): no editor instance is created, so
+ * `addProseMirrorPlugins`/`onCreate`/transaction hooks do not run, and the
+ * output can differ slightly from the live editor for nodeView-backed nodes.
+ */
+import { renderToHTMLString } from '@tiptap/static-renderer';
+import type { Extensions } from '@tiptap/core';
+
+import { buildMayaEditorExtensions } from './editorExtensions';
+import type { TiptapDoc, TiptapNode } from '../types';
+
+function looksLikeTiptapDoc(value: unknown): value is TiptapDoc {
+  return (
+    !!value &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    (value as { type?: unknown }).type === 'doc' &&
+    Array.isArray((value as { content?: unknown }).content)
+  );
+}
+
+function looksLikeTiptapContentArray(value: unknown): value is TiptapNode[] {
+  return (
+    Array.isArray(value) &&
+    value.length > 0 &&
+    value.every((n) => !!n && typeof n === 'object')
+  );
+}
+
+/** Normalise the accepted input shapes to a wrapped doc, or `null` if empty. */
+function toDoc(content: unknown): TiptapDoc | null {
+  if (content == null) return null;
+  if (looksLikeTiptapDoc(content)) return content;
+  if (looksLikeTiptapContentArray(content)) {
+    return { type: 'doc', content };
+  }
+  return null;
+}
+
+export function renderTiptapJsonToHtml(
+  content: TiptapDoc | TiptapNode[] | unknown,
+  extensions?: Extensions,
+): string {
+  const doc = toDoc(content);
+  if (!doc) return '';
+
+  try {
+    return renderToHTMLString({
+      content: doc,
+      extensions: extensions ?? buildMayaEditorExtensions('full'),
+    });
+  } catch {
+    return '';
+  }
+}

package/src/lib/tableMenuActions.test.ts

@@ -0,0 +1,88 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { Editor } from '@tiptap/core';
+import { buildMayaEditorExtensions } from './editorExtensions';
+import { tableMenuActions } from './tableMenuActions';
+
+function makeEditor(): Editor {
+  return new Editor({ extensions: buildMayaEditorExtensions('full') });
+}
+
+/** Count tableRow / cell nodes in the current doc. */
+function tableShape(editor: Editor): { rows: number; cols: number } {
+  let rows = 0;
+  let cols = 0;
+  editor.state.doc.descendants((node) => {
+    if (node.type.name === 'tableRow') {
+      rows += 1;
+      if (rows === 1) cols = node.childCount; // cells in first row
+    }
+    return true;
+  });
+  return { rows, cols };
+}
+
+let current: Editor | null = null;
+afterEach(() => {
+  current?.destroy();
+  current = null;
+});
+
+describe('tableMenuActions', () => {
+  it('returns all actions disabled when the selection is not in a table', () => {
+    const editor = (current = makeEditor());
+    editor.commands.setContent('<p>plain paragraph</p>');
+    const actions = tableMenuActions(editor);
+    expect(actions.length).toBe(8);
+    expect(actions.every((a) => a.disabled)).toBe(true);
+  });
+
+  it('enables actions and adds a column when the cursor is inside a table', () => {
+    const editor = (current = makeEditor());
+    editor.chain().focus().insertTable({ rows: 2, cols: 2, withHeaderRow: true }).run();
+    const before = tableShape(editor);
+
+    const addCol = tableMenuActions(editor).find((a) => a.key === 'addColumnAfter')!;
+    expect(addCol.disabled).toBe(false);
+    addCol.run();
+
+    expect(tableShape(editor).cols).toBe(before.cols + 1);
+  });
+
+  it('adds a row', () => {
+    const editor = (current = makeEditor());
+    editor.chain().focus().insertTable({ rows: 2, cols: 2, withHeaderRow: true }).run();
+    const before = tableShape(editor);
+
+    tableMenuActions(editor).find((a) => a.key === 'addRowAfter')!.run();
+
+    expect(tableShape(editor).rows).toBe(before.rows + 1);
+  });
+
+  it('deletes a column', () => {
+    const editor = (current = makeEditor());
+    editor.chain().focus().insertTable({ rows: 2, cols: 3, withHeaderRow: true }).run();
+    const before = tableShape(editor);
+
+    tableMenuActions(editor).find((a) => a.key === 'deleteColumn')!.run();
+
+    expect(tableShape(editor).cols).toBe(before.cols - 1);
+  });
+
+  it('deletes the whole table', () => {
+    const editor = (current = makeEditor());
+    editor.chain().focus().insertTable({ rows: 2, cols: 2, withHeaderRow: true }).run();
+    expect(editor.isActive('table')).toBe(true);
+
+    tableMenuActions(editor).find((a) => a.key === 'deleteTable')!.run();
+
+    expect(editor.isActive('table')).toBe(false);
+  });
+
+  it('uses provided labels for tooltips', () => {
+    const editor = (current = makeEditor());
+    editor.chain().focus().insertTable({ rows: 2, cols: 2, withHeaderRow: true }).run();
+    const actions = tableMenuActions(editor, { tableAddColumnAfter: 'Insertar columna a la derecha' });
+    const addCol = actions.find((a) => a.key === 'addColumnAfter')!;
+    expect(addCol.title).toBe('Insertar columna a la derecha');
+  });
+});

package/src/lib/tableMenuActions.ts

@@ -0,0 +1,99 @@
+/**
+ * Table editing actions exposed by the contextual table toolbar.
+ *
+ * Pure mapping from an editor instance + labels to a flat, ordered list of
+ * buttons. Kept separate from the React component so the command wiring and
+ * `can()` gating can be unit-tested against a headless editor.
+ */
+import type { Editor } from '@tiptap/core';
+import type { ToolbarLabels } from '../components/EditorToolbar';
+import type { EditorIconName } from '../components/EditorIcons';
+
+export interface TableMenuAction {
+  /** Stable key for React lists. */
+  key: string;
+  /** Tooltip / aria-label. */
+  title: string;
+  /** Name of the SVG icon shown on the button. */
+  icon: EditorIconName;
+  /** Runs the command. */
+  run: () => void;
+  /** True when the command can't apply to the current selection. */
+  disabled: boolean;
+  /** When true, render a visual separator before this action. */
+  separatorBefore?: boolean;
+}
+
+/**
+ * Build the ordered list of table actions for the current editor state.
+ * Recomputed on every render so `disabled` reflects the live selection.
+ */
+export function tableMenuActions(
+  editor: Editor,
+  labels?: Partial<ToolbarLabels>,
+): TableMenuAction[] {
+  const L = labels ?? {};
+  const chain = () => editor.chain().focus();
+
+  return [
+    {
+      key: 'addColumnBefore',
+      title: L.tableAddColumnBefore ?? 'Insert column left',
+      icon: 'columnAddBefore',
+      run: () => chain().addColumnBefore().run(),
+      disabled: !editor.can().addColumnBefore(),
+    },
+    {
+      key: 'addColumnAfter',
+      title: L.tableAddColumnAfter ?? 'Insert column right',
+      icon: 'columnAddAfter',
+      run: () => chain().addColumnAfter().run(),
+      disabled: !editor.can().addColumnAfter(),
+    },
+    {
+      key: 'addRowBefore',
+      title: L.tableAddRowBefore ?? 'Insert row above',
+      icon: 'rowAddBefore',
+      run: () => chain().addRowBefore().run(),
+      disabled: !editor.can().addRowBefore(),
+      separatorBefore: true,
+    },
+    {
+      key: 'addRowAfter',
+      title: L.tableAddRowAfter ?? 'Insert row below',
+      icon: 'rowAddAfter',
+      run: () => chain().addRowAfter().run(),
+      disabled: !editor.can().addRowAfter(),
+    },
+    {
+      key: 'deleteColumn',
+      title: L.tableDeleteColumn ?? 'Delete column',
+      icon: 'columnDelete',
+      run: () => chain().deleteColumn().run(),
+      disabled: !editor.can().deleteColumn(),
+      separatorBefore: true,
+    },
+    {
+      key: 'deleteRow',
+      title: L.tableDeleteRow ?? 'Delete row',
+      icon: 'rowDelete',
+      run: () => chain().deleteRow().run(),
+      disabled: !editor.can().deleteRow(),
+    },
+    {
+      key: 'toggleHeaderRow',
+      title: L.tableToggleHeaderRow ?? 'Toggle header row',
+      icon: 'headerRow',
+      run: () => chain().toggleHeaderRow().run(),
+      disabled: !editor.can().toggleHeaderRow(),
+      separatorBefore: true,
+    },
+    {
+      key: 'deleteTable',
+      title: L.tableDelete ?? 'Delete table',
+      icon: 'tableDelete',
+      run: () => chain().deleteTable().run(),
+      disabled: !editor.can().deleteTable(),
+    },
+  ];
+}

package/src/lib/tiptapContentSemantics.ts

@@ -14,7 +14,7 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 }
 
 function asNode(value: unknown): TiptapNode | null {
-  return isRecord(value) && typeof value.type === 'string' ? (value as TiptapNode) : null;
+  return isRecord(value) && typeof value.type === 'string' ? (value as unknown as TiptapNode) : null;
 }
 
 function inlineTextLength(nodes: unknown): number {

package/src/mammoth-browser.d.ts

@@ -0,0 +1,3 @@
+// mammoth ships no types for its browser entrypoint; it's imported dynamically
+// and immediately cast to a narrow shape in docxToHtml.ts.
+declare module 'mammoth/mammoth.browser.js';

package/src/parity/fingerprint.ts

@@ -0,0 +1,75 @@
+/**
+ * Semantic fingerprint of rendered editor HTML, used by the renderer parity
+ * oracle. MUST stay logically identical to the PHP version in
+ * `shared-editor-laravel/tests/Support/Fingerprint.php`.
+ *
+ * Captures content + structure (what must agree between the CSR static renderer
+ * and the server-side `TiptapHtmlRenderer`), deliberately ignoring cosmetic
+ * markup (wrappers, data-* attributes, inline-style formatting).
+ */
+export interface HtmlFingerprint {
+  text: string;
+  headings: number[];
+  links: string[];
+  images: string[];
+  strong: number;
+  em: number;
+  u: number;
+  s: number;
+  code: number;
+  ul: number;
+  ol: number;
+  li: number;
+  pre: number;
+  blockquote: number;
+  hr: number;
+  table: number;
+  tr: number;
+  th: number;
+  td: number;
+  aside: number;
+  checkbox: number;
+}
+
+export function fingerprintHtml(html: string): HtmlFingerprint {
+  const doc = new DOMParser().parseFromString(`<div id="__root">${html}</div>`, 'text/html');
+  const root = doc.getElementById('__root');
+  if (!root) {
+    throw new Error('fingerprintHtml: could not parse HTML');
+  }
+
+  const count = (sel: string): number => root.querySelectorAll(sel).length;
+  const attrs = (sel: string, attr: string): string[] =>
+    Array.from(root.querySelectorAll(sel))
+      .map((el) => el.getAttribute(attr) ?? '')
+      .sort();
+
+  return {
+    // Whitespace removed entirely: inter-element spacing (e.g. the space PHP
+    // emits after a task checkbox, or block concatenation) is cosmetic and must
+    // not break parity — only the sequence of visible characters matters.
+    text: (root.textContent ?? '').replace(/\s+/g, ''),
+    headings: Array.from(root.querySelectorAll('h1,h2,h3,h4,h5,h6')).map((h) =>
+      Number(h.tagName.charAt(1)),
+    ),
+    links: attrs('a[href]', 'href'),
+    images: attrs('img[src]', 'src'),
+    strong: count('strong'),
+    em: count('em'),
+    u: count('u'),
+    s: count('s'),
+    code: count('code'),
+    ul: count('ul'),
+    ol: count('ol'),
+    li: count('li'),
+    pre: count('pre'),
+    blockquote: count('blockquote'),
+    hr: count('hr'),
+    table: count('table'),
+    tr: count('tr'),
+    th: count('th'),
+    td: count('td'),
+    aside: count('aside'),
+    checkbox: count('input[type="checkbox"]'),
+  };
+}

package/src/parity/parity.test.ts

@@ -0,0 +1,51 @@
+/**
+ * Parity oracle (JS side).
+ *
+ * Renders shared TipTap fixtures via the static renderer and computes a
+ * SEMANTIC fingerprint (visible text + structural counts + headings/links/
+ * images). The committed `fingerprints.json` is the parity contract; the PHP
+ * test (`TiptapRendererParityTest`) asserts `TiptapHtmlRenderer` produces the
+ * SAME fingerprint. Cosmetic differences (colgroup, data-*, <mark> vs <span>,
+ * target/rel, inline-style spacing) are intentionally ignored — only content
+ * and structure must agree, since CSR previews and server PDFs can style
+ * differently.
+ *
+ * Regenerate the contract after intentional changes:
+ *   UPDATE_FP=1 pnpm vitest run src/parity/parity.test.ts
+ */
+import { describe, it, expect } from 'vitest';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { renderTiptapJsonToHtml } from '../lib/renderTiptapJson';
+import { fingerprintHtml } from './fingerprint';
+
+const FIXTURES_DIR = resolve(
+  process.cwd(),
+  '../../php/shared-editor-laravel/tests/fixtures/tiptap',
+);
+const fixtures = JSON.parse(
+  readFileSync(resolve(FIXTURES_DIR, 'fixtures.json'), 'utf8'),
+) as Record<string, unknown>;
+const fpPath = resolve(FIXTURES_DIR, 'fingerprints.json');
+
+describe('renderer parity (JS / static-renderer)', () => {
+  if (process.env.UPDATE_FP) {
+    it('regenerates the fingerprint contract', () => {
+      const out: Record<string, unknown> = {};
+      for (const [name, doc] of Object.entries(fixtures)) {
+        out[name] = fingerprintHtml(renderTiptapJsonToHtml(doc));
+      }
+      writeFileSync(fpPath, `${JSON.stringify(out, null, 2)}\n`);
+      expect(Object.keys(out).length).toBe(Object.keys(fixtures).length);
+    });
+    return;
+  }
+
+  const expected = JSON.parse(readFileSync(fpPath, 'utf8')) as Record<string, unknown>;
+
+  for (const [name, doc] of Object.entries(fixtures)) {
+    it(`fixture "${name}" matches the contract`, () => {
+      expect(fingerprintHtml(renderTiptapJsonToHtml(doc))).toEqual(expected[name]);
+    });
+  }
+});

package/src/styles/maya-content.css

@@ -0,0 +1,160 @@
+/**
+ * Read-only content typography for rendered TipTap/ProseMirror HTML.
+ *
+ * The live editor styles its content via `.maya-editor-wrapper .ProseMirror …`
+ * (see maya-editor.css), which only matches inside the editor view. Read-only
+ * previews (`EditorContentHtml` / `EditorContentJson`) render a plain
+ * `.maya-editor-content` container with no `.ProseMirror`, so without these
+ * rules headings, lists, quotes, code and tables collapse to base size —
+ * especially under Tailwind Preflight, which resets `h1`–`h6` to inherit.
+ *
+ * These rules mirror the editor's scale but are scoped to `.maya-editor-content`
+ * (specificity 0,1,1) — strictly lower than the editor's `.maya-editor-wrapper
+ * .ProseMirror h1` (0,2,1) — so the live editor's appearance is unchanged while
+ * every read-only consumer gets matching typography.
+ */
+
+.maya-editor-content {
+  font-size: 15px;
+  line-height: 1.6;
+}
+
+.maya-editor-content p { margin: 0.5em 0; }
+.maya-editor-content p:first-child { margin-top: 0; }
+.maya-editor-content p:last-child { margin-bottom: 0; }
+.maya-editor-content > :first-child { margin-top: 0; }
+.maya-editor-content > :last-child { margin-bottom: 0; }
+
+.maya-editor-content h1 { font-size: 1.7em; font-weight: 700; margin: 0.8em 0 0.3em; line-height: 1.25; }
+.maya-editor-content h2 { font-size: 1.4em; font-weight: 700; margin: 0.8em 0 0.3em; line-height: 1.3; }
+.maya-editor-content h3 { font-size: 1.2em; font-weight: 600; margin: 0.7em 0 0.25em; }
+.maya-editor-content h4 { font-size: 1.05em; font-weight: 600; margin: 0.6em 0 0.2em; }
+.maya-editor-content h5 { font-size: 1em; font-weight: 600; margin: 0.6em 0 0.2em; }
+.maya-editor-content h6 { font-size: 0.9em; font-weight: 600; margin: 0.6em 0 0.2em; text-transform: uppercase; letter-spacing: 0.03em; }
+
+.maya-editor-content ul,
+.maya-editor-content ol {
+  padding-left: 1.4em;
+  margin: 0.5em 0;
+}
+.maya-editor-content ul { list-style: disc; }
+.maya-editor-content ol { list-style: decimal; }
+.maya-editor-content li { margin: 0.2em 0; }
+.maya-editor-content li > p { margin: 0; }
+
+/* Task lists (taskList / taskItem) */
+.maya-editor-content ul[data-type="taskList"] {
+  list-style: none;
+  padding-left: 0.25em;
+}
+.maya-editor-content li[data-type="taskItem"] {
+  display: flex;
+  gap: 6px;
+  align-items: flex-start;
+  list-style: none;
+}
+.maya-editor-content li[data-type="taskItem"] > label { flex-shrink: 0; margin-top: 0.2em; }
+.maya-editor-content li[data-type="taskItem"] > div { flex: 1; }
+
+/* Indent attribute (Indent extension) */
+.maya-editor-content [data-indent="1"] { margin-left: 2em; }
+.maya-editor-content [data-indent="2"] { margin-left: 4em; }
+.maya-editor-content [data-indent="3"] { margin-left: 6em; }
+.maya-editor-content [data-indent="4"] { margin-left: 8em; }
+.maya-editor-content [data-indent="5"] { margin-left: 10em; }
+.maya-editor-content [data-indent="6"] { margin-left: 12em; }
+.maya-editor-content [data-indent="7"] { margin-left: 14em; }
+.maya-editor-content [data-indent="8"] { margin-left: 16em; }
+
+.maya-editor-content blockquote {
+  border-left: 3px solid var(--maya-editor-border, #d6d6df);
+  margin: 0.75em 0;
+  padding-left: 1em;
+  color: rgba(120, 120, 130, 0.95);
+}
+
+.maya-editor-content code {
+  background: rgba(127, 127, 140, 0.18);
+  border-radius: 3px;
+  padding: 0.05em 0.4em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.92em;
+}
+
+.maya-editor-content pre {
+  background: rgba(127, 127, 140, 0.12);
+  border-radius: 6px;
+  padding: 0.8em 1em;
+  margin: 0.75em 0;
+  overflow-x: auto;
+}
+.maya-editor-content pre code {
+  background: transparent;
+  padding: 0;
+  font-size: 0.9em;
+}
+
+.maya-editor-content hr {
+  border: 0;
+  border-top: 1px solid var(--maya-editor-border, #d6d6df);
+  margin: 1.2em 0;
+}
+
+.maya-editor-content a {
+  color: var(--maya-editor-link, #7c3aed);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.maya-editor-content table {
+  border-collapse: collapse;
+  margin: 0.8em 0;
+  width: 100%;
+}
+.maya-editor-content table th,
+.maya-editor-content table td {
+  border: 1px solid var(--maya-editor-border, #d6d6df);
+  padding: 0.5em 0.7em;
+  vertical-align: top;
+}
+.maya-editor-content table th {
+  background: rgba(127, 127, 140, 0.08);
+  text-align: left;
+  font-weight: 600;
+}
+
+.maya-editor-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+.maya-editor-content aside.alert {
+  border-left: 4px solid var(--maya-editor-link, #7c3aed);
+  border-radius: 4px;
+  background: rgba(124, 58, 237, 0.06);
+  padding: 0.75em 1em;
+  margin: 0.75em 0;
+}
+.maya-editor-content aside.alert-warning { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
+.maya-editor-content aside.alert-success { border-left-color: #10b981; background: rgba(16, 185, 129, 0.08); }
+.maya-editor-content aside.alert-danger  { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.08); }
+
+.maya-editor-content iframe {
+  display: block;
+  max-width: 100%;
+  margin: 0.5em 0;
+  border: 1px solid var(--maya-editor-border, #d6d6df);
+  border-radius: 6px;
+}
+
+/* Page break (PDF/export semantics) — show a subtle separator in previews. */
+.maya-editor-content .page-break,
+.maya-editor-content [data-page-break],
+.maya-editor-content hr[data-type="pageBreak"] {
+  border: 0;
+  border-top: 2px dashed var(--maya-editor-border, #c9c9d2);
+  margin: 1.5em 0;
+  page-break-after: always;
+  break-after: page;
+}

package/src/styles/maya-editor.css

@@ -86,6 +86,46 @@
 /* Hidden file inputs reused by the toolbar (image, .docx) */
 .maya-editor-hidden-input { display: none; }
 
+/* ── Word-style ribbon (full mode) ─────────────────────────── */
+.maya-editor-ribbon {
+  gap: 0;
+  align-items: stretch;
+  padding: 4px 6px;
+}
+.maya-editor-ribbon-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 8px;
+  border-right: 1px solid var(--maya-editor-border, #e3e3e8);
+}
+.maya-editor-ribbon-group:last-child {
+  border-right: 0;
+}
+.maya-editor-ribbon-group__row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2px;
+  flex: 1 1 auto;
+}
+.maya-editor-ribbon-group__label {
+  font-size: 10px;
+  line-height: 1;
+  color: var(--maya-editor-muted, #8a8a94);
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* Crisp icons regardless of theme. */
+.maya-editor-toolbar__btn svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
 /* ── Comment hover popover ─────────────────────────────────── */
 .maya-comment-popover {
   position: fixed;