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

package/src/components/EditorToolbarGroups.tsx

@@ -2,10 +2,13 @@
  * EditorToolbar button groups extracted into focused subcomponents.
  * Each group handles a logically distinct set of formatting or block operations.
  */
+import { Fragment } from 'react';
 import type { Editor } from '@tiptap/react';
 import type { ToolbarLabels } from './EditorToolbar';
 import { ColorPicker } from './ColorPicker';
 import { Btn } from './EditorToolbarButton';
+import { EditorIcon } from './EditorIcons';
+import { tableMenuActions } from '../lib/tableMenuActions';
 
 export interface ToolbarGroupProps {
   editor: Editor;
@@ -35,31 +38,31 @@ export function FormattingButtons({ editor, labels: L }: ToolbarGroupProps) {
         onClick={() => editor.chain().focus().toggleBold().run()}
         title={L.bold}
       >
-        <strong>B</strong>
+        <EditorIcon name="bold" />
       </Btn>
       <Btn
         active={editor.isActive('italic')}
         onClick={() => editor.chain().focus().toggleItalic().run()}
         title={L.italic}
       >
-        <em>I</em>
+        <EditorIcon name="italic" />
       </Btn>
       <Btn
         active={editor.isActive('underline')}
         onClick={() => editor.chain().focus().toggleUnderline().run()}
         title={L.underline}
       >
-        <u>U</u>
+        <EditorIcon name="underline" />
       </Btn>
       <Btn
         active={editor.isActive('code')}
         onClick={() => editor.chain().focus().toggleCode().run()}
         title={L.code}
       >
-        {'</>'}
+        <EditorIcon name="code" />
       </Btn>
       <Btn active={editor.isActive('link')} onClick={setLink} title={L.link}>
-        🔗
+        <EditorIcon name="link" />
       </Btn>
     </>
   );
@@ -76,13 +79,13 @@ export function AdvancedFormattingButtons({ editor, labels: L }: ToolbarGroupPro
         onClick={() => editor.chain().focus().toggleStrike().run()}
         title={L.strike}
       >
-        <s>S</s>
+        <EditorIcon name="strike" />
       </Btn>
 
       <ColorPicker
         title={L.textColor}
         value={(editor.getAttributes('textStyle').color as string | undefined) ?? null}
-        glyph={<span style={{ fontWeight: 700 }}>A</span>}
+        glyph={<EditorIcon name="textColor" />}
         clearLabel={L.colorDefault}
         onSelect={(c) => {
           if (c === null) editor.chain().focus().unsetColor().run();
@@ -92,7 +95,7 @@ export function AdvancedFormattingButtons({ editor, labels: L }: ToolbarGroupPro
       <ColorPicker
         title={L.backgroundColor}
         value={(editor.getAttributes('highlight').color as string | undefined) ?? null}
-        glyph={<span style={{ fontWeight: 700 }}>▮</span>}
+        glyph={<EditorIcon name="highlight" />}
         clearLabel={L.colorDefault}
         onSelect={(c) => {
           if (c === null) editor.chain().focus().unsetHighlight().run();
@@ -114,28 +117,28 @@ export function AlignmentButtons({ editor, labels: L }: ToolbarGroupProps) {
         onClick={() => editor.chain().focus().setTextAlign('left').run()}
         title={L.alignLeft}
       >
-        ⬱
+        <EditorIcon name="alignLeft" />
       </Btn>
       <Btn
         active={editor.isActive({ textAlign: 'center' })}
         onClick={() => editor.chain().focus().setTextAlign('center').run()}
         title={L.alignCenter}
       >
-        ☱
+        <EditorIcon name="alignCenter" />
       </Btn>
       <Btn
         active={editor.isActive({ textAlign: 'right' })}
         onClick={() => editor.chain().focus().setTextAlign('right').run()}
         title={L.alignRight}
       >
-        ⬲
+        <EditorIcon name="alignRight" />
       </Btn>
       <Btn
         active={editor.isActive({ textAlign: 'justify' })}
         onClick={() => editor.chain().focus().setTextAlign('justify').run()}
         title={L.alignJustify}
       >
-        ☰
+        <EditorIcon name="alignJustify" />
       </Btn>
     </>
   );
@@ -159,7 +162,7 @@ export function IndentButtons({ editor, labels: L }: ToolbarGroupProps) {
         }}
         title={L.indent}
       >
-        ⇥
+        <EditorIcon name="indent" />
       </Btn>
       <Btn
         onClick={() => {
@@ -173,7 +176,7 @@ export function IndentButtons({ editor, labels: L }: ToolbarGroupProps) {
         }}
         title={L.outdent}
       >
-        ⇤
+        <EditorIcon name="outdent" />
       </Btn>
     </>
   );
@@ -221,41 +224,41 @@ export function ListAndBlockButtons({ editor, labels: L }: ToolbarGroupProps) {
         onClick={() => editor.chain().focus().toggleBulletList().run()}
         title={L.bulletList}
       >
-        • —
+        <EditorIcon name="bulletList" />
       </Btn>
       <Btn
         active={editor.isActive('orderedList')}
         onClick={() => editor.chain().focus().toggleOrderedList().run()}
         title={L.orderedList}
       >
-        1.
+        <EditorIcon name="orderedList" />
       </Btn>
       <Btn
         active={editor.isActive('taskList')}
         onClick={() => editor.chain().focus().toggleTaskList().run()}
         title={L.taskList}
       >
-        ☑
+        <EditorIcon name="taskList" />
       </Btn>
       <Btn
         active={editor.isActive('blockquote')}
         onClick={() => editor.chain().focus().toggleBlockquote().run()}
         title={L.blockquote}
       >
-        ❝
+        <EditorIcon name="blockquote" />
       </Btn>
       <Btn
         active={editor.isActive('codeBlock')}
         onClick={() => editor.chain().focus().toggleCodeBlock().run()}
         title={L.codeBlock}
       >
-        {'{}'}
+        <EditorIcon name="codeBlock" />
       </Btn>
       <Btn
         onClick={() => editor.chain().focus().setHorizontalRule().run()}
         title={L.horizontalRule}
       >
-        —
+        <EditorIcon name="horizontalRule" />
       </Btn>
     </>
   );
@@ -287,20 +290,41 @@ export function TableAndMediaButtons({
         }
         title={L.table}
       >
-        ⊞
+        <EditorIcon name="table" />
       </Btn>
       <Btn onClick={setIframe} title={L.iframe}>
-        🖽
+        <EditorIcon name="iframe" />
       </Btn>
       {onImage && (
         <Btn onClick={onImage} title={L.uploadImage}>
-          🖼
+          <EditorIcon name="image" />
         </Btn>
       )}
     </>
   );
 }
 
+/**
+ * Contextual table-editing buttons: add/delete rows & columns, toggle header,
+ * delete table. Rendered in the main toolbar only while the selection is inside
+ * a table (the caller gates on `editor.isActive('table')`), so it appears and
+ * hides in place instead of floating over the content.
+ */
+export function TableButtons({ editor, labels: L }: ToolbarGroupProps) {
+  return (
+    <>
+      {tableMenuActions(editor, L).map((a) => (
+        <Fragment key={a.key}>
+          {a.separatorBefore && <span className="maya-editor-toolbar__sep" aria-hidden />}
+          <Btn onClick={a.run} title={a.title} disabled={a.disabled}>
+            <EditorIcon name={a.icon} />
+          </Btn>
+        </Fragment>
+      ))}
+    </>
+  );
+}
+
 /**
  * Import/export and document buttons: Word import/export, comments, find.
  */
@@ -323,12 +347,12 @@ export function DocumentButtons({
     <>
       {onImportDocx && (
         <Btn onClick={onImportDocx} title={L.importDocx}>
-          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11 }}>↥W</span>
+          <EditorIcon name="importDocx" />
         </Btn>
       )}
       {onExportDocx && (
         <Btn onClick={onExportDocx} title={L.exportDocx}>
-          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11 }}>↧W</span>
+          <EditorIcon name="exportDocx" />
         </Btn>
       )}
       {onAddComment && (
@@ -337,12 +361,12 @@ export function DocumentButtons({
           disabled={editor.state.selection.empty}
           title={L.addComment}
         >
-          💬
+          <EditorIcon name="comment" />
         </Btn>
       )}
       {onToggleFind && (
         <Btn onClick={onToggleFind} title={L.find}>
-          🔍
+          <EditorIcon name="find" />
         </Btn>
       )}
     </>
@@ -385,7 +409,7 @@ export function ViewModeButtons({
           title={L.insertHtml}
           active={viewMode === 'html'}
         >
-          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11 }}>{'<>'}</span>
+          <EditorIcon name="htmlSource" />
         </Btn>
       )}
       <span className="maya-editor-toolbar__sep" aria-hidden />
@@ -394,7 +418,7 @@ export function ViewModeButtons({
             onClick={onToggleFullscreen}
             title={isFullscreen ? L.exitFullscreen : L.fullscreen}
           >
-            {isFullscreen ? '🗗' : '🗖'}
+            <EditorIcon name={isFullscreen ? 'exitFullscreen' : 'fullscreen'} />
           </Btn>
       )}
     </>

package/src/components/MayaEditor.tsx

@@ -326,6 +326,18 @@ export function MayaEditor({
     onFullscreenChange(isFullscreen);
   }, [isFullscreen, onFullscreenChange]);
 
+  // Mirror fullscreen to a global `editor-fullscreen` class on <html> so the
+  // host AppLayout can hide its fixed sidebar and drop the content margin while
+  // the editor covers the viewport. Self-contained: works even when the host
+  // doesn't handle `onFullscreenChange` (e.g. the inline editors in the
+  // continuous document view) — otherwise the fixed editor sits *under* the
+  // still-visible sidebar and the left half is hidden.
+  useEffect(() => {
+    const root = document.documentElement;
+    root.classList.toggle('editor-fullscreen', isFullscreen);
+    return () => root.classList.remove('editor-fullscreen');
+  }, [isFullscreen]);
+
   if (!editor) return null;
 
   const editorReady = viewReady && isEditorReady(editor);

package/src/index.ts

@@ -2,8 +2,10 @@ export { MayaEditor } from './components/MayaEditor';
 export type { MayaEditorProps } from './components/MayaEditor';
 export { EditorContentHtml } from './components/EditorContentHtml';
 export { EditorContentJson } from './components/EditorContentJson';
-export { EditorToolbar } from './components/EditorToolbar';
+export { EditorToolbar, DEFAULT_LABELS } from './components/EditorToolbar';
 export type { ToolbarLabels } from './components/EditorToolbar';
+export { buildToolbarLabels } from './lib/buildToolbarLabels';
+export type { TranslateFn } from './lib/buildToolbarLabels';
 
 export { IframeBlock } from './extensions/IframeBlock';
 export { AlertBlock } from './extensions/AlertBlock';
@@ -52,6 +54,3 @@ export type {
   TiptapDoc,
   AnchoredComment,
 } from './types';
-
-export { default as esTranslations } from './i18n/es.json';
-export { default as enTranslations } from './i18n/en.json';

package/src/lib/buildToolbarLabels.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest';
+import { buildToolbarLabels } from './buildToolbarLabels';
+import { DEFAULT_LABELS } from '../components/EditorToolbar';
+
+describe('buildToolbarLabels', () => {
+  it('maps every label key through t("editor.<key>")', () => {
+    const dict: Record<string, string> = {
+      'editor.bold': 'Negrita',
+      'editor.italic': 'Cursiva',
+      'editor.groupFont': 'Fuente',
+      'editor.tableAddColumnAfter': 'Insertar columna a la derecha',
+    };
+    const t = (k: string) => dict[k] ?? k;
+
+    const labels = buildToolbarLabels(t);
+    expect(labels.bold).toBe('Negrita');
+    expect(labels.italic).toBe('Cursiva');
+    expect(labels.groupFont).toBe('Fuente');
+    expect(labels.tableAddColumnAfter).toBe('Insertar columna a la derecha');
+  });
+
+  it('falls back to the English default when a key is missing (t returns the key)', () => {
+    const t = (k: string) => k; // i18next miss behaviour: returns the key
+    const labels = buildToolbarLabels(t);
+    expect(labels.bold).toBe(DEFAULT_LABELS.bold);
+    expect(labels.groupParagraph).toBe(DEFAULT_LABELS.groupParagraph);
+    // never leaks a raw "editor.*" key
+    expect(labels.bold).not.toContain('editor.');
+  });
+
+  it('honours a custom prefix', () => {
+    const t = (k: string) => (k === 'tt.bold' ? 'B!' : k);
+    const labels = buildToolbarLabels(t, 'tt');
+    expect(labels.bold).toBe('B!');
+  });
+
+  it('returns a fully-populated object (all default keys present)', () => {
+    const labels = buildToolbarLabels((k) => k);
+    for (const key of Object.keys(DEFAULT_LABELS)) {
+      expect(labels[key as keyof typeof labels]).toBeTruthy();
+    }
+  });
+});

package/src/lib/buildToolbarLabels.ts

@@ -0,0 +1,38 @@
+/**
+ * Build a fully-populated {@link ToolbarLabels} from a translation function.
+ *
+ * The editor itself is i18n-agnostic (it just takes a `toolbarLabels` prop), so
+ * each consumer wires its own i18n. This helper keeps that wiring to one line:
+ * pass the app's `t` (bound to the namespace that holds the shared `editor`
+ * canon — usually `common`) and it maps every label key to `t('editor.<key>')`.
+ *
+ *   const { t } = useTranslation('common');
+ *   <MayaEditor toolbarLabels={buildToolbarLabels(t)} … />
+ *
+ * Any key missing from the active locale falls back to the English default
+ * (i18next returns the key unchanged for a miss, which we detect and replace),
+ * so a partially-translated locale never shows raw `editor.*` keys.
+ */
+import { DEFAULT_LABELS } from '../components/EditorToolbar';
+import type { ToolbarLabels } from '../components/EditorToolbar';
+
+/** Minimal shape of an i18next `t` — only the (key) → string call is used. */
+export type TranslateFn = (key: string) => string;
+
+export function buildToolbarLabels(
+  t: TranslateFn,
+  prefix = 'editor',
+): ToolbarLabels {
+  const out: ToolbarLabels = { ...DEFAULT_LABELS };
+
+  (Object.keys(DEFAULT_LABELS) as (keyof ToolbarLabels)[]).forEach((key) => {
+    const fullKey = `${prefix}.${key}`;
+    const value = t(fullKey);
+    // i18next returns the key itself on a miss → keep the English default.
+    if (value && value !== fullKey) {
+      out[key] = value;
+    }
+  });
+
+  return out;
+}

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(),
+    },
+  ];
+}