markstream-angular 0.0.10 → 0.1.0-beta.3

package/dist/index.css

@@ -992,8 +992,7 @@ body > div[id^="dmermaid-"] {
   background: #0b1220;
 }
 
-.markstream-angular .markstream-angular-enhanced-block__body--code .monaco-editor,
-.markstream-angular .markstream-angular-enhanced-block__body--code .monaco-diff-editor {
+.markstream-angular .markstream-angular-enhanced-block__body--code .stream-diffs-shell {
   min-height: inherit;
 }
 
@@ -1137,19 +1136,15 @@ body > div[id^="dmermaid-"] {
   box-shadow: 0 22px 44px -30px rgba(2, 6, 23, 0.95);
 }
 
-.markstream-angular .code-block-container.is-plain-text .monaco-editor,
-.markstream-angular .code-block-container.is-plain-text .monaco-editor .monaco-editor-background,
-.markstream-angular .code-block-container.is-plain-text .monaco-editor .margin,
-.markstream-angular .code-block-container.is-plain-text .monaco-editor .lines-content {
+.markstream-angular .code-block-container.is-plain-text .stream-diffs-shell,
+.markstream-angular .code-block-container.is-plain-text .stream-diffs-shell diffs-container,
+.markstream-angular .code-block-container.is-plain-text .stream-diffs-shell [data-stream-diffs-state] {
   background: var(--vscode-editor-background, var(--markstream-code-fallback-bg)) !important;
 }
 
-.markstream-angular .code-block-container.is-plain-text .monaco-editor,
-.markstream-angular .code-block-container.is-plain-text .monaco-editor .margin,
-.markstream-angular .code-block-container.is-plain-text .monaco-editor .view-lines,
-.markstream-angular .code-block-container.is-plain-text .monaco-editor .view-line,
-.markstream-angular .code-block-container.is-plain-text .monaco-editor .view-line span,
-.markstream-angular .code-block-container.is-plain-text .monaco-editor .line-numbers {
+.markstream-angular .code-block-container.is-plain-text .stream-diffs-shell,
+.markstream-angular .code-block-container.is-plain-text .stream-diffs-shell diffs-container,
+.markstream-angular .code-block-container.is-plain-text .stream-diffs-shell [data-stream-diffs-state] {
   color: var(--vscode-editor-foreground, var(--markstream-code-fallback-fg)) !important;
 }
 

package/dist/index.d.ts

@@ -14,16 +14,13 @@ declare function getCustomNodeComponents(customId?: string): CustomComponentMap;
 declare function removeCustomComponents(id: string): void;
 declare function clearGlobalCustomComponents(): void;
 
-interface CodeBlockMonacoThemeObject {
-    name: string;
-    base?: string;
-    inherit?: boolean;
-    colors?: Record<string, string>;
-    rules?: Array<Record<string, unknown>>;
-    [key: string]: unknown;
-}
-type CodeBlockMonacoTheme = string | CodeBlockMonacoThemeObject;
-type CodeBlockMonacoLanguage = string | ((...args: unknown[]) => unknown);
+interface CodeBlockThemePair {
+    dark: string;
+    light: string;
+}
+type CodeBlockTheme = string;
+type CodeBlockThemeProp = CodeBlockTheme | CodeBlockThemePair;
+type CodeBlockThemes = readonly [dark: CodeBlockTheme, light: CodeBlockTheme];
 interface CodeBlockDiffHideUnchangedRegionsOptions {
     enabled?: boolean;
     contextLineCount?: number;
@@ -31,53 +28,57 @@ interface CodeBlockDiffHideUnchangedRegionsOptions {
     revealLineCount?: number;
 }
 type CodeBlockDiffHideUnchangedRegions = boolean | CodeBlockDiffHideUnchangedRegionsOptions;
-type CodeBlockDiffLineStyle = 'background' | 'bar';
-type CodeBlockDiffAppearance = 'auto' | 'light' | 'dark';
-type CodeBlockDiffUnchangedRegionStyle = 'line-info' | 'line-info-basic' | 'metadata' | 'simple';
-type CodeBlockDiffHunkActionKind = 'revert' | 'stage';
-type CodeBlockDiffHunkSide = 'upper' | 'lower';
-interface CodeBlockDiffHunkActionContext {
-    action: CodeBlockDiffHunkActionKind;
-    side: CodeBlockDiffHunkSide;
-    lineChange: unknown;
-    originalModel: unknown;
-    modifiedModel: unknown;
-}
-interface CodeBlockMonacoOptions {
-    MAX_HEIGHT?: number | string;
+interface CodeBlockOptions {
     fontSize?: number;
     lineHeight?: number;
     fontFamily?: string;
+    maxHeight?: number;
+    padding?: number;
     tabSize?: number;
-    readOnly?: boolean;
-    wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded' | string;
-    wrappingIndent?: 'none' | 'same' | 'indent' | 'deepIndent' | string;
-    theme?: string;
-    themes?: CodeBlockMonacoTheme[];
-    languages?: CodeBlockMonacoLanguage[];
-    renderSideBySide?: boolean;
-    useInlineViewWhenSpaceIsLimited?: boolean;
-    enableSplitViewResizing?: boolean;
-    ignoreTrimWhitespace?: boolean;
-    maxComputationTime?: number;
-    diffAlgorithm?: string;
-    renderIndicators?: boolean;
-    originalEditable?: boolean;
-    revealDebounceMs?: number;
-    revealStrategy?: 'bottom' | 'centerIfOutside' | 'center';
-    revealBatchOnIdleMs?: number;
-    updateThrottleMs?: number;
-    diffUpdateThrottleMs?: number;
-    diffAutoScroll?: boolean;
-    diffHideUnchangedRegions?: CodeBlockDiffHideUnchangedRegions;
-    diffLineStyle?: CodeBlockDiffLineStyle;
-    diffAppearance?: CodeBlockDiffAppearance;
-    diffUnchangedRegionStyle?: CodeBlockDiffUnchangedRegionStyle;
-    diffHunkActionsOnHover?: boolean;
-    diffHunkHoverHideDelayMs?: number;
-    onDiffHunkAction?: (context: CodeBlockDiffHunkActionContext) => void | boolean | Promise<void | boolean>;
-    scrollbar?: Record<string, unknown>;
-    [key: string]: unknown;
+    disableLineNumbers?: boolean;
+    overflow?: 'scroll' | 'wrap';
+    disableVirtualizationBuffers?: boolean;
+    preferredHighlighter?: 'shiki-js' | 'shiki-wasm';
+    useCSSClasses?: boolean;
+    useTokenTransformer?: boolean;
+    tokenizeMaxLineLength?: number;
+    tokenizeMaxLength?: number;
+    unsafeCSS?: string;
+    diffStyle?: 'unified' | 'split';
+    diffIndicators?: 'classic' | 'bars' | 'none';
+    disableBackground?: boolean;
+    hunkSeparators?: 'simple' | 'metadata' | 'line-info' | 'line-info-basic';
+    expandUnchanged?: boolean;
+    collapsedContextThreshold?: number;
+    lineDiffType?: 'word-alt' | 'word' | 'char' | 'none';
+    maxLineDiffLength?: number;
+    expansionLineCount?: number;
+    parseDiffOptions?: Record<string, unknown>;
+    lineHoverHighlight?: 'disabled' | 'both' | 'number' | 'line';
+    enableTokenInteractionsOnWhitespace?: boolean;
+    enableGutterUtility?: boolean;
+    enableLineSelection?: boolean;
+    controlledSelection?: boolean;
+    onGutterUtilityClick?: (...args: any[]) => unknown;
+    onLineClick?: (...args: any[]) => unknown;
+    onLineNumberClick?: (...args: any[]) => unknown;
+    onLineEnter?: (...args: any[]) => unknown;
+    onLineLeave?: (...args: any[]) => unknown;
+    onTokenClick?: (...args: any[]) => unknown;
+    onTokenEnter?: (...args: any[]) => unknown;
+    onTokenLeave?: (...args: any[]) => unknown;
+    onLineSelected?: (...args: any[]) => unknown;
+    onLineSelectionStart?: (...args: any[]) => unknown;
+    onLineSelectionChange?: (...args: any[]) => unknown;
+    onLineSelectionEnd?: (...args: any[]) => unknown;
+    getLineIndex?: (...args: any[]) => unknown;
+    renderAnnotation?: (...args: any[]) => unknown;
+    renderGutterUtility?: (...args: any[]) => unknown;
+    onPostRender?: (...args: any[]) => unknown;
+    mergeConflict?: boolean;
+    lineAnnotations?: unknown[];
+    onController?: (controller: any) => void;
+    workerManager?: unknown;
 }
 
 type AngularRenderableNode = (ParsedNode | BaseNode) & Record<string, unknown>;
@@ -89,10 +90,10 @@ interface CodeBlockPreviewPayload {
 }
 type NodeRendererCodeBlockProps = Partial<{
     stream: boolean;
-    darkTheme: CodeBlockMonacoTheme;
-    lightTheme: CodeBlockMonacoTheme;
-    themes: CodeBlockMonacoTheme[];
-    monacoOptions: CodeBlockMonacoOptions;
+    theme: CodeBlockThemeProp;
+    darkTheme: CodeBlockTheme;
+    lightTheme: CodeBlockTheme;
+    themes: CodeBlockThemes;
     minWidth: string | number;
     maxWidth: string | number;
     isShowPreview: boolean;
@@ -103,8 +104,10 @@ type NodeRendererCodeBlockProps = Partial<{
     showPreviewButton: boolean;
     showCollapseButton: boolean;
     showFontSizeButtons: boolean;
+    showLineNumbers: boolean;
     htmlPreviewAllowScripts: boolean;
     htmlPreviewSandbox: string;
+    codeBlockOptions?: never;
 }> & Record<string, unknown>;
 type NodeRendererMermaidProps = Partial<{
     maxHeight: string | null;
@@ -160,19 +163,19 @@ interface NodeRendererProps {
     htmlPolicy?: HtmlPolicy;
     viewportPriority?: boolean;
     codeBlockStream?: boolean;
-    codeBlockDarkTheme?: CodeBlockMonacoTheme;
-    codeBlockLightTheme?: CodeBlockMonacoTheme;
-    codeBlockMonacoOptions?: CodeBlockMonacoOptions;
+    codeBlockDarkTheme?: CodeBlockTheme;
+    codeBlockLightTheme?: CodeBlockTheme;
     renderCodeBlocksAsPre?: boolean;
     codeBlockMinWidth?: string | number;
     codeBlockMaxWidth?: string | number;
+    codeBlockOptions?: CodeBlockOptions;
     codeBlockProps?: NodeRendererCodeBlockProps;
     mermaidProps?: NodeRendererMermaidProps;
     d2Props?: NodeRendererD2Props;
     infographicProps?: NodeRendererInfographicProps;
     customComponents?: CustomComponentMap;
     showTooltips?: boolean;
-    themes?: CodeBlockMonacoTheme[];
+    themes?: CodeBlockThemes;
     isDark?: boolean;
     customId?: string;
     indexKey?: number | string;
@@ -209,16 +212,16 @@ interface AngularRenderContext {
     customHtmlTags?: readonly string[];
     parseOptions?: ParseOptions;
     customMarkdownIt?: (md: MarkdownIt) => MarkdownIt;
+    codeBlockOptions?: CodeBlockOptions;
     codeBlockProps?: NodeRendererCodeBlockProps;
     mermaidProps?: NodeRendererMermaidProps;
     d2Props?: NodeRendererD2Props;
     infographicProps?: NodeRendererInfographicProps;
     customComponents?: CustomComponentMap;
     codeBlockThemes?: {
-        themes?: CodeBlockMonacoTheme[];
-        darkTheme?: CodeBlockMonacoTheme;
-        lightTheme?: CodeBlockMonacoTheme;
-        monacoOptions?: CodeBlockMonacoOptions;
+        themes?: CodeBlockThemes;
+        darkTheme?: CodeBlockTheme;
+        lightTheme?: CodeBlockTheme;
         minWidth?: string | number;
         maxWidth?: string | number;
     };
@@ -264,6 +267,7 @@ declare class CodeBlockNodeComponent implements AfterViewInit, OnChanges, OnDest
     private editorHost?;
     node: AngularRenderableNode;
     context?: AngularRenderContext;
+    codeBlockOptions?: CodeBlockOptions;
     props?: Record<string, any>;
     useFallback: boolean;
     copied: boolean;
@@ -274,7 +278,7 @@ declare class CodeBlockNodeComponent implements AfterViewInit, OnChanges, OnDest
     defaultFontSize: number;
     fontSize: number;
     private helpers;
-    private runtimeMonacoOptions;
+    private runtimeOptions;
     private createPromise;
     private syncPromise;
     private editorKind;
@@ -284,14 +288,16 @@ declare class CodeBlockNodeComponent implements AfterViewInit, OnChanges, OnDest
     private destroyed;
     private copyTimer;
     private deferredHeightSyncRaf;
+    private lastCodeBlockOptions?;
+    private lastRuntimeHostKey;
     get t(): (key: string) => string;
     get mergedProps(): {
         [x: string]: any;
         stream?: boolean;
-        darkTheme?: CodeBlockMonacoTheme;
-        lightTheme?: CodeBlockMonacoTheme;
-        themes?: CodeBlockMonacoTheme[];
-        monacoOptions?: markstream_angular.CodeBlockMonacoOptions;
+        theme?: markstream_angular.CodeBlockThemeProp;
+        darkTheme?: CodeBlockTheme;
+        lightTheme?: CodeBlockTheme;
+        themes?: markstream_angular.CodeBlockThemes;
         minWidth?: string | number;
         maxWidth?: string | number;
         isShowPreview?: boolean;
@@ -302,51 +308,20 @@ declare class CodeBlockNodeComponent implements AfterViewInit, OnChanges, OnDest
         showPreviewButton?: boolean;
         showCollapseButton?: boolean;
         showFontSizeButtons?: boolean;
+        showLineNumbers?: boolean;
         htmlPreviewAllowScripts?: boolean;
         htmlPreviewSandbox?: string;
+        codeBlockOptions?: never;
     };
     get resolvedLoading(): boolean;
     get resolvedStream(): boolean;
     get resolvedIsDark(): boolean;
-    get resolvedDarkTheme(): CodeBlockMonacoTheme;
-    get resolvedLightTheme(): CodeBlockMonacoTheme;
-    get resolvedThemes(): CodeBlockMonacoTheme[];
-    get resolvedMonacoOptions(): {
-        [x: string]: unknown;
-        MAX_HEIGHT?: number | string;
-        fontSize?: number;
-        lineHeight?: number;
-        fontFamily?: string;
-        tabSize?: number;
-        readOnly?: boolean;
-        wordWrap?: "off" | "on" | "wordWrapColumn" | "bounded" | string;
-        wrappingIndent?: "none" | "same" | "indent" | "deepIndent" | string;
-        theme?: string;
-        themes?: CodeBlockMonacoTheme[];
-        languages?: markstream_angular.CodeBlockMonacoLanguage[];
-        renderSideBySide?: boolean;
-        useInlineViewWhenSpaceIsLimited?: boolean;
-        enableSplitViewResizing?: boolean;
-        ignoreTrimWhitespace?: boolean;
-        maxComputationTime?: number;
-        diffAlgorithm?: string;
-        renderIndicators?: boolean;
-        originalEditable?: boolean;
-        revealDebounceMs?: number;
-        revealStrategy?: "bottom" | "centerIfOutside" | "center";
-        revealBatchOnIdleMs?: number;
-        updateThrottleMs?: number;
-        diffUpdateThrottleMs?: number;
-        diffAutoScroll?: boolean;
-        diffHideUnchangedRegions?: markstream_angular.CodeBlockDiffHideUnchangedRegions;
-        diffLineStyle?: markstream_angular.CodeBlockDiffLineStyle;
-        diffAppearance?: markstream_angular.CodeBlockDiffAppearance;
-        diffUnchangedRegionStyle?: markstream_angular.CodeBlockDiffUnchangedRegionStyle;
-        diffHunkActionsOnHover?: boolean;
-        diffHunkHoverHideDelayMs?: number;
-        onDiffHunkAction?: (context: markstream_angular.CodeBlockDiffHunkActionContext) => void | boolean | Promise<void | boolean>;
-        scrollbar?: Record<string, unknown>;
-    };
+    get resolvedDarkTheme(): string;
+    get resolvedLightTheme(): string;
+    get resolvedThemes(): [dark: string, light: string];
+    get resolvedCodeBlockOptions(): CodeBlockOptions;
+    get resolvedShowLineNumbers(): boolean;
+    get resolvedPreWhiteSpace(): 'pre' | 'pre-wrap';
     get resolvedEnableFontSizeControl(): boolean;
     get resolvedShowHeader(): boolean;
     get resolvedShowCopyButton(): boolean;
@@ -358,7 +333,7 @@ declare class CodeBlockNodeComponent implements AfterViewInit, OnChanges, OnDest
     get resolvedIsShowPreview(): boolean;
     get rawLanguage(): string;
     get canonicalLanguage(): string;
-    get monacoLanguage(): string;
+    get language(): string;
     get isPlainTextLanguage(): boolean;
     get displayLanguage(): string;
     get languageIconDataUrl(): string;
@@ -391,6 +366,7 @@ declare class CodeBlockNodeComponent implements AfterViewInit, OnChanges, OnDest
     private applyInitialFontSize;
     private syncEditorState;
     private ensureHelpers;
+    private buildRuntimeOptions;
     private recreateEditor;
     private syncEditorGeometryVars;
     private updateEditor;
@@ -408,10 +384,11 @@ declare class CodeBlockNodeComponent implements AfterViewInit, OnChanges, OnDest
     private cancelDeferredHeightSync;
     private scheduleDeferredHeightSync;
     private cleanupEditor;
+    private disposeRuntimeHelpers;
     private resolveCssSize;
     private copyUsingTextarea;
     static ɵfac: i0.ɵɵFactoryDeclaration<CodeBlockNodeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CodeBlockNodeComponent, "markstream-angular-code-block-node", never, { "node": { "alias": "node"; "required": true; }; "context": { "alias": "context"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CodeBlockNodeComponent, "markstream-angular-code-block-node", never, { "node": { "alias": "node"; "required": true; }; "context": { "alias": "context"; "required": false; }; "codeBlockOptions": { "alias": "codeBlockOptions"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class HtmlPreviewFrameComponent {
@@ -963,17 +940,17 @@ declare class NodeRendererComponent implements NodeRendererProps, OnChanges, OnI
     codeBlockStream: boolean;
     codeBlockDarkTheme?: NodeRendererProps['codeBlockDarkTheme'];
     codeBlockLightTheme?: NodeRendererProps['codeBlockLightTheme'];
-    codeBlockMonacoOptions?: NodeRendererProps['codeBlockMonacoOptions'];
     renderCodeBlocksAsPre: boolean;
     codeBlockMinWidth?: string | number;
     codeBlockMaxWidth?: string | number;
+    codeBlockOptions?: NodeRendererProps['codeBlockOptions'];
     codeBlockProps?: NodeRendererProps['codeBlockProps'];
     mermaidProps?: NodeRendererProps['mermaidProps'];
     d2Props?: NodeRendererProps['d2Props'];
     infographicProps?: NodeRendererProps['infographicProps'];
     customComponents?: NodeRendererProps['customComponents'];
     showTooltips: boolean;
-    themes?: string[];
+    themes?: NodeRendererProps['themes'];
     isDark: boolean;
     customId?: string;
     indexKey?: number | string;
@@ -1094,7 +1071,7 @@ declare class NodeRendererComponent implements NodeRendererProps, OnChanges, OnI
     private updateTypewriterCursorPosition;
     private updateTypewriterCursorState;
     static ɵfac: i0.ɵɵFactoryDeclaration<NodeRendererComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NodeRendererComponent, "markstream-angular", never, { "content": { "alias": "content"; "required": false; }; "nodes": { "alias": "nodes"; "required": false; }; "final": { "alias": "final"; "required": false; }; "parseOptions": { "alias": "parseOptions"; "required": false; }; "customMarkdownIt": { "alias": "customMarkdownIt"; "required": false; }; "debugPerformance": { "alias": "debugPerformance"; "required": false; }; "customHtmlTags": { "alias": "customHtmlTags"; "required": false; }; "htmlPolicy": { "alias": "htmlPolicy"; "required": false; }; "viewportPriority": { "alias": "viewportPriority"; "required": false; }; "codeBlockStream": { "alias": "codeBlockStream"; "required": false; }; "codeBlockDarkTheme": { "alias": "codeBlockDarkTheme"; "required": false; }; "codeBlockLightTheme": { "alias": "codeBlockLightTheme"; "required": false; }; "codeBlockMonacoOptions": { "alias": "codeBlockMonacoOptions"; "required": false; }; "renderCodeBlocksAsPre": { "alias": "renderCodeBlocksAsPre"; "required": false; }; "codeBlockMinWidth": { "alias": "codeBlockMinWidth"; "required": false; }; "codeBlockMaxWidth": { "alias": "codeBlockMaxWidth"; "required": false; }; "codeBlockProps": { "alias": "codeBlockProps"; "required": false; }; "mermaidProps": { "alias": "mermaidProps"; "required": false; }; "d2Props": { "alias": "d2Props"; "required": false; }; "infographicProps": { "alias": "infographicProps"; "required": false; }; "customComponents": { "alias": "customComponents"; "required": false; }; "showTooltips": { "alias": "showTooltips"; "required": false; }; "themes": { "alias": "themes"; "required": false; }; "isDark": { "alias": "isDark"; "required": false; }; "customId": { "alias": "customId"; "required": false; }; "indexKey": { "alias": "indexKey"; "required": false; }; "typewriter": { "alias": "typewriter"; "required": false; }; "fade": { "alias": "fade"; "required": false; }; "batchRendering": { "alias": "batchRendering"; "required": false; }; "initialRenderBatchSize": { "alias": "initialRenderBatchSize"; "required": false; }; "renderBatchSize": { "alias": "renderBatchSize"; "required": false; }; "renderBatchDelay": { "alias": "renderBatchDelay"; "required": false; }; "renderBatchBudgetMs": { "alias": "renderBatchBudgetMs"; "required": false; }; "renderBatchIdleTimeoutMs": { "alias": "renderBatchIdleTimeoutMs"; "required": false; }; "deferNodesUntilVisible": { "alias": "deferNodesUntilVisible"; "required": false; }; "maxLiveNodes": { "alias": "maxLiveNodes"; "required": false; }; "liveNodeBuffer": { "alias": "liveNodeBuffer"; "required": false; }; "allowHtml": { "alias": "allowHtml"; "required": false; }; "smoothStreaming": { "alias": "smoothStreaming"; "required": false; }; "smoothStreamingOptions": { "alias": "smoothStreamingOptions"; "required": false; }; }, { "copy": "copy"; "handleArtifactClick": "handleArtifactClick"; "click": "click"; "mouseover": "mouseover"; "mouseout": "mouseout"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NodeRendererComponent, "markstream-angular", never, { "content": { "alias": "content"; "required": false; }; "nodes": { "alias": "nodes"; "required": false; }; "final": { "alias": "final"; "required": false; }; "parseOptions": { "alias": "parseOptions"; "required": false; }; "customMarkdownIt": { "alias": "customMarkdownIt"; "required": false; }; "debugPerformance": { "alias": "debugPerformance"; "required": false; }; "customHtmlTags": { "alias": "customHtmlTags"; "required": false; }; "htmlPolicy": { "alias": "htmlPolicy"; "required": false; }; "viewportPriority": { "alias": "viewportPriority"; "required": false; }; "codeBlockStream": { "alias": "codeBlockStream"; "required": false; }; "codeBlockDarkTheme": { "alias": "codeBlockDarkTheme"; "required": false; }; "codeBlockLightTheme": { "alias": "codeBlockLightTheme"; "required": false; }; "renderCodeBlocksAsPre": { "alias": "renderCodeBlocksAsPre"; "required": false; }; "codeBlockMinWidth": { "alias": "codeBlockMinWidth"; "required": false; }; "codeBlockMaxWidth": { "alias": "codeBlockMaxWidth"; "required": false; }; "codeBlockOptions": { "alias": "codeBlockOptions"; "required": false; }; "codeBlockProps": { "alias": "codeBlockProps"; "required": false; }; "mermaidProps": { "alias": "mermaidProps"; "required": false; }; "d2Props": { "alias": "d2Props"; "required": false; }; "infographicProps": { "alias": "infographicProps"; "required": false; }; "customComponents": { "alias": "customComponents"; "required": false; }; "showTooltips": { "alias": "showTooltips"; "required": false; }; "themes": { "alias": "themes"; "required": false; }; "isDark": { "alias": "isDark"; "required": false; }; "customId": { "alias": "customId"; "required": false; }; "indexKey": { "alias": "indexKey"; "required": false; }; "typewriter": { "alias": "typewriter"; "required": false; }; "fade": { "alias": "fade"; "required": false; }; "batchRendering": { "alias": "batchRendering"; "required": false; }; "initialRenderBatchSize": { "alias": "initialRenderBatchSize"; "required": false; }; "renderBatchSize": { "alias": "renderBatchSize"; "required": false; }; "renderBatchDelay": { "alias": "renderBatchDelay"; "required": false; }; "renderBatchBudgetMs": { "alias": "renderBatchBudgetMs"; "required": false; }; "renderBatchIdleTimeoutMs": { "alias": "renderBatchIdleTimeoutMs"; "required": false; }; "deferNodesUntilVisible": { "alias": "deferNodesUntilVisible"; "required": false; }; "maxLiveNodes": { "alias": "maxLiveNodes"; "required": false; }; "liveNodeBuffer": { "alias": "liveNodeBuffer"; "required": false; }; "allowHtml": { "alias": "allowHtml"; "required": false; }; "smoothStreaming": { "alias": "smoothStreaming"; "required": false; }; "smoothStreamingOptions": { "alias": "smoothStreamingOptions"; "required": false; }; }, { "copy": "copy"; "handleArtifactClick": "handleArtifactClick"; "click": "click"; "mouseover": "mouseover"; "mouseout": "mouseout"; }, never, never, true, never>;
 }
 
 type ParagraphSegment = {
@@ -1125,6 +1102,7 @@ declare class ParagraphNodeComponent implements OnChanges {
 declare class PreCodeNodeComponent {
     node: AngularRenderableNode;
     showLineNumbers: boolean;
+    whiteSpace: 'pre' | 'pre-wrap' | undefined;
     private cachedCode;
     private cachedCount;
     private textCount;
@@ -1143,7 +1121,7 @@ declare class PreCodeNodeComponent {
     get lineNumbersText(): string;
     get lineNumberLayoutStyle(): Record<string, string> | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<PreCodeNodeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PreCodeNodeComponent, "markstream-angular-pre-code-node", never, { "node": { "alias": "node"; "required": true; }; "showLineNumbers": { "alias": "showLineNumbers"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PreCodeNodeComponent, "markstream-angular-pre-code-node", never, { "node": { "alias": "node"; "required": true; }; "showLineNumbers": { "alias": "showLineNumbers"; "required": false; }; "whiteSpace": { "alias": "whiteSpace"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class ReferenceNodeComponent {
@@ -1290,11 +1268,14 @@ interface EnhanceRenderedHtmlOptions {
     final?: boolean;
     isDark?: boolean;
     renderCodeBlocksAsPre?: boolean;
-    monacoOptions?: CodeBlockMonacoOptions;
     d2ThemeId?: number | null;
     d2DarkThemeId?: number | null;
     showTooltips?: boolean;
+    codeBlockOptions?: CodeBlockOptions;
     codeBlockProps?: NodeRendererCodeBlockProps;
+    codeBlockDarkTheme?: CodeBlockTheme;
+    codeBlockLightTheme?: CodeBlockTheme;
+    themes?: CodeBlockThemes;
     mermaidProps?: NodeRendererMermaidProps;
     d2Props?: NodeRendererD2Props;
     infographicProps?: NodeRendererInfographicProps;
@@ -1439,7 +1420,7 @@ declare class SmoothMarkdownStreamService implements OnDestroy {
 
 type LanguageIconResolver = (lang: string) => string | undefined | null;
 declare function normalizeLanguageIdentifier(lang?: string | null): string;
-declare function resolveMonacoLanguageId(lang?: string | null): string;
+declare function resolveLanguageId(lang?: string | null): string;
 declare function setLanguageIconResolver(resolver?: LanguageIconResolver | null): void;
 declare function getLanguageIcon(lang: string): string;
 declare const languageMap: Record<string, string>;
@@ -1531,5 +1512,5 @@ declare function canParseOffthread(code: string, theme: Theme, timeout?: number)
 declare function findPrefixOffthread(code: string, theme: Theme, timeout?: number): Promise<string>;
 declare function terminateWorker(): void;
 
-export { AdmonitionNodeComponent as AdmonitionNode, CodeBlockNodeComponent as AngularCodeBlockNode, BlockquoteNodeComponent as BlockquoteNode, CheckboxNodeComponent as CheckboxNode, CodeBlockNodeComponent as CodeBlockNode, D2BlockNodeComponent as D2BlockNode, DefinitionListNodeComponent as DefinitionListNode, EmojiNodeComponent as EmojiNode, EmphasisNodeComponent as EmphasisNode, FallbackComponent, FootnoteAnchorNodeComponent as FootnoteAnchorNode, FootnoteNodeComponent as FootnoteNode, FootnoteReferenceNodeComponent as FootnoteReferenceNode, HardBreakNodeComponent as HardBreakNode, HeadingNodeComponent as HeadingNode, HighlightNodeComponent as HighlightNode, HtmlBlockNodeComponent as HtmlBlockNode, HtmlInlineNodeComponent as HtmlInlineNode, HtmlPreviewFrameComponent as HtmlPreviewFrame, ImageNodeComponent as ImageNode, InfographicBlockNodeComponent as InfographicBlockNode, InlineCodeNodeComponent as InlineCodeNode, InsertNodeComponent as InsertNode, LinkNodeComponent as LinkNode, ListItemNodeComponent as ListItemNode, ListNodeComponent as ListNode, MARKSTREAM_SMOOTH_STREAMING_SCOPE, MERMAID_DISABLED_CODE, MERMAID_WORKER_BUSY_CODE, CodeBlockNodeComponent as MarkdownCodeBlockNode, NodeRendererComponent as MarkdownRenderComponent, NodeRendererComponent as MarkstreamAngularComponent, MathBlockNodeComponent as MathBlockNode, MathInlineNodeComponent as MathInlineNode, MermaidBlockNodeComponent as MermaidBlockNode, NestedRendererComponent as NestedRenderer, NodeRendererComponent as NodeRenderer, ParagraphNodeComponent as ParagraphNode, PreCodeNodeComponent as PreCodeNode, ReferenceNodeComponent as ReferenceNode, SafeAttrsDirective, SmoothMarkdownStreamService, StrikethroughNodeComponent as StrikethroughNode, StrongNodeComponent as StrongNode, SubscriptNodeComponent as SubscriptNode, SuperscriptNodeComponent as SuperscriptNode, TableNodeComponent as TableNode, TextNodeComponent as TextNode, ThematicBreakNodeComponent as ThematicBreakNode, VmrContainerNodeComponent as VmrContainerNode, WORKER_BUSY_CODE, buildKaTeXCDNWorkerSource, buildMermaidCDNWorkerSource, buildRenderContext, canParseOffthread, clearGlobalCustomComponents, clearKaTeXWorker, clearMermaidWorker, createKaTeXWorkerFromCDN, createMermaidWorkerFromCDN, disableD2, disableKatex, disableMermaid, disposeRenderedHtmlEnhancements, enableD2, enableKatex, enableMermaid, enhanceRenderedHtml, findPrefixOffthread, getCustomComponentsRevision, getCustomNodeComponents, getKaTeXBackpressureDefaults, getKaTeXWorkerLoad, getKatex, getLanguageIcon, getMermaid, getMermaidWorkerLoad, isD2Enabled, isKaTeXWorkerBusy, isKatexEnabled, isMermaidEnabled, languageMap, normalizeLanguageIdentifier, parseNestedMarkdownToNodes, removeCustomComponents, renderKaTeXInWorker, renderKaTeXWithBackpressure, renderMarkdownNodeToHtml, renderMarkdownNodesToHtml, renderMarkdownToHtml, renderNestedMarkdownToHtml, resolveMonacoLanguageId, resolveParsedNodes, sanitizeHtmlContent, setCustomComponents, setD2Loader, setDefaultI18nMap, setKaTeXBackpressureDefaults, setKaTeXCache, setKaTeXWorker, setKaTeXWorkerDebug, setKaTeXWorkerMaxConcurrency, setKatexLoader, setLanguageIconResolver, setMermaidLoader, setMermaidWorker, setMermaidWorkerClientDebug, setMermaidWorkerMaxConcurrency, subscribeCustomComponents, terminateWorker, useSafeI18n, waitForKaTeXWorkerSlot };
-export type { AngularRenderContext, AngularRenderableNode, BackpressureOptions, CodeBlockDiffAppearance, CodeBlockDiffHideUnchangedRegions, CodeBlockDiffHideUnchangedRegionsOptions, CodeBlockDiffHunkActionContext, CodeBlockDiffHunkActionKind, CodeBlockDiffHunkSide, CodeBlockDiffLineStyle, CodeBlockDiffUnchangedRegionStyle, CodeBlockMonacoLanguage, CodeBlockMonacoOptions, CodeBlockMonacoTheme, CodeBlockMonacoThemeObject, CodeBlockPreviewPayload, CustomComponentMap, D2Loader, EnhanceRenderedHtmlOptions, KaTeXCDNWorkerHandle, KaTeXCDNWorkerMode, KaTeXCDNWorkerOptions, KatexLoader, LanguageIconResolver, NodeRendererProps as MarkstreamAngularComponentProps, MarkstreamAngularRenderOptions, MermaidCDNWorkerHandle, MermaidCDNWorkerMode, MermaidCDNWorkerOptions, MermaidLoader, NestedMarkdownHtmlInput, NestedMarkdownHtmlOptions, NestedMarkdownNodesInput, NestedMarkdownNodesOptions, NodeRendererCodeBlockProps, NodeRendererD2Props, NodeRendererEvents, NodeRendererInfographicProps, NodeRendererMermaidProps, NodeRendererProps, RenderableMarkdownNode, RenderedHtmlEnhancementHandle, SmoothStreamingScope };
+export { AdmonitionNodeComponent as AdmonitionNode, CodeBlockNodeComponent as AngularCodeBlockNode, BlockquoteNodeComponent as BlockquoteNode, CheckboxNodeComponent as CheckboxNode, CodeBlockNodeComponent as CodeBlockNode, D2BlockNodeComponent as D2BlockNode, DefinitionListNodeComponent as DefinitionListNode, EmojiNodeComponent as EmojiNode, EmphasisNodeComponent as EmphasisNode, FallbackComponent, FootnoteAnchorNodeComponent as FootnoteAnchorNode, FootnoteNodeComponent as FootnoteNode, FootnoteReferenceNodeComponent as FootnoteReferenceNode, HardBreakNodeComponent as HardBreakNode, HeadingNodeComponent as HeadingNode, HighlightNodeComponent as HighlightNode, HtmlBlockNodeComponent as HtmlBlockNode, HtmlInlineNodeComponent as HtmlInlineNode, HtmlPreviewFrameComponent as HtmlPreviewFrame, ImageNodeComponent as ImageNode, InfographicBlockNodeComponent as InfographicBlockNode, InlineCodeNodeComponent as InlineCodeNode, InsertNodeComponent as InsertNode, LinkNodeComponent as LinkNode, ListItemNodeComponent as ListItemNode, ListNodeComponent as ListNode, MARKSTREAM_SMOOTH_STREAMING_SCOPE, MERMAID_DISABLED_CODE, MERMAID_WORKER_BUSY_CODE, NodeRendererComponent as MarkdownRenderComponent, NodeRendererComponent as MarkstreamAngularComponent, MathBlockNodeComponent as MathBlockNode, MathInlineNodeComponent as MathInlineNode, MermaidBlockNodeComponent as MermaidBlockNode, NestedRendererComponent as NestedRenderer, NodeRendererComponent as NodeRenderer, ParagraphNodeComponent as ParagraphNode, PreCodeNodeComponent as PreCodeNode, ReferenceNodeComponent as ReferenceNode, SafeAttrsDirective, SmoothMarkdownStreamService, StrikethroughNodeComponent as StrikethroughNode, StrongNodeComponent as StrongNode, SubscriptNodeComponent as SubscriptNode, SuperscriptNodeComponent as SuperscriptNode, TableNodeComponent as TableNode, TextNodeComponent as TextNode, ThematicBreakNodeComponent as ThematicBreakNode, VmrContainerNodeComponent as VmrContainerNode, WORKER_BUSY_CODE, buildKaTeXCDNWorkerSource, buildMermaidCDNWorkerSource, buildRenderContext, canParseOffthread, clearGlobalCustomComponents, clearKaTeXWorker, clearMermaidWorker, createKaTeXWorkerFromCDN, createMermaidWorkerFromCDN, disableD2, disableKatex, disableMermaid, disposeRenderedHtmlEnhancements, enableD2, enableKatex, enableMermaid, enhanceRenderedHtml, findPrefixOffthread, getCustomComponentsRevision, getCustomNodeComponents, getKaTeXBackpressureDefaults, getKaTeXWorkerLoad, getKatex, getLanguageIcon, getMermaid, getMermaidWorkerLoad, isD2Enabled, isKaTeXWorkerBusy, isKatexEnabled, isMermaidEnabled, languageMap, normalizeLanguageIdentifier, parseNestedMarkdownToNodes, removeCustomComponents, renderKaTeXInWorker, renderKaTeXWithBackpressure, renderMarkdownNodeToHtml, renderMarkdownNodesToHtml, renderMarkdownToHtml, renderNestedMarkdownToHtml, resolveLanguageId, resolveParsedNodes, sanitizeHtmlContent, setCustomComponents, setD2Loader, setDefaultI18nMap, setKaTeXBackpressureDefaults, setKaTeXCache, setKaTeXWorker, setKaTeXWorkerDebug, setKaTeXWorkerMaxConcurrency, setKatexLoader, setLanguageIconResolver, setMermaidLoader, setMermaidWorker, setMermaidWorkerClientDebug, setMermaidWorkerMaxConcurrency, subscribeCustomComponents, terminateWorker, useSafeI18n, waitForKaTeXWorkerSlot };
+export type { AngularRenderContext, AngularRenderableNode, BackpressureOptions, CodeBlockDiffHideUnchangedRegions, CodeBlockDiffHideUnchangedRegionsOptions, CodeBlockOptions, CodeBlockPreviewPayload, CodeBlockTheme, CodeBlockThemePair, CodeBlockThemeProp, CodeBlockThemes, CustomComponentMap, D2Loader, EnhanceRenderedHtmlOptions, KaTeXCDNWorkerHandle, KaTeXCDNWorkerMode, KaTeXCDNWorkerOptions, KatexLoader, LanguageIconResolver, NodeRendererProps as MarkstreamAngularComponentProps, MarkstreamAngularRenderOptions, MermaidCDNWorkerHandle, MermaidCDNWorkerMode, MermaidCDNWorkerOptions, MermaidLoader, NestedMarkdownHtmlInput, NestedMarkdownHtmlOptions, NestedMarkdownNodesInput, NestedMarkdownNodesOptions, NodeRendererCodeBlockProps, NodeRendererD2Props, NodeRendererEvents, NodeRendererInfographicProps, NodeRendererMermaidProps, NodeRendererProps, RenderableMarkdownNode, RenderedHtmlEnhancementHandle, SmoothStreamingScope };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "markstream-angular",
   "type": "module",
-  "version": "0.0.10",
-  "description": "Angular 20+ standalone streaming Markdown renderer for AI chat, LLM token streams, SSE/WebSocket output, incomplete Markdown, Mermaid, KaTeX, Monaco-powered code blocks, and safe Angular component rendering.",
+  "version": "0.1.0-beta.3",
+  "description": "Angular 20+ standalone streaming Markdown renderer for AI chat, LLM token streams, SSE/WebSocket output, incomplete Markdown, Mermaid, KaTeX, stream-diffs powered code blocks, and safe Angular component rendering.",
   "author": "Simon He",
   "license": "MIT",
   "homepage": "https://markstream.simonhe.me/frameworks/angular",
@@ -40,7 +40,7 @@
     "streaming-mermaid",
     "katex",
     "streaming-katex",
-    "monaco-editor",
+    "stream-diffs",
     "streaming-code-blocks",
     "large-documents",
     "custom-components",
@@ -66,6 +66,16 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "pnpm --dir ../markdown-parser build && pnpm --dir ../markstream-core build && ng-packagr -p ng-package.json -c tsconfig.build.json && vite build --config vite.config.workers.ts --mode npm",
+    "dev": "vite dev",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm run build && pnpm run check:workspace-deps-published",
+    "check:core-published": "node ../../scripts/check-core-published.mjs --package-json package.json --core-package-json ../markstream-core/package.json",
+    "check:workspace-deps-published": "node ../../scripts/check-workspace-deps-published.mjs --package-json package.json",
+    "release": "pnpm run check:workspace-deps-published && bumpp --all --commit --no-tag --no-push --execute 'pnpm --workspace-root run docs:llms:generate' && DIST_TAG=\"$(node ../../scripts/dist-tag.mjs)\" && pnpm publish --access public --tag \"${DIST_TAG}\" && node ../../scripts/tag-package.mjs --package-json package.json --push"
+  },
   "peerDependencies": {
     "@angular/common": ">=20",
     "@angular/core": ">=20",
@@ -73,8 +83,7 @@
     "@terrastruct/d2": ">=0.1.33",
     "katex": ">=0.16.22",
     "mermaid": ">=11",
-    "stream-diffs": ">=0.0.2",
-    "stream-monaco": ">=0.0.48"
+    "stream-diffs": ">=0.0.2"
   },
   "peerDependenciesMeta": {
     "@antv/infographic": {
@@ -91,15 +100,12 @@
     },
     "stream-diffs": {
       "optional": true
-    },
-    "stream-monaco": {
-      "optional": true
     }
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "markstream-core": "1.0.3",
-    "stream-markdown-parser": "1.2.3"
+    "markstream-core": "1.1.0-beta.2",
+    "stream-markdown-parser": "1.2.6-beta.1"
   },
   "devDependencies": {
     "@angular/common": "^20.3.26",
@@ -112,14 +118,5 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.6",
     "vite-plugin-dts": "^4.5.4"
-  },
-  "scripts": {
-    "build": "pnpm --dir ../markdown-parser build && pnpm --dir ../markstream-core build && ng-packagr -p ng-package.json -c tsconfig.build.json && vite build --config vite.config.workers.ts --mode npm",
-    "dev": "vite dev",
-    "preview": "vite preview",
-    "typecheck": "tsc --noEmit",
-    "check:core-published": "node ../../scripts/check-core-published.mjs --package-json package.json --core-package-json ../markstream-core/package.json",
-    "check:workspace-deps-published": "node ../../scripts/check-workspace-deps-published.mjs --package-json package.json",
-    "release": "pnpm run check:workspace-deps-published && bumpp --all --commit --no-tag --no-push --execute 'pnpm --workspace-root run docs:llms:generate' && pnpm publish --access public $(node ../../scripts/dist-tag.mjs) && node ../../scripts/tag-package.mjs --package-json package.json --push"
   }
-}
+}