@jackuait/blok 0.9.0 → 0.10.0-beta.10

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();
     }
@@ -399,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];
@@ -575,8 +613,9 @@ export class EmojiPicker {
       this._body.appendChild(section);
     }
 
-    // Standard categories
-    const byCategory = groupEmojisByCategory(emojis);
+    // Standard categories (exclude curated emojis to avoid duplicates)
+    const curatedSet = new Set(CURATED_CALLOUT_EMOJIS);
+    const byCategory = groupEmojisByCategory(emojis.filter(e => !curatedSet.has(e.native)));
 
     for (const [category, categoryEmojis] of byCategory) {
       visibleCategories.add(category);

package/src/tools/callout/index.ts

@@ -7,6 +7,8 @@ import type {
   ToolboxConfig,
   ConversionConfig,
   ToolSanitizerConfig,
+  PasteConfig,
+  HTMLPasteEvent,
 } from '../../../types';
 import type { MenuConfig } from '../../../types/tools/menu-config';
 import { PopoverItemType } from '../../components/utils/popover';
@@ -177,6 +179,22 @@ export class CalloutTool implements BlockTool {
     return true;
   }
 
+  public onPaste(event: HTMLPasteEvent): void {
+    const content = event.detail.data;
+    const style = content.getAttribute('style') ?? '';
+    const bgMatch = /background(?:-color)?\s*:\s*([^;]+)/i.exec(style);
+
+    if (bgMatch?.[1]) {
+      const presetName = mapToNearestPresetName(bgMatch[1].trim(), 'bg');
+
+      if (presetName) {
+        this._data.backgroundColor = presetName;
+      }
+    }
+
+    this.applyColors();
+  }
+
   public renderSettings(): MenuConfig {
     if (this._colorPicker === null) {
       const picker = createColorPicker({
@@ -360,6 +378,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'],
     };
   }
 
@@ -373,6 +392,12 @@ export class CalloutTool implements BlockTool {
     };
   }
 
+  public static get pasteConfig(): PasteConfig {
+    return {
+      tags: [{ ASIDE: { style: true } }],
+    };
+  }
+
   public static get sanitize(): ToolSanitizerConfig {
     return {
       emoji: false,

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

@@ -0,0 +1,142 @@
+import { TAB_STRING } from './constants';
+
+/**
+ * Handle keydown events inside the code block.
+ * Returns true if the event was handled (caller should preventDefault).
+ */
+export function handleCodeKeydown(
+  event: KeyboardEvent,
+  codeElement: HTMLElement,
+  onExit: () => void
+): boolean {
+  if (event.key === 'Enter' && event.shiftKey) {
+    onExit();
+    return true;
+  }
+
+  if (event.key === 'Enter') {
+    insertNewline(codeElement);
+    return true;
+  }
+
+  if (event.key === 'Tab' && !event.shiftKey) {
+    insertTab();
+    return true;
+  }
+
+  if (event.key === 'Tab' && event.shiftKey) {
+    removeTab(codeElement);
+    return true;
+  }
+
+  return false;
+}
+
+function insertNewline(codeElement: HTMLElement): void {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+
+  const range = selection.getRangeAt(0);
+
+  const preCaretRange = range.cloneRange();
+  preCaretRange.selectNodeContents(codeElement);
+  preCaretRange.setEnd(range.startContainer, range.startOffset);
+  const caretOffset = preCaretRange.toString().length;
+
+  const text = codeElement.textContent ?? '';
+  const before = text.substring(0, caretOffset);
+  const after = text.substring(caretOffset);
+
+  while (codeElement.firstChild) {
+    codeElement.removeChild(codeElement.firstChild);
+  }
+  codeElement.appendChild(document.createTextNode(before + '\n' + after));
+
+  restoreCaretOffset(codeElement, caretOffset + 1);
+}
+
+function insertTab(): void {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+
+  const range = selection.getRangeAt(0);
+  range.deleteContents();
+
+  const tab = document.createTextNode(TAB_STRING);
+  range.insertNode(tab);
+  range.setStartAfter(tab);
+  range.collapse(true);
+
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+/**
+ * Count leading spaces on the line (up to TAB_STRING length).
+ */
+function countLeadingSpaces(lineContent: string): number {
+  const limit = Math.min(TAB_STRING.length, lineContent.length);
+  const match = lineContent.substring(0, limit).match(/^ */);
+
+  return match ? match[0].length : 0;
+}
+
+function removeTab(codeElement: HTMLElement): void {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+
+  const range = selection.getRangeAt(0);
+  const textContent = codeElement.textContent ?? '';
+
+  const preCaretRange = range.cloneRange();
+  preCaretRange.selectNodeContents(codeElement);
+  preCaretRange.setEnd(range.startContainer, range.startOffset);
+
+  const caretOffset = preCaretRange.toString().length;
+  const lineStart = textContent.lastIndexOf('\n', caretOffset - 1) + 1;
+  const lineContent = textContent.substring(lineStart);
+
+  const spacesToRemove = countLeadingSpaces(lineContent);
+
+  if (spacesToRemove === 0) return;
+
+  const before = textContent.substring(0, lineStart);
+  const after = textContent.substring(lineStart + spacesToRemove);
+  const updated = before + after;
+
+  // Replace text by clearing children and inserting a new text node
+  while (codeElement.firstChild) {
+    codeElement.removeChild(codeElement.firstChild);
+  }
+  codeElement.appendChild(document.createTextNode(updated));
+
+  const newCaretOffset = Math.max(lineStart, caretOffset - spacesToRemove);
+  restoreCaretOffset(codeElement, newCaretOffset);
+}
+
+function restoreCaretOffset(element: HTMLElement, offset: number): void {
+  const selection = window.getSelection();
+  if (!selection) return;
+
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+
+  const findNode = (accumulated: number): void => {
+    const current = walker.nextNode();
+    if (!current) return;
+
+    const nodeLength = (current.textContent ?? '').length;
+
+    if (accumulated + nodeLength >= offset) {
+      const range = document.createRange();
+      range.setStart(current, offset - accumulated);
+      range.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      return;
+    }
+
+    findNode(accumulated + nodeLength);
+  };
+
+  findNode(0);
+}

package/src/tools/code/constants.ts

@@ -0,0 +1,96 @@
+export const TOOL_NAME = 'code';
+
+// i18n keys
+export const PLACEHOLDER_KEY = 'tools.code.placeholder';
+export const LANGUAGE_KEY = 'tools.code.language';
+export const COPIED_KEY = 'tools.code.copied';
+export const COPY_CODE_KEY = 'tools.code.copyCode';
+export const WRAP_LINES_KEY = 'tools.code.wrapLines';
+export const SEARCH_LANGUAGE_KEY = 'tools.code.searchLanguage';
+
+// Default values
+export const DEFAULT_LANGUAGE = 'plain text';
+export const TAB_STRING = '  '; // 2 spaces
+
+// Language list — display name + lowercase identifier
+export interface LanguageEntry {
+  id: string;
+  name: string;
+}
+
+export const LANGUAGES: LanguageEntry[] = [
+  { id: 'plain text', name: 'Plain Text' },
+  { id: 'javascript', name: 'JavaScript' },
+  { id: 'typescript', name: 'TypeScript' },
+  { id: 'python', name: 'Python' },
+  { id: 'java', name: 'Java' },
+  { id: 'c', name: 'C' },
+  { id: 'cpp', name: 'C++' },
+  { id: 'csharp', name: 'C#' },
+  { id: 'go', name: 'Go' },
+  { id: 'rust', name: 'Rust' },
+  { id: 'ruby', name: 'Ruby' },
+  { id: 'php', name: 'PHP' },
+  { id: 'swift', name: 'Swift' },
+  { id: 'kotlin', name: 'Kotlin' },
+  { id: 'latex', name: 'LaTeX' },
+  { id: 'mermaid', name: 'Mermaid' },
+  { id: 'sql', name: 'SQL' },
+  { id: 'html', name: 'HTML' },
+  { id: 'css', name: 'CSS' },
+  { id: 'json', name: 'JSON' },
+  { id: 'yaml', name: 'YAML' },
+  { id: 'markdown', name: 'Markdown' },
+  { id: 'bash', name: 'Bash' },
+  { id: 'shell', name: 'Shell' },
+  { id: 'dockerfile', name: 'Dockerfile' },
+  { id: 'xml', name: 'XML' },
+  { id: 'graphql', name: 'GraphQL' },
+  { id: 'r', name: 'R' },
+  { id: 'scala', name: 'Scala' },
+  { id: 'dart', name: 'Dart' },
+  { id: 'lua', name: 'Lua' },
+];
+
+// CSS — Tailwind classes
+export const WRAPPER_STYLES = 'flex flex-col rounded-lg 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';
+export const CODE_AREA_STYLES = 'block px-4 py-3 font-mono text-sm leading-relaxed outline-hidden whitespace-pre-wrap overflow-x-auto min-h-[1.5em]';
+export const COPIED_FEEDBACK_STYLES = 'text-xs text-gray-text font-medium select-none';
+
+// Languages that support preview rendering
+export const PREVIEWABLE_LANGUAGES = new Set(['latex', 'mermaid']);
+
+// i18n keys — preview tabs
+export const CODE_TAB_KEY = 'tools.code.codeTab';
+export const PREVIEW_TAB_KEY = 'tools.code.previewTab';
+
+// CSS — preview tab styles
+export const TAB_STYLES = 'px-2 py-0.5 rounded text-xs font-medium cursor-pointer border-0 transition-colors select-none';
+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';
+
+// Shiki theme names for syntax highlighting
+export const SHIKI_LIGHT_THEME = 'one-light';
+export const SHIKI_DARK_THEME = 'vitesse-dark';
+
+// CSS selector for dark mode (Tailwind convention)
+export const DARK_MODE_SELECTOR = '.dark';
+
+// Languages that support syntax highlighting (all except plain text)
+export const HIGHLIGHTABLE_LANGUAGES = new Set(
+  LANGUAGES
+    .map((lang) => lang.id)
+    .filter((id) => id !== DEFAULT_LANGUAGE)
+);
+
+// i18n key — line numbers toggle
+export const LINE_NUMBERS_KEY = 'tools.code.lineNumbers';
+
+// CSS — line number gutter
+export const CODE_BODY_STYLES = 'flex overflow-hidden';
+export const GUTTER_STYLES = 'select-none text-right pr-3 py-3 font-mono text-sm leading-relaxed text-gray-text/40 border-r border-border-primary shrink-0';
+export const GUTTER_LINE_STYLES = 'leading-relaxed';

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

@@ -0,0 +1,181 @@
+import {
+  WRAPPER_STYLES,
+  HEADER_STYLES,
+  LANGUAGE_BUTTON_STYLES,
+  HEADER_BUTTON_STYLES,
+  CODE_AREA_STYLES,
+  TAB_STYLES,
+  TAB_ACTIVE_STYLES,
+  TAB_INACTIVE_STYLES,
+  PREVIEW_AREA_STYLES,
+  CODE_BODY_STYLES,
+  GUTTER_STYLES,
+  GUTTER_LINE_STYLES,
+} from './constants';
+import { IconCopy, IconWrap, IconLineNumbers } from '../../components/icons';
+
+export interface CodeDOMRefs {
+  wrapper: HTMLElement;
+  languageButton: HTMLButtonElement;
+  lineNumbersButton: HTMLButtonElement;
+  copyButton: HTMLButtonElement;
+  wrapButton: HTMLButtonElement;
+  preElement: HTMLPreElement;
+  codeElement: HTMLElement;
+  gutterElement: HTMLElement;
+  codeTab: HTMLButtonElement | null;
+  previewTab: HTMLButtonElement | null;
+  previewElement: HTMLDivElement | null;
+}
+
+export interface BuildCodeDOMOptions {
+  code: string;
+  languageName: string;
+  readOnly: boolean;
+  copyLabel: string;
+  wrapLabel: string;
+  lineNumbersLabel?: string;
+  previewable?: boolean;
+  codeTabLabel?: string;
+  previewTabLabel?: string;
+}
+
+function buildPreviewElements(
+  codeTabLabel?: string,
+  previewTabLabel?: string,
+): { codeTab: HTMLButtonElement; previewTab: HTMLButtonElement; previewElement: HTMLDivElement } {
+  const codeTab = document.createElement('button');
+
+  codeTab.type = 'button';
+  codeTab.className = `${TAB_STYLES} ${TAB_INACTIVE_STYLES}`;
+  codeTab.textContent = codeTabLabel ?? 'Code';
+  codeTab.setAttribute('data-blok-testid', 'code-code-tab');
+
+  const previewTab = document.createElement('button');
+
+  previewTab.type = 'button';
+  previewTab.className = `${TAB_STYLES} ${TAB_ACTIVE_STYLES}`;
+  previewTab.textContent = previewTabLabel ?? 'Preview';
+  previewTab.setAttribute('data-blok-testid', 'code-preview-tab');
+
+  const previewElement = document.createElement('div');
+
+  previewElement.className = PREVIEW_AREA_STYLES;
+  previewElement.setAttribute('data-blok-testid', 'code-preview');
+
+  return { codeTab, previewTab, previewElement };
+}
+
+export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
+  const { code, languageName, readOnly, copyLabel, wrapLabel, lineNumbersLabel, previewable, codeTabLabel, previewTabLabel } = options;
+
+  // Wrapper
+  const wrapper = document.createElement('div');
+  wrapper.className = WRAPPER_STYLES;
+
+  // Header
+  const header = document.createElement('div');
+  header.className = HEADER_STYLES;
+
+  // Language button (opens language picker)
+  const languageButton = document.createElement('button');
+  languageButton.type = 'button';
+  languageButton.className = LANGUAGE_BUTTON_STYLES;
+  languageButton.textContent = languageName;
+  languageButton.setAttribute('aria-haspopup', 'listbox');
+  languageButton.setAttribute('data-blok-testid', 'code-language-btn');
+
+  // Spacer
+  const spacer = document.createElement('div');
+  spacer.className = 'flex-1';
+
+  // Tab buttons (only when previewable)
+  const { codeTab, previewTab, previewElement } = previewable
+    ? buildPreviewElements(codeTabLabel, previewTabLabel)
+    : { codeTab: null, previewTab: null, previewElement: null };
+
+  // Wrap toggle button
+  const wrapButton = document.createElement('button');
+  wrapButton.type = 'button';
+  wrapButton.className = HEADER_BUTTON_STYLES;
+  wrapButton.innerHTML = IconWrap;
+  wrapButton.setAttribute('aria-label', wrapLabel);
+  wrapButton.setAttribute('data-blok-testid', 'code-wrap-btn');
+
+  // Line numbers toggle button
+  const lineNumbersButton = document.createElement('button');
+  lineNumbersButton.type = 'button';
+  lineNumbersButton.className = HEADER_BUTTON_STYLES;
+  lineNumbersButton.innerHTML = IconLineNumbers;
+  lineNumbersButton.setAttribute('aria-label', lineNumbersLabel ?? 'Line numbers');
+  lineNumbersButton.setAttribute('data-blok-testid', 'code-line-numbers-btn');
+
+  // Copy button
+  const copyButton = document.createElement('button');
+  copyButton.type = 'button';
+  copyButton.className = HEADER_BUTTON_STYLES;
+  copyButton.innerHTML = IconCopy;
+  copyButton.setAttribute('aria-label', copyLabel);
+  copyButton.setAttribute('data-blok-testid', 'code-copy-btn');
+
+  // Code area
+  const codeElement = document.createElement('code');
+  codeElement.className = CODE_AREA_STYLES;
+  codeElement.setAttribute('data-blok-testid', 'code-content');
+
+  if (code) {
+    codeElement.textContent = code;
+  }
+
+  if (!readOnly) {
+    codeElement.setAttribute('contenteditable', 'plaintext-only');
+    codeElement.setAttribute('spellcheck', 'false');
+  }
+
+  // Line number gutter
+  const gutterElement = document.createElement('div');
+  gutterElement.className = GUTTER_STYLES;
+  gutterElement.setAttribute('aria-hidden', 'true');
+  gutterElement.setAttribute('data-blok-testid', 'code-gutter');
+
+  const lineCount = code ? code.split('\n').length : 1;
+  Array.from({ length: lineCount }, (_, idx) => {
+    const lineEl = document.createElement('div');
+    lineEl.className = GUTTER_LINE_STYLES;
+    lineEl.textContent = String(idx + 1);
+    gutterElement.appendChild(lineEl);
+  });
+
+  // Assemble header
+  header.appendChild(languageButton);
+  header.appendChild(spacer);
+
+  if (codeTab && previewTab) {
+    header.appendChild(codeTab);
+    header.appendChild(previewTab);
+  }
+
+  header.appendChild(lineNumbersButton);
+  header.appendChild(wrapButton);
+  header.appendChild(copyButton);
+
+  // Pre wrapper for semantic HTML
+  const preElement = document.createElement('pre');
+  preElement.appendChild(codeElement);
+
+  // Code body container (flex: gutter + pre)
+  const codeBody = document.createElement('div');
+  codeBody.className = CODE_BODY_STYLES;
+  codeBody.appendChild(gutterElement);
+  codeBody.appendChild(preElement);
+
+  // Assemble wrapper
+  wrapper.appendChild(header);
+  wrapper.appendChild(codeBody);
+
+  if (previewElement) {
+    wrapper.appendChild(previewElement);
+  }
+
+  return { wrapper, languageButton, lineNumbersButton, copyButton, wrapButton, preElement, codeElement, gutterElement, codeTab, previewTab, previewElement };
+}