@jackuait/blok 0.10.0-beta.6 → 0.10.0-beta.7

package/src/tools/code/highlight-applier.ts

@@ -0,0 +1,229 @@
+import { DARK_MODE_SELECTOR } from './constants';
+
+export interface HighlightToken {
+  content: string;
+  color: string;
+  /** Character offset from the start of the LINE (not document) */
+  offset: number;
+}
+
+export interface ThemeTokens {
+  tokens: HighlightToken[][];
+  fg: string;
+}
+
+export interface DualThemeTokens {
+  light: ThemeTokens;
+  dark: ThemeTokens;
+}
+
+/** Typed subset of Highlight (Set-like, as per the CSS Custom Highlight API spec) */
+interface HighlightSet extends Highlight {
+  add(range: Range): void;
+  delete(range: Range): boolean;
+  size: number;
+}
+
+/** Typed subset of the CSS Custom Highlight API HighlightRegistry (Map-like) */
+interface HighlightMap {
+  get(name: string): HighlightSet | undefined;
+  set(name: string, highlight: HighlightSet): void;
+  delete(name: string): void;
+  keys(): IterableIterator<string>;
+  size: number;
+}
+
+/** CSS global augmented with the highlights registry (feature-detected at runtime) */
+interface CSSWithHighlights {
+  highlights: HighlightMap;
+}
+
+const state = {
+  stylesheet: null as CSSStyleSheet | null,
+  knownRules: new Set<string>(),
+};
+
+export function isHighlightingSupported(): boolean {
+  return typeof CSS !== 'undefined' && 'highlights' in CSS;
+}
+
+function getHighlights(): HighlightMap {
+  return (CSS as unknown as CSSWithHighlights).highlights;
+}
+
+function ensureStylesheet(): CSSStyleSheet {
+  if (!state.stylesheet) {
+    state.stylesheet = new CSSStyleSheet();
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, state.stylesheet];
+  }
+  return state.stylesheet;
+}
+
+function colorToId(hex: string): string {
+  const clean = hex.replace('#', '').toLowerCase();
+  return clean.length > 6 ? clean.substring(0, 6) : clean;
+}
+
+function ensureRule(stylesheet: CSSStyleSheet, name: string, color: string, scope?: string): void {
+  const key = `${scope ?? ''}::${name}`;
+  if (state.knownRules.has(key)) return;
+
+  const rule = scope
+    ? `${scope} ::highlight(${name}) { color: ${color}; }`
+    : `::highlight(${name}) { color: ${color}; }`;
+
+  stylesheet.insertRule(rule, stylesheet.cssRules.length);
+  state.knownRules.add(key);
+}
+
+function findTextNode(
+  element: HTMLElement,
+  targetOffset: number
+): { node: Node; offset: number } | null {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+
+  const find = (node: Node | null, accumulated: number): { node: Node; offset: number } | null => {
+    if (!node) {
+      if (targetOffset === accumulated && element.lastChild) {
+        return { node: element.lastChild, offset: element.lastChild.textContent?.length ?? 0 };
+      }
+      return null;
+    }
+    const len = node.textContent?.length ?? 0;
+    if (accumulated + len > targetOffset) {
+      return { node, offset: targetOffset - accumulated };
+    }
+    return find(walker.nextNode(), accumulated + len);
+  };
+
+  return find(walker.nextNode(), 0);
+}
+
+function buildLineOffsets(text: string): number[] {
+  return text.split('\n').reduce<{ offsets: number[]; pos: number }>(
+    (acc, line) => ({
+      offsets: [...acc.offsets, acc.pos],
+      pos: acc.pos + line.length + 1,
+    }),
+    { offsets: [], pos: 0 }
+  ).offsets;
+}
+
+function applyToken(
+  element: HTMLElement,
+  text: string,
+  lineBase: number,
+  token: HighlightToken,
+  themeKey: string,
+  scope: string | undefined,
+  priority: number,
+  stylesheet: CSSStyleSheet,
+  ownedRanges: Array<[string, Range]>
+): void {
+  if (!token.content.trim()) return;
+
+  const start = lineBase + token.offset;
+  const end = start + token.content.length;
+  if (end > text.length) return;
+
+  const startPos = findTextNode(element, start);
+  const endPos = findTextNode(element, end);
+  if (!startPos || !endPos) return;
+
+  try {
+    const range = new Range();
+    range.setStart(startPos.node, startPos.offset);
+    range.setEnd(endPos.node, endPos.offset);
+
+    const colorId = colorToId(token.color);
+    const hlName = `blok-${themeKey}-${colorId}`;
+    const highlights = getHighlights();
+
+    ensureRule(stylesheet, hlName, token.color, scope);
+
+    const existing = highlights.get(hlName);
+    const highlight = existing ?? (new Highlight() as unknown as HighlightSet);
+    if (!existing) {
+      highlight.priority = priority;
+      highlights.set(hlName, highlight);
+    }
+
+    highlight.add(range);
+    ownedRanges.push([hlName, range]);
+  } catch {
+    // Skip invalid ranges
+  }
+}
+
+function applyThemeTokens(
+  element: HTMLElement,
+  text: string,
+  lineOffsets: number[],
+  themeData: ThemeTokens,
+  themeKey: string,
+  scope: string | undefined,
+  priority: number,
+  stylesheet: CSSStyleSheet,
+  ownedRanges: Array<[string, Range]>
+): void {
+  for (const [lineIdx, lineTokens] of themeData.tokens.entries()) {
+    const lineBase = lineOffsets[lineIdx];
+    if (lineBase === undefined) continue;
+
+    for (const token of lineTokens) {
+      applyToken(element, text, lineBase, token, themeKey, scope, priority, stylesheet, ownedRanges);
+    }
+  }
+}
+
+export function applyHighlights(element: HTMLElement, themes: DualThemeTokens): () => void {
+  if (!isHighlightingSupported()) return () => {};
+
+  const stylesheet = ensureStylesheet();
+  const ownedRanges: Array<[string, Range]> = [];
+  const text = element.textContent ?? '';
+  const lineOffsets = buildLineOffsets(text);
+
+  const themeEntries: Array<[string, ThemeTokens, string | undefined, number]> = [
+    ['l', themes.light, undefined, 0],
+    ['d', themes.dark, DARK_MODE_SELECTOR, 1],
+  ];
+
+  for (const [themeKey, themeData, scope, priority] of themeEntries) {
+    applyThemeTokens(element, text, lineOffsets, themeData, themeKey, scope, priority, stylesheet, ownedRanges);
+  }
+
+  return () => cleanupRanges(ownedRanges, getHighlights());
+}
+
+function cleanupRanges(ownedRanges: Array<[string, Range]>, highlights: HighlightMap): void {
+  for (const [name, range] of ownedRanges) {
+    const hl = highlights.get(name);
+    if (!hl) continue;
+    hl.delete(range);
+    if (hl.size === 0) {
+      highlights.delete(name);
+    }
+  }
+}
+
+function removeBlokHighlights(highlights: HighlightMap): void {
+  const blokNames = [...highlights.keys()].filter((name) => name.startsWith('blok-'));
+  for (const name of blokNames) {
+    highlights.delete(name);
+  }
+}
+
+export function disposeAllHighlights(): void {
+  if (isHighlightingSupported()) {
+    removeBlokHighlights(getHighlights());
+  }
+
+  if (state.stylesheet) {
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (s) => s !== state.stylesheet
+    );
+    state.stylesheet = null;
+    state.knownRules.clear();
+  }
+}

