markstream-svelte 0.0.4-beta.2 → 0.0.5

package/README.md

@@ -27,9 +27,48 @@ Optional heavy renderers stay as peer dependencies, matching the Vue and React p
 Plain Markdown does not require these packages:
 
 ```bash
-pnpm add katex mermaid stream-monaco @terrastruct/d2 @antv/infographic
+pnpm add katex mermaid stream-diffs @terrastruct/d2 @antv/infographic
 ```
 
+`stream-diffs` powers the enhanced code blocks (smaller runtime, no `monaco-editor`).
+If you prefer the legacy Monaco-based rendering, install `stream-monaco` instead;
+it is used automatically as a fallback when `stream-diffs` is absent.
+
+## Enhanced Code Blocks
+
+`CodeBlockNode` renders a single code block with the header, toolbar, and a `stream-diffs` File / FileDiff surface. Inside `MarkdownRender`, code blocks resolve to the same runtime automatically.
+
+```svelte
+<script lang="ts">
+  import { CodeBlockNode } from 'markstream-svelte'
+  import type { CodeBlockMonacoOptions } from 'markstream-svelte'
+
+  const node = {
+    type: 'code_block',
+    language: 'ts',
+    code: 'const answer = 42',
+    raw: 'const answer = 42',
+  }
+
+  // fontSize / lineHeight / tabSize also drive the streaming <pre> fallback so
+  // the enhanced surface swaps in without a visual jump.
+  const monacoOptions: CodeBlockMonacoOptions = {
+    fontSize: 14,
+    lineHeight: 21,
+    tabSize: 4,
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+    wordWrap: 'off',
+    theme: 'vitesse-dark',
+    renderSideBySide: true,
+    MAX_HEIGHT: 640,
+  }
+</script>
+
+<CodeBlockNode {node} {monacoOptions} isDark showLineNumbers />
+```
+
+Component-level options: `isDark`, `showLineNumbers` (default `true`), and `monacoOptions` for both single blocks and diff blocks (`renderSideBySide`, `diffHunkActionsOnHover`, `onDiffHunkAction`). When neither `stream-diffs` nor `stream-monaco` is installed, the block renders as a plain `<pre>`.
+
 ## Basic Usage
 
 ```svelte

package/dist/components/CodeBlockNode.svelte

@@ -7,8 +7,9 @@
   import { hideTooltip, showTooltipForAnchor } from '../tooltip/singletonTooltip'
   import { getLanguageIcon, isLikelyIncompleteLanguageIdentifier, languageMap, normalizeLanguageIdentifier, resolveMonacoLanguageId } from '../utils/languageIcon'
   import HtmlPreviewFrame from './HtmlPreviewFrame.svelte'
+  import PreCodeNode from './PreCodeNode.svelte'
   import { copyTextToClipboard, resolveCssSize } from './shared/rich-block-helpers'
-  import { getString, sanitizeClassToken } from './shared/node-helpers'
+  import { getString } from './shared/node-helpers'
 
   type Props = {
     node: SvelteRenderableNode
@@ -30,6 +31,7 @@
     showPreviewButton?: boolean
     showCollapseButton?: boolean
     showFontSizeButtons?: boolean
+    showLineNumbers?: boolean
     htmlPreviewAllowScripts?: boolean
     htmlPreviewSandbox?: string | undefined
   }
@@ -54,6 +56,7 @@
     showPreviewButton = true,
     showCollapseButton = true,
     showFontSizeButtons = true,
+    showLineNumbers = true,
     htmlPreviewAllowScripts = false,
     htmlPreviewSandbox = undefined
   }: Props = $props()
@@ -72,6 +75,7 @@
     revealLineCount: 0,
   })
   const streamingLanguageTokens = ['javascript', 'plaintext', 'shellscript', 'typescript']
+  const defaultPreFallbackFontFamily = '"SF Mono", Monaco, Consolas, "Ubuntu Mono", "Liberation Mono", "Courier New", monospace'
 
   function resolveRecoverableFallbackLanguage(error: unknown) {
     const message = error instanceof Error ? error.message : String(error ?? '')
@@ -129,13 +133,16 @@
   let useFallback = $state(false)
   let fallbackLanguage = $state('')
   let editorKind: 'single' | 'diff' | null = $state(null)
+  let editorStreamMode: boolean | null = $state(null)
+  let editorRevealed = $state(false)
+  let fallbackRetired = $state(false)
   let createEditorPromise: Promise<void> | null = $state(null)
   let mounted = $state(false)
   let collapsed = $state(false)
   let expanded = $state(false)
   let copied = $state(false)
   let previewOpen = $state(false)
-  let codeFontSize = $state(13)
+  let codeFontSize = $state(12)
   let copyTimer: ReturnType<typeof setTimeout> | null = $state(null)
   let lifecycleId = $state(0)
   let heightSyncRaf: number | null = $state(null)
@@ -171,7 +178,7 @@
       : lightTheme ?? resolvedThemes?.lightTheme,
     resolvedIsDark ? 'vitesse-dark' : 'vitesse-light',
   ))
-  let defaultCodeFontSize = $derived(Number(mergedMonacoOptions.fontSize) || 13)
+  let defaultCodeFontSize = $derived(Number(mergedMonacoOptions.fontSize) || 12)
   let minWidthValue = $derived(resolveCssSize(minWidth ?? resolvedThemes?.minWidth))
   let maxWidthValue = $derived(resolveCssSize(maxWidth ?? resolvedThemes?.maxWidth))
   let containerStyle = $derived([
@@ -186,9 +193,12 @@
   let documentStreaming = $derived(context?.final === false || resolvedLoading)
   let shouldDeferStreamingLanguage = $derived(resolvedStream !== false && documentStreaming && (isLikelyIncompleteLanguageIdentifier(rawLanguage) || isStreamingLanguagePrefix(rawLanguage)))
   let shouldRender = $derived(!(resolvedLoading && !code.trim()))
-  let preLanguageClass = $derived(sanitizeClassToken(rawLanguage || monacoLanguage))
-  let showPreWhileMonacoLoads = $derived(!useFallback && !shouldDelayEditor && !shouldDeferStreamingLanguage && !editorReady)
-  let showPreFallback = $derived(useFallback || shouldDelayEditor || shouldDeferStreamingLanguage || showPreWhileMonacoLoads)
+  let preFallbackNode = $derived({
+    ...(node as any),
+    code,
+    loading: resolvedLoading,
+  } as SvelteRenderableNode)
+  let preFallbackStyle = $derived(buildPreFallbackStyle())
   let settledRefreshSignature = $derived(diff
     ? `${monacoLanguage}\0${originalCode}\0${updatedCode || code}`
     : `${monacoLanguage}\0${code}`)
@@ -258,6 +268,58 @@
     return getString((sourceNode as any)?.code)
   }
 
+  function readPositiveMetric(value: unknown) {
+    const number = Number(value)
+    return Number.isFinite(number) && number > 0 ? number : undefined
+  }
+
+  function readNonNegativeMetric(value: unknown) {
+    const number = Number(value)
+    return Number.isFinite(number) && number >= 0 ? number : undefined
+  }
+
+  function getCodeLineHeight() {
+    return readPositiveMetric(mergedMonacoOptions.lineHeight)
+      ?? (codeFontSize === 12 ? 18 : Math.max(12, Math.round(codeFontSize * 1.5)))
+  }
+
+  function getCodePadding() {
+    const padding = mergedMonacoOptions.padding as Record<string, unknown> | undefined
+    const defaultPadding = diff ? 0 : 8
+    return {
+      top: readNonNegativeMetric(padding?.top) ?? defaultPadding,
+      bottom: readNonNegativeMetric(padding?.bottom) ?? defaultPadding,
+    }
+  }
+
+  function getCodeFontFamily() {
+    return typeof mergedMonacoOptions.fontFamily === 'string' && mergedMonacoOptions.fontFamily.trim()
+      ? mergedMonacoOptions.fontFamily.trim()
+      : defaultPreFallbackFontFamily
+  }
+
+  function buildPreFallbackStyle() {
+    const padding = getCodePadding()
+    const fontFamily = getCodeFontFamily()
+    const tabSize = readPositiveMetric(mergedMonacoOptions.tabSize) ?? 4
+    const lineHeight = getCodeLineHeight()
+    return [
+      `--markstream-code-font-family: ${fontFamily}`,
+      `--vscode-editor-font-size: ${codeFontSize}px`,
+      `--vscode-editor-line-height: ${lineHeight}px`,
+      `--markstream-code-padding-y: ${padding.top}px`,
+      `--markstream-pre-line-number-top: ${padding.top}px`,
+      `font-family: ${fontFamily}`,
+      `font-size: ${codeFontSize}px`,
+      `line-height: ${lineHeight}px`,
+      `padding-top: ${padding.top}px`,
+      `padding-right: var(--markstream-code-padding-x, 12px)`,
+      `padding-bottom: ${padding.bottom}px`,
+      `padding-left: var(--markstream-code-padding-left, 52px)`,
+      `tab-size: ${tabSize}`,
+    ].join('; ')
+  }
+
   function getThemeName(theme: CodeBlockMonacoTheme | undefined, fallback: string) {
     if (typeof theme === 'string' && theme)
       return theme
@@ -306,9 +368,25 @@
       wrappingIndent: 'same',
       revealDebounceMs: 75,
     }
+    const padding = getCodePadding()
+    const configuredUnsafeCSS = typeof raw.unsafeCSS === 'string' ? raw.unsafeCSS : ''
+    const unsafeCSS = `[data-file], [data-diff] { --diffs-min-number-column-width-default: 4ch !important; }
+${configuredUnsafeCSS}`.trim()
     const finalOptions = {
       MAX_HEIGHT: maxHeight,
+      fontFamily: getCodeFontFamily(),
       fontSize: codeFontSize,
+      lineHeight: getCodeLineHeight(),
+      // stream-diffs expects a boolean (`disableLineNumbers: options.lineNumbers === false`);
+      // passing 'off'/'on' strings would always be truthy and defeat showLineNumbers={false}.
+      lineNumbers: showLineNumbers !== false,
+      padding,
+      unsafeCSS,
+      // The component owns the streaming fallback and file header. Initialize
+      // stream-diffs in final mode so the revealed surface has highlighting,
+      // line numbers, and the same geometry as the fallback.
+      disableFileHeader: true,
+      stream: false,
       themes: buildThemeList(),
     }
 
@@ -408,6 +486,7 @@
       }
 
       helpers = mod.useMonaco(syncRuntimeMonacoOptions())
+      await Promise.resolve(helpers.setTheme?.(requestedTheme))
       lastThemeRequest = requestedTheme
     })().finally(() => {
       ensureMonacoPromise = null
@@ -439,8 +518,9 @@
       ? Boolean(helpers.getDiffEditorView?.())
       : Boolean(helpers.getEditorView?.())
     const hasEditor = hasEditorView && hasRenderedEditorDom(desiredKind)
+    const desiredStreamMode = false
 
-    if (!hasEditor || editorKind !== desiredKind) {
+    if (!hasEditor || editorKind !== desiredKind || editorStreamMode !== desiredStreamMode) {
       await recreateEditor(desiredKind)
       if (!mounted || useFallback || !helpers)
         return
@@ -467,9 +547,72 @@
   function hasRenderedEditorDom(kind: 'single' | 'diff') {
     if (!editorHost)
       return false
-    return kind === 'diff'
-      ? Boolean(editorHost.querySelector('.monaco-diff-editor'))
-      : Boolean(editorHost.querySelector('.monaco-editor'))
+    if (kind === 'diff') {
+      return Boolean(editorHost.querySelector([
+        '.monaco-diff-editor',
+        'diffs-container',
+        '.stream-diffs-shell',
+        '[data-stream-diffs-state]',
+      ].join(',')))
+    }
+    return Boolean(editorHost.querySelector([
+      '.monaco-editor',
+      'diffs-container',
+      '.stream-diffs-shell',
+      '[data-stream-diffs-state]',
+    ].join(',')))
+  }
+
+  function getVisualEditorSurface() {
+    return editorHost?.querySelector<HTMLElement>([
+      '.monaco-diff-editor',
+      '.monaco-editor',
+      'diffs-container',
+      '[data-stream-diffs-state]',
+      '.stream-diffs-shell',
+    ].join(',')) ?? null
+  }
+
+  function isEditorVisuallyReady(kind: 'single' | 'diff', requireRevealed = false) {
+    if (!editorHost || !hasRenderedEditorDom(kind))
+      return false
+    if (requireRevealed) {
+      const hostStyle = window.getComputedStyle(editorHost)
+      if (hostStyle.display === 'none' || hostStyle.visibility === 'hidden' || Number.parseFloat(hostStyle.opacity || '1') <= 0.01)
+        return false
+    }
+    const surface = getVisualEditorSurface()
+    if (!surface)
+      return false
+    const rect = surface.getBoundingClientRect()
+    if (rect.width <= 0 || rect.height <= 0)
+      return false
+    const style = window.getComputedStyle(surface)
+    return style.display !== 'none'
+      && style.visibility !== 'hidden'
+      && Number.parseFloat(style.opacity || '1') > 0.01
+  }
+
+  async function prepareEditorHandoff(kind: 'single' | 'diff', creationId: number) {
+    await tick()
+    // Time-box the handoff: if visual readiness can't be confirmed (e.g. a
+    // hidden/zero-size container), reveal the editor anyway once its DOM is
+    // mounted so the block never strands in the pre-fallback forever.
+    const deadline = Date.now() + 1500
+    let attempt = 0
+    while (Date.now() < deadline && attempt < 30) {
+      attempt += 1
+      if (!mounted || !editorHost || lifecycleId !== creationId)
+        return false
+      syncEditorHostHeight(true)
+      await nextAnimationFrame()
+      if (isEditorVisuallyReady(kind)) {
+        syncEditorHostHeight(true)
+        await nextAnimationFrame()
+        return isEditorVisuallyReady(kind)
+      }
+    }
+    return !!(mounted && editorHost && lifecycleId === creationId && hasRenderedEditorDom(kind))
   }
 
   async function recreateEditor(kind: 'single' | 'diff') {
@@ -487,6 +630,7 @@
         lastLayoutWidth = null
         lastLayoutHeight = null
 
+        editorStreamMode = false
         if (kind === 'diff' && typeof helpers.createDiffEditor === 'function') {
           await helpers.createDiffEditor(editorHost, originalCode, updatedCode || code, monacoLanguage)
           await Promise.resolve(helpers.updateDiff?.(originalCode, updatedCode || code, monacoLanguage))
@@ -498,10 +642,17 @@
           editorKind = 'single'
         }
         applyEditorOptions()
-        editorReady = true
         bindEditorHeightSync()
-        scheduleEditorHeightSync()
         queueThemeSync()
+        if (!await prepareEditorHandoff(kind, creationId))
+          return
+        // Apply the reveal and fallback retirement in one Svelte render. The
+        // editor surface has already passed the hidden-host readiness check, so
+        // the browser never paints an intermediate frame with neither layer.
+        editorRevealed = true
+        fallbackRetired = true
+        editorReady = true
+        scheduleEditorHeightSync()
       }
       catch (error) {
         if (mounted) {
@@ -583,6 +734,9 @@
     }
     catch {}
     editorKind = null
+    editorStreamMode = null
+    editorRevealed = false
+    fallbackRetired = false
     editorReady = false
     lastLayoutWidth = null
     lastLayoutHeight = null
@@ -597,9 +751,25 @@
   function applyEditorOptions() {
     const target = diff ? helpers?.getDiffEditorView?.() : helpers?.getEditorView?.()
     target?.updateOptions?.({ fontSize: codeFontSize, automaticLayout: false })
+    syncEditorGeometryVars()
     scheduleEditorHeightSync()
   }
 
+  // Align the enhanced surface with the pre-fallback geometry (see vue3):
+  // stream-diffs/pierre honor these CSS variables on the editor host.
+  function syncEditorGeometryVars() {
+    if (!editorHost)
+      return
+    const tabSize = readPositiveMetric(mergedMonacoOptions.tabSize) ?? 4
+    editorHost.style.setProperty('--diffs-tab-size', String(tabSize))
+    const rawPadding = mergedMonacoOptions.padding
+    const hasConfiguredPadding = Boolean(rawPadding && typeof rawPadding === 'object')
+    if (hasConfiguredPadding)
+      editorHost.style.setProperty('--diffs-gap-block', `${getCodePadding().top}px`)
+    else
+      editorHost.style.removeProperty('--diffs-gap-block')
+  }
+
   function getMaxHeightValue() {
     const raw = resolvedMonacoOptions.MAX_HEIGHT
     if (raw === 'none' || raw == null)
@@ -735,8 +905,8 @@
     heightSyncDisposables = []
   }
 
-  function syncEditorHostHeight() {
-    if (!editorHost || !helpers || !editorReady || collapsed)
+  function syncEditorHostHeight(preparing = false) {
+    if (!editorHost || !helpers || (!editorReady && !preparing) || collapsed)
       return
 
     const maxHeight = getMaxHeightValue()
@@ -805,7 +975,7 @@
       const editor = helpers?.getEditorView?.()
       const height = Number(editor?.getContentHeight?.() || 0)
       if (height > 0)
-        return Math.ceil(height + 1)
+        return Math.ceil(height)
     }
     catch {}
     return null
@@ -960,11 +1130,17 @@
     {#if !collapsed}
       <div class:code-block-body--expanded={expanded} class="code-block-body">
         {#if !shouldDelayEditor}
-          <div bind:this={editorHost} class:is-hidden={showPreFallback} class="code-editor-container"></div>
-        {/if}
-        {#if showPreFallback}
-          <pre class="code-pre-fallback"><code class={preLanguageClass ? `language-${preLanguageClass}` : undefined}>{code}</code></pre>
+          <div bind:this={editorHost} class:is-hidden={!editorRevealed} class="code-editor-container"></div>
         {/if}
+        <div class:is-hidden={fallbackRetired} class="code-editor-fallback-surface">
+          <PreCodeNode
+            class="code-pre-fallback"
+            enhanceable={false}
+            node={preFallbackNode}
+            showLineNumbers={showLineNumbers !== false}
+            style={preFallbackStyle}
+          />
+        </div>
       </div>
     {/if}
 

package/dist/components/CodeBlockNode.svelte.d.ts

@@ -20,6 +20,7 @@ type Props = {
     showPreviewButton?: boolean;
     showCollapseButton?: boolean;
     showFontSizeButtons?: boolean;
+    showLineNumbers?: boolean;
     htmlPreviewAllowScripts?: boolean;
     htmlPreviewSandbox?: string | undefined;
 };

package/dist/components/PreCodeNode.svelte

@@ -4,9 +4,17 @@
 
   type Props = {
     node: SvelteRenderableNode
+    showLineNumbers?: boolean
+    enhanceable?: boolean
+    class?: string
+    style?: string
   };
   let {
-    node
+    node,
+    showLineNumbers = false,
+    enhanceable = true,
+    class: className = undefined,
+    style = undefined,
   }: Props = $props()
 
   let languageRaw = $derived(getString((node as any)?.language).trim())
@@ -14,8 +22,55 @@
   let code = $derived(getString((node as any)?.code))
   let diff = $derived(Boolean((node as any)?.diff))
   let loading = $derived((node as any)?.loading === true)
+  let displayCode = $derived(loading ? code : code.replace(/\r\n$|\n$|\r$/, ''))
+
+  // Non-diff line numbers, aligned with the Vue 3 PreCodeNode.
+  let showLineGutter = $derived(showLineNumbers === true && !diff)
+  let lineCount = $derived(countCodeLines(displayCode))
+  let lineNumbersText = $derived(buildLineNumbersText(lineCount))
+  let lineNumberLayoutStyle = $derived(
+    showLineGutter
+      ? `--markstream-pre-line-number-width: ${Math.max(4, String(lineCount).length)}ch; --markstream-pre-diff-line-number-width: ${Math.max(4, String(lineCount).length)}ch; --markstream-code-padding-left: calc(var(--markstream-pre-line-number-padding-left, 2ch) + var(--markstream-pre-line-number-width, 2ch) + var(--markstream-pre-line-number-padding-right, 1ch) + var(--markstream-pre-line-number-separator-width, 2px) + var(--markstream-pre-line-number-gap-to-code, 1ch));`
+      : '',
+  )
+  let mergedStyle = $derived([lineNumberLayoutStyle, style].filter(Boolean).join(' '))
+
+  function countCodeLines(codeStr: string) {
+    let count = 1
+    for (let index = 0; index < codeStr.length; index++) {
+      if (codeStr[index] === '\n') {
+        count++
+      }
+      else if (codeStr[index] === '\r') {
+        count++
+        if (codeStr[index + 1] === '\n')
+          index++
+      }
+    }
+    return codeStr.length ? count : 1
+  }
+
+  function buildLineNumbersText(count: number) {
+    let out = ''
+    for (let line = 1; line <= count; line++)
+      out += `${out ? '\n' : ''}${line}`
+    return out
+  }
 </script>
 
 {#if !(loading && !code.trim())}
-  <pre data-markstream-code-block="1" data-markstream-language={languageRaw || undefined} data-markstream-loading={loading ? '1' : undefined} data-markstream-diff={diff ? '1' : undefined} data-markstream-original={diff ? encodeDataPayload(getString((node as any)?.originalCode)) : undefined} data-markstream-updated={diff ? encodeDataPayload(getString((node as any)?.updatedCode)) : undefined} aria-busy={loading ? 'true' : undefined}><code class={language ? `language-${language}` : undefined}>{code}</code></pre>
+  <pre
+    data-markstream-code-block={enhanceable ? '1' : undefined}
+    data-markstream-language={languageRaw || undefined}
+    data-markstream-loading={loading ? '1' : undefined}
+    data-markstream-diff={diff ? '1' : undefined}
+    data-markstream-original={diff ? encodeDataPayload(getString((node as any)?.originalCode)) : undefined}
+    data-markstream-updated={diff ? encodeDataPayload(getString((node as any)?.updatedCode)) : undefined}
+    data-markstream-pre="1"
+    data-markstream-line-numbers={showLineGutter ? '1' : undefined}
+    aria-busy={loading ? 'true' : undefined}
+    class:markstream-pre--line-numbers={showLineGutter}
+    class={[language ? `language-${language}` : '', className].filter(Boolean).join(' ') || undefined}
+    style={mergedStyle || undefined}
+  >{#if showLineGutter}<span class="markstream-pre__line-numbers" aria-hidden="true"><span class="markstream-pre__line-numbers-text">{lineNumbersText}</span></span>{/if}<code class="markstream-pre__code" translate="no">{displayCode}</code></pre>
 {/if}

package/dist/components/PreCodeNode.svelte.d.ts

@@ -1,6 +1,10 @@
 import type { SvelteRenderableNode } from './shared/node-helpers';
 type Props = {
     node: SvelteRenderableNode;
+    showLineNumbers?: boolean;
+    enhanceable?: boolean;
+    class?: string;
+    style?: string;
 };
 declare const PreCodeNode: import("svelte").Component<Props, {}, "">;
 type PreCodeNode = ReturnType<typeof PreCodeNode>;

package/dist/components/shared/node-helpers.d.ts

@@ -27,6 +27,7 @@ export type NodeRendererCodeBlockProps = Partial<{
     showPreviewButton: boolean;
     showCollapseButton: boolean;
     showFontSizeButtons: boolean;
+    showLineNumbers: boolean;
     htmlPreviewAllowScripts: boolean;
     htmlPreviewSandbox: string;
 }> & Record<string, unknown>;