@ciderpress/ui 1.0.0-rc.7 → 1.0.0-rc.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.
|
@@ -15,12 +15,35 @@
|
|
|
15
15
|
|
|
16
16
|
// oxlint-disable no-ternary
|
|
17
17
|
|
|
18
|
+
import elkLayouts from '@mermaid-js/layout-elk'
|
|
18
19
|
import mermaid from 'mermaid'
|
|
19
20
|
import type { MermaidConfig } from 'mermaid'
|
|
20
21
|
import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
|
|
21
22
|
|
|
22
23
|
import './mermaid.css'
|
|
23
24
|
|
|
25
|
+
// ELK layout support. Diagrams that opt in with `layout: elk` (via frontmatter or
|
|
26
|
+
// `%%{init: {'layout': 'elk'}}%%`) need the ELK loaders registered before render,
|
|
27
|
+
// or mermaid.render() throws and the diagram silently blanks. `elkLayouts` is an
|
|
28
|
+
// array of lazy loaders (`() => import(...)`), so elkjs — and its web worker —
|
|
29
|
+
// only load client-side when a diagram actually uses ELK, never at build/SSR time.
|
|
30
|
+
// Registration itself is a cheap, edge-safe registry push. We guard on a module
|
|
31
|
+
// flag so React re-mounts / StrictMode double-invokes register exactly once.
|
|
32
|
+
const elkState = { registered: false }
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Register the ELK layout loaders with mermaid, exactly once per module load.
|
|
36
|
+
*
|
|
37
|
+
* @private
|
|
38
|
+
*/
|
|
39
|
+
function ensureElkRegistered(): void {
|
|
40
|
+
if (elkState.registered) {
|
|
41
|
+
return
|
|
42
|
+
}
|
|
43
|
+
elkState.registered = true
|
|
44
|
+
mermaid.registerLayoutLoaders(elkLayouts)
|
|
45
|
+
}
|
|
46
|
+
|
|
24
47
|
interface MermaidRendererProps {
|
|
25
48
|
readonly code: string
|
|
26
49
|
readonly config?: MermaidConfig
|
|
@@ -243,6 +266,8 @@ function MermaidRenderer(props: MermaidRendererProps): React.ReactElement | null
|
|
|
243
266
|
const isPreview = tab === 'preview'
|
|
244
267
|
|
|
245
268
|
const renderMermaid = useCallback(async () => {
|
|
269
|
+
ensureElkRegistered()
|
|
270
|
+
|
|
246
271
|
const hasDarkClass = document.documentElement.classList.contains('dark')
|
|
247
272
|
|
|
248
273
|
const mermaidConfig: MermaidConfig = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ciderpress/ui",
|
|
3
|
-
"version": "1.0.0-rc.
|
|
3
|
+
"version": "1.0.0-rc.9",
|
|
4
4
|
"description": "Rspress plugin, theme components, and styles for ciderpress",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ciderpress",
|
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
"@iconify-json/skill-icons": "^1.2.4",
|
|
57
57
|
"@iconify-json/vscode-icons": "^1.2.65",
|
|
58
58
|
"@iconify/react": "^6.0.2",
|
|
59
|
+
"@mermaid-js/layout-elk": "^0.2.2",
|
|
59
60
|
"clsx": "^2.1.1",
|
|
60
61
|
"katex": "^0.17.0",
|
|
61
62
|
"massaman": "^0.3.0",
|
|
@@ -64,7 +65,7 @@
|
|
|
64
65
|
"react-aria-components": "^1.19.0",
|
|
65
66
|
"ts-morph": "^28.0.0",
|
|
66
67
|
"unist-util-visit": "^5.1.0",
|
|
67
|
-
"@ciderpress/config": "1.0.0-rc.
|
|
68
|
+
"@ciderpress/config": "1.0.0-rc.7",
|
|
68
69
|
"@ciderpress/theme": "1.0.0-rc.4"
|
|
69
70
|
},
|
|
70
71
|
"devDependencies": {
|