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

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/code/mermaid-loader.ts

@@ -0,0 +1,45 @@
+import type mermaidType from 'mermaid';
+
+const state = {
+  mermaidPromise: null as Promise<typeof mermaidType> | null,
+  initialized: false,
+};
+
+async function loadMermaid(): Promise<typeof mermaidType> {
+  if (!state.mermaidPromise) {
+    state.mermaidPromise = import('mermaid').then((mod) => mod.default);
+  }
+
+  const mermaid = await state.mermaidPromise;
+
+  if (!state.initialized) {
+    state.initialized = true;
+    mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
+  }
+
+  return mermaid;
+}
+
+/**
+ * Render a Mermaid diagram string to SVG. Lazy-loads Mermaid on first call.
+ */
+export async function renderMermaid(code: string): Promise<string> {
+  try {
+    const mermaid = await loadMermaid();
+
+    const parseResult = await mermaid.parse(code, { suppressErrors: true });
+
+    if (parseResult === false) {
+      return '<span class="text-red-500 text-sm">Invalid Mermaid syntax</span>';
+    }
+
+    const id = `mermaid-${crypto.randomUUID()}`;
+    const result = await mermaid.render(id, code);
+
+    return result.svg;
+  } 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/shiki-loader.ts

@@ -0,0 +1,135 @@
+import type { HighlightToken, DualThemeTokens, ThemeTokens } from './highlight-applier';
+import { HIGHLIGHTABLE_LANGUAGES, SHIKI_LIGHT_THEME, SHIKI_DARK_THEME } from './constants';
+
+const LANG_IMPORTS: Record<string, () => Promise<unknown>> = {
+  javascript: () => import('@shikijs/langs/javascript'),
+  typescript: () => import('@shikijs/langs/typescript'),
+  python: () => import('@shikijs/langs/python'),
+  java: () => import('@shikijs/langs/java'),
+  c: () => import('@shikijs/langs/c'),
+  cpp: () => import('@shikijs/langs/cpp'),
+  csharp: () => import('@shikijs/langs/csharp'),
+  go: () => import('@shikijs/langs/go'),
+  rust: () => import('@shikijs/langs/rust'),
+  ruby: () => import('@shikijs/langs/ruby'),
+  php: () => import('@shikijs/langs/php'),
+  swift: () => import('@shikijs/langs/swift'),
+  kotlin: () => import('@shikijs/langs/kotlin'),
+  sql: () => import('@shikijs/langs/sql'),
+  html: () => import('@shikijs/langs/html'),
+  css: () => import('@shikijs/langs/css'),
+  json: () => import('@shikijs/langs/json'),
+  yaml: () => import('@shikijs/langs/yaml'),
+  markdown: () => import('@shikijs/langs/markdown'),
+  bash: () => import('@shikijs/langs/shellscript'),
+  shell: () => import('@shikijs/langs/shellscript'),
+  dockerfile: () => import('@shikijs/langs/dockerfile'),
+  xml: () => import('@shikijs/langs/xml'),
+  graphql: () => import('@shikijs/langs/graphql'),
+  r: () => import('@shikijs/langs/r'),
+  scala: () => import('@shikijs/langs/scala'),
+  dart: () => import('@shikijs/langs/dart'),
+  lua: () => import('@shikijs/langs/lua'),
+  latex: () => import('@shikijs/langs/latex'),
+  mermaid: () => import('@shikijs/langs/mermaid'),
+};
+
+interface ShikiTokenResult {
+  tokens: Array<Array<{ content: string; color?: string; offset: number }>>;
+  fg: string;
+}
+
+interface ShikiHighlighter {
+  getLoadedLanguages(): string[];
+  loadLanguage(lang: unknown): Promise<void>;
+  codeToTokens(code: string, options: { lang: string; theme: string }): ShikiTokenResult;
+  dispose(): void;
+}
+
+const state = {
+  highlighterPromise: null as Promise<ShikiHighlighter> | null,
+  highlighter: null as ShikiHighlighter | null,
+};
+
+export function isHighlightable(lang: string): boolean {
+  return HIGHLIGHTABLE_LANGUAGES.has(lang);
+}
+
+async function ensureHighlighter(): Promise<ShikiHighlighter> {
+  if (!state.highlighterPromise) {
+    state.highlighterPromise = (async (): Promise<ShikiHighlighter> => {
+      const { createHighlighterCore } = await import('shiki/core');
+      const { createJavaScriptRegexEngine } = await import('shiki/engine/javascript');
+
+      const hl: ShikiHighlighter = await createHighlighterCore({
+        themes: [
+          import('@shikijs/themes/one-light'),
+          import('@shikijs/themes/vitesse-dark'),
+        ],
+        langs: [],
+        engine: createJavaScriptRegexEngine(),
+      }) as ShikiHighlighter;
+      state.highlighter = hl;
+      return hl;
+    })();
+  }
+  return state.highlighterPromise;
+}
+
+async function ensureLanguage(highlighter: ShikiHighlighter, lang: string): Promise<void> {
+  const loaded: string[] = highlighter.getLoadedLanguages();
+  if (loaded.includes(lang)) return;
+
+  const importer = LANG_IMPORTS[lang];
+  if (!importer) return;
+
+  await highlighter.loadLanguage(await importer());
+}
+
+function mapTokens(result: ShikiTokenResult): ThemeTokens {
+  return {
+    tokens: result.tokens.map((line) =>
+      line.map((token): HighlightToken => ({
+        content: token.content,
+        color: token.color ?? result.fg,
+        offset: token.offset,
+      }))
+    ),
+    fg: result.fg,
+  };
+}
+
+export async function tokenizeCode(code: string, lang: string): Promise<DualThemeTokens | null> {
+  if (!isHighlightable(lang)) return null;
+
+  try {
+    const highlighter = await ensureHighlighter();
+    await ensureLanguage(highlighter, lang);
+
+    const lightResult: ShikiTokenResult = highlighter.codeToTokens(code, {
+      lang,
+      theme: SHIKI_LIGHT_THEME,
+    });
+    const darkResult: ShikiTokenResult = highlighter.codeToTokens(code, {
+      lang,
+      theme: SHIKI_DARK_THEME,
+    });
+
+    return {
+      light: mapTokens(lightResult),
+      dark: mapTokens(darkResult),
+    };
+  } catch {
+    state.highlighterPromise = null;
+    state.highlighter = null;
+    return null;
+  }
+}
+
+export function disposeHighlighter(): void {
+  if (state.highlighter) {
+    state.highlighter.dispose();
+    state.highlighter = null;
+  }
+  state.highlighterPromise = null;
+}

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,
   });
 

