Small fix

Author: matthewlipski

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

@@ -262,18 +262,24 @@ function MUITextAlignButton(props: {
   const editor = useBlockNoteEditor<TextBlockSchema>();
 
   // The text alignment of the block currently containing the text cursor.
-  const [activeTextAlignment, setActiveTextAlignment] = useState(
-    () => editor.getTextCursorPosition().block.props.textAlignment
-  );
+  const [activeTextAlignment, setActiveTextAlignment] = useState(() => {
+    const blockProps = editor.getTextCursorPosition().block.props;
+
+    if ("textAlignment" in blockProps) {
+      return blockProps.textAlignment;
+    }
+
+    return undefined;
+  });
 
   // Updates the text alignment when the editor content or selection changes.
-  useEditorContentOrSelectionChange(
-    () =>
-      setActiveTextAlignment(
-        editor.getTextCursorPosition().block.props.textAlignment
-      ),
-    editor
-  );
+  useEditorContentOrSelectionChange(() => {
+    const blockProps = editor.getTextCursorPosition().block.props;
+
+    if ("textAlignment" in blockProps) {
+      setActiveTextAlignment(blockProps.textAlignment);
+    }
+  }, editor);
 
   // Tooltip for the button.
   const tooltip = useMemo(
@@ -293,6 +299,10 @@ function MUITextAlignButton(props: {
     editor.focus();
   }, [editor, props.textAlignment]);
 
+  if (!activeTextAlignment) {
+    return null;
+  }
+
   return (
     <MUIToolbarButton
       tooltip={tooltip}