@jackuait/blok 0.8.3-beta.4 → 0.10.0-beta.1

package/src/components/modules/renderer.ts

@@ -12,6 +12,14 @@ import {
 } from '../utils/data-model-transform';
 import { migrateMarkColors } from '../utils/color-migration';
 
+/**
+ * Map of legacy EditorJS tool names to their Blok equivalents.
+ * Used during rendering to transparently migrate old article data.
+ */
+const TOOL_ALIASES: Readonly<Record<string, string>> = {
+  delimiter: 'divider',
+};
+
 /**
  * Module that responsible for rendering Blocks on blok initialization
  */
@@ -111,6 +119,15 @@ export class Renderer extends Module {
               };
             }
 
+            const aliasTarget = TOOL_ALIASES[originalTool];
+
+            if (aliasTarget !== undefined && Tools.available.has(aliasTarget)) {
+              return {
+                tool: aliasTarget,
+                data: blockToolData,
+              };
+            }
+
             logLabeled(`Tool «${originalTool}» is not found. Check 'tools' property at the Blok config.`, 'warn');
 
             return {

package/src/components/ui/toolbox.ts

@@ -535,6 +535,15 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
       const userSearchTerms = tool.searchTerms ?? [];
       const mergedSearchTerms = [...new Set([...librarySearchTerms, ...userSearchTerms])];
 
+      // Resolve translated search aliases from searchTermKeys
+      for (const key of toolboxItem.searchTermKeys ?? []) {
+        const fullKey = `searchTerms.${key}`;
+
+        if (this.i18n.has(fullKey)) {
+          mergedSearchTerms.push(this.i18n.t(fullKey));
+        }
+      }
+
       // Use entry-level shortcut if available, otherwise fall back to tool-level shortcut (for first entry only)
       const shortcut = toolboxItem.shortcut ?? (displaySecondaryLabel ? tool.shortcut : undefined);
 

package/src/components/utils/caret/boundaries.ts

@@ -56,13 +56,24 @@ export const checkContenteditableSliceForEmptiness = (
   /**
    * Check if we have any tags in the slice
    * We should not ignore them to allow navigation inside (e.g. empty bold tag)
+   *
+   * When checking the right side, trailing <br> tags are browser artifacts
+   * in contenteditable elements (sentinels for cursor positioning after Shift+Enter).
+   * If the only significant tags are <br> and there's no text content,
+   * the slice is effectively empty — skip the early return.
    */
-  const hasSignificantTags = tempDiv.querySelectorAll(
+  const significantTags = tempDiv.querySelectorAll(
     'img, br, hr, input, area, base, col, embed, link, meta, param, source, track, wbr'
-  ).length > 0;
+  );
 
-  if (hasSignificantTags) {
-    return false;
+  if (significantTags.length > 0) {
+    const isOnlyTrailingBrs = direction === 'right'
+      && tempDiv.querySelectorAll('img, hr, input, area, base, col, embed, link, meta, param, source, track, wbr').length === 0
+      && textContent.trim() === '';
+
+    if (!isOnlyTrailingBrs) {
+      return false;
+    }
   }
 
   /**

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

@@ -260,10 +260,6 @@ const hasHierarchicalRefs = (block: OutputBlockData): boolean => {
 export const analyzeDataFormat = (blocks: OutputBlockData[]): DataFormatAnalysis => {
   const foundHierarchicalRefs = blocks.some(hasHierarchicalRefs);
 
-  if (foundHierarchicalRefs) {
-    return { format: 'hierarchical', hasHierarchy: true };
-  }
-
   // Check if any block uses legacy list format (items[] array)
   const foundLegacyList = blocks.some(isLegacyListBlock);
 
@@ -273,9 +269,15 @@ export const analyzeDataFormat = (blocks: OutputBlockData[]): DataFormatAnalysis
   // Check if any block uses legacy callout format (has body field)
   const foundLegacyCallout = blocks.some(isLegacyCalloutBlock);
 
-  if (foundLegacyList || foundLegacyToggle || foundLegacyCallout) {
+  const hasLegacyBlocks = foundLegacyList || foundLegacyToggle || foundLegacyCallout;
+
+  if (foundHierarchicalRefs && !hasLegacyBlocks) {
+    return { format: 'hierarchical', hasHierarchy: true };
+  }
+
+  if (hasLegacyBlocks) {
     // Check if there's actual nesting for the hasHierarchy flag
-    const hasNesting = blocks.some(hasNestedItems) || blocks.some(block =>
+    const hasNesting = foundHierarchicalRefs || blocks.some(hasNestedItems) || blocks.some(block =>
       isLegacyToggleListBlock(block) && block.data.body?.blocks !== undefined && block.data.body.blocks.length > 0
     ) || blocks.some(block =>
       isLegacyCalloutBlock(block) && block.data.body?.blocks !== undefined && block.data.body.blocks.length > 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

@@ -63,6 +63,32 @@ const SKIN_TONE_HANDS: readonly string[] = [
   '✋', '✋🏻', '✋🏼', '✋🏽', '✋🏾', '✋🏿',
 ];
 
+const SKIN_TONE_STORAGE_KEY = 'blok-emoji-skin-tone';
+
+function loadSkinTone(): number {
+  try {
+    const raw = localStorage.getItem(SKIN_TONE_STORAGE_KEY);
+
+    if (raw === null) {
+      return 0;
+    }
+
+    const n = parseInt(raw, 10);
+
+    return n >= 0 && n <= 5 ? n : 0;
+  } catch {
+    return 0;
+  }
+}
+
+function saveSkinTone(index: number): void {
+  try {
+    localStorage.setItem(SKIN_TONE_STORAGE_KEY, String(index));
+  } catch {
+    // Silently ignore — storage quota or access denied
+  }
+}
+
 /** Dice SVG for the random button. */
 const ICON_DICE = '<svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="1.5" width="11" height="11" rx="2" stroke="currentColor" stroke-width="1.2"/><circle cx="4.5" cy="4.5" r=".9" fill="currentColor"/><circle cx="7" cy="7" r=".9" fill="currentColor"/><circle cx="9.5" cy="9.5" r=".9" fill="currentColor"/></svg>';
 
@@ -138,6 +164,17 @@ export class EmojiPicker {
     this._filterInput.value = '';
     this._element.setAttribute('data-theme', this.resolveTheme());
 
+    const storedTone = loadSkinTone();
+
+    if (storedTone !== this._skinTone) {
+      this._skinTone = storedTone;
+      this._skinToneToggle.textContent = SKIN_TONE_HANDS[storedTone];
+
+      for (const [i, btn] of this._skinToneButtons.entries()) {
+        this.applySkinToneActiveStyle(btn, i === storedTone);
+      }
+    }
+
     if (this._allEmojis.length === 0) {
       this._allEmojis = await loadEmojiData();
     }
@@ -246,7 +283,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 +298,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',
@@ -401,6 +436,7 @@ export class EmojiPicker {
 
   private setSkinTone(index: number): void {
     this._skinTone = index;
+    saveSkinTone(index);
 
     // Update the hand toggle to reflect current skin tone
     this._skinToneToggle.textContent = SKIN_TONE_HANDS[index];
@@ -653,7 +689,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

@@ -360,6 +360,7 @@ export class CalloutTool implements BlockTool {
       titleKey: 'callout',
       name: TOOL_NAME,
       searchTerms: ['callout', 'note', 'info', 'warning', 'tip', 'alert'],
+      searchTermKeys: ['callout', 'note', 'info', 'warning', 'tip', 'alert'],
     };
   }
 

package/src/tools/divider/index.ts

@@ -0,0 +1,97 @@
+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', 'delimiter', 'splitter'],
+      searchTermKeys: ['divider', 'separator', 'delimiter', 'splitter'],
+    };
+  }
+
+  /**
+   * 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/header/index.ts

@@ -1096,6 +1096,7 @@ export class Header implements BlockTool {
       name: `header-${level.number}`,
       data: { level: level.number },
       searchTerms: [`h${level.number}`, 'title', 'header', 'heading'],
+      searchTermKeys: ['title', 'header', 'heading'],
       shortcut: '#'.repeat(level.number),
     }));
 
@@ -1114,6 +1115,7 @@ export class Header implements BlockTool {
         name: `toggle-header-${level.number}`,
         data: { level: level.number, isToggleable: true },
         searchTerms: ['toggle', 'heading', `h${level.number}`, 'collapsible'],
+        searchTermKeys: ['toggle', 'heading', 'collapsible'],
         shortcut: '>' + '#'.repeat(level.number),
       }));
 

package/src/tools/index.ts

@@ -26,6 +26,8 @@ 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';
+export { Quote } from './quote';
 
 // Inline tools
 export { BoldInlineTool as Bold } from '../components/inline-tools/inline-tool-bold';
@@ -45,6 +47,8 @@ export const defaultBlockTools = {
   table: {},
   toggle: {},
   callout: {},
+  divider: {},
+  quote: {},
 } as const;
 
 export const defaultInlineTools = {

package/src/tools/list/style-config.ts

@@ -42,6 +42,7 @@ export const getToolboxConfig = (): ToolboxConfig => [
     data: { style: 'unordered' },
     name: 'bulleted-list',
     searchTerms: ['ul', 'bullet', 'unordered', 'list'],
+    searchTermKeys: ['bullet', 'unordered', 'list'],
     shortcut: '-',
   },
   {
@@ -51,6 +52,7 @@ export const getToolboxConfig = (): ToolboxConfig => [
     data: { style: 'ordered' },
     name: 'numbered-list',
     searchTerms: ['ol', 'ordered', 'number', 'list'],
+    searchTermKeys: ['ordered', 'number', 'list'],
     shortcut: '1.',
   },
   {
@@ -60,6 +62,7 @@ export const getToolboxConfig = (): ToolboxConfig => [
     data: { style: 'checklist' },
     name: 'check-list',
     searchTerms: ['checkbox', 'task', 'todo', 'check', 'list'],
+    searchTermKeys: ['checkbox', 'task', 'todo', 'check', 'list'],
     shortcut: '[]',
   },
 ];

package/src/tools/paragraph/index.ts

@@ -415,6 +415,7 @@ export class Paragraph implements BlockTool {
       title: 'Text',
       titleKey: 'text',
       searchTerms: ['p', 'paragraph', 'plain'],
+      searchTermKeys: ['paragraph', 'plain'],
     };
   }
 }

package/src/tools/quote/index.ts

@@ -0,0 +1,229 @@
+import type {
+  API,
+  BlockTool,
+  BlockToolConstructorOptions,
+  BlockToolData,
+  PasteEvent,
+  ToolboxConfig,
+  ConversionConfig,
+  ToolSanitizerConfig,
+  PasteConfig,
+} from '../../../types';
+import type { MenuConfig } from '../../../types/tools/menu-config';
+import { DATA_ATTR } from '../../components/constants';
+import { IconQuote } from '../../components/icons';
+import { stripFakeBackgroundElements } from '../../components/utils';
+import { PLACEHOLDER_FOCUS_ONLY_CLASSES, setupPlaceholder } from '../../components/utils/placeholder';
+import { twMerge } from '../../components/utils/tw';
+
+export interface QuoteData extends BlockToolData {
+  text: string;
+  size: 'default' | 'large';
+}
+
+const DEFAULT_PLACEHOLDER = 'tools.quote.placeholder';
+
+const BASE_CLASSES = [
+  'border-l-[3px]',
+  'border-current',
+  'pl-[0.9em]',
+  'pr-[0.9em]',
+  'py-[0.2em]',
+  'leading-[1.5]',
+  'outline-hidden',
+  'mt-[0.3em]',
+  'mb-[0.3em]',
+];
+
+const LARGE_CLASS = 'text-[1.2em]';
+
+export class Quote implements BlockTool {
+  private api: API;
+  private readOnly: boolean;
+  private _data: QuoteData;
+  private _element: HTMLQuoteElement | null = null;
+
+  constructor({ data, api, readOnly }: BlockToolConstructorOptions<QuoteData>) {
+    this.api = api;
+    this.readOnly = readOnly;
+    this._data = {
+      text: data?.text ?? '',
+      size: data?.size ?? 'default',
+    };
+
+    if (!this.readOnly) {
+      this.onKeyUp = this.onKeyUp.bind(this);
+    }
+  }
+
+  public onKeyUp(e: KeyboardEvent): void {
+    if (e.code !== 'Backspace' && e.code !== 'Delete') {
+      return;
+    }
+
+    if (!this._element) {
+      return;
+    }
+
+    if (this._element.textContent === '') {
+      this._element.innerHTML = '';
+    }
+  }
+
+  public render(): HTMLQuoteElement {
+    const el = document.createElement('blockquote');
+
+    el.className = twMerge(
+      this.api.styles.block,
+      BASE_CLASSES,
+      PLACEHOLDER_FOCUS_ONLY_CLASSES,
+      this._data.size === 'large' ? LARGE_CLASS : ''
+    );
+    el.setAttribute(DATA_ATTR.tool, 'quote');
+    el.contentEditable = 'false';
+
+    if (this._data.text) {
+      el.innerHTML = this._data.text;
+    } else if (this.readOnly) {
+      el.innerHTML = '<br>';
+    }
+
+    if (!this.readOnly) {
+      el.contentEditable = 'true';
+      el.addEventListener('keyup', this.onKeyUp);
+      setupPlaceholder(el, this.api.i18n.t(DEFAULT_PLACEHOLDER), 'data-blok-placeholder-active');
+    }
+
+    this._element = el;
+
+    return el;
+  }
+
+  public save(blockContent: HTMLQuoteElement): QuoteData {
+    return {
+      text: stripFakeBackgroundElements(blockContent.innerHTML),
+      size: this._data.size,
+    };
+  }
+
+  public validate(savedData: QuoteData): boolean {
+    return savedData.text.trim() !== '';
+  }
+
+  public merge(data: QuoteData): void {
+    if (!this._element) {
+      return;
+    }
+
+    this._data.text += data.text;
+
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = data.text.trim();
+    const fragment = document.createDocumentFragment();
+    fragment.append(...Array.from(wrapper.childNodes));
+
+    this._element.appendChild(fragment);
+    this._element.normalize();
+  }
+
+  public renderSettings(): MenuConfig {
+    return [
+      {
+        icon: IconQuote,
+        title: this.api.i18n.t('tools.quote.size'),
+        name: 'quote-size',
+        children: {
+          items: [
+            {
+              icon: IconQuote,
+              title: this.api.i18n.t('tools.quote.defaultSize'),
+              onActivate: (): void => this.setSize('default'),
+              closeOnActivate: true,
+              isActive: this._data.size === 'default',
+            },
+            {
+              icon: IconQuote,
+              title: this.api.i18n.t('tools.quote.largeSize'),
+              onActivate: (): void => this.setSize('large'),
+              closeOnActivate: true,
+              isActive: this._data.size === 'large',
+            },
+          ],
+        },
+      },
+    ];
+  }
+
+  private setSize(size: 'default' | 'large'): void {
+    this._data.size = size;
+
+    if (this._element) {
+      this._element.className = twMerge(
+        this.api.styles.block,
+        BASE_CLASSES,
+        PLACEHOLDER_FOCUS_ONLY_CLASSES,
+        size === 'large' ? LARGE_CLASS : ''
+      );
+    }
+  }
+
+  public onPaste(event: PasteEvent): void {
+    const detail = event.detail;
+
+    if (!('data' in detail)) {
+      return;
+    }
+
+    const content = detail.data as HTMLElement;
+
+    this._data = {
+      text: content.innerHTML,
+      size: this._data.size,
+    };
+
+    if (this._element) {
+      this._element.innerHTML = this._data.text || '';
+    }
+  }
+
+  public static get toolbox(): ToolboxConfig {
+    return {
+      icon: IconQuote,
+      title: 'Quote',
+      titleKey: 'quote',
+      searchTerms: ['quote', 'blockquote', 'citation'],
+      searchTermKeys: ['quote', 'blockquote', 'citation'],
+    };
+  }
+
+  public static get conversionConfig(): ConversionConfig {
+    return {
+      export: 'text',
+      import: 'text',
+    };
+  }
+
+  public static get sanitize(): ToolSanitizerConfig {
+    return {
+      text: {
+        br: true,
+        b: true,
+        i: true,
+        a: true,
+        mark: {
+          style: true,
+        },
+      },
+    };
+  }
+
+  public static get isReadOnlySupported(): boolean {
+    return true;
+  }
+
+  public static get pasteConfig(): PasteConfig {
+    return {
+      tags: ['BLOCKQUOTE'],
+    };
+  }
+}

package/src/tools/table/index.ts

@@ -220,6 +220,7 @@ export class Table implements BlockTool {
       title: 'Table',
       titleKey: 'tools.table.title',
       searchTerms: ['table', 'grid', 'spreadsheet'],
+      searchTermKeys: ['table', 'grid', 'spreadsheet'],
     };
   }
 

package/src/tools/toggle/index.ts

@@ -374,6 +374,7 @@ export class ToggleItem implements BlockTool {
       titleKey: 'toggleList',
       name: TOOL_NAME,
       searchTerms: ['toggle', 'collapse', 'expand', 'accordion'],
+      searchTermKeys: ['toggle', 'collapse', 'expand', 'accordion'],
       shortcut: '>',
     };
   }

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/tool-settings.d.ts

@@ -53,6 +53,13 @@ export interface ToolboxConfigEntry {
    */
   searchTerms?: string[];
 
+  /**
+   * Translation keys for localized search aliases (e.g., ['divider', 'separator']).
+   * Each key is resolved via `searchTerms.{key}` in the i18n system.
+   * The translated strings are added to searchTerms at runtime for multilingual search.
+   */
+  searchTermKeys?: string[];
+
   /**
    * Shortcut hint to display in the toolbox (e.g., '#', '##', '-', '1.', '[]').
    * This is displayed as a secondary label next to the tool title.