@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
97 lines (96 loc) • 3.39 kB
JavaScript
"use client";
//#region src/hooks/useMermaidCdn.ts
let mermaidCdnUrl = "https://esm.sh/mermaid@11";
let mermaidPromise = null;
/**
* Point the fallback loader at a mirror, or at a self-hosted copy for offline
* and strict-CSP deployments. Resets any in-flight load.
*/
const setMermaidCdnUrl = (url) => {
if (url === mermaidCdnUrl) return;
mermaidCdnUrl = url;
mermaidPromise = null;
};
const getMermaidCdnUrl = () => mermaidCdnUrl;
const loadCdnMermaid = () => {
if (typeof window === "undefined") return Promise.resolve(null);
mermaidPromise ??= import(
/* @vite-ignore */
mermaidCdnUrl
).then((mod) => mod.default ?? mod).catch(() => null);
return mermaidPromise;
};
/**
* Upstream mermaid runs colour maths over themeVariables, so it needs literal
* values rather than var() references. Reading antd's CSS variables here keeps
* the cost off the render path — no theme context subscription, and it only
* runs for the diagram types that actually fall back to the CDN.
*/
const readCssVars = (names) => {
const result = {};
if (typeof document === "undefined") return result;
const computed = globalThis.getComputedStyle(document.documentElement);
for (const [key, variable] of Object.entries(names)) result[key] = computed.getPropertyValue(variable).trim() || void 0;
return result;
};
const createCdnMermaidConfig = (isDarkMode, customTheme) => {
const token = readCssVars({
border: "--ant-color-border",
error: "--ant-color-error",
fontFamily: "--ant-font-family",
fontFamilyCode: "--ant-font-family-code",
infoBg: "--ant-color-info-bg",
infoBorder: "--ant-color-info-border",
infoText: "--ant-color-info-text",
primary: "--ant-color-primary",
success: "--ant-color-success",
successBg: "--ant-color-success-bg",
successBorder: "--ant-color-success-border",
successText: "--ant-color-success-text",
text: "--ant-color-text",
textDescription: "--ant-color-text-description",
textSecondary: "--ant-color-text-secondary",
bgContainer: "--ant-color-bg-container",
warning: "--ant-color-warning"
});
return {
fontFamily: token.fontFamilyCode,
gantt: { useWidth: 1920 },
securityLevel: "strict",
startOnLoad: false,
theme: customTheme || (isDarkMode ? "dark" : "neutral"),
themeVariables: customTheme ? void 0 : {
errorBkgColor: token.textDescription,
errorTextColor: token.textDescription,
fontFamily: token.fontFamily,
lineColor: token.textSecondary,
mainBkg: token.bgContainer,
noteBkgColor: token.infoBg,
noteTextColor: token.infoText,
pie1: token.primary,
pie2: token.warning,
pie3: token.success,
pie4: token.error,
primaryBorderColor: token.border,
primaryColor: token.bgContainer,
primaryTextColor: token.text,
secondaryBorderColor: token.infoBorder,
secondaryColor: token.infoBg,
secondaryTextColor: token.infoText,
tertiaryBorderColor: token.successBorder,
tertiaryColor: token.successBg,
tertiaryTextColor: token.successText,
textColor: token.text
}
};
};
const renderWithCdnMermaid = async (content, id, config) => {
const mermaid = await loadCdnMermaid();
if (!mermaid) return "";
mermaid.initialize(config);
const { svg } = await mermaid.render(id, content);
return svg;
};
//#endregion
export { createCdnMermaidConfig, getMermaidCdnUrl, loadCdnMermaid, renderWithCdnMermaid, setMermaidCdnUrl };
//# sourceMappingURL=useMermaidCdn.mjs.map