@blocknote/core 0.11.1 → 0.12.0

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/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.imageToolbar!.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/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -4,6 +4,7 @@ import {
 } from "../../schema";
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers";
 import { defaultProps } from "../defaultProps";
+import { handleEnter } from "../ListItemBlockContent/ListItemKeyboardShortcuts";
 
 export const paragraphPropSchema = {
   ...defaultProps,
@@ -13,6 +14,18 @@ export const ParagraphBlockContent = createStronglyTypedTiptapNode({
   name: "paragraph",
   content: "inline*",
   group: "blockContent",
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => handleEnter(this.editor),
+      "Mod-Alt-0": () =>
+        this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
+          type: "paragraph",
+          props: {},
+        }),
+    };
+  },
+
   parseHTML() {
     return [
       { tag: "div[data-content-type=" + this.name + "]" },

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);
+}

package/src/blocks/defaultBlocks.ts

@@ -6,8 +6,13 @@ import Underline from "@tiptap/extension-underline";
 import { BackgroundColor } from "../extensions/BackgroundColor/BackgroundColorMark";
 import { TextColor } from "../extensions/TextColor/TextColorMark";
 import {
+  BlockNoDefaults,
+  BlockSchema,
   BlockSpecs,
+  InlineContentSchema,
   InlineContentSpecs,
+  PartialBlockNoDefaults,
+  StyleSchema,
   StyleSpecs,
   createStyleSpecFromTipTapMark,
   getBlockSchemaFromSpecs,
@@ -32,7 +37,10 @@ export const defaultBlockSpecs = {
 
 export const defaultBlockSchema = getBlockSchemaFromSpecs(defaultBlockSpecs);
 
-export type DefaultBlockSchema = typeof defaultBlockSchema;
+// underscore is used that in case a user overrides DefaultBlockSchema,
+// they can still access the original default block schema
+export type _DefaultBlockSchema = typeof defaultBlockSchema;
+export type DefaultBlockSchema = _DefaultBlockSchema;
 
 export const defaultStyleSpecs = {
   bold: createStyleSpecFromTipTapMark(Bold, "boolean"),
@@ -46,7 +54,10 @@ export const defaultStyleSpecs = {
 
 export const defaultStyleSchema = getStyleSchemaFromSpecs(defaultStyleSpecs);
 
-export type DefaultStyleSchema = typeof defaultStyleSchema;
+// underscore is used that in case a user overrides DefaultStyleSchema,
+// they can still access the original default style schema
+export type _DefaultStyleSchema = typeof defaultStyleSchema;
+export type DefaultStyleSchema = _DefaultStyleSchema;
 
 export const defaultInlineContentSpecs = {
   text: { config: "text", implementation: {} as any },
@@ -57,4 +68,19 @@ export const defaultInlineContentSchema = getInlineContentSchemaFromSpecs(
   defaultInlineContentSpecs
 );
 
-export type DefaultInlineContentSchema = typeof defaultInlineContentSchema;
+// underscore is used that in case a user overrides DefaultInlineContentSchema,
+// they can still access the original default inline content schema
+export type _DefaultInlineContentSchema = typeof defaultInlineContentSchema;
+export type DefaultInlineContentSchema = _DefaultInlineContentSchema;
+
+export type PartialBlock<
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+> = PartialBlockNoDefaults<BSchema, I, S>;
+
+export type Block<
+  BSchema extends BlockSchema = DefaultBlockSchema,
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+> = BlockNoDefaults<BSchema, I, S>;

package/src/editor/Block.css

@@ -305,11 +305,8 @@ NESTED BLOCKS
 }
 
 /* PLACEHOLDERS*/
-
-.bn-is-empty .bn-inline-content:before,
-.bn-is-filter .bn-inline-content:before {
+.bn-inline-content:has(> .ProseMirror-trailingBreak):before {
   /*float: left; */
-  content: "";
   pointer-events: none;
   height: 0;
   /* width: 0; */
@@ -317,33 +314,7 @@ NESTED BLOCKS
   font-style: italic;
 }
 
-/* TODO: would be nicer if defined from code */
-
-.bn-block-content.bn-is-empty.bn-has-anchor .bn-inline-content:before {
-  content: "Enter text or type '/' for commands";
-}
-
-.bn-block-content.bn-is-filter.bn-has-anchor .bn-inline-content:before {
-  content: "Type to filter";
-}
-
-.bn-block-content[data-content-type="heading"].bn-is-empty
-  .bn-inline-content:before {
-  content: "Heading";
-}
-
-.bn-block-content[data-content-type="bulletListItem"].bn-is-empty
-  .bn-inline-content:before,
-.bn-block-content[data-content-type="numberedListItem"].bn-is-empty
-  .bn-inline-content:before {
-  content: "List";
-}
-
-.bn-is-empty
-  .bn-block-content[data-content-type="captionedImage"]
-  .bn-inline-content:before {
-  content: "Caption";
-}
+/* TODO: should this be here? */
 
 /* TEXT COLORS */
 [data-text-color="gray"] {