add vega-lite diagram (#574)

added vega-lite diagrams
Update CHANGELOG.md

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

CHANGELOG.md

@@ -39,6 +39,7 @@
 - Added shortcodes for [fork-awesome icons](https://forkaweso.me/Fork-Awesome/icons/) (e.g. `:fa-picture-o:`)
 - The code button now adds code fences even if the user selected nothing beforehand
 - Code blocks with 'csv' as language render as tables.
+- Code blocks with 'vega-lite' as language are rendered as [vega-lite diagrams](https://vega.github.io/vega-lite/examples/).
 
 ### Changed
 

package.json

@@ -96,7 +96,10 @@
         "ts-mockery": "1.2.0",
         "typescript": "4.0.3",
         "use-media": "1.4.0",
-        "use-resize-observer": "6.1.0"
+        "use-resize-observer": "6.1.0",
+        "vega": "^5.15.0",
+        "vega-embed": "^6.12.2",
+        "vega-lite": "^4.15.0"
     },
     "scripts": {
         "start": "PORT=3001 craco start",

public/locales/en.json

@@ -12,6 +12,11 @@
         },
         "sequence": {
             "deprecationWarning": "The use of 'sequence' as code block language is deprecated."
+        },
+        "vega-lite": {
+            "png": "Save as PNG",
+            "svg": "Save as SVG",
+            "errorJson": "Error parsing the JSON"
         }
     },
     "landing": {

src/components/editor/editorTestContent.ts

@@ -9,6 +9,52 @@ opengraph:
 # Embedding demo
 [TOC]
 
+## Vega-Lite
+
+\`\`\`vega-lite
+
+
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
+  "description": "Reproducing http://robslink.com/SAS/democd91/pyramid_pie.htm",
+  "data": {
+    "values": [
+      {"category": "Sky", "value": 75, "order": 3},
+      {"category": "Shady side of a pyramid", "value": 10, "order": 1},
+      {"category": "Sunny side of a pyramid", "value": 15, "order": 2}
+    ]
+  },
+  "mark": {"type": "arc", "outerRadius": 80},
+  "encoding": {
+    "theta": {
+      "field": "value", "type": "quantitative",
+      "scale": {"range": [2.35619449, 8.639379797]},
+      "stack": true
+    },
+    "color": {
+      "field": "category", "type": "nominal",
+      "scale": {
+        "domain": ["Sky", "Shady side of a pyramid", "Sunny side of a pyramid"],
+        "range": ["#416D9D", "#674028", "#DEAC58"]
+      },
+      "legend": {
+        "orient": "none",
+        "title": null,
+        "columns": 1,
+        "legendX": 200,
+        "legendY": 80
+      }
+    },
+    "order": {
+      "field": "order"
+    }
+  },
+  "view": {"stroke": null}
+}
+
+
+\`\`\`
+
 ## GraphViz
 
 \`\`\`graphviz

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}/>
+  }
+}