docs: Updated formatting toolbar buttons example (#1915)

Author: matthewlipski

examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx

@@ -60,6 +60,11 @@ export default function App() {
         type: "paragraph",
         content: "Select some text to try them out",
       },
+      {
+        type: "paragraph",
+        content:
+          "Notice that the button doesn't appear when the image block above is selected, as it has no inline content.",
+      },
       {
         type: "paragraph",
       },

examples/03-ui-components/02-formatting-toolbar-buttons/src/BlueButton.tsx

@@ -3,6 +3,7 @@ import {
   useBlockNoteEditor,
   useComponentsContext,
   useEditorContentOrSelectionChange,
+  useSelectedBlocks,
 } from "@blocknote/react";
 import { useState } from "react";
 
@@ -26,6 +27,14 @@ export function BlueButton() {
     );
   }, editor);
 
+  // Doesn't render unless a at least one block with inline content is 
+  // selected. You can use a similar pattern of returning `null` to 
+  // conditionally render buttons based on the editor state.
+  const blocks = useSelectedBlocks();
+  if (blocks.filter((block) => block.content !== undefined)) {
+    return null;
+  }
+
   return (
     <Components.FormattingToolbar.Button
       mainTooltip={"Blue Text & Background"}