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

package/dist/full.mjs

@@ -1,7 +1,7 @@
-import { n as e, t } from "./chunks/blok-CEVrVqlx.mjs";
-import { $n as n } from "./chunks/constants-BURnHRy_.mjs";
+import { n as e, t } from "./chunks/blok-DK7jJnLH.mjs";
+import { tr as n } from "./chunks/constants-B0Vnu9kC.mjs";
 import { t as r } from "./chunks/objectSpread2-CWwMYL_U.mjs";
-import { _ as i, a, c as o, g as s, i as c, l, m as u, n as d, o as f, s as p, t as m, v as h } from "./chunks/tools-Dt2I14vP.mjs";
+import { _ as i, a, c as o, g as s, i as c, l, m as u, n as d, o as f, s as p, t as m, v as h } from "./chunks/tools-QLa-0Rbm.mjs";
 //#region src/full.ts
 var g = {
 	paragraph: {

package/dist/react.mjs

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

package/dist/tools.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.10.0-beta.16",
+  "version": "0.10.0-beta.18",
   "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",

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

@@ -4,6 +4,8 @@ import { sanitize } from '../convert-html/sanitizer';
 import { buildBlocks } from '../convert-html/block-builder';
 import type { OutputData } from '../convert-html/types';
 
+declare const __CLI_VERSION__: string;
+
 /**
  * Convert Google Docs HTML to Blok JSON.
  * Runs: Google Docs preprocess -> general preprocess -> sanitize -> build blocks -> serialize.
@@ -18,7 +20,7 @@ export function convertGdocs(html: string): string {
   sanitize(wrapper);
 
   const blocks = buildBlocks(wrapper);
-  const output: OutputData = { version: '2.31.0', blocks };
+  const output: OutputData = { version: typeof __CLI_VERSION__ !== 'undefined' ? __CLI_VERSION__ : 'dev', blocks };
 
   return JSON.stringify(output);
 }

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

@@ -3,6 +3,8 @@ import { sanitize } from './sanitizer';
 import { buildBlocks } from './block-builder';
 import type { OutputData } from './types';
 
+declare const __CLI_VERSION__: string;
+
 /**
  * Convert HTML to Blok JSON.
  * Runs: preprocess → sanitize → build blocks → serialize.
@@ -15,7 +17,7 @@ export function convertHtml(html: string): string {
   sanitize(wrapper);
 
   const blocks = buildBlocks(wrapper);
-  const output: OutputData = { version: '2.31.0', blocks };
+  const output: OutputData = { version: typeof __CLI_VERSION__ !== 'undefined' ? __CLI_VERSION__ : 'dev', blocks };
 
   return JSON.stringify(output);
 }

package/src/components/icons/index.ts

@@ -95,6 +95,22 @@ export const IconPlus = `
 </svg>
 `;
 
+// Chevron Down icon
+export const IconChevronDown = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m6 8 4 4 4-4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+// Ellipsis (horizontal three dots) icon
+export const IconEllipsis = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="5" cy="10" r="1.25" fill="currentColor"/>
+  <circle cx="10" cy="10" r="1.25" fill="currentColor"/>
+  <circle cx="15" cy="10" r="1.25" fill="currentColor"/>
+</svg>
+`;
+
 // Chevron Left icon
 export const IconChevronLeft = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/components/modules/blockEvents/composers/keyboardNavigation.ts

@@ -344,6 +344,15 @@ export class KeyboardNavigation extends BlockEventComposer {
       // Previous sibling exists in the same parent — fall through to merge/remove logic
     }
 
+    /**
+     * Don't merge across table cell boundaries.
+     * When the caret is at the start of the first input in a table cell, Backspace should be a no-op
+     * rather than merging the previous cell's last block into the current cell.
+     */
+    if (this.isCurrentBlockInsideTableCell) {
+      return;
+    }
+
     /**
      * Backspace at the start of the first Block should do nothing
      */
@@ -447,6 +456,15 @@ export class KeyboardNavigation extends BlockEventComposer {
       return;
     }
 
+    /**
+     * Don't merge across table cell boundaries.
+     * When the caret is at the end of the last input in a table cell, Delete should be a no-op
+     * rather than merging the next cell's first block into the current cell.
+     */
+    if (this.isCurrentBlockInsideTableCell) {
+      return;
+    }
+
     /**
      * If next Block is empty, it should be removed just like a character
      */

package/src/components/modules/rectangleSelection.ts

@@ -72,6 +72,14 @@ export class RectangleSelection extends Module {
    */
   private mouseDownWithinBoundsFromContentEditable = false;
 
+  /**
+   * Set when the user mousedowns in a position that should eventually close the toolbar
+   * if a drag begins, but NOT immediately (to avoid interfering with button clicks like
+   * the plus button). The toolbar is closed on the first mousemove after mousedown.
+   * Cleared on mouseup / endSelection.
+   */
+  private pendingToolbarClose = false;
+
   /**
    *  Is scrolling now
    */
@@ -187,7 +195,7 @@ export class RectangleSelection extends Module {
 
     const selectorsToAvoid = [
       createSelector(DATA_ATTR.elementContent),
-      createSelector(DATA_ATTR.toolbar),
+      createSelector(DATA_ATTR.settingsToggler),
       createSelector(DATA_ATTR.popover),
       INLINE_TOOLBAR_INTERFACE_SELECTOR,
     ];
@@ -202,12 +210,13 @@ export class RectangleSelection extends Module {
     }
 
     /**
-     * Hide the toolbar immediately so it does not obstruct drag selection.
-     * Only close the toolbar if the selection starts within the horizontal bounds of the editor.
-     * This allows rectangle selection to start from outside (e.g., left margin) without closing the toolbar.
+     * Schedule toolbar close for the first mousemove (i.e. when the user actually drags).
+     * Deferring prevents a plain click (e.g. on the plus button) from accidentally closing
+     * the toolbar before its own click handler fires.
+     * Only close if starting within the horizontal bounds of the editor.
      */
     if (withinEditorHorizontally) {
-      this.Blok.Toolbar.close();
+      this.pendingToolbarClose = true;
     }
 
     this.mousedown = true;
@@ -221,6 +230,7 @@ export class RectangleSelection extends Module {
   public endSelection(): void {
     this.mousedown = false;
     this.mouseDownWithinBoundsFromContentEditable = false;
+    this.pendingToolbarClose = false;
     this.startX = 0;
     this.startY = 0;
     this.anchorBlockIndex = null;
@@ -361,6 +371,16 @@ export class RectangleSelection extends Module {
       this.Blok.Toolbar.close();
     }
 
+    /**
+     * Close the toolbar on the first actual drag movement after a mousedown
+     * that was scheduled to close it. Using mousemove instead of mousedown ensures
+     * plain button clicks (e.g. the plus button) don't close the toolbar prematurely.
+     */
+    if (this.pendingToolbarClose) {
+      this.pendingToolbarClose = false;
+      this.Blok.Toolbar.close();
+    }
+
     this.changingRectangle(mouseEvent);
     this.scrollByZones(mouseEvent.clientY);
   }

package/src/components/modules/toolbar/index.ts

@@ -427,8 +427,11 @@ export class Toolbar extends Module<ToolbarNodes> {
      */
     const focusIsInsideCell = this.isFocusInsideTableCell();
     const isCalloutFirstChild = this.isFirstChildOfCallout(targetBlock);
+    const isCalloutBlock = targetBlock.name === 'callout';
 
-    plusButton.style.display = isCalloutFirstChild ? 'none' : '';
+    // Hide plus button for callout blocks and their first children to avoid
+    // overlap with the callout emoji icon in the left padding area.
+    plusButton.style.display = (isCalloutFirstChild || isCalloutBlock) ? 'none' : '';
 
     if (settingsToggler) {
       settingsToggler.style.display = (focusIsInsideCell || isCalloutFirstChild) ? 'none' : '';
@@ -519,6 +522,7 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     if (hasLeftEdgeInteraction && this.nodes.actions) {
       this.nodes.actions.style.pointerEvents = 'none';
+      this.restoreSettingsTogglerForLeftEdgeBlock(targetBlock);
     }
 
     /**
@@ -526,14 +530,15 @@ export class Toolbar extends Module<ToolbarNodes> {
      * so toolbar buttons align with the block content edge, even when
      * consumer CSS overrides the block content's margin.
      *
-     * Uses the block's actual marginLeft directly — when content is left-aligned
-     * (marginLeft: 0), toolbar actions will extend into the editor's left gutter
-     * via negative positioning (right: 100%), which is the expected behavior.
+     * Uses Math.max to guarantee the actions container (positioned via right:100%)
+     * never extends beyond the left edge of the viewport, which would make the
+      * drag handle unreachable by pointer events.
      */
     if (blockContentElement && this.nodes.content) {
       const blockMarginLeft = parseFloat(getComputedStyle(blockContentElement).marginLeft) || 0;
+      const actionsWidth = this.nodes.actions?.offsetWidth ?? 0;
 
-      this.nodes.content.style.marginLeft = `${blockMarginLeft}px`;
+      this.nodes.content.style.marginLeft = `${Math.max(blockMarginLeft, actionsWidth)}px`;
     }
   }
 
@@ -655,11 +660,13 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     /**
      * Sync toolbar content wrapper's margin with the block content element.
+     * Clamp to actionsWidth so actions never extend beyond the left viewport edge.
      */
     if (blockContentElement && this.nodes.content) {
       const blockMarginLeft = parseFloat(getComputedStyle(blockContentElement).marginLeft) || 0;
+      const actionsWidth = this.nodes.actions?.offsetWidth ?? 0;
 
-      this.nodes.content.style.marginLeft = `${blockMarginLeft}px`;
+      this.nodes.content.style.marginLeft = `${Math.max(blockMarginLeft, actionsWidth)}px`;
     }
   }
 
@@ -851,14 +858,48 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     const focusIsInsideCell = this.isFocusInsideTableCell();
     const isCalloutFirstChild = this.hoveredBlock !== null && this.isFirstChildOfCallout(this.hoveredBlock);
+    const isCalloutBlock = this.hoveredBlock?.name === 'callout';
 
-    plusButton.style.display = isCalloutFirstChild ? 'none' : '';
+    plusButton.style.display = (isCalloutFirstChild || isCalloutBlock) ? 'none' : '';
 
     if (settingsToggler) {
       settingsToggler.style.display = (focusIsInsideCell || isCalloutFirstChild) ? 'none' : '';
     }
   }
 
+  /**
+   * Re-enables pointer-events on the settings toggler (and callout drag zone) after
+   * the actions container has been set to pointer-events: none for left-edge blocks.
+   *
+   * For callout blocks: also wires the dedicated drag zone as the drag handle and
+   * re-enables the settings toggler so the settings menu remains accessible.
+   * The emoji button (at x=32px) no longer overlaps the actions zone (x=[0,29px])
+   * because the callout uses pl-8 (32px) left padding.
+   *
+   * For all other left-edge blocks (toggle, header with arrow): simply re-enables the
+   * settings toggler so it continues to function as the drag handle.
+   */
+  private restoreSettingsTogglerForLeftEdgeBlock(targetBlock: Block): void {
+    if (targetBlock.name === 'callout') {
+      if (this.nodes.settingsToggler) {
+        this.nodes.settingsToggler.style.pointerEvents = 'auto';
+      }
+
+      const calloutDragZone = targetBlock.holder.querySelector<HTMLElement>('[data-callout-drag-zone]');
+
+      if (calloutDragZone) {
+        calloutDragZone.style.pointerEvents = 'auto';
+        targetBlock.setupDraggable(calloutDragZone, this.Blok.DragManager);
+      }
+
+      return;
+    }
+
+    if (this.nodes.settingsToggler) {
+      this.nodes.settingsToggler.style.pointerEvents = 'auto';
+    }
+  }
+
   /**
    * If the block is inside a table cell, resolve to the parent table block.
    * This ensures the toolbar shows for the table when clicking/focusing inside cells.

package/src/styles/main.css

@@ -644,6 +644,10 @@
   --color-swatch-ring-hover: var(--blok-swatch-ring-hover);
   --color-swatch-ring-active: var(--blok-swatch-ring-active);
 
+  /* Surface tokens (code blocks, secondary containers) */
+  --color-bg-secondary: var(--blok-bg-secondary);
+  --color-border-secondary: var(--blok-border-secondary);
+
 }
 
 @layer utilities {
@@ -725,6 +729,10 @@
   --blok-swatch-ring-hover: rgba(0, 0, 0, 0.10);
   --blok-swatch-ring-active: rgba(0, 0, 0, 0.30);
 
+  /* Surface tokens (code blocks, secondary containers) */
+  --blok-bg-secondary: #f7f8fa;
+  --blok-border-secondary: rgba(55, 53, 47, 0.09);
+
   /* Marker colors — light theme */
   --blok-color-gray-text: #787774;
   --blok-color-gray-bg: #f1f1ef;
@@ -818,6 +826,10 @@
     --blok-swatch-ring-hover: rgba(255, 255, 255, 0.15);
     --blok-swatch-ring-active: rgba(255, 255, 255, 0.35);
 
+    /* Surface tokens (code blocks, secondary containers) */
+    --blok-bg-secondary: rgba(255, 255, 255, 0.04);
+    --blok-border-secondary: rgba(255, 255, 255, 0.08);
+
     /* Marker colors — dark theme */
     --blok-color-gray-text: #9b9b9b;
     --blok-color-gray-bg: #2f2f2f;
@@ -910,6 +922,10 @@
   --blok-swatch-ring-hover: rgba(255, 255, 255, 0.15);
   --blok-swatch-ring-active: rgba(255, 255, 255, 0.35);
 
+  /* Surface tokens (code blocks, secondary containers) */
+  --blok-bg-secondary: rgba(255, 255, 255, 0.04);
+  --blok-border-secondary: rgba(255, 255, 255, 0.08);
+
   /* Marker colors — dark theme */
   --blok-color-gray-text: #9b9b9b;
   --blok-color-gray-bg: #2f2f2f;

package/src/tools/callout/constants.ts

@@ -25,7 +25,8 @@ export const EMOJI_CATEGORY_FLAGS_KEY = 'tools.callout.emojiCategoryFlags';
 export const DEFAULT_EMOJI = '💡';
 
 // CSS — Tailwind classes
-export const WRAPPER_STYLES = 'rounded-xl px-4 py-[5px] my-1 flex items-start gap-2';
+export const WRAPPER_STYLES = 'rounded-xl pl-8 pr-4 py-[5px] my-1 flex items-start gap-2 relative';
 // h-[38px] = py-[7px]×2 + 1.5rem×1 = 14+24; explicit height prevents platform-specific emoji font metrics from inflating the button
 export const EMOJI_BUTTON_STYLES = 'text-[1.5rem] leading-[1] cursor-pointer bg-transparent border-0 px-0 py-[7px] h-[38px] flex-shrink-0 select-none';
 export const CHILDREN_STYLES = 'flex-1 min-w-0';
+export const DRAG_ZONE_STYLES = 'absolute left-0 top-0 h-full cursor-grab select-none';

package/src/tools/callout/dom-builder.ts

@@ -6,12 +6,14 @@ import {
   WRAPPER_STYLES,
   EMOJI_BUTTON_STYLES,
   CHILDREN_STYLES,
+  DRAG_ZONE_STYLES,
 } from './constants';
 
 export interface CalloutDOMRefs {
   wrapper: HTMLElement;
   emojiButton: HTMLButtonElement;
   childContainer: HTMLElement;
+  dragZone: HTMLElement;
 }
 
 export interface BuildCalloutDOMOptions {
@@ -51,5 +53,13 @@ export function buildCalloutDOM(options: BuildCalloutDOMOptions): CalloutDOMRefs
   wrapper.appendChild(emojiButton);
   wrapper.appendChild(childContainer);
 
-  return { wrapper, emojiButton, childContainer };
+  // Drag zone — covers left padding area (x=[0,16px]) for drag handle,
+  // sits behind emoji button so emoji clicks pass through
+  const dragZone = document.createElement('span');
+  dragZone.className = DRAG_ZONE_STYLES;
+  dragZone.style.width = '32px'; // matches pl-8 left padding
+  dragZone.setAttribute('data-callout-drag-zone', '');
+  wrapper.prepend(dragZone);
+
+  return { wrapper, emojiButton, childContainer, dragZone };
 }

package/src/tools/callout/index.ts

@@ -66,6 +66,7 @@ export class CalloutTool implements BlockTool {
   private _dom: CalloutDOMRefs | null = null;
   private _emojiPicker: EmojiPicker | null = null;
   private _colorPicker: ColorPickerHandle | null = null;
+  private _dragZone: HTMLElement | null = null;
   private blockId?: string;
 
   constructor({ data, api, readOnly, block }: BlockToolConstructorOptions<CalloutData, CalloutConfig>) {
@@ -120,6 +121,7 @@ export class CalloutTool implements BlockTool {
     });
 
     this._dom = dom;
+    this._dragZone = dom.dragZone;
     this.applyColors();
 
     if (!this.readOnly) {
@@ -260,6 +262,10 @@ export class CalloutTool implements BlockTool {
     }
   }
 
+  public get dragZone(): HTMLElement | null {
+    return this._dragZone;
+  }
+
   private syncPickerActiveColors(): void {
     if (this._colorPicker === null) {
       return;

package/src/tools/code/constants.ts

@@ -53,7 +53,7 @@ export const LANGUAGES: LanguageEntry[] = [
 ];
 
 // CSS — Tailwind classes
-export const WRAPPER_STYLES = 'flex flex-col rounded-lg bg-bg-secondary overflow-hidden my-1';
+export const WRAPPER_STYLES = 'flex flex-col rounded-lg border border-border-secondary bg-bg-secondary overflow-hidden my-1';
 export const HEADER_STYLES = 'flex items-center gap-1 px-3 py-1.5 border-b border-border-primary text-xs text-gray-text';
 export const LANGUAGE_BUTTON_STYLES = 'px-1.5 py-0.5 rounded cursor-pointer bg-transparent border-0 text-xs text-gray-text font-medium transition-colors can-hover:hover:bg-item-hover-bg select-none';
 export const HEADER_BUTTON_STYLES = 'p-1 rounded cursor-pointer bg-transparent border-0 text-gray-text transition-colors can-hover:hover:bg-item-hover-bg flex items-center justify-center';
@@ -73,6 +73,14 @@ export const TAB_ACTIVE_STYLES = 'bg-blue-500 text-white';
 export const TAB_INACTIVE_STYLES = 'bg-transparent text-gray-text can-hover:hover:bg-item-hover-bg';
 export const PREVIEW_AREA_STYLES = 'px-4 py-3 overflow-x-auto min-h-[1.5em] flex justify-center';
 
+// i18n key — preview toggle
+export const PREVIEW_TOGGLE_KEY = 'tools.code.previewToggle';
+
+// CSS — more menu dropdown
+export const MORE_MENU_STYLES = 'absolute right-0 top-full mt-1 min-w-[10rem] rounded-lg bg-bg-secondary border border-border-secondary shadow-lg p-1 z-10';
+export const MORE_MENU_ITEM_STYLES = 'flex items-center gap-2 w-full px-2.5 py-1.5 rounded text-xs text-gray-text cursor-pointer bg-transparent border-0 transition-colors can-hover:hover:bg-item-hover-bg select-none';
+export const MORE_MENU_ITEM_ACTIVE_STYLES = 'text-blue-500';
+
 // Shiki theme names for syntax highlighting
 export const SHIKI_LIGHT_THEME = 'one-light';
 export const SHIKI_DARK_THEME = 'vitesse-dark';