@jackuait/blok 0.8.2 → 0.8.3-beta.2

package/src/tools/callout/index.ts

@@ -0,0 +1,338 @@
+// src/tools/callout/index.ts
+
+import type {
+  API,
+  BlockTool,
+  BlockToolConstructorOptions,
+  ToolboxConfig,
+  ConversionConfig,
+  ToolSanitizerConfig,
+} from '../../../types';
+import type { MenuConfig } from '../../../types/tools/menu-config';
+import { PopoverItemType } from '../../components/utils/popover';
+import type { CalloutData, CalloutConfig } from './types';
+import { buildCalloutDOM, type CalloutDOMRefs } from './dom-builder';
+import { saveCallout } from './block-operations';
+import { handleCalloutFirstChildBackspace } from './callout-keyboard';
+import { createColorPicker, type ColorPickerHandle } from '../../components/shared/color-picker';
+import { colorVarName } from '../../components/shared/color-presets';
+import { mapToNearestPresetName } from '../../components/utils/color-mapping';
+import { EmojiPicker } from './emoji-picker';
+import { IconCallout, IconEmojiSmile, IconPaintRoller } from '../../components/icons';
+import {
+  TOOL_NAME,
+  COLOR_KEY,
+  EDIT_ICON_KEY,
+  ADD_EMOJI_KEY,
+  DEFAULT_EMOJI,
+} from './constants';
+
+export class CalloutTool implements BlockTool {
+  private readonly api: API;
+  private readonly readOnly: boolean;
+  private _data: CalloutData;
+  private _dom: CalloutDOMRefs | null = null;
+  private _emojiPicker: EmojiPicker | null = null;
+  private _colorPicker: ColorPickerHandle | null = null;
+  private blockId?: string;
+
+  constructor({ data, api, readOnly, block }: BlockToolConstructorOptions<CalloutData, CalloutConfig>) {
+    this.api = api;
+    this.readOnly = readOnly;
+    this._data = this.normalizeData(data);
+
+    if (block) {
+      this.blockId = block.id;
+    }
+  }
+
+  private normalizeData(data: Partial<CalloutData>): CalloutData {
+    return {
+      emoji: typeof data.emoji === 'string' ? data.emoji : DEFAULT_EMOJI,
+      textColor: typeof data.textColor === 'string' ? data.textColor : null,
+      backgroundColor: typeof data.backgroundColor === 'string' ? data.backgroundColor : null,
+    };
+  }
+
+  public render(): HTMLElement {
+    const dom = buildCalloutDOM({
+      emoji: this._data.emoji,
+      readOnly: this.readOnly,
+      addEmojiLabel: this.api.i18n.t(ADD_EMOJI_KEY),
+    });
+
+    this._dom = dom;
+    this.applyColors();
+
+    if (!this.readOnly) {
+      dom.emojiButton.addEventListener('click', () => this.openEmojiPicker());
+      dom.emojiButton.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          this.openEmojiPicker();
+        }
+      });
+
+      // Backspace delegation: intercept on first child block when it's empty
+      dom.childContainer.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (e.key === 'Backspace') {
+          this.handleChildBackspace(e);
+        }
+      });
+    }
+
+    return dom.wrapper;
+  }
+
+  public rendered(): void {
+    if (this.blockId === undefined || this._dom === null) {
+      return;
+    }
+
+    const children = this.api.blocks.getChildren(this.blockId);
+
+    // Append existing children to the container
+    for (const child of children) {
+      if (child.holder.parentElement !== this._dom.childContainer) {
+        this._dom.childContainer.appendChild(child.holder);
+      }
+    }
+
+    // Auto-create initial paragraph child when callout has no children
+    if (children.length === 0) {
+      const blockIndex = this.api.blocks.getBlockIndex(this.blockId);
+
+      if (blockIndex !== undefined) {
+        const newBlock = this.api.blocks.insertInsideParent(this.blockId, blockIndex + 1);
+
+        // Manually append the new child's holder — insertInsideParent places it in the
+        // flat block list but doesn't know about our childContainer DOM.
+        this._dom.childContainer.appendChild(newBlock.holder);
+
+        this.api.caret.setToBlock(newBlock.id, 'start');
+      }
+    }
+  }
+
+  public save(): CalloutData {
+    return saveCallout({
+      emoji: this._data.emoji,
+      textColor: this._data.textColor,
+      backgroundColor: this._data.backgroundColor,
+    });
+  }
+
+  public validate(_data: CalloutData): boolean {
+    return true;
+  }
+
+  public renderSettings(): MenuConfig {
+    if (this._colorPicker === null) {
+      const picker = createColorPicker({
+        i18n: this.api.i18n,
+        testIdPrefix: 'callout-color',
+        modes: [
+          { key: 'color', labelKey: 'tools.marker.textColor', presetField: 'text' },
+          { key: 'background-color', labelKey: 'tools.marker.background', presetField: 'bg' },
+        ],
+        onColorSelect: (color, modeKey) => {
+          const presetName = color !== null ? mapToNearestPresetName(color, modeKey === 'color' ? 'text' : 'bg') : null;
+
+          if (modeKey === 'color') {
+            this._data.textColor = presetName;
+          } else {
+            this._data.backgroundColor = presetName;
+          }
+
+          picker.setActiveColor(color, modeKey);
+          this.applyColors();
+        },
+      });
+
+      this._colorPicker = picker;
+    }
+
+    // Sync active state with current data
+    this.syncPickerActiveColors();
+
+    return [
+      {
+        icon: IconEmojiSmile,
+        title: this.api.i18n.t(EDIT_ICON_KEY),
+        name: 'callout-edit-icon',
+        closeOnActivate: true,
+        onActivate: (): void => this.openEmojiPicker(),
+      },
+      {
+        icon: IconPaintRoller,
+        title: this.api.i18n.t(COLOR_KEY),
+        name: 'callout-color',
+        children: {
+          items: [
+            {
+              type: PopoverItemType.Html,
+              element: this._colorPicker.element,
+            },
+          ],
+        },
+      },
+    ];
+  }
+
+  public removed(): void {
+    // No-op — no subscriptions to clean up
+  }
+
+  private syncPickerActiveColors(): void {
+    if (this._colorPicker === null) {
+      return;
+    }
+
+    const textName = this._data.textColor;
+    const bgName = this._data.backgroundColor;
+
+    // The picker expects hex values; convert from preset name by looking up the light preset
+    // The picker's internal `colorsEqual` handles the comparison regardless of theme
+    this._colorPicker.setActiveColor(
+      textName !== null ? colorVarName(textName, 'text') : null,
+      'color'
+    );
+    this._colorPicker.setActiveColor(
+      bgName !== null ? colorVarName(bgName, 'bg') : null,
+      'background-color'
+    );
+  }
+
+  private applyColors(): void {
+    if (this._dom === null) {
+      return;
+    }
+
+    const { textColor, backgroundColor } = this._data;
+
+    if (textColor !== null) {
+      this._dom.wrapper.style.color = colorVarName(textColor, 'text');
+    } else {
+      this._dom.wrapper.style.color = '';
+    }
+
+    if (backgroundColor !== null) {
+      const bgVar = colorVarName(backgroundColor, 'bg');
+
+      this._dom.wrapper.style.backgroundColor = bgVar;
+      this._dom.wrapper.style.border = '';
+      this._dom.wrapper.style.setProperty('--blok-search-input-bg', `light-dark(color-mix(in srgb, ${bgVar} 70%, white), color-mix(in srgb, ${bgVar} 85%, white))`);
+    } else {
+      this._dom.wrapper.style.backgroundColor = '';
+      this._dom.wrapper.style.border = '1px solid var(--blok-callout-default-border, #e5e7eb)';
+      this._dom.wrapper.style.removeProperty('--blok-search-input-bg');
+      this._dom.wrapper.style.removeProperty('--blok-search-input-border');
+    }
+  }
+
+  private handleChildBackspace(e: KeyboardEvent): void {
+    if (this.blockId === undefined || this._dom === null) {
+      return;
+    }
+
+    const children = this.api.blocks.getChildren(this.blockId);
+
+    if (children.length === 0) {
+      return;
+    }
+
+    const firstChild = children[0];
+
+    // Only handle when the event target is inside the first child block
+    const target = e.target as HTMLElement;
+
+    if (!firstChild.holder.contains(target)) {
+      return;
+    }
+
+    // Only handle when the first child is empty and caret is at start
+    const selection = window.getSelection();
+    const isAtStart = selection !== null &&
+      selection.rangeCount > 0 &&
+      selection.getRangeAt(0).startOffset === 0 &&
+      selection.getRangeAt(0).collapsed;
+    const isEmpty = firstChild.holder.textContent === '';
+
+    if (!isEmpty || !isAtStart) {
+      return;
+    }
+
+    void handleCalloutFirstChildBackspace({
+      api: this.api,
+      calloutBlockId: this.blockId,
+      firstChildBlockId: firstChild.id,
+      event: e,
+    });
+  }
+
+  private openEmojiPicker(): void {
+    if (this._dom === null) {
+      return;
+    }
+
+    if (this._emojiPicker === null) {
+      this._emojiPicker = new EmojiPicker({
+        onSelect: (native: string) => this.setEmoji(native),
+        onRemove: () => this.setEmoji(''),
+        i18n: this.api.i18n,
+        locale: this.api.i18n.getLocale(),
+      });
+      document.body.appendChild(this._emojiPicker.getElement());
+    }
+
+    void this._emojiPicker.open(this._dom.emojiButton);
+  }
+
+  private setEmoji(native: string): void {
+    this._data.emoji = native;
+
+    if (this._dom === null) {
+      return;
+    }
+
+    this._dom.emojiButton.textContent = native;
+    this._dom.emojiButton.setAttribute(
+      'aria-label',
+      native !== '' ? native : this.api.i18n.t(ADD_EMOJI_KEY)
+    );
+  }
+
+  public static get toolbox(): ToolboxConfig {
+    return {
+      icon: IconCallout,
+      title: 'Callout',
+      titleKey: 'callout',
+      name: TOOL_NAME,
+      searchTerms: ['callout', 'note', 'info', 'warning', 'tip', 'alert'],
+    };
+  }
+
+  public static get conversionConfig(): ConversionConfig<CalloutData> {
+    return {
+      import: (): CalloutData => ({
+        emoji: DEFAULT_EMOJI,
+        textColor: null,
+        backgroundColor: null,
+      }),
+    };
+  }
+
+  public static get sanitize(): ToolSanitizerConfig {
+    return {
+      emoji: false,
+      textColor: false,
+      backgroundColor: false,
+    };
+  }
+
+  public static get isReadOnlySupported(): boolean {
+    return true;
+  }
+}
+
+export type { CalloutData, CalloutConfig };

