@blocknote/core 0.21.0 → 0.23.0

package/src/api/exporters/html/util/serializeBlocksInternalHTML.ts

@@ -78,7 +78,9 @@ function serializeBlock<
     for (const [name, spec] of Object.entries(
       editor.schema.blockSchema[block.type as any].propSchema
     )) {
-      (props as any)[name] = spec.default;
+      if (spec.default !== undefined) {
+        (props as any)[name] = spec.default;
+      }
     }
   }
 

package/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap

@@ -1605,6 +1605,22 @@ exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert
 }
 `;
 
+exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert pageBreak/basic to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "type": "pageBreak",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
 exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert paragraph/basic to/from prosemirror 1`] = `
 {
   "attrs": {

package/src/api/nodeConversions/nodeToBlock.ts

@@ -355,7 +355,10 @@ export function nodeToBlock<
   })) {
     const propSchema = blockSpec.propSchema;
 
-    if (attr in propSchema) {
+    if (
+      attr in propSchema &&
+      !(propSchema[attr].default === undefined && value === undefined)
+    ) {
       props[attr] = value;
     }
   }

package/src/api/parsers/html/__snapshots__/parse-codeblocks.json

@@ -0,0 +1,62 @@
+[
+  {
+    "id": "1",
+    "type": "codeBlock",
+    "props": {
+      "language": "javascript"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "console.log(\"Should default to JS\")",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "2",
+    "type": "codeBlock",
+    "props": {
+      "language": "typescript"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "console.log(\"Should parse TS from data-language\")",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "3",
+    "type": "codeBlock",
+    "props": {
+      "language": "python"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "print(\"Should parse Python from language- class\")",
+        "styles": {}
+      }
+    ],
+    "children": []
+  },
+  {
+    "id": "4",
+    "type": "codeBlock",
+    "props": {
+      "language": "typescript"
+    },
+    "content": [
+      {
+        "type": "text",
+        "text": "console.log(\"Should prioritize TS from data-language over language- class\")",
+        "styles": {}
+      }
+    ],
+    "children": []
+  }
+]

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

@@ -516,4 +516,13 @@ With Hard Break</p>
 
     await parseHTMLAndCompareSnapshots(html, "parse-google-docs-html");
   });
+
+  it("Parse codeblocks", async () => {
+    const html = `<pre><code>console.log("Should default to JS")</code></pre>
+    <pre><code data-language="typescript">console.log("Should parse TS from data-language")</code></pre>
+    <pre><code class="language-python">print("Should parse Python from language- class")</code></pre>
+    <pre><code class="language-ruby" data-language="typescript">console.log("Should prioritize TS from data-language over language- class")</code></pre>`;
+
+    await parseHTMLAndCompareSnapshots(html, "parse-codeblocks");
+  });
 });

package/src/api/parsers/markdown/__snapshots__/pasted/styled.json

@@ -1,6 +1,6 @@
 [
   {
-    "id": "2",
+    "id": "0",
     "type": "paragraph",
     "props": {
       "textColor": "default",
@@ -48,7 +48,7 @@
     "children": []
   },
   {
-    "id": "3",
+    "id": "2",
     "type": "paragraph",
     "props": {
       "textColor": "default",

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

@@ -6,16 +6,22 @@ import {
   DefaultInlineContentSchema,
   DefaultStyleSchema,
 } from "../../../blocks/defaultBlocks.js";
+import {
+  pageBreakSchema,
+  withPageBreak,
+} from "../../../blocks/PageBreakBlockContent/schema.js";
 import { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
+import { BlockNoteSchema } from "../../../editor/BlockNoteSchema.js";
 
 export const defaultSchemaTestCases: EditorTestCases<
-  DefaultBlockSchema,
+  DefaultBlockSchema & typeof pageBreakSchema.blockSchema,
   DefaultInlineContentSchema,
   DefaultStyleSchema
 > = {
   name: "default schema",
   createEditor: () => {
     return BlockNoteEditor.create({
+      schema: withPageBreak(BlockNoteSchema.create()),
       uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
     });
   },
@@ -202,6 +208,14 @@ export const defaultSchemaTestCases: EditorTestCases<
         },
       ],
     },
+    {
+      name: "pageBreak/basic",
+      blocks: [
+        {
+          type: "pageBreak",
+        },
+      ],
+    },
     {
       name: "file/button",
       blocks: [

package/src/api/testUtil/partialBlockTestUtil.ts

@@ -111,7 +111,10 @@ export function partialBlockToBlockForTesting<
 
   Object.entries(schema[partialBlock.type!].propSchema).forEach(
     ([propKey, propValue]) => {
-      if (withDefaults.props[propKey] === undefined) {
+      if (
+        withDefaults.props[propKey] === undefined &&
+        propValue.default !== undefined
+      ) {
         (withDefaults.props as any)[propKey] = propValue.default;
       }
     }

package/src/blocks/CodeBlockContent/CodeBlockContent.ts

@@ -25,6 +25,10 @@ interface CodeBlockOptions {
   supportedLanguages: SupportedLanguageConfig[];
 }
 
+export const shikiParserSymbol = Symbol.for("blocknote.shikiParser");
+export const shikiHighlighterPromiseSymbol = Symbol.for(
+  "blocknote.shikiHighlighterPromise"
+);
 export const defaultCodeBlockPropSchema = {
   language: {
     default: "javascript",
@@ -77,9 +81,10 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
             const languages = classNames
               .filter((className) => className.startsWith("language-"))
               .map((className) => className.replace("language-", ""));
-            const [classLanguage] = languages;
 
-            language = classLanguage.toLowerCase();
+            if (languages.length > 0) {
+              language = languages[0].toLowerCase();
+            }
           }
 
           if (!language) {
@@ -93,6 +98,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
           );
         },
         renderHTML: (attributes) => {
+          // TODO: Use `data-language="..."` instead for easier parsing
           return attributes.language && attributes.language !== "text"
             ? {
                 class: `language-${attributes.language}`,
@@ -106,9 +112,11 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
     return [
       {
         tag: "div[data-content-type=" + this.name + "]",
+        contentElement: "code",
       },
       {
         tag: "pre",
+        contentElement: "code",
         preserveWhitespace: "full",
       },
     ];
@@ -195,19 +203,30 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
     };
   },
   addProseMirrorPlugins() {
+    const supportedLanguages = this.options
+      .supportedLanguages as SupportedLanguageConfig[];
+    const globalThisForShiki = globalThis as {
+      [shikiHighlighterPromiseSymbol]?: Promise<Highlighter>;
+      [shikiParserSymbol]?: Parser;
+    };
+
     let highlighter: Highlighter | undefined;
     let parser: Parser | undefined;
 
-    const supportedLanguages = this.options
-      .supportedLanguages as SupportedLanguageConfig[];
     const lazyParser: Parser = (options) => {
       if (!highlighter) {
-        return createHighlighter({
-          themes: ["github-dark"],
-          langs: [],
-        }).then((createdHighlighter) => {
-          highlighter = createdHighlighter;
-        });
+        globalThisForShiki[shikiHighlighterPromiseSymbol] =
+          globalThisForShiki[shikiHighlighterPromiseSymbol] ||
+          createHighlighter({
+            themes: ["github-dark"],
+            langs: [],
+          });
+
+        return globalThisForShiki[shikiHighlighterPromiseSymbol].then(
+          (createdHighlighter) => {
+            highlighter = createdHighlighter;
+          }
+        );
       }
 
       const language = options.language;
@@ -223,7 +242,9 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
       }
 
       if (!parser) {
-        parser = createParser(highlighter);
+        parser =
+          globalThisForShiki[shikiParserSymbol] || createParser(highlighter);
+        globalThisForShiki[shikiParserSymbol] = parser;
       }
 
       return parser(options);

package/src/blocks/HeadingBlockContent/HeadingBlockContent.ts

@@ -5,6 +5,7 @@ import {
   PropSchema,
   createBlockSpecFromStronglyTypedTiptapNode,
   createStronglyTypedTiptapNode,
+  propsToAttributes,
 } from "../../schema/index.js";
 import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js";
 import { defaultProps } from "../defaultProps.js";
@@ -18,26 +19,9 @@ 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(),
-          };
-        },
-      },
-    };
+    return propsToAttributes(headingPropSchema);
   },
 
   addInputRules() {
@@ -140,15 +124,6 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
     return [
       {
         tag: "div[data-content-type=" + this.name + "]",
-        getAttrs: (element) => {
-          if (typeof element === "string") {
-            return false;
-          }
-
-          return {
-            level: element.getAttribute("data-level"),
-          };
-        },
       },
       {
         tag: "h1",

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

@@ -79,7 +79,7 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
     return [
       // Case for regular HTML list structure.
       {
-        tag: "div[data-content-type=" + this.name + "]", // TODO: remove if we can't come up with test case that needs this
+        tag: "div[data-content-type=" + this.name + "]",
       },
       {
         tag: "li",

package/src/blocks/ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.ts

@@ -8,6 +8,7 @@ import {
   PropSchema,
   createBlockSpecFromStronglyTypedTiptapNode,
   createStronglyTypedTiptapNode,
+  propsToAttributes,
 } from "../../../schema/index.js";
 import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers.js";
 import { defaultProps } from "../../defaultProps.js";
@@ -24,22 +25,9 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
   name: "checkListItem",
   content: "inline*",
   group: "blockContent",
+
   addAttributes() {
-    return {
-      checked: {
-        default: false,
-        // instead of "checked" attributes, use "data-checked"
-        parseHTML: (element) =>
-          element.getAttribute("data-checked") === "true" || undefined,
-        renderHTML: (attributes) => {
-          return attributes.checked
-            ? {
-                "data-checked": (attributes.checked as boolean).toString(),
-              }
-            : {};
-        },
-      },
-    };
+    return propsToAttributes(checkListItemPropSchema);
   },
 
   addInputRules() {
@@ -130,7 +118,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
   parseHTML() {
     return [
       {
-        tag: "div[data-content-type=" + this.name + "]", // TODO: remove if we can't come up with test case that needs this
+        tag: "div[data-content-type=" + this.name + "]",
       },
       // Checkbox only.
       {

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

@@ -20,7 +20,7 @@ export const NumberedListIndexingPlugin = () => {
           node.type.name === "blockContainer" &&
           node.firstChild!.type.name === "numberedListItem"
         ) {
-          let newIndex = "1";
+          let newIndex = `${node.firstChild!.attrs["start"] || 1}`;
 
           const blockInfo = getBlockInfo({
             posBeforeNode: pos,
@@ -60,13 +60,21 @@ export const NumberedListIndexingPlugin = () => {
 
           const contentNode = blockInfo.blockContent.node;
           const index = contentNode.attrs["index"];
+          const isFirst =
+            prevBlock?.firstChild?.type.name !== "numberedListItem";
 
-          if (index !== newIndex) {
+          if (index !== newIndex || (contentNode.attrs.start && !isFirst)) {
             modified = true;
 
+            const { start, ...attrs } = contentNode.attrs;
+
             tr.setNodeMarkup(blockInfo.blockContent.beforePos, undefined, {
-              ...contentNode.attrs,
+              ...attrs,
               index: newIndex,
+              ...(typeof start === "number" &&
+                isFirst && {
+                  start,
+                }),
             });
           }
         }

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

@@ -5,6 +5,7 @@ import {
   PropSchema,
   createBlockSpecFromStronglyTypedTiptapNode,
   createStronglyTypedTiptapNode,
+  propsToAttributes,
 } from "../../../schema/index.js";
 import { createDefaultBlockDOMOutputSpec } from "../../defaultBlockHelpers.js";
 import { defaultProps } from "../../defaultProps.js";
@@ -13,6 +14,7 @@ import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin.js";
 
 export const numberedListItemPropSchema = {
   ...defaultProps,
+  start: { default: undefined, type: "number" },
 } satisfies PropSchema;
 
 const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
@@ -22,6 +24,9 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
   priority: 90,
   addAttributes() {
     return {
+      ...propsToAttributes(numberedListItemPropSchema),
+      // the index attribute is only used internally (it's not part of the blocknote schema)
+      // that's why it's defined explicitly here, and not part of the prop schema
       index: {
         default: null,
         parseHTML: (element) => element.getAttribute("data-index"),
@@ -38,15 +43,17 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
     return [
       // Creates an ordered list when starting with "1.".
       new InputRule({
-        find: new RegExp(`^1\\.\\s$`),
-        handler: ({ state, chain, range }) => {
+        find: new RegExp(`^(\\d+)\\.\\s$`),
+        handler: ({ state, chain, range, match }) => {
           const blockInfo = getBlockInfoFromSelection(state);
           if (
             !blockInfo.isBlockContainer ||
-            blockInfo.blockContent.node.type.spec.content !== "inline*"
+            blockInfo.blockContent.node.type.spec.content !== "inline*" ||
+            blockInfo.blockNoteType === "numberedListItem"
           ) {
             return;
           }
+          const startIndex = parseInt(match[1]);
 
           chain()
             .command(
@@ -55,7 +62,11 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
                 blockInfo.bnBlock.beforePos,
                 {
                   type: "numberedListItem",
-                  props: {},
+                  props:
+                    (startIndex === 1 && {}) ||
+                    ({
+                      start: startIndex,
+                    } as any),
                 }
               )
             )
@@ -95,7 +106,7 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
   parseHTML() {
     return [
       {
-        tag: "div[data-content-type=" + this.name + "]", // TODO: remove if we can't come up with test case that needs this
+        tag: "div[data-content-type=" + this.name + "]",
       },
       // Case for regular HTML list structure.
       // (e.g.: when pasting from other apps)
@@ -116,7 +127,16 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
             parent.tagName === "OL" ||
             (parent.tagName === "DIV" && parent.parentElement!.tagName === "OL")
           ) {
-            return {};
+            const startIndex =
+              parseInt(parent.getAttribute("start") || "1") || 1;
+
+            if (element.previousSibling || startIndex === 1) {
+              return {};
+            }
+
+            return {
+              start: startIndex,
+            };
           }
 
           return false;

package/src/blocks/PageBreakBlockContent/PageBreakBlockContent.ts

@@ -0,0 +1,49 @@
+import {
+  createBlockSpec,
+  CustomBlockConfig,
+  Props,
+} from "../../schema/index.js";
+
+export const pageBreakConfig = {
+  type: "pageBreak" as const,
+  propSchema: {},
+  content: "none",
+  isFileBlock: false,
+  isSelectable: false,
+} satisfies CustomBlockConfig;
+export const pageBreakRender = () => {
+  const pageBreak = document.createElement("div");
+
+  pageBreak.className = "bn-page-break";
+  pageBreak.setAttribute("data-page-break", "");
+
+  return {
+    dom: pageBreak,
+  };
+};
+export const pageBreakParse = (
+  element: HTMLElement
+): Partial<Props<typeof pageBreakConfig.propSchema>> | undefined => {
+  if (element.tagName === "DIV" && element.hasAttribute("data-page-break")) {
+    return {
+      type: "pageBreak",
+    };
+  }
+
+  return undefined;
+};
+export const pageBreakToExternalHTML = () => {
+  const pageBreak = document.createElement("div");
+
+  pageBreak.setAttribute("data-page-break", "");
+
+  return {
+    dom: pageBreak,
+  };
+};
+
+export const PageBreak = createBlockSpec(pageBreakConfig, {
+  render: pageBreakRender,
+  parse: pageBreakParse,
+  toExternalHTML: pageBreakToExternalHTML,
+});

package/src/blocks/PageBreakBlockContent/getPageBreakSlashMenuItems.ts

@@ -0,0 +1,45 @@
+import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
+import { DefaultSuggestionItem } from "../../extensions/SuggestionMenu/DefaultSuggestionItem.js";
+import { insertOrUpdateBlock } from "../../extensions/SuggestionMenu/getDefaultSlashMenuItems.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../schema/index.js";
+import { pageBreakSchema } from "./schema.js";
+
+export function checkPageBreakBlocksInSchema<
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  editor: BlockNoteEditor<any, I, S>
+): editor is BlockNoteEditor<typeof pageBreakSchema.blockSchema, I, S> {
+  return (
+    "pageBreak" in editor.schema.blockSchema &&
+    editor.schema.blockSchema["pageBreak"] ===
+      pageBreakSchema.blockSchema["pageBreak"]
+  );
+}
+
+export function getPageBreakSlashMenuItems<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(editor: BlockNoteEditor<BSchema, I, S>) {
+  const items: (Omit<DefaultSuggestionItem, "key"> & { key: "page_break" })[] =
+    [];
+
+  if (checkPageBreakBlocksInSchema(editor)) {
+    items.push({
+      ...editor.dictionary.slash_menu.page_break,
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, {
+          type: "pageBreak",
+        });
+      },
+      key: "page_break",
+    });
+  }
+
+  return items;
+}

package/src/blocks/PageBreakBlockContent/schema.ts

@@ -0,0 +1,40 @@
+import { BlockNoteSchema } from "../../editor/BlockNoteSchema.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../schema/index.js";
+import { PageBreak } from "./PageBreakBlockContent.js";
+
+export const pageBreakSchema = BlockNoteSchema.create({
+  blockSpecs: {
+    pageBreak: PageBreak,
+  },
+});
+
+/**
+ * Adds page break support to the given schema.
+ */
+export const withPageBreak = <
+  B extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  schema: BlockNoteSchema<B, I, S>
+) => {
+  return BlockNoteSchema.create({
+    blockSpecs: {
+      ...schema.blockSpecs,
+      ...pageBreakSchema.blockSpecs,
+    },
+    inlineContentSpecs: schema.inlineContentSpecs,
+    styleSpecs: schema.styleSpecs,
+  }) as any as BlockNoteSchema<
+    // typescript needs some help here
+    B & {
+      pageBreak: typeof PageBreak.config;
+    },
+    I,
+    S
+  >;
+};