@blocknote/core 0.21.0 → 0.22.0

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),
                 }
               )
             )
@@ -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/editor/Block.css

@@ -114,13 +114,13 @@ NESTED BLOCKS
 }
 
 /* HEADINGS*/
-[data-level="1"] {
+[data-content-type="heading"] {
   --level: 3em;
 }
-[data-level="2"] {
+[data-content-type="heading"][data-level="2"] {
   --level: 2em;
 }
-[data-level="3"] {
+[data-content-type="heading"][data-level="3"] {
   --level: 1.3em;
 }
 

package/src/editor/BlockNoteEditor.test.ts

@@ -71,6 +71,26 @@ it("adds id attribute when requested", async () => {
   );
   editor.replaceBlocks(editor.document, blocks);
   expect(await editor.blocksToFullHTML(editor.document)).toMatchInlineSnapshot(
-    `"<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1" id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">This is a normal text</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2" id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2" id="2"><div class="bn-block-content" data-content-type="heading" data-level="1"><h1 class="bn-inline-content">And this is a large heading</h1></div></div></div></div>"`
+    `"<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1" id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">This is a normal text</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2" id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2" id="2"><div class="bn-block-content" data-content-type="heading"><h1 class="bn-inline-content">And this is a large heading</h1></div></div></div></div>"`
   );
 });
+
+it("block prop types", () => {
+  // this test checks whether the block props are correctly typed in typescript
+  const editor = BlockNoteEditor.create();
+  const block = editor.document[0];
+  if (block.type === "paragraph") {
+    // @ts-expect-error
+    const level = block.props.level; // doesn't have level prop
+
+    // eslint-disable-next-line
+    expect(level).toBe(undefined);
+  }
+
+  if (block.type === "heading") {
+    const level = block.props.level; // does have level prop
+
+    // eslint-disable-next-line
+    expect(level).toBe(1);
+  }
+});

package/src/editor/editor.css

@@ -109,7 +109,7 @@ Tippy popups that are appended to document.body directly
   padding
 } */
 
-.ProseMirror .tableWrapper {
+.bn-editor [data-content-type="table"] .tableWrapper {
   position: relative;
   top: -16px;
   left: -16px;
@@ -119,7 +119,7 @@ Tippy popups that are appended to document.body directly
   overflow-y: hidden;
 }
 
-.ProseMirror .tableWrapper-inner {
+.bn-editor [data-content-type="table"] .tableWrapper-inner {
   /* position: relative; */
   /* top: -16px;
   left: -16px; */
@@ -127,17 +127,17 @@ Tippy popups that are appended to document.body directly
 }
 
 /* table related: */
-.bn-editor table {
+.bn-editor [data-content-type="table"] table {
   width: auto !important;
   word-break: break-word;
 }
-.bn-editor th,
-.bn-editor td {
+.bn-editor [data-content-type="table"] th,
+.bn-editor [data-content-type="table"] td {
   border: 1px solid #ddd;
   padding: 3px 5px;
 }
 
-.bn-editor th {
+.bn-editor [data-content-type="table"] th {
   font-weight: bold;
   text-align: left;
 }

package/src/editor/transformPasted.ts

@@ -1,6 +1,8 @@
 import { Fragment, Schema, Slice } from "@tiptap/pm/model";
 import { EditorView } from "@tiptap/pm/view";
 
+import { getBlockInfoFromSelection } from "../api/getBlockInfoFromPos.js";
+
 // helper function to remove a child from a fragment
 function removeChild(node: Fragment, n: number) {
   const children: any[] = [];
@@ -49,16 +51,25 @@ export function wrapTableRows(f: Fragment, schema: Schema) {
 /**
  * fix for https://github.com/ProseMirror/prosemirror/issues/1430#issuecomment-1822570821
  *
- * Without this fix, pasting two paragraphs would cause the second one to be indented in the other
- * this fix wraps every element in the slice in it's own blockContainer, to prevent Prosemirror from nesting the
- * elements on paste.
+ * This fix wraps pasted ProseMirror nodes in their own `blockContainer` nodes
+ * in most cases. This is to ensure that ProseMirror inserts them as separate
+ * blocks, which it sometimes doesn't do because it doesn't have enough context
+ * about the hierarchy of the pasted nodes. The issue can be seen when pasting
+ * e.g. an image or two consecutive paragraphs, where PM tries to nest the
+ * pasted block(s) when it shouldn't.
  *
- * The exception is when we encounter blockGroups with listitems, because those actually should be nested
+ * However, the fix is not applied in a few cases. See `shouldApplyFix` for
+ * which cases are excluded.
  */
 export function transformPasted(slice: Slice, view: EditorView) {
   let f = Fragment.from(slice.content);
   f = wrapTableRows(f, view.state.schema);
 
+  if (!shouldApplyFix(f, view)) {
+    // Don't apply the fix.
+    return new Slice(f, slice.openStart, slice.openEnd);
+  }
+
   for (let i = 0; i < f.childCount; i++) {
     if (f.child(i).type.spec.group === "blockContent") {
       const content = [f.child(i)];
@@ -92,3 +103,45 @@ export function transformPasted(slice: Slice, view: EditorView) {
   }
   return new Slice(f, slice.openStart, slice.openEnd);
 }
+
+/**
+ * Used in `transformPasted` to check if the fix there should be applied, i.e.
+ * if the pasted fragment should be wrapped in a `blockContainer` node. This
+ * will explicitly tell ProseMirror to treat it as a separate block.
+ */
+function shouldApplyFix(fragment: Fragment, view: EditorView) {
+  const nodeHasSingleChild = fragment.childCount === 1;
+  const nodeHasInlineContent =
+    fragment.firstChild?.type.spec.content === "inline*";
+  const nodeHasTableContent =
+    fragment.firstChild?.type.spec.content === "tableRow+";
+
+  if (nodeHasSingleChild) {
+    if (nodeHasInlineContent) {
+      // Case when we paste a single node with inline content, e.g. a paragraph
+      // or heading. We want to insert the content in-line for better UX instead
+      // of a separate block, so we return false.
+      return false;
+    }
+
+    if (nodeHasTableContent) {
+      // Not ideal that we check selection here, as `transformPasted` is called
+      // for both paste and drop events. Drop events can potentially cause
+      // issues as they don't always happen at the current selection.
+      const blockInfo = getBlockInfoFromSelection(view.state);
+      if (blockInfo.isBlockContainer) {
+        const selectedBlockHasTableContent =
+          blockInfo.blockContent.node.type.spec.content === "tableRow+";
+
+        // Case for when we paste a single node with table content, i.e. a
+        // table. Normally, we return true as we want to ensure the table is
+        // inserted as a separate block. However, if the selection is in an
+        // existing table, we return false, as we want the content of the pasted
+        // table to be added to the existing one for better UX.
+        return !selectedBlockHasTableContent;
+      }
+    }
+  }
+
+  return true;
+}

package/src/schema/blocks/createSpec.ts

@@ -148,7 +148,7 @@ export function createBlockSpec<
       : "") as T["content"] extends "inline" ? "inline*" : "",
     group: "blockContent",
     selectable: blockConfig.isSelectable ?? true,
-
+    isolating: true,
     addAttributes() {
       return propsToAttributes(blockConfig.propSchema);
     },

package/src/schema/blocks/internal.ts

@@ -46,7 +46,10 @@ export function propsToAttributes(propSchema: PropSchema): Attributes {
             return null;
           }
 
-          if (typeof spec.default === "boolean") {
+          if (
+            (spec.default === undefined && spec.type === "boolean") ||
+            (spec.default !== undefined && typeof spec.default === "boolean")
+          ) {
             if (value === "true") {
               return true;
             }
@@ -58,7 +61,10 @@ export function propsToAttributes(propSchema: PropSchema): Attributes {
             return null;
           }
 
-          if (typeof spec.default === "number") {
+          if (
+            (spec.default === undefined && spec.type === "number") ||
+            (spec.default !== undefined && typeof spec.default === "number")
+          ) {
             const asNumber = parseFloat(value);
             const isNumeric =
               !Number.isNaN(asNumber) && Number.isFinite(asNumber);
@@ -72,12 +78,14 @@ export function propsToAttributes(propSchema: PropSchema): Attributes {
 
           return value;
         },
-        renderHTML: (attributes) =>
-          attributes[name] !== spec.default
+        renderHTML: (attributes) => {
+          // don't render to html if the value is the same as the default
+          return attributes[name] !== spec.default
             ? {
                 [camelToDataKebab(name)]: attributes[name],
               }
-            : {},
+            : {};
+        },
       };
     });
 
@@ -173,7 +181,9 @@ export function wrapInBlockStructure<
   // which are already added as HTML attributes to the parent `blockContent`
   // element (inheritedProps) and props set to their default values.
   for (const [prop, value] of Object.entries(blockProps)) {
-    if (!inheritedProps.includes(prop) && value !== propSchema[prop].default) {
+    const spec = propSchema[prop];
+    const defaultValue = spec.default;
+    if (!inheritedProps.includes(prop) && value !== defaultValue) {
       blockContent.setAttribute(camelToDataKebab(prop), value);
     }
   }

package/src/schema/inlineContent/internal.ts

@@ -34,7 +34,10 @@ export function addInlineContentAttributes<
   // Adds props as HTML attributes in kebab-case with "data-" prefix. Skips props
   // set to their default values.
   Object.entries(inlineContentProps)
-    .filter(([prop, value]) => value !== propSchema[prop].default)
+    .filter(([prop, value]) => {
+      const spec = propSchema[prop];
+      return value !== spec.default;
+    })
     .map(([prop, value]) => {
       return [camelToDataKebab(prop), value];
     })

package/src/schema/propTypes.ts

@@ -1,9 +1,24 @@
-// Defines a single prop spec, which includes the default value the prop should
-// take and possible values it can take.
-export type PropSpec<PType extends boolean | number | string> = {
-  values?: readonly PType[];
-  default: PType;
-};
+// The PropSpec specifies the type of a prop and possibly a default value.
+// Note that props are always optional when used as "input"
+// (i.e., when creating a PartialBlock, for example by calling `insertBlocks({...})`)
+//
+// However, internally they're always set to `default`, unless a prop is marked optional
+//
+// At some point we should migrate this to zod or effect-schema
+export type PropSpec<PType extends boolean | number | string> =
+  | {
+      // We infer the type of the prop from the default value
+      default: PType;
+      // a list of possible values, for example for a string prop (this will then be used as a string union type)
+      values?: readonly PType[];
+    }
+  | {
+      default: undefined;
+      // Because there is no default value (for an optional prop, the default value is undefined),
+      // we need to specify the type of the prop manually (we can't infer it from the default value)
+      type: "string" | "number" | "boolean";
+      values?: readonly PType[];
+    };
 
 // Defines multiple block prop specs. The key of each prop is the name of the
 // prop, while the value is a corresponding prop spec. This should be included
@@ -16,17 +31,25 @@ export type PropSchema = Record<string, PropSpec<boolean | number | string>>;
 // each prop spec into a union type of its possible values, or a string if no
 // values are specified.
 export type Props<PSchema extends PropSchema> = {
-  [PName in keyof PSchema]: PSchema[PName]["default"] extends boolean
-    ? PSchema[PName]["values"] extends readonly boolean[]
-      ? PSchema[PName]["values"][number]
-      : boolean
-    : PSchema[PName]["default"] extends number
-    ? PSchema[PName]["values"] extends readonly number[]
-      ? PSchema[PName]["values"][number]
-      : number
-    : PSchema[PName]["default"] extends string
-    ? PSchema[PName]["values"] extends readonly string[]
-      ? PSchema[PName]["values"][number]
-      : string
+  // for required props, get type from type of "default" value,
+  // and if values are specified, get type from values
+  [PName in keyof PSchema]: (
+    PSchema[PName] extends { default: boolean } | { type: "boolean" }
+      ? PSchema[PName]["values"] extends readonly boolean[]
+        ? PSchema[PName]["values"][number]
+        : boolean
+      : PSchema[PName] extends { default: number } | { type: "number" }
+      ? PSchema[PName]["values"] extends readonly number[]
+        ? PSchema[PName]["values"][number]
+        : number
+      : PSchema[PName] extends { default: string } | { type: "string" }
+      ? PSchema[PName]["values"] extends readonly string[]
+        ? PSchema[PName]["values"][number]
+        : string
+      : never
+  ) extends infer T
+    ? PSchema[PName] extends { optional: true }
+      ? T | undefined
+      : T
     : never;
 };

package/types/src/api/blockManipulation/setupTestEnv.d.ts

@@ -137,6 +137,10 @@ export declare function setupTestEnv(): () => BlockNoteEditor<import("../../inde
             type: "numberedListItem";
             content: "inline";
             propSchema: {
+                start: {
+                    default: undefined;
+                    type: "number";
+                };
                 backgroundColor: {
                     default: "default";
                 };
@@ -153,6 +157,10 @@ export declare function setupTestEnv(): () => BlockNoteEditor<import("../../inde
             type: "numberedListItem";
             content: "inline";
             propSchema: {
+                start: {
+                    default: undefined;
+                    type: "number";
+                };
                 backgroundColor: {
                     default: "default";
                 };

package/types/src/api/clipboard/clipboardInternal.test.d.ts

@@ -0,0 +1 @@
+export {};