From 7538c5e5798a26132f49c2579da392cb3aa79d94 Mon Sep 17 00:00:00 2001
From: Matthew Lipski <matthewlipski@gmail.com>
Date: Tue, 5 Aug 2025 00:45:47 +0200
Subject: [PATCH] Updated formatting toolbar buttons example

---
 .../02-formatting-toolbar-buttons/src/App.tsx            | 5 +++++
 .../02-formatting-toolbar-buttons/src/BlueButton.tsx     | 9 +++++++++
 2 files changed, 14 insertions(+)

diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx b/examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx
index 92c4b48073..bbed630eff 100644
--- a/examples/03-ui-components/02-formatting-toolbar-buttons/src/App.tsx
+++ b/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",
       },
diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/src/BlueButton.tsx b/examples/03-ui-components/02-formatting-toolbar-buttons/src/BlueButton.tsx
index c5bad4edaa..2ca30c6393 100644
--- a/examples/03-ui-components/02-formatting-toolbar-buttons/src/BlueButton.tsx
+++ b/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"}