use idiomatic style

demo/Menu.tsx

@@ -3,6 +3,8 @@ import type { MarkType } from "prosemirror-model";
 import type { EditorState, Transaction } from "prosemirror-state";
 import React, { ReactNode } from "react";
 
+import { useEditorEventCallback, useEditorState } from "../src/index.js";
+
 function isMarkActive(mark: MarkType, state: EditorState): boolean {
   if (!state.selection) return false;
   const { from, $from, to, empty } = state.selection;
@@ -31,28 +33,35 @@ export function Button(props: {
   );
 }
 
-export default function Menu(props: {
-  state: EditorState;
-  dispatchTransaction: (transaction: Transaction) => void;
-}) {
-  const { marks } = props.state.schema;
+export default function Menu() {
+  const state = useEditorState();
+  const { marks } = state.schema;
+
+  const toggleBold = useEditorEventCallback((view) => {
+    if (!view) return;
+    const toggleBoldMark = toggleMark(marks["bold"]);
+    toggleBoldMark(view.state, view.dispatch, view);
+  });
+
+  const toggleItalic = useEditorEventCallback((view) => {
+    if (!view) return;
+    const toggleBoldMark = toggleMark(marks["em"]);
+    toggleBoldMark(view.state, view.dispatch, view);
+  });
+
   return (
     <div className="menu">
       <Button
         className="bold"
-        isActive={isMarkActive(marks["strong"], props.state)}
-        onClick={() =>
-          toggleMark(marks["strong"])(props.state, props.dispatchTransaction)
-        }
+        isActive={isMarkActive(marks["strong"], state)}
+        onClick={toggleBold}
       >
         B
       </Button>
       <Button
         className="italic"
-        isActive={isMarkActive(marks["em"], props.state)}
-        onClick={() =>
-          toggleMark(marks["em"])(props.state, props.dispatchTransaction)
-        }
+        isActive={isMarkActive(marks["em"], state)}
+        onClick={toggleItalic}
       >
         I
       </Button>

demo/main.tsx

@@ -119,13 +119,13 @@ function DemoEditor() {
 
   return (
     <main>
-      <Menu state={state} dispatchTransaction={dispatchTransaction} />
       <ProseMirror
         mount={mount}
         state={state}
         nodeViews={nodeViews}
         dispatchTransaction={dispatchTransaction}
       >
+        <Menu />
         <div ref={setMount} />
         {renderNodeViews()}
       </ProseMirror>