@jackuait/blok 0.10.0 → 0.10.2

package/src/tools/code/index.ts

@@ -10,32 +10,37 @@ import type {
 } 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 { IconCodeBlock, IconCheck, IconWand } from '../../components/icons';
+import { buildCodeDOM, setActiveViewMode } from './dom-builder';
 import type { CodeDOMRefs } from './dom-builder';
 import { handleCodeKeydown } from './code-keyboard';
 import { PopoverDesktop } from '../../components/utils/popover';
+import { onHover as tooltipOnHover } from '../../components/utils/tooltip';
 import type { PopoverItemParams } from '@/types/utils/popover/popover-item';
+import { PopoverItemType } from '@/types/utils/popover/popover-item-type';
 import {
   DEFAULT_LANGUAGE,
   LANGUAGES,
-  CODE_AREA_STYLES,
   COPY_CODE_KEY,
-  WRAP_LINES_KEY,
-  LINE_NUMBERS_KEY,
   COPIED_KEY,
   LANGUAGE_KEY,
   SEARCH_LANGUAGE_KEY,
   COPIED_FEEDBACK_STYLES,
   PREVIEWABLE_LANGUAGES,
-  PREVIEW_TOGGLE_KEY,
+  CODE_TAB_KEY,
+  PREVIEW_TAB_KEY,
+  SIDE_BY_SIDE_KEY,
   PREVIEW_AREA_STYLES,
   GUTTER_LINE_STYLES,
+  SPLIT_CONTAINER_STYLES,
+  SPLIT_CONTAINER_SPLIT_STYLES,
 } from './constants';
+import type { CodeViewMode } from './constants';
 import { renderLatex } from './katex-loader';
 import { renderMermaid } from './mermaid-loader';
 import { tokenizeCode, isHighlightable } from './shiki-loader';
 import { applyHighlights, isHighlightingSupported } from './highlight-applier';
+import { detectLanguage } from './language-detector';
 
 const COPIED_FEEDBACK_DURATION = 1500;
 
@@ -44,13 +49,14 @@ export class CodeTool implements BlockTool {
   private readOnly: boolean;
   private _data: CodeData;
   private _dom: CodeDOMRefs | null = null;
-  private _wrapping = true;
   private _lineNumbers = true;
   private _picker: PopoverDesktop | null = null;
-  private _previewActive = false;
+  private _viewMode: CodeViewMode = 'preview';
   private _previewContainer: HTMLElement | null = null;
   private _disposeHighlights: (() => void) | null = null;
   private _highlightRafId: number | null = null;
+  private _detectedLanguage: string | null = null;
+  private _detectionTimeoutId: ReturnType<typeof setTimeout> | null = null;
 
   constructor({ data, api, readOnly }: BlockToolConstructorOptions<CodeData>) {
     this.api = api;
@@ -71,20 +77,18 @@ export class CodeTool implements BlockTool {
       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),
-      lineNumbersLabel: this.api.i18n.t(LINE_NUMBERS_KEY),
       previewable: this.readOnly ? false : isPreviewable,
-      previewToggleLabel: this.api.i18n.t(PREVIEW_TOGGLE_KEY),
+      viewModeLabels: this.readOnly ? undefined : {
+        code: this.api.i18n.t(CODE_TAB_KEY),
+        preview: this.api.i18n.t(PREVIEW_TAB_KEY),
+        split: this.api.i18n.t(SIDE_BY_SIDE_KEY),
+      },
     });
 
     this._dom = dom;
 
     // Line numbers gutter visibility
     dom.gutterElement.hidden = !this._lineNumbers;
