How to pass custom value to the orderedList?

[pcjaarvis]

I am trying to pass a custom value to the orderList start value by extending,

import { OrderedList } from "@tiptap/extension-ordered-list";

const OrderedListExtended = OrderedList.extend({
  addAttributes() {
    return {
      ...this.parent?.(),
      start: {
        default: 1, // Default starting number
        parseHTML: (element) =>
          element.hasAttribute("start")
            ? parseInt(element.getAttribute("start"), 10)
            : 1,
        renderHTML: (attributes) => {
          if (attributes.start === 1) {
            return {};
          }
          return { start: attributes.start };
        },
      },
    };
  },
  addCommands() {
    return {
      toggleOrderList:
        (attrs = {}) =>
        ({ commands, editor }) => {
          const { start } = attrs;

          if (!editor.can().toggleList("orderedList", "listItem")) {
            return false;
          }

          // Use the start value or default to 1
          return commands.toggleList("orderedList", "listItem", {
            start: start || 1,
          });
        },
    };
  },
});

export default OrderedListExtended;

How i want to use it,

editor.commands.toggleOrderList({ start: 5 });

I can get the value inside the custom command, but cannot update the html, any help appreciated.

[guanriyue]

It doesn't behave as expected, and there is an issue with your code.

commands.toggleList takes keepMarks as the third parameter, and attributes as the fourth. Change it to the following:

// Use the start value or default to 1
return commands.toggleList("orderedList", "listItem", this.options.keepMarks, {
  start: start || 1,
});