@draft-js-enhance-plugins/code

DraftJS Code Plugin

This is a plugin for the @draft-js-plugins/editor.

Feature

• Syntax highlighting with prismjs

• Press enter to insert new line in the same code-block

• Automatically remove all inline styles

TODO

• [ ] Enable change the language key to the data of the code block

Usage

import { EditorState } from 'draft-js';
import Editor from '@draft-js-plugins/editor';
import { Map } from 'immutable';
import createCodePlugin from '@draft-js-enhance-plugins/code';

const codePlugin = createCodePlugin();

const plugins = [codePlugin];

function Example() {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  return (
    <Editor
      editorState={editorState}
      onChange={setEditorState}
      blockRenderMap={DefaultDraftBlockRenderMap.merge(
        Map({
          'code-block': {
            element: 'pre',
            wrapper: <div />,
          },
        })
      )}
      plugins={plugins}
    />
  );
}