package/src/tools/code/index.ts

@@ -21,6 +21,7 @@ import {
   CODE_AREA_STYLES,
   COPY_CODE_KEY,
   WRAP_LINES_KEY,
+  LINE_NUMBERS_KEY,
   COPIED_KEY,
   LANGUAGE_KEY,
   COPIED_FEEDBACK_STYLES,
@@ -31,8 +32,12 @@ import {
   TAB_ACTIVE_STYLES,
   TAB_INACTIVE_STYLES,
   PREVIEW_AREA_STYLES,
+  GUTTER_LINE_STYLES,
 } from './constants';
 import { renderLatex } from './katex-loader';
+import { renderMermaid } from './mermaid-loader';
+import { tokenizeCode, isHighlightable } from './shiki-loader';
+import { applyHighlights, isHighlightingSupported } from './highlight-applier';
 
 const COPIED_FEEDBACK_DURATION = 1500;
 
@@ -42,9 +47,12 @@ export class CodeTool implements BlockTool {
   private _data: CodeData;
   private _dom: CodeDOMRefs | null = null;
   private _wrapping = true;
+  private _lineNumbers = true;
   private _picker: LanguagePicker | null = null;
   private _previewActive = false;
   private _previewContainer: HTMLElement | null = null;
+  private _disposeHighlights: (() => void) | null = null;
+  private _highlightRafId: number | null = null;
 
   constructor({ data, api, readOnly }: BlockToolConstructorOptions<CodeData>) {
     this.api = api;
@@ -52,7 +60,9 @@ export class CodeTool implements BlockTool {
     this._data = {
       code: data?.code ?? '',
       language: data?.language ?? DEFAULT_LANGUAGE,
+      lineNumbers: data?.lineNumbers,
     };
+    this._lineNumbers = data?.lineNumbers ?? true;
   }
 
   public render(): HTMLElement {
@@ -64,6 +74,7 @@ export class CodeTool implements BlockTool {
       readOnly: this.readOnly,
       copyLabel: this.api.i18n.t(COPY_CODE_KEY),
       wrapLabel: this.api.i18n.t(WRAP_LINES_KEY),
+      lineNumbersLabel: this.api.i18n.t(LINE_NUMBERS_KEY),
       previewable: this.readOnly ? false : isPreviewable,
       codeTabLabel: this.api.i18n.t(CODE_TAB_KEY),
       previewTabLabel: this.api.i18n.t(PREVIEW_TAB_KEY),
@@ -71,6 +82,10 @@ export class CodeTool implements BlockTool {
 
     this._dom = dom;
 
+    // Line numbers gutter visibility
+    dom.gutterElement.hidden = !this._lineNumbers;
+    dom.lineNumbersButton.addEventListener('click', () => this.toggleLineNumbers());
+
     // Read-only + previewable: show preview only, hide code, no tabs
     if (this.readOnly && isPreviewable) {
       const previewEl = document.createElement('div');
@@ -79,6 +94,7 @@ export class CodeTool implements BlockTool {
       previewEl.setAttribute('data-blok-testid', 'code-preview');
       dom.wrapper.appendChild(previewEl);
       dom.preElement.hidden = true;
+      dom.gutterElement.hidden = true;
       this._previewContainer = previewEl;
       void this.renderPreview();
     }
@@ -87,6 +103,7 @@ export class CodeTool implements BlockTool {
     if (!this.readOnly && isPreviewable && dom.codeTab && dom.previewTab && dom.previewElement) {
       this._previewActive = true;
       dom.preElement.hidden = true;
+      dom.gutterElement.hidden = true;
       dom.previewElement.hidden = false;
       this._previewContainer = dom.previewElement;
       void this.renderPreview();
@@ -101,8 +118,17 @@ export class CodeTool implements BlockTool {
 
         if (handled) {
           event.preventDefault();
+          this.syncTrailingBr();
+          this.updateGutter();
+          this.scheduleHighlight();
         }
       });
+
+      dom.codeElement.addEventListener('input', () => {
+        this.syncTrailingBr();
+        this.updateGutter();
+        this.scheduleHighlight();
+      });
     }
 
     dom.copyButton.addEventListener('click', () => this.copyCode());
@@ -126,6 +152,10 @@ export class CodeTool implements BlockTool {
     return dom.wrapper;
   }
 
+  public rendered(): void {
+    void this.highlightCode();
+  }
+
   private showCode(): void {
     if (!this._dom?.previewElement || !this._dom.codeTab || !this._dom.previewTab) {
       return;
@@ -133,6 +163,7 @@ export class CodeTool implements BlockTool {
 
     this._previewActive = false;
     this._dom.preElement.hidden = false;
+    this._dom.gutterElement.hidden = !this._lineNumbers;
     this._dom.previewElement.hidden = true;
     this._dom.codeTab.className = `${TAB_STYLES} ${TAB_ACTIVE_STYLES}`;
     this._dom.previewTab.className = `${TAB_STYLES} ${TAB_INACTIVE_STYLES}`;
@@ -145,6 +176,7 @@ export class CodeTool implements BlockTool {
 
     this._previewActive = true;
     this._dom.preElement.hidden = true;
+    this._dom.gutterElement.hidden = true;
     this._dom.previewElement.hidden = false;
     this._dom.codeTab.className = `${TAB_STYLES} ${TAB_INACTIVE_STYLES}`;
     this._dom.previewTab.className = `${TAB_STYLES} ${TAB_ACTIVE_STYLES}`;
@@ -159,7 +191,9 @@ export class CodeTool implements BlockTool {
     }
 
     const code = this._dom?.codeElement.textContent ?? this._data.code;
-    const rendered = await renderLatex(code);
+    const rendered = this._data.language === 'mermaid'
+      ? await renderMermaid(code)
+      : await renderLatex(code);
 
     this._previewContainer.innerHTML = rendered;
   }
@@ -168,6 +202,7 @@ export class CodeTool implements BlockTool {
     return {
       code: this._dom?.codeElement.textContent ?? '',
       language: this._data.language,
+      lineNumbers: this._lineNumbers,
     };
   }
 
@@ -181,6 +216,8 @@ export class CodeTool implements BlockTool {
     if (this._dom) {
       this._dom.codeElement.textContent = this._data.code;
     }
+
+    void this.highlightCode();
   }
 
   public renderSettings(): MenuConfig {
@@ -220,6 +257,8 @@ export class CodeTool implements BlockTool {
     if (this._dom) {
       this._dom.codeElement.textContent = this._data.code;
     }
+
+    void this.highlightCode();
   }
 
   private setLanguage(id: string): void {
@@ -230,6 +269,7 @@ export class CodeTool implements BlockTool {
     }
 
     this._picker?.setActiveLanguage(id);
+    void this.highlightCode();
   }
 
   private getLanguageName(id: string): string {
@@ -271,6 +311,98 @@ export class CodeTool implements BlockTool {
     }
   }
 
+  private toggleLineNumbers(): void {
+    this._lineNumbers = !this._lineNumbers;
+
+    if (this._dom) {
+      this._dom.gutterElement.hidden = !this._lineNumbers;
+    }
+  }
+
+  private updateGutter(): void {
+    if (!this._dom) {
+      return;
+    }
+
+    const code = this._dom.codeElement.textContent ?? '';
+    const lineCount = code ? code.split('\n').length : 1;
+    const gutter = this._dom.gutterElement;
+    const currentCount = gutter.children.length;
+
+    if (currentCount === lineCount) {
+      return;
+    }
+
+    // Rebuild gutter lines
+    gutter.innerHTML = '';
+    Array.from({ length: lineCount }, (_, idx) => {
+      const lineEl = document.createElement('div');
+      lineEl.className = GUTTER_LINE_STYLES;
+      lineEl.textContent = String(idx + 1);
+      gutter.appendChild(lineEl);
+    });
+  }
+
+  /**
+   * Ensure a trailing <br> exists when the text content ends with '\n'.
+   * Browsers collapse a trailing newline in contenteditable — no visible
+   * empty line is rendered, so the caret has nowhere to go.  A sentinel
+   * <br> forces the browser to create the line box.  It is invisible to
+   * textContent, so save() and updateGutter() need no changes.
+   */
+  private syncTrailingBr(): void {
+    if (!this._dom) {
+      return;
+    }
+
+    const code = this._dom.codeElement;
+    const text = code.textContent ?? '';
+    const hasBr = code.lastChild instanceof HTMLBRElement;
+
+    if (text.endsWith('\n') && !hasBr) {
+      code.appendChild(document.createElement('br'));
+    } else if (!text.endsWith('\n') && hasBr) {
+      code.lastChild.remove();
+    }
+  }
+
+  private scheduleHighlight(): void {
+    if (this._highlightRafId !== null) {
+      return;
+    }
+
+    this._highlightRafId = requestAnimationFrame(() => {
+      this._highlightRafId = null;
+      void this.highlightCode();
+    });
+  }
+
+  private async highlightCode(): Promise<void> {
+    if (!isHighlightingSupported() || !isHighlightable(this._data.language)) {
+      this._disposeHighlights?.();
+      this._disposeHighlights = null;
+      return;
+    }
+
+    const code = this._dom?.codeElement.textContent ?? '';
+
+    if (!code.trim()) {
+      this._disposeHighlights?.();
+      this._disposeHighlights = null;
+      return;
+    }
+
+    const tokens = await tokenizeCode(code, this._data.language);
+
+    if (!tokens || !this._dom) {
+      return;
+    }
+
+    // Clean up previous highlights before applying new ones
+    this._disposeHighlights?.();
+    this._disposeHighlights = applyHighlights(this._dom.codeElement, tokens);
+  }
+
   private exitBlock(): void {
     const currentIndex = this.api.blocks.getCurrentBlockIndex();
 
@@ -278,6 +410,14 @@ export class CodeTool implements BlockTool {
   }
 
   public removed(): void {
+    this._disposeHighlights?.();
+    this._disposeHighlights = null;
+
+    if (this._highlightRafId !== null) {
+      cancelAnimationFrame(this._highlightRafId);
+      this._highlightRafId = null;
+    }
+
     if (this._picker) {
       this._picker.getElement().remove();
       this._picker = null;

package/src/tools/code/mermaid-loader.ts

@@ -0,0 +1,45 @@
+import type mermaidType from 'mermaid';
+
+const state = {
+  mermaidPromise: null as Promise<typeof mermaidType> | null,
+  initialized: false,
+};
+
+async function loadMermaid(): Promise<typeof mermaidType> {
+  if (!state.mermaidPromise) {
+    state.mermaidPromise = import('mermaid').then((mod) => mod.default);
+  }
+
+  const mermaid = await state.mermaidPromise;
+
+  if (!state.initialized) {
+    state.initialized = true;
+    mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
+  }
+
+  return mermaid;
+}
+
+/**
+ * Render a Mermaid diagram string to SVG. Lazy-loads Mermaid on first call.
+ */
+export async function renderMermaid(code: string): Promise<string> {
+  try {
+    const mermaid = await loadMermaid();
+
+    const parseResult = await mermaid.parse(code, { suppressErrors: true });
+
+    if (parseResult === false) {
+      return '<span class="text-red-500 text-sm">Invalid Mermaid syntax</span>';
+    }
+
+    const id = `mermaid-${crypto.randomUUID()}`;
+    const result = await mermaid.render(id, code);
+
+    return result.svg;
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+
+    return `<span class="text-red-500 text-sm">${message}</span>`;
+  }
+}

package/src/tools/code/shiki-loader.ts

@@ -0,0 +1,135 @@
+import type { HighlightToken, DualThemeTokens, ThemeTokens } from './highlight-applier';
+import { HIGHLIGHTABLE_LANGUAGES, SHIKI_LIGHT_THEME, SHIKI_DARK_THEME } from './constants';
+
+const LANG_IMPORTS: Record<string, () => Promise<unknown>> = {
+  javascript: () => import('@shikijs/langs/javascript'),
+  typescript: () => import('@shikijs/langs/typescript'),
+  python: () => import('@shikijs/langs/python'),
+  java: () => import('@shikijs/langs/java'),
+  c: () => import('@shikijs/langs/c'),
+  cpp: () => import('@shikijs/langs/cpp'),
+  csharp: () => import('@shikijs/langs/csharp'),
+  go: () => import('@shikijs/langs/go'),
+  rust: () => import('@shikijs/langs/rust'),
+  ruby: () => import('@shikijs/langs/ruby'),
+  php: () => import('@shikijs/langs/php'),
+  swift: () => import('@shikijs/langs/swift'),
+  kotlin: () => import('@shikijs/langs/kotlin'),
+  sql: () => import('@shikijs/langs/sql'),
+  html: () => import('@shikijs/langs/html'),
+  css: () => import('@shikijs/langs/css'),
+  json: () => import('@shikijs/langs/json'),
+  yaml: () => import('@shikijs/langs/yaml'),
+  markdown: () => import('@shikijs/langs/markdown'),
+  bash: () => import('@shikijs/langs/shellscript'),
+  shell: () => import('@shikijs/langs/shellscript'),
+  dockerfile: () => import('@shikijs/langs/dockerfile'),
+  xml: () => import('@shikijs/langs/xml'),
+  graphql: () => import('@shikijs/langs/graphql'),
+  r: () => import('@shikijs/langs/r'),
+  scala: () => import('@shikijs/langs/scala'),
+  dart: () => import('@shikijs/langs/dart'),
+  lua: () => import('@shikijs/langs/lua'),
+  latex: () => import('@shikijs/langs/latex'),
+  mermaid: () => import('@shikijs/langs/mermaid'),
+};
+
+interface ShikiTokenResult {
+  tokens: Array<Array<{ content: string; color?: string; offset: number }>>;
+  fg: string;
+}
+
+interface ShikiHighlighter {
+  getLoadedLanguages(): string[];
+  loadLanguage(lang: unknown): Promise<void>;
+  codeToTokens(code: string, options: { lang: string; theme: string }): ShikiTokenResult;
+  dispose(): void;
+}
+
+const state = {
+  highlighterPromise: null as Promise<ShikiHighlighter> | null,
+  highlighter: null as ShikiHighlighter | null,
+};
+
+export function isHighlightable(lang: string): boolean {
+  return HIGHLIGHTABLE_LANGUAGES.has(lang);
+}
+
+async function ensureHighlighter(): Promise<ShikiHighlighter> {
+  if (!state.highlighterPromise) {
+    state.highlighterPromise = (async (): Promise<ShikiHighlighter> => {
+      const { createHighlighterCore } = await import('shiki/core');
+      const { createJavaScriptRegexEngine } = await import('shiki/engine/javascript');
+
+      const hl: ShikiHighlighter = await createHighlighterCore({
+        themes: [
+          import('@shikijs/themes/one-light'),
+          import('@shikijs/themes/vitesse-dark'),
+        ],
+        langs: [],
+        engine: createJavaScriptRegexEngine(),
+      }) as ShikiHighlighter;
+      state.highlighter = hl;
+      return hl;
+    })();
+  }
+  return state.highlighterPromise;
+}
+
+async function ensureLanguage(highlighter: ShikiHighlighter, lang: string): Promise<void> {
+  const loaded: string[] = highlighter.getLoadedLanguages();
+  if (loaded.includes(lang)) return;
+
+  const importer = LANG_IMPORTS[lang];
+  if (!importer) return;
+
+  await highlighter.loadLanguage(await importer());
+}
+
+function mapTokens(result: ShikiTokenResult): ThemeTokens {
+  return {
+    tokens: result.tokens.map((line) =>
+      line.map((token): HighlightToken => ({
+        content: token.content,
+        color: token.color ?? result.fg,
+        offset: token.offset,
+      }))
+    ),
+    fg: result.fg,
+  };
+}
+
+export async function tokenizeCode(code: string, lang: string): Promise<DualThemeTokens | null> {
+  if (!isHighlightable(lang)) return null;
+
+  try {
+    const highlighter = await ensureHighlighter();
+    await ensureLanguage(highlighter, lang);
+
+    const lightResult: ShikiTokenResult = highlighter.codeToTokens(code, {
+      lang,
+      theme: SHIKI_LIGHT_THEME,
+    });
+    const darkResult: ShikiTokenResult = highlighter.codeToTokens(code, {
+      lang,
+      theme: SHIKI_DARK_THEME,
+    });
+
+    return {
+      light: mapTokens(lightResult),
+      dark: mapTokens(darkResult),
+    };
+  } catch {
+    state.highlighterPromise = null;
+    state.highlighter = null;
+    return null;
+  }
+}
+
+export function disposeHighlighter(): void {
+  if (state.highlighter) {
+    state.highlighter.dispose();
+    state.highlighter = null;
+  }
+  state.highlighterPromise = null;
+}

package/src/tools/table/core/table-commands.ts

@@ -77,6 +77,20 @@ export interface SetColWidthsCommand {
   readonly widths: readonly number[] | undefined;
 }
 
+export interface MergeCellsCommand {
+  readonly type: 'merge-cells';
+  readonly minRow: number;
+  readonly maxRow: number;
+  readonly minCol: number;
+  readonly maxCol: number;
+}
+
+export interface SplitCellCommand {
+  readonly type: 'split-cell';
+  readonly row: number;
+  readonly col: number;
+}
+
 export interface ReplaceAllCommand {
   readonly type: 'replace-all';
   readonly data: TableData;
@@ -96,4 +110,6 @@ export type TableCommand =
   | RemoveBlockFromCellCommand
   | SetCellBlocksCommand
   | SetColWidthsCommand
+  | MergeCellsCommand
+  | SplitCellCommand
   | ReplaceAllCommand;