@blocknote/core 0.11.2 → 0.12.1

package/src/api/parsers/html/parseHTML.ts

@@ -1,11 +1,7 @@
 import { DOMParser, Schema } from "prosemirror-model";
-import {
-  Block,
-  BlockSchema,
-  InlineContentSchema,
-  StyleSchema,
-} from "../../../schema";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
 
+import { Block } from "../../../blocks/defaultBlocks";
 import { nodeToBlock } from "../../nodeConversions/nodeConversions";
 import { nestedListsToBlockNoteStructure } from "./util/nestedLists";
 export async function HTMLToBlocks<

package/src/api/parsers/html/util/nestedLists.ts

@@ -99,11 +99,21 @@ function createGroups(element: HTMLElement) {
   });
 }
 
+// prevent XSS, similar to https://github.com/ProseMirror/prosemirror-view/blob/1251b2b412656a2a06263e4187574beb43651273/src/clipboard.ts#L204
+// https://github.com/TypeCellOS/BlockNote/issues/601
+let _detachedDoc: Document | null = null;
+function detachedDoc() {
+  return (
+    _detachedDoc ||
+    (_detachedDoc = document.implementation.createHTMLDocument("title"))
+  );
+}
+
 export function nestedListsToBlockNoteStructure(
   elementOrHTML: HTMLElement | string
 ) {
   if (typeof elementOrHTML === "string") {
-    const element = document.createElement("div");
+    const element = detachedDoc().createElement("div");
     element.innerHTML = elementOrHTML;
     elementOrHTML = element;
   }

package/src/api/parsers/markdown/parseMarkdown.test.ts

@@ -6,12 +6,15 @@ async function parseMarkdownAndCompareSnapshots(
   snapshotName: string
 ) {
   const editor = BlockNoteEditor.create();
+  const div = document.createElement("div");
+  editor.mount(div);
   const blocks = await editor.tryParseMarkdownToBlocks(md);
 
   const snapshotPath = "./__snapshots__/" + snapshotName + ".json";
   expect(JSON.stringify(blocks, undefined, 2)).toMatchFileSnapshot(
     snapshotPath
   );
+  editor.mount(undefined);
 }
 
 describe("Parse Markdown", () => {

package/src/api/parsers/markdown/parseMarkdown.ts

@@ -4,12 +4,8 @@ import remarkGfm from "remark-gfm";
 import remarkParse from "remark-parse";
 import remarkRehype, { defaultHandlers } from "remark-rehype";
 import { unified } from "unified";
-import {
-  Block,
-  BlockSchema,
-  InlineContentSchema,
-  StyleSchema,
-} from "../../../schema";
+import { Block } from "../../../blocks/defaultBlocks";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../../schema";
 import { HTMLToBlocks } from "../html/parseHTML";
 
 // modified version of https://github.com/syntax-tree/mdast-util-to-hast/blob/main/lib/handlers/code.js

package/src/api/testUtil/cases/customBlocks.ts

@@ -1,19 +1,19 @@
 import { EditorTestCases } from "../index";
 
-import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import {
+  imagePropSchema,
+  renderImage,
+} from "../../../blocks/ImageBlockContent/ImageBlockContent";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
 import {
   DefaultInlineContentSchema,
   DefaultStyleSchema,
   defaultBlockSpecs,
 } from "../../../blocks/defaultBlocks";
 import { defaultProps } from "../../../blocks/defaultProps";
-import {
-  imagePropSchema,
-  renderImage,
-} from "../../../blocks/ImageBlockContent/ImageBlockContent";
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { BlockNoteSchema } from "../../../editor/BlockNoteSchema";
 import { createBlockSpec } from "../../../schema/blocks/createSpec";
-import { BlockSchemaFromSpecs, BlockSpecs } from "../../../schema/blocks/types";
 
 // This is a modified version of the default image block that does not implement
 // a `serialize` function. It's used to test if the custom serializer by default
@@ -74,22 +74,24 @@ const SimpleCustomParagraph = createBlockSpec(
   }
 );
 
-const customSpecs = {
-  ...defaultBlockSpecs,
-  simpleImage: SimpleImage,
-  customParagraph: CustomParagraph,
-  simpleCustomParagraph: SimpleCustomParagraph,
-} satisfies BlockSpecs;
+const schema = BlockNoteSchema.create({
+  blockSpecs: {
+    ...defaultBlockSpecs,
+    simpleImage: SimpleImage,
+    customParagraph: CustomParagraph,
+    simpleCustomParagraph: SimpleCustomParagraph,
+  },
+});
 
 export const customBlocksTestCases: EditorTestCases<
-  BlockSchemaFromSpecs<typeof customSpecs>,
+  typeof schema.blockSchema,
   DefaultInlineContentSchema,
   DefaultStyleSchema
 > = {
   name: "custom blocks schema",
   createEditor: () => {
     return BlockNoteEditor.create({
-      blockSpecs: customSpecs,
+      schema,
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
     });
   },
@@ -98,7 +100,7 @@ export const customBlocksTestCases: EditorTestCases<
       name: "simpleImage/button",
       blocks: [
         {
-          type: "simpleImage" as const,
+          type: "simpleImage",
         },
       ],
     },

package/src/api/testUtil/cases/customInlineContent.ts

@@ -1,17 +1,14 @@
 import { EditorTestCases } from "../index";
 
-import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
 import {
   DefaultBlockSchema,
   DefaultStyleSchema,
   defaultInlineContentSpecs,
 } from "../../../blocks/defaultBlocks";
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { BlockNoteSchema } from "../../../editor/BlockNoteSchema";
 import { createInlineContentSpec } from "../../../schema/inlineContent/createSpec";
-import {
-  InlineContentSchemaFromSpecs,
-  InlineContentSpecs,
-} from "../../../schema/inlineContent/types";
 
 const mention = createInlineContentSpec(
   {
@@ -57,22 +54,24 @@ const tag = createInlineContentSpec(
   }
 );
 
-const customInlineContent = {
-  ...defaultInlineContentSpecs,
-  mention,
-  tag,
-} satisfies InlineContentSpecs;
+const schema = BlockNoteSchema.create({
+  inlineContentSpecs: {
+    ...defaultInlineContentSpecs,
+    mention,
+    tag,
+  },
+});
 
 export const customInlineContentTestCases: EditorTestCases<
   DefaultBlockSchema,
-  InlineContentSchemaFromSpecs<typeof customInlineContent>,
+  typeof schema.inlineContentSchema,
   DefaultStyleSchema
 > = {
   name: "custom inline content schema",
   createEditor: () => {
     return BlockNoteEditor.create({
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
-      inlineContentSpecs: customInlineContent,
+      schema,
     });
   },
   documents: [

package/src/api/testUtil/cases/customStyles.ts

@@ -1,14 +1,14 @@
 import { EditorTestCases } from "../index";
 
-import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
 import {
   DefaultBlockSchema,
   DefaultInlineContentSchema,
   defaultStyleSpecs,
 } from "../../../blocks/defaultBlocks";
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import { BlockNoteSchema } from "../../../editor/BlockNoteSchema";
 import { createStyleSpec } from "../../../schema/styles/createSpec";
-import { StyleSchemaFromSpecs, StyleSpecs } from "../../../schema/styles/types";
 
 const small = createStyleSpec(
   {
@@ -43,22 +43,24 @@ const fontSize = createStyleSpec(
   }
 );
 
-const customStyles = {
-  ...defaultStyleSpecs,
-  small,
-  fontSize,
-} satisfies StyleSpecs;
+const schema = BlockNoteSchema.create({
+  styleSpecs: {
+    ...defaultStyleSpecs,
+    small,
+    fontSize,
+  },
+});
 
 export const customStylesTestCases: EditorTestCases<
   DefaultBlockSchema,
   DefaultInlineContentSchema,
-  StyleSchemaFromSpecs<typeof customStyles>
+  typeof schema.styleSchema
 > = {
   name: "custom style schema",
   createEditor: () => {
     return BlockNoteEditor.create({
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
-      styleSpecs: customStyles,
+      schema,
     });
   },
   documents: [

package/src/api/testUtil/index.ts

@@ -1,7 +1,9 @@
+import { PartialBlock } from "../../blocks/defaultBlocks";
 import { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BlockSchema, PartialBlock } from "../../schema/blocks/types";
+import { BlockSchema } from "../../schema/blocks/types";
 import { InlineContentSchema } from "../../schema/inlineContent/types";
 import { StyleSchema } from "../../schema/styles/types";
+import { NoInfer } from "../../util/typescript";
 
 export type EditorTestCases<
   B extends BlockSchema,
@@ -12,6 +14,6 @@ export type EditorTestCases<
   createEditor: () => BlockNoteEditor<B, I, S>;
   documents: Array<{
     name: string;
-    blocks: PartialBlock<B, I, S>[];
+    blocks: PartialBlock<NoInfer<B>, NoInfer<I>, NoInfer<S>>[];
   }>;
 };

package/src/api/testUtil/partialBlockTestUtil.ts

@@ -1,10 +1,6 @@
+import { Block, PartialBlock } from "../../blocks/defaultBlocks";
 import UniqueID from "../../extensions/UniqueID/UniqueID";
-import {
-  Block,
-  BlockSchema,
-  PartialBlock,
-  TableContent,
-} from "../../schema/blocks/types";
+import { BlockSchema, TableContent } from "../../schema/blocks/types";
 import {
   InlineContent,
   InlineContentSchema,

package/src/blocks/HeadingBlockContent/HeadingBlockContent.ts

@@ -6,6 +6,7 @@ import {
 } from "../../schema";
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers";
 import { defaultProps } from "../defaultProps";
+import { getCurrentBlockContentType } from "../../api/getCurrentBlockContentType";
 
 export const headingPropSchema = {
   ...defaultProps,
@@ -45,6 +46,10 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
         return new InputRule({
           find: new RegExp(`^(#{${level}})\\s$`),
           handler: ({ state, chain, range }) => {
+            if (getCurrentBlockContentType(this.editor) !== "inline*") {
+              return;
+            }
+
             chain()
               .BNUpdateBlock(state.selection.from, {
                 type: "heading",
@@ -62,27 +67,51 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
 
   addKeyboardShortcuts() {
     return {
-      "Mod-Alt-1": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "heading",
-          props: {
-            level: 1 as any,
-          },
-        }),
-      "Mod-Alt-2": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "heading",
-          props: {
-            level: 2 as any,
-          },
-        }),
-      "Mod-Alt-3": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "heading",
-          props: {
-            level: 3 as any,
-          },
-        }),
+      "Mod-Alt-1": () => {
+        if (getCurrentBlockContentType(this.editor) !== "inline*") {
+          return true;
+        }
+
+        return this.editor.commands.BNUpdateBlock(
+          this.editor.state.selection.anchor,
+          {
+            type: "heading",
+            props: {
+              level: 1 as any,
+            },
+          }
+        );
+      },
+      "Mod-Alt-2": () => {
+        if (getCurrentBlockContentType(this.editor) !== "inline*") {
+          return true;
+        }
+
+        return this.editor.commands.BNUpdateBlock(
+          this.editor.state.selection.anchor,
+          {
+            type: "heading",
+            props: {
+              level: 2 as any,
+            },
+          }
+        );
+      },
+      "Mod-Alt-3": () => {
+        if (getCurrentBlockContentType(this.editor) !== "inline*") {
+          return true;
+        }
+
+        return this.editor.commands.BNUpdateBlock(
+          this.editor.state.selection.anchor,
+          {
+            type: "heading",
+            props: {
+              level: 3 as any,
+            },
+          }
+        );
+      },
     };
   },
   parseHTML() {

package/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -1,5 +1,4 @@
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { imageToolbarPluginKey } from "../../extensions/ImageToolbar/ImageToolbarPlugin";
 
 import {
   BlockFromConfig,
@@ -235,7 +234,7 @@ export const renderImage = (
   // Opens the image toolbar.
   const addImageButtonClickHandler = () => {
     editor._tiptapEditor.view.dispatch(
-      editor._tiptapEditor.state.tr.setMeta(imageToolbarPluginKey, {
+      editor._tiptapEditor.state.tr.setMeta(editor.imagePanel!.plugin, {
         block: block,
       })
     );

package/src/blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.ts

@@ -1,4 +1,11 @@
-export const uploadToTmpFilesDotOrg_DEV_ONLY = async (file: File) => {
+/**
+ * Uploads a file to tmpfiles.org and returns the URL to the uploaded file.
+ *
+ * @warning This function should only be used for development purposes, replace with your own backend!
+ */
+export const uploadToTmpFilesDotOrg_DEV_ONLY = async (
+  file: File
+): Promise<string> => {
   const body = new FormData();
   body.append("file", file);
 

package/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -7,6 +7,7 @@ import {
 import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers";
 import { defaultProps } from "../../defaultProps";
 import { handleEnter } from "../ListItemKeyboardShortcuts";
+import { getCurrentBlockContentType } from "../../../api/getCurrentBlockContentType";
 
 export const bulletListItemPropSchema = {
   ...defaultProps,
@@ -22,6 +23,10 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
       new InputRule({
         find: new RegExp(`^[-+*]\\s$`),
         handler: ({ state, chain, range }) => {
+          if (getCurrentBlockContentType(this.editor) !== "inline*") {
+            return;
+          }
+
           chain()
             .BNUpdateBlock(state.selection.from, {
               type: "bulletListItem",
@@ -37,11 +42,19 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
   addKeyboardShortcuts() {
     return {
       Enter: () => handleEnter(this.editor),
-      "Mod-Shift-8": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "bulletListItem",
-          props: {},
-        }),
+      "Mod-Shift-8": () => {
+        if (getCurrentBlockContentType(this.editor) !== "inline*") {
+          return true;
+        }
+
+        return this.editor.commands.BNUpdateBlock(
+          this.editor.state.selection.anchor,
+          {
+            type: "bulletListItem",
+            props: {},
+          }
+        );
+      },
     };
   },
 

package/src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts

@@ -10,7 +10,13 @@ export const handleEnter = (editor: Editor) => {
   const selectionEmpty =
     editor.state.selection.anchor === editor.state.selection.head;
 
-  if (!contentType.name.endsWith("ListItem") || !selectionEmpty) {
+  if (
+    !(
+      contentType.name === "bulletListItem" ||
+      contentType.name === "numberedListItem"
+    ) ||
+    !selectionEmpty
+  ) {
     return false;
   }
 

package/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -8,6 +8,7 @@ import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers";
 import { defaultProps } from "../../defaultProps";
 import { handleEnter } from "../ListItemKeyboardShortcuts";
 import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin";
+import { getCurrentBlockContentType } from "../../../api/getCurrentBlockContentType";
 
 export const numberedListItemPropSchema = {
   ...defaultProps,
@@ -37,6 +38,10 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
       new InputRule({
         find: new RegExp(`^1\\.\\s$`),
         handler: ({ state, chain, range }) => {
+          if (getCurrentBlockContentType(this.editor) !== "inline*") {
+            return;
+          }
+
           chain()
             .BNUpdateBlock(state.selection.from, {
               type: "numberedListItem",
@@ -52,11 +57,19 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
   addKeyboardShortcuts() {
     return {
       Enter: () => handleEnter(this.editor),
-      "Mod-Shift-7": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "numberedListItem",
-          props: {},
-        }),
+      "Mod-Shift-7": () => {
+        if (getCurrentBlockContentType(this.editor) !== "inline*") {
+          return true;
+        }
+
+        return this.editor.commands.BNUpdateBlock(
+          this.editor.state.selection.anchor,
+          {
+            type: "numberedListItem",
+            props: {},
+          }
+        );
+      },
     };
   },
 

package/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -5,6 +5,7 @@ import {
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers";
 import { defaultProps } from "../defaultProps";
 import { handleEnter } from "../ListItemBlockContent/ListItemKeyboardShortcuts";
+import { getCurrentBlockContentType } from "../../api/getCurrentBlockContentType";
 
 export const paragraphPropSchema = {
   ...defaultProps,
@@ -18,11 +19,19 @@ export const ParagraphBlockContent = createStronglyTypedTiptapNode({
   addKeyboardShortcuts() {
     return {
       Enter: () => handleEnter(this.editor),
-      "Mod-Alt-0": () =>
-        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
-          type: "paragraph",
-          props: {},
-        }),
+      "Mod-Alt-0": () => {
+        if (getCurrentBlockContentType(this.editor) !== "inline*") {
+          return true;
+        }
+
+        return this.editor.commands.BNUpdateBlock(
+          this.editor.state.selection.anchor,
+          {
+            type: "paragraph",
+            props: {},
+          }
+        );
+      },
     };
   },
 

package/src/blocks/defaultBlockHelpers.ts

@@ -1,7 +1,7 @@
 import { blockToNode } from "../api/nodeConversions/nodeConversions";
 import type { BlockNoteEditor } from "../editor/BlockNoteEditor";
 import type {
-  Block,
+  BlockNoDefaults,
   BlockSchema,
   InlineContentSchema,
   StyleSchema,
@@ -61,7 +61,7 @@ export const defaultBlockToHTML = <
   I extends InlineContentSchema,
   S extends StyleSchema
 >(
-  block: Block<BSchema, I, S>,
+  block: BlockNoDefaults<BSchema, I, S>,
   editor: BlockNoteEditor<BSchema, I, S>
 ): {
   dom: HTMLElement;
@@ -70,7 +70,7 @@ export const defaultBlockToHTML = <
   const node = blockToNode(
     block,
     editor._tiptapEditor.schema,
-    editor.styleSchema
+    editor.schema.styleSchema
   ).firstChild!;
   const toDOM = editor._tiptapEditor.schema.nodes[node.type.name].spec.toDOM;
 

package/src/blocks/defaultBlockTypeGuards.ts

@@ -0,0 +1,84 @@
+import type { BlockNoteEditor } from "../editor/BlockNoteEditor";
+import { BlockFromConfig, InlineContentSchema, StyleSchema } from "../schema";
+import { Block, DefaultBlockSchema, defaultBlockSchema } from "./defaultBlocks";
+import { defaultProps } from "./defaultProps";
+
+export function checkDefaultBlockTypeInSchema<
+  BlockType extends keyof DefaultBlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  blockType: BlockType,
+  editor: BlockNoteEditor<any, I, S>
+): editor is BlockNoteEditor<{ Type: DefaultBlockSchema[BlockType] }, I, S> {
+  return (
+    blockType in editor.schema.blockSchema &&
+    editor.schema.blockSchema[blockType] === defaultBlockSchema[blockType]
+  );
+}
+
+export function checkBlockIsDefaultType<
+  BlockType extends keyof DefaultBlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  blockType: BlockType,
+  block: Block<any, I, S>,
+  editor: BlockNoteEditor<any, I, S>
+): block is BlockFromConfig<DefaultBlockSchema[BlockType], I, S> {
+  return (
+    block.type === blockType &&
+    block.type in editor.schema.blockSchema &&
+    checkDefaultBlockTypeInSchema(block.type, editor)
+  );
+}
+
+export function checkBlockTypeHasDefaultProp<
+  Prop extends keyof typeof defaultProps,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  prop: Prop,
+  blockType: string,
+  editor: BlockNoteEditor<any, I, S>
+): editor is BlockNoteEditor<
+  {
+    [BT in string]: {
+      type: BT;
+      propSchema: {
+        [P in Prop]: (typeof defaultProps)[P];
+      };
+      content: "table" | "inline" | "none";
+    };
+  },
+  I,
+  S
+> {
+  return (
+    blockType in editor.schema.blockSchema &&
+    prop in editor.schema.blockSchema[blockType].propSchema &&
+    editor.schema.blockSchema[blockType].propSchema[prop] === defaultProps[prop]
+  );
+}
+
+export function checkBlockHasDefaultProp<
+  Prop extends keyof typeof defaultProps,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  prop: Prop,
+  block: Block<any, I, S>,
+  editor: BlockNoteEditor<any, I, S>
+): block is BlockFromConfig<
+  {
+    type: string;
+    propSchema: {
+      [P in Prop]: (typeof defaultProps)[P];
+    };
+    content: "table" | "inline" | "none";
+  },
+  I,
+  S
+> {
+  return checkBlockTypeHasDefaultProp(prop, block.type, editor);
+}