@jackuait/blok 0.10.0-beta.4 → 0.10.0-beta.6

package/src/tools/code/index.ts

@@ -0,0 +1,322 @@
+import type {
+  API,
+  BlockTool,
+  BlockToolConstructorOptions,
+  PasteConfig,
+  PasteEvent,
+  ToolboxConfig,
+  ConversionConfig,
+  ToolSanitizerConfig,
+} from '../../../types';
+import type { MenuConfig } from '../../../types/tools/menu-config';
+import type { CodeData } from '../../../types/tools/code';
+import { IconCodeBlock } from '../../components/icons';
+import { buildCodeDOM } from './dom-builder';
+import type { CodeDOMRefs } from './dom-builder';
+import { handleCodeKeydown } from './code-keyboard';
+import { LanguagePicker } from './language-picker';
+import {
+  DEFAULT_LANGUAGE,
+  LANGUAGES,
+  CODE_AREA_STYLES,
+  COPY_CODE_KEY,
+  WRAP_LINES_KEY,
+  COPIED_KEY,
+  LANGUAGE_KEY,
+  COPIED_FEEDBACK_STYLES,
+  PREVIEWABLE_LANGUAGES,
+  CODE_TAB_KEY,
+  PREVIEW_TAB_KEY,
+  TAB_STYLES,
+  TAB_ACTIVE_STYLES,
+  TAB_INACTIVE_STYLES,
+  PREVIEW_AREA_STYLES,
+} from './constants';
+import { renderLatex } from './katex-loader';
+
+const COPIED_FEEDBACK_DURATION = 1500;
+
+export class CodeTool implements BlockTool {
+  private api: API;
+  private readOnly: boolean;
+  private _data: CodeData;
+  private _dom: CodeDOMRefs | null = null;
+  private _wrapping = true;
+  private _picker: LanguagePicker | null = null;
+  private _previewActive = false;
+  private _previewContainer: HTMLElement | null = null;
+
+  constructor({ data, api, readOnly }: BlockToolConstructorOptions<CodeData>) {
+    this.api = api;
+    this.readOnly = readOnly;
+    this._data = {
+      code: data?.code ?? '',
+      language: data?.language ?? DEFAULT_LANGUAGE,
+    };
+  }
+
+  public render(): HTMLElement {
+    const isPreviewable = PREVIEWABLE_LANGUAGES.has(this._data.language);
+
+    const dom = buildCodeDOM({
+      code: this._data.code,
+      languageName: this.getLanguageName(this._data.language),
+      readOnly: this.readOnly,
+      copyLabel: this.api.i18n.t(COPY_CODE_KEY),
+      wrapLabel: this.api.i18n.t(WRAP_LINES_KEY),
+      previewable: this.readOnly ? false : isPreviewable,
+      codeTabLabel: this.api.i18n.t(CODE_TAB_KEY),
+      previewTabLabel: this.api.i18n.t(PREVIEW_TAB_KEY),
+    });
+
+    this._dom = dom;
+
+    // Read-only + previewable: show preview only, hide code, no tabs
+    if (this.readOnly && isPreviewable) {
+      const previewEl = document.createElement('div');
+
+      previewEl.className = PREVIEW_AREA_STYLES;
+      previewEl.setAttribute('data-blok-testid', 'code-preview');
+      dom.wrapper.appendChild(previewEl);
+      dom.preElement.hidden = true;
+      this._previewContainer = previewEl;
+      void this.renderPreview();
+    }
+
+    // Edit mode + previewable: show tabs, default to preview
+    if (!this.readOnly && isPreviewable && dom.codeTab && dom.previewTab && dom.previewElement) {
+      this._previewActive = true;
+      dom.preElement.hidden = true;
+      dom.previewElement.hidden = false;
+      this._previewContainer = dom.previewElement;
+      void this.renderPreview();
+
+      dom.codeTab.addEventListener('click', () => this.showCode());
+      dom.previewTab.addEventListener('click', () => this.showPreview());
+    }
+
+    if (!this.readOnly) {
+      dom.codeElement.addEventListener('keydown', (event: KeyboardEvent) => {
+        const handled = handleCodeKeydown(event, dom.codeElement, () => this.exitBlock());
+
+        if (handled) {
+          event.preventDefault();
+        }
+      });
+    }
+
+    dom.copyButton.addEventListener('click', () => this.copyCode());
+    dom.wrapButton.addEventListener('click', () => this.toggleWrap());
+
+    if (!this.readOnly) {
+      this._picker = new LanguagePicker({
+        languages: LANGUAGES,
+        onSelect: (id: string) => this.setLanguage(id),
+        i18n: this.api.i18n,
+        activeLanguageId: this._data.language,
+      });
+
+      document.body.appendChild(this._picker.getElement());
+
+      dom.languageButton.addEventListener('click', () => {
+        this._picker?.open(dom.languageButton);
+      });
+    }
+
+    return dom.wrapper;
+  }
+
+  private showCode(): void {
+    if (!this._dom?.previewElement || !this._dom.codeTab || !this._dom.previewTab) {
+      return;
+    }
+
+    this._previewActive = false;
+    this._dom.preElement.hidden = false;
+    this._dom.previewElement.hidden = true;
+    this._dom.codeTab.className = `${TAB_STYLES} ${TAB_ACTIVE_STYLES}`;
+    this._dom.previewTab.className = `${TAB_STYLES} ${TAB_INACTIVE_STYLES}`;
+  }
+
+  private showPreview(): void {
+    if (!this._dom?.previewElement || !this._dom.codeTab || !this._dom.previewTab) {
+      return;
+    }
+
+    this._previewActive = true;
+    this._dom.preElement.hidden = true;
+    this._dom.previewElement.hidden = false;
+    this._dom.codeTab.className = `${TAB_STYLES} ${TAB_INACTIVE_STYLES}`;
+    this._dom.previewTab.className = `${TAB_STYLES} ${TAB_ACTIVE_STYLES}`;
+
+    // Re-render preview with current code content
+    void this.renderPreview();
+  }
+
+  private async renderPreview(): Promise<void> {
+    if (!this._previewContainer) {
+      return;
+    }
+
+    const code = this._dom?.codeElement.textContent ?? this._data.code;
+    const rendered = await renderLatex(code);
+
+    this._previewContainer.innerHTML = rendered;
+  }
+
+  public save(_blockContent: HTMLElement): CodeData {
+    return {
+      code: this._dom?.codeElement.textContent ?? '',
+      language: this._data.language,
+    };
+  }
+
+  public validate(savedData: CodeData): boolean {
+    return savedData.code.trim() !== '';
+  }
+
+  public merge(data: CodeData): void {
+    this._data.code += '\n' + data.code;
+
+    if (this._dom) {
+      this._dom.codeElement.textContent = this._data.code;
+    }
+  }
+
+  public renderSettings(): MenuConfig {
+    return [
+      {
+        icon: IconCodeBlock,
+        title: this.api.i18n.t(LANGUAGE_KEY),
+        name: 'code-language',
+        children: {
+          items: LANGUAGES.map((lang) => ({
+            title: lang.name,
+            onActivate: (): void => this.setLanguage(lang.id),
+            closeOnActivate: true,
+            isActive: this._data.language === lang.id,
+          })),
+        },
+      },
+    ];
+  }
+
+  public onPaste(event: PasteEvent): void {
+    const detail = event.detail;
+
+    if ('data' in detail) {
+      const content = detail.data;
+
+      if (content instanceof HTMLElement) {
+        this._data.code = content.textContent ?? '';
+      } else if (typeof content === 'string') {
+        // Pattern match — strip triple backtick fences
+        const stripped = content.replace(/^```[^\n]*\n?/, '').replace(/\n?```$/, '');
+
+        this._data.code = stripped;
+      }
+    }
+
+    if (this._dom) {
+      this._dom.codeElement.textContent = this._data.code;
+    }
+  }
+
+  private setLanguage(id: string): void {
+    this._data.language = id;
+
+    if (this._dom) {
+      this._dom.languageButton.textContent = this.getLanguageName(id);
+    }
+
+    this._picker?.setActiveLanguage(id);
+  }
+
+  private getLanguageName(id: string): string {
+    const entry = LANGUAGES.find((lang) => lang.id === id);
+
+    return entry ? entry.name : id;
+  }
+
+  private copyCode(): void {
+    const code = this._dom?.codeElement.textContent ?? '';
+
+    void navigator.clipboard.writeText(code).then(() => {
+      if (!this._dom) {
+        return;
+      }
+
+      const btn = this._dom.copyButton;
+      const originalHTML = btn.innerHTML;
+
+      btn.innerHTML = `<span class="${COPIED_FEEDBACK_STYLES}">${this.api.i18n.t(COPIED_KEY)}</span>`;
+
+      setTimeout(() => {
+        btn.innerHTML = originalHTML;
+      }, COPIED_FEEDBACK_DURATION);
+    }).catch(() => { /* clipboard unavailable */ });
+  }
+
+  private toggleWrap(): void {
+    this._wrapping = !this._wrapping;
+
+    if (!this._dom) {
+      return;
+    }
+
+    if (this._wrapping) {
+      this._dom.codeElement.className = CODE_AREA_STYLES;
+    } else {
+      this._dom.codeElement.className = CODE_AREA_STYLES.replace('whitespace-pre-wrap', 'whitespace-pre');
+    }
+  }
+
+  private exitBlock(): void {
+    const currentIndex = this.api.blocks.getCurrentBlockIndex();
+
+    this.api.blocks.insert(undefined, undefined, undefined, currentIndex + 1);
+  }
+
+  public removed(): void {
+    if (this._picker) {
+      this._picker.getElement().remove();
+      this._picker = null;
+    }
+  }
+
+  public static get toolbox(): ToolboxConfig {
+    return {
+      icon: IconCodeBlock,
+      title: 'Code',
+      titleKey: 'code',
+      searchTerms: ['code', 'pre', 'snippet', 'program'],
+      searchTermKeys: ['code', 'pre', 'snippet', 'program'],
+    };
+  }
+
+  public static get conversionConfig(): ConversionConfig {
+    return {
+      export: 'code',
+      import: 'code',
+    };
+  }
+
+  public static get sanitize(): ToolSanitizerConfig {
+    return {
+      code: true,
+    };
+  }
+
+  public static get isReadOnlySupported(): boolean {
+    return true;
+  }
+
+  public static get pasteConfig(): PasteConfig {
+    return {
+      tags: ['PRE'],
+      patterns: {
+        code: /^```/,
+      },
+    };
+  }
+}

package/src/tools/code/katex-loader.ts

@@ -0,0 +1,50 @@
+import type KatexType from 'katex';
+
+const state = {
+  katexPromise: null as Promise<typeof KatexType> | null,
+  cssInjected: false,
+};
+
+function injectCss(): void {
+  if (state.cssInjected) {
+    return;
+  }
+
+  state.cssInjected = true;
+
+  const link = document.createElement('link');
+
+  link.rel = 'stylesheet';
+  link.setAttribute('data-katex-css', '');
+  link.href = 'https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css';
+
+  document.head.appendChild(link);
+}
+
+async function loadKatex(): Promise<typeof KatexType> {
+  if (!state.katexPromise) {
+    state.katexPromise = import('katex').then((mod) => mod.default);
+  }
+
+  return state.katexPromise;
+}
+
+/**
+ * Render a LaTeX string to HTML. Lazy-loads KaTeX and its CSS on first call.
+ */
+export async function renderLatex(latex: string): Promise<string> {
+  injectCss();
+
+  try {
+    const katex = await loadKatex();
+
+    return katex.renderToString(latex, {
+      throwOnError: false,
+      displayMode: true,
+    });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+
+    return `<span class="text-red-500 text-sm">${message}</span>`;
+  }
+}

package/src/tools/code/language-picker.ts

@@ -0,0 +1,241 @@
+import type { LanguageEntry } from './constants';
+import { SEARCH_LANGUAGE_KEY } from './constants';
+
+interface I18n {
+  t: (key: string) => string;
+}
+
+export interface LanguagePickerOptions {
+  languages: LanguageEntry[];
+  onSelect: (id: string) => void;
+  i18n: I18n;
+  activeLanguageId: string;
+}
+
+export class LanguagePicker {
+  private readonly _languages: LanguageEntry[];
+  private readonly _onSelect: (id: string) => void;
+  private readonly _i18n: I18n;
+  private _activeLanguageId: string;
+
+  private _element: HTMLElement;
+  private _searchInput: HTMLInputElement;
+  private _list: HTMLElement;
+  private _backdrop: HTMLElement | null = null;
+  private _anchorEl: HTMLElement | null = null;
+
+  constructor(options: LanguagePickerOptions) {
+    this._languages = options.languages;
+    this._onSelect = options.onSelect;
+    this._i18n = options.i18n;
+    this._activeLanguageId = options.activeLanguageId;
+    this._element = this.buildElement();
+
+    const searchInput = this._element.querySelector<HTMLInputElement>('[data-blok-testid="code-language-search"]');
+    const list = this._element.querySelector<HTMLElement>('[data-language-list]');
+
+    if (searchInput === null || list === null) {
+      throw new Error('LanguagePicker: failed to build required elements');
+    }
+
+    this._searchInput = searchInput;
+    this._list = list;
+  }
+
+  public getElement(): HTMLElement {
+    return this._element;
+  }
+
+  public open(anchor: HTMLElement): void {
+    this._anchorEl = anchor;
+    this._searchInput.value = '';
+    this.renderList(this._languages);
+
+    this._element.hidden = false;
+    this.showBackdrop();
+    this.position(anchor);
+    this._searchInput.focus();
+  }
+
+  public close(): void {
+    this._element.hidden = true;
+    this.removeBackdrop();
+    this._anchorEl?.focus();
+  }
+
+  public setActiveLanguage(id: string): void {
+    this._activeLanguageId = id;
+
+    const buttons = Array.from(this._list.querySelectorAll<HTMLButtonElement>('button[data-language-id]'));
+
+    for (const btn of buttons) {
+      const isActive = btn.getAttribute('data-language-id') === id;
+
+      this.applyActiveStyle(btn, isActive);
+    }
+  }
+
+  // ─── DOM Construction ─────────────────────────────────────
+
+  private buildElement(): HTMLElement {
+    const el = document.createElement('div');
+
+    el.setAttribute('data-blok-testid', 'code-language-picker');
+    el.className = [
+      'fixed z-50 w-[240px] overflow-hidden rounded-lg',
+      'border border-neutral-200/70 bg-white shadow-xl',
+      'theme-dark:border-neutral-700/50 theme-dark:bg-neutral-900',
+    ].join(' ');
+    el.hidden = true;
+
+    // Search wrapper
+    const searchWrapper = document.createElement('div');
+
+    searchWrapper.className = 'px-2 pt-2 pb-1';
+
+    const input = document.createElement('input');
+
+    input.type = 'text';
+    input.placeholder = this._i18n.t(SEARCH_LANGUAGE_KEY);
+    input.setAttribute('data-blok-testid', 'code-language-search');
+    input.className = [
+      'w-full text-xs rounded-md py-1.5 px-2.5 outline-hidden',
+      'bg-neutral-100 text-neutral-800 placeholder:text-neutral-400',
+      'theme-dark:bg-neutral-800 theme-dark:text-neutral-200 theme-dark:placeholder:text-neutral-500',
+      'focus:ring-2 focus:ring-neutral-300/60 theme-dark:focus:ring-neutral-600/60',
+      'transition-shadow duration-150',
+    ].join(' ');
+    input.addEventListener('input', () => this.handleSearchChange(input.value));
+
+    searchWrapper.appendChild(input);
+    el.appendChild(searchWrapper);
+
+    // Language list
+    const list = document.createElement('div');
+
+    list.setAttribute('data-language-list', '');
+    list.className = 'max-h-[300px] overflow-y-auto px-1 pb-1';
+    el.appendChild(list);
+
+    // Keyboard handler
+    el.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        this.close();
+      }
+    });
+
+    return el;
+  }
+
+  // ─── Rendering ────────────────────────────────────────────
+
+  private renderList(languages: LanguageEntry[]): void {
+    this._list.innerHTML = '';
+
+    for (const lang of languages) {
+      const btn = document.createElement('button');
+
+      btn.type = 'button';
+      btn.setAttribute('data-language-id', lang.id);
+      btn.textContent = lang.name;
+      btn.className = [
+        'w-full text-left text-xs px-2 py-1.5 rounded cursor-pointer',
+        'bg-transparent border-0',
+        'text-neutral-700 theme-dark:text-neutral-300',
+        'can-hover:hover:bg-neutral-100 theme-dark:can-hover:hover:bg-neutral-800',
+        'transition-colors',
+      ].join(' ');
+
+      this.applyActiveStyle(btn, lang.id === this._activeLanguageId);
+
+      btn.addEventListener('click', () => {
+        this._onSelect(lang.id);
+        this.close();
+      });
+
+      this._list.appendChild(btn);
+    }
+  }
+
+  private applyActiveStyle(btn: HTMLButtonElement, active: boolean): void {
+    const activeClasses = ['bg-neutral-100', 'theme-dark:bg-neutral-800', 'font-medium'];
+
+    if (active) {
+      btn.classList.add(...activeClasses);
+      btn.setAttribute('data-active', 'true');
+    } else {
+      btn.classList.remove(...activeClasses);
+      btn.removeAttribute('data-active');
+    }
+  }
+
+  private handleSearchChange(query: string): void {
+    const trimmed = query.trim().toLowerCase();
+
+    if (trimmed === '') {
+      this.renderList(this._languages);
+
+      return;
+    }
+
+    const filtered = this._languages.filter(
+      (lang) => lang.name.toLowerCase().includes(trimmed)
+    );
+
+    this.renderList(filtered);
+  }
+
+  // ─── Backdrop ──────────────────────────────────────────────
+
+  private showBackdrop(): void {
+    this.removeBackdrop();
+
+    const backdrop = document.createElement('div');
+
+    backdrop.setAttribute('data-blok-language-picker-backdrop', '');
+    backdrop.style.position = 'fixed';
+    backdrop.style.inset = '0';
+    backdrop.style.zIndex = '50';
+
+    backdrop.addEventListener('mousedown', (e: MouseEvent) => {
+      if (e.target === backdrop) {
+        this.close();
+      }
+    });
+
+    this._element.parentElement?.insertBefore(backdrop, this._element);
+    backdrop.appendChild(this._element);
+    this._backdrop = backdrop;
+  }
+
+  private removeBackdrop(): void {
+    if (this._backdrop === null) {
+      return;
+    }
+
+    this._backdrop.parentElement?.insertBefore(this._element, this._backdrop);
+    this._backdrop.remove();
+    this._backdrop = null;
+  }
+
+  // ─── Positioning ──────────────────────────────────────────
+
+  private position(anchor: HTMLElement): void {
+    const rect = anchor.getBoundingClientRect();
+    const pickerRect = this._element.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+
+    const top = rect.bottom + pickerRect.height > viewportHeight
+      ? rect.top - pickerRect.height - 4
+      : rect.bottom + 4;
+
+    const idealLeft = rect.left - 8;
+    const left = idealLeft + pickerRect.width > viewportWidth
+      ? rect.right - pickerRect.width
+      : Math.max(0, idealLeft);
+
+    this._element.style.top = `${top}px`;
+    this._element.style.left = `${left}px`;
+  }
+}

package/src/tools/divider/index.ts

@@ -2,6 +2,7 @@ import type {
   BlockTool,
   BlockToolConstructorOptions,
   PasteConfig,
+  PasteEvent,
   SanitizerConfig,
   ToolboxConfig,
 } from '../../../types';
@@ -78,16 +79,23 @@ export class DividerTool implements BlockTool {
   }
 
   /**
-   * Paste three-or-more hyphens to create a divider
+   * Paste three-or-more hyphens or an <hr> element to create a divider
    */
   public static get pasteConfig(): PasteConfig {
     return {
+      tags: ['HR'],
       patterns: {
         divider: /^-{3,}$/,
       },
     };
   }
 
+  /**
+   * Handle paste events — divider is contentless so no data extraction needed.
+   * Must exist for the tool registry to process pasteConfig (hasOnPasteHandler check).
+   */
+  public onPaste(_event: PasteEvent): void {}
+
   /**
    * Nothing to sanitize — no HTML content
    */

package/src/tools/index.ts

@@ -26,9 +26,9 @@ export { ListItem as List } from './list';
 export { Table } from './table';
 export { ToggleItem as Toggle } from './toggle';
 export { CalloutTool as Callout } from './callout';
-export { DatabaseTool as Database } from './database';
 export { DividerTool as Divider } from './divider';
 export { Quote } from './quote';
+export { CodeTool as Code } from './code';
 
 // Inline tools
 export { BoldInlineTool as Bold } from '../components/inline-tools/inline-tool-bold';
@@ -38,6 +38,7 @@ export { ConvertInlineTool as Convert } from '../components/inline-tools/inline-
 export { MarkerInlineTool as Marker } from '../components/inline-tools/inline-tool-marker';
 export { UnderlineInlineTool as Underline } from '../components/inline-tools/inline-tool-underline';
 export { StrikethroughInlineTool as Strikethrough } from '../components/inline-tools/inline-tool-strikethrough';
+export { CodeInlineTool as InlineCode } from '../components/inline-tools/inline-tool-code';
 
 // Default tools configuration for convenience
 // Note: inlineToolbar defaults to true, so it doesn't need to be specified
@@ -48,9 +49,9 @@ export const defaultBlockTools = {
   table: {},
   toggle: {},
   callout: {},
-  database: {},
   divider: {},
   quote: {},
+  code: { inlineToolbar: false },
 } as const;
 
 export const defaultInlineTools = {
@@ -60,4 +61,5 @@ export const defaultInlineTools = {
   marker: {},
   underline: {},
   strikethrough: {},
+  inlineCode: {},
 } as const;

package/src/tools/list/block-operations.ts

@@ -19,6 +19,7 @@ export interface RerenderContext {
   placeholder: string;
   itemColor: string | undefined;
   itemSize: string | undefined;
+  markerDepth?: number;
   element: HTMLElement | null;
   setupItemPlaceholder: (element: HTMLElement) => void;
   onCheckboxChange: (checked: boolean, content: HTMLElement | null) => void;
@@ -29,7 +30,7 @@ export interface RerenderContext {
  * Rerender the list item
  */
 export const rerenderListItem = (context: RerenderContext): HTMLElement | null => {
-  const { data, readOnly, placeholder, itemColor, itemSize, element, setupItemPlaceholder, onCheckboxChange, keydownHandler } = context;
+  const { data, readOnly, placeholder, itemColor, itemSize, markerDepth, element, setupItemPlaceholder, onCheckboxChange, keydownHandler } = context;
 
   if (!element) return null;
 
@@ -42,6 +43,7 @@ export const rerenderListItem = (context: RerenderContext): HTMLElement | null =
     placeholder,
     itemColor,
     itemSize,
+    markerDepth,
     keydownHandler,
   });