@jackuait/blok 0.10.0-beta.15 → 0.10.0-beta.16

package/dist/full.mjs

@@ -1,7 +1,7 @@
-import { n as e, t } from "./chunks/blok-1213fGsk.mjs";
-import { $n as n } from "./chunks/constants-Cr7GEExc.mjs";
+import { n as e, t } from "./chunks/blok-CEVrVqlx.mjs";
+import { $n as n } from "./chunks/constants-BURnHRy_.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-DBEfU2dP.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-Dt2I14vP.mjs";
 //#region src/full.ts
 var g = {
 	paragraph: {

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import { t as e } from "./chunks/blok-1213fGsk.mjs";
-import "./chunks/constants-Cr7GEExc.mjs";
+import { t as e } from "./chunks/blok-CEVrVqlx.mjs";
+import "./chunks/constants-BURnHRy_.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-Cr7GEExc.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-DBEfU2dP.mjs";
+import { m as e } from "./chunks/constants-BURnHRy_.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-Dt2I14vP.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.15",
+  "version": "0.10.0-beta.16",
   "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,16 +50,13 @@
     }
   },
   "bin": {
-    "blok": "./bin/blok.mjs",
-    "blok-convert-html": "./bin/convert-html.mjs",
     "migrate-from-editorjs": "./codemod/migrate-editorjs-to-blok.js"
   },
   "files": [
     "dist",
     "types",
     "src",
-    "codemod",
-    "bin"
+    "codemod"
   ],
   "publishConfig": {
     "access": "public"
@@ -84,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 && node scripts/build-convert-html.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,24 @@
+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';
+
+/**
+ * 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: '2.31.0', blocks };
+
+  return JSON.stringify(output);
+}

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

@@ -85,16 +85,7 @@ function convertNode(
 
   if (tag === 'IMG') {
     const src = el.getAttribute('src') ?? '';
-    const widthStyle = parseCssProperty(el, 'width');
-    let width: number | null = null;
-
-    if (widthStyle) {
-      const parsed = parseInt(widthStyle, 10);
-
-      if (!isNaN(parsed)) {
-        width = parsed;
-      }
-    }
+    const width = parseIntFromStyle(el, 'width');
 
     blocks.push({
       id: nextId('image'),
@@ -156,13 +147,9 @@ function flattenList(
 ): void {
   const startAttr = listEl.getAttribute('start');
   const startValue = startAttr ? Number(startAttr) : null;
-  let isFirstItem = true;
-
-  for (const child of Array.from(listEl.children)) {
-    if (child.tagName !== 'LI') {
-      continue;
-    }
+  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[] = [];
@@ -176,11 +163,9 @@ function flattenList(
 
     // Use aria-level if present (1-based → 0-based), otherwise use nesting depth
     const ariaLevel = (child as HTMLElement).getAttribute('aria-level');
-    let itemDepth = depth;
-
-    if (ariaLevel) {
-      itemDepth = Math.max(0, parseInt(ariaLevel, 10) - 1);
-    }
+    const itemDepth = ariaLevel
+      ? Math.max(0, parseInt(ariaLevel, 10) - 1)
+      : depth;
 
     blocks.push({
       id: nextId('list'),
@@ -190,12 +175,10 @@ function flattenList(
         style,
         depth: itemDepth === 0 ? null : itemDepth,
         checked: null,
-        start: isFirstItem && startValue !== null ? startValue : null,
+        start: index === 0 && startValue !== null ? startValue : null,
       },
     });
 
-    isFirstItem = false;
-
     // Recursively process nested lists
     for (const nested of nestedLists) {
       const nestedStyle = nested.tagName === 'OL' ? 'ordered' : 'unordered';
@@ -216,53 +199,18 @@ function convertTable(
 ): void {
   const tableId = nextId('table');
   const rows = Array.from(tableEl.querySelectorAll('tr'));
-
-  let withHeadings = false;
   const content: Record<string, unknown>[][] = [];
 
-  for (let rowIdx = 0; rowIdx < rows.length; rowIdx++) {
-    const row = rows[rowIdx];
+  for (const row of rows) {
     const cells = Array.from(row.querySelectorAll('td, th'));
-
-    if (rowIdx === 0 && cells.some((c) => c.tagName === 'TH')) {
-      withHeadings = true;
-    }
-
-    const rowData: Record<string, unknown>[] = [];
-
-    for (const cell of cells) {
-      const cellEl = cell as HTMLElement;
-      const cellText = cellEl.innerHTML.trim();
-
-      if (cellText) {
-        const childId = nextId('paragraph');
-
-        blocks.push({
-          id: childId,
-          type: 'paragraph',
-          parent: tableId,
-          data: { text: cellText },
-        });
-
-        // Parse cell colors
-        const bgColor = parseCssProperty(cellEl, 'background-color');
-        const textColor = parseCssProperty(cellEl, 'color');
-
-        rowData.push({
-          blocks: [childId],
-          color: bgColor ? mapToNearestPresetName(bgColor, 'bg') : null,
-          textColor: textColor ? mapToNearestPresetName(textColor, 'text') : null,
-        });
-      } else {
-        rowData.push({ blocks: [], color: null, textColor: null });
-      }
-    }
+    const rowData = cells.map((cell) => convertTableCell(cell as HTMLElement, tableId, blocks, nextId));
 
     content.push(rowData);
   }
 
-  // Parse column widths from first row cells
+  // 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');
 
@@ -314,33 +262,10 @@ function convertCallout(
   const childIds: string[] = [];
 
   for (const child of Array.from(asideEl.childNodes)) {
-    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 },
-      });
+    const childId = convertCalloutChild(child, calloutId, blocks, nextId);
 
+    if (childId) {
       childIds.push(childId);
-    } else if (child.nodeType === Node.TEXT_NODE) {
-      const text = child.textContent?.trim() ?? '';
-
-      if (text) {
-        const childId = nextId('paragraph');
-
-        blocks.push({
-          id: childId,
-          type: 'paragraph',
-          parent: calloutId,
-          data: { text },
-        });
-
-        childIds.push(childId);
-      }
     }
   }
 
@@ -368,6 +293,91 @@ function convertCallout(
 // 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');
 

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

@@ -49,26 +49,45 @@ function convertBackgroundDivsToCallouts(wrapper: HTMLElement): void {
 
     // Unwrap non-semantic <div> wrappers so the aside's direct children are
     // the content elements (<p>, <a>, etc.), not intermediate <div> shells.
-    let bareDivs: HTMLElement[];
-
-    while ((bareDivs = Array.from(aside.querySelectorAll<HTMLElement>(':scope > div'))
-      .filter((d) => !d.getAttribute('style') && !d.getAttribute('class'))).length > 0) {
-      for (const child of bareDivs) {
-        child.replaceWith(...Array.from(child.childNodes));
-      }
-    }
+    unwrapBareDivs(aside);
 
     // Strip trailing <br> inside paragraphs — the paste handler splits
     // content at <br> boundaries, so a trailing one creates an empty block.
-    for (const p of Array.from(aside.querySelectorAll('p'))) {
-      const lastChild = p.lastElementChild;
+    stripTrailingBrInParagraphs(aside);
+
+    div.replaceWith(aside);
+  }
+}
+
+/**
+ * Repeatedly unwrap non-semantic `<div>` wrappers (no style or class) that are
+ * direct children of the given element, replacing them with their child nodes.
+ */
+function unwrapBareDivs(parent: HTMLElement): void {
+  for (;;) {
+    const bareDivs = Array.from(parent.querySelectorAll<HTMLElement>(':scope > div'))
+      .filter((d) => !d.getAttribute('style') && !d.getAttribute('class'));
 
-      if (lastChild?.tagName === 'BR') {
-        lastChild.remove();
-      }
+    if (bareDivs.length === 0) {
+      break;
     }
 
-    div.replaceWith(aside);
+    for (const child of bareDivs) {
+      child.replaceWith(...Array.from(child.childNodes));
+    }
+  }
+}
+
+/**
+ * Remove trailing `<br>` elements from paragraphs inside the given element.
+ */
+function stripTrailingBrInParagraphs(parent: HTMLElement): void {
+  for (const p of Array.from(parent.querySelectorAll('p'))) {
+    const lastChild = p.lastElementChild;
+
+    if (lastChild?.tagName === 'BR') {
+      lastChild.remove();
+    }
   }
 }
 
@@ -89,16 +108,18 @@ function stripSpuriousBackgroundColors(wrapper: HTMLElement): void {
   const candidates = wrapper.querySelectorAll<HTMLElement>('[style*="background-color"]');
 
   for (const el of Array.from(candidates)) {
-    if (isSpuriousBackgroundColor(el.style.backgroundColor)) {
-      el.style.removeProperty('background-color');
+    if (!isSpuriousBackgroundColor(el.style.backgroundColor)) {
+      continue;
+    }
 
-      if (el.getAttribute('style')?.trim() === '') {
-        el.removeAttribute('style');
-      }
+    el.style.removeProperty('background-color');
+
+    if (el.getAttribute('style')?.trim() === '') {
+      el.removeAttribute('style');
+    }
 
-      if (isEmptyWrapper(el)) {
-        el.replaceWith(...Array.from(el.childNodes));
-      }
+    if (isEmptyWrapper(el)) {
+      el.replaceWith(...Array.from(el.childNodes));
     }
   }
 }
@@ -187,8 +208,6 @@ function getBackgroundColor(el: HTMLElement): string {
  * Only targets `<td>` and `<th>` — top-level `<p>` tags are left intact.
  */
 function convertTableCellParagraphs(wrapper: HTMLElement): void {
-  const doc = wrapper.ownerDocument;
-
   for (const cell of Array.from(wrapper.querySelectorAll('td, th'))) {
     const paragraphs = cell.querySelectorAll('p');
 
@@ -197,22 +216,32 @@ function convertTableCellParagraphs(wrapper: HTMLElement): void {
     }
 
     for (const p of Array.from(paragraphs)) {
-      if (p.innerHTML.trim() === '' || p.innerHTML.trim() === '&nbsp;') {
-        p.remove();
-        continue;
-      }
-
-      const fragment = doc.createDocumentFragment();
-
-      fragment.append(...Array.from(p.childNodes));
-      fragment.append(doc.createElement('br'));
-      p.replaceWith(fragment);
+      replaceParagraphWithBr(p);
     }
 
     stripTrailingBreaks(cell);
   }
 }
 
+/**
+ * Replace a `<p>` element with its child nodes followed by a `<br>`,
+ * or remove it entirely if it is empty / nbsp-only.
+ */
+function replaceParagraphWithBr(p: HTMLParagraphElement): void {
+  if (p.innerHTML.trim() === '' || p.innerHTML.trim() === '&nbsp;') {
+    p.remove();
+
+    return;
+  }
+
+  const doc = p.ownerDocument;
+  const fragment = doc.createDocumentFragment();
+
+  fragment.append(...Array.from(p.childNodes));
+  fragment.append(doc.createElement('br'));
+  p.replaceWith(fragment);
+}
+
 /**
  * Remove paragraphs whose only content is non-breaking spaces or whitespace.
  */
@@ -261,8 +290,49 @@ const BULLET_PREFIX = /^[\u2022\u00B7][\s\u00A0]*|^-\s/;
  */
 function convertBulletParagraphsToLists(wrapper: HTMLElement): void {
   const doc = wrapper.ownerDocument;
+
+  // Collect runs of consecutive bullet paragraphs. Each run is a group
+  // that will become a single <ul>.
+  const groups = collectBulletGroups(wrapper);
+
+  for (const group of groups) {
+    const ul = doc.createElement('ul');
+
+    group[0].before(ul);
+
+    for (const p of group) {
+      convertBulletParagraphToListItem(p, ul);
+    }
+  }
+}
+
+/**
+ * Strip the bullet prefix from a paragraph and append its content as
+ * a `<li>` to the given list.
+ */
+function convertBulletParagraphToListItem(p: HTMLParagraphElement, ul: HTMLUListElement): void {
+  const li = p.ownerDocument.createElement('li');
+
+  // Strip the bullet character and any leading nbsp/whitespace from
+  // the first text node, preserving any inline HTML that follows.
+  const firstTextNode = findFirstTextNode(p);
+
+  if (firstTextNode) {
+    firstTextNode.textContent = (firstTextNode.textContent ?? '').replace(BULLET_PREFIX, '');
+  }
+
+  li.append(...Array.from(p.childNodes));
+  ul.appendChild(li);
+  p.remove();
+}
+
+/**
+ * Walk direct children of an element and return groups of consecutive `<p>`
+ * elements whose text starts with a bullet character.
+ */
+function collectBulletGroups(wrapper: HTMLElement): HTMLParagraphElement[][] {
+  const groups: HTMLParagraphElement[][] = [];
   const children = Array.from(wrapper.childNodes);
-  let currentList: HTMLUListElement | null = null;
 
   for (const child of children) {
     if (child.nodeType !== Node.ELEMENT_NODE) {
@@ -270,38 +340,43 @@ function convertBulletParagraphsToLists(wrapper: HTMLElement): void {
     }
 
     const el = child as HTMLElement;
+    const isBulletParagraph = el.tagName === 'P' && BULLET_PREFIX.test(el.textContent ?? '');
 
-    if (el.tagName !== 'P') {
-      currentList = null;
+    if (!isBulletParagraph) {
       continue;
     }
 
-    const textContent = el.textContent ?? '';
+    const lastGroup = groups[groups.length - 1];
+    const previousSibling = findPreviousElementSibling(el);
+    const belongsToCurrentGroup = lastGroup
+      && previousSibling !== null
+      && lastGroup[lastGroup.length - 1] === previousSibling;
 
-    if (!BULLET_PREFIX.test(textContent)) {
-      currentList = null;
-      continue;
-    }
-
-    if (!currentList) {
-      currentList = doc.createElement('ul');
-      el.before(currentList);
+    if (belongsToCurrentGroup) {
+      lastGroup.push(el as HTMLParagraphElement);
+    } else {
+      groups.push([el as HTMLParagraphElement]);
     }
+  }
 
-    const li = doc.createElement('li');
+  return groups;
+}
 
-    // Strip the bullet character and any leading nbsp/whitespace from
-    // the first text node, preserving any inline HTML that follows.
-    const firstTextNode = findFirstTextNode(el);
+/**
+ * Find the previous sibling that is an element, skipping non-element nodes.
+ */
+function findPreviousElementSibling(el: HTMLElement): Element | null {
+  const prev = el.previousSibling;
 
-    if (firstTextNode) {
-      firstTextNode.textContent = (firstTextNode.textContent ?? '').replace(BULLET_PREFIX, '');
-    }
+  if (!prev) {
+    return null;
+  }
 
-    li.append(...Array.from(el.childNodes));
-    currentList.appendChild(li);
-    el.remove();
+  if (prev.nodeType === Node.ELEMENT_NODE) {
+    return prev as Element;
   }
+
+  return null;
 }
 
 /**
@@ -309,22 +384,21 @@ function convertBulletParagraphsToLists(wrapper: HTMLElement): void {
  * of an element.
  */
 function stripTrailingBreaks(element: Element): void {
-  let node = element.lastChild;
+  for (;;) {
+    const node = element.lastChild;
 
-  while (node) {
-    if (node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName === 'BR') {
-      const prev = node.previousSibling;
+    if (!node) {
+      break;
+    }
 
-      node.remove();
-      node = prev;
-    } else if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() === '') {
-      const prev = node.previousSibling;
+    const isBr = node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName === 'BR';
+    const isBlankText = node.nodeType === Node.TEXT_NODE && node.textContent?.trim() === '';
 
-      node.remove();
-      node = prev;
-    } else {
+    if (!isBr && !isBlankText) {
       break;
     }
+
+    node.remove();
   }
 }