markstream-angular 0.0.9-beta.1 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +49 -2
  2. package/dist/README.md +49 -2
  3. package/dist/fesm2022/markstream-angular.mjs +406 -99
  4. package/dist/fesm2022/markstream-angular.mjs.map +1 -1
  5. package/dist/index.css +182 -29
  6. package/dist/index.d.ts +27 -1
  7. package/package.json +6 -2
package/README.md CHANGED
@@ -19,7 +19,8 @@ pnpm add markstream-angular @angular/core @angular/common
19
19
 
20
20
  Optional peer dependencies:
21
21
 
22
- - `stream-monaco` for Monaco-powered code blocks
22
+ - `stream-diffs` (recommended) for enhanced / streaming code blocks
23
+ - `stream-monaco` for Monaco-powered code blocks (automatic fallback when `stream-diffs` is absent)
23
24
  - `mermaid` for Mermaid diagrams
24
25
  - `katex` for math rendering
25
26
  - `@terrastruct/d2` for D2 diagrams
@@ -30,9 +31,55 @@ Install only the peers your output actually needs. Plain Markdown does not requi
30
31
  Example:
31
32
 
32
33
  ```bash
33
- pnpm add stream-monaco mermaid katex @terrastruct/d2 @antv/infographic
34
+ pnpm add stream-diffs mermaid katex @terrastruct/d2 @antv/infographic
34
35
  ```
35
36
 
37
+ ## Enhanced Code Blocks
38
+
39
+ Code blocks use a dual-runtime loader: `stream-diffs` is preferred, `stream-monaco` is the automatic fallback, and a plain `<pre>` is rendered when neither is installed. Inside `MarkstreamAngularComponent`, code blocks resolve to this runtime automatically; you can also mount the standalone `markstream-angular-code-block-node` component directly:
40
+
41
+ ```ts
42
+ import type { CodeBlockMonacoOptions } from 'markstream-angular'
43
+ import { Component, signal } from '@angular/core'
44
+ import { CodeBlockNode } from 'markstream-angular'
45
+
46
+ @Component({
47
+ selector: 'app-code-block',
48
+ standalone: true,
49
+ imports: [CodeBlockNode],
50
+ template: `
51
+ <markstream-angular-code-block-node [node]="node" [props]="props" />
52
+ `,
53
+ })
54
+ class CodeBlockComponent {
55
+ node = {
56
+ type: 'code_block',
57
+ language: 'ts',
58
+ code: 'const answer = 42',
59
+ raw: 'const answer = 42',
60
+ }
61
+
62
+ // fontSize / lineHeight / tabSize also drive the streaming <pre> fallback so
63
+ // the enhanced surface swaps in without a visual jump.
64
+ props = {
65
+ isDark: true,
66
+ showLineNumbers: true,
67
+ monacoOptions: {
68
+ fontSize: 14,
69
+ lineHeight: 21,
70
+ tabSize: 4,
71
+ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
72
+ wordWrap: 'off',
73
+ theme: 'vitesse-dark',
74
+ renderSideBySide: true,
75
+ MAX_HEIGHT: 640,
76
+ } as CodeBlockMonacoOptions,
77
+ }
78
+ }
79
+ ```
80
+
81
+ Component options go through the `props` input: `isDark`, `showLineNumbers`, `monacoOptions`, `darkTheme` / `lightTheme`, `loading`, `stream`. `monacoOptions` also covers diff blocks (`renderSideBySide`, `diffHunkActionsOnHover`, `onDiffHunkAction`).
82
+
36
83
  ## Quick Start
37
84
 
38
85
  Import the stylesheet once in your Angular app entry:
package/dist/README.md CHANGED
@@ -19,7 +19,8 @@ pnpm add markstream-angular @angular/core @angular/common
19
19
 
20
20
  Optional peer dependencies:
21
21
 
22
- - `stream-monaco` for Monaco-powered code blocks
22
+ - `stream-diffs` (recommended) for enhanced / streaming code blocks
23
+ - `stream-monaco` for Monaco-powered code blocks (automatic fallback when `stream-diffs` is absent)
23
24
  - `mermaid` for Mermaid diagrams
24
25
  - `katex` for math rendering
25
26
  - `@terrastruct/d2` for D2 diagrams
@@ -30,9 +31,55 @@ Install only the peers your output actually needs. Plain Markdown does not requi
30
31
  Example:
31
32
 
32
33
  ```bash
33
- pnpm add stream-monaco mermaid katex @terrastruct/d2 @antv/infographic
34
+ pnpm add stream-diffs mermaid katex @terrastruct/d2 @antv/infographic
34
35
  ```
35
36
 
37
+ ## Enhanced Code Blocks
38
+
39
+ Code blocks use a dual-runtime loader: `stream-diffs` is preferred, `stream-monaco` is the automatic fallback, and a plain `<pre>` is rendered when neither is installed. Inside `MarkstreamAngularComponent`, code blocks resolve to this runtime automatically; you can also mount the standalone `markstream-angular-code-block-node` component directly:
40
+
41
+ ```ts
42
+ import type { CodeBlockMonacoOptions } from 'markstream-angular'
43
+ import { Component, signal } from '@angular/core'
44
+ import { CodeBlockNode } from 'markstream-angular'
45
+
46
+ @Component({
47
+ selector: 'app-code-block',
48
+ standalone: true,
49
+ imports: [CodeBlockNode],
50
+ template: `
51
+ <markstream-angular-code-block-node [node]="node" [props]="props" />
52
+ `,
53
+ })
54
+ class CodeBlockComponent {
55
+ node = {
56
+ type: 'code_block',
57
+ language: 'ts',
58
+ code: 'const answer = 42',
59
+ raw: 'const answer = 42',
60
+ }
61
+
62
+ // fontSize / lineHeight / tabSize also drive the streaming <pre> fallback so
63
+ // the enhanced surface swaps in without a visual jump.
64
+ props = {
65
+ isDark: true,
66
+ showLineNumbers: true,
67
+ monacoOptions: {
68
+ fontSize: 14,
69
+ lineHeight: 21,
70
+ tabSize: 4,
71
+ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
72
+ wordWrap: 'off',
73
+ theme: 'vitesse-dark',
74
+ renderSideBySide: true,
75
+ MAX_HEIGHT: 640,
76
+ } as CodeBlockMonacoOptions,
77
+ }
78
+ }
79
+ ```
80
+
81
+ Component options go through the `props` input: `isDark`, `showLineNumbers`, `monacoOptions`, `darkTheme` / `lightTheme`, `loading`, `stream`. `monacoOptions` also covers diff blocks (`renderSideBySide`, `diffHunkActionsOnHover`, `onDiffHunkAction`).
82
+
36
83
  ## Quick Start
37
84
 
38
85
  Import the stylesheet once in your Angular app entry: