refactor: remove data-index on numbered list item serialization

Author: nperez0111

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

@@ -193,7 +193,6 @@ function serializeBlock<
         attr.name !== "data-node-view-wrapper" &&
         attr.name !== "data-node-type" &&
         attr.name !== "data-id" &&
-        attr.name !== "data-index" &&
         attr.name !== "data-editable",
     );
 

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

@@ -104,7 +104,6 @@ function serializeBlock<
   editor: BlockNoteEditor<BSchema, I, S>,
   block: PartialBlock<BSchema, I, S>,
   serializer: DOMSerializer,
-  listIndex: number,
   options?: { document?: Document },
 ) {
   const BC_NODE = editor.pmSchema.nodes["blockContainer"];
@@ -125,18 +124,6 @@ function serializeBlock<
   const impl = editor.blockImplementations[block.type as any].implementation;
   const ret = impl.render?.call({}, { ...block, props } as any, editor as any);
 
-  if (block.type === "numberedListItem") {
-    // This is a workaround to make sure there's a list index set.
-    // Normally, this is set on the internal prosemirror nodes by the NumberedListIndexingPlugin,
-    // but:
-    // - (a) this information is not available on the Blocks passed to the serializer. (we only have access to BlockNote Blocks)
-    // - (b) the NumberedListIndexingPlugin might not even have run, because we can manually call blocksToFullHTML
-    //       with blocks that are not part of the active document
-    if (ret.dom instanceof HTMLElement) {
-      ret.dom.setAttribute("data-index", listIndex.toString());
-    }
-  }
-
   if (ret.contentDOM && block.content) {
     const ic = serializeInlineContentInternalHTML(
       editor,
@@ -198,20 +185,8 @@ function serializeBlocks<
   const doc = options?.document ?? document;
   const fragment = doc.createDocumentFragment();
 
-  let listIndex = 0;
   for (const block of blocks) {
-    if (block.type === "numberedListItem") {
-      listIndex++;
-    } else {
-      listIndex = 0;
-    }
-    const blockDOM = serializeBlock(
-      editor,
-      block,
-      serializer,
-      listIndex,
-      options,
-    );
+    const blockDOM = serializeBlock(editor, block, serializer, options);
     fragment.appendChild(blockDOM);
   }
 

packages/core/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts

@@ -134,28 +134,6 @@ export class PreviousBlockTypePlugin extends BlockNoteExtension {
                 currentTransactionOriginalOldBlockAttrs[node.node.attrs.id] =
                   oldAttrs;
 
-                // Whenever a transaction is appended by the OrderedListItemIndexPlugin, it's given the metadata:
-                // { "orderedListIndexing": true }
-                // These appended transactions happen immediately after any transaction which causes ordered list item
-                // indices to require updating, including those which trigger animations. Therefore, these animations are
-                // immediately overridden when the PreviousBlockTypePlugin processes the appended transaction, despite only
-                // the listItemIndex attribute changing. To solve this, oldAttrs must be edited for transactions with the
-                // "orderedListIndexing" metadata, so the correct animation can be re-triggered.
-                if (transaction.getMeta("numberedListIndexing")) {
-                  // If the block existed before the transaction, gets the attributes from before the previous transaction
-                  // (i.e. the transaction that caused list item indices to need updating).
-                  if (node.node.attrs.id in prev.prevTransactionOldBlockAttrs) {
-                    oldAttrs =
-                      prev.prevTransactionOldBlockAttrs[node.node.attrs.id];
-                  }
-
-                  // Stops list item indices themselves being animated (looks smoother), unless the block's content type is
-                  // changing from a numbered list item to something else.
-                  if (newAttrs.type === "numberedListItem") {
-                    oldAttrs.index = newAttrs.index;
-                  }
-                }
-
                 prev.currentTransactionOldBlockAttrs[node.node.attrs.id] =
                   oldAttrs;
 

packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts

@@ -204,11 +204,6 @@ export class SuggestionMenuProseMirrorPlugin<
             _oldState,
             newState,
           ): SuggestionPluginState => {
-            // TODO: More clearly define which transactions should be ignored.
-            if (transaction.getMeta("orderedListIndexing") !== undefined) {
-              return prev;
-            }
-
             // Ignore transactions in code blocks.
             if (transaction.selection.$from.parent.type.spec.code) {
               return prev;

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/lists/basic.html

@@ -15,22 +15,14 @@
   </div>
   <div class="bn-block-outer" data-node-type="blockOuter" data-id="3">
     <div class="bn-block" data-node-type="blockContainer" data-id="3">
-      <div
-        class="bn-block-content"
-        data-content-type="numberedListItem"
-        data-index="1"
-      >
+      <div class="bn-block-content" data-content-type="numberedListItem">
         <p class="bn-inline-content">Numbered List Item 1</p>
       </div>
     </div>
   </div>
   <div class="bn-block-outer" data-node-type="blockOuter" data-id="4">
     <div class="bn-block" data-node-type="blockContainer" data-id="4">
-      <div
-        class="bn-block-content"
-        data-content-type="numberedListItem"
-        data-index="2"
-      >
+      <div class="bn-block-content" data-content-type="numberedListItem">
         <p class="bn-inline-content">Numbered List Item 2</p>
       </div>
     </div>

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/lists/nested.html

@@ -14,22 +14,14 @@
       <div class="bn-block-group" data-node-type="blockGroup">
         <div class="bn-block-outer" data-node-type="blockOuter" data-id="3">
           <div class="bn-block" data-node-type="blockContainer" data-id="3">
-            <div
-              class="bn-block-content"
-              data-content-type="numberedListItem"
-              data-index="1"
-            >
+            <div class="bn-block-content" data-content-type="numberedListItem">
               <p class="bn-inline-content">Numbered List Item 1</p>
             </div>
           </div>
         </div>
         <div class="bn-block-outer" data-node-type="blockOuter" data-id="4">
           <div class="bn-block" data-node-type="blockContainer" data-id="4">
-            <div
-              class="bn-block-content"
-              data-content-type="numberedListItem"
-              data-index="2"
-            >
+            <div class="bn-block-content" data-content-type="numberedListItem">
               <p class="bn-inline-content">Numbered List Item 2</p>
             </div>
             <div class="bn-block-group" data-node-type="blockGroup">