editor.updateAttributes() in nested ordered-list is also updating attributes of outer list.

[ashu12chi]

What’s the bug you are facing?

Hi,

I want to improve the ordered-list plugin to support different style-type for nested lists. I am doing this by adding type attribute on the ordered-list. I am doing it like this:

addAttributes() {
    return {
     ...this.parent?.(),
      type: {
        default: '1',
        parseHTML: element => {
          return element.hasAttribute('type')
            ? element.getAttribute('type')
            : '1'
        },
      },
    }
  },

The issue I am facing is when we call the sinkListItem command to nest the ordered list, I need to update the type separately. I am doing this by calling the updateAttributes() comand like this:

const possibleTypes = ['1', 'A', 'a', 'I', 'i'];
const currentType = editor.getAttributes('orderedList').type;
const nextType = possibleTypes[(possibleTypes.findIndex(x => x === currentType) + 1)%5];
editor.chain().sinkListItem().updateAttributes('orderedList', {type: nextType}).run()

When we nest a list using sinkListItem, the editor schema will add <ol><li><p></p></li></ol>, which is a new ordered list and thus attribute of only this list should be updated but currently attribute of parent list is also getting updated due to which the outcome looks like:

A. Hello
        A. 

But I am expecting it to be:

1. Hello
        A. 

I tried this same thing with the start attribute which is already defined in the ordered-list plugin, there also attributes of all parent lists are getting updated which should not happen ideally. This is shown in the following GIF, where I am setting start of child list equal to 5 times of parent list but start of parent list is also getting updated.

The alternative I considered here is to add type attribute on list-item which is not standard and thus I am not doing it. Another alternative is to use CSS to add list-style-type, using something like this:

/* -- Nested List  -- */

/* Set the first layer of list items to regular numeric decimals */
 ol {
    list-style-type: decimal;
}

/* Set the second layer of list items to lowercase alphabetic */
 ol > li > ol {
    list-style-type: lower-alpha;
}

/* Set the third layer of list items to lowercase Roman numerals */
 ol > li > ol > li > ol {
    list-style-type: lower-roman;
}

The issue with styling via CSS is type will not be exported as part of exported HTML, which is required for my use case. Additionally, when I copy content from an external source like MS Outlook, I want to parse the type attribute to have the exact same styling.

Which browser was this experienced in? Are any special extensions installed?

In all browsers.

How can we reproduce the bug on our side?

Use this: https://codesandbox.io/s/solitary-voice-ubwslx?file=/src/App.js and follow the same steps as in attached GIF.

Can you provide a CodeSandbox?

https://codesandbox.io/s/solitary-voice-ubwslx?file=/src/App.js

What did you expect to happen?

Only attributes of the nested list should be updated.

Anything to add? (optional)

I am open to any alternate way to implement the same change. So, any suggestion or workaround is welcome.

Did you update your dependencies?

• [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• [X] Yes, I’m a sponsor. 💖

[gethari]

By any chance did you get a solution to this or any alternative?

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[ashu12chi]

Commenting as the issue is still pending.

[MetalArend]

We have this issue on other nodes as well, like using updateAttributes inside a table inside another table. Is there maybe any way to updateAttributes directly against a specific node, or a specific selection?

[steven-qi]

hmm, I just reported the same issue https://github.com/ueberdosis/tiptap/issues/4466

[steven-qi]

By any chance did you get a solution to this or any alternative? Is there maybe any way to updateAttributes directly against a specific node, or a specific selection?

@gethari @MetalArend I have put a workaround in this newly opened issue https://github.com/ueberdosis/tiptap/issues/4466