Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/letranloc/draft-js-katex-plugin
A Katex plugin for DraftJS.
https://github.com/letranloc/draft-js-katex-plugin
draft-js draftjs-plugin katex katex-plugin react
Last synced: 3 months ago
JSON representation
A Katex plugin for DraftJS.
- Host: GitHub
- URL: https://github.com/letranloc/draft-js-katex-plugin
- Owner: letranloc
- Created: 2017-03-14T12:20:04.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-10-05T15:31:22.000Z (over 1 year ago)
- Last Synced: 2024-02-23T06:23:27.227Z (4 months ago)
- Topics: draft-js, draftjs-plugin, katex, katex-plugin, react
- Language: JavaScript
- Homepage: https://letranloc.github.io/draft-js-katex-plugin?down=0
- Size: 1.6 MB
- Stars: 32
- Watchers: 6
- Forks: 14
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Lists
- awesome-draft-js - Katex - Insert and render LaTeX using Katex. (Plugins and Decorators Built for Draft.js)
- awesome-draft-js - Katex - Insert and render LaTeX using Katex. (Plugins and Decorators Built for Draft.js)
README
# DraftJS KaTeX Plugin
*This is a plugin for the `draft-js-plugins-editor`.*
This plugin insert and render LaTeX using [KaTeX](https://github.com/Khan/KaTeX), modified from [TeX example](https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/tex).
- Integrated with [Khan/math-input](https://github.com/Khan/math-input).
[](https://www.npmjs.com/package/draft-js-katex-plugin)
## Usage
Add MathQuill libs if you want to use MathInput:
```html
```
Add plugin
```js
import createKaTeXPlugin from 'draft-js-katex-plugin';
import katex from 'katex'
const kaTeXPlugin = createKaTeXPlugin({katex});
const { InsertButton } = kaTeXPlugin;
```
With MathInput:
```js
import createKaTeXPlugin from 'draft-js-katex-plugin';
import katex from 'katex'
import MathInput from '../src/components/math-input/components/app';
const kaTeXPlugin = createKaTeXPlugin({katex, MathInput});
const { InsertButton } = kaTeXPlugin;
```
There are more examples in the `stories/index.js` file.
## Configuration options:
Here shown with defaults:
```js
{
katex, // the katex object or a wrapper defining render() and __parse().
doneContent: {
valid: 'Done',
invalid: 'Invalid TeX',
},
MathInput: null, // Sett to the MathInput element to use MathInput
removeContent: 'Remove',
theme: {
// CSS classes, either you define them or they come from the plugin.css import
saveButton: '',
removeButton: '',
invalidButton: '',
buttons: '',
}
// function (string) -> string.
translator: null,
}
```
## Loading katex async
If you want to load katex in the background instead of right away, then you can do this by wrapping the katex object that you pass into the plugin:
```js
//file: asyncKatex.js
let katex = null
const renderQueue = []
System.import(/* webpackChunkName: 'katex' */ 'katex')
.then(function methodName(module) {
katex = module.default
})
.then(() => {
console.log('Katex loaded, ', renderQueue)
if (renderQueue.length) {
const now = Date.now()
renderQueue.map(([d, expression, baseNode, options]) => {
if (now - d < 4000) {
katex.render(expression, baseNode, options)
}
})
}
})
export default {
render: (expression, baseNode, options) => {
if (katex) {
return katex.render(expression, baseNode, options)
}
renderQueue.push([Date.now(), expression, baseNode, options])
},
// parse is only used by this plugin to check syntax validity.
__parse: (expression, options) => {
if (katex) {
return katex.parse(expression, options)
}
return null
}
}
```
Store this in a separate file and and pass it to the plugin config:
```js
import createKaTeXPlugin from 'draft-js-katex-plugin';
import katex from './asyncKatex'
const kaTeXPlugin = createKaTeXPlugin({katex});
```