Feature/sequence diagram (#538)

CHANGELOG.md

@@ -9,6 +9,7 @@
     - `{%gist user/12345 %}` -> https://gist.github.com/user/12345
     - `{%slideshare user/my-awesome-presentation %}` -> Embedding removed
     - `{%speakerdeck foobar %}` -> Embedding removed
+- The use of `sequence` as code block language ([Why?](https://community.codimd.org/t/frequently-asked-questions/190))
 
 ### Removed
 

public/locales/en.json

@@ -9,6 +9,9 @@
         },
         "mermaid": {
             "unknownError": "Unknown rendering error. Please check your browser console."
+        },
+        "sequence": {
+            "deprecationWarning": "The use of 'sequence' as code block language is deprecated."
         }
     },
     "landing": {
@@ -278,8 +281,7 @@
         },
         "export": {
             "rawHtml": "Raw HTML",
-            "pdf": "PDF export is unavailable.",
-            "why": "Why?"
+            "pdf": "PDF export is unavailable."
         },
         "import": {
             "clipboard": "Clipboard"
@@ -352,7 +354,8 @@
         "save": "Save",
         "or": "or",
         "and": "and",
-        "avatarOf": "avatar of '{{name}}'"
+        "avatarOf": "avatar of '{{name}}'",
+        "why": "Why?"
     },
     "login": {
         "chooseMethod": "Choose method",

src/components/editor/document-bar/menus/export-menu.tsx

@@ -49,7 +49,7 @@ const ExportMenu: React.FC = () => {
           <Trans i18nKey={'editor.export.pdf'}/>
           &nbsp;
           <span className={'text-primary'}>
-            <Trans i18nKey={'editor.export.why'}/>
+            <Trans i18nKey={'common.why'}/>
           </span>
         </Dropdown.Item>
       </Dropdown.Menu>

src/components/editor/editorTestContent.ts

@@ -9,6 +9,18 @@ opengraph:
 # Embedding demo
 [TOC]
 
+## Sequence Diagram (deprecated)
+
+\`\`\`sequence
+Title: Here is a title
+note over A: asdd
+A->B: Normal line
+B-->C: Dashed line
+C->>D: Open arrow
+D-->>A: Dashed open arrow
+participant IOOO
+\`\`\`
+
 ## Mermaid
 
 \`\`\`mermaid

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

@@ -67,6 +67,7 @@ import { MermaidReplacer } from './replace-components/mermaid/mermaid-replacer'
 import { PdfReplacer } from './replace-components/pdf/pdf-replacer'
 import { PossibleWiderReplacer } from './replace-components/possible-wider/possible-wider-replacer'
 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 { VimeoReplacer } from './replace-components/vimeo/vimeo-replacer'
 import { YoutubeReplacer } from './replace-components/youtube/youtube-replacer'
@@ -350,6 +351,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
       new AbcReplacer(),
       new PdfReplacer(),
       new ImageReplacer(),
+      new SequenceDiagramReplacer(),
       new CsvReplacer(),
       new FlowchartReplacer(),
       new MermaidReplacer(),
@@ -380,7 +382,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
             </Trans>
           </Alert>
         </ShowIf>
-        <div ref={documentElement} className={'markdown-body d-flex flex-column align-items-center'}>
+        <div ref={documentElement} className={'markdown-body w-100 d-flex flex-column align-items-center'}>
           {markdownReactDom}
         </div>
       </div>

src/components/markdown-renderer/replace-components/sequence-diagram/deprecation-warning.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Alert } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { TranslatedExternalLink } from '../../../common/links/translated-external-link'
+
+export const DeprecationWarning: React.FC = () => {
+  useTranslation()
+
+  return (
+    <Alert className={'mt-2'} variant={'warning'}>
+      <Trans i18nKey={'renderer.sequence.deprecationWarning'}/>
+      &nbsp;
+      <TranslatedExternalLink i18nKey={'common.why'} className={'text-dark'} href={'https://community.codimd.org/t/frequently-asked-questions/190'}/>
+    </Alert>
+  )
+}

src/components/markdown-renderer/replace-components/sequence-diagram/sequence-diagram-replacer.tsx

@@ -0,0 +1,20 @@
+import { DomElement } from 'domhandler'
+import React, { Fragment } from 'react'
+import { ComponentReplacer } from '../ComponentReplacer'
+import { MermaidChart } from '../mermaid/mermaid-chart'
+import { DeprecationWarning } from './deprecation-warning'
+
+export class SequenceDiagramReplacer 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'] !== 'sequence' || !codeNode.children || !codeNode.children[0]) {
+      return
+    }
+
+    const code = codeNode.children[0].data as string
+
+    return <Fragment key={index} >
+      <DeprecationWarning/>
+      <MermaidChart code={'sequenceDiagram\n' + code}/>
+    </Fragment>
+  }
+}