Small changes to ReactAlert and added as prop to InlineContent component (#245)

Author: matthewlipski

packages/react/src/ReactBlockSpec.tsx

@@ -16,7 +16,7 @@ import {
   NodeViewWrapper,
   ReactNodeViewRenderer,
 } from "@tiptap/react";
-import { FC, HTMLAttributes } from "react";
+import { ElementType, FC, HTMLProps } from "react";
 
 // extend BlockConfig but use a react render function
 export type ReactBlockConfig<
@@ -38,7 +38,9 @@ export type ReactBlockConfig<
   }>;
 };
 
-export const InlineContent = (props: HTMLAttributes<HTMLDivElement>) => (
+export const InlineContent = <Tag extends ElementType>(
+  props: { as?: Tag } & HTMLProps<Tag>
+) => (
   <NodeViewContent
     {...props}
     className={`${props.className ? props.className + " " : ""}${

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

@@ -308,6 +308,8 @@ For our custom image block, we use a parent `div` which contains the image and c
 
 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.
 
+In the DOM, the `InlineContent` component is rendered as a `div` by default, but you can make it use a different element by passing `as={"elementTag"}` as a prop. For example, `as={"p"}` will make the `InlineContent` component get rendered to a paragraph.
+
 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

tests/utils/customblocks/ReactAlert.tsx

@@ -4,7 +4,7 @@ import {
   InlineContent,
   ReactSlashMenuItem,
 } from "@blocknote/react";
-import React, { useState } from "react";
+import { useEffect, useState } from "react";
 import { RiAlertFill } from "react-icons/ri";
 
 const values = {
@@ -40,7 +40,7 @@ export const ReactAlert = createReactBlockSpec({
   render: (props) => {
     const [type, setType] = useState(props.block.props.type);
 
-    React.useEffect(() => {
+    useEffect(() => {
       console.log("ReactAlert initialize");
       return () => {
         console.log(" ReactAlert cleanup");