diff --git a/packages/core/src/editor.module.css b/packages/core/src/editor.module.css
index f73cd09944..923ba5fad2 100644
--- a/packages/core/src/editor.module.css
+++ b/packages/core/src/editor.module.css
@@ -38,7 +38,6 @@ Tippy popups that are appended to document.body directly
 .defaultStyles h3,
 .defaultStyles li {
   all: unset !important;
-  flex-grow: 1 !important;
   margin: 0;
   padding: 0;
   font-size: inherit;
diff --git a/packages/core/src/extensions/Blocks/api/block.ts b/packages/core/src/extensions/Blocks/api/block.ts
index 6fdc3ee2e5..77604299a9 100644
--- a/packages/core/src/extensions/Blocks/api/block.ts
+++ b/packages/core/src/extensions/Blocks/api/block.ts
@@ -186,6 +186,14 @@ export function createBlockSpec<
 
         // Render elements
         const rendered = blockConfig.render(block as any, editor);
+        // Add inlineContent class to inline content
+        if ("contentDOM" in rendered) {
+          rendered.contentDOM.className = `${
+            rendered.contentDOM.className
+              ? rendered.contentDOM.className + " "
+              : ""
+          }${styles.inlineContent}`;
+        }
         // Add elements to blockContent
         blockContent.appendChild(rendered.dom);
 
diff --git a/packages/core/src/extensions/Blocks/nodes/Block.module.css b/packages/core/src/extensions/Blocks/nodes/Block.module.css
index acb851a4ac..a85152345a 100644
--- a/packages/core/src/extensions/Blocks/nodes/Block.module.css
+++ b/packages/core/src/extensions/Blocks/nodes/Block.module.css
@@ -7,14 +7,26 @@ BASIC STYLES
   transition: margin 0.2s;
 }
 
+/*Ensures blocks & block content spans editor width*/
+.block {
+  display: flex;
+  flex-direction: column;
+}
+
+/*Ensures block content inside React node views spans editor width*/
+.reactNodeViewRenderer {
+  display: flex;
+  flex-grow: 1;
+}
+
 .blockContent {
   padding: 3px 0;
+  flex-grow: 1;
   transition: font-size 0.2s;
   /*
   because the content elements are display: block
   we use flex to position them next to list markers
   */
-  display: flex;
 }
 
 .blockContent::before {
@@ -225,8 +237,8 @@ NESTED BLOCKS
 
 /* PLACEHOLDERS*/
 
-.blockContent.isEmpty > :first-child:before,
-.blockContent.isFilter > :first-child:before {
+.isEmpty .inlineContent:before,
+.isFilter .inlineContent:before {
   /*float: left; */
   content: "";
   pointer-events: none;
@@ -236,33 +248,33 @@ NESTED BLOCKS
   font-style: italic;
 }
 
-[data-theme="light"] .blockContent.isEmpty > :first-child:before,
-.blockContent.isFilter > :first-child:before {
+[data-theme="light"] .isEmpty .inlineContent:before,
+.isFilter .inlineContent:before {
   color: #cccccc;
 }
 
-[data-theme="dark"] .blockContent.isEmpty > :first-child:before,
-.blockContent.isFilter > :first-child:before {
+[data-theme="dark"] .isEmpty .inlineContent:before,
+.isFilter .inlineContent:before {
   color: #999999;
 }
 
 /* TODO: would be nicer if defined from code */
 
-.blockContent.isEmpty.hasAnchor > :first-child:before {
+.isEmpty.hasAnchor .inlineContent:before {
   content: "Enter text or type '/' for commands";
 }
 
-.blockContent.isFilter.hasAnchor > :first-child:before {
+.blockContent.isFilter.hasAnchor .inlineContent:before {
   content: "Type to filter";
 }
 
-.blockContent[data-content-type="heading"].isEmpty > :first-child::before {
+.blockContent[data-content-type="heading"].isEmpty .inlineContent:before {
   content: "Heading";
 }
 
-.blockContent[data-content-type="bulletListItem"].isEmpty > :first-child:before,
+.blockContent[data-content-type="bulletListItem"].isEmpty .inlineContent:before,
 .blockContent[data-content-type="numberedListItem"].isEmpty
-  > :first-child:before {
+.inlineContent:before {
   content: "List";
 }
 
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContent.ts
index b9810feb8f..3dcb402257 100644
--- a/packages/core/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContent.ts
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContent.ts
@@ -70,7 +70,7 @@ export const HeadingBlockContent = createTipTapBlock<"heading">({
         class: styles.blockContent,
         "data-content-type": this.name,
       }),
-      ["h" + node.attrs.level, 0],
+      ["h" + node.attrs.level, { class: styles.inlineContent }, 0],
     ];
   },
 });
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts
index eab5e37632..58ef2002ff 100644
--- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts
@@ -88,7 +88,7 @@ export const BulletListItemBlockContent = createTipTapBlock<"bulletListItem">({
         class: styles.blockContent,
         "data-content-type": this.name,
       }),
-      ["p", 0],
+      ["p", { class: styles.inlineContent }, 0],
     ];
   },
 });
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts
index 11e229f6a1..f8055bf31f 100644
--- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts
@@ -114,7 +114,7 @@ export const NumberedListItemBlockContent =
         }),
         // we use a <p> tag, because for <li> tags we'd need to add a <ul> parent for around siblings to be semantically correct,
         // which would be quite cumbersome
