add vega-lite diagram (#574)

added vega-lite diagrams
Update CHANGELOG.md

Co-authored-by: mrdrogdrog <mr.drogdrog@gmail.com>

src/components/markdown-renderer/full-markdown-renderer.tsx

@@ -53,6 +53,7 @@ import { PossibleWiderReplacer } from './replace-components/possible-wider/possi
 import { QuoteOptionsReplacer } from './replace-components/quote-options/quote-options-replacer'
 import { SequenceDiagramReplacer } from './replace-components/sequence-diagram/sequence-diagram-replacer'
 import { TaskListReplacer } from './replace-components/task-list/task-list-replacer'
+import { VegaReplacer } from './replace-components/vega-lite/vega-replacer'
 import { VimeoReplacer } from './replace-components/vimeo/vimeo-replacer'
 import { YoutubeReplacer } from './replace-components/youtube/youtube-replacer'
 import { AdditionalMarkdownRendererProps, LineMarkerPosition } from './types'
@@ -94,6 +95,7 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
       new FlowchartReplacer(),
       new MermaidReplacer(),
       new GraphvizReplacer(),
+      new VegaReplacer(),
       new HighlightedCodeReplacer(),
       new QuoteOptionsReplacer(),
       new KatexReplacer(),

src/components/markdown-renderer/markdown-it-plugins/highlighted-code.ts

@@ -1,6 +1,6 @@
 import MarkdownIt from 'markdown-it/lib'
 
-const highlightRegex = /^ *(\w*)(.*)$/
+const highlightRegex = /^ *([\w-]*)(.*)$/
 
 export const highlightedCode: MarkdownIt.PluginSimple = (md: MarkdownIt) => {
   md.core.ruler.push('highlighted-code', (state) => {

src/components/markdown-renderer/replace-components/vega-lite/vega-chart.tsx

@@ -0,0 +1,59 @@
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+import { Alert } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import embed, { VisualizationSpec } from 'vega-embed'
+import { ShowIf } from '../../../common/show-if/show-if'
+
+export interface VegaChartProps {
+  code: string
+}
+
+export const VegaChart: React.FC<VegaChartProps> = ({ code }) => {
+  const diagramContainer = useRef<HTMLDivElement>(null)
+  const [error, setError] = useState<string>()
+  const { t } = useTranslation()
+
+  const showError = useCallback((error: string) => {
+    if (!diagramContainer.current) {
+      return
+    }
+    console.error(error)
+    setError(error)
+  }, [])
+
+  useEffect(() => {
+    if (!diagramContainer.current) {
+      return
+    }
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const spec: VisualizationSpec = JSON.parse(code)
+      showError('')
+      embed(diagramContainer.current, spec, {
+        actions: {
+          export: true,
+          source: false,
+          compiled: false,
+          editor: false
+        },
+        i18n: {
+          PNG_ACTION: t('renderer.vega-lite.png'),
+          SVG_ACTION: t('renderer.vega-lite.svg')
+        }
+      })
+        .then(result => console.log(result))
+        .catch(err => showError(err))
+    } catch (err) {
+      showError(t('renderer.vega-lite.errorJson'))
+    }
+  }, [code, showError, t])
+
+  return <Fragment>
+    <ShowIf condition={!!error}>
+      <Alert variant={'danger'}>{error}</Alert>
+    </ShowIf>
+    <div className={'text-center'}>
+      <div ref={diagramContainer}/>
+    </div>
+  </Fragment>
+}

src/components/markdown-renderer/replace-components/vega-lite/vega-replacer.tsx

@@ -0,0 +1,16 @@
+import { DomElement } from 'domhandler'
+import React from 'react'
+import { ComponentReplacer } from '../ComponentReplacer'
+import { VegaChart } from './vega-chart'
+
+export class VegaReplacer implements ComponentReplacer {
+  getReplacement (codeNode: DomElement): React.ReactElement | undefined {
+    if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || codeNode.attribs['data-highlight-language'] !== 'vega-lite' || !codeNode.children || !codeNode.children[0]) {
+      return
+    }
+
+    const code = codeNode.children[0].data as string
+
+    return <VegaChart code={code}/>
+  }
+}