fix: Updates for demos in docs (#295)

* Updated various documentation pages

* Fixed block type dropdown bug

Author: matthewlipski

packages/react/src/FormattingToolbar/components/DefaultDropdowns/BlockTypeDropdown.tsx

@@ -1,9 +1,10 @@
+import { useMemo, useState } from "react";
 import {
+  Block,
   BlockNoteEditor,
   BlockSchema,
-  DefaultBlockSchema,
+  PartialBlock,
 } from "@blocknote/core";
-import { useState } from "react";
 import { IconType } from "react-icons";
 import {
   RiH1,
@@ -13,7 +14,11 @@ import {
   RiListUnordered,
   RiText,
 } from "react-icons/ri";
-import { ToolbarDropdown } from "../../../SharedComponents/Toolbar/components/ToolbarDropdown";
+
+import {
+  ToolbarDropdown,
+  ToolbarDropdownProps,
+} from "../../../SharedComponents/Toolbar/components/ToolbarDropdown";
 import { useEditorSelectionChange } from "../../../hooks/useEditorSelectionChange";
 import { useEditorContentChange } from "../../../hooks/useEditorContentChange";
 
@@ -25,13 +30,20 @@ const headingIcons: Record<HeadingLevels, IconType> = {
   "3": RiH3,
 };
 
-const shouldShow = (schema: BlockSchema) => {
-  const paragraph = "paragraph" in schema;
-  const heading = "heading" in schema && "level" in schema.heading.propSchema;
-  const bulletListItem = "bulletListItem" in schema;
-  const numberedListItem = "numberedListItem" in schema;
+const shouldShow = <BSchema extends BlockSchema>(block: Block<BSchema>) => {
+  if (block.type === "paragraph") {
+    return true;
+  }
+
+  if (block.type === "heading" && "level" in block.props) {
+    return true;
+  }
+
+  if (block.type === "bulletListItem") {
+    return true;
+  }
 
-  return paragraph && heading && bulletListItem && numberedListItem;
+  return block.type === "numberedListItem";
 };
 
 export const BlockTypeDropdown = <BSchema extends BlockSchema>(props: {
@@ -41,6 +53,77 @@ export const BlockTypeDropdown = <BSchema extends BlockSchema>(props: {
     props.editor.getTextCursorPosition().block
   );
 
+  const dropdownItems: ToolbarDropdownProps["items"] = useMemo(() => {
+    const items: ToolbarDropdownProps["items"] = [];
+
+    if ("paragraph" in props.editor.schema) {
+      items.push({
+        onClick: () => {
+          props.editor.focus();
+          props.editor.updateBlock(block, {
+            type: "paragraph",
+            props: {},
+          });
+        },
+        text: "Paragraph",
+        icon: RiText,
+        isSelected: block.type === "paragraph",
+      });
+    }
+
+    if (
+      "heading" in props.editor.schema &&
+      "level" in props.editor.schema.heading.propSchema
+    ) {
+      items.push(
+        ...(["1", "2", "3"] as const).map((level) => ({
+          onClick: () => {
+            props.editor.focus();
+            props.editor.updateBlock(block, {
+              type: "heading",
+              props: { level: level },
+            } as PartialBlock<BSchema>);
+          },
+          text: "Heading " + level,
+          icon: headingIcons[level],
+          isSelected: block.type === "heading" && block.props.level === level,
+        }))
+      );
+    }
+
+    if ("bulletListItem" in props.editor.schema) {
+      items.push({
+        onClick: () => {
+          props.editor.focus();
+          props.editor.updateBlock(block, {
+            type: "bulletListItem",
+            props: {},
+          });
+        },
+        text: "Bullet List",
+        icon: RiListUnordered,
+        isSelected: block.type === "bulletListItem",
+      });
+    }
+
+    if ("numberedListItem" in props.editor.schema) {
+      items.push({
+        onClick: () => {
+          props.editor.focus();
+          props.editor.updateBlock(block, {
+            type: "numberedListItem",
+            props: {},
+          });
+        },
+        text: "Numbered List",
+        icon: RiListOrdered,
+        isSelected: block.type === "numberedListItem",
+      });
+    }
+
+    return items;
+  }, [block, props.editor]);
+
   useEditorContentChange(props.editor, () => {
     setBlock(props.editor.getTextCursorPosition().block);
   });
@@ -49,70 +132,9 @@ export const BlockTypeDropdown = <BSchema extends BlockSchema>(props: {
     setBlock(props.editor.getTextCursorPosition().block);
   });
 
-  if (!shouldShow(props.editor.schema)) {
+  if (!shouldShow(block)) {
     return null;
   }
 
-  // let's cast the editor because "shouldShow" has given us the confidence
-  // the default block schema is being used
-  let editor = props.editor as any as BlockNoteEditor<DefaultBlockSchema>;
-
-  const headingItems = editor.schema.heading.propSchema.level.values.map(
-    (level) => ({
-      onClick: () => {
-        editor.focus();
-        editor.updateBlock(block, {
-          type: "heading",
-          props: { level: level },
-        });
-      },
-      text: "Heading " + level,
-      icon: headingIcons[level],
-      isSelected: block.type === "heading" && block.props.level === level,
-    })
-  );
-
-  return (
-    <ToolbarDropdown
-      items={[
-        {
-          onClick: () => {
-            props.editor.focus();
-            props.editor.updateBlock(block, {
-              type: "paragraph",
-              props: {},
-            });
-          },
-          text: "Paragraph",
-          icon: RiText,
-          isSelected: block.type === "paragraph",
-        },
-        ...headingItems,
-        {
-          onClick: () => {
-            props.editor.focus();
-            props.editor.updateBlock(block, {
-              type: "bulletListItem",
-              props: {},
-            });
-          },
-          text: "Bullet List",
-          icon: RiListUnordered,
-          isSelected: block.type === "bulletListItem",
-        },
-        {
-          onClick: () => {
-            props.editor.focus();
-            props.editor.updateBlock(block, {
-              type: "numberedListItem",
-              props: {},
-            });
-          },
-          text: "Numbered List",
-          icon: RiListOrdered,
-          isSelected: block.type === "numberedListItem",
-        },
-      ]}
-    />
-  );
+  return <ToolbarDropdown items={dropdownItems} />;
 };

packages/website/docs/docs/block-types.md

@@ -123,6 +123,8 @@ In addition to the default block types that BlockNote offers, you can also make
 ```typescript-vue /App.tsx
 import {
   BlockNoteEditor,
+  BlockSchema,
+  DefaultBlockSchema,
   defaultBlockSchema,
   defaultProps,
 } from "@blocknote/core";
@@ -132,7 +134,7 @@ import {
   createReactBlockSpec,
   InlineContent,
   ReactSlashMenuItem,
-  defaultReactSlashMenuItems,
+  getDefaultReactSlashMenuItems,
 } from "@blocknote/react";
 import "@blocknote/core/style.css";
 import { RiImage2Fill } from "react-icons/ri";
@@ -146,57 +148,68 @@ export default function App() {
       src: {
         default: "https://via.placeholder.com/1000",
       },
+      alt: {
+        default: "image",
+      },
     },
     containsInlineContent: true,
     render: ({ block }) => (
       <div id="image-wrapper">
         <img
           src={block.props.src}
-          alt={"Image"}
+          alt={block.props.alt}
           contentEditable={false}
         />
         <InlineContent />
       </div>
     ),
   });
 
+  // The custom schema, which includes the default blocks and the custom image
+  // block.
+  const customSchema = {
+    // Adds all default blocks.
+    ...defaultBlockSchema,
+    // Adds the custom image block.
+    image: ImageBlock,
+  } satisfies BlockSchema;
+
   // Creates a slash menu item for inserting an image block.
-  const insertImage = new ReactSlashMenuItem<
-    DefaultBlockSchema & { image: typeof ImageBlock }
-  >(
-    "Insert Image",
-    (editor) => {
+  const insertImage: ReactSlashMenuItem<typeof customSchema> = {
+    name: "Insert Image",
+    execute: (editor) => {
       const src: string | null = prompt("Enter image URL");
+      const alt: string | null = prompt("Enter image alt text");
+
       editor.insertBlocks(
         [
           {
             type: "image",
             props: {
               src: src || "https://via.placeholder.com/1000",
+              alt: alt || "image",
             },
           },
         ],
         editor.getTextCursorPosition().block,
         "after"
       );
     },
-    ["image", "img", "picture", "media"],
-    "Media",
-    <RiImage2Fill />,
-    "Insert an image"
-  );
+    aliases: ["image", "img", "picture", "media"],
+    group: "Media",
+    icon: <RiImage2Fill />,
+    hint: "Insert an image",
+  };
 
   // Creates a new editor instance.
   const editor = useBlockNote({
     theme: "{{ getTheme(isDark) }}",
     // Tells BlockNote which blocks to use.
-    blockSchema: {
-      // Adds all default blocks.
-      ...defaultBlockSchema,
-      // Adds the custom image block.
-      image: ImageBlock,
-    },
-    slashCommands: [...defaultReactSlashMenuItems, insertImage],
+    blockSchema: customSchema,
+    slashMenuItems: [
+      ...getDefaultReactSlashMenuItems(customSchema),
+      insertImage,
+    ],
   });
 
   // Renders the editor instance using a React component.
@@ -213,7 +226,7 @@ export default function App() {
 }
 
 img {
-  width: "100%";
+  width: 100%;
 }
 ```
 

packages/website/docs/docs/blocks.md

@@ -86,10 +86,10 @@ export default function App() {
   const [blocks, setBlocks] = useState<Block[] | null>(null);
 
   // Creates a new editor instance.
-  const editor: BlockNoteEditor | null = useBlockNote({
+  const editor: BlockNoteEditor = useBlockNote({
     theme: "{{ getTheme(isDark) }}",
     // Listens for when the editor's contents change.
-    onEditorContentChange: (editor: BlockNoteEditor) => 
+    onEditorContentChange: (editor) => 
       // Converts the editor's contents to an array of Block objects.
       setBlocks(editor.topLevelBlocks)
   })

packages/website/docs/docs/converting-blocks.md

@@ -61,10 +61,10 @@ export default function App() {
   const [markdown, setMarkdown] = useState<string>("");
 
   // Creates a new editor instance.
-  const editor: BlockNoteEditor | null = useBlockNote({
+  const editor: BlockNoteEditor = useBlockNote({
     theme: "{{ getTheme(isDark) }}",
     // Listens for when the editor's contents change.
-    onEditorContentChange: (editor: BlockNoteEditor) => {
+    onEditorContentChange: (editor) => {
       // Converts the editor's contents from Block objects to Markdown and 
       // saves them.
       const saveBlocksAsMarkdown = async () => {
@@ -132,7 +132,7 @@ export default function App() {
   const [markdown, setMarkdown] = useState<string>("");
 
   // Creates a new editor instance.
-  const editor: BlockNoteEditor | null = useBlockNote({
+  const editor: BlockNoteEditor = useBlockNote({
     theme: "{{ getTheme(isDark) }}",
     // Makes the editor non-editable.
     editable: false
@@ -169,7 +169,7 @@ export default function App() {
 
 textarea {
   color: gray;
-  background-color: #151515;
+  background-color: {{ isDark ? "#151515" : "white" }};
   width: 100%;
   height: 100%;
 }
@@ -216,10 +216,10 @@ export default function App() {
   const [html, setHTML] = useState<string>("");
 
   // Creates a new editor instance.
-  const editor: BlockNoteEditor | null = useBlockNote({
+  const editor: BlockNoteEditor = useBlockNote({
     theme: "{{ getTheme(isDark) }}",
     // Listens for when the editor's contents change.
-    onEditorContentChange: (editor: BlockNoteEditor) => {
+    onEditorContentChange: (editor) => {
       // Converts the editor's contents from Block objects to HTML and saves 
       // them.
       const saveBlocksAsHTML = async () => {
@@ -286,7 +286,7 @@ export default function App() {
   const [html, setHTML] = useState<string>("");
 
   // Creates a new editor instance.
-  const editor: BlockNoteEditor | null = useBlockNote({
+  const editor: BlockNoteEditor = useBlockNote({
     theme: "{{ getTheme(isDark) }}",
     // Makes the editor non-editable.
     editable: false
@@ -323,7 +323,7 @@ export default function App() {
 
 textarea {
   color: gray;
-  background-color: #151515;
+  background-color: {{ isDark ? "#151515" : "white" }};
   width: 100%;
   height: 100%;
 }