draft-js-ace

Code highlighting for DraftJS using Ace

Usage no npm install needed!

<script type="module">
  import draftJsAce from 'https://cdn.skypack.dev/draft-js-ace';
</script>

README

draft-js-ace

draft-js-ace is a decorator for DraftJS to highlight code blocks using Ace.

Installation

$ npm install draft-js-ace

Usage

import Draft from 'draft-js'
import AceDecorator from 'draft-js-prism'

const decorator = new AceDecorator({
  mode: 'javascript', // Default is javascript.
  theme: 'monokai', // Default is monokai.
  filter: // Your filter function. Only applies syntax highlight to code-blocks by default.
});

const editorState = Draft.EditorState.createEmpty(decorator)

You'll also need to wrap your Editor Component like this:

<div className='ace-[put theme name here]'>
  <Editor />
</div>