@bloklabs/cli 1.3.0 → 1.4.1

package/README.md

@@ -0,0 +1,57 @@
+# @bloklabs/cli
+
+Command-line tools for [Blok](https://blokeditor.com) — the headless, Notion-like block editor whose content is JSON blocks, not HTML. Converts legacy HTML into Blok JSON and prints the Editor.js migration guide.
+
+## Install
+
+```bash
+npx @bloklabs/cli --help
+```
+
+Or install it locally:
+
+```bash
+npm install --save-dev @bloklabs/cli
+```
+
+## Usage
+
+```
+Usage: blok-cli [options]
+
+Options:
+  --convert-html       Convert legacy HTML from stdin to Blok JSON (stdout)
+  --convert-gdocs      Convert Google Docs HTML from stdin to Blok JSON (stdout)
+  --migration          Output the EditorJS to Blok migration guide (LLM-friendly)
+  --output <file>      Write output to a file instead of stdout
+  --help               Show this help message
+```
+
+### Convert existing HTML to Blok JSON
+
+```bash
+npx @bloklabs/cli --convert-html < article.html --output article.json
+```
+
+The result is an `OutputData` document you can hand straight to `new Blok({ data })`.
+
+### Convert a Google Docs export
+
+```bash
+npx @bloklabs/cli --convert-gdocs < gdocs-export.html --output doc.json
+```
+
+### Migrating from Editor.js
+
+```bash
+npx @bloklabs/cli --migration --output migration-guide.md
+```
+
+The guide is written to be pasted into an LLM alongside your codebase.
+
+## Docs
+
+- [Migration guide](https://blokeditor.com/migration)
+- [Output data reference](https://blokeditor.com/docs/output-data)
+
+Licensed under Apache-2.0.

package/dist/{block-builder-BhbHyKmd.mjs → block-builder-Cp5f8JCh.mjs}

@@ -248,39 +248,145 @@ function d(r, a) {
 	}, null)?.name ?? null;
 }
 //#endregion
+//#region src/shared/inline-normalization-policy.ts
+var f = /* @__PURE__ */ new Set([
+	"A",
+	"B",
+	"STRONG",
+	"I",
+	"EM",
+	"U",
+	"S",
+	"DEL",
+	"INS",
+	"MARK",
+	"CODE",
+	"SUB",
+	"SUP",
+	"SMALL",
+	"SPAN",
+	"FONT"
+]), p = new Set([...f].filter((e) => e !== "A")), m = /* @__PURE__ */ new Set([
+	"IMG",
+	"IFRAME",
+	"VIDEO",
+	"AUDIO",
+	"INPUT",
+	"SVG",
+	"CANVAS",
+	"OBJECT",
+	"EMBED"
+]), ee = /* @__PURE__ */ new Set([
+	"U",
+	"S",
+	"DEL",
+	"INS"
+]), h = /* @__PURE__ */ new Set([
+	"background-color",
+	"background",
+	"text-decoration",
+	"text-decoration-line",
+	"border",
+	"border-bottom",
+	"box-shadow",
+	"outline"
+]), g = /* @__PURE__ */ new Set([
+	"",
+	"none",
+	"transparent",
+	"initial",
+	"unset"
+]), _ = (e) => {
+	let t = e.attributes.filter((e) => e.name.toLowerCase() !== "style").map((e) => `${e.name.toLowerCase()}=${e.value}`).sort(), n = e.styleDeclarations.map((e) => `${e.property.toLowerCase()}:${e.value.trim()}`).sort();
+	return `${e.tagName}|${t.join("|")}|${n.join(";")}`;
+}, v = (e) => e.attributes.some((e) => e.name.toLowerCase() === "id"), y = (e) => ee.has(e.tagName) ? !0 : e.styleDeclarations.some((e) => h.has(e.property.toLowerCase()) && !g.has(e.value.trim().toLowerCase())), b = (e) => {
+	if (!p.has(e.tagName)) return !1;
+	let t = e.text();
+	return t.trim().length > 0 || e.hasVoidContentDescendant() ? !1 : t.length === 0 || !y(e);
+}, te = (e, t) => !f.has(e.tagName) || v(e) || v(t) ? !1 : _(e) === _(t), ne = (e, t) => {
+	if (!f.has(e.tagName) || v(e)) return !1;
+	let n = _(e);
+	return t.some((e) => _(e) === n);
+}, x = (e) => {
+	let t = e.style, n = Array.from({ length: t.length }, (e, n) => {
+		let r = t.item(n);
+		return {
+			property: r,
+			value: t.getPropertyValue(r)
+		};
+	});
+	return {
+		tagName: e.tagName.toUpperCase(),
+		attributes: Array.from(e.attributes).map((e) => ({
+			name: e.name,
+			value: e.value
+		})),
+		styleDeclarations: n,
+		text: () => e.textContent ?? "",
+		hasVoidContentDescendant: () => Array.from(e.querySelectorAll("*")).some((e) => m.has(e.tagName.toUpperCase()))
+	};
+}, S = (e, t) => {
+	let n = e.parentElement;
+	return n === null || n === t ? [] : [x(n), ...S(n, t)];
+}, C = (e) => {
+	let t = e.parentNode;
+	if (t !== null) {
+		for (; e.firstChild !== null;) t.insertBefore(e.firstChild, e);
+		t.removeChild(e);
+	}
+}, w = (e) => {
+	let t = (t) => e.contains(t), n = (e) => t(e) && f.has(e.tagName.toUpperCase()), r = Array.from(e.querySelectorAll("*")).filter((t) => {
+		if (!n(t)) return !1;
+		let r = x(t);
+		return b(r) || ne(r, S(t, e));
+	});
+	r.forEach(C);
+	let i = (e, t) => {
+		let n = e.nextSibling;
+		if (n === null || n.nodeType !== Node.ELEMENT_NODE || !te(t, x(n))) return !1;
+		let r = n;
+		for (; r.firstChild !== null;) e.appendChild(r.firstChild);
+		return r.remove(), i(e, t), !0;
+	}, a = Array.from(e.querySelectorAll("*")).filter(n).map((e) => t(e) && i(e, x(e))).some(Boolean);
+	return r.length > 0 || a;
+}, T = (e) => {
+	let t = (n) => n === 0 || !w(e) ? !1 : (t(n - 1), !0), n = t(10);
+	return n && e.normalize?.(), n;
+};
+//#endregion
 //#region src/cli/commands/convert-html/preprocessor.ts
-function f(e) {
-	p(e), _(e), x(e), C(e), w(e), E(e);
+function E(e) {
+	D(e), j(e), F(e), L(e), re(e), z(e);
 }
-function p(e) {
+function D(e) {
 	let t = e.ownerDocument;
 	for (let n of Array.from(e.querySelectorAll("div[style]"))) {
 		if (n.closest("table")) continue;
-		let e = b(n);
-		if (!e || v(e)) continue;
+		let e = P(n);
+		if (!e || M(e)) continue;
 		let r = t.createElement("aside");
-		r.style.backgroundColor = e, r.append(...Array.from(n.childNodes)), m(r), h(r), n.replaceWith(r);
+		r.style.backgroundColor = e, r.append(...Array.from(n.childNodes)), O(r), k(r), n.replaceWith(r);
 	}
 }
-function m(e) {
+function O(e) {
 	for (;;) {
 		let t = Array.from(e.querySelectorAll(":scope > div")).filter((e) => !e.getAttribute("style") && !e.getAttribute("class"));
 		if (t.length === 0) break;
 		for (let e of t) e.replaceWith(...Array.from(e.childNodes));
 	}
 }
-function h(e) {
+function k(e) {
 	for (let t of Array.from(e.querySelectorAll("p"))) {
 		let e = t.lastElementChild;
 		e?.tagName === "BR" && e.remove();
 	}
 }
-var g = 250;
-function _(e) {
+var A = 250;
+function j(e) {
 	let t = e.querySelectorAll("[style*=\"background-color\"]");
-	for (let e of Array.from(t)) v(e.style.backgroundColor) && (e.style.removeProperty("background-color"), e.getAttribute("style")?.trim() === "" && e.removeAttribute("style"), y(e) && e.replaceWith(...Array.from(e.childNodes)));
+	for (let e of Array.from(t)) M(e.style.backgroundColor) && (e.style.removeProperty("background-color"), e.getAttribute("style")?.trim() === "" && e.removeAttribute("style"), N(e) && e.replaceWith(...Array.from(e.childNodes)));
 }
-function v(e) {
+function M(e) {
 	if (!e) return !1;
 	let t = e.replace(/\s/g, "").toLowerCase();
 	if (t === "transparent") return !0;
@@ -288,12 +394,12 @@ function v(e) {
 	if (!n) return !1;
 	if ((n[4] === void 0 ? 1 : parseFloat(n[4])) === 0) return !0;
 	let r = parseInt(n[1], 10), i = parseInt(n[2], 10), a = parseInt(n[3], 10);
-	return r >= g && i >= g && a >= g;
+	return r >= A && i >= A && a >= A;
 }
-function y(e) {
+function N(e) {
 	return e.attributes.length > 0 ? !1 : (e.textContent ?? "").replace(/[\s\u00A0]/g, "").length === 0;
 }
-function b(e) {
+function P(e) {
 	if (e.style.backgroundColor) return e.style.backgroundColor;
 	let t = (e.getAttribute("style") ?? "").match(/background:\s*([^;]+)/i);
 	if (t) {
@@ -302,16 +408,16 @@ function b(e) {
 	}
 	return "";
 }
-function x(e) {
+function F(e) {
 	for (let t of Array.from(e.querySelectorAll("td, th"))) {
 		let e = t.querySelectorAll("p");
 		if (e.length !== 0) {
-			for (let t of Array.from(e)) S(t);
-			A(t);
+			for (let t of Array.from(e)) I(t);
+			U(t);
 		}
 	}
 }
-function S(e) {
+function I(e) {
 	if (e.innerHTML.trim() === "" || e.innerHTML.trim() === " ") {
 		e.remove();
 		return;
@@ -319,45 +425,45 @@ function S(e) {
 	let t = e.ownerDocument, n = t.createDocumentFragment();
 	n.append(...Array.from(e.childNodes)), n.append(t.createElement("br")), e.replaceWith(n);
 }
-function C(e) {
+function L(e) {
 	for (let t of Array.from(e.querySelectorAll("p"))) t.closest("td") || t.closest("th") || (t.textContent ?? "").replace(/[\s\u00A0]/g, "").length === 0 && t.remove();
 }
-function w(e) {
+function re(e) {
 	let t = e.ownerDocument;
 	for (let n of Array.from(e.querySelectorAll("del, strike"))) {
 		let e = t.createElement("s");
 		e.append(...Array.from(n.childNodes)), n.replaceWith(e);
 	}
 }
-var T = /^[\u2022\u00B7][\s\u00A0]*|^-\s/;
-function E(e) {
-	let t = e.ownerDocument, n = O(e);
+var R = /^[\u2022\u00B7][\s\u00A0]*|^-\s/;
+function z(e) {
+	let t = e.ownerDocument, n = V(e);
 	for (let e of n) {
 		let n = t.createElement("ul");
 		e[0].before(n);
-		for (let t of e) D(t, n);
+		for (let t of e) B(t, n);
 	}
 }
-function D(e, t) {
-	let n = e.ownerDocument.createElement("li"), r = j(e);
-	r && (r.textContent = (r.textContent ?? "").replace(T, "")), n.append(...Array.from(e.childNodes)), t.appendChild(n), e.remove();
+function B(e, t) {
+	let n = e.ownerDocument.createElement("li"), r = W(e);
+	r && (r.textContent = (r.textContent ?? "").replace(R, "")), n.append(...Array.from(e.childNodes)), t.appendChild(n), e.remove();
 }
-function O(e) {
+function V(e) {
 	let t = [], n = Array.from(e.childNodes);
 	for (let e of n) {
 		if (e.nodeType !== Node.ELEMENT_NODE) continue;
 		let n = e;
-		if (!(n.tagName === "P" && T.test(n.textContent ?? ""))) continue;
-		let r = t[t.length - 1], i = k(n);
+		if (!(n.tagName === "P" && R.test(n.textContent ?? ""))) continue;
+		let r = t[t.length - 1], i = H(n);
 		r && i !== null && r[r.length - 1] === i ? r.push(n) : t.push([n]);
 	}
 	return t;
 }
-function k(e) {
+function H(e) {
 	let t = e.previousSibling;
 	return t && t.nodeType === Node.ELEMENT_NODE ? t : null;
 }
-function A(e) {
+function U(e) {
 	for (;;) {
 		let t = e.lastChild;
 		if (!t) break;
@@ -366,17 +472,17 @@ function A(e) {
 		t.remove();
 	}
 }
-function j(e) {
+function W(e) {
 	if (e.nodeType === Node.TEXT_NODE) return e;
 	for (let t of Array.from(e.childNodes)) {
-		let e = j(t);
+		let e = W(t);
 		if (e) return e;
 	}
 	return null;
 }
 //#endregion
 //#region src/cli/commands/convert-html/sanitizer.ts
-var M = {
+var G = {
 	B: !0,
 	STRONG: !0,
 	I: !0,
@@ -411,32 +517,32 @@ var M = {
 	SUMMARY: !0,
 	IMG: /* @__PURE__ */ new Set(["src", "style"])
 };
-function N(e) {
-	I(e);
+function K(e) {
+	Y(e);
 }
-function P(e) {
+function q(e) {
 	let t = Array.from(e.childNodes);
 	for (let n of t) e.before(n);
 	return e.remove(), t.filter((e) => e.nodeType === e.ELEMENT_NODE);
 }
-function F(e, t) {
+function J(e, t) {
 	for (let n of Array.from(e.attributes)) (t === !0 || !t.has(n.name)) && e.removeAttribute(n.name);
 }
-function I(e) {
+function Y(e) {
 	let t = Array.from(e.childNodes);
 	for (let e of t) {
 		if (e.nodeType !== e.ELEMENT_NODE) continue;
-		let n = e, r = M[n.tagName];
+		let n = e, r = G[n.tagName];
 		if (r === void 0) {
-			t.push(...P(n));
+			t.push(...q(n));
 			continue;
 		}
-		F(n, r), I(n);
+		J(n, r), Y(n);
 	}
 }
 //#endregion
 //#region src/cli/commands/convert-html/id-generator.ts
-function L() {
+function X() {
 	let e = /* @__PURE__ */ new Map();
 	return (t) => {
 		let n = (e.get(t) ?? 0) + 1;
@@ -445,12 +551,12 @@ function L() {
 }
 //#endregion
 //#region src/cli/commands/convert-html/block-builder.ts
-function R(e) {
-	let t = L(), n = [];
-	for (let r of Array.from(e.childNodes)) z(r, n, t);
+function ie(e) {
+	let t = X(), n = [];
+	for (let r of Array.from(e.childNodes)) ae(r, n, t);
 	return n;
 }
-function z(e, t, n) {
+function ae(e, t, n) {
 	if (e.nodeType === Node.TEXT_NODE) {
 		let r = e.textContent?.trim() ?? "";
 		r && t.push({
@@ -513,7 +619,7 @@ function z(e, t, n) {
 		return;
 	}
 	if (i === "IMG") {
-		let e = r.getAttribute("src") ?? "", i = G(r, "width");
+		let e = r.getAttribute("src") ?? "", i = le(r, "width");
 		t.push({
 			id: n("image"),
 			type: "image",
@@ -534,15 +640,15 @@ function z(e, t, n) {
 		return;
 	}
 	if (i === "UL" || i === "OL") {
-		B(r, i === "OL" ? "ordered" : "unordered", 0, t, n);
+		Z(r, i === "OL" ? "ordered" : "unordered", 0, t, n);
 		return;
 	}
 	if (i === "TABLE") {
-		V(r, t, n);
+		oe(r, t, n);
 		return;
 	}
 	if (i === "ASIDE") {
-		H(r, t, n);
+		se(r, t, n);
 		return;
 	}
 	t.push({
@@ -551,7 +657,7 @@ function z(e, t, n) {
 		data: { text: r.innerHTML }
 	});
 }
-function B(e, t, n, r, i) {
+function Z(e, t, n, r, i) {
 	let a = e.getAttribute("start"), o = a ? Number(a) : null, s = Array.from(e.children).filter((e) => e.tagName === "LI");
 	for (let [e, a] of s.entries()) {
 		let s = a.cloneNode(!0), c = [];
@@ -568,17 +674,17 @@ function B(e, t, n, r, i) {
 				start: e === 0 && o !== null ? o : null
 			}
 		});
-		for (let e of c) B(e, e.tagName === "OL" ? "ordered" : "unordered", n + 1, r, i);
+		for (let e of c) Z(e, e.tagName === "OL" ? "ordered" : "unordered", n + 1, r, i);
 	}
 }
-function V(e, t, n) {
+function oe(e, t, n) {
 	let r = n("table"), i = Array.from(e.querySelectorAll("tr")), a = [];
 	for (let e of i) {
-		let i = Array.from(e.querySelectorAll("td, th")).map((e) => U(e, r, t, n));
+		let i = Array.from(e.querySelectorAll("td, th")).map((e) => Q(e, r, t, n));
 		a.push(i);
 	}
 	let o = i[0] ? Array.from(i[0].querySelectorAll("td, th")) : [], s = o.some((e) => e.tagName === "TH"), c = o.map((e) => {
-		let t = K(e, "width");
+		let t = $(e, "width");
 		if (t) {
 			let e = parseInt(t, 10);
 			return isNaN(e) ? null : e;
@@ -596,10 +702,10 @@ function V(e, t, n) {
 	}, u = t.findIndex((e) => e.parent === r);
 	u >= 0 ? t.splice(u, 0, l) : t.push(l);
 }
-function H(e, t, r) {
-	let a = r("callout"), o = K(e, "background-color"), s = o && !n(o) && !i(o) ? d(o, "bg") : null, c = [];
+function se(e, t, r) {
+	let a = r("callout"), o = $(e, "background-color"), s = o && !n(o) && !i(o) ? d(o, "bg") : null, c = [];
 	for (let n of Array.from(e.childNodes)) {
-		let e = W(n, a, t, r);
+		let e = ce(n, a, t, r);
 		e && c.push(e);
 	}
 	let l = t.findIndex((e) => e.parent === a), u = {
@@ -613,7 +719,7 @@ function H(e, t, r) {
 	};
 	l >= 0 ? t.splice(l, 0, u) : t.push(u);
 }
-function U(e, t, r, a) {
+function Q(e, t, r, a) {
 	let o = e.innerHTML.trim();
 	if (!o) return {
 		blocks: [],
@@ -627,14 +733,14 @@ function U(e, t, r, a) {
 		parent: t,
 		data: { text: o }
 	});
-	let c = K(e, "background-color"), l = K(e, "color"), u = c && !n(c) && !i(c) ? d(c, "bg") : null;
+	let c = $(e, "background-color"), l = $(e, "color"), u = c && !n(c) && !i(c) ? d(c, "bg") : null;
 	return {
 		blocks: [s],
 		color: u,
 		textColor: l ? d(l, "text") : null
 	};
 }
-function W(e, t, n, r) {
+function ce(e, t, n, r) {
 	if (e.nodeType === Node.ELEMENT_NODE) {
 		let i = e, a = r("paragraph");
 		return n.push({
@@ -657,17 +763,17 @@ function W(e, t, n, r) {
 	}
 	return null;
 }
-function G(e, t) {
-	let n = K(e, t);
+function le(e, t) {
+	let n = $(e, t);
 	if (!n) return null;
 	let r = parseInt(n, 10);
 	return isNaN(r) ? null : r;
 }
-function K(e, t) {
+function $(e, t) {
 	let n = e.getAttribute("style");
 	if (!n) return null;
 	let r = RegExp(`(?<![\\-a-z])${t}\\s*:\\s*([^;]+)`).exec(n);
 	return r ? r[1].trim() : null;
 }
 //#endregion
-export { i as a, u as i, N as n, n as o, f as r, R as t };
+export { u as a, T as i, K as n, i as o, E as r, n as s, ie as t };

package/dist/cli.mjs

@@ -1,6 +1,6 @@
 import * as e from "node:fs";
 //#region src/cli/commands/migrationContent.ts
-var t = "# Migrating from EditorJS to Blok\n\nThis guide covers the breaking changes when migrating from EditorJS to Blok.\n\n## Table of Contents\n\n- [Supported Editor.js Versions](#supported-editorjs-versions)\n- [Core Changes](#core-changes)\n- [Data Attributes](#data-attributes)\n- [CSS Classes](#css-classes)\n- [Bundled Tools](#bundled-tools)\n  - [Tool Configuration](#tool-configuration)\n  - [Lifecycle Hooks](#lifecycle-hooks)\n  - [Delimiter → Divider](#delimiter--divider)\n- [Migrating Custom Tools](#migrating-custom-tools)\n  - [Custom Block Tools (port unchanged)](#custom-block-tools-port-unchanged)\n  - [Custom Inline Tools (breaking rewrite)](#custom-inline-tools-breaking-rewrite)\n- [Saved Content / Data Migration](#saved-content--data-migration)\n  - [Auto-Migrated on Load](#auto-migrated-on-load)\n  - [Dropped Fields](#dropped-fields)\n- [Configuration Defaults](#configuration-defaults)\n- [New API Methods](#new-api-methods)\n- [DOM Selectors](#dom-selectors)\n- [E2E Test Selectors](#e2e-test-selectors)\n\n---\n\n## Supported Editor.js Versions\n\nBlok targets the **Editor.js 2.x** line. The [codemod](./codemod) is built against the package versions a typical Editor.js 2.x project ships — `@editorjs/editorjs@^2.28.x`, `@editorjs/header@^2.8.x`, `@editorjs/paragraph@^2.11.x`, `@editorjs/list@^1.9.x` — and the runtime auto-migration reads the saved-data shapes those versions produce. Older 2.x data formats are still recognized; the matrix below describes coverage per block/tool, not per Editor.js point release.\n\nThere is no pinned single source version: Blok is API-compatible with the Editor.js 2.x `BlockTool` / `InlineTool` contracts, so what matters is **which tools your content uses**, covered below.\n\n### Compatibility Matrix\n\nHow each Editor.js block/tool is handled. \"Auto-migrated at runtime\" means the conversion happens on `render()` with no script needed; \"Codemod\" means the [codemod](./codemod) rewrites saved JSON; \"Drop-in unchanged\" means the data passes through as-is; \"Not bundled\" means Blok ships no equivalent tool, so you must register your own (a ported Editor.js block tool works unchanged — see [Migrating Custom Tools](#migrating-custom-tools)) or the block renders as a preserved stub with a `console.warn` and round-trips untouched on save.\n\n| Editor.js block / tool | Migration status | Notes |\n|------------------------|------------------|-------|\n| `paragraph` | Drop-in unchanged | Bundled as `Blok.Paragraph` (the default block). |\n| `header` | Drop-in unchanged | Bundled as `Blok.Header`. |\n| `list` (nested **and** string-array items) | Auto-migrated at runtime **+** codemod | Each item expands to a flat `list` block. |\n| `checklist` (standalone tool) | Auto-migrated at runtime **+** codemod | Becomes `list` blocks with checklist style. |\n| `toggleList` | Auto-migrated at runtime **+** codemod → `toggle` | Becomes a `toggle` block (or a toggle `header` when `titleVariant` is set); body blocks flatten into parented children. |\n| `callout` (legacy `body`/`variant` shape) | Auto-migrated at runtime **+** codemod | Legacy `{ body, variant, emoji }` → flat `{ emoji, textColor, backgroundColor }`; body blocks flatten into parented children. |\n| `image`, `simple-image` | Auto-migrated at runtime **+** codemod | `file.url` (or `simple-image`'s flat `url`) → `url`; `withBorder` → `frame`, `stretched: true` → `size: full`. `withBackground` is dropped (warns). |\n| `linkTool` | Auto-migrated at runtime **+** codemod → `bookmark` | `meta` flattens onto the bookmark shape; `meta.site_name` is dropped (warns). |\n| `delimiter` | Codemod renames type → `divider` | Data format is identical (`{}`). Also recognized at render, so existing data works without the rename. |\n| `quote` | Auto-migrated at runtime **+** codemod | `caption` becomes a trailing `paragraph` sibling; `alignment` is dropped (warns). The quote text/size render unchanged. |\n| `code` | Drop-in unchanged | Passes through to Blok's bundled `code` tool. |\n| `table` (HTML-string cells) | Auto-migrated at runtime **+** codemod | Each non-empty cell becomes a `{ blocks: [id] }` cell-ref plus a child `paragraph` (`parent` = table id); empty cells become `{ blocks: [] }`. `withHeadings` is preserved. Cells already in block-ref shape pass through. |\n| `embed` | Drop-in unchanged | Bundled as `Blok.Embed`. `{ service, source, embed, width, height, caption }` map 1:1; iframe providers render correctly (Blok-only fields default). |\n| `raw` | Auto-migrated at runtime **+** codemod → `code` | Blok has no raw tool; `{ html }` becomes a `code` block showing the markup as source verbatim. |\n| `warning` | Auto-migrated at runtime **+** codemod → `callout` | Becomes a ⚠️ orange `callout`; `title` and `message` become child `paragraph` blocks. |\n| `attaches` | Auto-migrated at runtime **+** codemod → `bookmark` | `file.url` + `title` map to a `bookmark`; file metadata (`name`/`size`/`extension`) is dropped (warns). |\n| `marker`, `inlineCode` (inline) | Not bundled | Register your own (port unchanged or wrap with `wrapLegacyInlineTool`). See [Custom Inline Tools](#custom-inline-tools). |\n| Other third-party block tools (`personality`, `button`, audio, …) | Not bundled | No built-in equivalent. Register a tool to render them; otherwise the block is preserved as a stub (warns) and survives a save/load round-trip. |\n\n> **Heads-up:** any block type Blok doesn't recognize and has no registered tool for renders as a stub and logs `Tool «<name>» is not found`. Its data is preserved, so registering the tool later restores the block.\n\n---\n\n## Core Changes\n\n### Class Name\n\n```diff\n- import EditorJS from '@editorjs/editorjs';\n+ import Blok from '@bloklabs/core';\n\n- const editor = new EditorJS({ ... });\n+ const editor = new Blok({ ... });\n```\n\n`Blok` is also exported as the **default export** and under an `EditorJS` alias, so you can keep your existing variable name and only change the import path — a minimal-diff, drop-in migration:\n\n```diff\n- import EditorJS from '@editorjs/editorjs';\n+ import { EditorJS } from '@bloklabs/core';\n\n  const editor = new EditorJS({ ... }); // unchanged\n```\n\n`import Blok`, `import { Blok }`, and `import { EditorJS }` all resolve to the same class.\n\n### Default Holder\n\nThe default holder ID changed from `editorjs` to `blok`:\n\n```diff\n- <div id=\"editorjs\"></div>\n+ <div id=\"blok\"></div>\n```\n\nOr specify explicitly:\n\n```javascript\nconst editor = new Blok({\n  holder: 'my-editor', // works the same as before\n});\n```\n\n### TypeScript Types\n\n```diff\n- import type { EditorConfig, OutputData } from '@editorjs/editorjs';\n+ import type { BlokConfig, OutputData } from '@bloklabs/core';\n```\n\n---\n\n## Data Attributes\n\nBlok uses `data-blok-*` attributes instead of EditorJS's mixed naming conventions.\n\n| EditorJS | Blok |\n|----------|------|\n| `data-id` | `data-blok-id` |\n| `data-item-name` | `data-blok-item-name` |\n| `data-empty` | `data-blok-empty` |\n| `.ce-block--selected` (class) | `data-blok-selected=\"true\"` |\n| — | `data-blok-component` (tool name) |\n| — | `data-blok-interface` (element type) |\n| — | `data-blok-testid` (testing) |\n| — | `data-blok-opened` (toolbar state) |\n| — | `data-blok-placeholder` |\n| — | `data-blok-stretched` |\n| — | `data-blok-focused` |\n| — | `data-blok-popover-opened` |\n| — | `data-blok-tool` (tool name on rendered element) |\n| — | `data-blok-dragging` (block being dragged) |\n| — | `data-blok-hidden` (hidden state) |\n| — | `data-blok-rtl` (RTL mode) |\n| — | `data-blok-drag-handle` (drag handle element) |\n| — | `data-blok-overlay` (selection overlay) |\n| — | `data-blok-overlay-rectangle` (selection rectangle) |\n\n### Querying Blocks\n\n```diff\n- document.querySelector('[data-id=\"abc123\"]');\n+ document.querySelector('[data-blok-id=\"abc123\"]');\n\n- document.querySelector('[data-item-name=\"bold\"]');\n+ document.querySelector('[data-blok-item-name=\"bold\"]');\n```\n\n---\n\n## CSS Classes\n\nBlok replaces BEM class names with data attributes for selection.\n\n### Editor Wrapper\n\n| EditorJS | Blok |\n|----------|------|\n| `.codex-editor` | `[data-blok-editor]` |\n| `.codex-editor__redactor` | `[data-blok-redactor]` |\n| `.codex-editor--rtl` | `[data-blok-rtl=\"true\"]` |\n\n### Block Elements\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-block` | `[data-blok-element]` |\n| `.ce-block--selected` | `[data-blok-selected=\"true\"]` |\n| `.ce-block--stretched` | `[data-blok-stretched=\"true\"]` |\n| `.ce-block--focused` | `[data-blok-focused=\"true\"]` |\n| `.ce-block__content` | `[data-blok-element-content]` |\n\n### Toolbar\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-toolbar` | `[data-blok-toolbar]` |\n| `.ce-toolbar__plus` | `[data-blok-testid=\"plus-button\"]` |\n| `.ce-toolbar__settings-btn` | `[data-blok-settings-toggler]` |\n| `.ce-toolbar__actions` | `[data-blok-testid=\"toolbar-actions\"]` |\n| `.ce-toolbox` | `[data-blok-toolbox]` |\n| `.ce-toolbox--opened` | `[data-blok-toolbox][data-blok-opened=\"true\"]` |\n\n### Inline Toolbar\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-inline-toolbar` | `[data-blok-testid=\"inline-toolbar\"]` |\n| `.ce-inline-tool` | `[data-blok-testid=\"inline-tool\"]` |\n| `.ce-inline-tool--link` | `[data-blok-testid=\"inline-tool-link\"]` |\n| `.ce-inline-tool--bold` | `[data-blok-testid=\"inline-tool-bold\"]` |\n| `.ce-inline-tool--italic` | `[data-blok-testid=\"inline-tool-italic\"]` |\n\n### Popover\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-popover` | `[data-blok-popover]` |\n| `.ce-popover--opened` | `[data-blok-popover][data-blok-opened=\"true\"]` |\n| `.ce-popover__container` | `[data-blok-popover-container]` |\n| `.ce-popover-item` | `[data-blok-testid=\"popover-item\"]` |\n| `.ce-popover-item--focused` | `[data-blok-focused=\"true\"]` |\n| `.ce-popover-item--confirmation` | `[data-blok-confirmation=\"true\"]` |\n| `.ce-popover-item__icon` | `[data-blok-testid=\"popover-item-icon\"]` |\n| `.ce-popover-item__icon--tool` | `[data-blok-testid=\"popover-item-icon-tool\"]` |\n\n### Tool-Specific Classes\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-paragraph` | `[data-blok-tool=\"paragraph\"]` |\n| `.ce-header` | `[data-blok-tool=\"header\"]` |\n\n### Conversion Toolbar & Settings\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-conversion-toolbar` | `[data-blok-testid=\"conversion-toolbar\"]` |\n| `.ce-conversion-tool` | `[data-blok-testid=\"conversion-tool\"]` |\n| `.ce-settings` | `[data-blok-testid=\"block-settings\"]` |\n| `.ce-tune` | `[data-blok-testid=\"block-tune\"]` |\n\n### Other Elements\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-stub` | `[data-blok-stub]` |\n| `.ce-drag-handle` | `[data-blok-drag-handle]` |\n| `.ce-ragged-right` | `[data-blok-ragged-right=\"true\"]` |\n\n### CDX List Classes\n\n| EditorJS | Blok |\n|----------|------|\n| `.cdx-list` | `[data-blok-list]` |\n| `.cdx-list__item` | `[data-blok-list-item]` |\n| `.cdx-list--ordered` | `[data-blok-list=\"ordered\"]` |\n| `.cdx-list--unordered` | `[data-blok-list=\"unordered\"]` |\n\n### CDX Utility Classes\n\n| EditorJS | Blok |\n|----------|------|\n| `.cdx-button` | `[data-blok-button]` |\n| `.cdx-input` | `[data-blok-input]` |\n| `.cdx-loader` | `[data-blok-loader]` |\n| `.cdx-search-field` | `[data-blok-search-field]` |\n\n---\n\n## Bundled Tools\n\nBlok includes Header and Paragraph tools. No external packages needed:\n\n```diff\n- import Header from '@editorjs/header';\n- import Paragraph from '@editorjs/paragraph';\n\n+ import Blok from '@bloklabs/core';\n\nconst editor = new Blok({\n  tools: {\n-   header: Header,\n-   paragraph: Paragraph,\n+   header: Blok.Header,\n+   paragraph: Blok.Paragraph, // optional, it's the default\n  },\n});\n```\n\n### Tool Configuration\n\nBoth bundled tools accept configuration options:\n\n#### HeaderConfig\n\n```typescript\nimport type { HeaderConfig } from '@bloklabs/core';\n\nconst editor = new Blok({\n  tools: {\n    header: {\n      class: Blok.Header,\n      config: {\n        placeholder: 'Enter a heading',\n        levels: [2, 3, 4],      // Restrict to H2-H4 only\n        defaultLevel: 2,        // Default to H2\n      } as HeaderConfig,\n    },\n  },\n});\n```\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `placeholder` | `string` | `''` | Placeholder text for empty header |\n| `levels` | `number[]` | `[1,2,3,4,5,6]` | Available heading levels (1-6) |\n| `defaultLevel` | `number` | `2` | Default heading level |\n\n#### ParagraphConfig\n\n```typescript\nimport type { ParagraphConfig } from '@bloklabs/core';\n\nconst editor = new Blok({\n  tools: {\n    paragraph: {\n      class: Blok.Paragraph,\n      config: {\n        placeholder: 'Start typing...',\n        preserveBlank: true,\n      } as ParagraphConfig,\n    },\n  },\n});\n```\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `placeholder` | `string` | `''` | Placeholder text for empty paragraph |\n| `preserveBlank` | `boolean` | `false` | Keep empty paragraphs when saving |\n\n### Delimiter → Divider\n\nEditor.js's `@editorjs/delimiter` is replaced by Blok's built-in `divider` tool:\n\n```diff\n- import Delimiter from '@editorjs/delimiter';\n\nconst editor = new Blok({\n  tools: {\n-   delimiter: Delimiter,\n+   divider: Blok.Divider,\n  },\n});\n```\n\n**Saved data migration:** The block type name changed from `\"delimiter\"` to `\"divider\"`. The data format is identical (empty `{}`):\n\n```diff\n  {\n-   \"type\": \"delimiter\",\n+   \"type\": \"divider\",\n    \"data\": {}\n  }\n```\n\n> **Note:** Blok automatically recognizes `\"delimiter\"` blocks and renders them as dividers, so existing articles work without data migration. However, renaming the type in your database is recommended for consistency.\n\n---\n\n## Migrating Custom Tools\n\nIf your project ships its own tools, here's what changes and what doesn't.\n\n### Custom Block Tools (port unchanged)\n\n**Custom block tools work as-is.** Blok's `BlockTool` interface keeps the same shape as EditorJS, read by the **same keys**:\n\n- Methods: `render()`, `save()`, `validate()`, `renderSettings()`, `merge()`, `onPaste()`, and the lifecycle hooks `rendered()`, `updated()`, `removed()`, `moved()`.\n- Statics: `toolbox`, `conversionConfig`, `pasteConfig`, `isReadOnlySupported`, `enableLineBreaks`.\n\nIn most cases you can drop your existing block tool into Blok without touching its code.\n\n#### New optional `setReadOnly(state)` method\n\nBlok adds an **optional** `setReadOnly(state: boolean)` method. It is not a breaking change:\n\n- **If you omit it**, read-only toggling still works — Blok falls back to a full re-render of the block (graceful degradation).\n- **If you implement it**, Blok performs a cheaper in-place toggle instead of re-rendering.\n\n```typescript\nclass MyTool {\n  // ...render / save / validate as before...\n\n  // Optional: enables the cheaper in-place read-only toggle\n  setReadOnly(state: boolean): void {\n    this.input.contentEditable = state ? 'false' : 'true';\n  }\n}\n```\n\n#### New optional statics\n\nTwo new **optional** statics exist for advanced cases; existing tools never need them:\n\n- `titleKey` — a translation key for the tool's toolbox title (i18n).\n- `provides` — lets one class register multiple block types.\n\n### Custom Inline Tools\n\n**This is the one API difference for custom tools.** EditorJS inline tools built a DOM button and used imperative `surround` / `checkState` / `renderActions` / `clear` methods. Blok's `InlineTool` (`types/tools/inline-tool.d.ts`) instead expects `render()` to return a declarative `MenuConfig` object with `onActivate` / `isActive` callbacks.\n\nYou have two paths:\n\n#### Fast path — wrap with `wrapLegacyInlineTool`\n\nTo keep an existing EditorJS inline tool working without a rewrite, wrap its class:\n\n```typescript\nimport { wrapLegacyInlineTool } from '@bloklabs/core';\nimport MarkerTool from './marker-tool'; // your existing EditorJS inline tool\n\nconst editor = new Blok({\n  tools: {\n    marker: wrapLegacyInlineTool(MarkerTool),\n  },\n});\n```\n\nThe shim adapts the legacy contract automatically: it calls your tool's `render()` for the icon, routes `onActivate` → `surround(range)` and `isActive` → `checkState(selection)`, and forwards the static `title` / `shortcut` / `sanitize`. Without wrapping, Blok silently skips a legacy `render()` that returns an `HTMLElement`, so the tool would vanish from the inline toolbar. `renderActions()` / `clear()` are not bridged.\n\n#### Native path — rewrite to `MenuConfig` (recommended)\n\nFor full access to Blok features (nested items, confirmation), port to the native shape:\n\n#### Before (EditorJS)\n\n```typescript\nclass MarkerTool {\n  static get isInline() { return true; }\n  static get title() { return 'Marker'; }\n\n  private button: HTMLButtonElement;\n\n  render(): HTMLElement {\n    this.button = document.createElement('button');\n    this.button.innerHTML = '<svg>...</svg>';\n    return this.button;\n  }\n\n  // Apply / remove formatting on the current range\n  surround(range: Range): void {\n    document.execCommand('backColor', false, '#ffd700');\n  }\n\n  // Reflect active state by inspecting the selection\n  checkState(selection: Selection): boolean {\n    const isActive = /* ...inspect selection... */;\n    this.button.classList.toggle('active', isActive);\n    return isActive;\n  }\n\n  renderActions(): HTMLElement { /* extra UI */ }\n  clear(): void { /* reset extra UI */ }\n}\n```\n\n#### After (Blok)\n\n```typescript\nimport type { InlineTool, MenuConfig } from '@bloklabs/core';\n\nclass MarkerTool implements InlineTool {\n  static isInline = true;\n  static title = 'Marker';\n  static titleKey = 'marker'; // optional i18n key\n\n  // render() now returns a MenuConfig object, not an HTMLElement\n  render(): MenuConfig {\n    return {\n      icon: '<svg>...</svg>',\n      name: 'marker',\n      // surround(range) logic moves here\n      onActivate: () => {\n        document.execCommand('backColor', false, '#ffd700');\n      },\n      // checkState(selection) logic moves here\n      isActive: () => {\n        const selection = window.getSelection();\n        return selection ? /* ...inspect selection... */ false : false;\n      },\n    };\n  }\n}\n```\n\n> See `src/components/inline-tools/inline-tool-bold.ts` for Blok's canonical inline tool. Its `render()` returns a `MenuConfig` with `onActivate` (apply/remove bold) and `isActive` (read the selection).\n\n#### Mapping reference\n\n| EditorJS | Blok |\n|----------|------|\n| `render()` returns an `HTMLElement` button | `render()` returns a `MenuConfig` `{ icon, name, onActivate, isActive }` |\n| `surround(range)` | logic moves into `onActivate()` |\n| `checkState(selection)` | logic moves into `isActive()` |\n| `renderActions()` / `clear()` | **removed** — no direct equivalent; use `MenuConfig` `children` for nested items |\n| `static get isInline()` / `static get title()` | still apply (plus optional `titleKey` for i18n) |\n\n---\n\n## Saved Content / Data Migration\n\nExisting EditorJS output data keeps working. Blok converts legacy block shapes to its own format **automatically when the block renders** — no migration script needed.\n\n### Auto-Migrated on Load\n\nThese EditorJS block types and data shapes are recognized and converted on `render()`:\n\n| EditorJS block / shape | Becomes in Blok |\n|------------------------|-----------------|\n| `list` (nested items **and** string-array items) | Blok `list` |\n| `checklist` (standalone tool) | Blok `list` (checklist style) |\n| `image` `{ file: { url }, withBorder, stretched }` | Blok `image` |\n| `table` (HTML-string cells) | Blok `table` |\n| `header` | Blok `header` |\n| `code` | Blok `code` |\n| `delimiter` | Blok `divider` |\n| `linkTool` | Blok `bookmark` |\n\nNo action is required — load your existing data and it renders correctly.\n\n### Dropped Fields\n\nA few EditorJS fields have no Blok equivalent and are **dropped** on load. The block still renders; only these specific fields are lost:\n\n| Block | Dropped field(s) |\n|-------|------------------|\n| `quote` | `caption`, `alignment` |\n| `image` | `withBackground` |\n| `linkTool` | `meta.site_name` |\n| `list` item | `meta` |\n\nWhen migration drops one of these, Blok emits a `console.warn` (prefixed `[Blok migration]`) naming the block type and field, so the loss is visible in the console rather than silent. If you depend on any of these, capture them before migrating.\n\n---\n\n## Configuration Defaults\n\n| Option | EditorJS | Blok |\n|--------|----------|------|\n| `holder` | `\"editorjs\"` | `\"blok\"` |\n| `defaultBlock` | `\"paragraph\"` | `\"paragraph\"` |\n\n---\n\n## New API Methods\n\nBlok exposes shorthand methods directly on the instance:\n\n```javascript\nconst editor = new Blok({ ... });\n\n// Shorthand methods\nawait editor.save();      // Same as editor.saver.save()\neditor.clear();           // Same as editor.blocks.clear()\nawait editor.render(data);// Same as editor.blocks.render(data)\neditor.focus();           // Same as editor.caret.focus()\n\n// Event methods\neditor.on('change', handler);   // Same as editor.events.on()\neditor.off('change', handler);  // Same as editor.events.off()\neditor.emit('custom', data);    // Same as editor.events.emit()\n```\n\n---\n\n## DOM Selectors\n\nBlok uses consistent `data-blok-interface` attributes for major UI components:\n\n```javascript\n// Find the editor wrapper\nconst editorWrapper = document.querySelector('[data-blok-interface=\"blok\"]');\n\n// Find inline toolbar\nconst inlineToolbar = document.querySelector('[data-blok-interface=\"inline-toolbar\"]');\n\n// Find tooltip\nconst tooltip = document.querySelector('[data-blok-interface=\"tooltip\"]');\n```\n\nThese selectors are stable and recommended for programmatic access to Blok's UI components.\n\n### Key Changes\n\n1. **Prefix custom classes** with `blok-` instead of `ce-` or `cdx-`\n2. **Use `data-blok-*`** attributes instead of `data-*`\n\n---\n\n## E2E Test Selectors\n\nUpdate your test selectors to use Blok's `data-blok-testid` attributes:\n\n| EditorJS | Blok |\n|----------|------|\n| `[data-cy=editorjs]` | `[data-blok-testid=\"blok-editor\"]` |\n| `.ce-block` | `[data-blok-element]` |\n| `.ce-block__content` | `[data-blok-element-content]` |\n| `.ce-toolbar` | `[data-blok-toolbar]` |\n| `.ce-toolbar__plus` | `[data-blok-testid=\"plus-button\"]` |\n| `.ce-toolbar__settings-btn` | `[data-blok-settings-toggler]` |\n| `.ce-toolbar__actions` | `[data-blok-testid=\"toolbar-actions\"]` |\n| `.ce-toolbox` | `[data-blok-toolbox]` |\n| `.ce-inline-toolbar` | `[data-blok-testid=\"inline-toolbar\"]` |\n| `.ce-popover` | `[data-blok-popover]` |\n| `.ce-popover-item` | `[data-blok-testid=\"popover-item\"]` |\n| `[data-item-name=\"...\"]` | `[data-blok-item-name=\"...\"]` |\n\n### Playwright Example\n\n```diff\n// EditorJS\n- await page.locator('[data-cy=editorjs] .ce-block').click();\n- await page.locator('.ce-toolbar__settings-btn').click();\n- await page.locator('[data-item-name=\"delete\"]').click();\n\n// Blok\n+ await page.locator('[data-blok-element]').click();\n+ await page.locator('[data-blok-settings-toggler]').click();\n+ await page.locator('[data-blok-item-name=\"delete\"]').click();\n```\n\n### Additional Test Selectors\n\n| Element | Selector |\n|---------|----------|\n| Block tunes popover | `[data-blok-testid=\"block-tunes-popover\"]` |\n| Popover search input | `[data-blok-testid=\"popover-search-input\"]` |\n| Popover item title | `[data-blok-testid=\"popover-item-title\"]` |\n| Popover overlay | `[data-blok-testid=\"popover-overlay\"]` |\n| Inline tool input | `[data-blok-testid=\"inline-tool-input\"]` |\n| Tooltip | `[data-blok-testid=\"tooltip\"]` |\n| Redactor | `[data-blok-testid=\"redactor\"]` |\n| Toolbox | `[data-blok-testid=\"toolbox\"]` |\n| Toolbox popover | `[data-blok-testid=\"toolbox-popover\"]` |\n| Selection overlay | `[data-blok-testid=\"overlay\"]` |\n| Selection rectangle | `[data-blok-testid=\"overlay-rectangle\"]` |\n\n---\n\n### State Selectors\n\n| State | Selector |\n|-------|----------|\n| Toolbar opened | `[data-blok-opened=\"true\"]` |\n| Block selected | `[data-blok-selected=\"true\"]` |\n| Popover opened | `[data-blok-popover-opened=\"true\"]` |\n| Item focused | `[data-blok-focused=\"true\"]` |\n| Item disabled | `[data-blok-disabled=\"true\"]` |\n| Nested popover | `[data-blok-nested=\"true\"]` |\n| Toolbox opened | `[data-blok-toolbox-opened=\"true\"]` |\n| Block dragging | `[data-blok-dragging=\"true\"]` |\n| Element hidden | `[data-blok-hidden=\"true\"]` |\n| RTL mode | `[data-blok-rtl=\"true\"]` |\n\n---\n\n## Quick Checklist\n\n- [ ] Replace `new EditorJS` with `new Blok`\n- [ ] Update imports from `@editorjs/*` to `@bloklabs/core`\n- [ ] Change holder from `editorjs` to `blok` (or specify explicitly)\n- [ ] Use bundled tools: `Blok.Header`, `Blok.Paragraph`\n- [ ] Replace `@editorjs/delimiter` with built-in `Blok.Divider`\n- [ ] Update `EditorConfig` type to `BlokConfig`\n- [ ] Replace `data-id` with `data-blok-id` in queries\n- [ ] Replace `data-item-name` with `data-blok-item-name`\n- [ ] Replace `.ce-*` selectors with `[data-blok-*]` attributes\n- [ ] Replace `.cdx-*` selectors with `[data-blok-*]` attributes\n- [ ] Update E2E test selectors\n", n = (e) => [
+var t = "# Migrating from EditorJS to Blok\n\nThis guide covers the breaking changes when migrating from EditorJS to Blok.\n\n## Table of Contents\n\n- [Supported Editor.js Versions](#supported-editorjs-versions)\n- [Core Changes](#core-changes)\n- [Data Attributes](#data-attributes)\n- [CSS Classes](#css-classes)\n- [Bundled Tools](#bundled-tools)\n  - [Tool Configuration](#tool-configuration)\n  - [Lifecycle Hooks](#lifecycle-hooks)\n  - [Delimiter → Divider](#delimiter--divider)\n- [Migrating Custom Tools](#migrating-custom-tools)\n  - [Custom Block Tools (port unchanged)](#custom-block-tools-port-unchanged)\n  - [Custom Inline Tools (breaking rewrite)](#custom-inline-tools-breaking-rewrite)\n- [Saved Content / Data Migration](#saved-content--data-migration)\n  - [Auto-Migrated on Load](#auto-migrated-on-load)\n  - [Dropped Fields](#dropped-fields)\n- [Configuration Defaults](#configuration-defaults)\n- [New API Methods](#new-api-methods)\n- [DOM Selectors](#dom-selectors)\n- [E2E Test Selectors](#e2e-test-selectors)\n\n---\n\n## Supported Editor.js Versions\n\nBlok targets the **Editor.js 2.x** line. The [codemod](./codemod) is built against the package versions a typical Editor.js 2.x project ships — `@editorjs/editorjs@^2.28.x`, `@editorjs/header@^2.8.x`, `@editorjs/paragraph@^2.11.x`, `@editorjs/list@^1.9.x` — and the runtime auto-migration reads the saved-data shapes those versions produce. Older 2.x data formats are still recognized; the matrix below describes coverage per block/tool, not per Editor.js point release.\n\nThere is no pinned single source version: Blok is API-compatible with the Editor.js 2.x `BlockTool` / `InlineTool` contracts, so what matters is **which tools your content uses**, covered below.\n\n### Compatibility Matrix\n\nHow each Editor.js block/tool is handled. \"Auto-migrated at runtime\" means the conversion happens on `render()` with no script needed; \"Codemod\" means the [codemod](./codemod) rewrites saved JSON; \"Drop-in unchanged\" means the data passes through as-is; \"Not bundled\" means Blok ships no equivalent tool, so you must register your own (a ported Editor.js block tool works unchanged — see [Migrating Custom Tools](#migrating-custom-tools)) or the block renders as a preserved stub with a `console.warn` and round-trips untouched on save.\n\n| Editor.js block / tool | Migration status | Notes |\n|------------------------|------------------|-------|\n| `paragraph` | Drop-in unchanged | Bundled as `Blok.Paragraph` (the default block). |\n| `header` | Drop-in unchanged | Bundled as `Blok.Header`. |\n| `list` (nested **and** string-array items) | Auto-migrated at runtime **+** codemod | Each item expands to a flat `list` block. |\n| `checklist` (standalone tool) | Auto-migrated at runtime **+** codemod | Becomes `list` blocks with checklist style. |\n| `toggleList` | Auto-migrated at runtime **+** codemod → `toggle` | Becomes a `toggle` block (or a toggle `header` when `titleVariant` is set); body blocks flatten into parented children. |\n| `callout` (legacy `body`/`variant` shape) | Auto-migrated at runtime **+** codemod | Legacy `{ body, variant, emoji }` → flat `{ emoji, textColor, backgroundColor }`; body blocks flatten into parented children. |\n| `image`, `simple-image` | Auto-migrated at runtime **+** codemod | `file.url` (or `simple-image`'s flat `url`) → `url`; `withBorder` → `frame`, `stretched: true` → `size: full`. `withBackground` is dropped (warns). |\n| `linkTool` | Auto-migrated at runtime **+** codemod → `bookmark` | `meta` flattens onto the bookmark shape; `meta.site_name` is dropped (warns). |\n| `delimiter` | Codemod renames type → `divider` | Data format is identical (`{}`). Also recognized at render, so existing data works without the rename. |\n| `quote` | Auto-migrated at runtime **+** codemod | `caption` becomes a trailing `paragraph` sibling; `alignment` is dropped (warns). The quote text/size render unchanged. |\n| `code` | Drop-in unchanged | Passes through to Blok's bundled `code` tool. |\n| `table` (HTML-string cells) | Auto-migrated at runtime **+** codemod | Each non-empty cell becomes a `{ blocks: [id] }` cell-ref plus a child `paragraph` (`parent` = table id); empty cells become `{ blocks: [] }`. `withHeadings` is preserved. Cells already in block-ref shape pass through. |\n| `embed` | Drop-in unchanged | Bundled as `Blok.Embed`. `{ service, source, embed, width, height, caption }` map 1:1; iframe providers render correctly (Blok-only fields default). |\n| `raw` | Auto-migrated at runtime **+** codemod → `code` | Blok has no raw tool; `{ html }` becomes a `code` block showing the markup as source verbatim. |\n| `warning` | Auto-migrated at runtime **+** codemod → `callout` | Becomes a ⚠️ orange `callout`; `title` and `message` become child `paragraph` blocks. |\n| `attaches` | Auto-migrated at runtime **+** codemod → `bookmark` | `file.url` + `title` map to a `bookmark`; file metadata (`name`/`size`/`extension`) is dropped (warns). |\n| `marker`, `inlineCode` (inline) | Not bundled | Register your own (port unchanged or wrap with `wrapLegacyInlineTool`). See [Custom Inline Tools](#custom-inline-tools). |\n| Other third-party block tools (`personality`, `button`, audio, …) | Not bundled | No built-in equivalent. Register a tool to render them; otherwise the block is preserved as a stub (warns) and survives a save/load round-trip. |\n\n> **Heads-up:** any block type Blok doesn't recognize and has no registered tool for renders as a stub and logs `Tool «<name>» is not found`. Its data is preserved, so registering the tool later restores the block.\n\n---\n\n## Core Changes\n\n### Class Name\n\n```diff\n- import EditorJS from '@editorjs/editorjs';\n+ import Blok from '@bloklabs/core';\n\n- const editor = new EditorJS({ ... });\n+ const editor = new Blok({ ... });\n```\n\n`Blok` is also exported as the **default export** and under an `EditorJS` alias, so you can keep your existing variable name and only change the import path — a minimal-diff, drop-in migration:\n\n```diff\n- import EditorJS from '@editorjs/editorjs';\n+ import { EditorJS } from '@bloklabs/core';\n\n  const editor = new EditorJS({ ... }); // unchanged\n```\n\n`import Blok`, `import { Blok }`, and `import { EditorJS }` all resolve to the same class.\n\n### Default Holder\n\nThe default holder ID changed from `editorjs` to `blok`:\n\n```diff\n- <div id=\"editorjs\"></div>\n+ <div id=\"blok\"></div>\n```\n\nOr specify explicitly:\n\n```javascript\nconst editor = new Blok({\n  holder: 'my-editor', // works the same as before\n});\n```\n\n### TypeScript Types\n\n```diff\n- import type { EditorConfig, OutputData } from '@editorjs/editorjs';\n+ import type { BlokConfig, OutputData } from '@bloklabs/core';\n```\n\n---\n\n## Data Attributes\n\nBlok uses `data-blok-*` attributes instead of EditorJS's mixed naming conventions.\n\n| EditorJS | Blok |\n|----------|------|\n| `data-id` | `data-blok-id` |\n| `data-item-name` | `data-blok-item-name` |\n| `data-empty` | `data-blok-empty` |\n| `.ce-block--selected` (class) | `data-blok-selected=\"true\"` |\n| — | `data-blok-component` (tool name) |\n| — | `data-blok-interface` (element type) |\n| — | `data-blok-testid` (testing) |\n| — | `data-blok-opened` (toolbar state) |\n| — | `data-blok-placeholder` |\n| — | `data-blok-stretched` |\n| — | `data-blok-focused` |\n| — | `data-blok-popover-opened` |\n| — | `data-blok-tool` (tool name on rendered element) |\n| — | `data-blok-dragging` (block being dragged) |\n| — | `data-blok-hidden` (hidden state) |\n| — | `data-blok-rtl` (RTL mode) |\n| — | `data-blok-drag-handle` (drag handle element) |\n| — | `data-blok-overlay` (selection overlay) |\n| — | `data-blok-overlay-rectangle` (selection rectangle) |\n\n### Querying Blocks\n\n```diff\n- document.querySelector('[data-id=\"abc123\"]');\n+ document.querySelector('[data-blok-id=\"abc123\"]');\n\n- document.querySelector('[data-item-name=\"bold\"]');\n+ document.querySelector('[data-blok-item-name=\"bold\"]');\n```\n\n---\n\n## CSS Classes\n\nBlok replaces BEM class names with data attributes for selection.\n\n### Editor Wrapper\n\n| EditorJS | Blok |\n|----------|------|\n| `.codex-editor` | `[data-blok-editor]` |\n| `.codex-editor__redactor` | `[data-blok-redactor]` |\n| `.codex-editor--rtl` | `[data-blok-rtl=\"true\"]` |\n\n### Block Elements\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-block` | `[data-blok-element]` |\n| `.ce-block--selected` | `[data-blok-selected=\"true\"]` |\n| `.ce-block--stretched` | `[data-blok-stretched=\"true\"]` |\n| `.ce-block--focused` | `[data-blok-focused=\"true\"]` |\n| `.ce-block__content` | `[data-blok-element-content]` |\n\n### Toolbar\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-toolbar` | `[data-blok-toolbar]` |\n| `.ce-toolbar__plus` | `[data-blok-testid=\"plus-button\"]` |\n| `.ce-toolbar__settings-btn` | `[data-blok-settings-toggler]` |\n| `.ce-toolbar__actions` | `[data-blok-testid=\"toolbar-actions\"]` |\n| `.ce-toolbox` | `[data-blok-toolbox]` |\n| `.ce-toolbox--opened` | `[data-blok-toolbox][data-blok-opened=\"true\"]` |\n\n### Inline Toolbar\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-inline-toolbar` | `[data-blok-testid=\"inline-toolbar\"]` |\n| `.ce-inline-tool` | `[data-blok-testid=\"inline-tool\"]` |\n| `.ce-inline-tool--link` | `[data-blok-testid=\"inline-tool-link\"]` |\n| `.ce-inline-tool--bold` | `[data-blok-testid=\"inline-tool-bold\"]` |\n| `.ce-inline-tool--italic` | `[data-blok-testid=\"inline-tool-italic\"]` |\n\n### Popover\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-popover` | `[data-blok-popover]` |\n| `.ce-popover--opened` | `[data-blok-popover][data-blok-opened=\"true\"]` |\n| `.ce-popover__container` | `[data-blok-popover-container]` |\n| `.ce-popover-item` | `[data-blok-testid=\"popover-item\"]` |\n| `.ce-popover-item--focused` | `[data-blok-focused=\"true\"]` |\n| `.ce-popover-item--confirmation` | `[data-blok-confirmation=\"true\"]` |\n| `.ce-popover-item__icon` | `[data-blok-testid=\"popover-item-icon\"]` |\n| `.ce-popover-item__icon--tool` | `[data-blok-testid=\"popover-item-icon-tool\"]` |\n\n### Tool-Specific Classes\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-paragraph` | `[data-blok-tool=\"paragraph\"]` |\n| `.ce-header` | `[data-blok-tool=\"header\"]` |\n\n### Conversion Toolbar & Settings\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-conversion-toolbar` | `[data-blok-testid=\"conversion-toolbar\"]` |\n| `.ce-conversion-tool` | `[data-blok-testid=\"conversion-tool\"]` |\n| `.ce-settings` | `[data-blok-testid=\"block-settings\"]` |\n| `.ce-tune` | `[data-blok-testid=\"block-tune\"]` |\n\n### Other Elements\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-stub` | `[data-blok-stub]` |\n| `.ce-drag-handle` | `[data-blok-drag-handle]` |\n| `.ce-ragged-right` | `[data-blok-ragged-right=\"true\"]` |\n\n### CDX List Classes\n\n| EditorJS | Blok |\n|----------|------|\n| `.cdx-list` | `[data-blok-list]` |\n| `.cdx-list__item` | `[data-blok-list-item]` |\n| `.cdx-list--ordered` | `[data-blok-list=\"ordered\"]` |\n| `.cdx-list--unordered` | `[data-blok-list=\"unordered\"]` |\n\n### CDX Utility Classes\n\n| EditorJS | Blok |\n|----------|------|\n| `.cdx-button` | `[data-blok-button]` |\n| `.cdx-input` | `[data-blok-input]` |\n| `.cdx-loader` | `[data-blok-loader]` |\n| `.cdx-search-field` | `[data-blok-search-field]` |\n\n---\n\n## Bundled Tools\n\nBlok includes Header and Paragraph tools. No external packages needed:\n\n```diff\n- import Header from '@editorjs/header';\n- import Paragraph from '@editorjs/paragraph';\n\n+ import Blok from '@bloklabs/core';\n\nconst editor = new Blok({\n  tools: {\n-   header: Header,\n-   paragraph: Paragraph,\n+   header: Blok.Header,\n+   paragraph: Blok.Paragraph, // optional, it's the default\n  },\n});\n```\n\n### Tool Configuration\n\nBoth bundled tools accept configuration options:\n\n#### HeaderConfig\n\n```typescript\nimport type { HeaderConfig } from '@bloklabs/core';\n\nconst editor = new Blok({\n  tools: {\n    header: {\n      class: Blok.Header,\n      config: {\n        placeholder: 'Enter a heading',\n        levels: [2, 3, 4],      // Restrict to H2-H4 only\n        defaultLevel: 2,        // Default to H2\n      } as HeaderConfig,\n    },\n  },\n});\n```\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `placeholder` | `string` | `''` | Placeholder text for empty header |\n| `levels` | `number[]` | `[1,2,3,4,5,6]` | Available heading levels (1-6) |\n| `defaultLevel` | `number` | `2` | Default heading level |\n\n#### ParagraphConfig\n\n```typescript\nimport type { ParagraphConfig } from '@bloklabs/core';\n\nconst editor = new Blok({\n  tools: {\n    paragraph: {\n      class: Blok.Paragraph,\n      config: {\n        placeholder: 'Start typing...',\n        preserveBlank: true,\n      } as ParagraphConfig,\n    },\n  },\n});\n```\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `placeholder` | `string` | `''` | Placeholder text for empty paragraph |\n| `preserveBlank` | `boolean` | `false` | Keep empty paragraphs when saving |\n\n### Delimiter → Divider\n\nEditor.js's `@editorjs/delimiter` is replaced by Blok's built-in `divider` tool:\n\n```diff\n- import Delimiter from '@editorjs/delimiter';\n\nconst editor = new Blok({\n  tools: {\n-   delimiter: Delimiter,\n+   divider: Blok.Divider,\n  },\n});\n```\n\n**Saved data migration:** The block type name changed from `\"delimiter\"` to `\"divider\"`. The data format is identical (empty `{}`):\n\n```diff\n  {\n-   \"type\": \"delimiter\",\n+   \"type\": \"divider\",\n    \"data\": {}\n  }\n```\n\n> **Note:** Blok automatically recognizes `\"delimiter\"` blocks and renders them as dividers, so existing articles work without data migration. However, renaming the type in your database is recommended for consistency.\n\n---\n\n## Migrating Custom Tools\n\nIf your project ships its own tools, here's what changes and what doesn't.\n\n### Custom Block Tools (port unchanged)\n\n**Custom block tools work as-is.** Blok's `BlockTool` interface keeps the same shape as EditorJS, read by the **same keys**:\n\n- Methods: `render()`, `save()`, `validate()`, `renderSettings()`, `merge()`, `onPaste()`, and the lifecycle hooks `rendered()`, `updated()`, `removed()`, `moved()`.\n- Statics: `toolbox`, `conversionConfig`, `pasteConfig`, `isReadOnlySupported`, `enableLineBreaks`.\n\nIn most cases you can drop your existing block tool into Blok without touching its code.\n\n#### New optional `setReadOnly(state)` method\n\nBlok adds an **optional** `setReadOnly(state: boolean)` method. It is not a breaking change:\n\n- **If you omit it**, read-only toggling still works — Blok falls back to a full re-render of the block (graceful degradation).\n- **If you implement it**, Blok performs a cheaper in-place toggle instead of re-rendering.\n\n```typescript\nclass MyTool {\n  // ...render / save / validate as before...\n\n  // Optional: enables the cheaper in-place read-only toggle\n  setReadOnly(state: boolean): void {\n    this.input.contentEditable = state ? 'false' : 'true';\n  }\n}\n```\n\n#### New optional statics\n\nTwo new **optional** statics exist for advanced cases; existing tools never need them:\n\n- `titleKey` — a translation key for the tool's toolbox title (i18n).\n- `provides` — lets one class register multiple block types.\n\n### Custom Inline Tools\n\n**This is the one API difference for custom tools.** EditorJS inline tools built a DOM button and used imperative `surround` / `checkState` / `renderActions` / `clear` methods. Blok's `InlineTool` (`types/tools/inline-tool.d.ts`) instead expects `render()` to return a declarative `MenuConfig` object with `onActivate` / `isActive` callbacks.\n\nYou have two paths:\n\n#### Fast path — wrap with `wrapLegacyInlineTool`\n\nTo keep an existing EditorJS inline tool working without a rewrite, wrap its class:\n\n```typescript\nimport { wrapLegacyInlineTool } from '@bloklabs/core';\nimport MarkerTool from './marker-tool'; // your existing EditorJS inline tool\n\nconst editor = new Blok({\n  tools: {\n    marker: wrapLegacyInlineTool(MarkerTool),\n  },\n});\n```\n\nThe shim adapts the legacy contract automatically: it calls your tool's `render()` for the icon, routes `onActivate` → `surround(range)` and `isActive` → `checkState(selection)`, and forwards the static `title` / `shortcut` / `sanitize`. Without wrapping, Blok silently skips a legacy `render()` that returns an `HTMLElement`, so the tool would vanish from the inline toolbar. `renderActions()` / `clear()` are not bridged.\n\n#### Native path — rewrite to `MenuConfig` (recommended)\n\nFor full access to Blok features (nested items, confirmation), port to the native shape:\n\n#### Before (EditorJS)\n\n```typescript\nclass MarkerTool {\n  static get isInline() { return true; }\n  static get title() { return 'Marker'; }\n\n  private button: HTMLButtonElement;\n\n  render(): HTMLElement {\n    this.button = document.createElement('button');\n    this.button.innerHTML = '<svg>...</svg>';\n    return this.button;\n  }\n\n  // Apply / remove formatting on the current range\n  surround(range: Range): void {\n    document.execCommand('backColor', false, '#ffd700');\n  }\n\n  // Reflect active state by inspecting the selection\n  checkState(selection: Selection): boolean {\n    const isActive = /* ...inspect selection... */;\n    this.button.classList.toggle('active', isActive);\n    return isActive;\n  }\n\n  renderActions(): HTMLElement { /* extra UI */ }\n  clear(): void { /* reset extra UI */ }\n}\n```\n\n#### After (Blok)\n\n```typescript\nimport type { InlineTool, MenuConfig } from '@bloklabs/core';\n\nclass MarkerTool implements InlineTool {\n  static isInline = true;\n  static title = 'Marker';\n  static titleKey = 'marker'; // optional i18n key\n\n  // render() now returns a MenuConfig object, not an HTMLElement\n  render(): MenuConfig {\n    return {\n      icon: '<svg>...</svg>',\n      name: 'marker',\n      // surround(range) logic moves here\n      onActivate: () => {\n        document.execCommand('backColor', false, '#ffd700');\n      },\n      // checkState(selection) logic moves here\n      isActive: () => {\n        const selection = window.getSelection();\n        return selection ? /* ...inspect selection... */ false : false;\n      },\n    };\n  }\n}\n```\n\n> See `src/components/inline-tools/inline-tool-bold.ts` for Blok's canonical inline tool. Its `render()` returns a `MenuConfig` with `onActivate` (apply/remove bold) and `isActive` (read the selection).\n\n#### Mapping reference\n\n| EditorJS | Blok |\n|----------|------|\n| `render()` returns an `HTMLElement` button | `render()` returns a `MenuConfig` `{ icon, name, onActivate, isActive }` |\n| `surround(range)` | logic moves into `onActivate()` |\n| `checkState(selection)` | logic moves into `isActive()` |\n| `renderActions()` / `clear()` | **removed** — no direct equivalent; use `MenuConfig` `children` for nested items |\n| `static get isInline()` / `static get title()` | still apply (plus optional `titleKey` for i18n) |\n\n#### Mark-shaped tools — skip the DOM plumbing entirely (`api.marks`)\n\nIf your inline tool wraps text in one element (a highlight `<span>`, a colour\n`<mark>`, a comment anchor), you no longer need to write any range logic.\nDescribe the wrapper as a `MarkSpec` and drive it through `api.marks`\n(`has` / `find` / `read` / `apply` / `remove` / `toggle`, all range-aware):\n\n```typescript\nclass HighlightTool {\n  static isInline = true;\n  static title = 'Highlight';\n  static sanitize = markSanitizerConfig(HIGHLIGHT); // derived, stays in sync\n\n  constructor({ api }) {\n    this.api = api;\n  }\n\n  render() {\n    return {\n      icon: '<svg>…</svg>',\n      name: 'highlight',\n      onActivate: () => this.api.marks.toggle(HIGHLIGHT),\n      isActive: () => this.api.marks.has(HIGHLIGHT),\n    };\n  }\n}\n\nconst HIGHLIGHT = { tag: 'span', className: 'my-highlight' };\n```\n\n(React consumers get the same thing as a single spec field:\n`createReactInlineTool({ …, mark: { tag: 'span', className: 'my-highlight' } })`.)\n\n**Behavioural note when porting hand-rolled range code onto `api.marks`.** The\nengine is *more correct* than typical hand-rolled implementations on\nselections that span a wrapper boundary — expect these deltas:\n\nBefore (typical hand-rolled tool):\n\n- A selection covering half a wrapper plus outside text unwrapped or re-wrapped\n  the WHOLE wrapper (formatting outside the selection was lost).\n- Toggling \"off\" on a partially covered wrapper removed the whole run.\n- `Ctrl+A` selections silently dropped trailing spaces from the formatted run\n  (Chromium/WebKit place the range end before trailing whitespace).\n\nAfter (`api.marks`):\n\n- Partially covered wrappers are split at the selection boundaries; text\n  outside the selection keeps its formatting.\n- `apply` and `remove` extend the range over browser-excluded trailing\n  whitespace, so the visible selection and the formatted run agree (and\n  toggling off never strands a whitespace-only wrapper).\n- Two specs sharing a wrapper family (same tag/classes, different declared\n  style property — e.g. text colour and background) compose on ONE element\n  instead of nesting or cancelling each other.\n- Legacy tag variants can be declared as the SAME mark via `aliasTags`\n  (e.g. `{ tag: 'strong', aliasTags: ['b'] }`): alias-tagged wrappers are\n  recognized, split and stripped like canonical ones, while newly created\n  wrappers always use `tag`. Blok's own Bold (`strong`+`b`) and Italic\n  (`i`+`em`) run on exactly this.\n\n---\n\n## Saved Content / Data Migration\n\nExisting EditorJS output data keeps working. Blok converts legacy block shapes to its own format **automatically when the block renders** — no migration script needed.\n\n### Auto-Migrated on Load\n\nThese EditorJS block types and data shapes are recognized and converted on `render()`:\n\n| EditorJS block / shape | Becomes in Blok |\n|------------------------|-----------------|\n| `list` (nested items **and** string-array items) | Blok `list` |\n| `checklist` (standalone tool) | Blok `list` (checklist style) |\n| `image` `{ file: { url }, withBorder, stretched }` | Blok `image` |\n| `table` (HTML-string cells) | Blok `table` |\n| `header` | Blok `header` |\n| `code` | Blok `code` |\n| `delimiter` | Blok `divider` |\n| `linkTool` | Blok `bookmark` |\n\nNo action is required — load your existing data and it renders correctly.\n\n### Dropped Fields\n\nA few EditorJS fields have no Blok equivalent and are **dropped** on load. The block still renders; only these specific fields are lost:\n\n| Block | Dropped field(s) |\n|-------|------------------|\n| `quote` | `caption`, `alignment` |\n| `image` | `withBackground` |\n| `linkTool` | `meta.site_name` |\n| `list` item | `meta` |\n\nWhen migration drops one of these, Blok emits a `console.warn` (prefixed `[Blok migration]`) naming the block type and field, so the loss is visible in the console rather than silent. If you depend on any of these, capture them before migrating.\n\n---\n\n## Configuration Defaults\n\n| Option | EditorJS | Blok |\n|--------|----------|------|\n| `holder` | `\"editorjs\"` | `\"blok\"` |\n| `defaultBlock` | `\"paragraph\"` | `\"paragraph\"` |\n\n---\n\n## New API Methods\n\nBlok exposes shorthand methods directly on the instance:\n\n```javascript\nconst editor = new Blok({ ... });\n\n// Shorthand methods\nawait editor.save();      // Same as editor.saver.save()\neditor.clear();           // Same as editor.blocks.clear()\nawait editor.render(data);// Same as editor.blocks.render(data)\neditor.focus();           // Same as editor.caret.focus()\n\n// Event methods\neditor.on('change', handler);   // Same as editor.events.on()\neditor.off('change', handler);  // Same as editor.events.off()\neditor.emit('custom', data);    // Same as editor.events.emit()\n```\n\n---\n\n## DOM Selectors\n\nBlok uses consistent `data-blok-interface` attributes for major UI components:\n\n```javascript\n// Find the editor wrapper\nconst editorWrapper = document.querySelector('[data-blok-interface=\"blok\"]');\n\n// Find inline toolbar\nconst inlineToolbar = document.querySelector('[data-blok-interface=\"inline-toolbar\"]');\n\n// Find tooltip\nconst tooltip = document.querySelector('[data-blok-interface=\"tooltip\"]');\n```\n\nThese selectors are stable and recommended for programmatic access to Blok's UI components.\n\n### Key Changes\n\n1. **Prefix custom classes** with `blok-` instead of `ce-` or `cdx-`\n2. **Use `data-blok-*`** attributes instead of `data-*`\n\n---\n\n## E2E Test Selectors\n\nUpdate your test selectors to use Blok's `data-blok-testid` attributes:\n\n| EditorJS | Blok |\n|----------|------|\n| `[data-cy=editorjs]` | `[data-blok-testid=\"blok-editor\"]` |\n| `.ce-block` | `[data-blok-element]` |\n| `.ce-block__content` | `[data-blok-element-content]` |\n| `.ce-toolbar` | `[data-blok-toolbar]` |\n| `.ce-toolbar__plus` | `[data-blok-testid=\"plus-button\"]` |\n| `.ce-toolbar__settings-btn` | `[data-blok-settings-toggler]` |\n| `.ce-toolbar__actions` | `[data-blok-testid=\"toolbar-actions\"]` |\n| `.ce-toolbox` | `[data-blok-toolbox]` |\n| `.ce-inline-toolbar` | `[data-blok-testid=\"inline-toolbar\"]` |\n| `.ce-popover` | `[data-blok-popover]` |\n| `.ce-popover-item` | `[data-blok-testid=\"popover-item\"]` |\n| `[data-item-name=\"...\"]` | `[data-blok-item-name=\"...\"]` |\n\n### Playwright Example\n\n```diff\n// EditorJS\n- await page.locator('[data-cy=editorjs] .ce-block').click();\n- await page.locator('.ce-toolbar__settings-btn').click();\n- await page.locator('[data-item-name=\"delete\"]').click();\n\n// Blok\n+ await page.locator('[data-blok-element]').click();\n+ await page.locator('[data-blok-settings-toggler]').click();\n+ await page.locator('[data-blok-item-name=\"delete\"]').click();\n```\n\n### Additional Test Selectors\n\n| Element | Selector |\n|---------|----------|\n| Block tunes popover | `[data-blok-testid=\"block-tunes-popover\"]` |\n| Popover search input | `[data-blok-testid=\"popover-search-input\"]` |\n| Popover item title | `[data-blok-testid=\"popover-item-title\"]` |\n| Popover overlay | `[data-blok-testid=\"popover-overlay\"]` |\n| Inline tool input | `[data-blok-testid=\"inline-tool-input\"]` |\n| Tooltip | `[data-blok-testid=\"tooltip\"]` |\n| Redactor | `[data-blok-testid=\"redactor\"]` |\n| Toolbox | `[data-blok-testid=\"toolbox\"]` |\n| Toolbox popover | `[data-blok-testid=\"toolbox-popover\"]` |\n| Selection overlay | `[data-blok-testid=\"overlay\"]` |\n| Selection rectangle | `[data-blok-testid=\"overlay-rectangle\"]` |\n\n---\n\n### State Selectors\n\n| State | Selector |\n|-------|----------|\n| Toolbar opened | `[data-blok-opened=\"true\"]` |\n| Block selected | `[data-blok-selected=\"true\"]` |\n| Popover opened | `[data-blok-popover-opened=\"true\"]` |\n| Item focused | `[data-blok-focused=\"true\"]` |\n| Item disabled | `[data-blok-disabled=\"true\"]` |\n| Nested popover | `[data-blok-nested=\"true\"]` |\n| Toolbox opened | `[data-blok-toolbox-opened=\"true\"]` |\n| Block dragging | `[data-blok-dragging=\"true\"]` |\n| Element hidden | `[data-blok-hidden=\"true\"]` |\n| RTL mode | `[data-blok-rtl=\"true\"]` |\n\n---\n\n## Quick Checklist\n\n- [ ] Replace `new EditorJS` with `new Blok`\n- [ ] Update imports from `@editorjs/*` to `@bloklabs/core`\n- [ ] Change holder from `editorjs` to `blok` (or specify explicitly)\n- [ ] Use bundled tools: `Blok.Header`, `Blok.Paragraph`\n- [ ] Replace `@editorjs/delimiter` with built-in `Blok.Divider`\n- [ ] Update `EditorConfig` type to `BlokConfig`\n- [ ] Replace `data-id` with `data-blok-id` in queries\n- [ ] Replace `data-item-name` with `data-blok-item-name`\n- [ ] Replace `.ce-*` selectors with `[data-blok-*]` attributes\n- [ ] Replace `.cdx-*` selectors with `[data-blok-*]` attributes\n- [ ] Update E2E test selectors\n", n = (e) => [
 	"# Blok Migration Guide (for LLM-assisted migration)",
 	"",
 	"> This document contains everything needed to migrate a project from EditorJS to Blok.",
@@ -41,14 +41,14 @@ var t = "# Migrating from EditorJS to Blok\n\nThis guide covers the breaking cha
 		case "convert-html": {
 			let e = new (await (import("jsdom"))).JSDOM("");
 			globalThis.DOMParser = e.window.DOMParser, globalThis.Node = e.window.Node;
-			let { convertHtml: t } = await import("./convert-html-CtLOMx8H.mjs");
+			let { convertHtml: t } = await import("./convert-html-BxOQfxMe.mjs");
 			r(t((await import("node:fs")).readFileSync("/dev/stdin", "utf-8")), s);
 			break;
 		}
 		case "convert-gdocs": {
 			let e = new (await (import("jsdom"))).JSDOM("");
 			globalThis.DOMParser = e.window.DOMParser, globalThis.Node = e.window.Node, globalThis.document = e.window.document;
-			let { convertGdocs: t } = await import("./convert-gdocs-DhqPnu2C.mjs");
+			let { convertGdocs: t } = await import("./convert-gdocs-DLaumLJ0.mjs");
 			r(t((await import("node:fs")).readFileSync("/dev/stdin", "utf-8")), s);
 			break;
 		}

package/dist/{convert-gdocs-D8zi-ZHD.mjs → convert-gdocs-BMCANuFK.mjs}

@@ -1,19 +1,19 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./block-builder-BhbHyKmd.mjs";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./block-builder-Cp5f8JCh.mjs";
 //#region src/components/modules/paste/constants.ts
-var o = "data-blok-columns-candidate";
+var s = "data-blok-columns-candidate";
 //#endregion
 //#region src/components/modules/paste/google-docs-preprocessor.ts
-function s(e) {
-	let t = document.createElement("div");
-	t.innerHTML = e;
-	let n = m(t);
-	return E(t, n), n && (O(t), k(t), p(t)), t.innerHTML;
+function c(e) {
+	let n = document.createElement("div");
+	n.innerHTML = e;
+	let r = h(n);
+	return D(n, r), r && (k(n), A(n), m(n)), t(n), n.innerHTML;
 }
-function c(e, t) {
+function l(e, t) {
 	let n = e.parentElement;
-	return n === null ? null : n === t ? e : c(n, t);
+	return n === null ? null : n === t ? e : l(n, t);
 }
-function l(e, t, n) {
+function u(e, t, n) {
 	let r = e.cloneNode(!1), i = [];
 	for (let n of Array.from(e.childNodes)) {
 		if (n === t) break;
@@ -21,11 +21,11 @@ function l(e, t, n) {
 	}
 	return i.forEach((e) => r.appendChild(e)), n !== null && r.appendChild(n), r.childNodes.length > 0 ? r : null;
 }
-function u(e, t, n) {
+function d(e, t, n) {
 	let r = e.cloneNode(!1), i = Array.from(e.childNodes), a = i.findIndex((e) => e === t), o = i.slice(a + 1);
 	return n !== null && r.appendChild(n), o.forEach((e) => r.appendChild(e)), r.childNodes.length > 0 ? r : null;
 }
-function d(e, t) {
+function f(e, t) {
 	let n = (e, r, i) => {
 		if (e === t) return {
 			before: r,
@@ -36,45 +36,45 @@ function d(e, t) {
 			before: r,
 			after: i
 		};
-		let o = l(a, e, r), s = u(a, e, i);
+		let o = u(a, e, r), s = d(a, e, i);
 		return n(a, o, s);
 	};
 	return n(e, null, null);
 }
-function f(e, t) {
+function p(e, t) {
 	let n = e.parentElement;
-	return n === null || n === t ? !1 : n.tagName === "TABLE" || f(n, t);
+	return n === null || n === t ? !1 : n.tagName === "TABLE" || p(n, t);
 }
-function p(e) {
+function m(e) {
 	let t = Array.from(e.querySelectorAll("img"));
 	for (let n of t) {
-		if (f(n, e)) continue;
-		let t = c(n, e);
+		if (p(n, e)) continue;
+		let t = l(n, e);
 		if (!t) continue;
-		let { before: r, after: i } = d(n, t), a = document.createDocumentFragment();
+		let { before: r, after: i } = f(n, t), a = document.createDocumentFragment();
 		r && a.appendChild(r), a.appendChild(n), i && a.appendChild(i), t.replaceWith(a);
 	}
 }
-function m(e) {
+function h(e) {
 	let t = e.querySelector("b[id^=\"docs-internal-guid-\"]");
 	if (!t) return !1;
 	let n = document.createDocumentFragment();
 	for (; t.firstChild;) n.appendChild(t.firstChild);
 	return t.replaceWith(n), !0;
 }
-function h(e, t, n) {
+function g(e, t, n) {
 	return e ? `background-color: ${n}` : t ? "background-color: transparent" : "";
 }
-function g(e) {
+function _(e) {
 	let t = e.replace(/\s/g, "");
 	return t === "rgb(0,0,0)" || t === "#000000";
 }
-function _(e) {
+function v(e) {
 	if (e.closest("a") !== null) return !0;
 	let t = e.querySelector("a");
 	return t !== null && t.textContent?.trim() === e.textContent?.trim();
 }
-function v(e) {
+function y(e) {
 	let t = e.replace(/\s/g, "").toLowerCase(), n = /^rgba?\((\d+),(\d+),(\d+)(?:,[\d.]+)?\)$/.exec(t);
 	if (n) {
 		let e = parseInt(n[1], 10) / 255, t = parseInt(n[2], 10) / 255, r = parseInt(n[3], 10) / 255;
@@ -105,17 +105,17 @@ function v(e) {
 	}
 	return -1;
 }
-var y = r, b = e;
-function x(e) {
-	let t = v(e);
+var b = a, x = r;
+function S(e) {
+	let t = y(e);
 	return t >= 0 && t > .75;
 }
-function S(e, n, r, i, a) {
-	if (!n && !r) return e;
-	let o = n && i !== void 0 ? t(i, "text") : "", s = r && a !== void 0 ? t(a, "bg") : "", c = [n ? `color: ${o}` : "", h(r, n, s)].filter(Boolean).join("; ");
-	return c ? `<mark style="${c};">${e}</mark>` : e;
+function C(t, n, r, i, a) {
+	if (!n && !r) return t;
+	let o = n && i !== void 0 ? e(i, "text") : "", s = r && a !== void 0 ? e(a, "bg") : "", c = [n ? `color: ${o}` : "", g(r, n, s)].filter(Boolean).join("; ");
+	return c ? `<mark style="${c};">${t}</mark>` : t;
 }
-var C = /* @__PURE__ */ new Set([
+var w = /* @__PURE__ */ new Set([
 	"H1",
 	"H2",
 	"H3",
@@ -123,39 +123,39 @@ var C = /* @__PURE__ */ new Set([
 	"H5",
 	"H6"
 ]);
-function w(e) {
+function T(e) {
 	let t = e.parentElement;
-	return t === null ? !1 : C.has(t.tagName) ? !0 : w(t);
+	return t === null ? !1 : w.has(t.tagName) ? !0 : T(t);
 }
-function T(e, t) {
-	let n = e.getAttribute("style") ?? "", r = /font-weight\s*:\s*(700|bold)/i.test(n) && !w(e), i = /font-style\s*:\s*italic/i.test(n), a = /(?<![a-z-])color\s*:\s*([^;]+)/i.exec(n), o = /background-color\s*:\s*([^;]+)/i.exec(n), s = a?.[1]?.trim(), c = o?.[1]?.trim(), l = !(s !== void 0 && _(e)) && (t ? s !== void 0 && !g(s) : s !== void 0 && !g(s) && !x(s)), u = c !== void 0 && c !== "transparent" && !y(c) && !b(c);
+function E(e, t) {
+	let n = e.getAttribute("style") ?? "", r = /font-weight\s*:\s*(700|bold)/i.test(n) && !T(e), i = /font-style\s*:\s*italic/i.test(n), a = /(?<![a-z-])color\s*:\s*([^;]+)/i.exec(n), o = /background-color\s*:\s*([^;]+)/i.exec(n), s = a?.[1]?.trim(), c = o?.[1]?.trim(), l = !(s !== void 0 && v(e)) && (t ? s !== void 0 && !_(s) : s !== void 0 && !_(s) && !S(s)), u = c !== void 0 && c !== "transparent" && !b(c) && !x(c);
 	if (!r && !i && !l && !u) return null;
-	let d = S(e.innerHTML, l, u, s, c), f = i ? `<i>${d}</i>` : d;
+	let d = C(e.innerHTML, l, u, s, c), f = i ? `<i>${d}</i>` : d;
 	return r ? `<b>${f}</b>` : f;
 }
-function E(e, t) {
+function D(e, t) {
 	for (let n of Array.from(e.querySelectorAll("span[style]"))) {
-		let e = T(n, t);
+		let e = E(n, t);
 		e !== null && n.replaceWith(document.createRange().createContextualFragment(e));
 	}
-	t && D(e);
+	t && O(e);
 }
-function D(e) {
-	for (let n of Array.from(e.querySelectorAll("a[style]"))) {
-		let e = n.getAttribute("style") ?? "", r = /background-color\s*:\s*([^;]+)/i.exec(e)?.[1]?.trim(), i = r !== void 0 && r !== "transparent" && r !== "inherit", a = n;
-		a.style.removeProperty("color"), i && (a.innerHTML = `<mark style="background-color: ${t(r, "bg")};">${a.innerHTML}</mark>`, a.style.removeProperty("background-color"));
+function O(t) {
+	for (let n of Array.from(t.querySelectorAll("a[style]"))) {
+		let t = n.getAttribute("style") ?? "", r = /background-color\s*:\s*([^;]+)/i.exec(t)?.[1]?.trim(), i = r !== void 0 && r !== "transparent" && r !== "inherit", a = n;
+		a.style.removeProperty("color"), i && (a.innerHTML = `<mark style="background-color: ${e(r, "bg")};">${a.innerHTML}</mark>`, a.style.removeProperty("background-color"));
 	}
 }
-function O(e) {
+function k(e) {
 	if (e.querySelector("google-sheets-html-origin") === null) for (let t of Array.from(e.querySelectorAll("table"))) {
 		if (t.parentElement?.closest("table") !== null) continue;
 		let e = Array.from(t.querySelectorAll("tr")).filter((e) => e.closest("table") === t);
 		if (e.length === 0) continue;
 		let n = e.map((e) => Array.from(e.children).filter((e) => e.tagName === "TD" || e.tagName === "TH").length), r = n[0];
-		n.every((e) => e === r) && (r === 2 || r === 3) && t.setAttribute(o, "");
+		n.every((e) => e === r) && (r === 2 || r === 3) && t.setAttribute(s, "");
 	}
 }
-function k(e) {
+function A(e) {
 	for (let t of Array.from(e.querySelectorAll("td, th"))) {
 		let e = t.querySelectorAll("p");
 		if (e.length !== 0) {
@@ -169,14 +169,14 @@ function k(e) {
 }
 //#endregion
 //#region src/cli/commands/convert-gdocs/index.ts
-function A(e) {
-	let t = s(e), r = new DOMParser().parseFromString(t, "text/html").body;
+function j(e) {
+	let t = c(e), r = new DOMParser().parseFromString(t, "text/html").body;
 	i(r), n(r);
-	let o = {
-		version: "1.2.6",
-		blocks: a(r)
+	let a = {
+		version: "1.4.0",
+		blocks: o(r)
 	};
-	return JSON.stringify(o);
+	return JSON.stringify(a);
 }
 //#endregion
-export { A as convertGdocs };
+export { j as convertGdocs };

package/dist/{convert-gdocs-DhqPnu2C.mjs → convert-gdocs-DLaumLJ0.mjs}

@@ -1,19 +1,19 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "./block-builder-BhbHyKmd.mjs";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./block-builder-Cp5f8JCh.mjs";
 //#region src/components/modules/paste/constants.ts
-var o = "data-blok-columns-candidate";
+var s = "data-blok-columns-candidate";
 //#endregion
 //#region src/components/modules/paste/google-docs-preprocessor.ts
-function s(e) {
-	let t = document.createElement("div");
-	t.innerHTML = e;
-	let n = m(t);
-	return E(t, n), n && (O(t), k(t), p(t)), t.innerHTML;
+function c(e) {
+	let n = document.createElement("div");
+	n.innerHTML = e;
+	let r = h(n);
+	return D(n, r), r && (k(n), A(n), m(n)), t(n), n.innerHTML;
 }
-function c(e, t) {
+function l(e, t) {
 	let n = e.parentElement;
-	return n === null ? null : n === t ? e : c(n, t);
+	return n === null ? null : n === t ? e : l(n, t);
 }
-function l(e, t, n) {
+function u(e, t, n) {
 	let r = e.cloneNode(!1), i = [];
 	for (let n of Array.from(e.childNodes)) {
 		if (n === t) break;
@@ -21,11 +21,11 @@ function l(e, t, n) {
 	}
 	return i.forEach((e) => r.appendChild(e)), n !== null && r.appendChild(n), r.childNodes.length > 0 ? r : null;
 }
-function u(e, t, n) {
+function d(e, t, n) {
 	let r = e.cloneNode(!1), i = Array.from(e.childNodes), a = i.findIndex((e) => e === t), o = i.slice(a + 1);
 	return n !== null && r.appendChild(n), o.forEach((e) => r.appendChild(e)), r.childNodes.length > 0 ? r : null;
 }
-function d(e, t) {
+function f(e, t) {
 	let n = (e, r, i) => {
 		if (e === t) return {
 			before: r,
@@ -36,45 +36,45 @@ function d(e, t) {
 			before: r,
 			after: i
 		};
-		let o = l(a, e, r), s = u(a, e, i);
+		let o = u(a, e, r), s = d(a, e, i);
 		return n(a, o, s);
 	};
 	return n(e, null, null);
 }
-function f(e, t) {
+function p(e, t) {
 	let n = e.parentElement;
-	return n === null || n === t ? !1 : n.tagName === "TABLE" || f(n, t);
+	return n === null || n === t ? !1 : n.tagName === "TABLE" || p(n, t);
 }
-function p(e) {
+function m(e) {
 	let t = Array.from(e.querySelectorAll("img"));
 	for (let n of t) {
-		if (f(n, e)) continue;
-		let t = c(n, e);
+		if (p(n, e)) continue;
+		let t = l(n, e);
 		if (!t) continue;
-		let { before: r, after: i } = d(n, t), a = document.createDocumentFragment();
+		let { before: r, after: i } = f(n, t), a = document.createDocumentFragment();
 		r && a.appendChild(r), a.appendChild(n), i && a.appendChild(i), t.replaceWith(a);
 	}
 }
-function m(e) {
+function h(e) {
 	let t = e.querySelector("b[id^=\"docs-internal-guid-\"]");
 	if (!t) return !1;
 	let n = document.createDocumentFragment();
 	for (; t.firstChild;) n.appendChild(t.firstChild);
 	return t.replaceWith(n), !0;
 }
-function h(e, t, n) {
+function g(e, t, n) {
 	return e ? `background-color: ${n}` : t ? "background-color: transparent" : "";
 }
-function g(e) {
+function _(e) {
 	let t = e.replace(/\s/g, "");
 	return t === "rgb(0,0,0)" || t === "#000000";
 }
-function _(e) {
+function v(e) {
 	if (e.closest("a") !== null) return !0;
 	let t = e.querySelector("a");
 	return t !== null && t.textContent?.trim() === e.textContent?.trim();
 }
-function v(e) {
+function y(e) {
 	let t = e.replace(/\s/g, "").toLowerCase(), n = /^rgba?\((\d+),(\d+),(\d+)(?:,[\d.]+)?\)$/.exec(t);
 	if (n) {
 		let e = parseInt(n[1], 10) / 255, t = parseInt(n[2], 10) / 255, r = parseInt(n[3], 10) / 255;
@@ -105,17 +105,17 @@ function v(e) {
 	}
 	return -1;
 }
-var y = r, b = e;
-function x(e) {
-	let t = v(e);
+var b = a, x = r;
+function S(e) {
+	let t = y(e);
 	return t >= 0 && t > .75;
 }
-function S(e, n, r, i, a) {
-	if (!n && !r) return e;
-	let o = n && i !== void 0 ? t(i, "text") : "", s = r && a !== void 0 ? t(a, "bg") : "", c = [n ? `color: ${o}` : "", h(r, n, s)].filter(Boolean).join("; ");
-	return c ? `<mark style="${c};">${e}</mark>` : e;
+function C(t, n, r, i, a) {
+	if (!n && !r) return t;
+	let o = n && i !== void 0 ? e(i, "text") : "", s = r && a !== void 0 ? e(a, "bg") : "", c = [n ? `color: ${o}` : "", g(r, n, s)].filter(Boolean).join("; ");
+	return c ? `<mark style="${c};">${t}</mark>` : t;
 }
-var C = /* @__PURE__ */ new Set([
+var w = /* @__PURE__ */ new Set([
 	"H1",
 	"H2",
 	"H3",
@@ -123,39 +123,39 @@ var C = /* @__PURE__ */ new Set([
 	"H5",
 	"H6"
 ]);
-function w(e) {
+function T(e) {
 	let t = e.parentElement;
-	return t === null ? !1 : C.has(t.tagName) ? !0 : w(t);
+	return t === null ? !1 : w.has(t.tagName) ? !0 : T(t);
 }
-function T(e, t) {
-	let n = e.getAttribute("style") ?? "", r = /font-weight\s*:\s*(700|bold)/i.test(n) && !w(e), i = /font-style\s*:\s*italic/i.test(n), a = /(?<![a-z-])color\s*:\s*([^;]+)/i.exec(n), o = /background-color\s*:\s*([^;]+)/i.exec(n), s = a?.[1]?.trim(), c = o?.[1]?.trim(), l = !(s !== void 0 && _(e)) && (t ? s !== void 0 && !g(s) : s !== void 0 && !g(s) && !x(s)), u = c !== void 0 && c !== "transparent" && !y(c) && !b(c);
+function E(e, t) {
+	let n = e.getAttribute("style") ?? "", r = /font-weight\s*:\s*(700|bold)/i.test(n) && !T(e), i = /font-style\s*:\s*italic/i.test(n), a = /(?<![a-z-])color\s*:\s*([^;]+)/i.exec(n), o = /background-color\s*:\s*([^;]+)/i.exec(n), s = a?.[1]?.trim(), c = o?.[1]?.trim(), l = !(s !== void 0 && v(e)) && (t ? s !== void 0 && !_(s) : s !== void 0 && !_(s) && !S(s)), u = c !== void 0 && c !== "transparent" && !b(c) && !x(c);
 	if (!r && !i && !l && !u) return null;
-	let d = S(e.innerHTML, l, u, s, c), f = i ? `<i>${d}</i>` : d;
+	let d = C(e.innerHTML, l, u, s, c), f = i ? `<i>${d}</i>` : d;
 	return r ? `<b>${f}</b>` : f;
 }
-function E(e, t) {
+function D(e, t) {
 	for (let n of Array.from(e.querySelectorAll("span[style]"))) {
-		let e = T(n, t);
+		let e = E(n, t);
 		e !== null && n.replaceWith(document.createRange().createContextualFragment(e));
 	}
-	t && D(e);
+	t && O(e);
 }
-function D(e) {
-	for (let n of Array.from(e.querySelectorAll("a[style]"))) {
-		let e = n.getAttribute("style") ?? "", r = /background-color\s*:\s*([^;]+)/i.exec(e)?.[1]?.trim(), i = r !== void 0 && r !== "transparent" && r !== "inherit", a = n;
-		a.style.removeProperty("color"), i && (a.innerHTML = `<mark style="background-color: ${t(r, "bg")};">${a.innerHTML}</mark>`, a.style.removeProperty("background-color"));
+function O(t) {
+	for (let n of Array.from(t.querySelectorAll("a[style]"))) {
+		let t = n.getAttribute("style") ?? "", r = /background-color\s*:\s*([^;]+)/i.exec(t)?.[1]?.trim(), i = r !== void 0 && r !== "transparent" && r !== "inherit", a = n;
+		a.style.removeProperty("color"), i && (a.innerHTML = `<mark style="background-color: ${e(r, "bg")};">${a.innerHTML}</mark>`, a.style.removeProperty("background-color"));
 	}
 }
-function O(e) {
+function k(e) {
 	if (e.querySelector("google-sheets-html-origin") === null) for (let t of Array.from(e.querySelectorAll("table"))) {
 		if (t.parentElement?.closest("table") !== null) continue;
 		let e = Array.from(t.querySelectorAll("tr")).filter((e) => e.closest("table") === t);
 		if (e.length === 0) continue;
 		let n = e.map((e) => Array.from(e.children).filter((e) => e.tagName === "TD" || e.tagName === "TH").length), r = n[0];
-		n.every((e) => e === r) && (r === 2 || r === 3) && t.setAttribute(o, "");
+		n.every((e) => e === r) && (r === 2 || r === 3) && t.setAttribute(s, "");
 	}
 }
-function k(e) {
+function A(e) {
 	for (let t of Array.from(e.querySelectorAll("td, th"))) {
 		let e = t.querySelectorAll("p");
 		if (e.length !== 0) {
@@ -169,14 +169,14 @@ function k(e) {
 }
 //#endregion
 //#region src/cli/commands/convert-gdocs/index.ts
-function A(e) {
-	let t = s(e), r = new DOMParser().parseFromString(t, "text/html").body;
+function j(e) {
+	let t = c(e), r = new DOMParser().parseFromString(t, "text/html").body;
 	i(r), n(r);
-	let o = {
-		version: "1.3.0",
-		blocks: a(r)
+	let a = {
+		version: "1.4.1",
+		blocks: o(r)
 	};
-	return JSON.stringify(o);
+	return JSON.stringify(a);
 }
 //#endregion
-export { A as convertGdocs };
+export { j as convertGdocs };

package/dist/convert-html-BxOQfxMe.mjs

@@ -0,0 +1,13 @@
+import { i as e, n as t, r as n, t as r } from "./block-builder-Cp5f8JCh.mjs";
+//#region src/cli/commands/convert-html/index.ts
+function i(i) {
+	let a = new DOMParser().parseFromString(i, "text/html").body;
+	n(a), t(a), e(a);
+	let o = {
+		version: "1.4.1",
+		blocks: r(a)
+	};
+	return JSON.stringify(o);
+}
+//#endregion
+export { i as convertHtml };

package/dist/convert-html-DBAHuyaK.mjs

@@ -0,0 +1,13 @@
+import { i as e, n as t, r as n, t as r } from "./block-builder-Cp5f8JCh.mjs";
+//#region src/cli/commands/convert-html/index.ts
+function i(i) {
+	let a = new DOMParser().parseFromString(i, "text/html").body;
+	n(a), t(a), e(a);
+	let o = {
+		version: "1.4.0",
+		blocks: r(a)
+	};
+	return JSON.stringify(o);
+}
+//#endregion
+export { i as convertHtml };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloklabs/cli",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "CLI tools for Blok — convert HTML to Blok JSON, generate migration guides",
   "bin": {
     "blok-cli": "bin/blok-cli.mjs"
@@ -19,17 +19,25 @@
     "blok",
     "cli",
     "html-to-json",
+    "block-editor",
+    "rich-text-editor",
     "editorjs",
+    "editorjs-migration",
     "migration",
+    "json",
     "rich-text"
   ],
   "author": "JackUait",
   "license": "Apache-2.0",
+  "homepage": "https://blokeditor.com",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/JackUait/blok.git",
     "directory": "packages/cli"
   },
+  "bugs": {
+    "url": "https://github.com/JackUait/blok/issues"
+  },
   "dependencies": {
     "jsdom": "29.1.1"
   }

package/dist/convert-html-CtLOMx8H.mjs

@@ -1,13 +0,0 @@
-import { n as e, r as t, t as n } from "./block-builder-BhbHyKmd.mjs";
-//#region src/cli/commands/convert-html/index.ts
-function r(r) {
-	let i = new DOMParser().parseFromString(r, "text/html").body;
-	t(i), e(i);
-	let a = {
-		version: "1.3.0",
-		blocks: n(i)
-	};
-	return JSON.stringify(a);
-}
-//#endregion
-export { r as convertHtml };

package/dist/convert-html-lcE4WDun.mjs

@@ -1,13 +0,0 @@
-import { n as e, r as t, t as n } from "./block-builder-BhbHyKmd.mjs";
-//#region src/cli/commands/convert-html/index.ts
-function r(r) {
-	let i = new DOMParser().parseFromString(r, "text/html").body;
-	t(i), e(i);
-	let a = {
-		version: "1.2.6",
-		blocks: n(i)
-	};
-	return JSON.stringify(a);
-}
-//#endregion
-export { r as convertHtml };