feat: ✨ Supports echarts

.gitignore

@@ -103,4 +103,6 @@ dist
 # TernJS port file
 .tern-port
 .idea
-.parcel-cache/
+.parcel-cache/
+
+.DS_Store

src/echarts.tsx

@@ -0,0 +1,57 @@
+import '@logseq/libs'
+import React from 'react'
+
+export default function (props: { content: string }) {
+  const { content } = props
+  const elRef = React.useRef(null)
+  const echartsRef = React.useRef(null)
+  const [ready, setReady] = React.useState(false)
+  const host = logseq.Experiments.ensureHostScope()
+  const [theme, setTheme] = React.useState<'light' | 'dark'>('light')
+
+  React.useEffect(() => {
+    logseq.App.onThemeModeChanged(({ mode }) => setTheme(mode))
+  }, [])
+
+  React.useEffect(() => {
+    if (echartsRef.current) {
+      echartsRef.current.setOption({ darkMode: theme === 'dark' })
+    }
+  }, [theme])
+
+  React.useEffect(() => {
+    if (host.echarts) {
+      return setReady(true)
+    }
+
+    let timer
+    logseq.Experiments
+      .loadScripts('./vendors/echarts.min.js')
+      .then(() => {
+        timer = setTimeout(() => {
+          setReady(true)
+        }, 50)
+      })
+
+    return () => {
+      timer && clearTimeout(timer)
+    }
+  }, [ready])
+
+  React.useEffect(() => {
+    if (!ready || !content?.trim()) return
+
+    if (host.echarts) {
+      if (elRef.current) {
+        const echarts = (parent.window as any).echarts
+        const myChart = echarts.init(elRef.current)
+        echartsRef.current = myChart
+        const option = JSON.parse(content)
+        console.log('[faiz:] === myChart', myChart, option)
+        myChart.setOption(option)
+      }
+    }
+  }, [ready, content, elRef.current])
+
+  return (<div style={{ minHeight: '300px' }} className={'echarts'} ref={elRef}>Echarts Loading...</div>)
+}

src/main.ts

@@ -1,9 +1,11 @@
 import '@logseq/libs'
 import { LSPluginBaseInfo, SettingSchemaDesc } from '@logseq/libs/dist/LSPlugin'
 import mermaidRenderer from './mermaid'
+import echartsRenderer from './echarts'
 
 const Supports = {
-  Mermaid: 'mermaid'
+  Mermaid: 'mermaid',
+  Echarts: 'echarts',
 }
 
 const settingsSchema: Array<SettingSchemaDesc> = [
@@ -13,7 +15,14 @@ const settingsSchema: Array<SettingSchemaDesc> = [
     title: 'Support mermaid?',
     description: 'Mermaid lets you create diagrams and visualizations using text and code.',
     default: true
-  }
+  },
+  {
+    key: 'echarts',
+    type: 'boolean',
+    title: 'Support echarts?',
+    description: 'Use Echarts to render the chart.',
+    default: true
+  },
 ]
 
 function main (baseInfo: LSPluginBaseInfo) {
@@ -27,6 +36,14 @@ function main (baseInfo: LSPluginBaseInfo) {
       }
     )
   }
+  if (settings.echarts) {
+    logseq.Experiments.registerFencedCodeRenderer(
+      Supports.Echarts, {
+        edit: true,
+        render: echartsRenderer,
+      }
+    )
+  }
 }
 
 // entry