ompchamber 0.7.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "0.7.0",
+  "version": "1.0.0",
   "description": "Developer web console and diagnostic chamber for AI Oh-My-Pi — Elysia + Preact on Bun.",
   "license": "UNLICENSED",
   "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",
@@ -51,6 +51,7 @@
     "@shikijs/themes": "^4.4.3",
     "@tailwindcss/typography": "^0.5.20",
     "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "dompurify": "^3.4.15",
     "elysia": "^1.4.30",

package/src/client/components/common/MarkdownRenderer.tsx

@@ -14,13 +14,16 @@
  */
 
 import type { TargetedMouseEvent } from 'preact';
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'preact/hooks';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { renderMarkdown } from '@/shared/lib/markdown/marked';
 import { hydrateMathBlocks, MATH_PENDING_CLASS, preloadKatex } from '@/shared/lib/markdown/katex';
 import { sanitizeHtml } from '@/shared/lib/markdown/sanitize';
 import { hydrateMermaidBlocks } from '@/shared/lib/markdown/mermaid';
 import { copyToClipboard } from '@/client/hooks/ui/clipboard';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { DiagramViewer } from '@/client/components/common/diagram-viewer';
+import { readDiagramBlock, type DiagramSnapshot } from '@/client/components/common/diagram-viewer/read-block';
+
 
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
 
@@ -31,6 +34,9 @@ interface MarkdownRendererProps {
 
 export function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  /** Block the open viewer was read from, so a theme re-render can refresh it. */
+  const diagramBlockRef = useRef<HTMLElement | null>(null);
+  const [diagram, setDiagram] = useState<DiagramSnapshot | null>(null);
 
   const syntaxReady = useSyntaxReady();
 
@@ -83,13 +89,13 @@ export function MarkdownRenderer({ content, className = '' }: MarkdownRendererPr
     if (!container) return;
 
     let timer: number | undefined;
-    const hydrate = () => {
+    const hydrate = async () => {
       const current = containerRef.current;
       if (!current || !current.isConnected) return;
-      void hydrateMermaidBlocks(current);
+      await hydrateMermaidBlocks(current);
     };
 
-    hydrate();
+    void hydrate();
     // React can rewrite the container's innerHTML with an identical html
     // string (timeline re-renders) without this effect re-running, which
     // would strand freshly-inserted pending blocks. Re-hydrate on any
@@ -99,45 +105,81 @@ export function MarkdownRenderer({ content, className = '' }: MarkdownRendererPr
       const current = containerRef.current;
       if (current?.isConnected) void hydrateMermaidBlocks(current, { cachedOnly: true });
       window.clearTimeout(timer);
-      timer = window.setTimeout(hydrate, 120);
+      timer = window.setTimeout(() => void hydrate(), 120);
     });
     observer.observe(container, { childList: true });
 
-    const onThemeChange = () => hydrate();
-    window.addEventListener('omp:theme-changed', onThemeChange);
+    // Diagrams bake the palette into their SVG, so every theme write must
+    // re-render them. The trigger is the `data-theme` attribute itself rather
+    // than the `omp:theme-changed` event: the navbar toggle and the settings
+    // modal are both writers, and observing the attribute catches all of them
+    // the moment the document changes. Vacuously cheap for a same-palette write
+    // (blocks already matching the new theme key are skipped).
+    const rehydrateForTheme = async () => {
+      await hydrate();
+      const block = diagramBlockRef.current;
+      // A timeline re-render can replace the block under an open viewer; keep
+      // the last snapshot then rather than closing the viewer on the user.
+      if (!block?.isConnected) return;
+      const snapshot = readDiagramBlock(block);
+      if (snapshot) setDiagram(snapshot);
+    };
+    const themeObserver = new MutationObserver(() => void rehydrateForTheme());
+    themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+
     return () => {
       window.clearTimeout(timer);
       observer.disconnect();
-      window.removeEventListener('omp:theme-changed', onThemeChange);
+      themeObserver.disconnect();
     };
   }, [hasMermaid, html]);
 
   const handleContainerClick = useCallback((e: TargetedMouseEvent<HTMLDivElement>) => {
     const target = (e.target as HTMLElement).closest<HTMLButtonElement>('button.code-copy-float');
-    if (!target) return;
-    const text = target.dataset.copy ?? '';
-    if (!text) return;
+    if (target) {
+      const text = target.dataset.copy ?? '';
+      if (!text) return;
+      e.preventDefault();
+      e.stopPropagation();
+      void copyToClipboard(text).then((ok) => {
+        if (!ok) return;
+        target.setAttribute('data-copied', 'true');
+        target.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+        setTimeout(() => {
+          target.removeAttribute('data-copied');
+          target.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+        }, 2000);
+      });
+      return;
+    }
+
+    // A rendered diagram is a door into the zoom/pan viewer; pending, failed,
+    // and still-streaming blocks stay inert.
+    const block = (e.target as HTMLElement).closest<HTMLElement>('.mermaid-block[data-mermaid-state="done"]');
+    if (!block) return;
+    const snapshot = readDiagramBlock(block);
+    if (!snapshot) return;
     e.preventDefault();
-    e.stopPropagation();
-    void copyToClipboard(text).then((ok) => {
-      if (!ok) return;
-      target.setAttribute('data-copied', 'true');
-      target.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
-      setTimeout(() => {
-        target.removeAttribute('data-copied');
-        target.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
-      }, 2000);
-    });
+    diagramBlockRef.current = block;
+    setDiagram(snapshot);
+  }, []);
+
+  const closeDiagram = useCallback(() => {
+    diagramBlockRef.current = null;
+    setDiagram(null);
   }, []);
 
   if (!content) return null;
 
   return (
-    <div
-      ref={containerRef}
-      className={`prose-content text-[13px] text-ink leading-relaxed select-text ${className}`}
-      onClick={handleContainerClick}
-      dangerouslySetInnerHTML={{ __html: html }}
-    />
+    <>
+      <div
+        ref={containerRef}
+        className={`prose-content text-[13px] text-ink leading-relaxed select-text ${className}`}
+        onClick={handleContainerClick}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+      {diagram && <DiagramViewer {...diagram} onClose={closeDiagram} />}
+    </>
   );
 }

