Have ideas to improve npm?Join in the discussion! »

    draft-js-multi-inline-highlight
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.1 • Public • Published

    Multi-inline highlighting for DraftJS editor

    Allows to do multi selections in DraftJS editor via a custom decorator.

    The source for full demo example is here. Also, you can try working example.

    Install

    npm i draft-js-multi-inline-highlight

    or

    yarn add draft-js-multi-inline-highlight

    Usage

    Import

    import {
      MultiHighlightDecorator,
      WordMatcher,
      SentenceMatcher,
      MultiHighlightConfig,
    } from "draft-js-multi-inline-highlight";

    Configuration

    const initHighlightConfig: MultiHighlightConfig = {
      rules: [
        {
          content: ["His back begins to ache, but he knows he can bear it."],
          style: "yellow",
          matcher: SentenceMatcher,
        },
        {
          content: ["and"],
          style: "red",
          matcher: WordMatcher,
        },
        {
          content: ["pulled", "knows"],
          style: "blue",
          matcher: WordMatcher,
        },
      ],
      styles: hightlightStyles,
    };

    Initialization

    const [highlightConfig, setHighlightConfig] = useState<MultiHighlightConfig>(
      initHighlightConfig
    );
    const [editorState, setEditorState] = useState(
      EditorState.createWithContent(
        contentState,
        MultiHighlightDecorator(highlightConfig)
      )
    );

    Chage highlighting state according to the new configuration

    useEffect(() => {
      if (highlightConfig) {
        setEditorState(
          EditorState.set(editorState, {
            decorator: MultiHighlightDecorator(highlightConfig),
          })
        );
      }
    }, [highlightConfig]);

    Install

    npm i draft-js-multi-inline-highlight

    DownloadsWeekly Downloads

    27

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    22.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar