Feat: (proposal) prop validation.

examples/editor/package.json

@@ -12,7 +12,8 @@
     "@blocknote/core": "^0.8.1",
     "@blocknote/react": "^0.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",

examples/editor/src/App.tsx

@@ -1,15 +1,82 @@
 // import logo from './logo.svg'
+import { z } from 'zod';
+import { DefaultBlockSchema, defaultBlockSchema } from '@blocknote/core';
+import { BlockNoteView, useBlockNote, createReactBlockSpec, ReactSlashMenuItem, defaultReactSlashMenuItems } from "@blocknote/react";
 import "@blocknote/core/style.css";
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import styles from "./App.module.css";
 
+export const AccordionBlock = createReactBlockSpec({
+  type: 'accordion',
+  propSchema: z.object({
+    label: z.string(),
+    autoLayout: z.object({
+      enabled: z.boolean(),
+    }).optional(),
+  }),
+  render: ({ editor, block }) => {
+    return (
+      <>
+        <h2 className='mb-2'>{block.props.label}</h2>
+        {
+          block.props.autoLayout?.enabled ? 
+            (
+              <div className='flex flex-col'>
+                Enabled
+              </div>
+            ) : 
+          <></>
+        }
+      </>
+    );
+  },
+  containsInlineContent: false,
+});
+
+// Creates a slash menu item for inserting an image block.
+export const insertAccordion = new ReactSlashMenuItem<
+  DefaultBlockSchema & { accordion: typeof AccordionBlock }
+>(
+  'Insert Accordion',
+  (editor) => {
+    editor.insertBlocks(
+      [
+        // Default values are set here
+        {
+          type: 'accordion',
+          props: {
+            label: 'Default',
+            autoLayout: {
+              enabled: true
+            }
+          },
+        },
+      ],
+      editor.getTextCursorPosition().block,
+      'before'
+    );
+  },
+  ['accordion'],
+  'Containers',
+  <>+</>,
+  'Used to group content in an accordion.'
+);
+
+
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 
 function App() {
   const editor = useBlockNote({
     onEditorContentChange: (editor) => {
       console.log(editor.topLevelBlocks);
     },
+    blockSchema: {
+      ...defaultBlockSchema,
+      accordion: AccordionBlock,
+    },
+    slashCommands: [
+      ...defaultReactSlashMenuItems,
+      insertAccordion
+    ],
     editorDOMAttributes: {
       class: styles.editor,
       "data-test": "editor",

packages/core/package.json

@@ -82,7 +82,8 @@
     "uuid": "^8.3.2",
     "y-prosemirror": "1.0.20",
     "y-protocols": "^1.0.5",
-    "yjs": "^13.6.1"
+    "yjs": "^13.6.1",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
     "@types/hast": "^2.3.4",