@jackuait/blok 0.11.1 → 0.12.0

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

@@ -32,27 +32,89 @@ export function handleCodeKeydown(
   return false;
 }
 
+/**
+ * Map of opening brackets to their matching closers. Used by Enter handling to
+ * decide whether the caret sits between a paired set of brackets, in which
+ * case the closer is pushed to its own dedented line and the caret lands on
+ * an indented middle line — same shape as VSCode/JetBrains defaults.
+ */
+const BRACKET_PAIRS: Record<string, string> = {
+  '{': '}',
+  '(': ')',
+  '[': ']',
+};
+
 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 startOffset = computeCaretOffset(codeElement, range.startContainer, range.startOffset);
+  const endOffset = computeCaretOffset(codeElement, range.endContainer, range.endOffset);
 
   const text = codeElement.textContent ?? '';
-  const before = text.substring(0, caretOffset);
-  const after = text.substring(caretOffset);
+  const before = text.substring(0, startOffset);
+  const after = text.substring(endOffset);
+
+  // Leading whitespace of the line where the caret sits — auto-indent baseline.
+  const lineStart = before.lastIndexOf('\n') + 1;
+  const indentMatch = before.substring(lineStart).match(/^[ \t]*/);
+  const indent = indentMatch ? indentMatch[0] : '';
+
+  const charBefore = before.length > 0 ? before.charAt(before.length - 1) : '';
+  const expectedCloser = BRACKET_PAIRS[charBefore];
+  const charAfter = after.charAt(0);
+
+  const { inserted, caretDelta } = computeNewlineInsertion({
+    indent,
+    afterOpener: expectedCloser !== undefined,
+    betweenMatchedPair: expectedCloser !== undefined && charAfter === expectedCloser,
+  });
 
   while (codeElement.firstChild) {
     codeElement.removeChild(codeElement.firstChild);
   }
-  codeElement.appendChild(document.createTextNode(before + '\n' + after));
+  codeElement.appendChild(document.createTextNode(before + inserted + after));
+
+  restoreCaretOffset(codeElement, startOffset + caretDelta);
+}
+
+function computeNewlineInsertion(opts: {
+  indent: string;
+  afterOpener: boolean;
+  betweenMatchedPair: boolean;
+}): { inserted: string; caretDelta: number } {
+  const { indent, afterOpener, betweenMatchedPair } = opts;
+
+  if (betweenMatchedPair) {
+    return {
+      inserted: `\n${indent}${TAB_STRING}\n${indent}`,
+      caretDelta: 1 + indent.length + TAB_STRING.length,
+    };
+  }
+
+  if (afterOpener) {
+    return {
+      inserted: `\n${indent}${TAB_STRING}`,
+      caretDelta: 1 + indent.length + TAB_STRING.length,
+    };
+  }
+
+  return {
+    inserted: `\n${indent}`,
+    caretDelta: 1 + indent.length,
+  };
+}
+
+function computeCaretOffset(root: HTMLElement, container: Node, offset: number): number {
+  const range = document.createRange();
+
+  range.selectNodeContents(root);
+  range.setEnd(container, offset);
 
-  restoreCaretOffset(codeElement, caretOffset + 1);
+  return range.toString().length;
 }
 
 function insertTab(): void {

package/src/tools/code/constants.ts

@@ -58,7 +58,7 @@ export const LANGUAGE_BUTTON_STYLES = 'inline-flex items-center px-1.5 py-0.5 ro
 export const HEADER_CONTROLS_STYLES = 'flex items-center gap-1 opacity-0 group-hover/code:opacity-100 transition-opacity';
 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 HEADER_BUTTON_MATCHED_STYLES = 'p-1.5 rounded-lg 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 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] caret-text-primary';
 export const COPIED_FEEDBACK_STYLES = 'text-xs text-gray-text font-medium select-none';
 
 // Languages that support preview rendering
@@ -96,13 +96,6 @@ export const SPLIT_CONTAINER_STYLES = 'flex flex-col overflow-hidden';
 export const SPLIT_CONTAINER_SPLIT_STYLES = 'flex flex-row overflow-hidden';
 export const SPLIT_HALF_STYLES = 'flex-1 min-w-0 overflow-hidden';
 
-// 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
@@ -113,4 +106,5 @@ export const HIGHLIGHTABLE_LANGUAGES = new Set(
 // CSS — line number gutter
 export const CODE_BODY_STYLES = 'flex overflow-hidden';
 export const GUTTER_STYLES = 'select-none text-right pl-4 pr-3 py-3 font-mono text-sm leading-relaxed text-gray-text/40 shrink-0';
-export const GUTTER_LINE_STYLES = 'leading-relaxed';
+export const GUTTER_LINE_STYLES = 'leading-relaxed cursor-text';
+

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

@@ -196,6 +196,7 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
     const lineEl = document.createElement('div');
     lineEl.className = GUTTER_LINE_STYLES;
     lineEl.textContent = String(idx + 1);
+    lineEl.setAttribute('data-line-index', String(idx));
     gutterElement.appendChild(lineEl);
   });
 
