@jackuait/blok 0.7.3-beta.2 → 0.7.3-beta.4

package/dist/chunks/{constants-DWpV4hCh.mjs → constants-C_H9o9Ao.mjs}

@@ -138,7 +138,7 @@ var r = Object.create, i = Object.defineProperty, a = Object.getOwnPropertyDescr
 	RIGHT: 2,
 	BACKWARD: 3,
 	FORWARD: 4
-}, g = () => "0.7.3-beta.2", _ = /* @__PURE__ */ function(e) {
+}, g = () => "0.7.3-beta.3", _ = /* @__PURE__ */ function(e) {
 	return e.VERBOSE = "VERBOSE", e.INFO = "INFO", e.WARN = "WARN", e.ERROR = "ERROR", e;
 }({}), v = (e, t, n = "log", r, i = "color: inherit") => {
 	let a = typeof console > "u" ? void 0 : console;

package/dist/chunks/{tools-CUIpIxxP.mjs → tools-B0YXCZFW.mjs}

@@ -1,4 +1,4 @@
-import { $ as e, A as t, B as n, Ct as r, D as i, F as a, G as o, H as s, I as c, J as l, Jt as u, K as d, L as f, M as p, Mt as m, N as h, Nt as g, Ot as _, P as ee, Q as te, R as ne, St as re, Tn as v, Tt as ie, U as ae, V as oe, W as se, X as ce, a as le, c as ue, ct as de, d as fe, dt as pe, et as me, f as he, ft as ge, g as _e, h as ve, ht as ye, i as be, it as xe, j as Se, k as Ce, kt as y, l as we, lt as Te, mt as Ee, n as De, nt as Oe, o as ke, ot as Ae, p as je, pt as Me, q as Ne, r as Pe, rt as Fe, s as Ie, st as Le, t as Re, tt as ze, u as b, ut as Be, v as Ve, vn as He, vt as Ue, wn as x, z as We } from "./constants-DWpV4hCh.mjs";
+import { $ as e, A as t, B as n, Ct as r, D as i, F as a, G as o, H as s, I as c, J as l, Jt as u, K as d, L as f, M as p, Mt as m, N as h, Nt as g, Ot as _, P as ee, Q as te, R as ne, St as re, Tn as v, Tt as ie, U as ae, V as oe, W as se, X as ce, a as le, c as ue, ct as de, d as fe, dt as pe, et as me, f as he, ft as ge, g as _e, h as ve, ht as ye, i as be, it as xe, j as Se, k as Ce, kt as y, l as we, lt as Te, mt as Ee, n as De, nt as Oe, o as ke, ot as Ae, p as je, pt as Me, q as Ne, r as Pe, rt as Fe, s as Ie, st as Le, t as Re, tt as ze, u as b, ut as Be, v as Ve, vn as He, vt as Ue, wn as x, z as We } from "./constants-C_H9o9Ao.mjs";
 import { t as S } from "./objectSpread2-CyPxu8-u.mjs";
 import { n as C } from "./tw-DmW6-pCY.mjs";
 //#region src/components/utils/html.ts

package/dist/full.mjs

@@ -1,7 +1,7 @@
-import { wn as e } from "./chunks/constants-DWpV4hCh.mjs";
-import { n as t, t as n } from "./chunks/blok-Cv1zWiST.mjs";
+import { wn as e } from "./chunks/constants-C_H9o9Ao.mjs";
+import { n as t, t as n } from "./chunks/blok-CdxHhr5i.mjs";
 import { t as r } from "./chunks/objectSpread2-CyPxu8-u.mjs";
-import { a as i, d as a, i as o, l as s, n as c, o as l, r as u, s as d, t as f, u as p } from "./chunks/tools-CUIpIxxP.mjs";
+import { a as i, d as a, i as o, l as s, n as c, o as l, r as u, s as d, t as f, u as p } from "./chunks/tools-B0YXCZFW.mjs";
 //#region src/full.ts
 var m = {
 	paragraph: {

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import "./chunks/constants-DWpV4hCh.mjs";
-import { r as e, t } from "./chunks/blok-Cv1zWiST.mjs";
+import "./chunks/constants-C_H9o9Ao.mjs";
+import { r as e, t } from "./chunks/blok-CdxHhr5i.mjs";
 import { t as n } from "./chunks/objectSpread2-CyPxu8-u.mjs";
 import { forwardRef as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
 import { jsx as c } from "react/jsx-runtime";

package/dist/tools.mjs

@@ -1,3 +1,3 @@
-import { m as e } from "./chunks/constants-DWpV4hCh.mjs";
-import { a as t, c as n, d as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "./chunks/tools-CUIpIxxP.mjs";
+import { m as e } from "./chunks/constants-C_H9o9Ao.mjs";
+import { a as t, c as n, d as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "./chunks/tools-B0YXCZFW.mjs";
 export { s as Bold, e as Convert, d as Header, t as Italic, i as Link, a as List, c as Marker, r as Paragraph, n as Table, l as Toggle, u as defaultBlockTools, o as defaultInlineTools };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.7.3-beta.2",
+  "version": "0.7.3-beta.4",
   "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",
@@ -200,4 +200,4 @@
       "optional": true
     }
   }
-}
+}

package/src/components/utils/data-model-transform.ts

@@ -41,11 +41,12 @@ interface LegacyListData {
 
 /**
  * Legacy toggle list data structure for data model transformation.
- * Old format: { title: string, isExpanded?: boolean, body: { blocks: [], time, version } }
+ * Old format: { title: string, isExpanded?: boolean, body: { blocks: [], time, version }, titleVariant?: number }
  */
 interface LegacyToggleListData {
   title: string;
   isExpanded?: boolean;
+  titleVariant?: number;
   body?: {
     time?: number;
     blocks?: OutputBlockData[];
@@ -326,19 +327,37 @@ const expandToggleListToHierarchical = (
     });
   }
 
-  // Create the toggle block with mapped fields
-  const toggleBlock: OutputBlockData = {
+  const sharedFields = {
     id: toggleId,
-    type: 'toggle',
-    data: {
-      text: block.data.title,
-      ...(typeof block.data.isExpanded === 'boolean' ? { isOpen: block.data.isExpanded } : {}),
-    },
     ...(block.tunes !== undefined ? { tunes: block.tunes } : {}),
     ...(childIds.length > 0 ? { content: childIds } : {}),
   };
 
-  blocks.push(toggleBlock);
+  const isOpenField = typeof block.data.isExpanded === 'boolean' ? { isOpen: block.data.isExpanded } : {};
+
+  // When titleVariant is set, produce a toggle heading (header with isToggleable)
+  if (typeof block.data.titleVariant === 'number') {
+    blocks.push({
+      ...sharedFields,
+      type: 'header',
+      data: {
+        text: block.data.title,
+        level: block.data.titleVariant,
+        isToggleable: true,
+        ...isOpenField,
+      },
+    });
+  } else {
+    blocks.push({
+      ...sharedFields,
+      type: 'toggle',
+      data: {
+        text: block.data.title,
+        ...isOpenField,
+      },
+    });
+  }
+
   blocks.push(...childBlocks);
 
   return blocks;
@@ -546,6 +565,65 @@ const isFlatModelToggleBlock = (block: OutputBlockData): boolean => {
   return block.type === 'toggle';
 };
 
+/**
+ * Check if a block is a toggleable header (header with isToggleable: true)
+ */
+const isToggleableHeaderBlock = (block: OutputBlockData): boolean => {
+  if (block.type !== 'header') {
+    return false;
+  }
+
+  const data: unknown = block.data;
+
+  return typeof data === 'object' && data !== null && (data as Record<string, unknown>).isToggleable === true;
+};
+
+/**
+ * Process a root toggleable header block and convert to a legacy toggleList block with titleVariant
+ */
+const processRootToggleableHeader = (
+  block: OutputBlockData,
+  blockMap: Map<BlockId, OutputBlockData>,
+  processedIds: Set<BlockId>
+): OutputBlockData => {
+  markBlockAsProcessed(block.id, processedIds);
+
+  const data: unknown = block.data;
+  const text = isObjectWithText(data) ? data.text : '';
+  const level = typeof (data as Record<string, unknown>)?.level === 'number'
+    ? (data as Record<string, unknown>).level as number
+    : undefined;
+  const isOpen = typeof (data as Record<string, unknown>)?.isOpen === 'boolean'
+    ? (data as Record<string, unknown>).isOpen as boolean
+    : undefined;
+
+  const childBlocks: OutputBlockData[] = [];
+  const contentIds = block.content ?? [];
+
+  for (const childId of contentIds) {
+    const childBlock = blockMap.get(childId);
+
+    if (childBlock) {
+      markBlockAsProcessed(childId, processedIds);
+      childBlocks.push(stripHierarchyFields(childBlock));
+    }
+  }
+
+  const legacyBlock: OutputBlockData = {
+    id: block.id,
+    type: 'toggleList',
+    data: {
+      title: text,
+      ...(level !== undefined ? { titleVariant: level } : {}),
+      ...(isOpen !== undefined ? { isExpanded: isOpen } : {}),
+      ...(childBlocks.length > 0 ? { body: { blocks: childBlocks } } : {}),
+    },
+    ...(block.tunes !== undefined ? { tunes: block.tunes } : {}),
+  };
+
+  return legacyBlock;
+};
+
 /**
  * Check if a block is a flat-model list block (has 'text' field instead of 'items')
  */
@@ -579,8 +657,9 @@ export const collapseToLegacy = (blocks: OutputBlockData[]): OutputBlockData[] =
   // If no flat-model list or toggle blocks, just strip hierarchy fields and return
   const hasFlatListBlocks = blocks.some(isFlatModelListBlock);
   const hasFlatToggleBlocks = blocks.some(isFlatModelToggleBlock);
+  const hasFlatToggleableHeaders = blocks.some(b => isToggleableHeaderBlock(b) && !b.parent);
 
-  if (!hasFlatListBlocks && !hasFlatToggleBlocks) {
+  if (!hasFlatListBlocks && !hasFlatToggleBlocks && !hasFlatToggleableHeaders) {
     return blocks.map(stripHierarchyFields);
   }
 
@@ -599,7 +678,9 @@ export const collapseToLegacy = (blocks: OutputBlockData[]): OutputBlockData[] =
     const isRootListItem = isFlatListBlock && !block.parent;
     const isFlatToggleBlock = isFlatModelToggleBlock(block);
     const isRootToggleItem = isFlatToggleBlock && !block.parent;
-    const isNonListItem = !isFlatListBlock && !isFlatToggleBlock;
+    const isToggleableHeader = isToggleableHeaderBlock(block);
+    const isRootToggleableHeader = isToggleableHeader && !block.parent;
+    const isNonListItem = !isFlatListBlock && !isFlatToggleBlock && !isToggleableHeader;
 
     if (isRootListItem) {
       const listBlock = processRootListItem(block, blockMap, processedIds);
@@ -613,6 +694,12 @@ export const collapseToLegacy = (blocks: OutputBlockData[]): OutputBlockData[] =
       result.push(toggleBlock);
     }
 
+    if (isRootToggleableHeader) {
+      const legacyBlock = processRootToggleableHeader(block, blockMap, processedIds);
+
+      result.push(legacyBlock);
+    }
+
     if (isNonListItem) {
       result.push(stripHierarchyFields(block));
       markBlockAsProcessed(block.id, processedIds);

package/types/tools/toggle.d.ts

@@ -0,0 +1,23 @@
+import { BlockTool, BlockToolConstructable, BlockToolConstructorOptions, BlockToolData } from './block-tool';
+
+/**
+ * Toggle Tool's input and output data format
+ */
+export interface ToggleData extends BlockToolData {
+  /** Toggle item text content (can include HTML) */
+  text: string;
+  /** Whether the toggle is open (expanded). Persisted on save so state is restored on reload. */
+  isOpen?: boolean;
+}
+
+/**
+ * Toggle Tool's configuration
+ */
+export interface ToggleConfig {
+  /** Custom placeholder text for empty toggle items */
+  placeholder?: string;
+}
+
+export interface ToggleConstructable extends BlockToolConstructable {
+  new(options: BlockToolConstructorOptions<ToggleData, ToggleConfig>): BlockTool;
+}

package/types/tools-entry.d.ts

@@ -7,6 +7,7 @@ import { HeaderConstructable, HeaderData, HeaderConfig } from './tools/header';
 import { ParagraphConstructable, ParagraphData, ParagraphConfig } from './tools/paragraph';
 import { ListConstructable, ListData, ListConfig, ListStyle } from './tools/list';
 import { TableConstructable, TableData, TableConfig, CellContent } from './tools/table';
+import { ToggleConstructable, ToggleData, ToggleConfig } from './tools/toggle';
 import { InlineToolConstructable } from './tools/inline-tool';
 import { BlockTuneConstructable } from './block-tunes';
 import { ToolSettings } from './tools';
@@ -16,12 +17,14 @@ export const Paragraph: ParagraphConstructable;
 export const Header: HeaderConstructable;
 export const List: ListConstructable;
 export const Table: TableConstructable;
+export const Toggle: ToggleConstructable;
 
 // Re-export data and config types for convenience
 export { HeaderData, HeaderConfig } from './tools/header';
 export { ParagraphData, ParagraphConfig } from './tools/paragraph';
 export { ListData, ListConfig, ListStyle } from './tools/list';
 export { TableData, TableConfig, CellContent } from './tools/table';
+export { ToggleData, ToggleConfig } from './tools/toggle';
 
 // Inline tools
 export const Bold: InlineToolConstructable;