How to pass events in the SLATEJS rich text editor-CodePudding

I'm trying coding follow this doc:

https://docs.slatejs.org/walkthroughs/05-executing-commands

I just wanted to make it elegant, so I tried to separate the Toolbar Button into other files. But how do I pass the event onKeydown there?

I tried the following code, but I got the result that 'editor is undefined'

Did I overlook something?

Here is a simple DEMO:

exprot function App(){
 //...others

 const [editor] = useState(() => withReact(createEditor()));
 return (
   <Slate {...props} >
     <MyToolbar {...editor} />
     //...others
   </Slate>
 );
}
function MyToolbar(editor: ReactEditor){
   return (
      <div>
        //Icon button span
        <span {...props} onm ouseDown={event => {
                            event.preventDefault();
                            CustomEditor.toggleBold(editor);
                    }}></span>
      </div>
   );
}

CodePudding user response：

When rendering the component, you can send the editor object as a prop to the MyToolbar component in a React project.

Here is the refactored code:

function App(){
  //...others

  const [editor] = useState(() => withReact(createEditor()));
  return (
    <Slate {...props} >
      <MyToolbar editor={editor} />
      //...others
    </Slate>
  );
}

function MyToolbar(props) {
  const { editor } = props;
  return (
    <div>
      //Icon button span
      <span {...props} onm ouseDown={event => {
        event.preventDefault();
        CustomEditor.toggleBold(editor);
      }}></span>
    </div>
  );
}