@@ -215,8 +216,11 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
 
   header.appendChild(controls);
 
-  // Pre wrapper for semantic HTML
+  // Pre wrapper for semantic HTML — flex-1 so it fills code body width,
+  // so clicks on the right empty strip of a short line still land on the
+  // editable code element and the browser snaps caret to end of that line.
   const preElement = document.createElement('pre');
+  preElement.className = 'flex-1 min-w-0';
   preElement.appendChild(codeElement);
 
   // Code body container (flex: gutter + pre)

package/src/tools/code/index.ts

@@ -38,12 +38,38 @@ import {
 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 { tokenizePrism, isHighlightable } from './prism-loader';
+import { applyPrismHighlight, disposePrismStyles } from './prism-applier';
 import { detectLanguage } from './language-detector';
 
 const COPIED_FEEDBACK_DURATION = 1500;
 
+/**
+ * Walk text nodes under root to resolve a flat character offset into a
+ * (node, offset) pair usable with Range. Recurses instead of mutating locals.
+ */
+function findTextPosition(root: Node, targetOffset: number): { node: Node; offset: number } {
+  const doc = root.ownerDocument ?? document;
+  const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  const step = (consumed: number): { node: Node; offset: number } => {
+    const next = walker.nextNode() as Text | null;
+
+    if (!next) {
+      return { node: root, offset: 0 };
+    }
+
+    const len = next.nodeValue?.length ?? 0;
+
+    if (consumed + len >= targetOffset) {
+      return { node: next, offset: targetOffset - consumed };
+    }
+
+    return step(consumed + len);
+  };
+
+  return step(0);
+}
+
 export class CodeTool implements BlockTool {
   private api: API;
   private readOnly: boolean;
@@ -53,7 +79,6 @@ export class CodeTool implements BlockTool {
   private _picker: PopoverDesktop | null = null;
   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;
@@ -133,6 +158,17 @@ export class CodeTool implements BlockTool {
     }
 
     if (!this.readOnly) {
+      dom.gutterElement.addEventListener('mousedown', (event: MouseEvent) => {
+        const target = (event.target as HTMLElement | null)?.closest<HTMLElement>('[data-line-index]');
+
+        if (!target) return;
+
+        const idx = Number(target.getAttribute('data-line-index'));
+
+        event.preventDefault();
+        this.focusLineEnd(idx);
+      });
+
       dom.codeElement.addEventListener('keydown', (event: KeyboardEvent) => {
         const handled = handleCodeKeydown(event, dom.codeElement, () => this.exitBlock());
 
@@ -151,6 +187,19 @@ export class CodeTool implements BlockTool {
         this.scheduleHighlight();
         this.scheduleDetection();
       });
+
+      // Chrome skips the `input` event on native paste into a plaintext-only
+      // contenteditable that already holds syntax-highlight spans — the DOM
+      // mutates but our gutter/highlight/detection refresh never runs.
+      // Re-run the refresh after the browser's native paste completes.
+      dom.codeElement.addEventListener('paste', () => {
+        requestAnimationFrame(() => {
+          this.syncTrailingBr();
+          this.updateGutter();
+          this.scheduleHighlight();
+          this.scheduleDetection();
+        });
+      });
     }
 
     dom.copyButton.addEventListener('click', () => this.copyCode());
@@ -277,6 +326,81 @@ export class CodeTool implements BlockTool {
     };
   }
 
+  /**
+   * In-place data update for undo/redo. Preserves view mode and DOM state.
+   */
+  public setData(newData: CodeData): boolean {
+    const oldLanguage = this._data.language;
+
+    this._data = {
+      code: newData.code ?? '',
+      language: newData.language ?? DEFAULT_LANGUAGE,
+      lineNumbers: newData.lineNumbers,
+    };
+
+    if (!this._dom) {
+      return true;
+    }
+
+    this._dom.codeElement.textContent = this._data.code;
+    this.syncTrailingBr();
+
+    this._lineNumbers = newData.lineNumbers ?? true;
+    this._dom.gutterElement.hidden = !this._lineNumbers;
+    this.updateGutter();
+
+    if (newData.language !== oldLanguage) {
+      this.applyLanguageChange(this._data.language);
+    } else if (this._viewMode === 'preview' || this._viewMode === 'split') {
+      void this.renderPreview();
+    }
+
+    void this.highlightCode();
+
+    return true;
+  }
+
+  /**
+   * Update DOM for a language change during setData, preserving current view mode.
+   */
+  private applyLanguageChange(languageId: string): void {
+    if (!this._dom) {
+      return;
+    }
+
+    const textSpan = this._dom.languageButton.querySelector('span');
+
+    if (textSpan) {
+      textSpan.textContent = this.getLanguageName(languageId);
+    }
+
+    const isPreviewable = PREVIEWABLE_LANGUAGES.has(languageId);
+
+    if (this._dom.viewModeContainer) {
+      this._dom.viewModeContainer.hidden = !isPreviewable;
+    }
+
+    if (isPreviewable && this._dom.previewElement) {
+      this._previewContainer = this._dom.previewElement;
+
+      if (this._viewMode === 'preview' || this._viewMode === 'split') {
+        void this.renderPreview();
+      }
+    } else if (!isPreviewable) {
+      this._previewContainer = null;
+
+      if (this._viewMode !== 'code') {
+        this._viewMode = 'code';
+        this.applyViewMode();
+      }
+    }
+
+    if (this._picker) {
+      this._picker.destroy();
+    }
+    this._picker = this.buildLanguagePicker(this._dom.languageButton, this._dom.wrapper);
+  }
+
   public validate(savedData: CodeData): boolean {
     return savedData.code.trim() !== '';
   }
@@ -402,11 +526,7 @@ export class CodeTool implements BlockTool {
   /**
    * 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.
-<<<<<<< Updated upstream
-   * The currently selected language is shown with a trailing check icon
-=======
    * The currently selected language is shown with a check icon and active state
->>>>>>> Stashed changes
    * in its natural position in the full language list.
    */
   private buildLanguagePickerItems(): PopoverItemParams[] {
@@ -505,6 +625,7 @@ export class CodeTool implements BlockTool {
       const lineEl = document.createElement('div');
       lineEl.className = GUTTER_LINE_STYLES;
       lineEl.textContent = String(idx + 1);
+      lineEl.setAttribute('data-line-index', String(idx));
       gutter.appendChild(lineEl);
     });
   }
@@ -568,29 +689,59 @@ export class CodeTool implements BlockTool {
   }
 
   private async highlightCode(): Promise<void> {
-    if (!isHighlightingSupported() || !isHighlightable(this._data.language)) {
-      this._disposeHighlights?.();
-      this._disposeHighlights = null;
-      return;
-    }
+    const lang = this._data.language;
+
+    if (!isHighlightable(lang)) return;
 
     const code = this._dom?.codeElement.textContent ?? '';
 
-    if (!code.trim()) {
-      this._disposeHighlights?.();
-      this._disposeHighlights = null;
-      return;
-    }
+    if (!code.trim()) return;
 
-    const tokens = await tokenizeCode(code, this._data.language);
+    const html = await tokenizePrism(code, lang);
 
-    if (!tokens || !this._dom) {
-      return;
+    if (!html || !this._dom) return;
+
+    // Text may have changed during the async tokenize (e.g. user pressed
+    // Enter). Applying a stale html would overwrite the newer content.
+    if (this._dom.codeElement.textContent !== code) return;
+
+    applyPrismHighlight(this._dom.codeElement, html, lang);
+
+    // applyPrismHighlight rewrites innerHTML, dropping the trailing <br>
+    // sentinel that the keydown handler installed. Without it, a final
+    // newline collapses and the caret has no line box on the new line.
+    this.syncTrailingBr();
+  }
+
+  /**
+   * Place caret at end of the Nth text line inside the code element.
+   * Line index is 0-based. Out-of-range indices are clamped.
+   */
+  private focusLineEnd(lineIndex: number): void {
+    if (!this._dom) return;
+
+    const codeEl = this._dom.codeElement;
+    const text = codeEl.textContent ?? '';
+    const lines = text.split('\n');
+    const clamped = Math.max(0, Math.min(lineIndex, lines.length - 1));
+    const targetOffset = lines
+      .slice(0, clamped)
+      .reduce((acc, line) => acc + line.length + 1, 0) + lines[clamped].length;
+
+    const position = findTextPosition(codeEl, targetOffset);
+    const range = codeEl.ownerDocument.createRange();
+
+    range.setStart(position.node, position.offset);
+    range.setEnd(position.node, position.offset);
+
+    const selection = codeEl.ownerDocument.getSelection();
+
+    if (selection) {
+      selection.removeAllRanges();
+      selection.addRange(range);
     }
 
-    // Clean up previous highlights before applying new ones
-    this._disposeHighlights?.();
-    this._disposeHighlights = applyHighlights(this._dom.codeElement, tokens);
+    codeEl.focus({ preventScroll: true });
   }
 
   private exitBlock(): void {
@@ -600,8 +751,7 @@ export class CodeTool implements BlockTool {
   }
 
   public removed(): void {
-    this._disposeHighlights?.();
-    this._disposeHighlights = null;
+    disposePrismStyles();
 
     if (this._highlightRafId !== null) {
       cancelAnimationFrame(this._highlightRafId);
@@ -649,6 +799,16 @@ export class CodeTool implements BlockTool {
     return true;
   }
 
+  /**
+   * CodeTool handles Enter and Tab itself (see handleCodeKeydown). Declaring
+   * this flag tells KeyboardNavigation to skip its own Enter handling — without
+   * it, the global handler would run on top of the tool's handler, splitting
+   * the block and yanking the caret out of the code element on every newline.
+   */
+  public static get enableLineBreaks(): boolean {
+    return true;
+  }
+
   public static get pasteConfig(): PasteConfig {
     return {
       tags: ['PRE'],

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

@@ -1,4 +1,4 @@
-import { tokenizeCode } from './shiki-loader';
+import { tokenizePrism } from './prism-loader';
 
 /**
  * Languages considered for auto-detection.
@@ -26,64 +26,62 @@ export const DETECTION_CANDIDATE_LANGUAGES = [
 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.
+ * Minimum number of distinct token types a tokenization must produce
+ * to be considered a genuine match. Languages that colorize everything
+ * with a single token type (e.g. YAML treating code as a string block)
+ * produce a deceptively high score without actually recognizing the syntax.
  */
-const MAX_ACCEPTABLE_FG_RATIO = 0.75;
+const MIN_DISTINCT_TYPES = 2;
 
 /**
- * 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.
+ * Threshold: if the winning language's diversity ratio is below this value,
+ * no meaningful detection was possible and we return null.
+ * A ratio of 0 means no token spans were found (plain text / unrecognized).
+ * A higher ratio means more distinct token types relative to total tokens.
  */
-const MIN_DISTINCT_COLORS = 2;
+const MIN_ACCEPTABLE_DIVERSITY_RATIO = 0.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.
+ * Scores how well Prism tokenized the code in a given language.
+ * Returns a value in (0, 1] — higher is better (more token type diversity),
+ * or null if the tokenization didn't use enough distinct types 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.
+ * Strategy: count distinct token types from Prism's HTML output and compute
+ * the ratio of distinct types to total token spans.
+ * A well-matched language has many distinctly-typed tokens; a poorly-matched
+ * language produces no token spans or only a single token type.
  *
- * 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.
+ * Guard: if fewer than MIN_DISTINCT_TYPES appear, the grammar is treating
+ * everything as the same token type (e.g. YAML string), which is a false positive.
+ * Return null 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>() }
+async function scoreLanguage(code: string, lang: string): Promise<number | null> {
+  const html = await tokenizePrism(code, lang);
+  if (!html) return null;
+
+  // Count token spans by type using regex on the HTML output
+  const matches = html.match(/class="token ([^"]+)"/g) ?? [];
+  if (matches.length === 0) return null;
+
+  // Extract unique token types (handle compound classes like "token keyword operator")
+  const types = new Set(
+    matches.flatMap(m => {
+      const inner = m.slice('class="token '.length, -1); // e.g. "keyword" or "keyword operator"
+      return inner.split(' ');
+    })
   );
 
-  // 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;
-  }
+  if (types.size < MIN_DISTINCT_TYPES) return null;
 
-  return fgChars / totalChars;
+  // Score: ratio of distinct types to total tokens — higher = more diverse = better match
+  return types.size / matches.length;
 }
 
 /**
  * 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
+ * - prism isn't loaded yet
  * - no language scores clearly better than plain text
  */
 export async function detectLanguage(code: string): Promise<string | null> {
@@ -91,26 +89,23 @@ export async function detectLanguage(code: string): Promise<string | null> {
     return null;
   }
 
-  // Tokenize all candidate languages concurrently
+  // Score 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 score = await scoreLanguage(code, lang);
+      return { lang, score };
     })
   );
 
   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;
+    (acc, { lang, score }) => {
+      if (score === null) return acc;
+      return score > acc.score ? { lang, score } : acc;
     },
-    { lang: null, score: Infinity }
+    { lang: null, score: -Infinity }
   );
 
-  if (best.lang === null || best.score >= MAX_ACCEPTABLE_FG_RATIO) {
+  if (best.lang === null || best.score < MIN_ACCEPTABLE_DIVERSITY_RATIO) {
     return null;
   }