1.3.6 • Published 4 years ago
@outclass/draft-js-mathjax-plugin v1.3.6
DraftJS MathJax Plugin
This is a plugin for the draft-js-plugins-editor
.
This plugin was forked from efloti/draft-js-mathjax-plugin!
This plugin allows you to edit math rendered by mathjax. Give it a try!
It uses the traditional $
key to insert inline math and CTRL+M
for block one. (Type \$
to insert the $
character)
Installation
npm install draft-js-mathjax-plugin --save
Usage
import React, { Component } from 'react'
import { EditorState } from 'draft-js'
import Editor from 'draft-js-plugins-editor'
import createMathjaxPlugin from 'draft-js-mathjax-plugin'
const mathjaxPlugin = createMathjaxPlugin(/* optional configuration object */)
const plugins = [
mathjaxPlugin,
]
export default class MyEditor extends Component {
state = {
editorState: EditorState.createEmpty(),
}
onChange = (editorState) => {
this.setState({
editorState,
})
}
render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
/>
)
}
}
Learn more draftjs-plugins
Optional configuration Object
macros
: an object to define mathjax macros. Example:
see mathjax doc to find out how to define macros.const mathjaxConfig = { macros: { bold: ['{\\bf #1}', 1], }, }
completion
(default:'auto'
):'none' | 'manual' | 'auto'
.If you choose
manual
, usectrl-<space>
to launch completion about the current tex command (if any).Use (
Shift
)Tab
to see each possible completion in turn.script
(default:'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js'
):url to load mathjax from the plugin
mathjaxConfig
: see mathjax configuration object. The default is:{ jax: ['input/TeX', 'output/CommonHTML'], TeX: { extensions: ['autoload-all.js'], }, messageStyles: 'none', showProcessingMessages: false, showMathMenu: false, showMathMenuMSIE: false, preview: 'none', delayStartupTypeset: true, }
License
MIT