package/src/client/components/common/code-editor/history.test.ts

@@ -0,0 +1,118 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import {
+  continuesTyping,
+  createHistory,
+  mergeTyping,
+  pushEdit,
+  pushRecord,
+  stepHistory,
+  HISTORY_TIME_GAP,
+  type HistoryRecord,
+} from '@/client/components/common/code-editor/history';
+
+const NOW = 1_700_000_000_000;
+
+function record(value: string, caret: number, timestamp = NOW): HistoryRecord {
+  return { value, selectionStart: caret, selectionEnd: caret, timestamp };
+}
+
+describe('pushRecord', () => {
+  test('appends and moves the current position', () => {
+    const history = createHistory();
+    pushRecord(history, record('a', 1));
+    pushRecord(history, record('ab', 2));
+
+    expect(history.stack.map((entry) => entry.value)).toEqual(['a', 'ab']);
+    expect(history.offset).toBe(1);
+  });
+
+  test('drops the redo entries that follow the current position', () => {
+    const history = createHistory();
+    pushRecord(history, record('a', 1));
+    pushRecord(history, record('ab', 2));
+    history.offset = 0;
+
+    pushRecord(history, record('ax', 2));
+
+    expect(history.stack.map((entry) => entry.value)).toEqual(['a', 'ax']);
+    expect(history.offset).toBe(1);
+  });
+});
+
+describe('pushEdit', () => {
+  test('caps the stack and keeps the position on the newest entry', () => {
+    const history = createHistory();
+    for (let i = 0; i < 120; i++) pushEdit(history, record(`v${i}`, 0, NOW + i));
+
+    expect(history.stack.length).toBe(100);
+    expect(history.stack[history.offset].value).toBe('v119');
+  });
+});
+
+describe('continuesTyping', () => {
+  const previous = record('const value = 1', 15);
+
+  test('merges a keystroke that keeps extending the same word', () => {
+    expect(continuesTyping(previous, 'const value = 12', 16, NOW + 100)).toBe(true);
+  });
+
+  test('starts a new entry once the burst window has passed', () => {
+    expect(continuesTyping(previous, 'const value = 12', 16, NOW + HISTORY_TIME_GAP + 1)).toBe(false);
+  });
+
+  test('does not merge a different word or a fresh word', () => {
+    expect(continuesTyping(record('const value', 11), 'const other', 11, NOW + 100)).toBe(false);
+    expect(continuesTyping(undefined, 'const value = 12', 16, NOW + 100)).toBe(false);
+  });
+});
+
+describe('mergeTyping', () => {
+  test('rewrites the current entry in place', () => {
+    const history = createHistory();
+    pushRecord(history, record('a', 1));
+    mergeTyping(history, 'ab', 2, 2, NOW + 50);
+
+    expect(history.stack).toHaveLength(1);
+    expect(history.stack[0].value).toBe('ab');
+    expect(history.stack[0].selectionStart).toBe(2);
+  });
+
+  test('invalidates the redo entries after the current position', () => {
+    const history = createHistory();
+    pushRecord(history, record('a', 1));
+    pushRecord(history, record('ab', 2));
+    history.offset = 0;
+
+    mergeTyping(history, 'ax', 2, 2, NOW + 50);
+
+    expect(history.stack.map((entry) => entry.value)).toEqual(['ax']);
+  });
+});
+
+describe('stepHistory', () => {
+  test('walks back and forward through the stack', () => {
+    const history = createHistory();
+    pushRecord(history, record('a', 1));
+    pushRecord(history, record('ab', 2));
+
+    expect(stepHistory(history, 'undo')?.value).toBe('a');
+    expect(history.offset).toBe(0);
+    expect(stepHistory(history, 'redo')?.value).toBe('ab');
+    expect(history.offset).toBe(1);
+  });
+
+  test('stops at both ends without moving', () => {
+    const history = createHistory();
+    pushRecord(history, record('a', 1));
+
+    expect(stepHistory(history, 'redo')).toBeNull();
+    expect(stepHistory(history, 'undo')).toBeNull();
+    expect(history.offset).toBe(0);
+  });
+});

