为 DOCX 导出自定义有序列表编号

import { Editor } from '@tiptap/core'
import {
  ConvertKit,
  generateNumberingFormatCss,
  type NumberingFormatDefinition,
} from '@tiptap-pro/extension-convert-kit'
import { ExportDocx, LevelFormat } from '@tiptap-pro/extension-export-docx'

// 1. 定义你的注册表——单一事实来源，下面会用到三次。
const MY_FORMATS: NumberingFormatDefinition[] = [
  {
    id: 'decimal-paren',
    levels: [
      { baseStyle: LevelFormat.DECIMAL, textTemplate: '%1)' },
      { baseStyle: LevelFormat.LOWER_LETTER, textTemplate: '%2)' },
      { baseStyle: LevelFormat.LOWER_ROMAN, textTemplate: '%3)' },
    ],
  },
  {
    id: 'outline',
    levels: [
      { baseStyle: LevelFormat.DECIMAL, textTemplate: '%1.' },
      { baseStyle: LevelFormat.DECIMAL, textTemplate: '%1.%2.' },
      { baseStyle: LevelFormat.DECIMAL, textTemplate: '%1.%2.%3.' },
    ],
  },
]

// 2. 在启动时注入一次编辑器预览 CSS。
const style = document.createElement('style')
style.textContent = generateNumberingFormatCss(MY_FORMATS)
document.head.appendChild(style)

// 3. 通过 ConvertKit 选择加入 schema 属性，并使用该注册表注册 ExportDocx。
const editor = new Editor({
  extensions: [
    ConvertKit.configure({
      // 在 ConvertKit 中默认关闭，因此没有自定义编号的使用者
      // 可以保持一个干净的 orderedList schema。设置为 `true` 以启用。
      orderedListNumbering: true,
    }),
    ExportDocx.configure({
      numberingFormats: MY_FORMATS,
      onCompleteExport: (blob) => {
        /* 下载 blob */
      },
    }),
  ],
})

// 4. 为当前选区所在的列表应用一种格式。
editor.chain().focus().toggleOrderedList().setOrderedListNumberingFormat('outline').run()

ConvertKit.configure({ orderedListNumbering: true })

editor.chain().focus().setOrderedListNumberingFormat('decimal-paren').run()
editor.chain().focus().setOrderedListNumberingFormat(null).run()

const activeFormatId = editor.storage.orderedListNumbering.activeNumberingFormat
// 一个格式 id，或者在选区不在有序列表中时为 `null`

interface NumberingFormatDefinition {
  id: string
  levels: NumberingLevelDefinition[]
}

interface NumberingLevelDefinition {
  baseStyle: NumberingBaseStyle
  textTemplate: string
  startAt?: number
  alignment?: 'left' | 'center' | 'right'
  numberIndent?: number | string
  textIndent?: number | string
  markerFont?: NumberingMarkerFont
}

interface NumberingMarkerFont {
  font?: string | { name: string }
  size?: number | string
  bold?: boolean
  italics?: boolean
  color?: string
  underline?: unknown
}

generateNumberingFormatCss(formats, {
  scope: '.tiptap.ProseMirror', // 默认
  maxDepth: 9, // 默认
})