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

Replace MathJax with KaTeX (#497)

Browse source 
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
mrdrogdrog 2020-08-27 15:13:35 +02:00 • committed by GitHub
parent 7adb86846b
commit ef36123377
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 85 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,7 +25,6 @@ import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState
import { Alert } from 'react-bootstrap'
import ReactHtmlParser, { convertNodeToElement, Transform } from 'react-html-parser'
import { Trans } from 'react-i18next'
import MathJaxReact from 'react-mathjax'
import { useSelector } from 'react-redux'
import useResizeObserver from 'use-resize-observer'
import { TocAst } from '../../external-types/markdown-it-toc-done-right/interface'
@ -60,7 +59,7 @@ import { ComponentReplacer, SubNodeConverter } from './replace-components/Compon
import { GistReplacer } from './replace-components/gist/gist-replacer'
import { HighlightedCodeReplacer } from './replace-components/highlighted-fence/highlighted-fence-replacer'
import { ImageReplacer } from './replace-components/image/image-replacer'
import { MathjaxReplacer } from './replace-components/mathjax/mathjax-replacer'
import { KatexReplacer } from './replace-components/katex/katex-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'
@ -244,12 +243,12 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content, onM
permalinkSymbol: '<i class="fa fa-link"></i>'
})
md.use(mathJax({
beforeMath: '<codimd-mathjax>',
afterMath: '</codimd-mathjax>',
beforeInlineMath: '<codimd-mathjax inline>',
afterInlineMath: '</codimd-mathjax>',
beforeDisplayMath: '<codimd-mathjax>',
afterDisplayMath: '</codimd-mathjax>'
beforeMath: '<codimd-katex>',
afterMath: '</codimd-katex>',
beforeInlineMath: '<codimd-katex inline>',
afterInlineMath: '</codimd-katex>',
beforeDisplayMath: '<codimd-katex>',
afterDisplayMath: '</codimd-katex>'
}))
md.use(markdownItRegex, replaceLegacyYoutubeShortCode)
md.use(markdownItRegex, replaceLegacyVimeoShortCode)
@ -312,7 +311,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content, onM
new TocReplacer(),
new HighlightedCodeReplacer(),
new QuoteOptionsReplacer(),
new MathjaxReplacer()
new KatexReplacer()
]
if (onMetaDataChange) {
// This is used if the front-matter callback is never called, because the user deleted everything regarding metadata from the document
@ -337,9 +336,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content, onM
</Trans>
</Alert>
</ShowIf>
<MathJaxReact.Provider>
{result}
</MathJaxReact.Provider>
{result}
</div>
</div>
)

28
src/components/markdown-renderer/replace-components/katex/katex-replacer.tsx Normal file
View file

@ -0,0 +1,28 @@
import { DomElement } from 'domhandler'
import React from 'react'
import 'katex/dist/katex.min.css'
import TeX from '@matejmazur/react-katex'
import { ComponentReplacer } from '../ComponentReplacer'
const getNodeIfKatexBlock = (node: DomElement): (DomElement|undefined) => {
if (node.name !== 'p' || !node.children || node.children.length !== 1) {
return
}
const katexNode = node.children[0]
return (katexNode.name === 'codimd-katex' && katexNode.attribs?.inline === undefined) ? katexNode : undefined
}
const getNodeIfInlineKatex = (node: DomElement): (DomElement|undefined) => {
return (node.name === 'codimd-katex' && node.attribs?.inline !== undefined) ? node : undefined
}
export class KatexReplacer implements ComponentReplacer {
getReplacement (node: DomElement, index: number): React.ReactElement | undefined {
const katex = getNodeIfKatexBlock(node) || getNodeIfInlineKatex(node)
if (katex?.children && katex.children[0]) {
const mathJaxContent = katex.children[0]?.data as string
const isInline = (katex.attribs?.inline) !== undefined
return <TeX key={index} block={!isInline} math={mathJaxContent} errorColor={'#cc0000'}/>
}
}
}

27
src/components/markdown-renderer/replace-components/mathjax/mathjax-replacer.tsx
View file

@ -1,27 +0,0 @@
import { DomElement } from 'domhandler'
import React from 'react'
import MathJax from 'react-mathjax'
import { ComponentReplacer, SubNodeConverter } from '../ComponentReplacer'
const getNodeIfMathJaxBlock = (node: DomElement): (DomElement|undefined) => {
if (node.name !== 'p' || !node.children || node.children.length !== 1) {
return
}
const mathJaxNode = node.children[0]
return (mathJaxNode.name === 'codimd-mathjax' && mathJaxNode.attribs?.inline === undefined) ? mathJaxNode : undefined
}
const getNodeIfInlineMathJax = (node: DomElement): (DomElement|undefined) => {
return (node.name === 'codimd-mathjax' && node.attribs?.inline !== undefined) ? node : undefined
}
export class MathjaxReplacer implements ComponentReplacer {
getReplacement (node: DomElement, index: number, subNodeConverter: SubNodeConverter): React.ReactElement | undefined {
const mathJax = getNodeIfMathJaxBlock(node) || getNodeIfInlineMathJax(node)
if (mathJax?.children && mathJax.children[0]) {
const mathJaxContent = mathJax.children[0]?.data as string
const isInline = (mathJax.attribs?.inline) !== undefined
return <MathJax.Node key={index} inline={isInline} formula={mathJaxContent}/>
}
}
}