-        ["p", 0],
+        ["p", { class: styles.inlineContent }, 0],
       ];
     },
   });
diff --git a/packages/core/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts b/packages/core/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts
index 3affad6ca8..9d44f9bb7a 100644
--- a/packages/core/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts
+++ b/packages/core/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts
@@ -23,7 +23,7 @@ export const ParagraphBlockContent = createTipTapBlock<"paragraph">({
         class: styles.blockContent,
         "data-content-type": this.name,
       }),
-      ["p", 0],
+      ["p", { class: styles.inlineContent }, 0],
     ];
   },
 });
diff --git a/packages/core/src/extensions/Placeholder/PlaceholderExtension.ts b/packages/core/src/extensions/Placeholder/PlaceholderExtension.ts
index ba6de34a1d..9def2e85d9 100644
--- a/packages/core/src/extensions/Placeholder/PlaceholderExtension.ts
+++ b/packages/core/src/extensions/Placeholder/PlaceholderExtension.ts
@@ -72,6 +72,7 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
               if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
                 const classes = [this.options.emptyNodeClass];
 
+                // TODO: Doesn't work?
                 if (this.editor.isEmpty) {
                   classes.push(this.options.emptyEditorClass);
                 }
diff --git a/packages/react/src/FormattingToolbar/components/DefaultButtons/TextAlignButton.tsx b/packages/react/src/FormattingToolbar/components/DefaultButtons/TextAlignButton.tsx
index ae5be57332..dde4fe6342 100644
--- a/packages/react/src/FormattingToolbar/components/DefaultButtons/TextAlignButton.tsx
+++ b/packages/react/src/FormattingToolbar/components/DefaultButtons/TextAlignButton.tsx
@@ -1,9 +1,10 @@
 import {
   BlockNoteEditor,
-  DefaultBlockSchema,
+  BlockSchema,
   DefaultProps,
+  PartialBlock,
 } from "@blocknote/core";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { IconType } from "react-icons";
 import {
   RiAlignCenter,
@@ -22,10 +23,30 @@ const icons: Record<TextAlignment, IconType> = {
   justify: RiAlignJustify,
 };
 
-export const TextAlignButton = (props: {
-  editor: BlockNoteEditor<DefaultBlockSchema>;
+export const TextAlignButton = <BSchema extends BlockSchema>(props: {
+  editor: BlockNoteEditor<BSchema>;
   textAlignment: TextAlignment;
 }) => {
+  const show = useMemo(() => {
+    const selection = props.editor.getSelection();
+
+    if (selection) {
+      for (const block of selection.blocks) {
+        if (!("textAlignment" in block.props)) {
+          return false;
+        }
+      }
+    } else {
+      const block = props.editor.getTextCursorPosition().block;
+
+      if (!("textAlignment" in block.props)) {
+        return false;
+      }
+    }
+
+    return true;
+  }, [props.editor]);
+
   const setTextAlignment = useCallback(
     (textAlignment: TextAlignment) => {
       props.editor.focus();
@@ -36,17 +57,23 @@ export const TextAlignButton = (props: {
         for (const block of selection.blocks) {
           props.editor.updateBlock(block, {
             props: { textAlignment: textAlignment },
-          });
+          } as PartialBlock<BSchema>);
         }
       } else {
-        props.editor.updateBlock(props.editor.getTextCursorPosition().block, {
+        const block = props.editor.getTextCursorPosition().block;
+
+        props.editor.updateBlock(block, {
           props: { textAlignment: textAlignment },
-        });
+        } as PartialBlock<BSchema>);
       }
     },
     [props.editor]
   );
 
+  if (!show) {
+    return null;
+  }
+
   return (
     <ToolbarButton
       onClick={() => setTextAlignment(props.textAlignment)}
diff --git a/packages/react/src/ReactBlockSpec.tsx b/packages/react/src/ReactBlockSpec.tsx
index ab5249854e..2dacf41b40 100644
--- a/packages/react/src/ReactBlockSpec.tsx
+++ b/packages/react/src/ReactBlockSpec.tsx
@@ -11,12 +11,11 @@ import {
 } from "@blocknote/core";
 import {
   NodeViewContent,
-  NodeViewContentProps,
   NodeViewProps,
   NodeViewWrapper,
   ReactNodeViewRenderer,
 } from "@tiptap/react";
-import { FC } from "react";
+import { FC, HTMLAttributes } from "react";
 import { blockStyles } from "@blocknote/core";
 
 // extend BlockConfig but use a react render function
@@ -39,8 +38,13 @@ export type ReactBlockConfig<
   }>;
 };
 
-export const ContentDOM = (props: NodeViewContentProps) => (
-  <NodeViewContent {...props} />
+export const InlineContent = (props: HTMLAttributes<HTMLDivElement>) => (
+  <NodeViewContent
+    {...props}
+    className={`${props.className ? props.className + " " : ""}${
+      blockStyles.inlineContent
+    }`}
+  />
 );
 
 // A function to create custom block for API consumers
@@ -115,7 +119,9 @@ export function createReactBlockSpec<
         );
       };
 
-      return ReactNodeViewRenderer(BlockContent);
+      return ReactNodeViewRenderer(BlockContent, {
+        className: blockStyles.reactNodeViewRenderer,
+      });
     },
   });
 
