fix: list style change not applying for nested children inline

Author: chittolina

packages/super-editor/src/editors/v1/core/commands/toggleList.js

@@ -230,21 +230,21 @@ export const toggleList =
     if (!dispatch) return true;
 
     if (mode === 'create') {
-      // If we're swapping the bullet style on an already-nested item, mint the
+      // If we're swapping the bullet/ordered style on an already-nested item, mint the
       // new list with the override applied at that paragraph's existing level —
       // otherwise the override only lands on level 0 and the nested paragraph
       // ends up rendering whatever marker the base template assigned to its
       // level. We pick the level from the first list paragraph in the
       // selection so style swaps stay coherent with the existing nesting.
-      let bulletStyleLevel = 0;
-      if (bulletStyle) {
+      let styleOverrideLevel = 0;
+      if (bulletStyle || orderedStyle) {
         const firstExistingListPara = paragraphsInSelection.find(
           ({ node }) => getResolvedParagraphProperties(node)?.numberingProperties?.ilvl != null,
         );
         const existingIlvl = firstExistingListPara
           ? getResolvedParagraphProperties(firstExistingListPara.node)?.numberingProperties?.ilvl
           : null;
-        if (existingIlvl != null) bulletStyleLevel = existingIlvl;
+        if (existingIlvl != null) styleOverrideLevel = existingIlvl;
       }
 
       const numId = ListHelpers.getNewListId(editor);
@@ -253,8 +253,9 @@ export const toggleList =
         listType,
         editor,
         bulletStyle,
-        bulletStyleLevel,
+        bulletStyleLevel: styleOverrideLevel,
         orderedStyle,
+        orderedStyleLevel: styleOverrideLevel,
       });
       sharedNumberingProperties = {
         numId: Number(numId),

packages/super-editor/src/editors/v1/core/commands/toggleList.test.js

@@ -214,6 +214,7 @@ describe('toggleList', () => {
       editor,
       bulletStyle: undefined,
       bulletStyleLevel: 0,
+      orderedStyleLevel: 0,
     });
     const expectedNumbering = { numId: 42, ilvl: 0 };
     for (const [index, { node, pos }] of paragraphs.entries()) {
@@ -247,6 +248,7 @@ describe('toggleList', () => {
       editor,
       bulletStyle: undefined,
       bulletStyleLevel: 0,
+      orderedStyleLevel: 0,
     });
     expect(dispatch).toHaveBeenCalledWith(tr);
   });
@@ -404,6 +406,7 @@ describe('toggleList', () => {
           bulletStyle,
           bulletStyleLevel: 0,
           orderedStyle: undefined,
+          orderedStyleLevel: 0,
         });
       },
     );
@@ -433,6 +436,7 @@ describe('toggleList', () => {
         bulletStyle: null,
         bulletStyleLevel: 0,
         orderedStyle,
+        orderedStyleLevel: 0,
       });
     });
 

packages/super-editor/src/editors/v1/core/helpers/list-numbering-helpers.js

@@ -75,6 +75,7 @@ export function numberingInfoToOrderedStyle(numFmt, markerText) {
  * @param {'disc'|'circle'|'square'|null} [param0.bulletStyle]
  * @param {number} [param0.bulletStyleLevel]
  * @param {import('../../extensions/types/paragraph-commands.js').OrderedListStyle|null} [param0.orderedStyle]
+ * @param {number} [param0.orderedStyleLevel]
  * @param {import('../Editor').Editor} param0.editor
  * @returns {Object} The new abstract and num definitions.
  */
@@ -90,6 +91,7 @@ export const generateNewListDefinition = ({
   bulletStyle,
   bulletStyleLevel,
   orderedStyle,
+  orderedStyleLevel,
 }) => {
   /** @type {{ abstractDef: any, numDef: any }} */
   let resultDefs;
@@ -106,6 +108,7 @@ export const generateNewListDefinition = ({
       bulletStyle,
       bulletStyleLevel,
       orderedStyle,
+      orderedStyleLevel,
     });
     resultDefs = { abstractDef: result.abstractDef, numDef: result.numDef };
   });

packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.style-overrides.test.ts

@@ -118,6 +118,44 @@ describe('generateNewListDefinition - ordered style override', () => {
     expect(findChild(lvl0, 'w:lvlText').attributes['w:val']).toBe('•');
   });
 