-    dom.lineNumbersButton.addEventListener('click', () => this.toggleLineNumbers());
-
-    // More menu toggle
-    dom.moreButton.addEventListener('click', () => this.toggleMoreMenu());
 
     // Read-only + previewable: show preview only, hide code, no toggle
     if (this.readOnly && isPreviewable) {
@@ -99,16 +103,33 @@ export class CodeTool implements BlockTool {
       void this.renderPreview();
     }
 
-    // Edit mode + previewable: show preview toggle, default to preview
-    if (!this.readOnly && isPreviewable && dom.previewToggleButton && dom.previewElement) {
-      this._previewActive = true;
-      dom.preElement.hidden = true;
-      dom.gutterElement.hidden = true;
-      dom.previewElement.hidden = false;
+    // Edit mode + previewable: default to preview mode and render
+    if (!this.readOnly && isPreviewable && dom.previewElement) {
+      this._viewMode = 'preview';
       this._previewContainer = dom.previewElement;
+
+      // Apply initial state: preview mode
+      this.applyViewMode();
       void this.renderPreview();
+    }
 
-      dom.previewToggleButton.addEventListener('click', () => this.togglePreview());
+    // Edit mode: wire view mode button listeners (buttons always present in edit mode)
+    if (!this.readOnly && dom.viewModeContainer) {
+      const modeButtons = Array.from(dom.viewModeContainer.querySelectorAll<HTMLButtonElement>('[data-mode]'));
+
+      for (const btn of modeButtons) {
+        const label = btn.getAttribute('aria-label') ?? '';
+
+        tooltipOnHover(btn, label, { placement: 'bottom' });
+
+        btn.addEventListener('click', () => {
+          const mode = btn.getAttribute('data-mode') as CodeViewMode;
+
+          if (mode && mode !== this._viewMode) {
+            this.setViewMode(mode);
+          }
+        });
+      }
     }
 
     if (!this.readOnly) {
@@ -120,6 +141,7 @@ export class CodeTool implements BlockTool {
           this.syncTrailingBr();
           this.updateGutter();
           this.scheduleHighlight();
+          this.scheduleDetection();
         }
       });
 
@@ -127,88 +149,99 @@ export class CodeTool implements BlockTool {
         this.syncTrailingBr();
         this.updateGutter();
         this.scheduleHighlight();
+        this.scheduleDetection();
       });
     }
 
     dom.copyButton.addEventListener('click', () => this.copyCode());
-    dom.wrapButton.addEventListener('click', () => this.toggleWrap());
+    tooltipOnHover(dom.copyButton, this.api.i18n.t(COPY_CODE_KEY), { placement: 'bottom' });
 
     if (!this.readOnly) {
-      const languageItems: PopoverItemParams[] = LANGUAGES.map((lang) => ({
-        title: lang.name,
-        name: lang.id,
-        toggle: 'language',
-        isActive: (): boolean => this._data.language === lang.id,
-        closeOnActivate: true,
-        onActivate: (): void => this.setLanguage(lang.id),
-      }));
-
-      this._picker = new PopoverDesktop({
-        items: languageItems,
-        trigger: dom.languageButton,
-        leftAlignElement: dom.wrapper,
-        searchable: true,
-        width: '200px',
-        messages: {
-          search: this.api.i18n.t(SEARCH_LANGUAGE_KEY),
-        },
-      });
+      this._picker = this.buildLanguagePicker(dom.languageButton, dom.wrapper);
 
       dom.languageButton.addEventListener('click', () => {
-        this._picker?.show();
+        if (this._picker?.isShown) {
+          this._picker.hide();
+        } else {
+          this._picker?.show();
+        }
       });
     }
 
     return dom.wrapper;
   }
 
+  /**
+   * Returns the wrapper element as the toolbar anchor so the toolbar
+   * centers on the block's visual top, not on the deeply nested
+   * contenteditable code element below the header bar.
+   */
+  public getToolbarAnchorElement(): HTMLElement | undefined {
+    return this._dom?.wrapper;
+  }
+
   public rendered(): void {
     void this.highlightCode();
   }
 
