@jackuait/blok 0.10.0-beta.5 → 0.10.0-beta.7

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

@@ -613,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({
@@ -374,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 };
+}

package/src/tools/code/highlight-applier.ts

@@ -0,0 +1,229 @@
+import { DARK_MODE_SELECTOR } from './constants';
+
+export interface HighlightToken {
+  content: string;
+  color: string;
+  /** Character offset from the start of the LINE (not document) */
+  offset: number;
+}
+
+export interface ThemeTokens {
+  tokens: HighlightToken[][];
+  fg: string;
+}
+
+export interface DualThemeTokens {
+  light: ThemeTokens;
+  dark: ThemeTokens;
+}
+
+/** Typed subset of Highlight (Set-like, as per the CSS Custom Highlight API spec) */
+interface HighlightSet extends Highlight {
+  add(range: Range): void;
+  delete(range: Range): boolean;
+  size: number;
+}
+
+/** Typed subset of the CSS Custom Highlight API HighlightRegistry (Map-like) */
+interface HighlightMap {
+  get(name: string): HighlightSet | undefined;
+  set(name: string, highlight: HighlightSet): void;
+  delete(name: string): void;
+  keys(): IterableIterator<string>;
+  size: number;
+}
+
+/** CSS global augmented with the highlights registry (feature-detected at runtime) */
+interface CSSWithHighlights {
+  highlights: HighlightMap;
+}
+
+const state = {
+  stylesheet: null as CSSStyleSheet | null,
+  knownRules: new Set<string>(),
+};
+
+export function isHighlightingSupported(): boolean {
+  return typeof CSS !== 'undefined' && 'highlights' in CSS;
+}
+
+function getHighlights(): HighlightMap {
+  return (CSS as unknown as CSSWithHighlights).highlights;
+}
+
+function ensureStylesheet(): CSSStyleSheet {
+  if (!state.stylesheet) {
+    state.stylesheet = new CSSStyleSheet();
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, state.stylesheet];
+  }
+  return state.stylesheet;
+}
+
+function colorToId(hex: string): string {
+  const clean = hex.replace('#', '').toLowerCase();
+  return clean.length > 6 ? clean.substring(0, 6) : clean;
+}
+
+function ensureRule(stylesheet: CSSStyleSheet, name: string, color: string, scope?: string): void {
+  const key = `${scope ?? ''}::${name}`;
+  if (state.knownRules.has(key)) return;
+
+  const rule = scope
+    ? `${scope} ::highlight(${name}) { color: ${color}; }`
+    : `::highlight(${name}) { color: ${color}; }`;
+
+  stylesheet.insertRule(rule, stylesheet.cssRules.length);
+  state.knownRules.add(key);
+}
+
+function findTextNode(
+  element: HTMLElement,
+  targetOffset: number
+): { node: Node; offset: number } | null {
+  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+
+  const find = (node: Node | null, accumulated: number): { node: Node; offset: number } | null => {
+    if (!node) {
+      if (targetOffset === accumulated && element.lastChild) {
+        return { node: element.lastChild, offset: element.lastChild.textContent?.length ?? 0 };
+      }
+      return null;
+    }
+    const len = node.textContent?.length ?? 0;
+    if (accumulated + len > targetOffset) {
+      return { node, offset: targetOffset - accumulated };
+    }
+    return find(walker.nextNode(), accumulated + len);
+  };
+
+  return find(walker.nextNode(), 0);
+}
+
+function buildLineOffsets(text: string): number[] {
+  return text.split('\n').reduce<{ offsets: number[]; pos: number }>(
+    (acc, line) => ({
+      offsets: [...acc.offsets, acc.pos],
+      pos: acc.pos + line.length + 1,
+    }),
+    { offsets: [], pos: 0 }
+  ).offsets;
+}
+
+function applyToken(
+  element: HTMLElement,
+  text: string,
+  lineBase: number,
+  token: HighlightToken,
+  themeKey: string,
+  scope: string | undefined,
+  priority: number,
+  stylesheet: CSSStyleSheet,
+  ownedRanges: Array<[string, Range]>
+): void {
+  if (!token.content.trim()) return;
+
+  const start = lineBase + token.offset;
+  const end = start + token.content.length;
+  if (end > text.length) return;
+
+  const startPos = findTextNode(element, start);
+  const endPos = findTextNode(element, end);
+  if (!startPos || !endPos) return;
+
+  try {
+    const range = new Range();
+    range.setStart(startPos.node, startPos.offset);
+    range.setEnd(endPos.node, endPos.offset);
+
+    const colorId = colorToId(token.color);
+    const hlName = `blok-${themeKey}-${colorId}`;
+    const highlights = getHighlights();
+
+    ensureRule(stylesheet, hlName, token.color, scope);
+
+    const existing = highlights.get(hlName);
+    const highlight = existing ?? (new Highlight() as unknown as HighlightSet);
+    if (!existing) {
+      highlight.priority = priority;
+      highlights.set(hlName, highlight);
+    }
+
+    highlight.add(range);
+    ownedRanges.push([hlName, range]);
+  } catch {
+    // Skip invalid ranges
+  }
+}
+
+function applyThemeTokens(
+  element: HTMLElement,
+  text: string,
+  lineOffsets: number[],
+  themeData: ThemeTokens,
+  themeKey: string,
+  scope: string | undefined,
+  priority: number,
+  stylesheet: CSSStyleSheet,
+  ownedRanges: Array<[string, Range]>
+): void {
+  for (const [lineIdx, lineTokens] of themeData.tokens.entries()) {
+    const lineBase = lineOffsets[lineIdx];
+    if (lineBase === undefined) continue;
+
+    for (const token of lineTokens) {
+      applyToken(element, text, lineBase, token, themeKey, scope, priority, stylesheet, ownedRanges);
+    }
+  }
+}
+
+export function applyHighlights(element: HTMLElement, themes: DualThemeTokens): () => void {
+  if (!isHighlightingSupported()) return () => {};
+
+  const stylesheet = ensureStylesheet();
+  const ownedRanges: Array<[string, Range]> = [];
+  const text = element.textContent ?? '';
+  const lineOffsets = buildLineOffsets(text);
+
+  const themeEntries: Array<[string, ThemeTokens, string | undefined, number]> = [
+    ['l', themes.light, undefined, 0],
+    ['d', themes.dark, DARK_MODE_SELECTOR, 1],
+  ];
+
+  for (const [themeKey, themeData, scope, priority] of themeEntries) {
+    applyThemeTokens(element, text, lineOffsets, themeData, themeKey, scope, priority, stylesheet, ownedRanges);
+  }
+
+  return () => cleanupRanges(ownedRanges, getHighlights());
+}
+
+function cleanupRanges(ownedRanges: Array<[string, Range]>, highlights: HighlightMap): void {
+  for (const [name, range] of ownedRanges) {
+    const hl = highlights.get(name);
+    if (!hl) continue;
+    hl.delete(range);
+    if (hl.size === 0) {
+      highlights.delete(name);
+    }
+  }
+}
+
+function removeBlokHighlights(highlights: HighlightMap): void {
+  const blokNames = [...highlights.keys()].filter((name) => name.startsWith('blok-'));
+  for (const name of blokNames) {
+    highlights.delete(name);
+  }
+}
+
+export function disposeAllHighlights(): void {
+  if (isHighlightingSupported()) {
+    removeBlokHighlights(getHighlights());
+  }
+
+  if (state.stylesheet) {
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (s) => s !== state.stylesheet
+    );
+    state.stylesheet = null;
+    state.knownRules.clear();
+  }
+}