Add abcjs (#537)

src/components/editor/editorTestContent.ts

@@ -38,6 +38,20 @@ cond(yes)->e
 cond(no)->op2
 \`\`\`
 
+## ABC
+
+\`\`\`abc
+X:1
+T:Speed the Plough
+M:4/4
+C:Trad.
+K:G
+|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
+GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
+|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
+g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
+\`\`\`
+
 ## CSV
 
 \`\`\`csv delimiter=; header

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

@@ -53,6 +53,7 @@ import { replaceQuoteExtraTime } from './regex-plugins/replace-quote-extra-time'
 import { replaceVimeoLink } from './regex-plugins/replace-vimeo-link'
 import { replaceYouTubeLink } from './regex-plugins/replace-youtube-link'
 import { buildTransformer, calculateNewLineNumberMapping, LineKeys } from './renderer-utils'
+import { AbcReplacer } from './replace-components/abc/abc-replacer'
 import { AsciinemaReplacer } from './replace-components/asciinema/asciinema-replacer'
 import { LinemarkerReplacer } from './replace-components/linemarker/linemarker-replacer'
 import { ComponentReplacer } from './replace-components/ComponentReplacer'
@@ -346,6 +347,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
       new YoutubeReplacer(),
       new VimeoReplacer(),
       new AsciinemaReplacer(),
+      new AbcReplacer(),
       new PdfReplacer(),
       new ImageReplacer(),
       new CsvReplacer(),

src/components/markdown-renderer/replace-components/abc/abc-frame.tsx

@@ -0,0 +1,19 @@
+import React, { useEffect, useRef } from 'react'
+import { renderAbc } from 'abcjs'
+
+export interface AbcFrameProps {
+  code: string
+}
+export const AbcFrame: React.FC<AbcFrameProps> = ({ code }) => {
+  const container = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (container.current) {
+      renderAbc(container.current, code)
+    }
+  }, [code])
+
+  return (
+    <div ref={container}/>
+  )
+}

src/components/markdown-renderer/replace-components/abc/abc-replacer.tsx

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

src/external-types/abcjs/abcjs.d.ts

@@ -0,0 +1,3 @@
+declare module 'abcjs' {
+  export function renderAbc(target: string|HTMLElement, code: string)
+}