mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-14 07:04:45 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Feature/sequence diagram (#538)

Browse source
This commit is contained in:
mrdrogdrog 2020-09-05 08:23:20 +02:00 • committed by GitHub
parent 119c9512e7
commit 63b24fa5bf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 59 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/markdown-renderer/markdown-renderer.tsx
View file

@ -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>

16
src/components/markdown-renderer/replace-components/sequence-diagram/deprecation-warning.tsx Normal file
View file

@ -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>
)
}

20
src/components/markdown-renderer/replace-components/sequence-diagram/sequence-diagram-replacer.tsx Normal file
View file

@ -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>
}
}