Как применить MathJax / KaTex для рендеринга компонента React - PullRequest
Новая
       50

Как применить MathJax / KaTex для рендеринга компонента React

0 голосов
/ 29 октября 2019

Я делаю веб-редактор, используя React & SlateJS. В содержании редактора есть код LaTex, и я хочу, чтобы пользователь видел отображенные уравнения LaTex. MathJax и KaTex имеют функцию автоматического рендеринга, загружая их как CDN. После того, как они загружены, отображается содержимое HTML-тела. Но они не визуализируются в реальном времени, когда я изменяю содержимое.

Итак, я сделал кнопку, которая открывает модальный , который отображает не редактируемое содержимое редактора в меньшем окне, и яхочу, чтобы коды LaTex отображались в модальном режиме.

Компонент APP: 

import {Editor} from 'slate-react';
import ReactModel from 'react-modal';
import RenderedEditorDialog from "./RenderedEditorDialog";

class APP extends React.component {

    ...

    render() {
        return (
            <div className={"editorContainer"}>
                <div className={"editor"}>
                    <Editor
                        autoFocus
                        ref={this.ref}
                        value={this.state.value}
                        onChange={this.onChange}
                        onKeyDown={this.onKeyDown}
                        renderMark={this.renderMarks}
                        renderBlock={this.renderBlock}
                    />
                </div>
                <ReactModal
                    isOpen={this.state.showMathDialog}
                    contentLabel="Rendered content"
                    onRequestClose={this.handleCloseMathDialog}
                >
                    <button onClick={this.handleCloseMathDialog}>Close Dialog</button>
                    <RenderedEditorDialog value={this.state.value}/>
                </ReactModal>
            </div>
        )
    }
}

RenderedEditorDialog (модальный) компонент: 

import {Editor} from 'slate-react';

class RenderedEditorDialog extends React.Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <Editor
                    value={this.props.value}
                    renderMark={this.renderMarks}
                    renderBlock={this.renderBlock}/>
            </div>
        )
    }
}

MyВопрос в том, как я могу применить MathJax / KaTex для рендеринга контента в RenderedEditorDialog компоненте?

Заранее спасибо!

...