Merge branch 'default-blocks' of github.com:TypeCellOS/BlockNote into default-blocks

Author: matthewlipski

examples/03-ui-components/13-custom-ui/src/MUIFormattingToolbar.tsx

@@ -266,18 +266,24 @@ function MUITextAlignButton(props: {
   const editor = useBlockNoteEditor<TextBlockSchema>();
 
   // The text alignment of the block currently containing the text cursor.
-  const [activeTextAlignment, setActiveTextAlignment] = useState(
-    () => editor.getTextCursorPosition().block.props.textAlignment,
-  );
+  const [activeTextAlignment, setActiveTextAlignment] = useState(() => {
+    const props = editor.getTextCursorPosition().block.props;
+    if ("textAlignment" in props) {
+      return props.textAlignment;
+    }
+    return undefined;
+  });
 
   // Updates the text alignment when the editor content or selection changes.
-  useEditorContentOrSelectionChange(
-    () =>
-      setActiveTextAlignment(
-        editor.getTextCursorPosition().block.props.textAlignment,
-      ),
-    editor,
-  );
+  useEditorContentOrSelectionChange(() => {
+    setActiveTextAlignment(() => {
+      const props = editor.getTextCursorPosition().block.props;
+      if ("textAlignment" in props) {
+        return props.textAlignment;
+      }
+      return undefined;
+    });
+  }, editor);
 
   // Tooltip for the button.
   const tooltip = useMemo(

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

@@ -1,7 +1,7 @@
 import {
   BlockNoteSchema,
   combineByGroup,
-  createPageBreakBlockSpec,
+  withPageBreak,
   filterSuggestionItems,
 } from "@blocknote/core";
 import * as locales from "@blocknote/core/locales";
@@ -22,8 +22,7 @@ import {
   getMultiColumnSlashMenuItems,
   multiColumnDropCursor,
   locales as multiColumnLocales,
-  ColumnBlock,
-  ColumnListBlock,
+  withMultiColumn,
 } from "@blocknote/xl-multi-column";
 import { useMemo } from "react";
 
@@ -32,15 +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: withMultiColumn(withPageBreak(BlockNoteSchema.create())),
     dropCursor: multiColumnDropCursor,
     dictionary: {
       ...locales.en,

examples/06-custom-schema/04-pdf-file-block/src/PDF.tsx

@@ -52,11 +52,11 @@ export const PDF = createReactBlockSpec(
       },
     },
     content: "none",
+  },
+  {
     meta: {
       fileBlockAccept: ["application/pdf"],
     },
-  },
-  {
     render: (props) => (
       <ResizableFileBlockWrapper
         {...(props as any)}

packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts

@@ -108,8 +108,9 @@ export async function handleFileInsertion<
   for (let i = 0; i < items.length; i++) {
     // Gets file block corresponding to MIME type.
     let fileBlockType = "file";
-    for (const fileBlockConfig of Object.values(editor.schema.blockSchema)) {
-      for (const mimeType of fileBlockConfig.meta?.fileBlockAccept || []) {
+    for (const blockSpec of Object.values(editor.schema.blockSpecs)) {
+      for (const mimeType of blockSpec.implementation.meta?.fileBlockAccept ||
+        []) {
         const isFileExtension = mimeType.startsWith(".");
         const file = items[i].getAsFile();
 
@@ -124,7 +125,7 @@ export async function handleFileInsertion<
                 mimeType,
               ))
           ) {
-            fileBlockType = fileBlockConfig.type;
+            fileBlockType = blockSpec.config.type;
             break;
           }
         }

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

@@ -42,9 +42,6 @@ export const createAudioBlockConfig = createBlockConfig(
         },
       },
       content: "none",
-      meta: {
-        fileBlockAccept: ["audio/*"],
-      },
     }) as const,
 );
 
@@ -157,6 +154,9 @@ export const audioToExternalHTML =
 export const createAudioBlockSpec = createBlockSpec(
   createAudioBlockConfig,
   (config) => ({
+    meta: {
+      fileBlockAccept: ["audio/*"],
+    },
     parse: audioParse(config),
     render: audioRender(config),
     toExternalHTML: audioToExternalHTML(config),

packages/core/src/blocks/BlockNoteSchema.ts

@@ -22,9 +22,9 @@ export class BlockNoteSchema<
   SSchema extends StyleSchema,
 > extends CustomBlockNoteSchema<BSchema, ISchema, SSchema> {
   public static create<
-    BSpecs extends BlockSpecs = typeof defaultBlockSpecs,
-    ISpecs extends InlineContentSpecs = typeof defaultInlineContentSpecs,
-    SSpecs extends StyleSpecs = typeof defaultStyleSpecs,
+    BSpecs extends BlockSpecs | undefined = undefined,
+    ISpecs extends InlineContentSpecs | undefined = undefined,
+    SSpecs extends StyleSpecs | undefined = undefined,
   >(options?: {
     /**
      * A list of custom block types that should be available in the editor.
@@ -38,12 +38,18 @@ export class BlockNoteSchema<
      * A list of custom Styles that should be available in the editor.
      */
     styleSpecs?: SSpecs;
-  }) {
-    return new BlockNoteSchema<
-      BlockSchemaFromSpecs<BSpecs>,
-      InlineContentSchemaFromSpecs<ISpecs>,
-      StyleSchemaFromSpecs<SSpecs>
-    >({
+  }): BlockNoteSchema<
+    BSpecs extends undefined
+      ? BlockSchemaFromSpecs<typeof defaultBlockSpecs>
+      : BlockSchemaFromSpecs<NonNullable<BSpecs>>,
+    ISpecs extends undefined
+      ? InlineContentSchemaFromSpecs<typeof defaultInlineContentSpecs>
+      : InlineContentSchemaFromSpecs<NonNullable<ISpecs>>,
+    SSpecs extends undefined
+      ? StyleSchemaFromSpecs<typeof defaultStyleSpecs>
+      : StyleSchemaFromSpecs<NonNullable<SSpecs>>
+  > {
+    return new BlockNoteSchema<any, any, any>({
       blockSpecs: options?.blockSpecs ?? defaultBlockSpecs,
       inlineContentSpecs:
         options?.inlineContentSpecs ?? defaultInlineContentSpecs,

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

@@ -61,17 +61,17 @@ export const createCodeBlockConfig = createBlockConfig(
         },
       },
       content: "inline",
-      meta: {
-        code: true,
-        defining: true,
-        isolating: false,
-      },
     }) as const,
 );
 
 export const createCodeBlockSpec = createBlockSpec(
   createCodeBlockConfig,
   (options) => ({
+    meta: {
+      code: true,
+      defining: true,
+      isolating: false,
+    },
     parse: (e) => {
       if (e.tagName !== "PRE") {
         return undefined;

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

@@ -25,9 +25,6 @@ export const createFileBlockConfig = createBlockConfig(
         },
       },
       content: "none" as const,
-      meta: {
-        fileBlockAccept: ["*/*"],
-      },
     }) as const,
 );
 
@@ -59,6 +56,9 @@ export const fileParse = () => (element: HTMLElement) => {
 };
 
 export const createFileBlockSpec = createBlockSpec(createFileBlockConfig, {
+  meta: {
+    fileBlockAccept: ["*/*"],
+  },
   parse: fileParse(),
   render(block, editor) {
     return createFileBlockWrapper(block, editor);

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

@@ -30,15 +30,15 @@ export const createHeadingBlockConfig = createBlockConfig(
           : {}),
       },
       content: "inline",
-      meta: {
-        isolating: false,
-      },
     }) as const,
 );
 
 export const createHeadingBlockSpec = createBlockSpec(
   createHeadingBlockConfig,
   ({ allowToggleHeadings = true }: HeadingOptions = {}) => ({
+    meta: {
+      isolating: false,
+    },
     parse(e) {
       let level: number;
       switch (e.tagName) {

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

@@ -47,9 +47,6 @@ export const createImageBlockConfig = createBlockConfig(
         },
       },
       content: "none" as const,
-      meta: {
-        fileBlockAccept: ["image/*"],
-      },
     }) as const,
 );
 
@@ -172,6 +169,9 @@ export const imageToExternalHTML =
 export const createImageBlockSpec = createBlockSpec(
   createImageBlockConfig,
   (config) => ({
+    meta: {
+      fileBlockAccept: ["image/*"],
+    },
     parse: imageParse(config),
     render: imageRender(config),
     toExternalHTML: imageToExternalHTML(config),