implement tests + first example

Author: YousefED

examples/06-custom-schema/react-custom-blocks/src/App.tsx

@@ -83,6 +83,36 @@ export const alertBlock = createReactBlockSpec(
   },
 );
 
+// TODO
+export const advancedBlock = createReactBlockSpec(
+  {
+    type: "advanced",
+    propSchema: createPropSchemaFromZod(
+      z.object({
+        nested: z.object({
+          type: z.enum(["warning", "error", "info", "success"]),
+          message: z.string(),
+        }),
+      }),
+    ),
+    content: "inline",
+  },
+  {
+    render: (props) => (
+      <div
+        className={"alert"}
+        style={{
+          backgroundColor:
+            alertTypes[props.block.props.nested.type].backgroundColor,
+        }}
+      >
+        <span>{props.block.props.nested.message}</span>
+        <div className={"inline-content"} ref={props.contentRef} />
+      </div>
+    ),
+  },
+);
+
 const simpleImageBlock = createReactBlockSpec(
   {
     type: "simpleImage",
@@ -133,20 +163,32 @@ const schema = BlockNoteSchema.create({
     alert: alertBlock(),
     simpleImage: simpleImageBlock(),
     bracketsParagraph: bracketsParagraphBlock(),
+    advanced: advancedBlock(),
   },
 });
 
 export default function App() {
   const editor = useCreateBlockNote({
     schema,
     initialContent: [
+      {
+        type: "advanced",
+        props: {
+          nested: {
+            type: "warning",
+            message: "Warning",
+          },
+        },
+        content: "Advanced",
+      },
       {
         type: "alert",
         props: {
           type: "success",
         },
         content: "Alert",
       },
+
       {
         type: "simpleImage",
         props: {

packages/core/src/schema/blocks/internal.ts

@@ -33,6 +33,7 @@ export function propsToAttributes(propSchema: PropSchema): Attributes {
         // Props are displayed in kebab-case as HTML attributes. If a prop's
         // value is the same as its default, we don't display an HTML
         // attribute for it.
+        // TODO: needed? (seems tiptap specific)
         parseHTML: (element) => {
           const value = element.getAttribute(camelToDataKebab(name));
 
@@ -50,13 +51,20 @@ export function propsToAttributes(propSchema: PropSchema): Attributes {
             return z.parse(spec, value);
           }
         },
+        // TODO: needed? (seems tiptap specific)
         renderHTML: (attributes) => {
           // don't render to html if the value is the same as the default
-          return attributes[name] !== def
-            ? {
-                [camelToDataKebab(name)]: attributes[name],
-              }
-            : {};
+          if (attributes[name] === def) {
+            return {};
+          }
+          if (typeof attributes[name] === "object") {
+            return {
+              [camelToDataKebab(name)]: JSON.stringify(attributes[name]),
+            };
+          }
+          return {
+            [camelToDataKebab(name)]: attributes[name],
+          };
         },
       };
     },

packages/react/src/schema/ReactBlockSpec.tsx

@@ -92,6 +92,7 @@ export function BlockContentWrapper<
       // props which are already added as HTML attributes to the parent
       // `blockContent` element (inheritedProps) and props set to their default
       // values
+      // TODO: reuse same code from core
       {...Object.fromEntries(
         Object.entries(props.blockProps)
           .filter(([prop, value]) => {
@@ -103,6 +104,9 @@ export function BlockContentWrapper<
             return value !== defaultValue;
           })
           .map(([prop, value]) => {
+            if (typeof value === "object") {
+              return [camelToDataKebab(prop), JSON.stringify(value)];
+            }
             return [camelToDataKebab(prop), value];
           }),
       )}

packages/react/src/schema/ReactInlineContentSpec.tsx

@@ -80,6 +80,7 @@ export function InlineContentWrapper<
       data-inline-content-type={props.inlineContentType}
       // Adds props as HTML attributes in kebab-case with "data-" prefix. Skips
       // props set to their default values.
+      // TODO: reuse same code from core
       {...Object.fromEntries(
         Object.entries(props.inlineContentProps)
           .filter(([prop, value]) => {
@@ -91,6 +92,9 @@ export function InlineContentWrapper<
             return value !== defaultValue;
           })
           .map(([prop, value]) => {
+            if (typeof value === "object") {
+              return [camelToDataKebab(prop), JSON.stringify(value)];
+            }
             return [camelToDataKebab(prop), value];
           }),
       )}