docs: fix "Adding Formatting Toolbar Buttons" example (#1944)

Author: matthewlipski

examples/03-ui-components/02-formatting-toolbar-buttons/README.md

@@ -1,6 +1,6 @@
 # Adding Formatting Toolbar Buttons
 
-In this example, we add a blue text/background color and code style button to the Formatting Toolbar.
+In this example, we add a blue text/background color and code style button to the Formatting Toolbar. We also make sure it only shows up when some text is selected.
 
 **Try it out:** Select some text to open the Formatting Toolbar, and click one of the new buttons!
 

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

@@ -69,7 +69,7 @@ export default function App() {
       {
         type: "paragraph",
         content:
-          "Notice that the button doesn't appear when the image block above is selected, as it has no inline content.",
+          "Notice that the buttons don'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

@@ -27,11 +27,11 @@ 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 
+  // 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)) {
+  if (blocks.filter((block) => block.content !== undefined).length === 0) {
     return null;
   }