https://github.com/tarjei/draft-js-mathjax-plugin

Plugin to edit math using (La)TeX (rendered by mathjax) inside draft-js(-editor-plugin). Demo:
https://github.com/tarjei/draft-js-mathjax-plugin

Last synced: 3 months ago
JSON representation

Plugin to edit math using (La)TeX (rendered by mathjax) inside draft-js(-editor-plugin). Demo:

• Host: GitHub
• URL: https://github.com/tarjei/draft-js-mathjax-plugin
• Owner: tarjei
• License: mit
• Created: 2017-09-14T13:54:39.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-05-09T17:01:17.000Z (about 7 years ago)
• Last Synced: 2024-01-23T04:18:58.264Z (5 months ago)
• Language: JavaScript
• Homepage: https://efloti.github.io/draft-js-mathjax-plugin/
• Size: 3.03 MB
• Stars: 5
• Watchers: 3
• Forks: 22
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Lists

• awesome-draft-js - Mathjax - Edit math using (La)TeX rendered by Mathjax. (Plugins and Decorators Built for Draft.js)

README

        
# DraftJS 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!](https://efloti.github.io/draft-js-mathjax-plugin/)

It uses the traditional `$` key to insert inline math and `CTRL+M` for block one. (Type `\$` to insert the `$` character)

![demo](https://github.com/efloti/draft-js-mathjax-plugin/raw/master/demo.gif)

## Installation

```

npm install draft-js-mathjax-plugin --save

```

## Usage

```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 (

      

    )

  }

}

```

Learn more [draftjs-plugins](https://github.com/draft-js-plugins/draft-js-plugins)

## Optional configuration Object

  - `macros`: an object to define mathjax macros. Example:

  

 ```js

  const mathjaxConfig = {

    macros: {

      bold: ['{\\bf #1}', 1],

    },

  }

 ```

  

  see [mathjax doc](http://docs.mathjax.org/en/latest/tex.html?highlight=macros#defining-tex-macros) to find out how to define macros.

  - `completion` (default: `'auto'`): `'none' | 'manual' | 'auto'`.

  

  If you choose `manual`, use `ctrl-` 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](http://docs.mathjax.org/en/latest/options/index.html). 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,                                                     

  }

  ```

## License

MIT