package/src/client/components/common/code-editor/history.ts

@@ -0,0 +1,101 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Undo history for the code editor.
+ *
+ * The editor cannot lean on the browser's own undo: it renders a transparent
+ * `<textarea>` over a highlighted `<pre>`, so a native undo would desync the two
+ * layers. Every entry therefore stores the whole buffer plus the caret, and this
+ * module is the bookkeeping behind ⌘Z / ⇧⌘Z — push, merge a typing burst into
+ * the word being typed, cap the stack, and step through it.
+ */
+
+export interface HistoryRecord {
+  value: string;
+  selectionStart: number;
+  selectionEnd: number;
+  timestamp: number;
+}
+
+export interface History {
+  stack: HistoryRecord[];
+  offset: number;
+}
+
+const HISTORY_LIMIT = 100;
+/** Typing within this window of the previous edit merges into that entry. */
+export const HISTORY_TIME_GAP = 3000;
+/** The word the caret sits at the end of, which is what a burst keeps extending. */
+const WORD_TAIL = /[^a-z0-9]([a-z0-9]+)$/i;
+
+export function createHistory(): History {
+  return { stack: [], offset: -1 };
+}
+
+/** Append `record`, dropping the redo entries that follow the current position. */
+export function pushRecord(history: History, record: HistoryRecord): void {
+  if (history.stack.length && history.offset > -1) {
+    history.stack = history.stack.slice(0, history.offset + 1);
+  }
+  history.stack.push(record);
+  history.offset = history.stack.length - 1;
+}
+
+/** Push an edit and cap the stack, leaving `offset` on the same entry. */
+export function pushEdit(history: History, record: HistoryRecord): void {
+  pushRecord(history, record);
+  if (history.stack.length <= HISTORY_LIMIT) return;
+  const extras = history.stack.length - HISTORY_LIMIT;
+  history.stack = history.stack.slice(extras);
+  history.offset = Math.max(history.offset - extras, 0);
+}
+
+/** The tail word of the line `position` sits on. */
+function tailWord(value: string, position: number): string | undefined {
+  return value.substring(0, position).split('\n').pop()?.match(WORD_TAIL)?.[1];
+}
+
+/**
+ * Whether a change keeps typing the word the previous entry ended with — the
+ * test that folds a run of keystrokes into one undoable edit.
+ */
+export function continuesTyping(
+  last: HistoryRecord | undefined,
+  next: string,
+  selectionStart: number,
+  timestamp: number,
+): boolean {
+  if (!last || timestamp - last.timestamp >= HISTORY_TIME_GAP) return false;
+  const previous = tailWord(last.value, last.selectionStart);
+  const current = tailWord(next, selectionStart);
+  return Boolean(previous && current?.startsWith(previous));
+}
+
+/** Fold a continuation into the current entry, which stays the current position. */
+export function mergeTyping(
+  history: History,
+  next: string,
+  selectionStart: number,
+  selectionEnd: number,
+  timestamp: number,
+): void {
+  // A merge is an edit like any other, so it drops the redo entries after it —
+  // otherwise typing straight after an undo would leave a stale redo target.
+  history.stack = history.stack.slice(0, history.offset + 1);
+  history.stack[history.offset] = { value: next, selectionStart, selectionEnd, timestamp };
+}
+
+/**
+ * Step one entry back (undo) or forward (redo) and return the buffer to
+ * restore, or null at either end of the stack.
+ */
+export function stepHistory(history: History, direction: 'undo' | 'redo'): HistoryRecord | null {
+  const index = direction === 'undo' ? history.offset - 1 : history.offset + 1;
+  const record = history.stack[index];
+  if (!record) return null;
+  history.offset = direction === 'undo' ? Math.max(index, 0) : Math.min(index, history.stack.length - 1);
+  return record;
+}

