@blocknote/core 0.9.6 → 0.10.1

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

@@ -0,0 +1,399 @@
+import { EditorTestCases } from "../index";
+
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import {
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+} from "../../../blocks/defaultBlocks";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+
+export const defaultSchemaTestCases: EditorTestCases<
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema
+> = {
+  name: "default schema",
+  createEditor: () => {
+    return BlockNoteEditor.create({
+      uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
+    });
+  },
+  documents: [
+    {
+      name: "paragraph/empty",
+      blocks: [
+        {
+          type: "paragraph",
+        },
+      ],
+    },
+    {
+      name: "paragraph/basic",
+      blocks: [
+        {
+          type: "paragraph",
+          content: "Paragraph",
+        },
+      ],
+    },
+    {
+      name: "paragraph/styled",
+      blocks: [
+        {
+          type: "paragraph",
+          props: {
+            textAlignment: "center",
+            textColor: "orange",
+            backgroundColor: "pink",
+          },
+          content: [
+            {
+              type: "text",
+              styles: {},
+              text: "Plain ",
+            },
+            {
+              type: "text",
+              styles: {
+                textColor: "red",
+              },
+              text: "Red Text ",
+            },
+            {
+              type: "text",
+              styles: {
+                backgroundColor: "blue",
+              },
+              text: "Blue Background ",
+            },
+            {
+              type: "text",
+              styles: {
+                textColor: "red",
+                backgroundColor: "blue",
+              },
+              text: "Mixed Colors",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "paragraph/nested",
+      blocks: [
+        {
+          type: "paragraph",
+          content: "Paragraph",
+          children: [
+            {
+              type: "paragraph",
+              content: "Nested Paragraph 1",
+            },
+            {
+              type: "paragraph",
+              content: "Nested Paragraph 2",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "image/button",
+      blocks: [
+        {
+          type: "image",
+        },
+      ],
+    },
+    {
+      name: "image/basic",
+      blocks: [
+        {
+          type: "image",
+          props: {
+            url: "exampleURL",
+            caption: "Caption",
+            width: 256,
+          },
+        },
+      ],
+    },
+    {
+      name: "image/nested",
+      blocks: [
+        {
+          type: "image",
+          props: {
+            url: "exampleURL",
+            caption: "Caption",
+            width: 256,
+          },
+          children: [
+            {
+              type: "image",
+              props: {
+                url: "exampleURL",
+                caption: "Caption",
+                width: 256,
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "link/basic",
+      blocks: [
+        {
+          // id: UniqueID.options.generateID(),
+          type: "paragraph",
+          content: [
+            {
+              type: "link",
+              href: "https://www.website.com",
+              content: "Website",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "link/styled",
+      blocks: [
+        {
+          // id: UniqueID.options.generateID(),
+          type: "paragraph",
+          content: [
+            {
+              type: "link",
+              href: "https://www.website.com",
+              content: [
+                {
+                  type: "text",
+                  text: "Web",
+                  styles: {
+                    bold: true,
+                  },
+                },
+                {
+                  type: "text",
+                  text: "site",
+                  styles: {},
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "link/adjacent",
+      blocks: [
+        {
+          // id: UniqueID.options.generateID(),
+          type: "paragraph",
+          content: [
+            {
+              type: "link",
+              href: "https://www.website.com",
+              content: "Website",
+            },
+            {
+              type: "link",
+              href: "https://www.website2.com",
+              content: "Website2",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "hardbreak/basic",
+      blocks: [
+        {
+          // id: UniqueID.options.generateID(),
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "Text1\nText2",
+              styles: {},
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "hardbreak/multiple",
+      blocks: [
+        {
+          // id: UniqueID.options.generateID(),
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "Text1\nText2\nText3",
+              styles: {},
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "hardbreak/start",
+      blocks: [
+        {
+          // id: UniqueID.options.generateID(),
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "\nText1",
+              styles: {},
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "hardbreak/end",
+      blocks: [
+        {
+          // id: UniqueID.options.generateID(),
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "Text1\n",
+              styles: {},
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "hardbreak/only",
+      blocks: [
+        {
+          // id: UniqueID.options.generateID(),
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "\n",
+              styles: {},
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "hardbreak/styles",
+      blocks: [
+        {
+          // id: UniqueID.options.generateID(),
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "Text1\n",
+              styles: {},
+            },
+            {
+              type: "text",
+              text: "Text2",
+              styles: { bold: true },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "hardbreak/link",
+      blocks: [
+        {
+          // id: UniqueID.options.generateID(),
+          type: "paragraph",
+          content: [
+            {
+              type: "link",
+              href: "https://www.website.com",
+              content: "Link1\nLink1",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "hardbreak/between-links",
+      blocks: [
+        {
+          // id: UniqueID.options.generateID(),
+          type: "paragraph",
+          content: [
+            {
+              type: "link",
+              href: "https://www.website.com",
+              content: "Link1\n",
+            },
+            {
+              type: "link",
+              href: "https://www.website2.com",
+              content: "Link2",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "complex/misc",
+      blocks: [
+        {
+          // id: UniqueID.options.generateID(),
+          type: "heading",
+          props: {
+            backgroundColor: "blue",
+            textColor: "yellow",
+            textAlignment: "right",
+            level: 2,
+          },
+          content: [
+            {
+              type: "text",
+              text: "Heading ",
+              styles: {
+                bold: true,
+                underline: true,
+              },
+            },
+            {
+              type: "text",
+              text: "2",
+              styles: {
+                italic: true,
+                strike: true,
+              },
+            },
+          ],
+          children: [
+            {
+              // id: UniqueID.options.generateID(),
+              type: "paragraph",
+              props: {
+                backgroundColor: "red",
+              },
+              content: "Paragraph",
+              children: [],
+            },
+            {
+              // id: UniqueID.options.generateID(),
+              type: "bulletListItem",
+              props: {},
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};

package/src/api/testUtil/index.ts

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

package/src/api/testUtil/partialBlockTestUtil.ts

@@ -0,0 +1,127 @@
+import UniqueID from "../../extensions/UniqueID/UniqueID";
+import {
+  Block,
+  BlockSchema,
+  PartialBlock,
+  TableContent,
+} from "../../schema/blocks/types";
+import {
+  InlineContent,
+  InlineContentSchema,
+  PartialInlineContent,
+  StyledText,
+  isPartialLinkInlineContent,
+  isStyledTextInlineContent,
+} from "../../schema/inlineContent/types";
+import { StyleSchema } from "../../schema/styles/types";
+
+function textShorthandToStyledText(
+  content: string | StyledText<any>[] = ""
+): StyledText<any>[] {
+  if (typeof content === "string") {
+    return [
+      {
+        type: "text",
+        text: content,
+        styles: {},
+      },
+    ];
+  }
+  return content;
+}
+
+function partialContentToInlineContent(
+  content: PartialInlineContent<any, any> | TableContent<any> | undefined
+): InlineContent<any, any>[] | TableContent<any> | undefined {
+  if (typeof content === "string") {
+    return textShorthandToStyledText(content);
+  }
+
+  if (Array.isArray(content)) {
+    return content.flatMap((partialContent) => {
+      if (typeof partialContent === "string") {
+        return textShorthandToStyledText(partialContent);
+      } else if (isPartialLinkInlineContent(partialContent)) {
+        return {
+          ...partialContent,
+          content: textShorthandToStyledText(partialContent.content),
+        };
+      } else if (isStyledTextInlineContent(partialContent)) {
+        return partialContent;
+      } else {
+        // custom inline content
+
+        return {
+          props: {},
+          ...partialContent,
+          content: partialContentToInlineContent(partialContent.content),
+        } as any;
+      }
+    });
+  }
+
+  return content;
+}
+
+export function partialBlocksToBlocksForTesting<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  schema: BSchema,
+  partialBlocks: Array<PartialBlock<BSchema, I, S>>
+): Array<Block<BSchema, I, S>> {
+  return partialBlocks.map((partialBlock) =>
+    partialBlockToBlockForTesting(schema, partialBlock)
+  );
+}
+
+export function partialBlockToBlockForTesting<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  schema: BSchema,
+  partialBlock: PartialBlock<BSchema, I, S>
+): Block<BSchema, I, S> {
+  const withDefaults: Block<BSchema, I, S> = {
+    id: "",
+    type: partialBlock.type!,
+    props: {} as any,
+    content:
+      schema[partialBlock.type!].content === "inline" ? [] : (undefined as any),
+    children: [] as any,
+    ...partialBlock,
+  };
+
+  Object.entries(schema[partialBlock.type!].propSchema).forEach(
+    ([propKey, propValue]) => {
+      if (withDefaults.props[propKey] === undefined) {
+        (withDefaults.props as any)[propKey] = propValue.default;
+      }
+    }
+  );
+
+  return {
+    ...withDefaults,
+    content: partialContentToInlineContent(withDefaults.content),
+    children: withDefaults.children.map((c) => {
+      return partialBlockToBlockForTesting(schema, c);
+    }),
+  } as any;
+}
+
+export function addIdsToBlock(block: PartialBlock<any, any, any>) {
+  if (!block.id) {
+    block.id = UniqueID.options.generateID();
+  }
+  if (block.children) {
+    addIdsToBlocks(block.children);
+  }
+}
+
+export function addIdsToBlocks(blocks: PartialBlock<any, any, any>[]) {
+  for (const block of blocks) {
+    addIdsToBlock(block);
+  }
+}

package/src/blocks/HeadingBlockContent/HeadingBlockContent.ts

@@ -0,0 +1,136 @@
+import { InputRule } from "@tiptap/core";
+import {
+  PropSchema,
+  createBlockSpecFromStronglyTypedTiptapNode,
+  createStronglyTypedTiptapNode,
+} from "../../schema";
+import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers";
+import { defaultProps } from "../defaultProps";
+
+export const headingPropSchema = {
+  ...defaultProps,
+  level: { default: 1, values: [1, 2, 3] as const },
+} satisfies PropSchema;
+
+const HeadingBlockContent = createStronglyTypedTiptapNode({
+  name: "heading",
+  content: "inline*",
+  group: "blockContent",
+  addAttributes() {
+    return {
+      level: {
+        default: 1,
+        // instead of "level" attributes, use "data-level"
+        parseHTML: (element) => {
+          const attr = element.getAttribute("data-level")!;
+          const parsed = parseInt(attr);
+          if (isFinite(parsed)) {
+            return parsed;
+          }
+          return undefined;
+        },
+        renderHTML: (attributes) => {
+          return {
+            "data-level": (attributes.level as number).toString(),
+          };
+        },
+      },
+    };
+  },
+
+  addInputRules() {
+    return [
+      ...[1, 2, 3].map((level) => {
+        // Creates a heading of appropriate level when starting with "#", "##", or "###".
+        return new InputRule({
+          find: new RegExp(`^(#{${level}})\\s$`),
+          handler: ({ state, chain, range }) => {
+            chain()
+              .BNUpdateBlock(state.selection.from, {
+                type: "heading",
+                props: {
+                  level: level as any,
+                },
+              })
+              // Removes the "#" character(s) used to set the heading.
+              .deleteRange({ from: range.from, to: range.to });
+          },
+        });
+      }),
+    ];
+  },
+
+  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,
+          },
+        }),
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-content-type=" + this.name + "]",
+        getAttrs: (element) => {
+          if (typeof element === "string") {
+            return false;
+          }
+
+          return {
+            level: element.getAttribute("data-level"),
+          };
+        },
+      },
+      {
+        tag: "h1",
+        attrs: { level: 1 },
+        node: "heading",
+      },
+      {
+        tag: "h2",
+        attrs: { level: 2 },
+        node: "heading",
+      },
+      {
+        tag: "h3",
+        attrs: { level: 3 },
+        node: "heading",
+      },
+    ];
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return createDefaultBlockDOMOutputSpec(
+      this.name,
+      `h${node.attrs.level}`,
+      {
+        ...(this.options.domAttributes?.blockContent || {}),
+        ...HTMLAttributes,
+      },
+      this.options.domAttributes?.inlineContent || {}
+    );
+  },
+});
+
+export const Heading = createBlockSpecFromStronglyTypedTiptapNode(
+  HeadingBlockContent,
+  headingPropSchema
+);