@djangocfg/widget-code 0.1.9 → 0.1.13
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@djangocfg/widget-code",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.13",
|
|
4
4
|
"description": "Code surfaces: a Monaco editor, a diff viewer, a Prism listing, a JSON editor and the markdown renderer that embeds them",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"code-editor",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"dependencies": {
|
|
77
77
|
"@djangocfg/widget-data": "^0.1.9",
|
|
78
78
|
"@djangocfg/widget-diagram": "^0.1.9",
|
|
79
|
-
"@djangocfg/widget-editor": "^0.1.
|
|
79
|
+
"@djangocfg/widget-editor": "^0.1.31",
|
|
80
80
|
"@djangocfg/widget-kit": "^0.1.9",
|
|
81
81
|
"json-edit-react": "^1.30.2",
|
|
82
82
|
"monaco-editor": "^0.55.1",
|
|
@@ -93,16 +93,16 @@
|
|
|
93
93
|
"remark-smartypants": "^3.0.2"
|
|
94
94
|
},
|
|
95
95
|
"peerDependencies": {
|
|
96
|
-
"@djangocfg/i18n": "^2.1.
|
|
97
|
-
"@djangocfg/ui-core": "^2.1.
|
|
96
|
+
"@djangocfg/i18n": "^2.1.573",
|
|
97
|
+
"@djangocfg/ui-core": "^2.1.573",
|
|
98
98
|
"lucide-react": "^0.545.0",
|
|
99
99
|
"react": "^19.0.0",
|
|
100
100
|
"react-dom": "^19.0.0"
|
|
101
101
|
},
|
|
102
102
|
"devDependencies": {
|
|
103
|
-
"@djangocfg/i18n": "^2.1.
|
|
104
|
-
"@djangocfg/typescript-config": "^2.1.
|
|
105
|
-
"@djangocfg/ui-core": "^2.1.
|
|
103
|
+
"@djangocfg/i18n": "^2.1.573",
|
|
104
|
+
"@djangocfg/typescript-config": "^2.1.573",
|
|
105
|
+
"@djangocfg/ui-core": "^2.1.573",
|
|
106
106
|
"@storybook/react-vite": "^10.5.0",
|
|
107
107
|
"@types/node": "^25.9.5",
|
|
108
108
|
"@types/react": "19.2.15",
|
|
@@ -1,10 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { Components } from 'react-markdown';
|
|
3
|
-
import Mermaid from '@djangocfg/widget-diagram';
|
|
4
3
|
import { ANCHOR } from '../role-tokens';
|
|
5
4
|
import { CodeBlock, CodeBlockFallback } from './CodeBlock';
|
|
6
5
|
import { extractTextFromChildren } from './plainText';
|
|
7
6
|
|
|
7
|
+
/* Mermaid is loaded only when a ```mermaid fence is actually rendered.
|
|
8
|
+
*
|
|
9
|
+
* It was a static import, so the diagram engine entered the bundle of every
|
|
10
|
+
* consumer of this renderer. Measured on the MLS Caribbean property pages
|
|
11
|
+
* 2026-10-17: mermaid and the editor chips accounted for roughly 1.1 MB on a
|
|
12
|
+
* page whose markdown is prose — six sampled listings contained no code fence,
|
|
13
|
+
* no table and no diagram at all.
|
|
14
|
+
*
|
|
15
|
+
* `React.lazy` keeps the call site unchanged; the Suspense fallback is the
|
|
16
|
+
* code block the fence would otherwise have shown, so a diagram that is still
|
|
17
|
+
* loading reads as its own source rather than as empty space.
|
|
18
|
+
*/
|
|
19
|
+
const Mermaid = React.lazy(() => import('@djangocfg/widget-diagram'));
|
|
20
|
+
|
|
8
21
|
/** Body / heading size classes per `size` level. */
|
|
9
22
|
const SIZE_CLASSES: Record<'xs' | 'sm' | 'base', {
|
|
10
23
|
text: string;
|
|
@@ -122,7 +135,19 @@ export function createMarkdownComponents(
|
|
|
122
135
|
// middle of an empty viewport.
|
|
123
136
|
return (
|
|
124
137
|
<div className="my-3 w-full">
|
|
125
|
-
<
|
|
138
|
+
<React.Suspense
|
|
139
|
+
fallback={
|
|
140
|
+
<CodeBlockFallback
|
|
141
|
+
code={codeContent}
|
|
142
|
+
language="mermaid"
|
|
143
|
+
isUser={isUser}
|
|
144
|
+
isCompact={isCompact}
|
|
145
|
+
codeTheme={codeTheme}
|
|
146
|
+
/>
|
|
147
|
+
}
|
|
148
|
+
>
|
|
149
|
+
<Mermaid chart={codeContent} isCompact={isCompact} />
|
|
150
|
+
</React.Suspense>
|
|
126
151
|
</div>
|
|
127
152
|
);
|
|
128
153
|
}
|