SD-2527 - feat: implement new types of ordered lists (#2873)

* feat: implement 2 extra types of bullet lists (square, circle)

* refactor: code reuse

* refactor: simplified code removing font override

* chore: small code tweaks

* feat: extra ordered list types

* chore: small UI tweaks

* chore: removed console log

* test(lists): add unit, behavior, and visual tests for new list styles (SD-2527)

Coverage for the 10 styles this PR introduces (3 bullet + 7 ordered):
- Unit: full mapping matrix for markerTextToBulletStyle and
  numberingInfoToOrderedStyle, plus the BULLET_STYLE_CHARS and
  ORDERED_LIST_STYLES override branches in numbering-transforms.
- Unit: style param threading through toggleList, including the
  same-style-toggle-off and different-style-create cases.
- Unit: headless toolbar deriver values for all 10 styles plus
  documented null cases (upper-alpha-paren, decimalZero, prefixed).
- Unit: registry rename compatibility (legacy toggleBulletList /
  toggleOrderedList no longer flows through bullet-list/numbered-list).
- Behavior: each toggle command produces correct OOXML and locks in
  current partial-selection style-switch fragmentation behavior.
- Visual: fixture spec for sd-2527-list-styles.docx (auto-discovered).

* fix: apply style change to entire list's level

* refactor: simplify logic

* feat: added upper alpha paren list style

* refactor: simplify code

* fix: highlight list buttons in toolbar based on cursor position

* feat: apply inline list style when selection is not empty

* fix: cmd + Z not undoing list style changes

* fix: list style change not applying for nested children inline

* fix: backward compat for toggleOrderedList

* refactor: create generic list styles button

* fix: tests

* fix: lists alignment

* fix: list alignment

* fix: change repeating pattern for upper/lower alpha

* fix: changing list styles affecting alignment

* fix: added missing code

* fix: refresh abstract id and dispatch tr

* test(lists): repro tests for clone-path findings (SD-2527 review)

Two passing tests that document the current behavior of
cloneListDefinitionWithLevelStyle when the source num carries
w:lvlOverride or when the abstract is a w:numStyleLink wrapper.
Comments explain why each assertion is a bug; invert when fixing.

* Revert "test(lists): repro tests for clone-path findings (SD-2527 review)"

This reverts commit d537dcc.

* fix: changing list level overrides styles to null

* test: added tests to ensure nested lists use the correct marker

* test: behavior tests to ensure markers are correct on nested lists

---------

Co-authored-by: Gabriel Chittolina <gabrielchittolina1@gmail.com>
Co-authored-by: Caio Pizzol <caio@superdoc.dev>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 4 people

packages/layout-engine/layout-bridge/src/diff.ts

@@ -397,6 +397,20 @@ const paragraphBlocksEqual = (a: FlowBlock & { kind: 'paragraph' }, b: FlowBlock
   const bEnabled = resolveTrackedChangesEnabled(b.attrs, true);
   if (aEnabled !== bEnabled) return false;
 
+  // Marker text/justification change requires a re-measure even when the
+  // paragraph runs are unchanged (e.g. switching list style from decimal to
+  // alpha changes "10." → "j." — different glyph widths and thus a different
+  // suffix-tab width). `wordLayout` is computed output but its
+  // marker.markerText is the canvas measurement input, so we treat a change
+  // as a dirty signal rather than relying on `paragraphAttrsEqual`'s
+  // wordLayout exclusion.
+  const aMarker = (a.attrs as { wordLayout?: { marker?: { markerText?: string; justification?: string } } } | undefined)
+    ?.wordLayout?.marker;
+  const bMarker = (b.attrs as { wordLayout?: { marker?: { markerText?: string; justification?: string } } } | undefined)
+    ?.wordLayout?.marker;
+  if ((aMarker?.markerText ?? null) !== (bMarker?.markerText ?? null)) return false;
+  if ((aMarker?.justification ?? null) !== (bMarker?.justification ?? null)) return false;
+
   // Check paragraph-level visual attributes (alignment, spacing, indent, borders, etc.)
   if (!paragraphAttrsEqual(a.attrs, b.attrs)) return false;
 

…omponents/toolbar/BulletStyleButtons.vue …/components/toolbar/StyleButtonsList.vuepackages/super-editor/src/editors/v1/components/toolbar/BulletStyleButtons.vue renamed to packages/super-editor/src/editors/v1/components/toolbar/StyleButtonsList.vue packages/super-editor/src/editors/v1/components/toolbar/BulletStyleButtons.vue renamed to packages/super-editor/src/editors/v1/components/toolbar/StyleButtonsList.vue

@@ -1,24 +1,31 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
-import { toolbarIcons } from './toolbarIcons.js';
 
 const { isHighContrastMode } = useHighContrastMode();
 const emit = defineEmits(['select']);
 
 const props = defineProps({
+  buttons: {
+    type: Array,
+    required: true,
+  },
   selectedStyle: {
     type: String,
     default: null,
   },
+  iconSize: {
+    type: Number,
+    default: 25,
+  },
 });
 
 const buttonRefs = ref([]);
-const bulletButtons = [
-  { key: 'disc', icon: toolbarIcons.bulletListDisc, ariaLabel: 'Opaque circle' },
-  { key: 'circle', icon: toolbarIcons.bulletListCircle, ariaLabel: 'Outline circle' },
-  { key: 'square', icon: toolbarIcons.bulletListSquare, ariaLabel: 'Opaque square' },
-];
+
+const iconStyle = computed(() => ({
+  width: `${props.iconSize}px`,
+  height: `${props.iconSize}px`,
+}));
 
 const select = (key) => {
   emit('select', key);
@@ -51,7 +58,7 @@ const handleKeyDown = (e, index) => {
       moveToNextButton(index);
       break;
     case 'Enter':
-      select(bulletButtons[index].key);
+      select(props.buttons[index].key);
       break;
     default:
       break;
@@ -68,12 +75,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="bullet-style-buttons" :class="{ 'high-contrast': isHighContrastMode }">
+  <div class="style-buttons-list" :class="{ 'high-contrast': isHighContrastMode }">
     <div
-      v-for="(button, index) in bulletButtons"
+      v-for="(button, index) in props.buttons"
       :key="button.key"
       class="button-icon"
       :class="{ selected: props.selectedStyle === button.key }"
+      :style="iconStyle"
       @click="select(button.key)"
       v-html="button.icon"
       role="menuitem"
@@ -85,7 +93,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.bullet-style-buttons {
+.style-buttons-list {
   display: flex;
   justify-content: space-between;
   width: 100%;
@@ -97,8 +105,6 @@ onMounted(() => {
     padding: 5px;
     font-size: var(--sd-ui-font-size-600, 16px);
     color: var(--sd-ui-dropdown-text, #47484a);
-    width: 25px;
-    height: 25px;
     border-radius: var(--sd-ui-dropdown-option-radius, 3px);
     display: flex;
     justify-content: center;

packages/super-editor/src/editors/v1/components/toolbar/ToolbarButton.vue

@@ -46,6 +46,7 @@ const {
   hasCaret,
   splitButton,
   disabled,
+  expand,
   inlineTextInputVisible,
   hasInlineTextInput,
   minWidth,
@@ -108,7 +109,7 @@ const onFontSizeInput = (event) => {
 };
 
 const caretIcon = computed(() => {
-  return active.value ? toolbarIcons.dropdownCaretUp : toolbarIcons.dropdownCaretDown;
+  return expand?.value ? toolbarIcons.dropdownCaretUp : toolbarIcons.dropdownCaretDown;
 });
 </script>
 

packages/super-editor/src/editors/v1/components/toolbar/defaultItems.js

@@ -5,7 +5,8 @@ import { normalizeFontOption } from './helpers/font-options.js';
 import { useToolbarItem } from './use-toolbar-item';
 import AIWriter from './AIWriter.vue';
 import AlignmentButtons from './AlignmentButtons.vue';
-import BulletStyleButtons from './BulletStyleButtons.vue';
+import StyleButtonsList from './StyleButtonsList.vue';
+import { bulletStyleButtons, numberedStyleButtons } from './list-style-buttons.js';
 import DocumentMode from './DocumentMode.vue';
 import LinkedStyle from './LinkedStyle.vue';
 import LinkInput from './LinkInput.vue';
@@ -641,7 +642,6 @@ export const makeDefaultItems = ({
     hasCaret: true,
     tooltip: toolbarTexts.bulletList,
     restoreEditorFocus: true,
-    suppressActiveHighlight: true,
     attributes: {
       ariaLabel: 'Bullet list',
     },
@@ -655,7 +655,9 @@ export const makeDefaultItems = ({
             const item = { ...bulletedList, command: 'toggleBulletListStyle' };
             superToolbar.emitCommand({ item, argument: style });
           };
-          return h(BulletStyleButtons, {
+          return h(StyleButtonsList, {
+            buttons: bulletStyleButtons,
+            iconSize: 25,
             selectedStyle: bulletedList.selectedValue.value,
             onSelect: handleSelect,
           });
@@ -666,16 +668,37 @@ export const makeDefaultItems = ({
 
   // number list
   const numberedList = useToolbarItem({
-    type: 'button',
+    type: 'dropdown',
     name: 'numberedlist',
-    command: 'toggleOrderedList',
+    command: 'toggleOrderedListStyle',
+    splitButton: true,
+    splitButtonCommand: 'toggleOrderedList',
     icon: toolbarIcons.numberedList,
-    active: false,
+    hasCaret: true,
     tooltip: toolbarTexts.numberedList,
     restoreEditorFocus: true,
     attributes: {
       ariaLabel: 'Numbered list',
     },
+    options: [
+      {
+        type: 'render',
+        key: 'numbered-style-buttons',
+        render: () => {
+          const handleSelect = (style) => {
+            closeDropdown(numberedList);
+            const item = { ...numberedList, command: 'toggleOrderedListStyle' };
+            superToolbar.emitCommand({ item, argument: style });
+          };
+          return h(StyleButtonsList, {
+            buttons: numberedStyleButtons,
+            iconSize: 30,
+            selectedStyle: numberedList.selectedValue.value,
+            onSelect: handleSelect,
+          });
+        },
+      },
+    ],
   });
 
   // indent left

packages/super-editor/src/editors/v1/components/toolbar/list-style-buttons.js

@@ -0,0 +1,18 @@
+import { toolbarIcons } from './toolbarIcons.js';
+
+export const bulletStyleButtons = [
+  { key: 'disc', icon: toolbarIcons.bulletListDisc, ariaLabel: 'Opaque circle' },
+  { key: 'circle', icon: toolbarIcons.bulletListCircle, ariaLabel: 'Outline circle' },
+  { key: 'square', icon: toolbarIcons.bulletListSquare, ariaLabel: 'Opaque square' },
+];
+
+export const numberedStyleButtons = [
+  { key: 'decimal', icon: toolbarIcons.numberedListDecimal, ariaLabel: '1. 2. 3.' },
+  { key: 'decimal-paren', icon: toolbarIcons.numberedListDecimalParen, ariaLabel: '1) 2) 3)' },
+  { key: 'upper-roman', icon: toolbarIcons.numberedListUpperRoman, ariaLabel: 'I. II. III.' },
+  { key: 'lower-roman', icon: toolbarIcons.numberedListLowerRoman, ariaLabel: 'i. ii. iii.' },
+  { key: 'upper-alpha', icon: toolbarIcons.numberedListUpperAlpha, ariaLabel: 'A. B. C.' },
+  { key: 'upper-alpha-paren', icon: toolbarIcons.numberedListUpperAlphaParen, ariaLabel: 'A) B) C)' },
+  { key: 'lower-alpha', icon: toolbarIcons.numberedListLowerAlpha, ariaLabel: 'a. b. c.' },
+  { key: 'lower-alpha-paren', icon: toolbarIcons.numberedListLowerAlphaParen, ariaLabel: 'a) b) c)' },
+];

packages/super-editor/src/editors/v1/components/toolbar/super-toolbar.js

@@ -641,6 +641,15 @@ export class SuperToolbar extends EventEmitter {
           item.selectedValue.value = null;
         }
       },
+      numberedlist: () => {
+        if (commandState?.active) {
+          item.activate();
+          item.selectedValue.value = commandState.value;
+        } else {
+          item.deactivate();
+          item.selectedValue.value = null;
+        }
+      },
       default: () => {
         if (commandState?.active) item.activate();
         else item.deactivate();

packages/super-editor/src/editors/v1/components/toolbar/toolbarIcons.js

@@ -5,6 +5,14 @@ import listIconSvg from '@superdoc/common/icons/list-solid.svg?raw';
 import listCircleIconSvg from '@superdoc/common/icons/list-circle-solid.svg?raw';
 import listSquareIconSvg from '@superdoc/common/icons/list-square-solid.svg?raw';
 import listOlIconSvg from '@superdoc/common/icons/list-ol-solid.svg?raw';
+import listDecimalIconSvg from '@superdoc/common/icons/list-decimal-solid.svg?raw';
+import listDecimalParenIconSvg from '@superdoc/common/icons/list-decimal-paren-solid.svg?raw';
+import listUpperRomanIconSvg from '@superdoc/common/icons/list-upper-roman-solid.svg?raw';
+import listLowerRomanIconSvg from '@superdoc/common/icons/list-lower-roman-solid.svg?raw';
+import listUpperAlphaIconSvg from '@superdoc/common/icons/list-upper-alpha-solid.svg?raw';
+import listUpperAlphaParenIconSvg from '@superdoc/common/icons/list-upper-alpha-paren-solid.svg?raw';
+import listLowerAlphaIconSvg from '@superdoc/common/icons/list-lower-alpha-solid.svg?raw';
+import listLowerAlphaParenIconSvg from '@superdoc/common/icons/list-lower-alpha-paren-solid.svg?raw';
 import imageIconSvg from '@superdoc/common/icons/image-solid.svg?raw';
 import linkIconSvg from '@superdoc/common/icons/link-solid.svg?raw';
 import alignLeftIconSvg from '@superdoc/common/icons/align-left-solid.svg?raw';
@@ -71,6 +79,14 @@ export const toolbarIcons = {
   bulletListCircle: listCircleIconSvg,
   bulletListSquare: listSquareIconSvg,
   numberedList: listOlIconSvg,
+  numberedListDecimal: listDecimalIconSvg,
+  numberedListDecimalParen: listDecimalParenIconSvg,
+  numberedListUpperRoman: listUpperRomanIconSvg,
+  numberedListLowerRoman: listLowerRomanIconSvg,
+  numberedListUpperAlpha: listUpperAlphaIconSvg,
+  numberedListUpperAlphaParen: listUpperAlphaParenIconSvg,
+  numberedListLowerAlpha: listLowerAlphaIconSvg,
+  numberedListLowerAlphaParen: listLowerAlphaParenIconSvg,
   indentLeft: outdentIconSvg,
   indentRight: indentIconSvg,
   pageBreak: fileHalfDashedIconSvg,

packages/super-editor/src/editors/v1/core/Editor.ts

@@ -2703,6 +2703,7 @@ export class Editor extends EventEmitter<EditorEventMap> {
     const prevState = this.state;
     let nextState: EditorState;
     let transactionToApply = transaction;
+    let effectiveTransaction: Transaction = transaction;
     const forceTrackChanges = transactionToApply.getMeta('forceTrackChanges') === true;
     try {
       const trackChangesState = TrackChangesBasePluginKey.getState(prevState);
@@ -2723,8 +2724,12 @@ export class Editor extends EventEmitter<EditorEventMap> {
           })
         : transactionToApply;
 
-      const { state: appliedState } = prevState.applyTransaction(transactionToApply);
+      const { state: appliedState, transactions: appliedTransactions } = prevState.applyTransaction(transactionToApply);
       nextState = appliedState;
+      // Pick whichever applied tr carries the doc delta — when the input tr is empty an
+      // appendTransaction plugin (e.g. numberingPlugin) may have produced the real change,
+      // and downstream listeners read `transaction.docChanged`/`mapping` off this tr.
+      effectiveTransaction = appliedTransactions.find((t) => t.docChanged) ?? transactionToApply;
     } catch (error) {
       if (forceTrackChanges) throw error;
       // just in case
@@ -2772,7 +2777,7 @@ export class Editor extends EventEmitter<EditorEventMap> {
       });
     }
 
-    if (transactionToApply.docChanged) {
+    if (effectiveTransaction.docChanged) {
       // Track document modifications and promote to GUID if needed
       if (transaction.docChanged && this.converter) {
         if (!this.converter.documentGuid) {
@@ -2784,7 +2789,7 @@ export class Editor extends EventEmitter<EditorEventMap> {
 
       this.emit('update', {
         editor: this,
-        transaction: transactionToApply,
+        transaction: effectiveTransaction,
       });
     }
   }

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

@@ -117,8 +117,10 @@ export function updateNumberingProperties(newNumberingProperties, paragraphNode,
     numberingProperties: newNumberingProperties ? { ...newNumberingProperties } : null,
   };
 
-  if (paragraphNode.attrs.paragraphProperties?.styleId === 'ListParagraph') {
-    // Word's default list paragraph style
+  // Only strip the default ListParagraph styleId when removing list formatting.
+  // Keeping it on style swaps preserves the style's contextualSpacing, which Word
+  // relies on to collapse the inter-paragraph gap between consecutive list items.
+  if (!newNumberingProperties && paragraphNode.attrs.paragraphProperties?.styleId === 'ListParagraph') {
     newProperties.styleId = null;
   }
 

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

@@ -20,7 +20,7 @@ vi.mock('@extensions/paragraph/resolvedPropertiesCache.js', () => ({
   calculateResolvedParagraphProperties: vi.fn((_, node, __) => node.attrs.paragraphProperties || {}),
 }));
 
-import { changeListLevel } from './changeListLevel.js';
+import { changeListLevel, updateNumberingProperties } from './changeListLevel.js';
 import { findParentNode } from '@helpers/index.js';
 import { ListHelpers } from '@helpers/list-numbering-helpers.js';
 
@@ -267,3 +267,58 @@ describe('changeListLevel', () => {
     expect(tr.setNodeMarkup.mock.calls.map(([pos]) => pos)).toEqual([0, 30, 60]);
   });
 });
+
+describe('updateNumberingProperties', () => {
+  /** @type {{ setNodeMarkup: ReturnType<typeof vi.fn> }} */
+  let tr;
+
+  beforeEach(() => {
+    tr = { setNodeMarkup: vi.fn() };
+  });
+
+  // Word's `ListParagraph` style carries `<w:contextualSpacing/>`, which collapses
+  // the inter-paragraph gap between consecutive list items. If we drop the styleId
+  // on a style swap, that suppression stops applying and a vertical gap appears
+  // between item 1 and item 2 — which is exactly what SD-2527 was reporting.
+  it('preserves the ListParagraph styleId when migrating to a new numId', () => {
+    const node = {
+      type: { name: 'paragraph' },
+      attrs: {
+        paragraphProperties: {
+          styleId: 'ListParagraph',
+          numberingProperties: { numId: 1, ilvl: 0 },
+        },
+        numberingProperties: { numId: 1, ilvl: 0 },
+        listRendering: {},
+      },
+    };
+
+    updateNumberingProperties({ numId: 2, ilvl: 0 }, node, 12, /* editor */ {}, tr);
+
+    expect(tr.setNodeMarkup).toHaveBeenCalledTimes(1);
+    const [, , newAttrs] = tr.setNodeMarkup.mock.calls[0];
+    expect(newAttrs.paragraphProperties.styleId).toBe('ListParagraph');
+    expect(newAttrs.paragraphProperties.numberingProperties).toEqual({ numId: 2, ilvl: 0 });
+  });
+
+  it('strips the ListParagraph styleId when removing list formatting', () => {
+    const node = {
+      type: { name: 'paragraph' },
+      attrs: {
+        paragraphProperties: {
+          styleId: 'ListParagraph',
+          numberingProperties: { numId: 1, ilvl: 0 },
+        },
+        numberingProperties: { numId: 1, ilvl: 0 },
+        listRendering: {},
+      },
+    };
+
+    updateNumberingProperties(null, node, 12, /* editor */ {}, tr);
+
+    const [, , newAttrs] = tr.setNodeMarkup.mock.calls[0];
+    expect(newAttrs.paragraphProperties.styleId).toBeNull();
+    expect(newAttrs.paragraphProperties.numberingProperties).toBeNull();
+    expect(newAttrs.listRendering).toBeNull();
+  });
+});