package/src/client/components/common/code-editor/index.tsx

@@ -1,6 +1,17 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 import type { CSSProperties, Ref, TargetedKeyboardEvent } from 'preact';
 
+import {
+  continuesTyping,
+  createHistory,
+  mergeTyping,
+  pushEdit,
+  pushRecord,
+  stepHistory,
+  type HistoryRecord,
+} from '@/client/components/common/code-editor/history';
+import type { CodeWindow, LineWindow } from '@/shared/lib/code/lazy-window';
+
 /**
  * Preact hand-roll of the textarea-over-<pre> highlighting editor
  * (the pattern react-simple-code-editor popularized), trimmed to the
@@ -9,28 +20,18 @@ import type { CSSProperties, Ref, TargetedKeyboardEvent } from 'preact';
  * How it works: a transparent <textarea> sits on top of a syntax-highlighted
  * <pre>. Typing, selecting and copying hit the native textarea; the <pre>
  * below just mirrors the text with Shiki markup.
+ *
+ * For a long document only a window of lines is mirrored (`virtual`): the
+ * textarea still holds every line, so editing, selection and copy are
+ * untouched, while the `<pre>` carries just the visible ones and reserves the
+ * rest as padding — the alignment that keeps the caret over its own row.
  */
 
-const HISTORY_LIMIT = 100;
-const HISTORY_TIME_GAP = 3000;
-
-interface HistoryRecord {
-  value: string;
-  selectionStart: number;
-  selectionEnd: number;
-  timestamp: number;
-}
-
-interface History {
-  stack: HistoryRecord[];
-  offset: number;
-}
-
 export interface CodeEditorProps {
   value: string;
   onValueChange: (value: string) => void;
-  /** Return the Shiki-highlighted HTML for the given code. */
-  highlight: (code: string) => string;
+  /** Return the Shiki-highlighted HTML for `code`, limited to `range` when the surface is windowed. */
+  highlight: (code: string, range: LineWindow | null) => string;
   padding?: number;
   /** Class applied to the inner <pre> holding the highlighted code. */
   preClassName?: string;
@@ -44,6 +45,8 @@ export interface CodeEditorProps {
   placeholder?: string;
   readOnly?: boolean;
   autoFocus?: boolean;
+  /** Renders only this window of lines, with the rest reserved as space. Omit to mirror the whole value. */
+  virtual?: CodeWindow | null;
 }
 
 const BASE_TEXTAREA_CLASS = 'code-editor-native-textarea';
@@ -80,9 +83,10 @@ export function CodeEditor({
   placeholder,
   readOnly,
   autoFocus,
+  virtual,
 }: CodeEditorProps) {
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
-  const historyRef = useRef<History>({ stack: [], offset: -1 });
+  const historyRef = useRef(createHistory());
   const [captureTab, setCaptureTab] = useState(true);
 
   // Re-record when the controlled value is replaced from the outside
@@ -90,18 +94,12 @@ export function CodeEditor({
   useEffect(() => {
     const input = inputRef.current;
     if (!input) return;
-    const record: HistoryRecord = {
+    pushRecord(historyRef.current, {
       value: input.value,
       selectionStart: input.selectionStart,
       selectionEnd: input.selectionEnd,
       timestamp: Date.now(),
-    };
-    const { stack, offset } = historyRef.current;
-    if (stack.length && offset > -1) {
-      historyRef.current.stack = stack.slice(0, offset + 1);
-    }
-    historyRef.current.stack.push(record);
-    historyRef.current.offset = historyRef.current.stack.length - 1;
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
@@ -109,19 +107,15 @@ export function CodeEditor({
     const input = inputRef.current;
     const last = historyRef.current.stack[historyRef.current.offset];
     if (last && input) {
+      // The entry on top is about to be superseded: keep where its caret was,
+      // so undo returns to the selection this edit replaced.
       historyRef.current.stack[historyRef.current.offset] = {
         ...last,
         selectionStart: input.selectionStart,
         selectionEnd: input.selectionEnd,
       };
     }
-    historyRef.current.stack.push({ ...record, timestamp: Date.now() });
-    historyRef.current.offset = historyRef.current.stack.length - 1;
-    if (historyRef.current.stack.length > HISTORY_LIMIT) {
-      const extras = historyRef.current.stack.length - HISTORY_LIMIT;
-      historyRef.current.stack = historyRef.current.stack.slice(extras);
-      historyRef.current.offset = Math.max(historyRef.current.offset - extras, 0);
-    }
+    pushEdit(historyRef.current, { ...record, timestamp: Date.now() });
     onValueChange(record.value);
     if (input) {
       input.value = record.value;
@@ -220,14 +214,12 @@ export function CodeEditor({
     const undoKey = isMac ? e.metaKey && e.key.toLowerCase() === 'z' : e.ctrlKey && e.key.toLowerCase() === 'z';
     if (undoKey && !e.shiftKey && !e.altKey) {
       e.preventDefault();
-      const { stack, offset } = historyRef.current;
-      const record = stack[offset - 1];
+      const record = stepHistory(historyRef.current, 'undo');
       if (record && inputRef.current) {
         inputRef.current.value = record.value;
         inputRef.current.selectionStart = record.selectionStart;
         inputRef.current.selectionEnd = record.selectionEnd;
         onValueChange(record.value);
-        historyRef.current.offset = Math.max(offset - 1, 0);
       }
       return;
     }
@@ -239,14 +231,12 @@ export function CodeEditor({
         : e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'z';
     if (redoKey && !e.altKey) {
       e.preventDefault();
-      const { stack, offset } = historyRef.current;
-      const record = stack[offset + 1];
+      const record = stepHistory(historyRef.current, 'redo');
       if (record && inputRef.current) {
         inputRef.current.value = record.value;
         inputRef.current.selectionStart = record.selectionStart;
         inputRef.current.selectionEnd = record.selectionEnd;
         onValueChange(record.value);
-        historyRef.current.offset = Math.min(offset + 1, stack.length - 1);
       }
       return;
     }
@@ -261,37 +251,18 @@ export function CodeEditor({
   const handleChange = (e: Event) => {
     const input = e.target as HTMLTextAreaElement;
     const { value: next, selectionStart, selectionEnd } = input;
-    const { stack, offset } = historyRef.current;
+    const history = historyRef.current;
     const timestamp = Date.now();
-    if (stack.length && offset > -1) {
-      historyRef.current.stack = stack.slice(0, offset + 1);
-    }
-    const last = historyRef.current.stack[historyRef.current.offset];
     // Merge typing bursts into one word-level undo entry.
-    if (last && timestamp - last.timestamp < HISTORY_TIME_GAP) {
-      const re = /[^a-z0-9]([a-z0-9]+)$/i;
-      const previous = getLines(last.value, last.selectionStart).pop()?.match(re);
-      const current = getLines(next, selectionStart).pop()?.match(re);
-      if (previous?.[1] && current?.[1]?.startsWith(previous[1])) {
-        historyRef.current.stack[historyRef.current.offset] = { value: next, selectionStart, selectionEnd, timestamp };
-        onValueChange(next);
-        return;
-      }
+    if (continuesTyping(history.stack[history.offset], next, selectionStart, timestamp)) {
+      mergeTyping(history, next, selectionStart, selectionEnd, timestamp);
+      onValueChange(next);
+      return;
     }
-    historyRef.current.stack.push({ value: next, selectionStart, selectionEnd, timestamp });
-    historyRef.current.offset = historyRef.current.stack.length - 1;
+    pushRecord(history, { value: next, selectionStart, selectionEnd, timestamp });
     onValueChange(next);
   };
 
-  const contentStyle: CSSProperties = {
-    paddingTop: padding,
-    paddingRight: padding,
-    paddingBottom: padding,
-    paddingLeft: padding,
-  };
-
-  const highlighted = highlight(value);
-
   const layerStyle: CSSProperties = {
     margin: 0,
     border: 0,
@@ -314,14 +285,33 @@ export function CodeEditor({
     overflowWrap: 'break-word',
   };
 
+  // The textarea owns the full document, so its padding is the plain inset and
+  // its lines land exactly where the geometry says line 0 starts.
+  const contentStyle: CSSProperties = {
+    paddingTop: padding,
+    paddingRight: padding,
+    paddingBottom: padding,
+    paddingLeft: padding,
+  };
+
+  // The `<pre>` carries only the window; the lines it is not given are reserved
+  // as padding, so the aligned layers stay aligned.
+  const windowStyle: CSSProperties = {
+    ...contentStyle,
+    paddingTop: padding + (virtual?.top ?? 0),
+    paddingBottom: padding + (virtual?.bottom ?? 0),
+  };
+
+  const highlighted = highlight(value, virtual ?? null);
+
   return (
     <div className={className} style={{ position: 'relative', textAlign: 'left', boxSizing: 'border-box', padding: 0, overflow: 'hidden', ...style }}>
       <pre
         ref={preRef}
         className={preClassName}
         aria-hidden="true"
-        style={{ ...layerStyle, ...contentStyle, position: 'relative', pointerEvents: 'none' }}
-        dangerouslySetInnerHTML={{ __html: highlighted + '<br />' }}
+        style={{ ...layerStyle, ...windowStyle, position: 'relative', pointerEvents: 'none' }}
+        dangerouslySetInnerHTML={{ __html: highlighted + (virtual && !virtual.breakAtEnd ? '' : '<br />') }}
       />
       <textarea
         ref={inputRef}