SD-2524 - feat: implement context menu for lists

packages/layout-engine/dom-contract/src/class-names.ts

@@ -48,6 +48,9 @@ export const DOM_CLASS_NAMES = {
   /** Inline image element (ImageRun inside a paragraph). */
   INLINE_IMAGE: 'superdoc-inline-image',
 
+  /** Wrapper around a paragraph's list marker (bullet glyph or ordered number). */
+  LIST_MARKER: 'superdoc-list-marker',
+
   /** Clip wrapper around a cropped inline image. */
   INLINE_IMAGE_CLIP_WRAPPER: 'superdoc-inline-image-clip-wrapper',
 

packages/layout-engine/dom-contract/src/index.test.ts

@@ -28,6 +28,7 @@ describe('@superdoc/dom-contract', () => {
       SDT_GROUP_HOVER: 'sdt-group-hover',
       IMAGE_FRAGMENT: 'superdoc-image-fragment',
       INLINE_IMAGE: 'superdoc-inline-image',
+      LIST_MARKER: 'superdoc-list-marker',
       INLINE_IMAGE_CLIP_WRAPPER: 'superdoc-inline-image-clip-wrapper',
       ANNOTATION: 'annotation',
       ANNOTATION_CONTENT: 'annotation-content',

packages/layout-engine/painters/dom/src/renderer.ts

@@ -109,6 +109,7 @@ import { applyImageClipPath } from './utils/image-clip-path.js';
 import { isMinimalWordLayout as isMinimalWordLayoutShared } from '@superdoc/common/list-marker-utils';
 import {
   computeTabWidth,
+  createListMarkerElement,
   resolvePainterListMarkerGeometry,
   resolvePainterListTextStartPx,
 } from './utils/marker-helpers.js';
@@ -3144,14 +3145,7 @@ export class DomPainter {
             lineEl.style.paddingLeft = `${resolvedMarker.firstLinePaddingLeftPx}px`;
 
             if (!resolvedMarker.vanish) {
-              const markerContainer = this.doc!.createElement('span');
-              markerContainer.style.display = 'inline-block';
-              markerContainer.style.wordSpacing = '0px';
-
-              const markerEl = this.doc!.createElement('span');
-              markerEl.classList.add('superdoc-paragraph-marker');
-              markerEl.textContent = resolvedMarker.text;
-              markerEl.style.pointerEvents = 'none';
+              const markerContainer = createListMarkerElement(this.doc!, resolvedMarker.text, resolvedMarker.run);
 
               markerContainer.style.position = 'relative';
               if (resolvedMarker.justification === 'right') {
@@ -3164,19 +3158,6 @@ export class DomPainter {
                   parseFloat(lineEl.style.paddingLeft) + (resolvedMarker.centerPaddingAdjustPx ?? 0) + 'px';
               }
 
-              markerEl.style.fontFamily =
-                toCssFontFamily(resolvedMarker.run.fontFamily) ?? resolvedMarker.run.fontFamily;
-              markerEl.style.fontSize = `${resolvedMarker.run.fontSize}px`;
-              markerEl.style.fontWeight = resolvedMarker.run.bold ? 'bold' : '';
-              markerEl.style.fontStyle = resolvedMarker.run.italic ? 'italic' : '';
-              if (resolvedMarker.run.color) {
-                markerEl.style.color = resolvedMarker.run.color;
-              }
-              if (resolvedMarker.run.letterSpacing != null) {
-                markerEl.style.letterSpacing = `${resolvedMarker.run.letterSpacing}px`;
-              }
-              markerContainer.appendChild(markerEl);
-
               if (resolvedMarker.suffix === 'tab') {
                 const tabEl = this.doc!.createElement('span');
                 tabEl.className = 'superdoc-tab';
@@ -3355,15 +3336,7 @@ export class DomPainter {
             lineEl.style.paddingLeft = `${paraIndentLeft + (paraIndent?.firstLine ?? 0) - (paraIndent?.hanging ?? 0)}px`;
 
             if (!marker.run.vanish) {
-              const markerContainer = this.doc!.createElement('span');
-              markerContainer.style.display = 'inline-block';
-              markerContainer.style.wordSpacing = '0px';
-
-              const markerEl = this.doc!.createElement('span');
-              markerEl.classList.add('superdoc-paragraph-marker');
-              markerEl.textContent = marker.markerText ?? '';
-              markerEl.style.pointerEvents = 'none';
-
+              const markerContainer = createListMarkerElement(this.doc!, marker.markerText ?? '', marker.run);
               const markerJustification = marker.justification ?? 'left';
 
               markerContainer.style.position = 'relative';
@@ -3376,18 +3349,6 @@ export class DomPainter {
                 lineEl.style.paddingLeft = parseFloat(lineEl.style.paddingLeft) + fragment.markerTextWidth! / 2 + 'px';
               }
 
-              markerEl.style.fontFamily = toCssFontFamily(marker.run.fontFamily) ?? marker.run.fontFamily;
-              markerEl.style.fontSize = `${marker.run.fontSize}px`;
-              markerEl.style.fontWeight = marker.run.bold ? 'bold' : '';
-              markerEl.style.fontStyle = marker.run.italic ? 'italic' : '';
-              if (marker.run.color) {
-                markerEl.style.color = marker.run.color;
-              }
-              if (marker.run.letterSpacing != null) {
-                markerEl.style.letterSpacing = `${marker.run.letterSpacing}px`;
-              }
-              markerContainer.appendChild(markerEl);
-
               const suffix = marker.suffix ?? 'tab';
               if (suffix === 'tab') {
                 const tabEl = this.doc!.createElement('span');
@@ -3572,7 +3533,7 @@ export class DomPainter {
       }
 
       const markerEl = this.doc.createElement('span');
-      markerEl.classList.add('superdoc-list-marker');
+      markerEl.classList.add(DOM_CLASS_NAMES.LIST_MARKER);
 
       // Track B: Use marker styling from wordLayout if available
       const wordLayout: MinimalWordLayout | undefined = item.paragraph.attrs?.wordLayout as
@@ -6844,11 +6805,7 @@ export class DomPainter {
       return true;
     }
 
-    return (
-      section === 'header' &&
-      fragment.kind === 'drawing' &&
-      this.isHeaderWordArtWatermark(resolvedItem?.block)
-    );
+    return section === 'header' && fragment.kind === 'drawing' && this.isHeaderWordArtWatermark(resolvedItem?.block);
   }
 
   private isHeaderWordArtWatermark(block: DrawingBlock | undefined): boolean {

packages/layout-engine/painters/dom/src/table/renderTableCell.ts

@@ -18,7 +18,10 @@ import type {
   WrapTextMode,
 } from '@superdoc/contracts';
 import { effectiveTableCellSpacing, rescaleColumnWidths, normalizeZIndex, getCellSpacingPx } from '@superdoc/contracts';
-import { toCssFontFamily } from '@superdoc/font-utils';
+import { createListMarkerElement,
+  computeTabWidth,
+  resolvePainterListMarkerGeometry,
+  resolvePainterListTextStartPx } from '../utils/marker-helpers.js';
 import type { FragmentRenderContext, RenderedLineInfo } from '../renderer.js';
 import { applyParagraphBorderStyles, applyParagraphShadingStyles } from '../features/paragraph-borders/index.js';
 import { applySquareWrapExclusionsToLines } from '../utils/anchor-helpers';
@@ -29,11 +32,6 @@ import {
   getSdtContainerKey,
   type SdtBoundaryOptions,
 } from '../utils/sdt-helpers.js';
-import {
-  computeTabWidth,
-  resolvePainterListMarkerGeometry,
-  resolvePainterListTextStartPx,
-} from '../utils/marker-helpers.js';
 import { applyCellBorders } from './border-utils.js';
 import { renderTableFragment as renderTableFragmentElement } from './renderTableFragment.js';
 
@@ -351,29 +349,7 @@ function renderListMarker(params: MarkerRenderParams): void {
     return;
   }
 
-  // Create marker container (inline-block to isolate from word-spacing used for justification)
-  const markerContainer = doc.createElement('span');
-  markerContainer.style.display = 'inline-block';
-  markerContainer.style.wordSpacing = '0px';
-
-  const markerEl = doc.createElement('span');
-  markerEl.classList.add('superdoc-paragraph-marker');
-  markerEl.textContent = markerLayout?.markerText ?? '';
-  markerEl.style.pointerEvents = 'none';
-
-  // Apply marker run styling
-  markerEl.style.fontFamily = toCssFontFamily(markerLayout?.run?.fontFamily) ?? markerLayout?.run?.fontFamily ?? '';
-  if (markerLayout?.run?.fontSize != null) {
-    markerEl.style.fontSize = `${markerLayout.run.fontSize}px`;
-  }
-  markerEl.style.fontWeight = markerLayout?.run?.bold ? 'bold' : '';
-  markerEl.style.fontStyle = markerLayout?.run?.italic ? 'italic' : '';
-  if (markerLayout?.run?.color) {
-    markerEl.style.color = markerLayout.run.color;
-  }
-  if (markerLayout?.run?.letterSpacing != null) {
-    markerEl.style.letterSpacing = `${markerLayout.run.letterSpacing}px`;
-  }
+  const markerContainer = createListMarkerElement(doc, markerLayout?.markerText ?? '', markerLayout?.run ?? {});
 
   // Left-justified markers stay inline (position: relative) within the text flow.
   // Right/center-justified markers are absolutely positioned.
@@ -388,8 +364,6 @@ function renderListMarker(params: MarkerRenderParams): void {
     lineEl.style.paddingLeft = parseFloat(lineEl.style.paddingLeft) + markerTextWidth / 2 + 'px';
   }
 
-  markerContainer.appendChild(markerEl);
-
   // Add suffix separator after marker, before text content
   const suffixType = markerLayout?.suffix ?? 'tab';
   if (suffixType === 'tab') {

packages/layout-engine/painters/dom/src/utils/marker-helpers.ts

@@ -1,3 +1,5 @@
+import { DOM_CLASS_NAMES } from '@superdoc/dom-contract';
+import { toCssFontFamily } from '@superdoc/font-utils';
 import {
   resolveListMarkerGeometry,
   resolveListTextStartPx,
@@ -74,3 +76,46 @@ export const resolvePainterListTextStartPx = ({
 
 // Re-export computeTabWidth from shared module
 export { computeTabWidth };
+
+type MarkerRunStyle = {
+  fontFamily?: string | null;
+  fontSize?: number | null;
+  bold?: boolean | null;
+  italic?: boolean | null;
+  color?: string | null;
+  letterSpacing?: number | null;
+};
+
+/**
+ * Build the marker container `<span class="superdoc-list-marker">` with the inner
+ * `<span class="superdoc-paragraph-marker">` already appended and styled from the
+ * given run. Callers handle positioning, suffix separators, and the final prepend.
+ */
+export const createListMarkerElement = (doc: Document, markerText: string, run: MarkerRunStyle): HTMLElement => {
+  const markerContainer = doc.createElement('span');
+  markerContainer.classList.add(DOM_CLASS_NAMES.LIST_MARKER);
+  markerContainer.style.display = 'inline-block';
+  markerContainer.style.wordSpacing = '0px';
+
+  const markerEl = doc.createElement('span');
+  markerEl.classList.add('superdoc-paragraph-marker');
+  markerEl.textContent = markerText;
+  markerEl.style.pointerEvents = 'none';
+  markerEl.style.fontFamily = toCssFontFamily(run.fontFamily) ?? run.fontFamily ?? '';
+
+  if (run.fontSize != null) {
+    markerEl.style.fontSize = `${run.fontSize}px`;
+  }
+  markerEl.style.fontWeight = run.bold ? 'bold' : '';
+  markerEl.style.fontStyle = run.italic ? 'italic' : '';
+
+  if (run.color) {
+    markerEl.style.color = run.color;
+  }
+  if (run.letterSpacing != null) {
+    markerEl.style.letterSpacing = `${run.letterSpacing}px`;
+  }
+
+  markerContainer.appendChild(markerEl);
+  return markerContainer;
+};

packages/super-editor/src/editors/v1/components/context-menu/constants.js

@@ -13,6 +13,9 @@ import pasteIconSvg from '@superdoc/common/icons/paste-solid.svg?raw';
 import checkIconSvg from '@superdoc/common/icons/check-solid.svg?raw';
 import xMarkIconSvg from '@superdoc/common/icons/xmark-solid.svg?raw';
 import paintRollerIconSvg from '@superdoc/common/icons/paint-roller-solid.svg?raw';
+import indentIconSvg from '@superdoc/common/icons/indent-solid.svg?raw';
+import outdentIconSvg from '@superdoc/common/icons/outdent-solid.svg?raw';
+import listOlIconSvg from '@superdoc/common/icons/list-ol-solid.svg?raw';
 
 export const ICONS = {
   addRowBefore: plusIconSvg,
@@ -37,6 +40,10 @@ export const ICONS = {
   trackChangesAccept: checkIconSvg,
   trackChangesReject: xMarkIconSvg,
   cellBackground: paintRollerIconSvg,
+  listRestartNumbering: listOlIconSvg,
+  listContinueNumbering: listOlIconSvg,
+  listDecreaseIndent: outdentIconSvg,
+  listIncreaseIndent: indentIconSvg,
 };
 
 // Table actions constant
@@ -65,6 +72,10 @@ export const TEXTS = {
   trackChangesAccept: 'Accept change',
   trackChangesReject: 'Reject change',
   cellBackground: 'Cell background',
+  listRestartNumbering: 'Restart numbering',
+  listContinueNumbering: 'Continue numbering',
+  listDecreaseIndent: 'Decrease indent',
+  listIncreaseIndent: 'Increase indent',
 };
 
 export const tableActionsOptions = [

packages/super-editor/src/editors/v1/components/context-menu/menuItems.js

@@ -288,6 +288,44 @@ export function getItems(context, customItems = [], includeDefaultItems = true)
         },
       ],
     },
+    {
+      id: 'list-marker',
+      isDefault: true,
+      items: [
+        {
+          id: 'list-restart-numbering',
+          label: TEXTS.listRestartNumbering,
+          icon: ICONS.listRestartNumbering,
+          isDefault: true,
+          action: (editor) => editor.commands.restartNumbering(),
+          showWhen: (context) => context.trigger === TRIGGERS.click && context.isOnListMarker,
+        },
+        {
+          id: 'list-continue-numbering',
+          label: TEXTS.listContinueNumbering,
+          icon: ICONS.listContinueNumbering,
+          isDefault: true,
+          action: (editor) => editor.commands.continueNumbering(),
+          showWhen: (context) => context.trigger === TRIGGERS.click && context.isOnListMarker,
+        },
+        {
+          id: 'list-decrease-indent',
+          label: TEXTS.listDecreaseIndent,
+          icon: ICONS.listDecreaseIndent,
+          isDefault: true,
+          action: (editor) => editor.commands.decreaseListIndent(),
+          showWhen: (context) => context.trigger === TRIGGERS.click && context.isOnListMarker,
+        },
+        {
+          id: 'list-increase-indent',
+          label: TEXTS.listIncreaseIndent,
+          icon: ICONS.listIncreaseIndent,
+          isDefault: true,
+          action: (editor) => editor.commands.increaseListIndent(),
+          showWhen: (context) => context.trigger === TRIGGERS.click && context.isOnListMarker,
+        },
+      ],
+    },
     {
       id: 'general',
       isDefault: true,