@jackuait/blok 0.8.3-beta.3 → 0.9.0

package/src/styles/main.css

@@ -1164,16 +1164,18 @@
  * Callout emoji vertical centering for heading first children.
  * Headings have taller line boxes than the emoji button, so the emoji
  * needs a top margin to shift its center down to match the heading's
- * first line center.  Values: (heading-line-height − emoji-content) / 2 + 1px mt-px.
+ * first line center.  Values: (heading-line-height − emoji-line-height) / 2 + 1px mt-px.
+ * Emoji button: text-[1.5rem] leading-[1] → line-height 24px.
+ * H1 text-3xl leading-[1.3] → 39px; H2 text-2xl → 31.2px; H3 text-xl → 26px.
  */
 [data-blok-component="callout"] button:has(+ [data-blok-toggle-children] > :first-child h1) {
-  margin-top: 7.5px;
+  margin-top: 8.5px;
 }
 [data-blok-component="callout"] button:has(+ [data-blok-toggle-children] > :first-child h2) {
-  margin-top: 3.6px;
+  margin-top: 4.6px;
 }
 [data-blok-component="callout"] button:has(+ [data-blok-toggle-children] > :first-child h3) {
-  margin-top: 1px;
+  margin-top: 2px;
 }
 
 /**

package/src/tools/callout/constants.ts

@@ -26,5 +26,5 @@ 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 EMOJI_BUTTON_STYLES = 'text-[1.25rem] cursor-pointer bg-transparent border-0 px-0 py-[7px] flex-shrink-0 select-none';
+export const EMOJI_BUTTON_STYLES = 'text-[1.5rem] leading-[1] cursor-pointer bg-transparent border-0 px-0 py-[7px] flex-shrink-0 select-none';
 export const CHILDREN_STYLES = 'flex-1 min-w-0';

package/src/tools/callout/emoji-picker/index.ts

@@ -246,7 +246,6 @@ export class EmojiPicker {
     randomBtn.type = 'button';
     randomBtn.setAttribute('data-emoji-picker-random', '');
     randomBtn.setAttribute('aria-label', this.i18n.t(PICK_RANDOM_KEY));
-    randomBtn.title = this.i18n.t(PICK_RANDOM_KEY);
     randomBtn.className = [
       'flex-shrink-0 w-[34px] h-[34px] flex items-center justify-center rounded-lg',
       'text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600',
@@ -262,7 +261,6 @@ export class EmojiPicker {
     removeBtn.type = 'button';
     removeBtn.setAttribute('data-emoji-picker-remove', '');
     removeBtn.setAttribute('aria-label', this.i18n.t(REMOVE_EMOJI_KEY));
-    removeBtn.title = this.i18n.t(REMOVE_EMOJI_KEY);
     removeBtn.className = [
       'flex-shrink-0 w-[34px] h-[34px] flex items-center justify-center rounded-lg',
       'text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600',
@@ -653,7 +651,6 @@ export class EmojiPicker {
       const btn = document.createElement('button');
       btn.type = 'button';
       btn.textContent = this.getSkinnedNative(emoji);
-      btn.title = this.getDisplayName(emoji);
       btn.setAttribute('data-emoji-native', emoji.native);
       btn.className = [
         'aspect-square flex items-center justify-center',

package/src/tools/callout/index.ts

@@ -27,6 +27,35 @@ import {
   DEFAULT_EMOJI,
 } from './constants';
 
+/**
+ * Resolve emoji from legacy callout data fields
+ */
+function resolveLegacyEmoji(data: Record<string, unknown>): string {
+  if (data.isEmojiVisible === false) {
+    return '';
+  }
+
+  if (typeof data.emoji === 'string' && data.emoji.length > 0) {
+    return data.emoji;
+  }
+
+  return DEFAULT_EMOJI;
+}
+
+/**
+ * Map legacy callout variant to backgroundColor preset name.
+ * Used when receiving data from older format that has variant instead of backgroundColor.
+ */
+const VARIANT_TO_BG_PRESET: Record<string, string | null> = {
+  general: null,
+  note: 'blue',
+  important: 'purple',
+  warning: 'orange',
+  additional: 'yellow',
+  recommendation: 'green',
+  caution: 'red',
+};
+
 export class CalloutTool implements BlockTool {
   private readonly api: API;
   private readonly readOnly: boolean;
@@ -47,6 +76,13 @@ export class CalloutTool implements BlockTool {
   }
 
   private normalizeData(data: Partial<CalloutData>): CalloutData {
+    const legacyData = data as Record<string, unknown>;
+    const hasLegacyFields = 'variant' in legacyData || 'isEmojiVisible' in legacyData;
+
+    if (hasLegacyFields) {
+      return this.normalizeLegacyData(legacyData);
+    }
+
     return {
       emoji: typeof data.emoji === 'string' ? data.emoji : DEFAULT_EMOJI,
       textColor: typeof data.textColor === 'string' ? data.textColor : null,
@@ -54,6 +90,21 @@ export class CalloutTool implements BlockTool {
     };
   }
 
+  private normalizeLegacyData(data: Record<string, unknown>): CalloutData {
+    // Map variant to backgroundColor
+    const variant = typeof data.variant === 'string' ? data.variant : 'general';
+    const backgroundColor = variant in VARIANT_TO_BG_PRESET ? VARIANT_TO_BG_PRESET[variant] : null;
+
+    // Map isEmojiVisible + emoji to emoji string
+    const emoji = resolveLegacyEmoji(data);
+
+    return {
+      emoji,
+      textColor: null,
+      backgroundColor: backgroundColor ?? null,
+    };
+  }
+
   public render(): HTMLElement {
     const dom = buildCalloutDOM({
       emoji: this._data.emoji,

package/src/tools/divider/index.ts

@@ -0,0 +1,96 @@
+import type {
+  BlockTool,
+  BlockToolConstructorOptions,
+  PasteConfig,
+  SanitizerConfig,
+  ToolboxConfig,
+} from '../../../types';
+import type { DividerData } from './types';
+import { IconDivider } from '../../components/icons';
+import { twMerge } from '../../components/utils/tw';
+
+/**
+ * Divider block tool — renders a thin horizontal line separator.
+ * Contentless void block with no editable content or settings.
+ */
+export class DividerTool implements BlockTool {
+  /**
+   * Rendered wrapper element
+   */
+  private element: HTMLElement | null = null;
+
+  /**
+   * @param _options - block tool constructor options (unused for divider)
+   */
+  constructor(_options: BlockToolConstructorOptions<DividerData>) {}
+
+  /**
+   * Render a wrapper with a semantic <hr> element inside.
+   * Wrapper uses padding for spacing and minimal line-height so the
+   * toolbar positioning algorithm centers correctly on the divider line.
+   */
+  public render(): HTMLElement {
+    const wrapper = document.createElement('div');
+
+    wrapper.className = twMerge('py-3', 'leading-[1px]');
+
+    const hr = document.createElement('hr');
+
+    hr.className = twMerge('border-t', 'border-border-primary', 'border-b-0', 'border-l-0', 'border-r-0');
+    wrapper.appendChild(hr);
+    this.element = wrapper;
+
+    return wrapper;
+  }
+
+  /**
+   * Return empty data — divider has no content
+   */
+  public save(): DividerData {
+    return {} as DividerData;
+  }
+
+  /**
+   * Always valid — nothing to validate
+   */
+  public validate(_data: DividerData): boolean {
+    return true;
+  }
+
+  /**
+   * Toolbox appearance
+   */
+  public static get toolbox(): ToolboxConfig {
+    return {
+      icon: IconDivider,
+      titleKey: 'divider',
+      shortcut: '---',
+      searchTerms: ['hr', 'line', 'separator', 'rule', '---'],
+    };
+  }
+
+  /**
+   * Divider works in read-only mode
+   */
+  public static get isReadOnlySupported(): boolean {
+    return true;
+  }
+
+  /**
+   * Paste three-or-more hyphens to create a divider
+   */
+  public static get pasteConfig(): PasteConfig {
+    return {
+      patterns: {
+        divider: /^-{3,}$/,
+      },
+    };
+  }
+
+  /**
+   * Nothing to sanitize — no HTML content
+   */
+  public static get sanitize(): SanitizerConfig {
+    return {};
+  }
+}

package/src/tools/divider/types.ts

@@ -0,0 +1,6 @@
+import type { BlockToolData } from '../../../types';
+
+/**
+ * Divider block data. Empty — dividers have no configurable properties.
+ */
+export interface DividerData extends BlockToolData {}

package/src/tools/index.ts

@@ -26,6 +26,7 @@ export { ListItem as List } from './list';
 export { Table } from './table';
 export { ToggleItem as Toggle } from './toggle';
 export { CalloutTool as Callout } from './callout';
+export { DividerTool as Divider } from './divider';
 
 // Inline tools
 export { BoldInlineTool as Bold } from '../components/inline-tools/inline-tool-bold';
@@ -45,6 +46,7 @@ export const defaultBlockTools = {
   table: {},
   toggle: {},
   callout: {},
+  divider: {},
 } as const;
 
 export const defaultInlineTools = {

package/types/tools/divider.d.ts

@@ -0,0 +1,11 @@
+import { BlockTool, BlockToolConstructable, BlockToolConstructorOptions, BlockToolData } from './block-tool';
+
+/**
+ * Divider Tool's input and output data format.
+ * Empty — dividers have no configurable properties.
+ */
+export interface DividerData extends BlockToolData {}
+
+export interface DividerConstructable extends BlockToolConstructable {
+  new(options: BlockToolConstructorOptions<DividerData>): BlockTool;
+}

package/types/tools-entry.d.ts

@@ -8,6 +8,7 @@ import { ParagraphConstructable, ParagraphData, ParagraphConfig } from './tools/
 import { ListConstructable, ListData, ListConfig, ListStyle } from './tools/list';
 import { TableConstructable, TableData, TableConfig, CellContent } from './tools/table';
 import { ToggleConstructable, ToggleData, ToggleConfig } from './tools/toggle';
+import { DividerConstructable, DividerData } from './tools/divider';
 import { InlineToolConstructable } from './tools/inline-tool';
 import { BlockTuneConstructable } from './block-tunes';
 import { ToolSettings } from './tools';
@@ -18,6 +19,7 @@ export const Header: HeaderConstructable;
 export const List: ListConstructable;
 export const Table: TableConstructable;
 export const Toggle: ToggleConstructable;
+export const Divider: DividerConstructable;
 
 // Re-export data and config types for convenience
 export { HeaderData, HeaderConfig } from './tools/header';
@@ -25,6 +27,7 @@ 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';
+export { DividerData } from './tools/divider';
 
 // Inline tools
 export const Bold: InlineToolConstructable;
@@ -42,10 +45,13 @@ export const Delete: BlockTuneConstructable;
  * Default block tools configuration
  */
 export const defaultBlockTools: {
-  readonly paragraph: { readonly inlineToolbar: true; readonly config: { readonly preserveBlank: true } };
-  readonly header: { readonly inlineToolbar: true };
-  readonly list: { readonly inlineToolbar: true };
+  readonly paragraph: { readonly preserveBlank: true };
+  readonly header: {};
+  readonly list: {};
   readonly table: {};
+  readonly toggle: {};
+  readonly callout: {};
+  readonly divider: {};
 };
 
 /**