Draft-js-regex-highlighter-plugin NPM

draft-js-regex-highlighter-plugin

A DraftJS plugin for highlighting valid/invalid strings based on regex and/or supplied strings.

This plugin has only been tested with react-draft-wysiwyg but should work using any DraftJS-based editor.

Usage

npm i --save draft-js-regex-highlighter-plugin

then import from your editor component

import { createHighlighterPlugin } from "draft-js-regex-highlighter-plugin"

Example

This example uses a regex to match all {{ handlebar }} variables.

import React, { Component } from "react"
import { Editor } from "react-draft-wysiwyg"
import { createHighlighterPlugin } from "draft-js-regex-highlighter-plugin"
import { EditorState } from "draft-js"

const highlighterConfig = {
      regex: new RegExp(/{{\s*([^}]+)\s*}}/, 'g'),
      theme: {
        valid: {
            background: "lightblue"
        }
        invalid: {
            background: "red"
        }
      }
    }

const customDecorators = [
    createHighlighterPlugin(highlighterConfig)
]

export default class DemoEditor extends Component {

    state = {
        editorState: EditorState.createEmpty()
    }

    onChange = (editorState) => {
        this.setState({ editorState })
    }

    render() {
        return (
            <Editor
                editorState={this.state.editorState}
                onEditorStateChange={this.onChange}
                customDecorators={customDecorators}
            />
        )
    }
}

Options

Param	Type	Required	Description
regex	RegExp	*	The primary pattern used to match content
secondaryRegex	RegExp		Optional secondary pattern to further drill down on validity of matches
variables	object		An object of strings to further drill down on validity of matches
component	Node		Optional React component to render instead of the default Highlighter component
theme	object		Theme object for styling the valid and invalid matches