draft-js-prism-decorator
This generates a decorator that applies syntax highlighting to Draft.js code blocks with Prism.js.
It is a simple decorator object with just strategy
and component
, so you can easily integrate it into your Draft.js app.
Demo & Document
https://y-hiraoka.github.io/draft-js-prism-decorator
Install
npm i draft-js-prism-decorator draft-js prismjs
draft-js
and prismjs
are peerDependencies for draft-js-prism-decorator
.
Usage
import "prismjs/themes/prism.css";
import { useState } from "react";
import { Editor, CompositeDecorator, ContentBlock, EditorState } from "draft-js";
import createPrismDecorator from "draft-js-prism-decorator";
const prismDecorator = createPrismDecorator();
const decorators = new CompositeDecorator([prismDecorator, otherDecorator]);
const EditorApp = () => {
const [editorState, setEditorState] = useState(
EditorState.createEmpty(decorators),
);
return <Editor editorState={editorState} onChange={setEditorState} />
};
API
Two options can be passed:
import { ContentBlock, DraftDecorator } from "draft-js";
type Options = {
filter?: (block: ContentBlock) => boolean;
getLanguage?: (block: ContentBlock) => string;
};
default export function createPrismDecorator(options?: Options): DraftDecorator;
filter
A function that filters blocks. By default, it is determined by whether block.getType()
is "code-block"
or not.
getLanguage
A function that gets language string. If it is not passed, block.getData().get("language")
will be used.
LICENSE
MIT