package/src/tools/list/depth-validator.ts

@@ -34,24 +34,21 @@ export class ListDepthValidator {
    * Calculate the maximum allowed depth at a given block index.
    *
    * Rules:
-   * 1. First item (index 0) must be at depth 0
+   * 1. First-in-group items (index 0 or previous block is not a list) are uncapped
    * 2. For other items: maxDepth = previousListItem.depth + 1
-   * 3. If previous block is not a list item, maxDepth = 0
    *
    * @param blockIndex - The index of the block
-   * @returns The maximum allowed depth (0 or more)
+   * @returns The maximum allowed depth (0 or more, or Infinity for first-in-group)
    */
   getMaxAllowedDepth(blockIndex: number): number {
-    // First item must be at depth 0
     if (blockIndex === 0) {
-      return 0;
+      return 1;
     }
 
     const previousBlock = this.blocks.getBlockByIndex(blockIndex - 1);
 
-    // If previous block doesn't exist or isn't a list item, max depth is 0
     if (!previousBlock || previousBlock.name !== TOOL_NAME) {
-      return 0;
+      return 1;
     }
 
     // Max depth is previous item's depth + 1

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

@@ -69,6 +69,8 @@ export interface DOMBuilderContext {
   itemSize?: string;
   /** Optional keydown event handler */
   keydownHandler?: ((event: KeyboardEvent) => void) | null;
+  /** Visual depth for marker display (overrides data.depth for marker only) */
+  markerDepth?: number;
 }
 
 /**
@@ -149,7 +151,7 @@ export const buildWrapper = (context: DOMBuilderContext): HTMLElement => {
  * @returns The list item element containing marker and content
  */
 export const buildStandardContent = (context: DOMBuilderContext): HTMLElement => {
-  const { data, itemColor, itemSize, placeholder } = context;
+  const { data, itemColor, itemSize, placeholder, markerDepth } = context;
 
   const item = document.createElement('div');
   item.setAttribute('role', 'listitem');
@@ -170,8 +172,8 @@ export const buildStandardContent = (context: DOMBuilderContext): HTMLElement =>
     item.style.marginLeft = `${depth * indent}px`;
   }
 
-  // Create marker element
-  const marker = createMarker(data.style, depth);
+  // Create marker element (use visual depth for marker display when provided)
+  const marker = createMarker(data.style, markerDepth ?? depth);
   marker.setAttribute('data-list-marker', 'true');
   marker.setAttribute('data-blok-mutation-free', 'true');
   item.appendChild(marker);

package/src/tools/list/index.ts

@@ -124,12 +124,19 @@ export class ListItem implements BlockTool {
   }
 
   public render(): HTMLElement {
+    const blockIndex = this.blockId
+      ? this.api.blocks.getBlockIndex(this.blockId) ?? this.api.blocks.getCurrentBlockIndex()
+      : this.api.blocks.getCurrentBlockIndex();
+    const depth = this._data.depth ?? 0;
+    const markerDepth = this.markerCalculator.getVisualDepth(blockIndex, depth);
+
     this._element = renderListItem({
       data: this._data,
       readOnly: this.readOnly,
       placeholder: this.placeholder,
       itemColor: this.itemColor,
       itemSize: this.itemSize,
+      markerDepth,
       setupItemPlaceholder: this.setupItemPlaceholder.bind(this),
       onCheckboxChange: (checked, content) => {
         this._data.checked = checked;
@@ -226,13 +233,18 @@ export class ListItem implements BlockTool {
       return;
     }
 
+    const blockIndex = this.blockId
+      ? this.api.blocks.getBlockIndex(this.blockId) ?? this.api.blocks.getCurrentBlockIndex()
+      : this.api.blocks.getCurrentBlockIndex();
+    const visualDepth = this.markerCalculator.getVisualDepth(blockIndex, newDepth);
+
     if (style === 'ordered') {
       const siblingIndex = getSiblingIndex(this.blockId, newDepth, this._data.style, this.api.blocks, this.markerCalculator);
       const markerText = getOrderedMarkerText(siblingIndex, newDepth, this._data, this.blockId, this.api.blocks, this.markerCalculator);
 
       marker.textContent = markerText;
     } else {
-      const bulletChar = getBulletCharacter(newDepth, this.markerCalculator);
+      const bulletChar = getBulletCharacter(visualDepth, this.markerCalculator);
 
       marker.textContent = bulletChar;
     }
@@ -295,7 +307,7 @@ export class ListItem implements BlockTool {
       getDepth: this.getDepth.bind(this),
     };
 
-    await handleEnter(context);
+    await handleEnter(context, this.depthValidator);
   }
 
   private async handleBackspace(event: KeyboardEvent): Promise<void> {
@@ -337,7 +349,7 @@ export class ListItem implements BlockTool {
       getDepth: this.getDepth.bind(this),
     };
 
-    await handleOutdent(context);
+    await handleOutdent(context, this.depthValidator);
   }
 
   private syncContentFromDOM(): void {
@@ -375,12 +387,18 @@ export class ListItem implements BlockTool {
   }
 
   private rerender(): void {
+    const blockIndex = this.blockId
+      ? this.api.blocks.getBlockIndex(this.blockId) ?? this.api.blocks.getCurrentBlockIndex()
+      : this.api.blocks.getCurrentBlockIndex();
+    const depth = this._data.depth ?? 0;
+
     const newElement = rerenderListItem({
       data: this._data,
       readOnly: this.readOnly,
       placeholder: this.placeholder,
       itemColor: this.itemColor,
       itemSize: this.itemSize,
+      markerDepth: this.markerCalculator.getVisualDepth(blockIndex, depth),
       element: this._element,
       setupItemPlaceholder: this.setupItemPlaceholder.bind(this),
       onCheckboxChange: (checked, content) => {

package/src/tools/list/list-helpers.ts

@@ -166,7 +166,13 @@ export const getOrderedMarkerText = (
 ): string => {
   const startValue = getListStartValue(index, depth, blockId, data, blocks, markerCalculator);
   const actualNumber = startValue + index;
-  return markerCalculator.formatNumber(actualNumber, depth);
+
+  const blockIndex = blockId
+    ? blocks.getBlockIndex(blockId) ?? blocks.getCurrentBlockIndex()
+    : blocks.getCurrentBlockIndex();
+  const visualDepth = markerCalculator.getVisualDepth(blockIndex, depth);
+
+  return markerCalculator.formatNumber(actualNumber, visualDepth);
 }
 
 /**
@@ -216,7 +222,8 @@ export const updateBlockMarker = (
 
   const startValue = markerCalculator.getGroupStartValue(blockIndex, blockDepth, siblingIndex, blockStyle);
   const actualNumber = startValue + siblingIndex;
-  const markerText = markerCalculator.formatNumber(actualNumber, blockDepth);
+  const visualDepth = markerCalculator.getVisualDepth(blockIndex, blockDepth);
+  const markerText = markerCalculator.formatNumber(actualNumber, visualDepth);
 
   marker.textContent = markerText;
 }