Misc fixes after review

Author: matthewlipski

examples/03-ui-components/04-side-menu-buttons/src/RemoveBlockButton.tsx

@@ -3,7 +3,7 @@ import { SideMenuExtension } from "@blocknote/core/extensions";
 import {
   useBlockNoteEditor,
   useComponentsContext,
-  useExtension,
+  useExtensionState,
 } from "@blocknote/react";
 import { MdDelete } from "react-icons/md";
 
@@ -13,7 +13,13 @@ export function RemoveBlockButton() {
 
   const Components = useComponentsContext()!;
 
-  const sideMenu = useExtension(SideMenuExtension);
+  const block = useExtensionState(SideMenuExtension, {
+    selector: (state) => state?.block,
+  });
+
+  if (!block) {
+    return null;
+  }
 
   return (
     <Components.SideMenu.Button
@@ -22,7 +28,7 @@ export function RemoveBlockButton() {
         <MdDelete
           size={24}
           onClick={() => {
-            editor.removeBlocks([sideMenu.store.state!.block]);
+            editor.removeBlocks([block]);
           }}
         />
       }

examples/03-ui-components/05-side-menu-drag-handle-items/src/ResetBlockTypeItem.tsx

@@ -3,7 +3,7 @@ import { SideMenuExtension } from "@blocknote/core/extensions";
 import {
   useBlockNoteEditor,
   useComponentsContext,
-  useExtension,
+  useExtensionState,
 } from "@blocknote/react";
 import { ReactNode } from "react";
 
@@ -12,12 +12,18 @@ export function ResetBlockTypeItem(props: { children: ReactNode }) {
 
   const Components = useComponentsContext()!;
 
-  const sideMenu = useExtension(SideMenuExtension);
+  const block = useExtensionState(SideMenuExtension, {
+    selector: (state) => state?.block,
+  });
+
+  if (!block) {
+    return null;
+  }
 
   return (
     <Components.Generic.Menu.Item
       onClick={() => {
-        editor.updateBlock(sideMenu.store.state!.block, { type: "paragraph" });
+        editor.updateBlock(block, { type: "paragraph" });
       }}
     >
       {props.children}

examples/03-ui-components/13-custom-ui/src/App.tsx

@@ -1,4 +1,3 @@
-import {  } from "@blocknote/core";
 import { filterSuggestionItems } from "@blocknote/core/extensions";
 import "@blocknote/core/fonts/inter.css";
 import {

examples/03-ui-components/13-custom-ui/src/MUIFormattingToolbar.tsx

@@ -108,6 +108,7 @@ function MUIToolbarSelect<Item extends { name: string; icon?: FC }>(props: {
 function MUIBlockTypeSelect() {
   const editor = useBlockNoteEditor<TextBlockSchema>();
 
+  // The block currently containing the text cursor.
   const block = useEditorState({
     editor,
     selector: ({ editor }) => editor.getTextCursorPosition().block,

examples/03-ui-components/13-custom-ui/src/MUISideMenu.tsx

@@ -26,6 +26,7 @@ function MUIRemoveBlockItem(
 ) {
   const editor = useBlockNoteEditor();
   const sideMenu = useExtension(SideMenuExtension, { editor });
+
   // Deletes the block next to the side menu.
   const onClick = useCallback(() => {
     sideMenu.unfreezeMenu();
@@ -83,6 +84,11 @@ function MUIDragHandleButton(props: SideMenuProps) {
 
   const editor = useBlockNoteEditor();
   const sideMenu = useExtension(SideMenuExtension, { editor });
+  const block = useExtensionState(SideMenuExtension, {
+    editor,
+    selector: (state) => state?.block,
+  });
+
   // Handles opening and closing the drag handle menu.
   const onClick = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
@@ -95,16 +101,18 @@ function MUIDragHandleButton(props: SideMenuProps) {
     setAnchorEl(null);
   }, []);
 
+  if (!block) {
+    return null;
+  }
+
   return (
     <>
       <IconButton
         size={"small"}
         component={"button"}
         draggable={"true"}
         onClick={onClick}
-        onDragStart={(e) =>
-          sideMenu.blockDragStart(e, sideMenu.store.state!.block)
-        }
+        onDragStart={(e) => sideMenu.blockDragStart(e, block)}
         onDragEnd={sideMenu.blockDragEnd}
       >
         <DragIndicator
@@ -132,7 +140,6 @@ function MUISideMenu(props: SideMenuProps & { children: ReactNode }) {
   // centered.
   const sideMenuHeight = useExtensionState(SideMenuExtension, {
     selector: (state) => {
-      // TODO this feels like a hack
       if (state && state.block.type === "heading") {
         if (state.block.props.level === 1) {
           return 78;

examples/07-collaboration/05-comments/src/App.tsx

@@ -75,12 +75,12 @@ function Document() {
   // setup the editor with comments and collaboration
   const editor = useCreateBlockNote(
     {
-      extensions: [CommentsExtension({ threadStore, resolveUsers })],
       collaboration: {
         provider,
         fragment: doc.getXmlFragment("blocknote"),
         user: { color: getRandomColor(), name: activeUser.username },
       },
+      extensions: [CommentsExtension({ threadStore, resolveUsers })],
     },
     [activeUser, threadStore],
   );

packages/core/src/blocks/Table/block.ts

@@ -2,6 +2,7 @@ import { Node, mergeAttributes } from "@tiptap/core";
 import { DOMParser, Fragment, Node as PMNode, Schema } from "prosemirror-model";
 import { CellSelection, TableView } from "prosemirror-tables";
 import { NodeView } from "prosemirror-view";
+
 import { createExtension } from "../../editor/BlockNoteExtension.js";
 import {
   BlockConfig,

packages/core/src/comments/index.ts

@@ -1,3 +1,5 @@
+export * from "./extension.js";
+export * from "./mark.js";
 export * from "./threadstore/DefaultThreadStoreAuth.js";
 export * from "./threadstore/ThreadStore.js";
 export * from "./threadstore/ThreadStoreAuth.js";
@@ -6,5 +8,3 @@ export * from "./threadstore/yjs/RESTYjsThreadStore.js";
 export * from "./threadstore/yjs/YjsThreadStore.js";
 export * from "./threadstore/yjs/YjsThreadStoreBase.js";
 export * from "./types.js";
-export * from "./extension.js";
-export * from "./mark.js";

packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -1,16 +1,15 @@
 import { Block, PartialBlock } from "../../blocks/defaultBlocks.js";
-import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
-
 import { editorHasBlockWithType } from "../../blocks/defaultBlockTypeGuards.js";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import {
   BlockSchema,
   InlineContentSchema,
   StyleSchema,
   isStyledTextInlineContent,
 } from "../../schema/index.js";
 import { formatKeyboardShortcut } from "../../util/browser.js";
-import { DefaultSuggestionItem } from "./DefaultSuggestionItem.js";
 import { FilePanelExtension } from "../FilePanel/FilePanel.js";
+import { DefaultSuggestionItem } from "./DefaultSuggestionItem.js";
 import { SuggestionMenu } from "./SuggestionMenu.js";
 
 // Sets the editor's text cursor position to the next content editable block,

packages/react/src/blocks/File/helpers/render/AddFileButton.tsx

@@ -3,10 +3,10 @@ import { FilePanelExtension } from "@blocknote/core/extensions";
 import { ReactNode, useCallback } from "react";
 import { RiFile2Line } from "react-icons/ri";
 
+import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor.js";
+import { useExtension } from "../../../../hooks/useExtension.js";
 import { useDictionary } from "../../../../i18n/dictionary.js";
 import { ReactCustomBlockRenderProps } from "../../../../schema/ReactBlockSpec.js";
-import { useExtension } from "../../../../hooks/useExtension.js";
-import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor.js";
 
 export const AddFileButton = (
   props: Omit<