@blocknote/core 0.9.5 → 0.10.0

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

@@ -0,0 +1,282 @@
+import { EditorTestCases } from "../index";
+
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+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 { 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
+// serializes custom blocks using their `render` function.
+const SimpleImage = createBlockSpec(
+  {
+    type: "simpleImage" as const,
+    propSchema: imagePropSchema,
+    content: "none",
+  },
+  { render: renderImage as any }
+);
+
+const CustomParagraph = createBlockSpec(
+  {
+    type: "customParagraph" as const,
+    propSchema: defaultProps,
+    content: "inline",
+  },
+  {
+    render: () => {
+      const paragraph = document.createElement("p");
+      paragraph.className = "custom-paragraph";
+
+      return {
+        dom: paragraph,
+        contentDOM: paragraph,
+      };
+    },
+    toExternalHTML: () => {
+      const paragraph = document.createElement("p");
+      paragraph.className = "custom-paragraph";
+      paragraph.innerHTML = "Hello World";
+
+      return {
+        dom: paragraph,
+      };
+    },
+  }
+);
+
+const SimpleCustomParagraph = createBlockSpec(
+  {
+    type: "simpleCustomParagraph" as const,
+    propSchema: defaultProps,
+    content: "inline",
+  },
+  {
+    render: () => {
+      const paragraph = document.createElement("p");
+      paragraph.className = "simple-custom-paragraph";
+
+      return {
+        dom: paragraph,
+        contentDOM: paragraph,
+      };
+    },
+  }
+);
+
+const customSpecs = {
+  ...defaultBlockSpecs,
+  simpleImage: SimpleImage,
+  customParagraph: CustomParagraph,
+  simpleCustomParagraph: SimpleCustomParagraph,
+} satisfies BlockSpecs;
+
+export const customBlocksTestCases: EditorTestCases<
+  BlockSchemaFromSpecs<typeof customSpecs>,
+  DefaultInlineContentSchema,
+  DefaultStyleSchema
+> = {
+  name: "custom blocks schema",
+  createEditor: () => {
+    return BlockNoteEditor.create({
+      blockSpecs: customSpecs,
+      uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
+    });
+  },
+  documents: [
+    {
+      name: "simpleImage/button",
+      blocks: [
+        {
+          type: "simpleImage" as const,
+        },
+      ],
+    },
+    {
+      name: "simpleImage/basic",
+      blocks: [
+        {
+          type: "simpleImage" as const,
+          props: {
+            url: "exampleURL",
+            caption: "Caption",
+            width: 256,
+          } as const,
+        },
+      ],
+    },
+    {
+      name: "simpleImage/nested",
+      blocks: [
+        {
+          type: "simpleImage" as const,
+          props: {
+            url: "exampleURL",
+            caption: "Caption",
+            width: 256,
+          } as const,
+          children: [
+            {
+              type: "simpleImage" as const,
+              props: {
+                url: "exampleURL",
+                caption: "Caption",
+                width: 256,
+              } as const,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "customParagraph/basic",
+      blocks: [
+        {
+          type: "customParagraph" as const,
+          content: "Custom Paragraph",
+        },
+      ],
+    },
+    {
+      name: "customParagraph/styled",
+      blocks: [
+        {
+          type: "customParagraph" as const,
+          props: {
+            textAlignment: "center",
+            textColor: "orange",
+            backgroundColor: "pink",
+          } as const,
+          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: "customParagraph/nested",
+      blocks: [
+        {
+          type: "customParagraph" as const,
+          content: "Custom Paragraph",
+          children: [
+            {
+              type: "customParagraph" as const,
+              content: "Nested Custom Paragraph 1",
+            },
+            {
+              type: "customParagraph" as const,
+              content: "Nested Custom Paragraph 2",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "simpleCustomParagraph/basic",
+      blocks: [
+        {
+          type: "simpleCustomParagraph" as const,
+          content: "Custom Paragraph",
+        },
+      ],
+    },
+    {
+      name: "simpleCustomParagraph/styled",
+      blocks: [
+        {
+          type: "simpleCustomParagraph" as const,
+          props: {
+            textAlignment: "center",
+            textColor: "orange",
+            backgroundColor: "pink",
+          } as const,
+          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: "simpleCustomParagraph/nested",
+      blocks: [
+        {
+          type: "simpleCustomParagraph" as const,
+          content: "Custom Paragraph",
+          children: [
+            {
+              type: "simpleCustomParagraph" as const,
+              content: "Nested Custom Paragraph 1",
+            },
+            {
+              type: "simpleCustomParagraph" as const,
+              content: "Nested Custom Paragraph 2",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,114 @@
+import { EditorTestCases } from "../index";
+
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import {
+  DefaultBlockSchema,
+  DefaultStyleSchema,
+  defaultInlineContentSpecs,
+} from "../../../blocks/defaultBlocks";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+import { createInlineContentSpec } from "../../../schema/inlineContent/createSpec";
+import {
+  InlineContentSchemaFromSpecs,
+  InlineContentSpecs,
+} from "../../../schema/inlineContent/types";
+
+const mention = createInlineContentSpec(
+  {
+    type: "mention" as const,
+    propSchema: {
+      user: {
+        default: "",
+      },
+    },
+    content: "none",
+  },
+  {
+    render: (ic) => {
+      const dom = document.createElement("span");
+      dom.appendChild(document.createTextNode("@" + ic.props.user));
+
+      return {
+        dom,
+      };
+    },
+  }
+);
+
+const tag = createInlineContentSpec(
+  {
+    type: "tag" as const,
+    propSchema: {},
+    content: "styled",
+  },
+  {
+    render: () => {
+      const dom = document.createElement("span");
+      dom.textContent = "#";
+
+      const contentDOM = document.createElement("span");
+      dom.appendChild(contentDOM);
+
+      return {
+        dom,
+        contentDOM,
+      };
+    },
+  }
+);
+
+const customInlineContent = {
+  ...defaultInlineContentSpecs,
+  mention,
+  tag,
+} satisfies InlineContentSpecs;
+
+export const customInlineContentTestCases: EditorTestCases<
+  DefaultBlockSchema,
+  InlineContentSchemaFromSpecs<typeof customInlineContent>,
+  DefaultStyleSchema
+> = {
+  name: "custom inline content schema",
+  createEditor: () => {
+    return BlockNoteEditor.create({
+      uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
+      inlineContentSpecs: customInlineContent,
+    });
+  },
+  documents: [
+    {
+      name: "mention/basic",
+      blocks: [
+        {
+          type: "paragraph",
+          content: [
+            "I enjoy working with ",
+            {
+              type: "mention",
+              props: {
+                user: "Matthew",
+              },
+              content: undefined,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "tag/basic",
+      blocks: [
+        {
+          type: "paragraph",
+          content: [
+            "I love ",
+            {
+              type: "tag",
+              // props: {},
+              content: "BlockNote",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,100 @@
+import { EditorTestCases } from "../index";
+
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor";
+import {
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  defaultStyleSpecs,
+} from "../../../blocks/defaultBlocks";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "../../../blocks/ImageBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY";
+import { createStyleSpec } from "../../../schema/styles/createSpec";
+import { StyleSchemaFromSpecs, StyleSpecs } from "../../../schema/styles/types";
+
+const small = createStyleSpec(
+  {
+    type: "small",
+    propSchema: "boolean",
+  },
+  {
+    render: () => {
+      const dom = document.createElement("small");
+      return {
+        dom,
+        contentDOM: dom,
+      };
+    },
+  }
+);
+
+const fontSize = createStyleSpec(
+  {
+    type: "fontSize",
+    propSchema: "string",
+  },
+  {
+    render: (value) => {
+      const dom = document.createElement("span");
+      dom.setAttribute("style", "font-size: " + value);
+      return {
+        dom,
+        contentDOM: dom,
+      };
+    },
+  }
+);
+
+const customStyles = {
+  ...defaultStyleSpecs,
+  small,
+  fontSize,
+} satisfies StyleSpecs;
+
+export const customStylesTestCases: EditorTestCases<
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  StyleSchemaFromSpecs<typeof customStyles>
+> = {
+  name: "custom style schema",
+  createEditor: () => {
+    return BlockNoteEditor.create({
+      uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
+      styleSpecs: customStyles,
+    });
+  },
+  documents: [
+    {
+      name: "small/basic",
+      blocks: [
+        {
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "This is a small text",
+              styles: {
+                small: true,
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "fontSize/basic",
+      blocks: [
+        {
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "This is text with a custom fontSize",
+              styles: {
+                fontSize: "18px",
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};