Math editing support for DraftJS Plugins Editor
npm install draft-js-mathjax-plugin-fixForked: https://github.com/efloti/draft-js-mathjax-plugin
This is a plugin for the draft-js-plugins-editor.
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)
!demo
```
npm install draft-js-mathjax-plugin --save
`js
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 (
onChange={this.onChange}
plugins={plugins}
/>
)
}
}
`
Learn more draftjs-plugins
- macros: an object to define mathjax macros. Example:`
js`
const mathjaxConfig = {
macros: {
bold: ['{\\bf #1}', 1],
},
}
completion
see mathjax doc to find out how to define macros.
- (default: 'auto'): 'none' | 'manual' | 'auto'.manual
If you choose , use ctrl- to launch completion about the current tex command (if any).Shift
Use ()Tab to see each possible completion in turn.script
- (default: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js'): mathjaxConfig
url to load mathjax from the plugin
- : see mathjax configuration object. The default is:`
js``
{
jax: ['input/TeX', 'output/CommonHTML'],
TeX: {
extensions: ['autoload-all.js'],
},
messageStyles: 'none',
showProcessingMessages: false,
showMathMenu: false,
showMathMenuMSIE: false,
preview: 'none',
delayStartupTypeset: true,
}
MIT