package/src/tools/callout/types.ts

@@ -0,0 +1,11 @@
+// src/tools/callout/types.ts
+
+import type { BlockToolData } from '../../../types';
+
+export interface CalloutData extends BlockToolData {
+  emoji: string;
+  textColor: string | null;
+  backgroundColor: string | null;
+}
+
+export interface CalloutConfig {}

package/src/tools/header/header-toggle-keyboard.ts

@@ -10,7 +10,7 @@
 import type { API } from '../../../types';
 
 import { isCaretAtStartOfInput } from '../../components/utils/caret';
-import { splitContentAtRange } from '../toggle/toggle-keyboard';
+import { getInsertAfterLastDescendantIndex, splitContentAtRange } from '../toggle/toggle-keyboard';
 
 export interface HeaderToggleKeyboardContext {
   api: API;
@@ -57,7 +57,8 @@ export const handleHeaderToggleEnter = async (
     // Caret at end of an open toggle heading → insert child paragraph.
     // insertInsideParent() groups both block creation and parent assignment into
     // a single Yjs undo entry, so one CMD+Z removes the new block completely.
-    const newBlock = api.blocks.insertInsideParent(blockId, currentBlockIndex + 1);
+    const insertIndex = getInsertAfterLastDescendantIndex(api, blockId, currentBlockIndex);
+    const newBlock = api.blocks.insertInsideParent(blockId, insertIndex);
 
     api.caret.setToBlock(newBlock.id, 'start');
 

package/src/tools/header/index.ts

@@ -183,7 +183,7 @@ export class Header implements BlockTool {
     this.readOnly = readOnly;
     this._settings = config || {};
     this._data = this.normalizeData(data);
-    this._isOpen = this._data.isOpen ?? !readOnly;
+    this._isOpen = this._data.isOpen ?? true;
     this._element = this.getTag();
 
     if (block) {

package/src/tools/index.ts

@@ -25,6 +25,7 @@ export { Header } from './header';
 export { ListItem as List } from './list';
 export { Table } from './table';
 export { ToggleItem as Toggle } from './toggle';
+export { CalloutTool as Callout } from './callout';
 
 // Inline tools
 export { BoldInlineTool as Bold } from '../components/inline-tools/inline-tool-bold';
@@ -43,6 +44,7 @@ export const defaultBlockTools = {
   list: {},
   table: {},
   toggle: {},
+  callout: {},
 } as const;
 
 export const defaultInlineTools = {

package/src/tools/toggle/index.ts

@@ -50,7 +50,7 @@ export class ToggleItem implements BlockTool {
     this.readOnly = readOnly;
     this._settings = config || {};
     this._data = this.normalizeData(data);
-    this._isOpen = this._data.isOpen ?? !readOnly;
+    this._isOpen = this._data.isOpen ?? true;
 
     if (block) {
       this.blockId = block.id;

package/src/tools/toggle/toggle-keyboard.ts

@@ -61,7 +61,8 @@ export const handleToggleEnter = async (context: ToggleKeyboardContext): Promise
    * a single Yjs undo entry, so one CMD+Z removes the new block completely.
    */
   if (isOpen && afterContent === '') {
-    const newBlock = api.blocks.insertInsideParent(blockId, currentBlockIndex + 1);
+    const insertIndex = getInsertAfterLastDescendantIndex(api, blockId, currentBlockIndex);
+    const newBlock = api.blocks.insertInsideParent(blockId, insertIndex);
 
     api.caret.setToBlock(newBlock.id, 'start');
 
@@ -122,6 +123,33 @@ export const handleToggleBackspace = async (
   await api.blocks.convert(blockId, 'paragraph', { text });
 };
 
+/**
+ * Returns the flat-array index at which a new child should be inserted so that
+ * it appears as the **last** child of `parentId`. Walks descendants recursively
+ * so nested toggles are accounted for.
+ *
+ * @param api - Blocks API
+ * @param parentId - ID of the parent block
+ * @param parentIndex - Flat-array index of the parent block
+ * @returns The insertion index (one past the last descendant)
+ */
+export const getInsertAfterLastDescendantIndex = (
+  api: Pick<API, 'blocks'>,
+  parentId: string,
+  parentIndex: number
+): number => {
+  const children = api.blocks.getChildren(parentId);
+
+  if (children.length === 0) {
+    return parentIndex + 1;
+  }
+
+  const lastChild = children[children.length - 1];
+  const lastChildIndex = api.blocks.getBlockIndex(lastChild.id) ?? parentIndex;
+
+  return getInsertAfterLastDescendantIndex(api, lastChild.id, lastChildIndex);
+};
+
 /**
  * Split content element's HTML at the given range position.
  *

package/types/api/i18n.d.ts

@@ -27,4 +27,11 @@ export interface I18n {
    * @returns English translation string, or empty string if not found
    */
   getEnglishTranslation(key: string): string;
+
+  /**
+   * Get the current locale code.
+   *
+   * @returns The active locale code (e.g., 'en', 'fr', 'ja')
+   */
+  getLocale(): string;
 }

package/types/tools-entry.d.ts

@@ -32,8 +32,6 @@ export const Italic: InlineToolConstructable;
 export const Link: InlineToolConstructable;
 export const Convert: InlineToolConstructable;
 export const Marker: InlineToolConstructable;
-export const Strikethrough: InlineToolConstructable;
-export const Underline: InlineToolConstructable;
 
 // Block tunes
 export const Delete: BlockTuneConstructable;
@@ -56,6 +54,4 @@ export const defaultInlineTools: {
   readonly italic: {};
   readonly link: {};
   readonly marker: {};
-  readonly strikethrough: {};
-  readonly underline: {};
 };