diff --git a/docs/pages/docs/advanced/nextjs.mdx b/docs/pages/docs/advanced/nextjs.mdx
index 7fc38c8354..fc730c96a3 100644
--- a/docs/pages/docs/advanced/nextjs.mdx
+++ b/docs/pages/docs/advanced/nextjs.mdx
@@ -12,9 +12,10 @@ Make sure to use BlockNote in a [Client Component](https://nextjs.org/docs/getti
 
 ```typescript jsx
 "use client"; // this registers <Editor> as a Client Component
-import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/core/fonts/inter.css";
-import "@blocknote/react/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 
 // Our <Editor> component we can reuse later
 export default function Editor() {
diff --git a/examples/02-ui-components/05-side-menu-drag-handle-items/App.tsx b/examples/02-ui-components/05-side-menu-drag-handle-items/App.tsx
index 9f9cb25f57..5050132bbc 100644
--- a/examples/02-ui-components/05-side-menu-drag-handle-items/App.tsx
+++ b/examples/02-ui-components/05-side-menu-drag-handle-items/App.tsx
@@ -5,12 +5,13 @@ import {
   RemoveBlockItem,
   SideMenu,
   SideMenuController,
-  useComponentsContext,
   useCreateBlockNote,
 } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 
+import { ResetBlockTypeItem } from "./ResetBlockTypeItem";
+
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
@@ -34,8 +35,6 @@ export default function App() {
     ],
   });
 
-  const Components = useComponentsContext()!;
-
   // Renders the editor instance.
   return (
     <BlockNoteView editor={editor} sideMenu={false}>
@@ -48,12 +47,7 @@ export default function App() {
                 <RemoveBlockItem {...props}>Delete</RemoveBlockItem>
                 <BlockColorsItem {...props}>Colors</BlockColorsItem>
                 {/* Item which resets the hovered block's type. */}
-                <Components.Generic.Menu.Item
-                  onClick={() => {
-                    editor.updateBlock(props.block, { type: "paragraph" });
-                  }}>
-                  Reset Type
-                </Components.Generic.Menu.Item>
+                <ResetBlockTypeItem {...props}>Reset Type</ResetBlockTypeItem>
               </DragHandleMenu>
             )}
           />
diff --git a/examples/02-ui-components/05-side-menu-drag-handle-items/ResetBlockTypeItem.tsx b/examples/02-ui-components/05-side-menu-drag-handle-items/ResetBlockTypeItem.tsx
new file mode 100644
index 0000000000..e28ce16da0
--- /dev/null
+++ b/examples/02-ui-components/05-side-menu-drag-handle-items/ResetBlockTypeItem.tsx
@@ -0,0 +1,20 @@
+import {
+  DragHandleMenuProps,
+  useBlockNoteEditor,
+  useComponentsContext,
+} from "@blocknote/react";
+
+export function ResetBlockTypeItem(props: DragHandleMenuProps) {
+  const editor = useBlockNoteEditor();
+
+  const Components = useComponentsContext()!;
+
+  return (
+    <Components.Generic.Menu.Item
+      onClick={() => {
+        editor.updateBlock(props.block, { type: "paragraph" });
+      }}>
+      Reset Type
+    </Components.Generic.Menu.Item>
+  );
+}