问题

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} onMouseDown={event => {
                            event.preventDefault();
                            CustomEditor.toggleBold(editor);
                    }}></span>
      </div>
   );
}

(Note: The code appears to have some HTML encoding issues with '<' and '>' characters, which need to be corrected to make it work.)

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} onMouseDown={event => {
                            event.preventDefault();
                            CustomEditor.toggleBold(editor);
                    }}></span>
      </div>
   );
}

答案1

得分: 1

不要将editor作为一个属性传递，使用钩子useSlate()来获取它：

import { useSlate } from "slate-react";

function MyToolbar() {
  const editor = useSlate();

  return (
    <div>
      <span
        onMouseDown={event => {
          event.preventDefault();
          CustomEditor.toggleBold(editor);
        }}
      ></span>
    </div>
  );
}

import { useSlate } from "slate-react";

function MyToolbar() {
  const editor = useSlate();

  return (
    <div>
      <span
        onMouseDown={event => {
          event.preventDefault();
          CustomEditor.toggleBold(editor);
        }}
      ></span>
    </div>
  );
}