Merge branch 'default-blocks' into parse-export-fixes

Author: matthewlipski

docs/app/(home)/hero/DemoEditor.tsx

@@ -16,8 +16,7 @@ import {
   getMultiColumnSlashMenuItems,
   locales as multiColumnLocales,
   multiColumnDropCursor,
-  ColumnListBlock,
-  ColumnBlock,
+  withMultiColumn,
 } from "@blocknote/xl-multi-column";
 import "@blocknote/mantine/style.css";
 import { useTheme } from "next-themes";
@@ -91,12 +90,7 @@ export default function DemoEditor() {
         ...locales.en,
         multi_column: multiColumnLocales.en,
       },
-      schema: BlockNoteSchema.create().extend({
-        blockSpecs: {
-          column: ColumnBlock,
-          columnList: ColumnListBlock,
-        },
-      }),
+      schema: withMultiColumn(BlockNoteSchema.create()),
       dropCursor: multiColumnDropCursor,
       collaboration: {
         provider,

docs/content/docs/features/custom-schemas/custom-inline-content.mdx

@@ -51,7 +51,6 @@ type CustomInlineContentConfig = {
   type: string;
   content: "styled" | "none";
   readonly propSchema: PropSchema;
-  draggable?: boolean;
 };
 ```
 
@@ -100,14 +99,15 @@ If you do not want the prop to have a default value, you can define it as an obj
   mentioned._
 </Callout>
 
-`draggable?:` Whether the inline content should be draggable.
-
 ### Inline Content Implementation (`ReactCustomInlineContentImplementation`)
 
 The Inline Content Implementation defines how the inline content should be rendered to HTML.
 
 ```typescript
 type ReactCustomInlineContentImplementation = {
+  meta?: {
+    draggable?: boolean;
+  };
   render: React.FC<{
     inlineContent: InlineContent;
     contentRef?: (node: HTMLElement | null) => void;
@@ -124,6 +124,8 @@ type ReactCustomInlineContentImplementation = {
 
 - `draggable:` Specifies whether the inline content can be dragged within the editor. If set to `true`, the inline content will be draggable. Defaults to `false` if not specified. If this is true, you should add `data-drag-handle` to the DOM element that should function as the drag handle.
 
+`meta?.draggable?:` Whether the inline content should be draggable.
+
 <Callout type="info">
   _Note that since inline content is, by definition, inline, your component
   should also return an HTML inline element._

examples/01-basic/03-multi-column/src/App.tsx

@@ -13,23 +13,17 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 import {
-  ColumnBlock,
-  ColumnListBlock,
   getMultiColumnSlashMenuItems,
   multiColumnDropCursor,
   locales as multiColumnLocales,
+  withMultiColumn,
 } from "@blocknote/xl-multi-column";
 import { useMemo } from "react";
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
     // Adds column and column list blocks to the schema.
-    schema: BlockNoteSchema.create().extend({
-      blockSpecs: {
-        column: ColumnBlock,
-        columnList: ColumnListBlock,
-      },
-    }),
+    schema: withMultiColumn(BlockNoteSchema.create()),
     // The default drop cursor only shows up above and below blocks - we replace
     // it with the multi-column one that also shows up on the sides of blocks.
     dropCursor: multiColumnDropCursor,

examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx

@@ -1,11 +1,11 @@
 import {
   BlockNoteSchema,
   combineByGroup,
-  createPageBreakBlockSpec,
   filterSuggestionItems,
+  withPageBreak,
 } from "@blocknote/core";
-import * as locales from "@blocknote/core/locales";
 import "@blocknote/core/fonts/inter.css";
+import * as locales from "@blocknote/core/locales";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import {
@@ -14,17 +14,16 @@ import {
   getPageBreakReactSlashMenuItems,
   useCreateBlockNote,
 } from "@blocknote/react";
-import {
-  PDFExporter,
-  pdfDefaultSchemaMappings,
-} from "@blocknote/xl-pdf-exporter";
 import {
   getMultiColumnSlashMenuItems,
   multiColumnDropCursor,
   locales as multiColumnLocales,
-  ColumnListBlock,
-  ColumnBlock,
+  withMultiColumn,
 } from "@blocknote/xl-multi-column";
+import {
+  PDFExporter,
+  pdfDefaultSchemaMappings,
+} from "@blocknote/xl-pdf-exporter";
 import { PDFViewer } from "@react-pdf/renderer";
 import { useEffect, useMemo, useReducer, useState } from "react";
 
@@ -37,13 +36,7 @@ export default function App() {
 
   // Creates a new editor instance with some initial content.
   const editor = useCreateBlockNote({
-    schema: BlockNoteSchema.create().extend({
-      blockSpecs: {
-        pageBreak: createPageBreakBlockSpec(),
-        column: ColumnBlock,
-        columnList: ColumnListBlock,
-      },
-    }),
+    schema: withPageBreak(withMultiColumn(BlockNoteSchema.create())),
     dropCursor: multiColumnDropCursor,
     dictionary: {
       ...locales.en,

examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx

@@ -1,11 +1,11 @@
 import {
   BlockNoteSchema,
   combineByGroup,
-  createPageBreakBlockSpec,
   filterSuggestionItems,
+  withPageBreak,
 } from "@blocknote/core";
-import * as locales from "@blocknote/core/locales";
 import "@blocknote/core/fonts/inter.css";
+import * as locales from "@blocknote/core/locales";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import {
@@ -22,8 +22,7 @@ import {
   getMultiColumnSlashMenuItems,
   multiColumnDropCursor,
   locales as multiColumnLocales,
-  ColumnListBlock,
-  ColumnBlock,
+  withMultiColumn,
 } from "@blocknote/xl-multi-column";
 import { useMemo } from "react";
 
@@ -32,13 +31,7 @@ import "./styles.css";
 export default function App() {
   // Creates a new editor instance with some initial content.
   const editor = useCreateBlockNote({
-    schema: BlockNoteSchema.create().extend({
-      blockSpecs: {
-        pageBreak: createPageBreakBlockSpec(),
-        column: ColumnBlock,
-        columnList: ColumnListBlock,
-      },
-    }),
+    schema: withPageBreak(withMultiColumn(BlockNoteSchema.create())),
     dropCursor: multiColumnDropCursor,
     dictionary: {
       ...locales.en,

examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx

@@ -3,8 +3,8 @@ import {
   COLORS_DARK_MODE_DEFAULT,
   COLORS_DEFAULT,
   combineByGroup,
-  createPageBreakBlockSpec,
   filterSuggestionItems,
+  withPageBreak,
 } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
@@ -30,11 +30,7 @@ export default function App() {
 
   // Creates a new editor instance with some initial content.
   const editor = useCreateBlockNote({
-    schema: BlockNoteSchema.create().extend({
-      blockSpecs: {
-        pageBreak: createPageBreakBlockSpec(),
-      },
-    }),
+    schema: withPageBreak(BlockNoteSchema.create()),
     tables: {
       splitCells: true,
       cellBackgroundColor: true,

examples/06-custom-schema/draggable-inline-content/src/App.tsx

@@ -15,10 +15,12 @@ const draggableButton = createReactInlineContentSpec(
         default: "",
       },
     },
-    draggable: true,
-    content: "none"
+    content: "none",
   },
   {
+    meta: {
+      draggable: true,
+    },
     render: (props) => {
       return (
         <span
@@ -30,12 +32,13 @@ const draggableButton = createReactInlineContentSpec(
             borderRadius: "4px",
             cursor: "move",
           }}
-          data-drag-handle>
+          data-drag-handle
+        >
           <span>{props.inlineContent.props.title}</span>
         </span>
       );
     },
-  }
+  },
 );
 
 const schema = BlockNoteSchema.create({

packages/core/package.json

@@ -57,6 +57,11 @@
       "import": "./dist/comments.js",
       "require": "./dist/comments.cjs"
     },
+    "./blocks": {
+      "types": "./types/src/blocks/index.d.ts",
+      "import": "./dist/blocks.js",
+      "require": "./dist/blocks.cjs"
+    },
     "./locales": {
       "types": "./types/src/i18n/index.d.ts",
       "import": "./dist/locales.js",

packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts

@@ -222,7 +222,12 @@ function serializeBlock<
     if (fragment.lastChild?.nodeName !== listType) {
       const list = doc.createElement(listType);
 
-      if (listType === "OL" && props?.start && props?.start !== 1) {
+      if (
+        listType === "OL" &&
+        "start" in props &&
+        props.start &&
+        props?.start !== 1
+      ) {
         list.setAttribute("start", props.start + "");
       }
       fragment.append(list);

packages/core/src/blocks/Audio/block.ts

@@ -18,6 +18,8 @@ export interface AudioOptions {
   icon?: string;
 }
 
+export type AudioBlockConfig = ReturnType<typeof createAudioBlockConfig>;
+
 export const createAudioBlockConfig = createBlockConfig(
   (_ctx: AudioOptions) =>
     ({