feat: list "start" index and add optional props (#1326)

* fix: Add <table> wrapping element when copying

* fix: Allow different start index for ordered lists

* fix: Parsing ordered list start index from HTML

* feat: Start attribute for numbered list item

* fix: Use start attribute for HTML serialization

* fix: Numbered lists start index handling

* test: Update snapshots

* add optional props

* small fixes

* add docs

* fix build

* fix

* fix: Remove start attrib when duplicated in consecutive list

* fix: Setting index on list items when starting at 1

* fix: Remove start attrib when lists are merged

* Updated e2e tests

* Updated e2e tests

* Updated typing

---------

Co-authored-by: Arek Nawo <[email protected]>
Co-authored-by: matthewlipski <[email protected]>

Author: 3 people

packages/core/src/api/clipboard/toClipboard/copyExtension.ts

@@ -80,6 +80,7 @@ function fragmentToExternalHTML<
       editor.schema.styleSchema
     );
 
+    // Wrap in table to ensure correct parsing by spreadsheet applications
     externalHTML = `<table>${externalHTMLExporter.exportInlineContent(
       ic as any,
       {}

packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts

@@ -104,7 +104,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;
+      }
     }
   }
 
@@ -172,6 +174,10 @@ function serializeBlock<
   if (listType) {
     if (fragment.lastChild?.nodeName !== listType) {
       const list = doc.createElement(listType);
+
+      if (listType === "OL" && props?.start && props?.start !== 1) {
+        list.setAttribute("start", props.start + "");
+      }
       fragment.append(list);
     }
     const li = doc.createElement("li");

packages/core/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;
+      }
     }
   }
 

packages/core/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;
     }
   }

packages/core/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;
       }
     }

packages/core/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() {

packages/core/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() {

packages/core/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,
+                }),
             });
           }
         }

packages/core/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;

packages/core/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;
 }