fix: Nest block buttons should only be visible for certain blocks (#646)

* Made nest block buttons only visible for blocks with `"inline"` content

* Updated test screenshots

Author: matthewlipski

packages/react/src/components/FormattingToolbar/mantine/DefaultButtons/NestBlockButtons.tsx

@@ -4,12 +4,13 @@ import {
   InlineContentSchema,
   StyleSchema,
 } from "@blocknote/core";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { RiIndentDecrease, RiIndentIncrease } from "react-icons/ri";
 
 import { useBlockNoteEditor } from "../../../../hooks/useBlockNoteEditor";
 import { useEditorContentOrSelectionChange } from "../../../../hooks/useEditorContentOrSelectionChange";
 import { ToolbarButton } from "../../../mantine-shared/Toolbar/ToolbarButton";
+import { useSelectedBlocks } from "../../../../hooks/useSelectedBlocks";
 
 export const NestBlockButton = () => {
   const editor = useBlockNoteEditor<
@@ -18,6 +19,8 @@ export const NestBlockButton = () => {
     StyleSchema
   >();
 
+  const selectedBlocks = useSelectedBlocks(editor);
+
   const [canNestBlock, setCanNestBlock] = useState<boolean>(() =>
     editor.canNestBlock()
   );
@@ -31,6 +34,16 @@ export const NestBlockButton = () => {
     editor.nestBlock();
   }, [editor]);
 
+  const show = useMemo(() => {
+    return !selectedBlocks.find(
+      (block) => editor.schema.blockSchema[block.type].content !== "inline"
+    );
+  }, [editor.schema.blockSchema, selectedBlocks]);
+
+  if (!show) {
+    return null;
+  }
+
   return (
     <ToolbarButton
       onClick={nestBlock}
@@ -45,6 +58,8 @@ export const NestBlockButton = () => {
 export const UnnestBlockButton = () => {
   const editor = useBlockNoteEditor<any, any, any>();
 
+  const selectedBlocks = useSelectedBlocks(editor);
+
   const [canUnnestBlock, setCanUnnestBlock] = useState<boolean>(() =>
     editor.canUnnestBlock()
   );
@@ -58,6 +73,16 @@ export const UnnestBlockButton = () => {
     editor.unnestBlock();
   }, [editor]);
 
+  const show = useMemo(() => {
+    return !selectedBlocks.find(
+      (block) => editor.schema.blockSchema[block.type].content !== "inline"
+    );
+  }, [editor.schema.blockSchema, selectedBlocks]);
+
+  if (!show) {
+    return null;
+  }
+
   return (
     <ToolbarButton
       onClick={unnestBlock}