+  it('applies orderedStyle to a sublevel (ilvl=1 → "%2.") when orderedStyleLevel is set', () => {
+    // Regression: when the user picks a list style with a non-empty selection on a
+    // nested item, `toggleList` falls through to mode='create' and mints a new abstract
+    // via this path. The override needs to land on the paragraph's actual level so the
+    // marker actually changes — without this the new abstract only mutates level 0 and
+    // the nested item keeps rendering the template's default sublevel marker.
+    const numbering = freshModel();
+    const result = generateNewListDefinition(numbering, {
+      numId: 1,
+      listType: 'orderedList',
+      orderedStyle: 'upper-roman',
+      orderedStyleLevel: 1,
+    });
+
+    const lvl0 = findLvl0(result.abstractDef);
+    // Level 0 is left at the template's default ("decimal" / "%1.")
+    expect(findChild(lvl0, 'w:numFmt').attributes['w:val']).toBe('decimal');
+    expect(findChild(lvl0, 'w:lvlText').attributes['w:val']).toBe('%1.');
+
+    const lvl1 = result.abstractDef.elements.find((el: any) => el.name === 'w:lvl' && el.attributes['w:ilvl'] === '1');
+    expect(findChild(lvl1, 'w:numFmt').attributes['w:val']).toBe('upperRoman');
+    expect(findChild(lvl1, 'w:lvlText').attributes['w:val']).toBe('%2.');
+  });
+
+  it('preserves the suffix character at sublevels (ilvl=2 → "%3)")', () => {
+    const numbering = freshModel();
+    const result = generateNewListDefinition(numbering, {
+      numId: 1,
+      listType: 'orderedList',
+      orderedStyle: 'lower-alpha-paren',
+      orderedStyleLevel: 2,
+    });
+
+    const lvl2 = result.abstractDef.elements.find((el: any) => el.name === 'w:lvl' && el.attributes['w:ilvl'] === '2');
+    expect(findChild(lvl2, 'w:numFmt').attributes['w:val']).toBe('lowerLetter');
+    expect(findChild(lvl2, 'w:lvlText').attributes['w:val']).toBe('%3)');
+  });
+
   it('does NOT touch the abstract when orderedStyle is unknown', () => {
     const numbering = freshModel();
     const result = generateNewListDefinition(numbering, {

packages/super-editor/src/editors/v1/core/parts/adapters/numbering-transforms.ts

@@ -39,6 +39,13 @@ interface GenerateOptions {
    */
   bulletStyleLevel?: number | null;
   orderedStyle?: OrderedListStyle | null;
+  /**
+   * Level (`w:ilvl`) at which to apply `orderedStyle`. Defaults to 0 (top-level).
+   * Used when the user changes the ordered style for a nested list item — the
+   * override needs to land on the paragraph's actual level, and the lvlText
+   * counter index (`%N`) needs to match that level.
+   */
+  orderedStyleLevel?: number | null;
 }
 
 const BULLET_STYLE_CHARS: Record<string, string> = {
@@ -129,7 +136,18 @@ function refreshAbstractIdentity(abstractDef: any): void {
  */
 export function generateNewListDefinition(numbering: NumberingModel, options: GenerateOptions): GenerateResult {
   let { listType } = options;
-  const { numId, level, start, text, fmt, markerFontFamily, bulletStyle, bulletStyleLevel, orderedStyle } = options;
+  const {
+    numId,
+    level,
+    start,
+    text,
+    fmt,
+    markerFontFamily,
+    bulletStyle,
+    bulletStyleLevel,
+    orderedStyle,
+    orderedStyleLevel,
+  } = options;
   if (typeof listType !== 'string') listType = (listType as any).name;
 
   const definition = listType === 'orderedList' ? baseOrderedListDef : baseBulletList;
@@ -176,20 +194,32 @@ export function generateNewListDefinition(numbering: NumberingModel, options: Ge
     }
   }
 
-  // Override the ordered list style for the new list if an ordered style is provided
+  // Override the ordered list style for the new list if an ordered style is provided.
+  // The override lands at `orderedStyleLevel` (default level 0). Targeting a specific
+  // level keeps nested-item style swaps coherent with the paragraph's existing nesting
+  // depth — without this, applying e.g. upper-roman to a level-1 item would only modify
+  // level 0 of the new abstract and the rendered marker would not change.
   const shouldOverrideOrderedStyle = orderedStyle && listType === 'orderedList';
   if (shouldOverrideOrderedStyle) {
     const styleConfig = ORDERED_LIST_STYLES[orderedStyle];
 
     if (styleConfig) {
-      const lvl0 = newAbstractDef.elements.find((el: any) => el.name === 'w:lvl' && el.attributes['w:ilvl'] === '0');
+      const targetLevel = Math.max(0, Number.isFinite(orderedStyleLevel as number) ? (orderedStyleLevel as number) : 0);
+      const targetLevelStr = String(targetLevel);
+      const lvl = newAbstractDef.elements.find(
+        (el: any) => el.name === 'w:lvl' && el.attributes['w:ilvl'] === targetLevelStr,
+      );
 
-      if (lvl0) {
-        const numFmt = lvl0.elements.find((el: any) => el.name === 'w:numFmt');
+      if (lvl) {
+        const numFmt = lvl.elements.find((el: any) => el.name === 'w:numFmt');
         if (numFmt) numFmt.attributes['w:val'] = styleConfig.fmt;
 
-        const lvlText = lvl0.elements.find((el: any) => el.name === 'w:lvlText');
-        if (lvlText) lvlText.attributes['w:val'] = styleConfig.text;
+        const lvlText = lvl.elements.find((el: any) => el.name === 'w:lvlText');
+        if (lvlText) {
+          // OOXML `%N` references counter level N-1, so at ilvl=N the lvlText needs `%(N+1)`.
+          // Preserve the style's suffix (e.g. ".", ")") so paren styles stay paren.
+          lvlText.attributes['w:val'] = `%${targetLevel + 1}${styleConfig.text.replace(/^%\d+/, '')}`;
+        }
       }
     }
   }