diff --git a/packages/react/src/SharedComponents/Toolbar/components/ToolbarDropdown.tsx b/packages/react/src/SharedComponents/Toolbar/components/ToolbarDropdown.tsx
index 40e4009509..9e8e5ff474 100644
--- a/packages/react/src/SharedComponents/Toolbar/components/ToolbarDropdown.tsx
+++ b/packages/react/src/SharedComponents/Toolbar/components/ToolbarDropdown.tsx
@@ -18,6 +18,10 @@ export type ToolbarDropdownProps = {
 export function ToolbarDropdown(props: ToolbarDropdownProps) {
   const activeItem = props.items.filter((p) => p.isSelected)[0];
 
+  if (!activeItem) {
+    return null;
+  }
+
   return (
     <Menu exitTransitionDuration={0} disabled={props.isDisabled}>
       <Menu.Target>
diff --git a/packages/website/docs/docs/block-types.md b/packages/website/docs/docs/block-types.md
index 24996a53a6..6bffe2711d 100644
--- a/packages/website/docs/docs/block-types.md
+++ b/packages/website/docs/docs/block-types.md
@@ -1,6 +1,6 @@
 # Block Types & Properties
 
-A block's type affects how it looks and behaves in the editor. Each type also comes with its own set of properties, which further affect the block's appearance and behaviour.
+A block's type affects how it looks and behaves in the editor. Each type also comes with its own set of properties, each having a string value, which further affect the block's appearance and behaviour.
 
 ## Built-In Block Types
 
@@ -84,7 +84,7 @@ type NumberedListItemBlock = {
 
 ## Default Block Properties
 
-While each type of block can have its own set of properties, there are some properties that all block types have by default, which you can find in the definition for `DefaultBlockProps`:
+While each type of block can have its own set of properties, there are some properties that all built-in block types have by default, which you can find in the definition for `DefaultBlockProps`:
 
 ```typescript
 type DefaultBlockProps = {
@@ -102,4 +102,220 @@ type DefaultBlockProps = {
 
 ## Custom Block Types
 
-### Coming Soon!
+In addition to the default block types that BlockNote offers, you can also make your own custom blocks. Take a look at the demo below, in which we add a custom block containing an image and caption to a BlockNote editor, as well as a custom [Slash Menu Item](/docs/slash-menu#custom-items) to insert it.
+
+::: sandbox {template=react-ts}
+
+```typescript /App.tsx
+import {
+  BlockNoteEditor,
+  defaultBlockSchema,
+  defaultProps,
+} from "@blocknote/core";
+import {
+  BlockNoteView,
+  useBlockNote,
+  createReactBlockSpec,
+  InlineContent,
+  ReactSlashMenuItem,
+  defaultReactSlashMenuItems,
+} from "@blocknote/react";
+import "@blocknote/core/style.css";
+import { RiImage2Fill } from "react-icons/ri";
+
+export default function App() {
+  // Creates a custom image block.
+  const ImageBlock = createReactBlockSpec({
+    type: "image",
+    propSchema: {
+      ...defaultProps,
+      src: {
+        default: "https://via.placeholder.com/1000",
+      },
+    },
+    containsInlineContent: true,
+    render: ({ block }) => (
+      <div
+        style={{
+        display: "flex",
+          flexDirection: "column",
+      }}>
+        <img
+          style={{
+            width: "100%",
+          }}
+          src={block.props.src}
+          alt={"Image"}
+          contentEditable={false}
+        />
+        <InlineContent />
+      </div>
+    ),
+  });
+
+  // Creates a slash menu item for inserting an image block.
+  const insertImage = new ReactSlashMenuItem<
+    DefaultBlockSchema & { image: typeof ImageBlock }
+  >(
+    "Insert Image",
+    (editor) => {
+      const src: string | null = prompt("Enter image URL");
+      editor.insertBlocks(
+        [
+          {
+            type: "image",
+            props: {
+              src: src || "https://via.placeholder.com/1000",
+            },
+          },
+        ],
+        editor.getTextCursorPosition().block,
+        "after"
+      );
+    },
+    ["image", "img", "picture", "media"],
+    "Media",
+    <RiImage2Fill />,
+    "Insert an image"
+  );
+
+  // Creates a new editor instance.
+  const editor: BlockNoteEditor<
+    DefaultBlockSchema & { image: typeof ImageBlock }
+  > | null = useBlockNote({
+    // Tells BlockNote which blocks to use.
+    blockSchema: {
+      // Adds all default blocks.
+      ...defaultBlockSchema,
+      // Adds the custom image block.
+      image: ImageBlock,
+    },
+    slashCommands: [...defaultReactSlashMenuItems, insertImage],
+  });
+
+  // Renders the editor instance using a React component.
+  return <BlockNoteView editor={editor} />;
+}
+```
+
+:::
+
+::: info
+While custom blocks open a lot of doors for what you can do with BlockNote, we're still working on improving the API and there are a few limitations for the kinds of blocks you can create.
+
+We'd love to hear your feedback on Github or in our Discord community!
+:::
+
+### Creating a Custom Block Type
+
+To define a custom block type, we use the `createReactBlockSpec` function, for which you can see the definition below:
+
+```typescript
+type PropSchema = Record<
+  string,
+  {
+    default: string;
+    values?: string[];
+  };
+>
+
+function createReactBlockSpec<
+  Type extends string,
+  PSchema extends PropSchema,
+  ContainsInlineContent extends boolean,
+  BSchema extends BlockSchema
+>(config: {
+  type: Type;
+  propSchema: PSchema;
+  containsInlineContent: ContainsInlineContent;
+  render: (props: {
+    block: Block<BSchema>,
+    editor: BlockNoteEditor<BSchema>
+  }) => JSX.Element;
+}): BlockType;
+```
+
+At first glance, this looks pretty complicated. So to make sure we understand what to provide in the configuration, let's look at our custom image block from the demo, and go over each field in-depth.
+
+```typescript jsx
+const ImageBlock = createReactBlockSpec({
+  type: "image",
+  propSchema: {
+    src: {
+      default: "https://via.placeholder.com/1000",
+    },
+  },
+  containsInlineContent: true,
+  render: ({ block }) => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <img
+        style={{
+          width: "100%",
+        }}
+        src={block.props.src}
+        alt={"Image"}
+        contentEditable={false}
+      />
+      <InlineContent />
+    </div>
+  )
+});
+```
+
+#### `type`
+
+This is the simplest field in a `BlockConfig`, and just defines the name of the block, in this case, `image`.
+
+#### `propSchema`
+
+This is an object which defines the props that the block should have. In this case, we want the block to have a `src` prop for the URL of the image, so we add a `src` key. We also want basic styling options for the image block, so we also add the [Default Block Properties](/docs/block-types#default-block-properties) using `defaultProps`. The value of each key is an object with a mandatory `default` field and an optional `values` field:
+
+`default:` Stores the prop's default value, so we use a placeholder image URL for `src` if no URL is provided.
+
+`values:` Stores an array of strings that the prop can take. If `values` is not defined, BlockNote assumes the prop can be any string, which makes sense for `src`, since it can be any image URL.
+
+#### `containsInlineContent`
+
+As we saw in [Block Objects](/docs/blocks#block-objects), blocks can contain editable rich text which is represented as [Inline Content](/docs/inline-content). The `containsInlineContent` field allows your custom block to contain an editable rich-text field. For the custom image block, we use an inline content field to create our caption, so it's set to `true`.
+
+#### `render`
+
+This is a React component which defines how your custom block should be rendered in the editor, and takes two props:
+
+`block:` The block that should be rendered.
+
+`editor:` The BlockNote editor instance that the block is in.
+
+For our custom image block, we use a parent `div` which contains the image and caption. Since `block` will always be an `image` block, we also know it contains a `src` prop, and can pass it to the child `img` element.
+
+But what's this `InlineContent` component? Since we set `containsInlineContent` to `true`, it means we want to include an editable rich-text field somewhere in the image block. You should use the `InlineContent` component to represent this field in your `render` component. Since we're using it to create our caption, we add it below the `img` element.
+
+While the `InlineContent` component can be put anywhere inside the component you pass to `render`, you should make sure to only have one. If `containsInlineContent` is set to false, `render` shouldn't contain any.
+
+### Adding Custom Blocks to the Editor
+
+Now, we need to tell BlockNote to use our custom image block by passing it to the editor in the `blockSchema` option. Let's again look at the image block from the demo as an example:
+
+```typescript jsx
+// Creates a new editor instance.
+const editor: BlockNoteEditor<
+  DefaultBlockSchema & { image: typeof ImageBlock }
+> | null = useBlockNote({
+  // Tells BlockNote which blocks to use.
+  blockSchema: {
+    // Adds all default blocks.
+    ...defaultBlockSchema,
+    // Adds the custom image block.
+    image: ImageBlock,
+  }
+})
+```
+
+Notice three details about this code snippet. First, since we still want the editor to use the [Built-In Block Types](/docs/block-types#built-in-block-types), we add `defaultBlockSchema` to our custom block schema. Second, the key which we use for the custom image block is the same string we use for its type. Make sure that this is always the case for your own custom blocks. Finally, we provide the type of our schema as a type argument to `BlockNoteEditor`.
+
+And we're done! You now know how to create custom blocks and add them to the editor. Head to [Manipulating Blocks](/docs/manipulating-blocks) to see what you can do with them in the editor.
diff --git a/packages/website/docs/docs/blocks.md b/packages/website/docs/docs/blocks.md
index 73f61b363d..646cec4e88 100644
--- a/packages/website/docs/docs/blocks.md
+++ b/packages/website/docs/docs/blocks.md
@@ -51,7 +51,7 @@ type Block = {
 
 `props:` The block's properties, which are stored in a set of key/value pairs and specify how the block looks and behaves. Different block types have different props - see [Block Types & Properties](/docs/block-types) for more.
 
-`content:` The block's content, represented as an array of `InlineContent` objects. This does not include content from any nested blocks. For more information on `InlineContent` objects, visit [Inline Content](/docs/inline-content).
+`content:` The block's rich text content, represented as an array of `InlineContent` objects. This does not include content from any nested blocks. For more information on `InlineContent` objects, visit [Inline Content](/docs/inline-content).
 
 `children:` Any blocks nested inside the block. The nested blocks are also represented using `Block` objects.
 
diff --git a/tests/utils/customblocks/Alert.tsx b/tests/utils/customblocks/Alert.tsx
index 6d4961d837..8df5df14f1 100644
--- a/tests/utils/customblocks/Alert.tsx
+++ b/tests/utils/customblocks/Alert.tsx
@@ -45,7 +45,7 @@ export const Alert = createBlockSpec({
     const parent = document.createElement("div");
     parent.setAttribute(
       "style",
-      `display: flex; flex-grow: 1; background-color: ${
+      `display: flex; background-color: ${
         values[block.props.type as keyof typeof values].backgroundColor
       }`
     );
diff --git a/tests/utils/customblocks/Image.tsx b/tests/utils/customblocks/Image.tsx
index 564f2c0cb7..9b03dc0770 100644
--- a/tests/utils/customblocks/Image.tsx
+++ b/tests/utils/customblocks/Image.tsx
@@ -7,7 +7,7 @@ export const Image = createBlockSpec({
   propSchema: {
     ...defaultProps,
     src: {
-      default: "https://via.placeholder.com/150",
+      default: "https://via.placeholder.com/1000",
     },
   } as const,
   containsInlineContent: true,
@@ -15,11 +15,13 @@ export const Image = createBlockSpec({
     const image = document.createElement("img");
     image.setAttribute("src", block.props.src);
     image.setAttribute("contenteditable", "false");
-    image.setAttribute("border", "1px solid black");
+    image.setAttribute("style", "width: 100%");
 
     const caption = document.createElement("div");
+    caption.setAttribute("style", "flex-grow: 1");
 
     const parent = document.createElement("div");
+    parent.setAttribute("style", "display: flex; flex-direction: column;");
     parent.appendChild(image);
     parent.appendChild(caption);
 
@@ -41,7 +43,7 @@ export const insertImage = new ReactSlashMenuItem<{
         {
           type: "image",
           props: {
-            src: src || "https://via.placeholder.com/150",
+            src: src || "https://via.placeholder.com/1000",
           },
         },
       ],
diff --git a/tests/utils/customblocks/ReactAlert.tsx b/tests/utils/customblocks/ReactAlert.tsx
index 5b50ae33af..232c51374f 100644
--- a/tests/utils/customblocks/ReactAlert.tsx
+++ b/tests/utils/customblocks/ReactAlert.tsx
@@ -1,5 +1,5 @@
 import {
-  ContentDOM,
+  InlineContent,
   createReactBlockSpec,
   ReactSlashMenuItem,
 } from "@blocknote/react";
@@ -98,7 +98,7 @@ export const ReactAlert = createReactBlockSpec({
           }}>
           {values[type as keyof typeof values].icon}
         </div>
-        <ContentDOM />
+        <InlineContent />
       </div>
     );
   },
diff --git a/tests/utils/customblocks/ReactImage.tsx b/tests/utils/customblocks/ReactImage.tsx
new file mode 100644
index 0000000000..f410fbd13a
--- /dev/null
+++ b/tests/utils/customblocks/ReactImage.tsx
@@ -0,0 +1,62 @@
+import {
+  InlineContent,
+  createReactBlockSpec,
+  ReactSlashMenuItem,
+} from "@blocknote/react";
+import { defaultProps } from "@blocknote/core";
+import { RiImage2Fill } from "react-icons/ri";
+
+export const ReactImage = createReactBlockSpec({
+  type: "reactImage" as const,
+  propSchema: {
+    ...defaultProps,
+    src: {
+      default: "https://via.placeholder.com/1000",
+    },
+  } as const,
+  containsInlineContent: true,
+  render: ({ block }) => {
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+        }}>
+        <img
+          style={{
+            width: "100%",
+          }}
+          src={block.props.src}
+          alt={"Image"}
+          contentEditable={false}
+        />
+        <InlineContent />
+      </div>
+    );
+  },
+});
+
+export const insertReactImage = new ReactSlashMenuItem<{
+  reactImage: typeof ReactImage;
+}>(
+  "Insert React Image",
+  (editor) => {
+    const src = prompt("Enter image URL");
+    editor.insertBlocks(
+      [
+        {
+          type: "reactImage",
+          props: {
+            src: src || "https://via.placeholder.com/1000",
+          },
+        },
+      ],
+      editor.getTextCursorPosition().block,
+      "after"
+    );
+  },
+  ["react", "reactImage", "react image", "image", "img", "picture", "media"],
+  "Media",
+  <RiImage2Fill />,
+  "Insert an image"
+);