@jackuait/blok 0.10.0-beta.8 → 0.10.0

package/dist/full.mjs

@@ -1,7 +1,7 @@
-import { n as e, t } from "./chunks/blok-CRvF-xVm.mjs";
-import { $n as n } from "./chunks/constants-BOZ5plBi.mjs";
+import { n as e, t } from "./chunks/blok-BfcBwAfE.mjs";
+import { tr as n } from "./chunks/constants-QNVyXALL.mjs";
 import { t as r } from "./chunks/objectSpread2-CWwMYL_U.mjs";
-import { _ as i, a, c as o, g as s, i as c, l, m as u, n as d, o as f, s as p, t as m, v as h } from "./chunks/tools-CnqCfv2L.mjs";
+import { _ as i, a, c as o, g as s, i as c, l, m as u, n as d, o as f, s as p, t as m, v as h } from "./chunks/tools-DHtzbrxy.mjs";
 //#region src/full.ts
 var g = {
 	paragraph: {

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import { t as e } from "./chunks/blok-CRvF-xVm.mjs";
-import "./chunks/constants-BOZ5plBi.mjs";
+import { t as e } from "./chunks/blok-BfcBwAfE.mjs";
+import "./chunks/constants-QNVyXALL.mjs";
 import { t } from "./chunks/objectSpread2-CWwMYL_U.mjs";
 import { t as n } from "./chunks/objectWithoutProperties-D0XxKB4n.mjs";
 import { forwardRef as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";

package/dist/tools.mjs

@@ -1,3 +1,3 @@
-import { m as e } from "./chunks/constants-BOZ5plBi.mjs";
-import { _ as t, a as n, c as r, d as i, f as a, g as o, h as s, i as c, l, m as u, n as d, o as f, p, r as m, s as h, t as g, u as _, v } from "./chunks/tools-CnqCfv2L.mjs";
+import { m as e } from "./chunks/constants-QNVyXALL.mjs";
+import { _ as t, a as n, c as r, d as i, f as a, g as o, h as s, i as c, l, m as u, n as d, o as f, p, r as m, s as h, t as g, u as _, v } from "./chunks/tools-DHtzbrxy.mjs";
 export { l as Bold, p as Callout, _ as Code, e as Convert, a as Divider, t as Header, m as InlineCode, r as Italic, h as Link, o as List, f as Marker, v as Paragraph, i as Quote, c as Strikethrough, s as Table, u as Toggle, n as Underline, g as defaultBlockTools, d as defaultInlineTools };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.10.0-beta.8",
+  "version": "0.10.0",
   "description": "Blok — headless, highly extensible rich text editor built for developers who need to implement a block-based editing experience (similar to Notion) without building it from scratch",
   "module": "dist/blok.mjs",
   "types": "./types/index.d.ts",
@@ -50,15 +50,13 @@
     }
   },
   "bin": {
-    "blok": "./bin/blok.mjs",
     "migrate-from-editorjs": "./codemod/migrate-editorjs-to-blok.js"
   },
   "files": [
     "dist",
     "types",
     "src",
-    "codemod",
-    "bin"
+    "codemod"
   ],
   "publishConfig": {
     "access": "public"
@@ -83,7 +81,7 @@
   "scripts": {
     "serve": "vite --no-open",
     "serve:docs": "cd docs && vite --port 8080",
-    "build": "vite build --mode production && node scripts/build-locales.mjs && node scripts/build-cli.mjs",
+    "build": "vite build --mode production && node scripts/build-locales.mjs",
     "build:cli": "node scripts/build-cli.mjs",
     "build:test": "vite build --mode test && node scripts/build-locales.mjs test && node scripts/build-react-vendor.mjs",
     "lint": "sh -c 'eslint .; ESLINT_EXIT=$?; tsc --noEmit; TSC_EXIT=$?; if [ $ESLINT_EXIT -ne 0 ] || [ $TSC_EXIT -ne 0 ]; then exit 1; fi'",

package/src/cli/commands/convert-gdocs/index.ts

@@ -0,0 +1,26 @@
+import { preprocessGoogleDocsHtml } from '../../../components/modules/paste/google-docs-preprocessor';
+import { preprocess } from '../convert-html/preprocessor';
+import { sanitize } from '../convert-html/sanitizer';
+import { buildBlocks } from '../convert-html/block-builder';
+import type { OutputData } from '../convert-html/types';
+
+declare const __CLI_VERSION__: string;
+
+/**
+ * Convert Google Docs HTML to Blok JSON.
+ * Runs: Google Docs preprocess -> general preprocess -> sanitize -> build blocks -> serialize.
+ */
+export function convertGdocs(html: string): string {
+  const preprocessed = preprocessGoogleDocsHtml(html);
+
+  const dom = new DOMParser().parseFromString(preprocessed, 'text/html');
+  const wrapper = dom.body;
+
+  preprocess(wrapper);
+  sanitize(wrapper);
+
+  const blocks = buildBlocks(wrapper);
+  const output: OutputData = { version: typeof __CLI_VERSION__ !== 'undefined' ? __CLI_VERSION__ : 'dev', blocks };
+
+  return JSON.stringify(output);
+}

package/src/cli/commands/convert-html/block-builder.ts

@@ -0,0 +1,392 @@
+import { createIdGenerator } from './id-generator';
+import { mapToNearestPresetName } from '../../../components/utils/color-mapping';
+import type { OutputBlockData } from './types';
+
+/**
+ * Walk the wrapper's top-level children and convert each block-level HTML
+ * element into one or more Blok JSON blocks.
+ */
+export function buildBlocks(wrapper: HTMLElement): OutputBlockData[] {
+  const nextId = createIdGenerator();
+  const blocks: OutputBlockData[] = [];
+
+  for (const node of Array.from(wrapper.childNodes)) {
+    convertNode(node, blocks, nextId);
+  }
+
+  return blocks;
+}
+
+// ---------------------------------------------------------------------------
+// Converters
+// ---------------------------------------------------------------------------
+
+function convertNode(
+  node: Node,
+  blocks: OutputBlockData[],
+  nextId: (prefix: string) => string
+): void {
+  if (node.nodeType === Node.TEXT_NODE) {
+    const text = node.textContent?.trim() ?? '';
+
+    if (text) {
+      blocks.push({ id: nextId('paragraph'), type: 'paragraph', data: { text } });
+    }
+
+    return;
+  }
+
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return;
+  }
+
+  const el = node as HTMLElement;
+  const tag = el.tagName;
+
+  if (tag === 'P') {
+    blocks.push({ id: nextId('paragraph'), type: 'paragraph', data: { text: el.innerHTML } });
+
+    return;
+  }
+
+  if (/^H[1-6]$/.test(tag)) {
+    const level = Number(tag[1]);
+
+    blocks.push({ id: nextId('header'), type: 'header', data: { text: el.innerHTML, level } });
+
+    return;
+  }
+
+  if (tag === 'BLOCKQUOTE') {
+    blocks.push({
+      id: nextId('quote'),
+      type: 'quote',
+      data: { text: el.innerHTML, size: 'default' },
+    });
+
+    return;
+  }
+
+  if (tag === 'PRE') {
+    blocks.push({
+      id: nextId('code'),
+      type: 'code',
+      data: { code: el.textContent ?? '', language: 'plain-text' },
+    });
+
+    return;
+  }
+
+  if (tag === 'HR') {
+    blocks.push({ id: nextId('divider'), type: 'divider', data: {} });
+
+    return;
+  }
+
+  if (tag === 'IMG') {
+    const src = el.getAttribute('src') ?? '';
+    const width = parseIntFromStyle(el, 'width');
+
+    blocks.push({
+      id: nextId('image'),
+      type: 'image',
+      data: { url: src },
+      stretched: null,
+      key: null,
+      width,
+    });
+
+    return;
+  }
+
+  if (tag === 'DETAILS') {
+    const summary = el.querySelector('summary');
+    const text = summary ? summary.innerHTML : el.innerHTML;
+
+    blocks.push({ id: nextId('toggle'), type: 'toggle', data: { text } });
+
+    return;
+  }
+
+  if (tag === 'UL' || tag === 'OL') {
+    flattenList(el, tag === 'OL' ? 'ordered' : 'unordered', 0, blocks, nextId);
+
+    return;
+  }
+
+  if (tag === 'TABLE') {
+    convertTable(el, blocks, nextId);
+
+    return;
+  }
+
+  if (tag === 'ASIDE') {
+    convertCallout(el, blocks, nextId);
+
+    return;
+  }
+
+  // Unknown block element: extract innerHTML as paragraph
+  blocks.push({
+    id: nextId('paragraph'),
+    type: 'paragraph',
+    data: { text: el.innerHTML },
+  });
+}
+
+// ---------------------------------------------------------------------------
+// List flattening
+// ---------------------------------------------------------------------------
+
+function flattenList(
+  listEl: HTMLElement,
+  style: 'ordered' | 'unordered',
+  depth: number,
+  blocks: OutputBlockData[],
+  nextId: (prefix: string) => string
+): void {
+  const startAttr = listEl.getAttribute('start');
+  const startValue = startAttr ? Number(startAttr) : null;
+  const listItems = Array.from(listEl.children).filter((child) => child.tagName === 'LI');
+
+  for (const [index, child] of listItems.entries()) {
+    // Clone the li so we can remove nested lists without mutating DOM
+    const clone = child.cloneNode(true) as HTMLElement;
+    const nestedLists: HTMLElement[] = [];
+
+    for (const nested of Array.from(clone.querySelectorAll('ul, ol'))) {
+      nestedLists.push(nested.cloneNode(true) as HTMLElement);
+      nested.remove();
+    }
+
+    const text = clone.innerHTML.trim();
+
+    // Use aria-level if present (1-based → 0-based), otherwise use nesting depth
+    const ariaLevel = (child as HTMLElement).getAttribute('aria-level');
+    const itemDepth = ariaLevel
+      ? Math.max(0, parseInt(ariaLevel, 10) - 1)
+      : depth;
+
+    blocks.push({
+      id: nextId('list'),
+      type: 'list',
+      data: {
+        text,
+        style,
+        depth: itemDepth === 0 ? null : itemDepth,
+        checked: null,
+        start: index === 0 && startValue !== null ? startValue : null,
+      },
+    });
+
+    // Recursively process nested lists
+    for (const nested of nestedLists) {
+      const nestedStyle = nested.tagName === 'OL' ? 'ordered' : 'unordered';
+
+      flattenList(nested, nestedStyle, depth + 1, blocks, nextId);
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Table conversion
+// ---------------------------------------------------------------------------
+
+function convertTable(
+  tableEl: HTMLElement,
+  blocks: OutputBlockData[],
+  nextId: (prefix: string) => string
+): void {
+  const tableId = nextId('table');
+  const rows = Array.from(tableEl.querySelectorAll('tr'));
+  const content: Record<string, unknown>[][] = [];
+
+  for (const row of rows) {
+    const cells = Array.from(row.querySelectorAll('td, th'));
+    const rowData = cells.map((cell) => convertTableCell(cell as HTMLElement, tableId, blocks, nextId));
+
+    content.push(rowData);
+  }
+
+  // Parse column widths and headings from first row cells
+  const firstRowCells = rows[0] ? Array.from(rows[0].querySelectorAll('td, th')) : [];
+  const withHeadings = firstRowCells.some((c) => c.tagName === 'TH');
+  const colWidths = firstRowCells.map((cell) => {
+    const width = parseCssProperty(cell as HTMLElement, 'width');
+
+    if (width) {
+      const px = parseInt(width, 10);
+
+      return isNaN(px) ? null : px;
+    }
+
+    return null;
+  });
+  const hasWidths = colWidths.some((w) => w !== null);
+
+  // Insert table block before its child paragraph blocks
+  const tableBlock: OutputBlockData = {
+    id: tableId,
+    type: 'table',
+    data: {
+      withHeadings,
+      withHeadingColumn: false,
+      content,
+      ...(hasWidths ? { colWidths } : {}),
+    },
+  };
+
+  // Find first child block index to insert table before its children
+  const firstChildIdx = blocks.findIndex((b) => b.parent === tableId);
+
+  if (firstChildIdx >= 0) {
+    blocks.splice(firstChildIdx, 0, tableBlock);
+  } else {
+    blocks.push(tableBlock);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Callout conversion
+// ---------------------------------------------------------------------------
+
+function convertCallout(
+  asideEl: HTMLElement,
+  blocks: OutputBlockData[],
+  nextId: (prefix: string) => string
+): void {
+  const calloutId = nextId('callout');
+  const bgColor = parseCssProperty(asideEl, 'background-color');
+  const backgroundColor = bgColor ? mapToNearestPresetName(bgColor, 'bg') : null;
+
+  const childIds: string[] = [];
+
+  for (const child of Array.from(asideEl.childNodes)) {
+    const childId = convertCalloutChild(child, calloutId, blocks, nextId);
+
+    if (childId) {
+      childIds.push(childId);
+    }
+  }
+
+  // Insert callout block before its children
+  const firstChildIdx = blocks.findIndex((b) => b.parent === calloutId);
+
+  const calloutBlock: OutputBlockData = {
+    id: calloutId,
+    type: 'callout',
+    data: {
+      emoji: '\u{1F4A1}',
+      backgroundColor: backgroundColor ?? 'gray',
+    },
+    content: childIds,
+  };
+
+  if (firstChildIdx >= 0) {
+    blocks.splice(firstChildIdx, 0, calloutBlock);
+  } else {
+    blocks.push(calloutBlock);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function convertTableCell(
+  cellEl: HTMLElement,
+  tableId: string,
+  blocks: OutputBlockData[],
+  nextId: (prefix: string) => string
+): Record<string, unknown> {
+  const cellText = cellEl.innerHTML.trim();
+
+  if (!cellText) {
+    return { blocks: [], color: null, textColor: null };
+  }
+
+  const childId = nextId('paragraph');
+
+  blocks.push({
+    id: childId,
+    type: 'paragraph',
+    parent: tableId,
+    data: { text: cellText },
+  });
+
+  const bgColor = parseCssProperty(cellEl, 'background-color');
+  const textColor = parseCssProperty(cellEl, 'color');
+
+  return {
+    blocks: [childId],
+    color: bgColor ? mapToNearestPresetName(bgColor, 'bg') : null,
+    textColor: textColor ? mapToNearestPresetName(textColor, 'text') : null,
+  };
+}
+
+function convertCalloutChild(
+  child: ChildNode,
+  calloutId: string,
+  blocks: OutputBlockData[],
+  nextId: (prefix: string) => string
+): string | null {
+  if (child.nodeType === Node.ELEMENT_NODE) {
+    const childEl = child as HTMLElement;
+    const childId = nextId('paragraph');
+
+    blocks.push({
+      id: childId,
+      type: 'paragraph',
+      parent: calloutId,
+      data: { text: childEl.innerHTML },
+    });
+
+    return childId;
+  }
+
+  if (child.nodeType === Node.TEXT_NODE) {
+    const text = child.textContent?.trim() ?? '';
+
+    if (!text) {
+      return null;
+    }
+
+    const childId = nextId('paragraph');
+
+    blocks.push({
+      id: childId,
+      type: 'paragraph',
+      parent: calloutId,
+      data: { text },
+    });
+
+    return childId;
+  }
+
+  return null;
+}
+
+function parseIntFromStyle(el: HTMLElement, property: string): number | null {
+  const value = parseCssProperty(el, property);
+
+  if (!value) {
+    return null;
+  }
+
+  const parsed = parseInt(value, 10);
+
+  return isNaN(parsed) ? null : parsed;
+}
+
+function parseCssProperty(el: HTMLElement, property: string): string | null {
+  const style = el.getAttribute('style');
+
+  if (!style) {
+    return null;
+  }
+
+  const regex = new RegExp(`(?<![\\-a-z])${property}\\s*:\\s*([^;]+)`);
+  const match = regex.exec(style);
+
+  return match ? match[1].trim() : null;
+}

package/src/cli/commands/convert-html/id-generator.ts

@@ -0,0 +1,11 @@
+export function createIdGenerator(): (prefix: string) => string {
+  const counters = new Map<string, number>();
+
+  return (prefix: string): string => {
+    const count = (counters.get(prefix) ?? 0) + 1;
+
+    counters.set(prefix, count);
+
+    return `${prefix}-${count}`;
+  };
+}

package/src/cli/commands/convert-html/index.ts

@@ -0,0 +1,23 @@
+import { preprocess } from './preprocessor';
+import { sanitize } from './sanitizer';
+import { buildBlocks } from './block-builder';
+import type { OutputData } from './types';
+
+declare const __CLI_VERSION__: string;
+
+/**
+ * Convert HTML to Blok JSON.
+ * Runs: preprocess → sanitize → build blocks → serialize.
+ */
+export function convertHtml(html: string): string {
+  const dom = new DOMParser().parseFromString(html, 'text/html');
+  const wrapper = dom.body;
+
+  preprocess(wrapper);
+  sanitize(wrapper);
+
+  const blocks = buildBlocks(wrapper);
+  const output: OutputData = { version: typeof __CLI_VERSION__ !== 'undefined' ? __CLI_VERSION__ : 'dev', blocks };
+
+  return JSON.stringify(output);
+}