-  private togglePreview(): void {
-    if (this._previewActive) {
-      this.showCode();
-    } else {
-      this.showPreview();
-    }
-  }
+  private setViewMode(mode: CodeViewMode): void {
+    this._viewMode = mode;
+    this.applyViewMode();
 
-  private showCode(): void {
-    if (!this._dom?.previewElement || !this._dom.previewToggleButton) {
-      return;
+    if (mode === 'preview' || mode === 'split') {
+      void this.renderPreview();
     }
-
-    this._previewActive = false;
-    this._dom.preElement.hidden = false;
-    this._dom.gutterElement.hidden = !this._lineNumbers;
-    this._dom.previewElement.hidden = true;
   }
 
-  private showPreview(): void {
-    if (!this._dom?.previewElement || !this._dom.previewToggleButton) {
+  private applyViewMode(): void {
+    if (!this._dom?.previewElement || !this._dom.viewModeContainer || !this._dom.splitContainer) {
       return;
     }
 
-    this._previewActive = true;
-    this._dom.preElement.hidden = true;
-    this._dom.gutterElement.hidden = true;
-    this._dom.previewElement.hidden = false;
+    // Update segmented control active state
+    setActiveViewMode(this._dom.viewModeContainer, this._viewMode);
 
-    // Re-render preview with current code content
-    void this.renderPreview();
-  }
+    const codeBody = this._dom.preElement.parentElement?.parentElement;
 
-  private toggleMoreMenu(): void {
-    if (!this._dom) {
-      return;
+    switch (this._viewMode) {
+      case 'code':
+        this._dom.preElement.hidden = false;
+        this._dom.gutterElement.hidden = !this._lineNumbers;
+        this._dom.previewElement.hidden = true;
+        if (codeBody) {
+          codeBody.hidden = false;
+        }
+        this._dom.splitContainer.className = SPLIT_CONTAINER_STYLES;
+        break;
+
+      case 'preview':
+        this._dom.preElement.hidden = true;
+        this._dom.gutterElement.hidden = true;
+        this._dom.previewElement.hidden = false;
+        if (codeBody) {
+          codeBody.hidden = true;
+        }
+        this._dom.splitContainer.className = SPLIT_CONTAINER_STYLES;
+        break;
+
+      case 'split':
+        this._dom.preElement.hidden = false;
+        this._dom.gutterElement.hidden = !this._lineNumbers;
+        this._dom.previewElement.hidden = false;
+        if (codeBody) {
+          codeBody.hidden = false;
+        }
+        this._dom.splitContainer.className = SPLIT_CONTAINER_SPLIT_STYLES;
+        break;
     }
-
-    this._dom.moreMenu.hidden = !this._dom.moreMenu.hidden;
   }
 
   private async renderPreview(): Promise<void> {
-    if (!this._previewContainer) {
+    // Capture the container reference before the async gap so that if the language
+    // changes mid-flight (nulling _previewContainer), we don't write to null.
+    const container = this._previewContainer;
+
+    if (!container) {
       return;
     }
 
@@ -217,7 +250,7 @@ export class CodeTool implements BlockTool {
       ? await renderMermaid(code)
       : await renderLatex(code);
 
-    this._previewContainer.innerHTML = rendered;
+    container.innerHTML = rendered;
   }
 
   public setReadOnly(state: boolean): void {
@@ -253,25 +286,48 @@ export class CodeTool implements BlockTool {
 
     if (this._dom) {
       this._dom.codeElement.textContent = this._data.code;
+      this.syncTrailingBr();
+      this.updateGutter();
     }
 
     void this.highlightCode();
   }
 
   public renderSettings(): MenuConfig {
+    const selectedId = this._data.language;
+    const detectedId = this._detectedLanguage;
+    const showDetected = detectedId !== null && detectedId !== selectedId;
+
+    const childItems: PopoverItemParams[] = [];
+
+    if (showDetected) {
+      const detectedLanguage = LANGUAGES.find((lang) => lang.id === detectedId);
+      if (detectedLanguage) {
+        childItems.push({
+          title: detectedLanguage.name,
+          secondaryLabel: 'auto',
+          icon: IconWand,
+          onActivate: (): void => this.setLanguage(detectedLanguage.id),
+          closeOnActivate: true,
+          isActive: (): boolean => this._data.language === detectedLanguage.id,
+        });
+        childItems.push({ type: PopoverItemType.Separator });
+      }
+    }
+
+    childItems.push(...LANGUAGES.map((lang) => ({
+      title: lang.name,
+      trailingIcon: lang.id === selectedId ? IconCheck : undefined,
+      onActivate: (): void => this.setLanguage(lang.id),
+      closeOnActivate: true,
+    })));
+
     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,
-          })),
-        },
+        children: { items: childItems },
       },
     ];
   }
@@ -294,6 +350,8 @@ export class CodeTool implements BlockTool {
 
     if (this._dom) {
       this._dom.codeElement.textContent = this._data.code;
+      this.syncTrailingBr();
+      this.updateGutter();
     }
 
     void this.highlightCode();
@@ -301,6 +359,7 @@ export class CodeTool implements BlockTool {
 
   private setLanguage(id: string): void {
     this._data.language = id;
+    const isPreviewable = PREVIEWABLE_LANGUAGES.has(id);
 
     if (this._dom) {
       // Update the text span inside the language button (first child)
@@ -309,11 +368,94 @@ export class CodeTool implements BlockTool {
       if (textSpan) {
         textSpan.textContent = this.getLanguageName(id);
       }
+
+      // Show or hide the view mode segmented control based on previewability
+      if (this._dom.viewModeContainer) {
+        this._dom.viewModeContainer.hidden = !isPreviewable;
+      }
+
+      // When switching to a previewable language, activate preview mode
+      if (isPreviewable && this._dom.previewElement) {
+        this._previewContainer = this._dom.previewElement;
+        this._viewMode = 'preview';
+        this.applyViewMode();
+        void this.renderPreview();
+      }
+
+      // When switching away from a previewable language, reset to code mode
+      if (!isPreviewable) {
+        this._previewContainer = null;
+        this._viewMode = 'code';
+        this.applyViewMode();
+      }
+
+      // Rebuild the language picker so the selected language check icon updates
+      if (this._picker) {
+        this._picker.destroy();
+      }
+      this._picker = this.buildLanguagePicker(this._dom.languageButton, this._dom.wrapper);
     }
 
     void this.highlightCode();
   }
 
+  /**
+   * Builds the language items array. When a detected language differs from the
+   * chosen one, it appears first with a wand icon and "auto" secondary label.
+   * The currently selected language is shown with a trailing check icon
+   * in its natural position in the full language list.
+   */
+  private buildLanguagePickerItems(): PopoverItemParams[] {
+    const selectedId = this._data.language;
+    const detectedId = this._detectedLanguage;
+    const showDetected = detectedId !== null && detectedId !== selectedId;
+
+    const items: PopoverItemParams[] = [];
+
+    if (showDetected) {
+      const detectedLanguage = LANGUAGES.find((lang) => lang.id === detectedId);
+      if (detectedLanguage) {
+        items.push({
+          title: detectedLanguage.name,
+          name: detectedLanguage.id,
+          icon: IconWand,
+          toggle: 'language',
+          isActive: (): boolean => this._data.language === detectedLanguage.id,
+          closeOnActivate: true,
+          onActivate: (): void => this.setLanguage(detectedLanguage.id),
+        });
+        items.push({ type: PopoverItemType.Separator });
+      }
+    }
+
+    items.push(...LANGUAGES.map((lang) => ({
+      title: lang.name,
+      name: lang.id,
+      trailingIcon: lang.id === selectedId ? IconCheck : undefined,
+      toggle: 'language',
+      closeOnActivate: true,
+      onActivate: (): void => this.setLanguage(lang.id),
+    })));
+
+    return items;
+  }
+
+  /**
+   * Creates a new PopoverDesktop instance for the language picker.
+   */
+  private buildLanguagePicker(trigger: HTMLElement, leftAlignElement: HTMLElement): PopoverDesktop {
+    return new PopoverDesktop({
+      items: this.buildLanguagePickerItems(),
+      trigger,
+      leftAlignElement,
+      searchable: true,
+      width: '200px',
+      messages: {
+        search: this.api.i18n.t(SEARCH_LANGUAGE_KEY),
+      },
+    });
+  }
+
   private getLanguageName(id: string): string {
     const entry = LANGUAGES.find((lang) => lang.id === id);
 
@@ -339,28 +481,6 @@ export class CodeTool implements BlockTool {
     }).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 toggleLineNumbers(): void {
-    this._lineNumbers = !this._lineNumbers;
-
-    if (this._dom) {
-      this._dom.gutterElement.hidden = !this._lineNumbers;
-    }
-  }
-
   private updateGutter(): void {
     if (!this._dom) {
       return;
@@ -419,6 +539,30 @@ export class CodeTool implements BlockTool {
     });
   }
 
+  private scheduleDetection(): void {
+    if (this._detectionTimeoutId !== null) {
+      clearTimeout(this._detectionTimeoutId);
+    }
+
+    this._detectionTimeoutId = setTimeout(() => {
+      this._detectionTimeoutId = null;
+      const code = this._dom?.codeElement.textContent ?? '';
+      void detectLanguage(code).then((detected) => {
+        if (detected === this._detectedLanguage) {
+          return;
+        }
+        this._detectedLanguage = detected;
+        // Rebuild picker so the detected language section updates
+        if (this._dom) {
+          if (this._picker) {
+            this._picker.destroy();
+          }
+          this._picker = this.buildLanguagePicker(this._dom.languageButton, this._dom.wrapper);
+        }
+      });
+    }, 600);
+  }
+
   private async highlightCode(): Promise<void> {
     if (!isHighlightingSupported() || !isHighlightable(this._data.language)) {
       this._disposeHighlights?.();
@@ -460,10 +604,17 @@ export class CodeTool implements BlockTool {
       this._highlightRafId = null;
     }
 
+    if (this._detectionTimeoutId !== null) {
+      clearTimeout(this._detectionTimeoutId);
+      this._detectionTimeoutId = null;
+    }
+
     if (this._picker) {
       this._picker.destroy();
       this._picker = null;
     }
+
+    this._dom = null;
   }
 
   public static get toolbox(): ToolboxConfig {

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

@@ -0,0 +1,118 @@
+import { tokenizeCode } from './shiki-loader';
+
+/**
+ * Languages considered for auto-detection.
+ * Kept to ~15 common ones to keep detection fast.
+ */
+export const DETECTION_CANDIDATE_LANGUAGES = [
+  'javascript',
+  'typescript',
+  'python',
+  'java',
+  'html',
+  'css',
+  'json',
+  'bash',
+  'sql',
+  'rust',
+  'go',
+  'cpp',
+  'yaml',
+  'markdown',
+  'php',
+] as const;
+
+/** Minimum code length (characters) before attempting detection. */
+const MIN_CODE_LENGTH = 20;
+
+/**
+ * Threshold: if the winning language's fg-token ratio is above this value,
+ * no meaningful detection was possible and we return null.
+ * A ratio of 1.0 means all tokens are unrecognized (plain fg color).
+ * A ratio of 0.75 means 75% of characters are unrecognized.
+ */
+const MAX_ACCEPTABLE_FG_RATIO = 0.75;
+
+/**
+ * Minimum number of distinct non-fg colors a tokenization must produce
+ * to be considered a genuine match. Languages that colorize everything
+ * with a single non-fg color (e.g. YAML treating code as a string block)
+ * produce a deceptively low fg-ratio without actually recognizing the syntax.
+ */
+const MIN_DISTINCT_COLORS = 2;
+
+/**
+ * Scores how well shiki tokenized the code in a given language.
+ * Returns a value in [0, 1] — lower is better (fewer unrecognized tokens),
+ * or 1 if the tokenization didn't use enough distinct colors to be a real match.
+ *
+ * Strategy: compute the ratio of characters colored with the theme's
+ * foreground color (= unrecognized/plain text) to total characters.
+ * A well-matched language has many distinctly-colored tokens; a poorly-matched
+ * language produces mostly fg-colored (unrecognized) tokens.
+ *
+ * Guard: if fewer than MIN_DISTINCT_COLORS non-fg colors appear, the grammar
+ * is treating everything as the same token type (e.g. YAML string), which is
+ * a false positive. Return 1 in that case.
+ */
+function scoreTokens(tokens: Array<Array<{ content: string; color: string }>>, fg: string): number {
+  const allTokens = tokens.flat();
+  const totalChars = allTokens.reduce((sum, token) => sum + token.content.length, 0);
+
+  if (totalChars === 0) return 1;
+
+  const { fgChars, nonFgColors } = allTokens.reduce(
+    (acc, token) => ({
+      fgChars: acc.fgChars + (token.color === fg ? token.content.length : 0),
+      nonFgColors: token.color === fg ? acc.nonFgColors : acc.nonFgColors.add(token.color),
+    }),
+    { fgChars: 0, nonFgColors: new Set<string>() }
+  );
+
+  // Reject tokenizations that use fewer than MIN_DISTINCT_COLORS non-fg colors —
+  // these are grammars that "colorize" everything as a single token type
+  // (e.g. YAML interpreting code as block scalars), which is a false positive.
+  if (nonFgColors.size < MIN_DISTINCT_COLORS) {
+    return 1;
+  }
+
+  return fgChars / totalChars;
+}
+
+/**
+ * Detects the most likely programming language for the given code.
+ * Returns a language ID from DETECTION_CANDIDATE_LANGUAGES, or null if:
+ * - code is too short
+ * - shiki isn't loaded yet
+ * - no language scores clearly better than plain text
+ */
+export async function detectLanguage(code: string): Promise<string | null> {
+  if (code.length < MIN_CODE_LENGTH) {
+    return null;
+  }
+
+  // Tokenize all candidate languages concurrently
+  const results = await Promise.all(
+    DETECTION_CANDIDATE_LANGUAGES.map(async (lang) => {
+      const tokens = await tokenizeCode(code, lang);
+      return { lang, tokens };
+    })
+  );
+
+  const best = results.reduce<{ lang: string | null; score: number }>(
+    (acc, { lang, tokens }) => {
+      if (!tokens) return acc;
+
+      const score = scoreTokens(tokens.light.tokens, tokens.light.fg);
+
+      return score < acc.score ? { lang, score } : acc;
+    },
+    { lang: null, score: Infinity }
+  );
+
+  if (best.lang === null || best.score >= MAX_ACCEPTABLE_FG_RATIO) {
+    return null;
+  }
+
+  return best.lang;
+}

package/types/tools/block-tool.d.ts

@@ -88,6 +88,16 @@ export interface BlockTool extends BaseTool {
    */
   getContentOffset?(hoveredElement: Element): { left: number } | undefined;
 
+  /**
+   * Returns the element that the toolbar should vertically center on.
+   * Used by tools whose editable area is deeply nested below non-editable UI
+   * (e.g., a header bar), where the default contenteditable-descendant search
+   * would position the toolbar too far down inside the block.
+   *
+   * Return undefined to use the default positioning logic.
+   */
+  getToolbarAnchorElement?(): HTMLElement | undefined;
+
   /**
    * Called when read-only mode is toggled without re-rendering the block.
    * Implementations should update the DOM in place: toggle contentEditable,

package/types/utils/popover/popover-item.d.ts

@@ -151,6 +151,12 @@ export interface PopoverItemDefaultBaseParams {
    */
   icon?: string;
 
+  /**
+   * Icon to be displayed on the trailing (right) side of the item.
+   * Rendered without a box background, suitable for indicators like a checkmark.
+   */
+  trailingIcon?: string;
+
   /**
    * Additional displayed text
    */