@lobehub/ui/es/Mermaid/SyntaxMermaid/MermaidSvg.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"MermaidSvg.mjs","names":["AntImage"],"sources":["../../../src/Mermaid/SyntaxMermaid/MermaidSvg.tsx"],"sourcesContent":["'use client';\n\nimport { Image as AntImage } from 'antd';\nimport { memo, type Ref, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { toStandaloneSvgString } from './prepareInlineSvg';\nimport { prepareMermaidSvgString } from './prepareMermaidSvg';\n\ninterface MermaidSvgProps {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n  style?: React.CSSProperties;\n  svg: string;\n}\n\nconst MermaidSvg = memo<MermaidSvgProps>(({ className, ref, style, svg }) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [previewUrl, setPreviewUrl] = useState<string>();\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    return () => {\n      if (previewUrl) URL.revokeObjectURL(previewUrl);\n    };\n  }, [previewUrl]);\n\n  // The preview copy is only built on demand: it has to bake in the resolved\n  // CSS variables and be XML-well-formed, neither of which the inline copy needs.\n  const handleOpen = useCallback(() => {\n    const element = containerRef.current?.querySelector('svg');\n    if (!element) return;\n\n    const standalone = prepareMermaidSvgString(toStandaloneSvgString(element));\n    setPreviewUrl((previous) => {\n      if (previous) URL.revokeObjectURL(previous);\n      return URL.createObjectURL(new Blob([standalone], { type: 'image/svg+xml' }));\n    });\n    setOpen(true);\n  }, []);\n\n  return (\n    <div className={className} ref={ref} style={style}>\n      <div\n        dangerouslySetInnerHTML={{ __html: svg }}\n        ref={containerRef}\n        style={{ cursor: 'zoom-in' }}\n        onClick={handleOpen}\n      />\n      {previewUrl && (\n        <AntImage\n          preview={{ onVisibleChange: setOpen, src: previewUrl, visible: open }}\n          src={previewUrl}\n          style={{ display: 'none' }}\n          wrapperStyle={{ display: 'none' }}\n        />\n      )}\n    </div>\n  );\n});\n\nMermaidSvg.displayName = 'MermaidSvg';\n\nexport default MermaidSvg;\n"],"mappings":";;;;;;;AAeA,MAAM,aAAa,MAAuB,EAAE,WAAW,KAAK,OAAO,UAAU;CAC3E,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAiB;CACrD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,gBAAgB;EACd,aAAa;GACX,IAAI,YAAY,IAAI,gBAAgB,UAAU;EAChD;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,aAAa,kBAAkB;EACnC,MAAM,UAAU,aAAa,SAAS,cAAc,KAAK;EACzD,IAAI,CAAC,SAAS;EAEd,MAAM,aAAa,wBAAwB,sBAAsB,OAAO,CAAC;EACzE,eAAe,aAAa;GAC1B,IAAI,UAAU,IAAI,gBAAgB,QAAQ;GAC1C,OAAO,IAAI,gBAAgB,IAAI,KAAK,CAAC,UAAU,GAAG,EAAE,MAAM,gBAAgB,CAAC,CAAC;EAC9E,CAAC;EACD,QAAQ,IAAI;CACd,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,OAAD;EAAgB;EAAgB;EAAY;EAA5C,UAAA,CACE,oBAAC,OAAD;GACE,yBAAyB,EAAE,QAAQ,IAAI;GACvC,KAAK;GACL,OAAO,EAAE,QAAQ,UAAU;GAC3B,SAAS;EACV,CAAA,GACA,cACC,oBAACA,OAAD;GACE,SAAS;IAAE,iBAAiB;IAAS,KAAK;IAAY,SAAS;GAAK;GACpE,KAAK;GACL,OAAO,EAAE,SAAS,OAAO;GACzB,cAAc,EAAE,SAAS,OAAO;EACjC,CAAA,CAEA;;AAET,CAAC;AAED,WAAW,cAAc"}