How to use draft-js-plugins in react-hook-form - react-hook-form

Question

I am using react-hook-form and draft.js as wysiwiyg.
My code where I am using draft-js-plugins:
import React, {useRef} from "react";
import { Controller } from "./src";
import Editor from "#draft-js-plugins/editor";
import createToolbarPlugin from "#draft-js-plugins/static-toolbar";
import "draft-js/dist/Draft.css";
import "#draft-js-plugins/static-toolbar/lib/plugin.css";
const staticToolbarPlugin = createToolbarPlugin();
const { Toolbar } = staticToolbarPlugin;
const plugins = [staticToolbarPlugin];
function RichText({ control }) {
const editor = useRef(null);
return (
<div
style={{
border: "1px solid #ccc",
minHeight: 30,
padding: 10
}}
>
<Toolbar />
<Controller
ref={editor}
name="DraftJS"
control={control}
plugins={plugins}
render={({ value, onChange }) => {
return <Editor editorState={value} onChange={onChange} />;
}}
/>
</div>
);
}
export default RichText;
All is ok, I see plugins. But when I want select word and click to plugin (I, B, U) button show me error
props.getEditorState is not a function
I don't understand how to solve it? I found some examples https://www.draft-js-plugins.com/plugin/static-toolbar .but didn't help
live example on codesandbox

Answer 1

I think you have to place the <Toolbar /> component as a sibling to your <Editor /> component and also pass the ref to it.
<Controller
name="DraftJS"
control={control}
render={({ value, onChange, ref }) => {
return (
<>
<Toolbar />
<Editor
ref={ref}
editorState={value}
onChange={onChange}
plugins={plugins}
/>
</>
);
}}
/>