f-docx-editor 0.1.2 → 0.1.4

package/src/FDocxEditor.vue

@@ -1,4613 +0,0 @@
-<template>
-  <div class="view-page" :class="{ 'has-outline': documentOutline.length }">
-    <aside v-if="documentOutline.length" class="document-outline">
-      <div class="outline-title">文档目录</div>
-      <button
-          v-for="item in documentOutline"
-          :key="item.id"
-          type="button"
-          class="outline-item"
-          :class="[`level-${item.level}`, { 'is-active': activeOutlineId === item.id }]"
-          @click="scrollToOutlineItem(item)"
-      >
-        <span class="outline-text">{{ item.text }}</span>
-      </button>
-    </aside>
-
-    <div
-        ref="docxScrollRef"
-        :class="renderType === 'view' ? 'view-box' : 'edit-box'"
-        @scroll="handleDocumentScroll"
-    >
-      <div v-if="isLoading" class="status-box">正在生成文档预览...</div>
-      <div v-else-if="errorMessage" class="status-box is-error">{{ errorMessage }}</div>
-      <div
-          v-show="!isLoading && !errorMessage"
-          ref="previewRef"
-          class="docx-preview-container"
-      ></div>
-    </div>
-
-    <el-dialog
-        v-model="editDialogVisible"
-        title="编辑变量内容"
-        width="70%"
-        class="editDialog-dialog"
-        destroy-on-close
-        @closed="onDialogClosed"
-    >
-      <div class="edit-dialog">
-        <div class="edit-dialog-tip">
-          当前变量：{{ activeEditableField?.key || '--' }}
-          <span v-if="activeEditableField?.path" class="edit-dialog-path">
-            {{ activeEditableField.path }}
-          </span>
-        </div>
-
-        <div class="editor-toolbar">
-          <el-tooltip
-              v-for="item in headingActions"
-              :key="item.level"
-              :content="`标题 ${item.level}`"
-              placement="top"
-          >
-            <button
-                type="button"
-                class="toolbar-btn"
-                :class="{ 'is-active': isHeadingActive(item.level) }"
-                @mousedown.prevent
-                @click="setHeading(item.level)"
-            >
-              <svg class="toolbar-svg heading-svg" viewBox="0 0 28 28" aria-hidden="true">
-                <text x="5" y="19" class="svg-heading-main">H</text>
-                <text x="18" y="24" class="svg-heading-level">{{ item.level }}</text>
-              </svg>
-            </button>
-          </el-tooltip>
-
-          <el-tooltip content="正文" placement="top">
-            <button
-                type="button"
-                class="toolbar-btn"
-                :class="{ 'is-active': isParagraphActive }"
-                @mousedown.prevent
-                @click="setParagraph"
-            >
-              <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                <path d="M6 7h16M6 12h16M6 17h13M6 22h10" class="svg-stroke round" />
-              </svg>
-            </button>
-          </el-tooltip>
-
-          <div class="toolbar-divider"></div>
-
-          <el-tooltip content="加粗" placement="top">
-            <button
-                type="button"
-                class="toolbar-btn"
-                :class="{ 'is-active': isBoldActive }"
-                @mousedown.prevent
-                @click="toggleBold"
-            >
-              <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                <text x="8" y="20" class="svg-bold">B</text>
-              </svg>
-            </button>
-          </el-tooltip>
-
-          <el-popover
-              v-model:visible="tablePickerVisible"
-              placement="bottom-start"
-              trigger="click"
-              :width="340"
-              popper-class="table-picker-popper"
-          >
-            <template #reference>
-              <button
-                  type="button"
-                  class="toolbar-btn table-trigger-btn"
-                  :class="{ 'is-active': isTableActive }"
-                  title="插入表格"
-                  @mousedown.prevent
-              >
-                <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                  <rect x="5" y="5" width="18" height="18" rx="2" class="svg-stroke" />
-                  <path d="M5 11.5h18M5 17.5h18M11.5 5v18M17.5 5v18" class="svg-stroke thin" />
-                  <rect x="6.5" y="6.5" width="15" height="4" class="svg-soft-fill" />
-                </svg>
-              </button>
-            </template>
-
-            <div class="table-picker">
-              <div class="table-picker-title">插入表格</div>
-              <div class="table-picker-grid">
-                <button
-                    v-for="cell in tablePickerCells"
-                    :key="cell.key"
-                    type="button"
-                    class="table-picker-cell"
-                    :class="{ 'is-active': cell.row <= tablePickerHover.rows && cell.col <= tablePickerHover.cols }"
-                    @mouseenter="onTablePickerHover(cell.row, cell.col)"
-                    @click="insertTable(cell.row, cell.col)"
-                ></button>
-              </div>
-              <div class="table-picker-tip">
-                {{ tablePickerHover.rows }} x {{ tablePickerHover.cols }}
-              </div>
-            </div>
-          </el-popover>
-
-          <el-tooltip content="左对齐" placement="top">
-            <button
-                type="button"
-                class="toolbar-btn"
-                :class="{ 'is-active': isTextAlignActive('left') }"
-                @mousedown.prevent
-                @click="setTextAlign('left')"
-            >
-              <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                <path d="M6 7h16M6 12h11M6 17h16M6 22h9" class="svg-stroke round" />
-              </svg>
-            </button>
-          </el-tooltip>
-
-          <el-tooltip content="居中对齐" placement="top">
-            <button
-                type="button"
-                class="toolbar-btn"
-                :class="{ 'is-active': isTextAlignActive('center') }"
-                @mousedown.prevent
-                @click="setTextAlign('center')"
-            >
-              <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                <path d="M6 7h16M9 12h10M6 17h16M10 22h8" class="svg-stroke round" />
-              </svg>
-            </button>
-          </el-tooltip>
-
-          <el-tooltip content="右对齐" placement="top">
-            <button
-                type="button"
-                class="toolbar-btn"
-                :class="{ 'is-active': isTextAlignActive('right') }"
-                @mousedown.prevent
-                @click="setTextAlign('right')"
-            >
-              <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                <path d="M6 7h16M11 12h11M6 17h16M13 22h9" class="svg-stroke round" />
-              </svg>
-            </button>
-          </el-tooltip>
-
-          <div class="toolbar-divider"></div>
-
-          <el-tooltip content="下方插入行" placement="top">
-            <span class="toolbar-tip-wrap">
-              <button
-                  type="button"
-                  class="toolbar-btn table-op-btn"
-                  :disabled="!isTableActive"
-                  @mousedown.prevent
-                  @click="addTableRow"
-              >
-                <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                  <rect x="5" y="4" width="18" height="16" rx="1.5" class="svg-stroke muted" />
-                  <path d="M5 9.5h18M5 14.5h18M11 4v16M17 4v16" class="svg-stroke thin muted" />
-                  <path d="M14 23v4M12 25h4" class="svg-stroke accent round" />
-                </svg>
-              </button>
-            </span>
-          </el-tooltip>
-
-          <el-tooltip content="删除当前行" placement="top">
-            <span class="toolbar-tip-wrap">
-              <button
-                  type="button"
-                  class="toolbar-btn table-op-btn"
-                  :disabled="!isTableActive"
-                  @mousedown.prevent
-                  @click="deleteTableRow"
-              >
-                <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                  <rect x="5" y="4" width="18" height="16" rx="1.5" class="svg-stroke muted" />
-                  <path d="M5 9.5h18M5 14.5h18M11 4v16M17 4v16" class="svg-stroke thin muted" />
-                  <path d="M11.5 25h5" class="svg-stroke danger round" />
-                </svg>
-              </button>
-            </span>
-          </el-tooltip>
-
-          <el-tooltip content="右侧插入列" placement="top">
-            <span class="toolbar-tip-wrap">
-              <button
-                  type="button"
-                  class="toolbar-btn table-op-btn"
-                  :disabled="!isTableActive"
-                  @mousedown.prevent
-                  @click="addTableColumn"
-              >
-                <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                  <rect x="4" y="5" width="16" height="18" rx="1.5" class="svg-stroke muted" />
-                  <path d="M4 11h16M4 17h16M9.5 5v18M15 5v18" class="svg-stroke thin muted" />
-                  <path d="M24 12v4M22 14h4" class="svg-stroke accent round" />
-                </svg>
-              </button>
-            </span>
-          </el-tooltip>
-
-          <el-tooltip content="删除当前列" placement="top">
-            <span class="toolbar-tip-wrap">
-              <button
-                  type="button"
-                  class="toolbar-btn table-op-btn"
-                  :disabled="!isTableActive"
-                  @mousedown.prevent
-                  @click="deleteTableColumn"
-              >
-                <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                  <rect x="4" y="5" width="16" height="18" rx="1.5" class="svg-stroke muted" />
-                  <path d="M4 11h16M4 17h16M9.5 5v18M15 5v18" class="svg-stroke thin muted" />
-                  <path d="M22 14h5" class="svg-stroke danger round" />
-                </svg>
-              </button>
-            </span>
-          </el-tooltip>
-
-          <el-tooltip content="删除表格" placement="top">
-            <span class="toolbar-tip-wrap">
-              <button
-                  type="button"
-                  class="toolbar-btn table-op-btn"
-                  :disabled="!isTableActive"
-                  @mousedown.prevent
-                  @click="removeTable"
-              >
-                <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                  <rect x="6" y="6" width="16" height="16" rx="2" class="svg-stroke muted" />
-                  <path d="M11 11l6 6M17 11l-6 6" class="svg-stroke danger round" />
-                </svg>
-              </button>
-            </span>
-          </el-tooltip>
-
-          <div class="toolbar-divider"></div>
-
-          <el-tooltip content="字体颜色" placement="top">
-            <button type="button" class="toolbar-btn color-btn" @mousedown.prevent @click="openTextColorPicker">
-              <svg class="toolbar-svg color-svg" viewBox="0 0 28 28" aria-hidden="true">
-                <path d="M8 19l6-14 6 14M10.5 14.5h7" class="svg-stroke round" />
-                <path d="M6 23h16" class="svg-stroke color-preview-stroke round" :style="{ color: currentTextColor }" />
-              </svg>
-            </button>
-          </el-tooltip>
-          <input
-              ref="textColorInputRef"
-              class="hidden-color-input"
-              type="color"
-              :value="currentTextColor"
-              @input="onTextColorChange"
-          />
-
-          <el-tooltip content="背景色" placement="top">
-            <button type="button" class="toolbar-btn color-btn" @mousedown.prevent @click="openHighlightColorPicker">
-              <svg class="toolbar-svg color-svg" viewBox="0 0 28 28" aria-hidden="true">
-                <path d="M8 16.5l7.5-7.5 3.5 3.5-7.5 7.5H8v-3.5z" class="svg-stroke round" />
-                <path d="M17 7l4 4" class="svg-stroke thin round" />
-                <rect x="6" y="22" width="16" height="3" rx="1.5" class="svg-color-fill" :style="{ color: currentHighlightColor }" />
-              </svg>
-            </button>
-          </el-tooltip>
-
-          <el-tooltip content="清除背景色" placement="top">
-            <button
-                type="button"
-                class="toolbar-btn clear-highlight-btn"
-                @mousedown.prevent
-                @click="clearHighlightColor"
-            >
-              <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                <path d="M8 16.5l7.5-7.5 3.5 3.5-7.5 7.5H8v-3.5z" class="svg-stroke muted round" />
-                <path d="M17 7l4 4" class="svg-stroke thin muted round" />
-                <path d="M7 23h14" class="svg-stroke danger round" />
-                <path d="M21 6L6 21" class="svg-stroke danger round" />
-              </svg>
-            </button>
-          </el-tooltip>
-
-          <el-tooltip content="格式刷" placement="top">
-            <button
-                type="button"
-                class="toolbar-btn"
-                :class="{ 'is-active': Boolean(copiedFormat) }"
-                @mousedown.prevent
-                @click="toggleFormatPainter"
-            >
-              <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                <path d="M8 5h12v6H8zM10 11v4h8v-4M13 15h2v7" class="svg-stroke round" />
-              </svg>
-            </button>
-          </el-tooltip>
-
-          <el-tooltip content="清除格式" placement="top">
-            <button
-                type="button"
-                class="toolbar-btn"
-                @mousedown.prevent
-                @click="clearEditorFormat"
-            >
-              <svg class="toolbar-svg" viewBox="0 0 28 28" aria-hidden="true">
-                <path d="M7 20l5-12h4l5 12M9 16h10" class="svg-stroke round" />
-                <path d="M21 6L6 21" class="svg-stroke danger round" />
-              </svg>
-            </button>
-          </el-tooltip>
-          <input
-              ref="highlightColorInputRef"
-              class="hidden-color-input"
-              type="color"
-              :value="currentHighlightColor"
-              @input="onHighlightColorChange"
-          />
-
-          <div class="toolbar-divider"></div>
-
-          <el-tooltip content="撤销" placement="top">
-            <span class="toolbar-tip-wrap">
-              <button
-                  type="button"
-                  class="toolbar-btn"
-                  :disabled="!canUndo"
-                  @mousedown.prevent
-                  @click="undoEditor"
-              >
-                <RefreshLeft />
-              </button>
-            </span>
-          </el-tooltip>
-
-          <el-tooltip content="恢复" placement="top">
-            <span class="toolbar-tip-wrap">
-              <button
-                  type="button"
-                  class="toolbar-btn"
-                  :disabled="!canRedo"
-                  @mousedown.prevent
-                  @click="redoEditor"
-              >
-                <RefreshRight />
-              </button>
-            </span>
-          </el-tooltip>
-        </div>
-
-        <div
-            class="editor-content-shell"
-            @click="hideTableContextMenu"
-            @mousedown.capture="onEditorMouseDownCapture"
-            @contextmenu="onEditorContextMenu"
-        >
-          <EditorContent v-if="editor" :editor="editor" class="editor-content" />
-        </div>
-
-        <div
-            v-if="tableContextMenuVisible"
-            class="table-context-menu"
-            :style="{ left: `${tableContextMenuPosition.x}px`, top: `${tableContextMenuPosition.y}px` }"
-            @mousedown.prevent
-        >
-          <button type="button" @click="runTableMenuCommand('mergeCells')">合并单元格</button>
-          <button type="button" @click="runTableMenuCommand('splitCell')">拆分单元格</button>
-          <div class="table-context-divider"></div>
-          <button type="button" @click="runTableMenuCommand('addRowBefore')">上方插入行</button>
-          <button type="button" @click="runTableMenuCommand('addRowAfter')">下方插入行</button>
-          <button type="button" @click="runTableMenuCommand('deleteRow')">删除当前行</button>
-          <div class="table-context-divider"></div>
-          <button type="button" @click="runTableMenuCommand('addColumnBefore')">左侧插入列</button>
-          <button type="button" @click="runTableMenuCommand('addColumnAfter')">右侧插入列</button>
-          <button type="button" @click="runTableMenuCommand('deleteColumn')">删除当前列</button>
-          <div class="table-context-divider"></div>
-          <button type="button" @click="runTableMenuCommand('toggleHeaderRow')">切换表头行</button>
-          <button type="button" @click="runTableMenuCommand('toggleHeaderColumn')">切换表头列</button>
-          <button type="button" class="is-danger" @click="runTableMenuCommand('deleteTable')">删除表格</button>
-        </div>
-      </div>
-
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="editDialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="saveActiveField">保存当前内容</el-button>
-        </div>
-      </template>
-    </el-dialog>
-
-  </div>
-</template>
-
-<script>
-export default {
-  name: "DocxEditor"
-}
-</script>
-
-<script setup>
-import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from 'vue'
-import { ElMessage } from 'element-plus'
-import {
-  RefreshLeft,
-  RefreshRight
-} from '@element-plus/icons-vue'
-import Docxtemplater from 'docxtemplater'
-import ImageModule from 'docxtemplater-image-module-free'
-import PizZip from 'pizzip'
-import * as docxPreview from 'docx-preview'
-import * as echarts from 'echarts'
-import { Extension } from '@tiptap/core'
-import Color from '@tiptap/extension-color'
-import Highlight from '@tiptap/extension-highlight'
-import Placeholder from '@tiptap/extension-placeholder'
-import { CellSelection } from '@tiptap/pm/tables'
-import { Table } from '@tiptap/extension-table'
-import TableCell from '@tiptap/extension-table-cell'
-import TableHeader from '@tiptap/extension-table-header'
-import TableRow from '@tiptap/extension-table-row'
-import TextAlign from '@tiptap/extension-text-align'
-import { TextStyle } from '@tiptap/extension-text-style'
-import StarterKit from '@tiptap/starter-kit'
-import { EditorContent, useEditor } from '@tiptap/vue-3'
-
-const DEFAULT_TEMPLATE_FILE_NAME = '运营报告.docx'
-const DOCX_MIME_TYPE = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-const DEFAULT_TEXT_COLOR = '#2b3345'
-const DEFAULT_HIGHLIGHT_COLOR = '#e8f3ff'
-const EDITOR_MARKER_START = '[EDITOR_START]'
-const EDITOR_MARKER_END = '[EDITOR_END]'
-const LEGACY_EDITOR_MARKER_START = '【'
-const LEGACY_EDITOR_MARKER_END = '】'
-const WATER_LEVEL_CHART_TAGS = ['cpuWaterLevelChart', 'memoryWaterLevelChart', 'diskWaterLevelChart']
-const WATER_LEVEL_CHART_CANVAS_WIDTH = 720
-const WATER_LEVEL_CHART_CANVAS_HEIGHT = 360
-const WATER_LEVEL_CHART_DOCX_WIDTH = 554
-const WATER_LEVEL_CHART_DOCX_HEIGHT = 277
-const WATER_LEVEL_CHART_GRID = {
-  top: 88,
-  left: 48,
-  right: 36,
-  bottom: 42
-}
-const DOCX_TABLE_WIDTH_DXA = 8306
-const DOCX_TABLE_WIDTH_PCT = 5000
-const DOCX_TABLE_FONT_NAME = '方正仿宋_GB2312'
-const DOCX_TABLE_HEADER_FONT_SIZE_HALF_POINTS = '28'
-const DOCX_TABLE_BODY_FONT_SIZE_HALF_POINTS = '22'
-const EDITOR_TABLE_FONT_FAMILY = "'方正仿宋_GB2312', '仿宋_GB2312', FangSong, STFangsong, SimSun, '宋体', serif"
-const EDITOR_TABLE_HEADER_FONT_SIZE = '14pt'
-const EDITOR_TABLE_BODY_FONT_SIZE = '11pt'
-const TABLE_PICKER_ROWS = 8
-const TABLE_PICKER_COLS = 10
-const RICH_TEXT_TOKEN_PREFIX = '__DOCX_RICH_TEXT_FIELD__'
-const EDITABLE_EMPTY_PLACEHOLDER = '请输入内容...'
-const EDITOR_EMPTY_PLACEHOLDER = '请输入内容，支持 Ctrl/Command + A/C/Z/Y 等常用快捷键...'
-const EDITOR_INDENT_STEP_EM = 2
-const EDITOR_MAX_INDENT_LEVEL = 6
-
-const props = defineProps({
-  renderData: {
-    type: Object,
-    default: () => ({})
-  },
-  renderType: {
-    type: String,
-    default: 'view'
-  },
-  templateUrl: {
-    type: String,
-    default: ''
-  },
-  templateFileName: {
-    type: String,
-    default: '运营报告.docx'
-  },
-  exportFileName: {
-    type: String,
-    default: ''
-  }
-})
-
-const emit = defineEmits([
-  'content-change',
-  'render-data-change',
-  'save-payload-change',
-  'update:editorHtml',
-  'update:editorJson'
-])
-
-const previewRef = ref(null)
-const docxScrollRef = ref(null)
-const isLoading = ref(false)
-const errorMessage = ref('')
-const editDialogVisible = ref(false)
-const activeEditableField = ref(null)
-const textColorInputRef = ref(null)
-const highlightColorInputRef = ref(null)
-const currentTextColor = ref(DEFAULT_TEXT_COLOR)
-const currentHighlightColor = ref(DEFAULT_HIGHLIGHT_COLOR)
-const pendingEditorSelection = ref(null)
-const copiedFormat = ref(null)
-const tablePickerVisible = ref(false)
-const tablePickerHover = ref({
-  rows: 3,
-  cols: 3
-})
-const tableContextMenuVisible = ref(false)
-const tableContextMenuPosition = ref({
-  x: 0,
-  y: 0
-})
-const documentOutline = ref([])
-const activeOutlineId = ref('')
-const editableFieldKeys = ref([])
-const editableMarkerDescriptors = ref([])
-const editableFieldPathMap = ref({})
-const editableFieldContentMap = reactive({})
-const editableFieldTemplateHtmlMap = reactive({})
-const headingStyleLevelMap = ref({})
-const documentHeadingList = ref([])
-const wordStyleContext = ref({
-  headingStyleIds: {},
-  bodyStyleId: '',
-  editableHeadingCounters: {}
-})
-const headingActions = [
-  { label: 'H1', level: 1 },
-  { label: 'H2', level: 2 },
-  { label: 'H3', level: 3 }
-]
-const tablePickerCells = Array.from({ length: TABLE_PICKER_ROWS * TABLE_PICKER_COLS }, (_, index) => ({
-  key: index,
-  row: Math.floor(index / TABLE_PICKER_COLS) + 1,
-  col: (index % TABLE_PICKER_COLS) + 1
-}))
-
-let renderToken = 0
-let editableDomCleanupList = []
-let outlineScrollRaf = 0
-const editableRenderData = ref(createEditableRenderData(props.renderData))
-const DOM_TEXT_NODE = 3
-const DOM_ELEMENT_NODE = 1
-
-function getEditorIndentLevel(editorInstance) {
-  const attrs = editorInstance.isActive('heading')
-      ? editorInstance.getAttributes('heading')
-      : editorInstance.getAttributes('paragraph')
-
-  return Number(attrs.textIndentLevel || 0)
-}
-
-function updateEditorIndent(editorInstance, delta) {
-  if (!editorInstance || editorInstance.isActive('table')) {
-    return false
-  }
-
-  const nodeType = editorInstance.isActive('heading') ? 'heading' : 'paragraph'
-  const nextLevel = Math.min(
-      EDITOR_MAX_INDENT_LEVEL,
-      Math.max(0, getEditorIndentLevel(editorInstance) + delta)
-  )
-
-  return editorInstance
-      .chain()
-      .focus()
-      .updateAttributes(nodeType, {
-        textIndentLevel: nextLevel
-      })
-      .run()
-}
-
-const EditorIndent = Extension.create({
-  name: 'editorIndent',
-
-  addGlobalAttributes() {
-    return [
-      {
-        types: ['paragraph', 'heading'],
-        attributes: {
-          textIndentLevel: {
-            default: 0,
-            parseHTML: (element) => {
-              const indent = element.style?.textIndent || ''
-              const match = indent.match(/^([\d.]+)em$/)
-
-              if (!match) {
-                return 0
-              }
-
-              return Math.min(
-                  EDITOR_MAX_INDENT_LEVEL,
-                  Math.max(0, Math.round(Number(match[1]) / EDITOR_INDENT_STEP_EM))
-              )
-            },
-            renderHTML: (attributes) => {
-              const level = Number(attributes.textIndentLevel || 0)
-
-              if (!level) {
-                return {}
-              }
-
-              return {
-                style: `text-indent: ${level * EDITOR_INDENT_STEP_EM}em;`
-              }
-            }
-          }
-        }
-      }
-    ]
-  },
-
-  addKeyboardShortcuts() {
-    return {
-      Tab: () => updateEditorIndent(this.editor, 1),
-      'Shift-Tab': () => updateEditorIndent(this.editor, -1),
-      'Mod-y': () => this.editor.commands.redo(),
-      'Mod-Shift-z': () => this.editor.commands.redo(),
-      'Mod-z': () => this.editor.commands.undo()
-    }
-  }
-})
-
-const editor = useEditor({
-  content: '<p></p>',
-  extensions: [
-    StarterKit.configure({
-      bulletList: false,
-      orderedList: false,
-      blockquote: false,
-      codeBlock: false,
-      horizontalRule: false
-    }),
-    Table.configure({
-      resizable: true
-    }),
-    TableRow,
-    TableHeader,
-    TableCell,
-    TextStyle,
-    Color.configure({
-      types: ['textStyle']
-    }),
-    Highlight.configure({
-      multicolor: true
-    }),
-    TextAlign.configure({
-      types: ['heading', 'paragraph']
-    }),
-    EditorIndent,
-    Placeholder.configure({
-      placeholder: EDITOR_EMPTY_PLACEHOLDER,
-      showOnlyWhenEditable: true,
-      includeChildren: true
-    })
-  ],
-  onSelectionUpdate({ editor: instance }) {
-    currentTextColor.value = instance.getAttributes('textStyle').color || DEFAULT_TEXT_COLOR
-    currentHighlightColor.value = instance.getAttributes('highlight').color || DEFAULT_HIGHLIGHT_COLOR
-  },
-  onUpdate({ editor: instance }) {
-    emit('content-change', {
-      html: instance.getHTML(),
-      json: instance.getJSON()
-    })
-    emit('update:editorHtml', instance.getHTML())
-    emit('update:editorJson', instance.getJSON())
-  }
-})
-
-const isBoldActive = computed(() => editor.value?.isActive('bold'))
-const isTableActive = computed(() => editor.value?.isActive('table'))
-const isParagraphActive = computed(() => editor.value?.isActive('paragraph'))
-const canUndo = computed(() => editor.value?.can().chain().focus().undo().run())
-const canRedo = computed(() => editor.value?.can().chain().focus().redo().run())
-
-function deepClone(value) {
-  return JSON.parse(JSON.stringify(value || {}))
-}
-
-function createEditableRenderData(source) {
-  const cloned = deepClone(source)
-
-  if (!cloned.__editableRichTextMap) {
-    cloned.__editableRichTextMap = {}
-  }
-
-  return cloned
-}
-
-function getChartTagDataAliases() {
-  return WATER_LEVEL_CHART_TAGS.reduce((result, key) => {
-    result[key] = getValueByPath(editableRenderData.value, `overallData.${key}`) || editableRenderData.value[key] || {}
-    return result
-  }, {})
-}
-
-function getChartTagNames() {
-  return WATER_LEVEL_CHART_TAGS.reduce((result, key) => {
-    result[`{%${key}}`] = true
-    result[key] = true
-    return result
-  }, {})
-}
-
-function getExportFileName() {
-  if (props.exportFileName) {
-    return props.exportFileName
-  }
-
-  const startTime = editableRenderData.value?.startTime || ''
-  const endTime = editableRenderData.value?.endTime || ''
-
-  if (startTime && endTime) {
-    return `云平台运维周报_${startTime}_${endTime}.docx`
-  }
-
-  return '云平台运维周报.docx'
-}
-
-function clearPreview() {
-  clearEditableDecorations()
-  documentOutline.value = []
-  activeOutlineId.value = ''
-  Object.keys(editableFieldTemplateHtmlMap).forEach((key) => {
-    delete editableFieldTemplateHtmlMap[key]
-  })
-  if (previewRef.value) {
-    previewRef.value.innerHTML = ''
-  }
-}
-
-function clearEditableDecorations() {
-  editableDomCleanupList.forEach((cleanup) => cleanup())
-  editableDomCleanupList = []
-}
-
-function normalizeValue(value) {
-  if (Array.isArray(value)) {
-    return value.map((item) => {
-      if (item && typeof item === 'object') {
-        return normalizeObject(item)
-      }
-      return item ?? ''
-    })
-  }
-
-  if (value && typeof value === 'object') {
-    return normalizeObject(value)
-  }
-
-  return value ?? ''
-}
-
-function normalizeObject(source = {}) {
-  return Object.keys(source).reduce((result, key) => {
-    result[key] = normalizeValue(source[key])
-    return result
-  }, {})
-}
-
-function buildTemplateData(data = {}) {
-  const normalizedData = normalizeObject(data)
-  const overallData = normalizedData.overallData || {}
-  const operationsData = normalizedData.operationsData || {}
-  const maintenanceData = normalizedData.maintenanceData || {}
-  const workThisWeek = normalizedData.workThisWeek || {}
-  const workNextWeek = normalizedData.workNextWeek || {}
-
-  return {
-    ...normalizedData,
-    ...overallData,
-    ...operationsData,
-    ...maintenanceData,
-    ...workThisWeek,
-    ...workNextWeek,
-    intranet_resource_list: overallData.intranet_resource_list || []
-  }
-}
-
-function getRichTextToken(fieldKey) {
-  return `${RICH_TEXT_TOKEN_PREFIX}${fieldKey}__`
-}
-
-function hasRichTextContent(richItem) {
-  return Boolean(richItem?.html || richItem?.json || richItem?.blocks?.length)
-}
-
-function getStoredRichTextItem(fieldKey) {
-  return editableRenderData.value.__editableRichTextMap?.[fieldKey] || null
-}
-
-function buildTemplateDataForRender(options = {}) {
-  const { useRichTextTokens = true, useRichTextPlainText = true } = options
-  const source = deepClone(editableRenderData.value)
-  const richTextMap = source.__editableRichTextMap || {}
-
-  editableFieldKeys.value.forEach((fieldKey) => {
-    if (getValueByPath(source, fieldKey) === '') {
-      setValueByPath(source, fieldKey, '')
-    }
-  })
-
-  Object.keys(richTextMap).forEach((key) => {
-    const richItem = richTextMap[key]
-    if (richItem?.path) {
-      const shouldUseToken = useRichTextTokens && hasRichTextContent(richItem)
-      const fallbackText = useRichTextPlainText ? (richItem.plainText || '') : ''
-      setValueByPath(source, richItem.path, shouldUseToken
-          ? getRichTextToken(key)
-          : fallbackText)
-    }
-  })
-
-  return {
-    ...buildTemplateData(source),
-    ...getChartTagDataAliases()
-  }
-}
-
-function getTemplateTextParts(xmlText) {
-  return [...xmlText.matchAll(/<w:t[^>]*>([\s\S]*?)<\/w:t>/g)].map((match) => decodeXmlText(match[1]))
-}
-
-function escapeRegExp(text) {
-  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-}
-
-function getEditableMarkerRegExp() {
-  return new RegExp(
-      `(?:${escapeRegExp(LEGACY_EDITOR_MARKER_START)}\\s*)?${escapeRegExp(EDITOR_MARKER_START)}\\s*(\\{([^#/{][^}]*)\\})[\\s\\S]*?${escapeRegExp(EDITOR_MARKER_END)}(?:\\s*${escapeRegExp(LEGACY_EDITOR_MARKER_END)})?`,
-      'g'
-  )
-}
-
-function getRenderedEditableMarkerRegExp() {
-  return new RegExp(
-      `(?:${escapeRegExp(LEGACY_EDITOR_MARKER_START)}\\s*)?${escapeRegExp(EDITOR_MARKER_START)}\\s*([\\s\\S]*?)\\s*${escapeRegExp(EDITOR_MARKER_END)}(?:\\s*${escapeRegExp(LEGACY_EDITOR_MARKER_END)})?`,
-      'g'
-  )
-}
-
-function decodeXmlText(text) {
-  return text
-      .replace(/&lt;/g, '<')
-      .replace(/&gt;/g, '>')
-      .replace(/&amp;/g, '&')
-      .replace(/&quot;/g, '"')
-      .replace(/&#39;/g, "'")
-}
-
-function extractEditableMarkerDescriptors(xmlText) {
-  const text = getTemplateTextParts(xmlText).join('')
-  const validMarkerRegExp = getEditableMarkerRegExp()
-
-  return [...text.matchAll(getRenderedEditableMarkerRegExp())]
-      .map((match) => {
-        const markerText = match[0] || ''
-        const validMatch = validMarkerRegExp.exec(markerText)
-        validMarkerRegExp.lastIndex = 0
-
-        return {
-          markerText,
-          fieldKey: validMatch?.[2] || '',
-          isValid: Boolean(validMatch?.[2])
-        }
-      })
-}
-
-function buildScalarPathMap(source, currentPath = '', result = {}) {
-  if (!source || typeof source !== 'object') {
-    return result
-  }
-
-  Object.keys(source).forEach((key) => {
-    if (key.startsWith('__')) {
-      return
-    }
-
-    const value = source[key]
-    const nextPath = currentPath ? `${currentPath}.${key}` : key
-
-    if (Array.isArray(value)) {
-      return
-    }
-
-    if (value && typeof value === 'object') {
-      buildScalarPathMap(value, nextPath, result)
-      return
-    }
-
-    if (!result[key]) {
-      result[key] = nextPath
-    }
-  })
-
-  return result
-}
-
-function setValueByPath(target, path, value) {
-  if (!path) {
-    return
-  }
-
-  const pathList = path.split('.')
-  let current = target
-
-  for (let index = 0; index < pathList.length - 1; index += 1) {
-    const pathKey = pathList[index]
-    if (!current[pathKey] || typeof current[pathKey] !== 'object') {
-      current[pathKey] = {}
-    }
-    current = current[pathKey]
-  }
-
-  current[pathList[pathList.length - 1]] = value
-}
-
-function getValueByPath(target, path) {
-  if (!path) {
-    return ''
-  }
-
-  return path.split('.').reduce((result, key) => {
-    if (result == null) {
-      return ''
-    }
-    return result[key]
-  }, target)
-}
-
-function htmlToDocxText(html) {
-  const container = document.createElement('div')
-  container.innerHTML = html
-
-  function walk(node) {
-    if (!node) {
-      return ''
-    }
-
-    if (node.nodeType === DOM_TEXT_NODE) {
-      return node.textContent || ''
-    }
-
-    if (node.nodeType !== DOM_ELEMENT_NODE) {
-      return ''
-    }
-
-    const tagName = node.tagName?.toLowerCase?.() || ''
-
-    if (tagName === 'br') {
-      return '\n'
-    }
-
-    const childText = Array.from(node.childNodes).map((childNode) => walk(childNode)).join('')
-
-    if (['p', 'div', 'h1', 'h2', 'h3', 'li'].includes(tagName)) {
-      return `${childText}\n`
-    }
-
-    if (tagName === 'tr') {
-      return `${childText}\n`
-    }
-
-    if (tagName === 'td' || tagName === 'th') {
-      return `${childText}\t`
-    }
-
-    return childText
-  }
-
-  return Array.from(container.childNodes)
-      .map((childNode) => walk(childNode))
-      .join('')
-      .replace(/\t+$/gm, '')
-      .replace(/\n{3,}/g, '\n\n')
-      .trim()
-}
-
-function hasVisibleHtmlContent(html = '') {
-  if (!html) {
-    return false
-  }
-
-  const container = document.createElement('div')
-  container.innerHTML = html
-
-  if (container.querySelector('table, img, svg, canvas')) {
-    return true
-  }
-
-  return Boolean((container.textContent || '').replace(/\u00a0/g, ' ').trim())
-}
-
-function hasEditableDisplayContent(key, fallbackText = '') {
-  const richTextItem = getStoredRichTextItem(key)
-
-  if (richTextItem?.html !== undefined) {
-    return hasVisibleHtmlContent(richTextItem.html)
-  }
-
-  if (richTextItem?.plainText !== undefined) {
-    return Boolean(String(richTextItem.plainText || '').trim())
-  }
-
-  if (editableFieldTemplateHtmlMap[key]) {
-    return hasVisibleHtmlContent(editableFieldTemplateHtmlMap[key])
-  }
-
-  return Boolean(String(fallbackText || '').trim())
-}
-
-function getFieldStoredHtml(key, fallbackText = '') {
-  const richTextItem = getStoredRichTextItem(key)
-
-  if (richTextItem?.html) {
-    return normalizeRichTextHtmlForStorage(richTextItem.html)
-  }
-
-  if (editableFieldTemplateHtmlMap[key]) {
-    return normalizeRichTextHtmlForStorage(editableFieldTemplateHtmlMap[key])
-  }
-
-  return `<p>${escapeHtml(String(fallbackText || ''))}</p>`
-}
-
-function getFieldRenderableHtml(key, fallbackText = '') {
-  const richTextItem = getStoredRichTextItem(key)
-
-  if (richTextItem?.html) {
-    return normalizeRichTextHtmlForStorage(richTextItem.html)
-  }
-
-  if (editableFieldTemplateHtmlMap[key]) {
-    return normalizeRichTextHtmlForStorage(editableFieldTemplateHtmlMap[key])
-  }
-
-  return `<p>${escapeHtml(String(fallbackText || ''))}</p>`
-}
-
-function normalizeRichTextHtmlForStorage(html = '') {
-  if (!html) {
-    return ''
-  }
-
-  const container = document.createElement('div')
-  container.innerHTML = html
-
-  container.querySelectorAll('.tableWrapper').forEach((wrapper) => {
-    wrapper.style.width = '100%'
-    wrapper.style.maxWidth = '100%'
-  })
-
-  container.querySelectorAll('table').forEach((table) => {
-    table.removeAttribute('width')
-    table.style.width = '100%'
-    table.style.minWidth = '100%'
-    table.style.maxWidth = '100%'
-    table.style.tableLayout = 'fixed'
-  })
-
-  container.querySelectorAll('col').forEach((col) => {
-    col.removeAttribute('width')
-    col.style.width = ''
-  })
-
-  container.querySelectorAll('td, th').forEach((cell) => {
-    cell.style.textAlign = cell.style.textAlign || 'center'
-    cell.style.verticalAlign = 'middle'
-  })
-
-  return container.innerHTML
-}
-
-function buildRenderableSegments(html, fallbackText = '') {
-  if (!html) {
-    return [{ type: 'text', text: String(fallbackText || '') }]
-  }
-
-  const container = document.createElement('div')
-  container.innerHTML = html
-  const segments = []
-
-  function walk(node) {
-    if (!node) {
-      return
-    }
-
-    if (node.nodeType === DOM_TEXT_NODE) {
-      const text = node.textContent || ''
-      if (text) {
-        segments.push({ type: 'text', text })
-      }
-      return
-    }
-
-    if (node.nodeType !== DOM_ELEMENT_NODE) {
-      return
-    }
-
-    const tagName = node.tagName?.toLowerCase?.() || ''
-
-    if (tagName === 'br') {
-      segments.push({ type: 'break' })
-      return
-    }
-
-    Array.from(node.childNodes).forEach((childNode) => walk(childNode))
-
-    if (['p', 'div', 'h1', 'h2', 'h3', 'li'].includes(tagName)) {
-      segments.push({ type: 'break' })
-    }
-  }
-
-  Array.from(container.childNodes).forEach((childNode) => walk(childNode))
-
-  while (segments.length && segments[segments.length - 1].type === 'break') {
-    segments.pop()
-  }
-
-  return segments.length ? segments : [{ type: 'text', text: String(fallbackText || '') }]
-}
-
-function getClosestParagraphElement(node) {
-  if (!node) {
-    return null
-  }
-
-  const parentElement = node.nodeType === DOM_ELEMENT_NODE ? node : node.parentElement
-  return parentElement?.closest?.('p') || null
-}
-
-function normalizeEditableText(text = '') {
-  return text.replace(/(\s|\u00a0|\u200b|\u200c|\u200d|\ufeff)/g, '')
-}
-
-function getRangeText(startNode, startOffset, endNode, endOffset) {
-  const range = document.createRange()
-  range.setStart(startNode, startOffset)
-  range.setEnd(endNode, endOffset)
-  return range.toString()
-}
-
-function getRangeFragment(startNode, startOffset, endNode, endOffset) {
-  const range = document.createRange()
-  range.setStart(startNode, startOffset)
-  range.setEnd(endNode, endOffset)
-  return range.cloneContents()
-}
-
-function isBlockBoundaryCharacter(char = '') {
-  return !char || ['\n', '\r', '\f'].includes(char)
-}
-
-function isBlockByTextBoundary(combinedText = '', rangeStart = 0, rangeEnd = 0) {
-  return isBlockBoundaryCharacter(combinedText[rangeStart - 1]) && isBlockBoundaryCharacter(combinedText[rangeEnd])
-}
-
-function isDomBlockBoundary(node) {
-  if (!node || node.nodeType !== DOM_ELEMENT_NODE) {
-    return false
-  }
-
-  const tagName = node.tagName?.toLowerCase?.() || ''
-
-  if (tagName === 'br') {
-    return true
-  }
-
-  const styleText = node.getAttribute('style') || ''
-  return /(?:page-)?break-(?:before|after)\s*:\s*(?:page|always)/i.test(styleText)
-}
-
-function getFragmentBoundaryText(fragment) {
-  const parts = []
-
-  function walk(node) {
-    if (!node) {
-      return
-    }
-
-    if (node.nodeType === DOM_TEXT_NODE) {
-      parts.push(node.textContent || '')
-      return
-    }
-
-    if (node.nodeType !== DOM_ELEMENT_NODE) {
-      return
-    }
-
-    if (isDomBlockBoundary(node)) {
-      parts.push('\n')
-      return
-    }
-
-    Array.from(node.childNodes).forEach((childNode) => walk(childNode))
-  }
-
-  Array.from(fragment.childNodes).forEach((childNode) => walk(childNode))
-  return parts.join('')
-}
-
-function isCleanBoundaryFragment(fragment, direction) {
-  const boundaryText = getFragmentBoundaryText(fragment)
-
-  if (!normalizeEditableText(boundaryText)) {
-    return true
-  }
-
-  const textParts = boundaryText.split(/[\n\r\f]/)
-
-  if (direction === 'before') {
-    return !normalizeEditableText(textParts[textParts.length - 1] || '')
-  }
-
-  return !normalizeEditableText(textParts[0] || '')
-}
-
-function isStandaloneParagraphPlaceholder(startPosition, endPosition, fullText = '', combinedText = '', rangeStart = 0, rangeEnd = 0) {
-  const { node: startNode, offset: startOffset } = startPosition
-  const { node: endNode, offset: endOffset } = endPosition
-  const startParagraph = getClosestParagraphElement(startNode)
-  const endParagraph = getClosestParagraphElement(endNode)
-
-  if (!startParagraph || !endParagraph) {
-    return isBlockByTextBoundary(combinedText, rangeStart, rangeEnd)
-  }
-
-  if (startParagraph !== endParagraph) {
-    return true
-  }
-
-  const paragraphStartText = getRangeText(startParagraph, 0, startNode, startOffset)
-  const paragraphEndOffset = startParagraph.childNodes.length
-  const paragraphEndText = getRangeText(endNode, endOffset, startParagraph, paragraphEndOffset)
-  const paragraphStartFragment = getRangeFragment(startParagraph, 0, startNode, startOffset)
-  const paragraphEndFragment = getRangeFragment(endNode, endOffset, startParagraph, paragraphEndOffset)
-  const markerText = normalizeEditableText(fullText)
-  const paragraphText = normalizeEditableText(startParagraph.textContent || '')
-  const hasOnlyWhitespaceAroundMarker =
-      !normalizeEditableText(paragraphStartText) && !normalizeEditableText(paragraphEndText)
-  const hasVisualBlockBoundary =
-      isCleanBoundaryFragment(paragraphStartFragment, 'before') &&
-      isCleanBoundaryFragment(paragraphEndFragment, 'after')
-
-  return hasOnlyWhitespaceAroundMarker || hasVisualBlockBoundary || paragraphText === markerText
-}
-
-function applySourceParagraphLayout(target, sourceParagraph) {
-  if (!sourceParagraph) {
-    return
-  }
-
-  const computedStyle = window.getComputedStyle(sourceParagraph)
-  const inheritedProperties = [
-    'textAlign',
-    'marginTop',
-    'marginBottom',
-    'paddingTop',
-    'paddingBottom',
-    'textIndent',
-    'lineHeight'
-  ]
-
-  inheritedProperties.forEach((property) => {
-    target.style[property] = computedStyle[property]
-  })
-}
-
-function escapeHtml(text) {
-  return text
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#39;')
-}
-
-function escapeXml(text = '') {
-  return String(text)
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-}
-
-function normalizeDocxColor(color = '') {
-  const trimmedColor = String(color || '').trim()
-
-  if (/^#[0-9a-f]{6}$/i.test(trimmedColor)) {
-    return trimmedColor.slice(1).toUpperCase()
-  }
-
-  const rgbMatch = trimmedColor.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)/i)
-
-  if (rgbMatch) {
-    return [rgbMatch[1], rgbMatch[2], rgbMatch[3]]
-        .map((value) => Number(value).toString(16).padStart(2, '0'))
-        .join('')
-        .toUpperCase()
-  }
-
-  return ''
-}
-
-function stripConflictingRunProperties(runProperties = '') {
-  return runProperties
-      .replace(/<w:b\b[^>]*\/>/g, '')
-      .replace(/<w:b\b[\s\S]*?<\/w:b>/g, '')
-      .replace(/<w:color\b[^>]*\/>/g, '')
-      .replace(/<w:color\b[\s\S]*?<\/w:color>/g, '')
-      .replace(/<w:highlight\b[^>]*\/>/g, '')
-      .replace(/<w:highlight\b[\s\S]*?<\/w:highlight>/g, '')
-      .replace(/<w:shd\b[^>]*\/>/g, '')
-      .replace(/<w:shd\b[\s\S]*?<\/w:shd>/g, '')
-}
-
-function stripRunFontProperties(runProperties = '') {
-  return runProperties
-      .replace(/<w:rFonts\b[^>]*\/>/g, '')
-      .replace(/<w:rFonts\b[\s\S]*?<\/w:rFonts>/g, '')
-}
-
-function stripRunSizeProperties(runProperties = '') {
-  return runProperties
-      .replace(/<w:sz\b[^>]*\/>/g, '')
-      .replace(/<w:sz\b[\s\S]*?<\/w:sz>/g, '')
-      .replace(/<w:szCs\b[^>]*\/>/g, '')
-      .replace(/<w:szCs\b[\s\S]*?<\/w:szCs>/g, '')
-}
-
-function buildDocxRunFontProperties(fontName = DOCX_TABLE_FONT_NAME) {
-  const escapedFontName = escapeXml(fontName)
-  return `<w:rFonts w:hint="eastAsia" w:ascii="${escapedFontName}" w:hAnsi="${escapedFontName}" w:eastAsia="${escapedFontName}" w:cs="${escapedFontName}"/>`
-}
-
-function buildDocxRunSizeProperties(fontSizeHalfPoints = DOCX_TABLE_BODY_FONT_SIZE_HALF_POINTS) {
-  return `<w:sz w:val="${fontSizeHalfPoints}"/><w:szCs w:val="${fontSizeHalfPoints}"/>`
-}
-
-function withDocxTableRunStyle(baseRunProperties = '', isHeader = false) {
-  const cleanRunProperties = stripRunSizeProperties(stripRunFontProperties(baseRunProperties))
-  const fontSize = isHeader
-      ? DOCX_TABLE_HEADER_FONT_SIZE_HALF_POINTS
-      : DOCX_TABLE_BODY_FONT_SIZE_HALF_POINTS
-
-  return `${cleanRunProperties}${buildDocxRunFontProperties()}${buildDocxRunSizeProperties(fontSize)}`
-}
-
-function buildDocxRunProperties(baseRunProperties = '', marks = {}) {
-  const properties = [stripConflictingRunProperties(baseRunProperties)]
-  const textColor = normalizeDocxColor(marks.color)
-  const backgroundColor = normalizeDocxColor(marks.backgroundColor)
-
-  if (marks.bold) {
-    properties.push('<w:b/>')
-  }
-
-  if (textColor) {
-    properties.push(`<w:color w:val="${textColor}"/>`)
-  }
-
-  if (backgroundColor) {
-    properties.push(`<w:shd w:val="clear" w:color="auto" w:fill="${backgroundColor}"/>`)
-  }
-
-  const content = properties.join('')
-  return content ? `<w:rPr>${content}</w:rPr>` : ''
-}
-
-function buildDocxTextRuns(text = '', marks = {}, baseRunProperties = '') {
-  const parts = String(text).split('\n')
-  const runProperties = buildDocxRunProperties(baseRunProperties, marks)
-  const runs = []
-
-  parts.forEach((part, index) => {
-    if (index > 0) {
-      runs.push('<w:r><w:br/></w:r>')
-    }
-
-    if (part) {
-      runs.push(`<w:r>${runProperties}<w:t xml:space="preserve">${escapeXml(part)}</w:t></w:r>`)
-    }
-  })
-
-  return runs.join('')
-}
-
-function buildDocxEmptyTextRun(baseRunProperties = '') {
-  return `<w:r>${buildDocxRunProperties(baseRunProperties, {})}<w:t xml:space="preserve"></w:t></w:r>`
-}
-
-function stripParagraphJustification(paragraphProperties = '') {
-  return paragraphProperties
-      .replace(/<w:jc\b[^>]*\/>/g, '')
-      .replace(/<w:jc\b[\s\S]*?<\/w:jc>/g, '')
-}
-
-function stripParagraphIndent(paragraphProperties = '') {
-  return paragraphProperties
-      .replace(/<w:ind\b[^>]*\/>/g, '')
-      .replace(/<w:ind\b[\s\S]*?<\/w:ind>/g, '')
-}
-
-function stripParagraphStyle(paragraphProperties = '') {
-  return paragraphProperties
-      .replace(/<w:pStyle\b[^>]*\/>/g, '')
-      .replace(/<w:pStyle\b[\s\S]*?<\/w:pStyle>/g, '')
-}
-
-function normalizeDocxAlign(align = '') {
-  const alignMap = {
-    left: 'left',
-    center: 'center',
-    right: 'right'
-  }
-
-  return alignMap[align] || 'left'
-}
-
-function buildDocxParagraphProperties(baseParagraphProperties = '', align = 'left', textIndentLevel = 0, styleId = '') {
-  const paragraphProperties = stripParagraphStyle(stripParagraphIndent(stripParagraphJustification(baseParagraphProperties)))
-  const level = Math.max(0, Number(textIndentLevel || 0))
-  const indentXml = level ? `<w:ind w:firstLine="${Math.round(level * 420)}"/>` : ''
-  const styleXml = styleId ? `<w:pStyle w:val="${escapeXml(styleId)}"/>` : ''
-  return `<w:pPr>${styleXml}${paragraphProperties}<w:jc w:val="${normalizeDocxAlign(align)}"/>${indentXml}</w:pPr>`
-}
-
-function getXmlText(xml = '') {
-  return [...xml.matchAll(/<w:t\b[^>]*>([\s\S]*?)<\/w:t>/g)]
-      .map((match) => decodeXmlText(match[1]))
-      .join('')
-}
-
-function getParagraphProperties(paragraphXml = '') {
-  return paragraphXml.match(/<w:pPr>([\s\S]*?)<\/w:pPr>/)?.[1] || ''
-}
-
-function getFirstRunProperties(paragraphXml = '') {
-  return paragraphXml.match(/<w:rPr>([\s\S]*?)<\/w:rPr>/)?.[1] || ''
-}
-
-function buildDocxParagraph(runs = '', align = 'left', baseParagraphProperties = '', textIndentLevel = 0, styleId = '') {
-  return `<w:p>${buildDocxParagraphProperties(baseParagraphProperties, align, textIndentLevel, styleId)}${runs || '<w:r><w:t xml:space="preserve"></w:t></w:r>'}</w:p>`
-}
-
-function getTableColumnCount(tableBlock = {}) {
-  return Math.max(
-      1,
-      ...(tableBlock.rows || []).map((row) => (row.cells || []).reduce((result, cell) => {
-        return result + Number(cell.colSpan || 1)
-      }, 0))
-  )
-}
-
-function normalizeTableRowsForDocx(tableBlock = {}) {
-  const columnCount = getTableColumnCount(tableBlock)
-  const activeRowSpans = []
-
-  return (tableBlock.rows || []).map((row) => {
-    const normalizedCells = []
-    let columnIndex = 0
-
-    function appendVerticalContinuation() {
-      const activeSpan = activeRowSpans[columnIndex]
-
-      if (!activeSpan?.remaining) {
-        return false
-      }
-
-      normalizedCells.push({
-        vMerge: 'continue',
-        colSpan: activeSpan.colSpan || 1,
-        blocks: []
-      })
-      activeSpan.remaining -= 1
-      columnIndex += activeSpan.colSpan || 1
-      return true
-    }
-
-    const rowCells = row.cells || []
-
-    rowCells.forEach((cell) => {
-      while (appendVerticalContinuation()) {
-        // Fill cells occupied by vertical merges from previous rows before placing the next real cell.
-      }
-
-      const colSpan = Number(cell.colSpan || 1)
-      const rowSpan = Number(cell.rowSpan || 1)
-
-      normalizedCells.push({
-        ...cell,
-        colSpan,
-        rowSpan,
-        vMerge: rowSpan > 1 ? 'restart' : ''
-      })
-
-      if (rowSpan > 1) {
-        activeRowSpans[columnIndex] = {
-          remaining: rowSpan - 1,
-          colSpan
-        }
-      }
-
-      columnIndex += colSpan
-    })
-
-    while (columnIndex < columnCount) {
-      if (!appendVerticalContinuation()) {
-        normalizedCells.push({
-          colSpan: 1,
-          blocks: []
-        })
-        columnIndex += 1
-      }
-    }
-
-    return {
-      cells: normalizedCells
-    }
-  })
-}
-
-function buildDocxTableCell(cell = {}, columnWidthPct = 0, baseParagraphProperties = '', baseRunProperties = '') {
-  const tableRunProperties = withDocxTableRunStyle(baseRunProperties, cell.header)
-  const paragraphBlocks = (cell.blocks || []).filter((block) => block.type === 'paragraph' || block.type === 'heading')
-  const cellXml = paragraphBlocks.length
-      ? paragraphBlocks.map((block) => {
-        const runs = (block.runs || []).map((run) => {
-          return buildDocxTextRuns(run.text || '', cell.header ? { ...(run.marks || {}), bold: true } : run.marks || {}, tableRunProperties)
-        }).join('')
-
-        return buildDocxParagraph(runs, block.align || 'center', baseParagraphProperties)
-      }).join('')
-      : buildDocxParagraph(buildDocxEmptyTextRun(tableRunProperties), 'center', baseParagraphProperties)
-
-  const gridSpan = Number(cell.colSpan || 1) > 1
-      ? `<w:gridSpan w:val="${Number(cell.colSpan || 1)}"/>`
-      : ''
-  const shading = cell.header
-      ? '<w:shd w:val="clear" w:color="auto" w:fill="BFBFBF"/>'
-      : ''
-  const verticalMerge = cell.vMerge
-      ? `<w:vMerge${cell.vMerge === 'restart' ? ' w:val="restart"' : ''}/>`
-      : ''
-
-  return `<w:tc><w:tcPr><w:tcW w:w="${columnWidthPct * Number(cell.colSpan || 1)}" w:type="pct"/>${gridSpan}${verticalMerge}${shading}<w:vAlign w:val="center"/><w:tcMar><w:top w:w="80" w:type="dxa"/><w:left w:w="80" w:type="dxa"/><w:bottom w:w="80" w:type="dxa"/><w:right w:w="80" w:type="dxa"/></w:tcMar></w:tcPr>${cellXml}</w:tc>`
-}
-
-function buildDocxTable(tableBlock = {}, baseParagraphProperties = '', baseRunProperties = '') {
-  const columnCount = getTableColumnCount(tableBlock)
-  const columnWidth = Math.max(1, Math.floor(DOCX_TABLE_WIDTH_DXA / columnCount))
-  const columnWidthPct = Math.max(1, Math.floor(DOCX_TABLE_WIDTH_PCT / columnCount))
-  const tableGrid = Array.from({ length: columnCount }, () => `<w:gridCol w:w="${columnWidth}"/>`).join('')
-  const rowsXml = normalizeTableRowsForDocx(tableBlock).map((row) => {
-    const cellsXml = (row.cells || []).map((cell) => {
-      return buildDocxTableCell(cell, columnWidthPct, baseParagraphProperties, baseRunProperties)
-    }).join('')
-
-    return `<w:tr>${cellsXml}</w:tr>`
-  }).join('')
-
-  return `<w:tbl><w:tblPr><w:tblW w:w="${DOCX_TABLE_WIDTH_PCT}" w:type="pct"/><w:jc w:val="center"/><w:tblLayout w:type="fixed"/><w:tblBorders><w:top w:val="single" w:sz="8" w:space="0" w:color="000000"/><w:left w:val="single" w:sz="8" w:space="0" w:color="000000"/><w:bottom w:val="single" w:sz="8" w:space="0" w:color="000000"/><w:right w:val="single" w:sz="8" w:space="0" w:color="000000"/><w:insideH w:val="single" w:sz="8" w:space="0" w:color="000000"/><w:insideV w:val="single" w:sz="8" w:space="0" w:color="000000"/></w:tblBorders></w:tblPr><w:tblGrid>${tableGrid}</w:tblGrid>${rowsXml}</w:tbl>`
-}
-
-function createInlineMarks(marks = []) {
-  return marks.reduce((result, mark) => {
-    if (mark.type === 'bold') {
-      result.bold = true
-    }
-
-    if (mark.type === 'textStyle' && mark.attrs?.color) {
-      result.color = mark.attrs.color
-    }
-
-    if (mark.type === 'highlight' && mark.attrs?.color) {
-      result.backgroundColor = mark.attrs.color
-    }
-
-    return result
-  }, {})
-}
-
-function getHtmlNodeTextAlign(node) {
-  return getHtmlNodeTextAlignWithDefault(node)
-}
-
-function getHtmlNodeTextIndentLevel(node) {
-  if (!node || node.nodeType !== DOM_ELEMENT_NODE) {
-    return 0
-  }
-
-  const indent = node.style?.textIndent || ''
-  const match = indent.match(/^([\d.]+)em$/)
-
-  if (!match) {
-    return 0
-  }
-
-  return Math.min(
-      EDITOR_MAX_INDENT_LEVEL,
-      Math.max(0, Math.round(Number(match[1]) / EDITOR_INDENT_STEP_EM))
-  )
-}
-
-function getHtmlNodeTextAlignWithDefault(node, defaultAlign = 'left') {
-  if (!node || node.nodeType !== DOM_ELEMENT_NODE) {
-    return defaultAlign
-  }
-
-  const inlineAlign = node.style?.textAlign || ''
-
-  if (['left', 'center', 'right'].includes(inlineAlign)) {
-    return inlineAlign
-  }
-
-  const alignAttr = node.getAttribute?.('align') || ''
-
-  if (['left', 'center', 'right'].includes(alignAttr)) {
-    return alignAttr
-  }
-
-  return defaultAlign
-}
-
-function getHtmlNodeMarks(node, inheritedMarks = {}) {
-  if (!node || node.nodeType !== DOM_ELEMENT_NODE) {
-    return inheritedMarks
-  }
-
-  const tagName = node.tagName?.toLowerCase?.() || ''
-  const nextMarks = { ...inheritedMarks }
-
-  if (tagName === 'strong' || tagName === 'b') {
-    nextMarks.bold = true
-  }
-
-  const textColor = node.style?.color ? normalizeDocxColor(node.style.color) : ''
-  const backgroundColor = node.style?.backgroundColor ? normalizeDocxColor(node.style.backgroundColor) : ''
-
-  if (textColor) {
-    nextMarks.color = `#${textColor}`
-  }
-
-  if (backgroundColor) {
-    nextMarks.backgroundColor = `#${backgroundColor}`
-  }
-
-  return nextMarks
-}
-
-function extractRunsFromHtmlNode(node, inheritedMarks = {}) {
-  if (!node) {
-    return []
-  }
-
-  if (node.nodeType === DOM_TEXT_NODE) {
-    return node.textContent
-        ? [{
-          text: node.textContent,
-          marks: inheritedMarks
-        }]
-        : []
-  }
-
-  if (node.nodeType !== DOM_ELEMENT_NODE) {
-    return []
-  }
-
-  const tagName = node.tagName?.toLowerCase?.() || ''
-  const nextMarks = getHtmlNodeMarks(node, inheritedMarks)
-
-  if (tagName === 'br') {
-    return [{
-      text: '\n',
-      marks: nextMarks
-    }]
-  }
-
-  return Array.from(node.childNodes).flatMap((childNode) => extractRunsFromHtmlNode(childNode, nextMarks))
-}
-
-function normalizeRuns(runs = []) {
-  return runs.reduce((result, run) => {
-    if (!run?.text) {
-      return result
-    }
-
-    const previousRun = result[result.length - 1]
-    const marksKey = JSON.stringify(run.marks || {})
-    const previousMarksKey = JSON.stringify(previousRun?.marks || {})
-
-    if (previousRun && marksKey === previousMarksKey) {
-      previousRun.text += run.text
-      return result
-    }
-
-    result.push({
-      text: run.text,
-      marks: run.marks || {}
-    })
-    return result
-  }, [])
-}
-
-function extractBlocksFromHtml(html = '') {
-  if (!html) {
-    return []
-  }
-
-  const container = document.createElement('div')
-  container.innerHTML = html
-
-  function extractBlockFromElement(element) {
-    const tagName = element.tagName?.toLowerCase?.() || ''
-
-    if (tagName === 'table') {
-      return {
-        type: 'table',
-        rows: Array.from(element.rows || []).map((row) => ({
-          cells: Array.from(row.cells || []).map((cell) => {
-            const childBlocks = Array.from(cell.childNodes).flatMap((childNode) => {
-              if (childNode.nodeType === DOM_TEXT_NODE) {
-                const text = childNode.textContent?.trim?.() || ''
-                return text
-                    ? [{
-                      type: 'paragraph',
-                      align: getHtmlNodeTextAlignWithDefault(cell, 'center'),
-                      textIndentLevel: 0,
-                      runs: [{ text, marks: {} }]
-                    }]
-                    : []
-              }
-
-              if (childNode.nodeType !== DOM_ELEMENT_NODE) {
-                return []
-              }
-
-              const childTagName = childNode.tagName?.toLowerCase?.() || ''
-
-              if (['p', 'div', 'h1', 'h2', 'h3'].includes(childTagName)) {
-                const childBlock = extractBlockFromElement(childNode)
-
-                if (childBlock && !childNode.style?.textAlign && !childNode.getAttribute?.('align')) {
-                  childBlock.align = getHtmlNodeTextAlignWithDefault(cell, 'center')
-                }
-
-                return childBlock ? [childBlock] : []
-              }
-
-              return []
-            })
-
-            return {
-              header: cell.tagName?.toLowerCase?.() === 'th',
-              colSpan: Number(cell.colSpan || 1),
-              rowSpan: Number(cell.rowSpan || 1),
-              blocks: childBlocks.length
-                  ? childBlocks
-                  : [{
-                    type: 'paragraph',
-                    align: getHtmlNodeTextAlignWithDefault(cell, 'center'),
-                    textIndentLevel: 0,
-                    runs: []
-                  }]
-            }
-          })
-        }))
-      }
-    }
-
-    if (!['p', 'div', 'h1', 'h2', 'h3'].includes(tagName)) {
-      return null
-    }
-
-    return {
-      type: tagName.startsWith('h') ? 'heading' : 'paragraph',
-      level: tagName.startsWith('h') ? Number(tagName.slice(1)) : null,
-      align: getHtmlNodeTextAlign(element),
-      textIndentLevel: getHtmlNodeTextIndentLevel(element),
-      runs: normalizeRuns(extractRunsFromHtmlNode(element))
-    }
-  }
-
-  const blocks = Array.from(container.childNodes).flatMap((node) => {
-    if (node.nodeType === DOM_TEXT_NODE) {
-      const text = node.textContent?.trim?.() || ''
-      return text
-          ? [{
-            type: 'paragraph',
-            align: 'left',
-            textIndentLevel: 0,
-            runs: [{ text, marks: {} }]
-          }]
-          : []
-    }
-
-    if (node.nodeType !== DOM_ELEMENT_NODE) {
-      return []
-    }
-
-    const tagName = node.tagName?.toLowerCase?.() || ''
-
-    if (!['p', 'div', 'h1', 'h2', 'h3', 'table'].includes(tagName)) {
-      return []
-    }
-
-    const block = extractBlockFromElement(node)
-    return block ? [block] : []
-  })
-
-  return blocks.filter((block) => {
-    if (block.type === 'table') {
-      return block.rows?.length
-    }
-
-    return block.runs?.some((run) => run.text)
-  })
-}
-
-function extractTextRuns(contentList = []) {
-  return contentList.reduce((result, item) => {
-    if (!item) {
-      return result
-    }
-
-    if (item.type === 'text') {
-      result.push({
-        text: item.text || '',
-        marks: createInlineMarks(item.marks)
-      })
-      return result
-    }
-
-    if (Array.isArray(item.content)) {
-      result.push(...extractTextRuns(item.content))
-    }
-
-    return result
-  }, [])
-}
-
-function convertRichTextNodeToBlock(node) {
-  if (!node) {
-    return null
-  }
-
-  if (node.type === 'paragraph' || node.type === 'heading') {
-    return {
-      type: node.type,
-      level: node.attrs?.level || null,
-      align: node.attrs?.textAlign || 'left',
-      textIndentLevel: Number(node.attrs?.textIndentLevel || 0),
-      runs: extractTextRuns(node.content || [])
-    }
-  }
-
-  return {
-    type: node.type,
-    runs: extractTextRuns(node.content || [])
-  }
-}
-
-function buildBackendRichTextValue(fieldKey, path, html, json, plainText) {
-  const normalizedHtml = normalizeRichTextHtmlForStorage(html)
-  const htmlBlocks = extractBlocksFromHtml(normalizedHtml)
-  const jsonBlocks = (json?.content || [])
-      .map((node) => convertRichTextNodeToBlock(node))
-      .filter(Boolean)
-
-  return {
-    version: '1.0',
-    fieldKey,
-    path,
-    docxRenderText: plainText,
-    plainText,
-    html: normalizedHtml,
-    json,
-    blocks: htmlBlocks.length ? htmlBlocks : jsonBlocks,
-    updatedAt: new Date().toISOString()
-  }
-}
-
-function getRichTextBlocks(richItem = {}) {
-  if (!richItem) {
-    return []
-  }
-
-  if (Array.isArray(richItem.blocks) && richItem.blocks.length) {
-    return richItem.blocks
-  }
-
-  return (richItem.json?.content || [])
-      .map((node) => convertRichTextNodeToBlock(node))
-      .filter(Boolean)
-}
-
-function buildDocxRichTextRuns(richItem = {}, baseRunProperties = '') {
-  const normalizedRichItem = richItem || {}
-  const blocks = getRichTextBlocks(richItem).filter((block) => block.type !== 'table')
-
-  if (!blocks.length && normalizedRichItem.plainText) {
-    return buildDocxTextRuns(normalizedRichItem.plainText, {}, baseRunProperties)
-  }
-
-  return blocks.map((block, blockIndex) => {
-    const blockRuns = (block.runs || []).map((run) => {
-      return buildDocxTextRuns(run.text || '', run.marks || {}, baseRunProperties)
-    }).join('')
-
-    return `${blockIndex > 0 ? '<w:r><w:br/></w:r>' : ''}${blockRuns}`
-  }).join('')
-}
-
-function formatHeadingNumber(level, counters) {
-  if (level === 1) {
-    const chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
-    return `${chineseNumbers[counters[0] - 1] || counters[0]}、`
-  }
-
-  if (level === 2) {
-    const chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
-    return `（${chineseNumbers[counters[1] - 1] || counters[1]}）`
-  }
-
-  return `（${counters[2]}）`
-}
-
-function stripExistingHeadingNumber(text = '') {
-  return String(text || '')
-      .replace(/^([一二三四五六七八九十]+、|（[一二三四五六七八九十\d]+）|\(\d+\)|\d+[.、])\s*/, '')
-}
-
-function applyAutoHeadingNumber(block, counters) {
-  if (block.type !== 'heading' || !block.level || block.__numberApplied) {
-    return block
-  }
-
-  const level = Math.min(3, Math.max(1, Number(block.level || 1)))
-  counters[level - 1] += 1
-
-  for (let index = level; index < counters.length; index += 1) {
-    counters[index] = 0
-  }
-
-  const runs = block.runs || []
-  const firstRun = runs.find((run) => run.text)
-  const prefix = formatHeadingNumber(level, counters)
-
-  if (firstRun) {
-    firstRun.text = `${prefix}${stripExistingHeadingNumber(firstRun.text)}`
-  } else {
-    runs.unshift({ text: prefix, marks: {} })
-  }
-
-  block.runs = runs
-  block.__numberApplied = true
-  return block
-}
-
-function getBlockParagraphStyleId(block, renderContext = {}) {
-  if (block.type === 'heading') {
-    return renderContext.headingStyleIds?.[block.level] || ''
-  }
-
-  return renderContext.bodyStyleId || ''
-}
-
-function buildDocxRichTextParagraphs(richItem = {}, baseParagraphProperties = '', baseRunProperties = '', beforeText = '', afterText = '', renderContext = {}) {
-  const normalizedRichItem = richItem || {}
-  const blocks = getRichTextBlocks(richItem)
-  const renderBlocks = blocks.length
-      ? blocks
-      : [{
-        type: 'paragraph',
-        align: 'left',
-        textIndentLevel: 0,
-        runs: [{ text: normalizedRichItem.plainText || '', marks: {} }]
-      }]
-
-  const normalizedBlocks = deepClone(renderBlocks)
-  const headingCounters = [...(renderContext.headingCounters || [0, 0, 0])]
-
-  if (beforeText) {
-    if (normalizedBlocks[0]?.type === 'paragraph' || normalizedBlocks[0]?.type === 'heading') {
-      normalizedBlocks[0].runs = [{ text: beforeText, marks: {} }, ...(normalizedBlocks[0].runs || [])]
-    } else {
-      normalizedBlocks.unshift({
-        type: 'paragraph',
-        align: 'left',
-        textIndentLevel: 0,
-        runs: [{ text: beforeText, marks: {} }]
-      })
-    }
-  }
-
-  if (afterText) {
-    const lastBlock = normalizedBlocks[normalizedBlocks.length - 1]
-
-    if (lastBlock?.type === 'paragraph' || lastBlock?.type === 'heading') {
-      lastBlock.runs = [...(lastBlock.runs || []), { text: afterText, marks: {} }]
-    } else {
-      normalizedBlocks.push({
-        type: 'paragraph',
-        align: 'left',
-        textIndentLevel: 0,
-        runs: [{ text: afterText, marks: {} }]
-      })
-    }
-  }
-
-  return normalizedBlocks.map((sourceBlock) => {
-    const block = applyAutoHeadingNumber(sourceBlock, headingCounters)
-
-    if (block.type === 'table') {
-      return buildDocxTable(block, baseParagraphProperties, baseRunProperties)
-    }
-
-    const runs = (block.runs || []).map((run) => {
-      return buildDocxTextRuns(run.text || '', run.marks || {}, baseRunProperties)
-    }).join('')
-
-    return buildDocxParagraph(
-        runs,
-        block.align || 'left',
-        baseParagraphProperties,
-        block.textIndentLevel || 0,
-        getBlockParagraphStyleId(block, renderContext)
-    )
-  }).join('')
-}
-
-function hasRichTextTableBlock(richItem = {}) {
-  return getRichTextBlocks(richItem).some((block) => block.type === 'table')
-}
-
-function getRichTextFirstTableHtml(richItem = {}) {
-  if (!richItem?.html) {
-    return ''
-  }
-
-  const container = document.createElement('div')
-  container.innerHTML = richItem.html
-  const table = container.querySelector('table')
-
-  return table?.outerHTML || ''
-}
-
-function replaceTokenParagraphAndFollowingTable(xmlText = '', token = '', richItem = {}, renderContext = {}) {
-  const escapedToken = escapeRegExp(token)
-  const tokenParagraphAndTableRegExp = new RegExp(
-      `<w:p\\b(?:(?!<w:p\\b)[\\s\\S])*?${escapedToken}(?:(?!<w:p\\b)[\\s\\S])*?<\\/w:p>\\s*<w:tbl\\b[\\s\\S]*?<\\/w:tbl>`,
-      'g'
-  )
-
-  return xmlText.replace(tokenParagraphAndTableRegExp, (matchedXml) => {
-    const baseParagraphProperties = getParagraphProperties(matchedXml)
-    const baseRunProperties = getFirstRunProperties(matchedXml)
-    return buildDocxRichTextParagraphs(
-        richItem,
-        baseParagraphProperties,
-        baseRunProperties,
-        '',
-        '',
-        renderContext
-    )
-  })
-}
-
-function getRichTextRenderContext(fieldKey, options = {}) {
-  const context = options.wordStyleContext || {}
-
-  return {
-    headingStyleIds: context.headingStyleIds || {},
-    bodyStyleId: context.bodyStyleId || '',
-    headingCounters: context.editableHeadingCounters?.[fieldKey] || [0, 0, 0]
-  }
-}
-
-function replaceRichTextTokensInXml(xmlText = '', richTextMap = {}, options = {}) {
-  return Object.keys(richTextMap).reduce((result, fieldKey) => {
-    const richItem = richTextMap[fieldKey]
-    const renderContext = getRichTextRenderContext(fieldKey, options)
-
-    if (!hasRichTextContent(richItem)) {
-      return result
-    }
-
-    const token = getRichTextToken(fieldKey)
-
-    if (!result.includes(token)) {
-      return result
-    }
-
-    if (hasRichTextTableBlock(richItem)) {
-      result = replaceTokenParagraphAndFollowingTable(result, token, richItem, renderContext)
-
-      if (!result.includes(token)) {
-        return result
-      }
-
-      result = result.replace(
-          /<w:tbl\b[\s\S]*?<\/w:tbl>/g,
-          (tableXml) => {
-            if (!tableXml.includes(token)) {
-              return tableXml
-            }
-
-            return buildDocxRichTextParagraphs(
-                richItem,
-                getParagraphProperties(tableXml),
-                getFirstRunProperties(tableXml),
-                '',
-                '',
-                renderContext
-            )
-          }
-      )
-    }
-
-    if (!result.includes(token)) {
-      return result
-    }
-
-    const paragraphPatchedXml = result.replace(
-        /<w:p\b[^>]*>[\s\S]*?<\/w:p>/g,
-        (paragraphXml) => {
-          if (!paragraphXml.includes(token)) {
-            return paragraphXml
-          }
-
-          const paragraphText = getXmlText(paragraphXml)
-
-          if (!paragraphText.includes(token)) {
-            return paragraphXml
-          }
-
-          const [beforeText, afterText] = paragraphText.split(token)
-          const blocks = getRichTextBlocks(richItem)
-          const isStandaloneToken = !normalizeEditableText(beforeText) && !normalizeEditableText(afterText)
-          const hasExplicitParagraphAlign = blocks.some((block) => ['center', 'right'].includes(block.align))
-
-          if (!isStandaloneToken && !hasExplicitParagraphAlign && blocks.length <= 1) {
-            return paragraphXml
-          }
-
-          return buildDocxRichTextParagraphs(
-              richItem,
-              getParagraphProperties(paragraphXml),
-              getFirstRunProperties(paragraphXml),
-              beforeText,
-              afterText,
-              renderContext
-          )
-        }
-    )
-
-    if (!paragraphPatchedXml.includes(token)) {
-      return paragraphPatchedXml
-    }
-
-    return paragraphPatchedXml.replace(
-        /<w:r\b[\s\S]*?<\/w:r>/g,
-        (runXml) => {
-          if (!runXml.includes(token)) {
-            return runXml
-          }
-
-          const runProperties = runXml.match(/<w:rPr>([\s\S]*?)<\/w:rPr>/)?.[1] || ''
-          const textMatches = [...runXml.matchAll(/<w:t\b[^>]*>([\s\S]*?)<\/w:t>/g)]
-          const runText = textMatches.map((match) => decodeXmlText(match[1])).join('')
-
-          if (!runText.includes(token)) {
-            return runXml
-          }
-
-          const [beforeText, afterText] = runText.split(token)
-          const beforeRuns = buildDocxTextRuns(beforeText, {}, runProperties)
-          const richRuns = buildDocxRichTextRuns(richItem, runProperties)
-          const afterRuns = buildDocxTextRuns(afterText, {}, runProperties)
-
-          return `${beforeRuns}${richRuns}${afterRuns}`
-        }
-    )
-  }, xmlText)
-}
-
-function applyRichTextTokensToDocx(zip, richTextMap = {}, options = {}) {
-  const documentXmlFile = zip.file('word/document.xml')
-
-  if (!documentXmlFile) {
-    return
-  }
-
-  const documentXml = documentXmlFile.asText()
-  const patchedXml = replaceRichTextTokensInXml(documentXml, richTextMap, options)
-
-  if (patchedXml !== documentXml) {
-    zip.file('word/document.xml', patchedXml)
-  }
-}
-
-function buildSavePayload() {
-  const richTextMap = editableRenderData.value.__editableRichTextMap || {}
-
-  return {
-    renderData: deepClone(editableRenderData.value),
-    richTextFields: deepClone(richTextMap),
-    editableFields: editableFieldKeys.value.map((fieldKey) => ({
-      fieldKey,
-      path: editableFieldPathMap.value[fieldKey] || '',
-      hasRichText: Boolean(richTextMap[fieldKey])
-    }))
-  }
-}
-
-function getRenderableFieldHtml(key, fallbackText = '') {
-  const richTextMap = editableRenderData.value.__editableRichTextMap || {}
-  const richTextItem = richTextMap[key]
-
-  return buildRenderableSegments(richTextItem?.html, fallbackText)
-}
-
-function cleanupEditorMarkers() {
-  if (!previewRef.value) {
-    return
-  }
-
-  const textNodes = getAllTextNodes(previewRef.value)
-
-  textNodes.forEach((node) => {
-    const text = node.textContent || ''
-
-    if (!text) {
-      return
-    }
-
-    const cleanedText = text
-        .replaceAll(`${LEGACY_EDITOR_MARKER_START}${EDITOR_MARKER_START}`, '')
-        .replaceAll(`${EDITOR_MARKER_END}${LEGACY_EDITOR_MARKER_END}`, '')
-        .replaceAll(`${LEGACY_EDITOR_MARKER_START} ${EDITOR_MARKER_START}`, '')
-        .replaceAll(`${EDITOR_MARKER_END} ${LEGACY_EDITOR_MARKER_END}`, '')
-        .replaceAll(EDITOR_MARKER_START, '')
-        .replaceAll(EDITOR_MARKER_END, '')
-        .replaceAll(LEGACY_EDITOR_MARKER_START, '')
-        .replaceAll(LEGACY_EDITOR_MARKER_END, '')
-
-    if (cleanedText !== text) {
-      node.textContent = cleanedText
-    }
-  })
-}
-
-function normalizeWaterLevelChartConfig(config = {}) {
-  const xAxisData = config.xAxisData || config.xAxis || config.categories || []
-  const yAxisData = config.yAxisData || config.yAxis || config.values || []
-  const upperLimit = Number(
-      config.upperLimit ?? config.reasonableUpperLimit ?? config.maxReasonableValue ?? 80
-  )
-  const lowerLimit = Number(
-      config.lowerLimit ?? config.reasonableLowerLimit ?? config.minReasonableValue ?? 30
-  )
-  const regionList = config.regionList || config.regions || config.areas || []
-
-  return {
-    title: config.title || '',
-    xAxisData,
-    yAxisData,
-    upperLimit,
-    lowerLimit,
-    regionList
-  }
-}
-
-function buildWaterLevelChartOption(config = {}, tagName = '') {
-  const chartConfig = normalizeWaterLevelChartConfig(config, tagName)
-  const total = chartConfig.xAxisData.length || 1
-  const plotWidth = WATER_LEVEL_CHART_CANVAS_WIDTH - WATER_LEVEL_CHART_GRID.left - WATER_LEVEL_CHART_GRID.right
-  const plotBottom = WATER_LEVEL_CHART_CANVAS_HEIGHT - WATER_LEVEL_CHART_GRID.bottom
-  const regionGraphics = []
-  let consumedCount = 0
-
-  chartConfig.regionList.forEach((region, index) => {
-    const itemCount = Number(region.count || region.length || 0)
-    if (!itemCount) {
-      return
-    }
-
-    const startRatio = consumedCount / total
-    const endRatio = (consumedCount + itemCount) / total
-    const centerRatio = (startRatio + endRatio) / 2
-    const centerX = WATER_LEVEL_CHART_GRID.left + plotWidth * centerRatio
-    const splitX = WATER_LEVEL_CHART_GRID.left + plotWidth * endRatio
-
-    regionGraphics.push({
-      type: 'group',
-      left: centerX - 32,
-      top: 18,
-      children: [
-        {
-          type: 'rect',
-          shape: {
-            x: 0,
-            y: 0,
-            width: 64,
-            height: 18
-          },
-          style: {
-            fill: '#efefef',
-            stroke: '#999',
-            lineWidth: 1
-          }
-        },
-        {
-          type: 'text',
-          style: {
-            x: 32,
-            y: 9,
-            text: region.name || `区域${index + 1}`,
-            fill: '#333',
-            fontSize: 12,
-            fontFamily: 'Microsoft YaHei',
-            textAlign: 'center',
-            textVerticalAlign: 'middle'
-          }
-        }
-      ]
-    })
-
-    if (index < chartConfig.regionList.length - 1) {
-      regionGraphics.push({
-        type: 'line',
-        shape: {
-          x1: splitX,
-          y1: 38,
-          x2: splitX,
-          y2: plotBottom
-        },
-        style: {
-          stroke: '#777',
-          lineWidth: 1
-        }
-      })
-    }
-
-    consumedCount += itemCount
-  })
-
-  return {
-    animation: false,
-    backgroundColor: '#fff',
-    title: {
-      text: chartConfig.title,
-      left: 'center',
-      top: 0,
-      textStyle: {
-        color: '#333',
-        fontSize: 14,
-        fontWeight: 400
-      }
-    },
-    legend: {
-      top: 58,
-      right: 18,
-      itemWidth: 18,
-      itemHeight: 2,
-      textStyle: {
-        color: '#666',
-        fontSize: 11
-      },
-      data: ['合理区间上限', '合理区间下限']
-    },
-    grid: {
-      ...WATER_LEVEL_CHART_GRID
-    },
-    tooltip: {
-      trigger: 'axis'
-    },
-    xAxis: {
-      type: 'category',
-      data: chartConfig.xAxisData,
-      axisTick: {
-        show: false
-      },
-      axisLine: {
-        lineStyle: {
-          color: '#888'
-        }
-      },
-      axisLabel: {
-        interval: 0,
-        rotate: 90,
-        color: '#333',
-        fontSize: 11
-      }
-    },
-    yAxis: {
-      type: 'value',
-      min: 0,
-      max: 100,
-      axisLine: {
-        show: true
-      },
-      splitLine: {
-        lineStyle: {
-          color: '#e8e8e8'
-        }
-      }
-    },
-    series: [
-      {
-        name: '水位值',
-        type: 'bar',
-        barWidth: 26,
-        data: chartConfig.yAxisData.map((value) => {
-          const numericValue = Number(value)
-          let color = '#86c5e3'
-
-          if (numericValue >= chartConfig.upperLimit) {
-            color = '#ff2a23'
-          } else if (numericValue >= chartConfig.upperLimit * 0.85) {
-            color = '#ffef1f'
-          }
-
-          return {
-            value: numericValue,
-            itemStyle: {
-              color
-            }
-          }
-        }),
-        label: {
-          show: true,
-          position: 'top',
-          color: '#333',
-          fontSize: 11,
-          formatter: ({ value }) => Number(value).toFixed(2)
-        },
-        markLine: {
-          silent: true,
-          symbol: 'none',
-          lineStyle: {
-            width: 1
-          },
-          data: [
-            {
-              name: '合理区间上限',
-              yAxis: chartConfig.upperLimit,
-              lineStyle: {
-                color: '#ff6b6b',
-                type: 'dashed'
-              }
-            },
-            {
-              name: '合理区间下限',
-              yAxis: chartConfig.lowerLimit,
-              lineStyle: {
-                color: '#77c48b',
-                type: 'dashed'
-              }
-            }
-          ]
-        }
-      }
-    ],
-    graphic: regionGraphics
-  }
-}
-
-async function renderChartToImageBuffer(config = {}, tagName = '') {
-  const chartDom = document.createElement('div')
-  chartDom.style.cssText = `position:fixed;left:-10000px;top:-10000px;width:${WATER_LEVEL_CHART_CANVAS_WIDTH}px;height:${WATER_LEVEL_CHART_CANVAS_HEIGHT}px;background:#fff;`
-  document.body.appendChild(chartDom)
-
-  try {
-    const chart = echarts.init(chartDom, null, {
-      renderer: 'canvas',
-      width: WATER_LEVEL_CHART_CANVAS_WIDTH,
-      height: WATER_LEVEL_CHART_CANVAS_HEIGHT
-    })
-    chart.setOption(buildWaterLevelChartOption(config, tagName))
-    const dataUrl = chart.getDataURL({
-      type: 'png',
-      pixelRatio: 2,
-      backgroundColor: '#fff'
-    })
-    chart.dispose()
-    const response = await fetch(dataUrl)
-    return response.arrayBuffer()
-  } finally {
-    chartDom.remove()
-  }
-}
-
-async function loadTemplate() {
-  const templateUrl = props.templateUrl || `/${encodeURIComponent(props.templateFileName || DEFAULT_TEMPLATE_FILE_NAME)}`
-  const response = await fetch(templateUrl)
-
-  if (!response.ok) {
-    throw new Error(`模板加载失败: ${response.status}`)
-  }
-
-  return response.arrayBuffer()
-}
-
-function stripEditorMarkersFromXml(xmlText = '') {
-  return xmlText
-      .replaceAll(EDITOR_MARKER_START, '')
-      .replaceAll(EDITOR_MARKER_END, '')
-}
-
-function createTemplateZip(templateBuffer, options = {}) {
-  const { stripEditorMarkers = false } = options
-  const zip = new PizZip(templateBuffer)
-  const documentXml = zip.file('word/document.xml')?.asText?.() || ''
-  let patchedXml = WATER_LEVEL_CHART_TAGS.reduce((result, key) => {
-    return result.replaceAll(`{${key}}`, `{%${key}}`)
-  }, documentXml)
-
-  if (stripEditorMarkers) {
-    patchedXml = stripEditorMarkersFromXml(patchedXml)
-  }
-
-  if (patchedXml !== documentXml) {
-    zip.file('word/document.xml', patchedXml)
-  }
-
-  return {
-    zip,
-    documentXml: patchedXml
-  }
-}
-
-async function createRenderedDocxBlob(options = {}) {
-  const { stripEditorMarkers = true, applyRichText = true } = options
-  const templateBuffer = await loadTemplate()
-  const { zip: templateContextZip, documentXml: templateContextXml } = createTemplateZip(templateBuffer, {
-    stripEditorMarkers: false
-  })
-  const { zip } = createTemplateZip(templateBuffer, { stripEditorMarkers })
-  const currentWordStyleContext = extractWordStyleContext(templateContextZip, templateContextXml)
-  const imageModule = new ImageModule({
-    centered: true,
-    fileType: 'docx',
-    getImage(tagValue, tagName) {
-      if (getChartTagNames()[tagName]) {
-        return renderChartToImageBuffer(tagValue, tagName)
-      }
-      return tagValue
-    },
-    getSize(img, tagValue, tagName) {
-      if (getChartTagNames()[tagName]) {
-        return [WATER_LEVEL_CHART_DOCX_WIDTH, WATER_LEVEL_CHART_DOCX_HEIGHT]
-      }
-      return [120, 120]
-    }
-  })
-  const doc = new Docxtemplater(zip, {
-    modules: [imageModule],
-    paragraphLoop: true,
-    linebreaks: true
-  })
-  const renderData = buildTemplateDataForRender({
-    useRichTextTokens: applyRichText,
-    useRichTextPlainText: applyRichText
-  })
-
-  if (typeof doc.resolveData === 'function') {
-    await doc.resolveData(renderData)
-  } else if (typeof doc.setData === 'function') {
-    doc.setData(renderData)
-  }
-
-  doc.render()
-  if (applyRichText) {
-    applyRichTextTokensToDocx(doc.getZip(), editableRenderData.value.__editableRichTextMap || {}, {
-      wordStyleContext: currentWordStyleContext
-    })
-  }
-
-  return doc.getZip().generate({
-    type: 'blob',
-    mimeType: DOCX_MIME_TYPE
-  })
-}
-
-function downloadBlob(blob, fileName) {
-  const downloadUrl = URL.createObjectURL(blob)
-  const anchor = document.createElement('a')
-  anchor.href = downloadUrl
-  anchor.download = fileName
-  document.body.appendChild(anchor)
-  anchor.click()
-  document.body.removeChild(anchor)
-  URL.revokeObjectURL(downloadUrl)
-}
-
-function getAllTextNodes(container) {
-  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT)
-  const textNodes = []
-
-  while (walker.nextNode()) {
-    const currentNode = walker.currentNode
-    textNodes.push(currentNode)
-  }
-
-  return textNodes
-}
-
-function getNodePositionByOffset(textNodes, absoluteOffset, bias = 'end') {
-  let currentOffset = 0
-
-  for (const node of textNodes) {
-    const textLength = (node.textContent || '').length
-    const nextOffset = currentOffset + textLength
-
-    const isTargetNode = bias === 'start'
-        ? absoluteOffset < nextOffset
-        : absoluteOffset <= nextOffset
-
-    if (isTargetNode) {
-      return {
-        node,
-        offset: Math.max(0, absoluteOffset - currentOffset)
-      }
-    }
-
-    currentOffset = nextOffset
-  }
-
-  const lastNode = textNodes[textNodes.length - 1]
-
-  return {
-    node: lastNode,
-    offset: (lastNode?.textContent || '').length
-  }
-}
-
-function bindEditableAnchorClick(wrapper, fieldKey) {
-  const onClick = () => openFieldEditor(fieldKey)
-  wrapper.addEventListener('click', onClick)
-
-  editableDomCleanupList.push(() => {
-    wrapper.removeEventListener('click', onClick)
-  })
-}
-
-function createInlineEditableAnchor(fieldKey, fallbackText = '') {
-  const wrapper = document.createElement('span')
-  wrapper.className = 'editable-field-anchor'
-  wrapper.dataset.fieldKey = fieldKey
-  const hasContent = hasEditableDisplayContent(fieldKey, fallbackText)
-
-  if (!hasContent) {
-    wrapper.classList.add('is-placeholder')
-    wrapper.textContent = EDITABLE_EMPTY_PLACEHOLDER
-    bindEditableAnchorClick(wrapper, fieldKey)
-    return wrapper
-  }
-
-  const segments = getRenderableFieldHtml(fieldKey, fallbackText)
-
-  segments.forEach((segment) => {
-    if (segment.type === 'break') {
-      wrapper.appendChild(document.createElement('br'))
-      return
-    }
-
-    wrapper.appendChild(document.createTextNode(segment.text || ''))
-  })
-
-  bindEditableAnchorClick(wrapper, fieldKey)
-  return wrapper
-}
-
-function createBlockEditableAnchor(fieldKey, fallbackText = '', sourceParagraph = null) {
-  const wrapper = document.createElement('div')
-  wrapper.className = 'editable-field-block'
-  wrapper.dataset.fieldKey = fieldKey
-  const hasContent = hasEditableDisplayContent(fieldKey, fallbackText)
-
-  if (hasContent) {
-    wrapper.innerHTML = getFieldRenderableHtml(fieldKey, fallbackText)
-  } else {
-    wrapper.classList.add('is-placeholder')
-    wrapper.textContent = EDITABLE_EMPTY_PLACEHOLDER
-  }
-
-  if (wrapper.querySelector('table')) {
-    wrapper.classList.add('is-table-field')
-  }
-  applySourceParagraphLayout(wrapper, sourceParagraph)
-  bindEditableAnchorClick(wrapper, fieldKey)
-  return wrapper
-}
-
-function stripEditorMarkersFromElement(element) {
-  if (!element) {
-    return
-  }
-
-  getAllTextNodes(element).forEach((node) => {
-    const text = node.textContent || ''
-    const cleanedText = text
-        .replaceAll(`${LEGACY_EDITOR_MARKER_START}${EDITOR_MARKER_START}`, '')
-        .replaceAll(`${EDITOR_MARKER_END}${LEGACY_EDITOR_MARKER_END}`, '')
-        .replaceAll(`${LEGACY_EDITOR_MARKER_START} ${EDITOR_MARKER_START}`, '')
-        .replaceAll(`${EDITOR_MARKER_END} ${LEGACY_EDITOR_MARKER_END}`, '')
-        .replaceAll(EDITOR_MARKER_START, '')
-        .replaceAll(EDITOR_MARKER_END, '')
-        .replaceAll(LEGACY_EDITOR_MARKER_START, '')
-        .replaceAll(LEGACY_EDITOR_MARKER_END, '')
-
-    if (cleanedText !== text) {
-      node.textContent = cleanedText
-    }
-  })
-}
-
-function getCleanOuterHtml(element) {
-  if (!element) {
-    return ''
-  }
-
-  const clonedElement = element.cloneNode(true)
-  stripEditorMarkersFromElement(clonedElement)
-  return clonedElement.outerHTML || ''
-}
-
-function getSharedClosestTable(startNode, endNode) {
-  const startElement = startNode?.nodeType === DOM_ELEMENT_NODE ? startNode : startNode?.parentElement
-  const endElement = endNode?.nodeType === DOM_ELEMENT_NODE ? endNode : endNode?.parentElement
-  const startTable = startElement?.closest?.('table') || null
-  const endTable = endElement?.closest?.('table') || null
-
-  return startTable && startTable === endTable ? startTable : null
-}
-
-function getRangeContainedTableHtml(startPosition, endPosition) {
-  if (!startPosition.node || !endPosition.node) {
-    return ''
-  }
-
-  const range = document.createRange()
-  range.setStart(startPosition.node, startPosition.offset)
-  range.setEnd(endPosition.node, endPosition.offset)
-
-  const fragment = range.cloneContents()
-  const table = fragment.querySelector?.('table')
-
-  return table ? getCleanOuterHtml(table) : ''
-}
-
-function replaceEditableParagraphRange(startNode, endNode, replacement) {
-  const startParagraph = getClosestParagraphElement(startNode)
-  const endParagraph = getClosestParagraphElement(endNode)
-
-  if (!startParagraph || !endParagraph) {
-    return false
-  }
-
-  if (startParagraph === endParagraph) {
-    startParagraph.replaceWith(replacement)
-    return true
-  }
-
-  const range = document.createRange()
-  range.setStartBefore(startParagraph)
-  range.setEndAfter(endParagraph)
-  range.deleteContents()
-  range.insertNode(replacement)
-  return true
-}
-
-function getDocxPreviewClassName(styleId = '') {
-  return `docx_${String(styleId || '').replace(/[ .]+/g, '-').replace(/[&]+/g, 'and').toLowerCase()}`
-}
-
-function extractHeadingStyleLevelMap(zip) {
-  const stylesXml = zip.file('word/styles.xml')?.asText?.() || ''
-  const result = {}
-
-  for (const match of stylesXml.matchAll(/<w:style\b[\s\S]*?<\/w:style>/g)) {
-    const styleXml = match[0]
-    const type = styleXml.match(/w:type="([^"]+)"/)?.[1] || ''
-
-    if (type !== 'paragraph') {
-      continue
-    }
-
-    const styleId = styleXml.match(/w:styleId="([^"]+)"/)?.[1] || ''
-    const outlineLevel = styleXml.match(/<w:outlineLvl w:val="([^"]+)"/)?.[1]
-
-    if (!styleId || outlineLevel === undefined) {
-      continue
-    }
-
-    const level = Number(outlineLevel) + 1
-
-    if (level >= 1 && level <= 3) {
-      result[getDocxPreviewClassName(styleId)] = level
-    }
-  }
-
-  return result
-}
-
-function extractHeadingStyleLevelById(zip) {
-  const stylesXml = zip.file('word/styles.xml')?.asText?.() || ''
-  const result = {}
-
-  for (const match of stylesXml.matchAll(/<w:style\b[\s\S]*?<\/w:style>/g)) {
-    const styleXml = match[0]
-    const type = styleXml.match(/w:type="([^"]+)"/)?.[1] || ''
-
-    if (type !== 'paragraph') {
-      continue
-    }
-
-    const styleId = styleXml.match(/w:styleId="([^"]+)"/)?.[1] || ''
-    const outlineLevel = styleXml.match(/<w:outlineLvl w:val="([^"]+)"/)?.[1]
-
-    if (!styleId || outlineLevel === undefined) {
-      continue
-    }
-
-    const level = Number(outlineLevel) + 1
-
-    if (level >= 1 && level <= 3) {
-      result[styleId] = level
-    }
-  }
-
-  return result
-}
-
-function extractWordStyleContext(zip, documentXml = '') {
-  const stylesXml = zip.file('word/styles.xml')?.asText?.() || ''
-  const headingStyleIds = {}
-  let bodyStyleId = ''
-
-  for (const match of stylesXml.matchAll(/<w:style\b[\s\S]*?<\/w:style>/g)) {
-    const styleXml = match[0]
-    const type = styleXml.match(/w:type="([^"]+)"/)?.[1] || ''
-
-    if (type !== 'paragraph') {
-      continue
-    }
-
-    const styleId = styleXml.match(/w:styleId="([^"]+)"/)?.[1] || ''
-    const styleName = styleXml.match(/<w:name w:val="([^"]+)"/)?.[1] || ''
-    const outlineLevel = styleXml.match(/<w:outlineLvl w:val="([^"]+)"/)?.[1]
-
-    if (styleId && outlineLevel !== undefined) {
-      const level = Number(outlineLevel) + 1
-
-      if (level >= 1 && level <= 3) {
-        headingStyleIds[level] = styleId
-      }
-    }
-
-    if (!bodyStyleId && /^normal$/i.test(styleName)) {
-      bodyStyleId = styleId
-    }
-  }
-
-  const headingStyleLevelById = extractHeadingStyleLevelById(zip)
-  const editableHeadingCounters = {}
-  const counters = [0, 0, 0]
-
-  for (const match of documentXml.matchAll(/<w:p\b[\s\S]*?<\/w:p>/g)) {
-    const paragraphXml = match[0]
-    const styleId = paragraphXml.match(/<w:pStyle w:val="([^"]+)"/)?.[1] || ''
-    const level = headingStyleLevelById[styleId]
-    const paragraphText = getParagraphText(paragraphXml)
-
-    if (paragraphText.includes(EDITOR_MARKER_START)) {
-      const descriptorList = extractEditableMarkerDescriptors(paragraphXml)
-
-      descriptorList.forEach((descriptor) => {
-        if (descriptor.isValid && descriptor.fieldKey && !editableHeadingCounters[descriptor.fieldKey]) {
-          editableHeadingCounters[descriptor.fieldKey] = [...counters]
-        }
-      })
-    }
-
-    if (level >= 1 && level <= 3) {
-      counters[level - 1] += 1
-
-      for (let index = level; index < counters.length; index += 1) {
-        counters[index] = 0
-      }
-    }
-  }
-
-  return {
-    headingStyleIds,
-    bodyStyleId,
-    editableHeadingCounters
-  }
-}
-
-function normalizeOutlineText(text = '') {
-  return String(text || '').replace(/\s+/g, '')
-}
-
-function getParagraphText(paragraphXml = '') {
-  return [...paragraphXml.matchAll(/<w:t[^>]*>([\s\S]*?)<\/w:t>/g)]
-      .map((match) => decodeXmlText(match[1]))
-      .join('')
-      .trim()
-      .replace(/\s+/g, ' ')
-}
-
-function extractDocumentHeadingList(zip, documentXml = '') {
-  const styleLevelMap = extractHeadingStyleLevelById(zip)
-  const result = []
-
-  for (const match of documentXml.matchAll(/<w:p\b[\s\S]*?<\/w:p>/g)) {
-    const paragraphXml = match[0]
-    const styleId = paragraphXml.match(/<w:pStyle w:val="([^"]+)"/)?.[1] || ''
-    const level = styleLevelMap[styleId]
-
-    if (!level) {
-      continue
-    }
-
-    const text = getParagraphText(paragraphXml)
-
-    if (!text || text.includes(EDITOR_MARKER_START) || text.includes(EDITOR_MARKER_END)) {
-      continue
-    }
-
-    result.push({
-      level,
-      text,
-      normalizedText: normalizeOutlineText(text)
-    })
-  }
-
-  return result
-}
-
-function getOutlineLevel(element) {
-  if (!element) {
-    return 0
-  }
-
-  for (const className of Array.from(element.classList || [])) {
-    const level = headingStyleLevelMap.value[className]
-
-    if (level >= 1 && level <= 3) {
-      return level
-    }
-  }
-
-  const tagName = element.tagName?.toLowerCase?.() || ''
-
-  if (/^h[1-3]$/.test(tagName)) {
-    return Number(tagName.slice(1))
-  }
-
-  return 0
-}
-
-function isVisibleOutlineCandidate(element) {
-  const style = window.getComputedStyle(element)
-  const rect = element.getBoundingClientRect()
-  return style.display !== 'none' && style.visibility !== 'hidden' && rect.width > 0 && rect.height > 0
-}
-
-function getCandidateNormalizedText(element) {
-  return normalizeOutlineText(element?.textContent || '')
-}
-
-function findHeadingElement(heading, candidates, searchStartIndex = 0) {
-  const headingText = heading.normalizedText
-
-  if (!headingText) {
-    return { element: null, index: searchStartIndex }
-  }
-
-  const exactMatchedIndex = candidates.findIndex((element, index) => {
-    return index >= searchStartIndex && getCandidateNormalizedText(element) === headingText
-  })
-
-  if (exactMatchedIndex >= 0) {
-    return {
-      element: candidates[exactMatchedIndex],
-      index: exactMatchedIndex
-    }
-  }
-
-  const containingMatches = candidates
-      .map((element, index) => ({
-        element,
-        index,
-        text: getCandidateNormalizedText(element)
-      }))
-      .filter((item) => {
-        return item.index >= searchStartIndex
-            && item.text.includes(headingText)
-            && item.text.length <= headingText.length + 12
-      })
-      .sort((first, second) => {
-        return first.text.length - second.text.length || first.index - second.index
-      })
-
-  if (containingMatches.length) {
-    return {
-      element: containingMatches[0].element,
-      index: containingMatches[0].index
-    }
-  }
-
-  const looseMatches = candidates
-      .map((element, index) => ({
-        element,
-        index,
-        text: getCandidateNormalizedText(element)
-      }))
-      .filter((item) => {
-        return item.index >= searchStartIndex && item.text.includes(headingText)
-      })
-      .sort((first, second) => {
-        return first.text.length - second.text.length || first.index - second.index
-      })
-
-  if (looseMatches.length) {
-    return {
-      element: looseMatches[0].element,
-      index: looseMatches[0].index
-    }
-  }
-
-  return { element: null, index: searchStartIndex }
-}
-
-function getOutlineCandidateElements() {
-  const root = previewRef.value?.querySelector('.docx') || previewRef.value
-
-  if (!root) {
-    return []
-  }
-
-  const candidates = Array.from(root.querySelectorAll('h1, h2, h3, p, div, span'))
-      .filter((element) => {
-        if (element === root || element.closest('table') || !isVisibleOutlineCandidate(element)) {
-          return false
-        }
-
-        const text = getCandidateNormalizedText(element)
-        return text.length > 0 && text.length <= 120
-      })
-
-  return candidates.filter((element) => {
-    const text = getCandidateNormalizedText(element)
-    const childWithSameText = Array.from(element.children || []).some((child) => {
-      return candidates.includes(child) && getCandidateNormalizedText(child) === text
-    })
-
-    return !childWithSameText
-  })
-}
-
-function buildDocumentOutline() {
-  if (!previewRef.value) {
-    documentOutline.value = []
-    return
-  }
-
-  const candidates = getOutlineCandidateElements()
-  const seenTexts = new Set()
-  const outlineList = []
-  const templateHeadings = documentHeadingList.value || []
-
-  if (templateHeadings.length) {
-    let searchStartIndex = 0
-
-    templateHeadings.forEach((heading) => {
-      const seenKey = `${heading.level}-${heading.normalizedText}`
-
-      if (seenTexts.has(seenKey)) {
-        return
-      }
-
-      const { element, index } = findHeadingElement(heading, candidates, searchStartIndex)
-
-      if (element) {
-        searchStartIndex = index + 1
-      }
-
-      seenTexts.add(seenKey)
-      const id = `docx-outline-${outlineList.length + 1}`
-
-      if (element) {
-        element.dataset.outlineId = id
-      }
-
-      outlineList.push({
-        id,
-        level: heading.level,
-        text: heading.text,
-        element
-      })
-    })
-
-    documentOutline.value = outlineList
-    activeOutlineId.value = outlineList[0]?.id || ''
-    updateActiveOutlineByScroll()
-    return
-  }
-
-  candidates.forEach((element) => {
-    const text = (element.textContent || '').trim().replace(/\s+/g, ' ')
-
-    if (!text || text.length > 80 || text.includes(EDITOR_MARKER_START) || text.includes(EDITOR_MARKER_END)) {
-      return
-    }
-
-    const level = getOutlineLevel(element)
-
-    if (!level) {
-      return
-    }
-
-    const seenKey = `${level}-${text}`
-
-    if (seenTexts.has(seenKey)) {
-      return
-    }
-
-    seenTexts.add(seenKey)
-    const id = `docx-outline-${outlineList.length + 1}`
-    element.dataset.outlineId = id
-    outlineList.push({
-      id,
-      level,
-      text,
-      element
-    })
-  })
-
-  documentOutline.value = outlineList
-  activeOutlineId.value = outlineList[0]?.id || ''
-  updateActiveOutlineByScroll()
-}
-
-function getDocumentScrollContainer() {
-  return docxScrollRef.value || previewRef.value?.parentElement || null
-}
-
-function resolveOutlineElement(item) {
-  if (!item || !previewRef.value) {
-    return null
-  }
-
-  if (item.element?.isConnected) {
-    return item.element
-  }
-
-  const elementById = previewRef.value.querySelector(`[data-outline-id="${item.id}"]`)
-
-  if (elementById) {
-    item.element = elementById
-    return elementById
-  }
-
-  const candidates = getOutlineCandidateElements()
-  const matched = findHeadingElement({
-    normalizedText: normalizeOutlineText(item.text)
-  }, candidates, 0).element
-
-  if (matched) {
-    matched.dataset.outlineId = item.id
-    item.element = matched
-  }
-
-  return matched
-}
-
-function getElementTopInScrollContainer(element, container) {
-  const elementRect = element.getBoundingClientRect()
-  const containerRect = container.getBoundingClientRect()
-  return elementRect.top - containerRect.top + container.scrollTop
-}
-
-function scrollToOutlineItem(item) {
-  const container = getDocumentScrollContainer()
-  const element = resolveOutlineElement(item)
-
-  if (!element || !container) {
-    return
-  }
-
-  activeOutlineId.value = item.id
-  container.scrollTo({
-    top: Math.max(getElementTopInScrollContainer(element, container) - 24, 0),
-    behavior: 'smooth'
-  })
-}
-
-function updateActiveOutlineByScroll() {
-  const container = getDocumentScrollContainer()
-
-  if (!container || !documentOutline.value.length) {
-    return
-  }
-
-  const containerRect = container.getBoundingClientRect()
-  const anchorTop = containerRect.top + 96
-  let activeItem = null
-  let firstBelowItem = null
-
-  documentOutline.value.forEach((item) => {
-    const element = resolveOutlineElement(item)
-
-    if (!element) {
-      return
-    }
-
-    const rect = element.getBoundingClientRect()
-
-    if (rect.top <= anchorTop) {
-      activeItem = item
-      return
-    }
-
-    if (!firstBelowItem) {
-      firstBelowItem = item
-    }
-  })
-
-  const nextActiveId = activeItem?.id || firstBelowItem?.id || documentOutline.value[0]?.id || ''
-
-  if (nextActiveId && activeOutlineId.value !== nextActiveId) {
-    activeOutlineId.value = nextActiveId
-  }
-}
-
-function handleDocumentScroll() {
-  if (outlineScrollRaf) {
-    cancelAnimationFrame(outlineScrollRaf)
-  }
-
-  outlineScrollRaf = requestAnimationFrame(() => {
-    outlineScrollRaf = 0
-    updateActiveOutlineByScroll()
-  })
-}
-
-function decorateEditableRegions() {
-  if (props.renderType !== 'edit' || !previewRef.value || !editableMarkerDescriptors.value.length) {
-    return
-  }
-
-  clearEditableDecorations()
-
-  const textNodes = getAllTextNodes(previewRef.value)
-  const combinedText = textNodes.map((node) => node.textContent || '').join('')
-  const markerPairs = [...combinedText.matchAll(getRenderedEditableMarkerRegExp())]
-      .map((match, index) => ({
-        match,
-        descriptor: editableMarkerDescriptors.value[index]
-      }))
-      .filter((item) => item.descriptor?.isValid && item.descriptor?.fieldKey)
-  const replacedTables = new WeakSet()
-
-  for (let index = markerPairs.length - 1; index >= 0; index -= 1) {
-    const { match, descriptor } = markerPairs[index]
-    const fullText = match[0] || ''
-    const fieldKey = descriptor.fieldKey
-
-    if (!fieldKey) {
-      continue
-    }
-
-    const rangeStart = match.index || 0
-    const rangeEnd = rangeStart + fullText.length
-    const fallbackText = (match[1] || '').trim()
-
-    const startPosition = getNodePositionByOffset(textNodes, rangeStart, 'start')
-    const endPosition = getNodePositionByOffset(textNodes, rangeEnd, 'end')
-
-    if (!startPosition.node || !endPosition.node) {
-      continue
-    }
-
-    if (!startPosition.node.isConnected || !endPosition.node.isConnected) {
-      continue
-    }
-
-    const storedRichItem = getStoredRichTextItem(fieldKey)
-    const storedTableHtml = hasRichTextTableBlock(storedRichItem)
-        ? getRichTextFirstTableHtml(storedRichItem)
-        : ''
-
-    if (storedTableHtml) {
-      editableFieldTemplateHtmlMap[fieldKey] = storedTableHtml
-      const range = document.createRange()
-      range.setStart(startPosition.node, startPosition.offset)
-      range.setEnd(endPosition.node, endPosition.offset)
-      range.deleteContents()
-      range.insertNode(createBlockEditableAnchor(fieldKey, fallbackText, getClosestParagraphElement(startPosition.node)))
-      continue
-    }
-
-    const containedTableHtml = getRangeContainedTableHtml(startPosition, endPosition)
-
-    if (containedTableHtml) {
-      editableFieldTemplateHtmlMap[fieldKey] = containedTableHtml
-      const range = document.createRange()
-      range.setStart(startPosition.node, startPosition.offset)
-      range.setEnd(endPosition.node, endPosition.offset)
-      range.deleteContents()
-      range.insertNode(createBlockEditableAnchor(fieldKey, fallbackText, getClosestParagraphElement(startPosition.node)))
-      continue
-    }
-
-    const sharedTable = getSharedClosestTable(startPosition.node, endPosition.node)
-
-    if (sharedTable && !replacedTables.has(sharedTable)) {
-      editableFieldTemplateHtmlMap[fieldKey] = getCleanOuterHtml(sharedTable)
-      sharedTable.replaceWith(createBlockEditableAnchor(fieldKey, fallbackText, getClosestParagraphElement(startPosition.node)))
-      replacedTables.add(sharedTable)
-      continue
-    }
-
-    const range = document.createRange()
-    const isStandaloneBlock = isStandaloneParagraphPlaceholder(
-        startPosition,
-        endPosition,
-        fullText,
-        combinedText,
-        rangeStart,
-        rangeEnd
-    )
-
-    if (isStandaloneBlock) {
-      const paragraphElement = getClosestParagraphElement(startPosition.node)
-      replaceEditableParagraphRange(
-          startPosition.node,
-          endPosition.node,
-          createBlockEditableAnchor(fieldKey, fallbackText, paragraphElement)
-      )
-      continue
-    }
-
-    range.setStart(startPosition.node, startPosition.offset)
-    range.setEnd(endPosition.node, endPosition.offset)
-    range.deleteContents()
-    range.insertNode(createInlineEditableAnchor(fieldKey, fallbackText))
-  }
-}
-
-function openFieldEditor(fieldKey) {
-  const path = editableFieldPathMap.value[fieldKey] || ''
-  const plainText = getValueByPath(editableRenderData.value, path) ?? ''
-
-  activeEditableField.value = {
-    key: fieldKey,
-    path
-  }
-
-  editor.value?.commands.setContent(getFieldStoredHtml(fieldKey, plainText), false)
-  editDialogVisible.value = true
-}
-
-function saveActiveField() {
-  if (!activeEditableField.value || !editor.value) {
-    return
-  }
-
-  const fieldKey = activeEditableField.value.key
-  const html = normalizeRichTextHtmlForStorage(editor.value.getHTML())
-  const json = editor.value.getJSON()
-  const plainText = htmlToDocxText(html)
-  const path = activeEditableField.value.path
-
-  editableRenderData.value.__editableRichTextMap[fieldKey] = buildBackendRichTextValue(
-      fieldKey,
-      path,
-      html,
-      json,
-      plainText
-  )
-
-  setValueByPath(editableRenderData.value, path, plainText)
-  editableFieldContentMap[fieldKey] = html
-
-  emit('render-data-change', deepClone(editableRenderData.value))
-  emit('save-payload-change', buildSavePayload())
-  editDialogVisible.value = false
-  renderPreview()
-}
-
-function onDialogClosed() {
-  activeEditableField.value = null
-}
-
-async function renderPreview() {
-  const currentToken = ++renderToken
-  isLoading.value = true
-  errorMessage.value = ''
-
-  try {
-    const templateBuffer = await loadTemplate()
-    const { zip, documentXml } = createTemplateZip(templateBuffer, {
-      stripEditorMarkers: props.renderType !== 'edit'
-    })
-
-    headingStyleLevelMap.value = extractHeadingStyleLevelMap(zip)
-    documentHeadingList.value = extractDocumentHeadingList(zip, documentXml)
-    wordStyleContext.value = extractWordStyleContext(zip, documentXml)
-    editableMarkerDescriptors.value = extractEditableMarkerDescriptors(documentXml)
-    editableFieldKeys.value = editableMarkerDescriptors.value
-        .filter((descriptor) => descriptor.isValid)
-        .map((descriptor) => descriptor.fieldKey)
-    editableFieldPathMap.value = buildScalarPathMap(editableRenderData.value)
-    editableFieldKeys.value.forEach((fieldKey) => {
-      if (!editableFieldPathMap.value[fieldKey]) {
-        editableFieldPathMap.value[fieldKey] = fieldKey
-      }
-    })
-    const renderedBlob = await createRenderedDocxBlob({
-      stripEditorMarkers: props.renderType !== 'edit',
-      applyRichText: props.renderType !== 'edit'
-    })
-
-    await nextTick()
-
-    if (!previewRef.value || currentToken !== renderToken) {
-      return
-    }
-
-    clearPreview()
-
-    await docxPreview.renderAsync(renderedBlob, previewRef.value, previewRef.value, {
-      className: 'docx-preview',
-      inWrapper: true,
-      breakPages: true,
-      ignoreWidth: false,
-      ignoreHeight: false,
-      ignoreLastRenderedPageBreak: false,
-      renderHeaders: true,
-      renderFooters: true,
-      useBase64URL: true
-    })
-
-    await nextTick()
-
-    if (props.renderType === 'edit') {
-      decorateEditableRegions()
-    } else {
-      cleanupEditorMarkers()
-    }
-
-    buildDocumentOutline()
-  } catch (error) {
-    if (currentToken !== renderToken) {
-      return
-    }
-
-    console.error('Docx preview render failed:', error)
-    errorMessage.value = '文档预览生成失败，请检查模板变量或模板文件。'
-    ElMessage.error(errorMessage.value)
-  } finally {
-    if (currentToken === renderToken) {
-      isLoading.value = false
-    }
-  }
-}
-
-async function exportDocx() {
-  try {
-    const renderedBlob = await createRenderedDocxBlob({
-      stripEditorMarkers: true
-    })
-    downloadBlob(renderedBlob, getExportFileName())
-    return {
-      success: true,
-      fileName: getExportFileName()
-    }
-  } catch (error) {
-    console.error('Docx export failed:', error)
-    ElMessage.error('导出失败，请检查模板变量或模板文件。')
-    return {
-      success: false,
-      error
-    }
-  }
-}
-
-function isHeadingActive(level) {
-  return !!editor.value?.isActive('heading', { level })
-}
-
-function isTextAlignActive(alignment) {
-  return !!editor.value?.isActive({ textAlign: alignment })
-}
-
-function setHeading(level) {
-  editor.value?.chain().focus().toggleHeading({ level }).run()
-}
-
-function setParagraph() {
-  editor.value?.chain().focus().setParagraph().updateAttributes('paragraph', {
-    textIndentLevel: 0
-  }).setTextAlign('left').run()
-}
-
-function toggleBold() {
-  editor.value?.chain().focus().toggleBold().run()
-}
-
-function getCurrentEditorFormat() {
-  if (!editor.value) {
-    return null
-  }
-
-  const headingLevel = headingActions.find((item) => editor.value.isActive('heading', { level: item.level }))?.level || 0
-
-  return {
-    headingLevel,
-    bold: Boolean(editor.value.isActive('bold')),
-    textColor: editor.value.getAttributes('textStyle').color || '',
-    backgroundColor: editor.value.getAttributes('highlight').color || '',
-    align: ['center', 'right'].find((alignment) => editor.value.isActive({ textAlign: alignment })) || 'left',
-    textIndentLevel: getEditorIndentLevel(editor.value)
-  }
-}
-
-function applyEditorFormat(format) {
-  if (!editor.value || !format) {
-    return
-  }
-
-  let command = editor.value.chain().focus().unsetAllMarks()
-
-  if (format.headingLevel) {
-    command = command.setHeading({ level: format.headingLevel })
-  } else {
-    command = command.setParagraph()
-  }
-
-  command = command
-      .setTextAlign(format.align || 'left')
-      .updateAttributes(format.headingLevel ? 'heading' : 'paragraph', {
-        textIndentLevel: Number(format.textIndentLevel || 0)
-      })
-
-  if (format.bold) {
-    command = command.toggleBold()
-  }
-
-  if (format.textColor) {
-    command = command.setColor(format.textColor)
-  }
-
-  if (format.backgroundColor) {
-    command = command.setHighlight({ color: format.backgroundColor })
-  }
-
-  command.run()
-}
-
-function toggleFormatPainter() {
-  if (!copiedFormat.value) {
-    copiedFormat.value = getCurrentEditorFormat()
-    ElMessage.success('已复制当前格式，请选中目标内容后再次点击格式刷应用。')
-    return
-  }
-
-  applyEditorFormat(copiedFormat.value)
-  copiedFormat.value = null
-}
-
-function clearEditorFormat() {
-  if (!editor.value) {
-    return
-  }
-
-  editor.value
-      .chain()
-      .focus()
-      .unsetAllMarks()
-      .setParagraph()
-      .setTextAlign('left')
-      .updateAttributes('paragraph', {
-        textIndentLevel: 0
-      })
-      .run()
-}
-
-function onTablePickerHover(rows, cols) {
-  tablePickerHover.value = { rows, cols }
-}
-
-function insertTable(rows, cols) {
-  editor.value?.chain().focus().insertTable({
-    rows,
-    cols,
-    withHeaderRow: true
-  }).run()
-  tablePickerVisible.value = false
-}
-
-function addTableRow() {
-  editor.value?.chain().focus().addRowAfter().run()
-}
-
-function deleteTableRow() {
-  editor.value?.chain().focus().deleteRow().run()
-}
-
-function addTableColumn() {
-  editor.value?.chain().focus().addColumnAfter().run()
-}
-
-function deleteTableColumn() {
-  editor.value?.chain().focus().deleteColumn().run()
-}
-
-function removeTable() {
-  editor.value?.chain().focus().deleteTable().run()
-}
-
-function hideTableContextMenu() {
-  tableContextMenuVisible.value = false
-}
-
-function isTableCellSelection(selection) {
-  return selection instanceof CellSelection
-}
-
-function shouldKeepTableCellSelection(tableCell) {
-  const selection = editor.value?.state.selection
-
-  return isTableCellSelection(selection) && tableCell.classList.contains('selectedCell')
-}
-
-function setEditorSelectionFromEvent(event) {
-  const view = editor.value?.view
-  const position = view?.posAtCoords({
-    left: event.clientX,
-    top: event.clientY
-  })
-
-  if (position?.pos) {
-    editor.value.chain().focus().setTextSelection(position.pos).run()
-    return
-  }
-
-  editor.value?.commands.focus()
-}
-
-function onEditorMouseDownCapture(event) {
-  if (event.button !== 2) {
-    return
-  }
-
-  const tableCell = event.target?.closest?.('td, th')
-
-  if (!tableCell || !shouldKeepTableCellSelection(tableCell)) {
-    return
-  }
-
-  event.preventDefault()
-  event.stopPropagation()
-  event.stopImmediatePropagation?.()
-}
-
-function onEditorContextMenu(event) {
-  const tableCell = event.target?.closest?.('td, th')
-
-  if (!tableCell || !editor.value) {
-    hideTableContextMenu()
-    return
-  }
-
-  event.preventDefault()
-
-  if (!shouldKeepTableCellSelection(tableCell)) {
-    setEditorSelectionFromEvent(event)
-  }
-
-  const editDialogRect = event.currentTarget.closest('.edit-dialog')?.getBoundingClientRect() || event.currentTarget.getBoundingClientRect()
-  tableContextMenuPosition.value = {
-    x: event.clientX - editDialogRect.left,
-    y: event.clientY - editDialogRect.top
-  }
-  tableContextMenuVisible.value = true
-}
-
-function getTableCommandUnavailableMessage(commandName) {
-  if (commandName === 'mergeCells') {
-    return '请先拖选两个或多个连续单元格，再执行合并。'
-  }
-
-  if (commandName === 'splitCell') {
-    return '当前单元格没有可拆分的合并行或合并列。'
-  }
-
-  return ''
-}
-
-function runTableMenuCommand(commandName) {
-  const instance = editor.value
-
-  if (!instance) {
-    return
-  }
-
-  const commandMap = {
-    mergeCells: () => instance.chain().focus().mergeCells().run(),
-    splitCell: () => instance.chain().focus().splitCell().run(),
-    addRowBefore: () => instance.chain().focus().addRowBefore().run(),
-    addRowAfter: () => instance.chain().focus().addRowAfter().run(),
-    deleteRow: () => instance.chain().focus().deleteRow().run(),
-    addColumnBefore: () => instance.chain().focus().addColumnBefore().run(),
-    addColumnAfter: () => instance.chain().focus().addColumnAfter().run(),
-    deleteColumn: () => instance.chain().focus().deleteColumn().run(),
-    toggleHeaderRow: () => instance.chain().focus().toggleHeaderRow().run(),
-    toggleHeaderColumn: () => instance.chain().focus().toggleHeaderColumn().run(),
-    deleteTable: () => instance.chain().focus().deleteTable().run()
-  }
-
-  const isCommandAvailable = instance.can()?.[commandName]?.()
-
-  if (isCommandAvailable === false) {
-    const message = getTableCommandUnavailableMessage(commandName)
-
-    if (message) {
-      ElMessage.warning(message)
-    }
-
-    hideTableContextMenu()
-    return
-  }
-
-  const commandResult = commandMap[commandName]?.()
-
-  if (commandResult === false) {
-    const message = getTableCommandUnavailableMessage(commandName)
-
-    if (message) {
-      ElMessage.warning(message)
-    }
-  }
-
-  hideTableContextMenu()
-}
-
-function setTextAlign(alignment) {
-  editor.value?.chain().focus().setTextAlign(alignment).run()
-}
-
-function rememberEditorSelection() {
-  const selection = editor.value?.state.selection
-
-  if (!selection) {
-    return
-  }
-
-  pendingEditorSelection.value = {
-    from: selection.from,
-    to: selection.to
-  }
-}
-
-function getEditorCommandWithSelection() {
-  const command = editor.value?.chain().focus()
-
-  if (!command) {
-    return null
-  }
-
-  if (pendingEditorSelection.value) {
-    return command.setTextSelection(pendingEditorSelection.value)
-  }
-
-  return command
-}
-
-function openTextColorPicker() {
-  rememberEditorSelection()
-  textColorInputRef.value?.click()
-}
-
-function openHighlightColorPicker() {
-  rememberEditorSelection()
-  highlightColorInputRef.value?.click()
-}
-
-function onTextColorChange(event) {
-  const color = event.target.value || DEFAULT_TEXT_COLOR
-  currentTextColor.value = color
-  getEditorCommandWithSelection()?.setColor(color).run()
-  pendingEditorSelection.value = null
-}
-
-function onHighlightColorChange(event) {
-  const color = event.target.value || DEFAULT_HIGHLIGHT_COLOR
-  currentHighlightColor.value = color
-  getEditorCommandWithSelection()?.setHighlight({ color }).run()
-  pendingEditorSelection.value = null
-}
-
-function clearHighlightColor() {
-  rememberEditorSelection()
-  getEditorCommandWithSelection()?.unsetHighlight().run()
-  currentHighlightColor.value = DEFAULT_HIGHLIGHT_COLOR
-  pendingEditorSelection.value = null
-}
-
-function undoEditor() {
-  editor.value?.chain().focus().undo().run()
-}
-
-function redoEditor() {
-  editor.value?.chain().focus().redo().run()
-}
-
-watch(
-    () => props.renderData,
-    (value) => {
-      editableRenderData.value = createEditableRenderData(value)
-      renderPreview()
-    },
-    {
-      deep: true,
-      immediate: true
-    }
-)
-
-watch(
-    () => props.renderType,
-    () => {
-      renderPreview()
-    }
-)
-
-defineExpose({
-  exportDocx,
-  getRenderData: () => deepClone(editableRenderData.value),
-  getSavePayload: () => buildSavePayload(),
-  getEditorHtml: () => editor.value?.getHTML() || '',
-  getEditorJson: () => editor.value?.getJSON() || null
-})
-
-onBeforeUnmount(() => {
-  renderToken += 1
-  if (outlineScrollRaf) {
-    cancelAnimationFrame(outlineScrollRaf)
-    outlineScrollRaf = 0
-  }
-  clearPreview()
-  editor.value?.destroy()
-})
-</script>
-
-<style scoped lang="less">
-.view-page {
-  height: 100%;
-  min-height: 0;
-  //position: relative;
-  display: flex;
-  justify-content: stretch;
-
-  .edit-box,
-  .view-box {
-    width: 100%;
-  }
-
-  &.has-outline {
-    justify-content: flex-end;
-  }
-
-  &.has-outline .edit-box,
-  &.has-outline .view-box {
-    width: calc(100% - 250px);
-  }
-}
-
-.document-outline {
-  //position: absolute;
-  //top: 18px;
-  //right: 18px;
-  //z-index: 8;
-  width: 240px;
-  max-height: calc(100% - 36px);
-  padding: 14px 12px;
-  overflow: auto;
-  border: 1px solid rgba(19, 191, 166, 0.22);
-  border-radius: 14px;
-  background: rgba(255, 255, 255, 0.92);
-  box-shadow: 0 14px 36px rgba(20, 32, 61, 0.16);
-  backdrop-filter: blur(10px);
-}
-
-.outline-title {
-  margin-bottom: 8px;
-  padding: 0 4px 8px;
-  border-bottom: 1px solid #e6edf5;
-  color: #1f2a44;
-  font-size: 14px;
-  font-weight: 700;
-}
-
-.outline-item {
-  width: 100%;
-  display: block;
-  margin: 2px 0;
-  padding: 7px 8px;
-  border: none;
-  border-radius: 9px;
-  background: transparent;
-  color: #4f5b72;
-  font-size: 13px;
-  line-height: 1.35;
-  text-align: left;
-  cursor: pointer;
-  transition: all 0.18s ease;
-}
-
-.outline-item:hover,
-.outline-item.is-active {
-  color: #008f7c;
-  background: rgba(19, 191, 166, 0.1);
-}
-
-.outline-item.level-2 {
-  padding-left: 20px;
-}
-
-.outline-item.level-3 {
-  padding-left: 34px;
-  font-size: 12px;
-  color: #6f7b91;
-}
-
-.outline-text {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.view-box,
-.edit-box {
-  height: 100%;
-  min-height: 0;
-  overflow: auto;
-  padding: 0;
-  background: #858585;
-}
-
-.status-box {
-  min-height: 240px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #606266;
-  font-size: 14px;
-  background: #fff;
-  border-radius: 8px;
-  height: 100%;
-}
-
-.status-box.is-error {
-  color: #f56c6c;
-}
-
-.docx-preview-container {
-  min-height: 100%;
-  width: 100%;
-}
-
-:deep(.docx-preview-wrapper) {
-  min-height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  background: #FFFFFF;
-  padding: 0;
-  .docx-preview{
-    width: 100%!important;
-  }
-}
-
-.edit-dialog {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.edit-dialog-tip {
-  color: #4f5b72;
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.edit-dialog-path {
-  margin-left: 8px;
-  color: #9098a7;
-}
-
-.editor-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  padding: 14px;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
-  border: 1px solid #dbe6f3;
-  border-radius: 14px;
-  box-shadow: 0 10px 30px rgba(31, 42, 68, 0.06);
-}
-
-.toolbar-btn {
-  width: 38px;
-  height: 38px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #d9e0ec;
-  border-radius: 11px;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
-  color: #2b3345;
-  cursor: pointer;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 5px rgba(31, 42, 68, 0.04);
-  transition: all 0.16s ease;
-}
-
-.toolbar-btn:hover {
-  border-color: #13bfa6;
-  color: #13bfa6;
-  background: linear-gradient(180deg, #ffffff 0%, #effdfa 100%);
-  box-shadow: 0 4px 12px rgba(19, 191, 166, 0.12);
-}
-
-.toolbar-btn.is-active {
-  color: #13bfa6;
-  border-color: #13bfa6;
-  background: rgba(19, 191, 166, 0.1);
-}
-
-.toolbar-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.45;
-}
-
-.toolbar-tip-wrap {
-  display: inline-flex;
-}
-
-.toolbar-divider {
-  width: 1px;
-  height: 22px;
-  background: #e5e9f2;
-  margin: 0 2px;
-}
-
-.toolbar-svg {
-  width: 24px;
-  height: 24px;
-  display: block;
-  color: currentColor;
-  overflow: visible;
-}
-
-.heading-svg {
-  width: 26px;
-  height: 26px;
-}
-
-.svg-stroke {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: square;
-  stroke-linejoin: round;
-}
-
-.svg-stroke.thin {
-  stroke-width: 1.25;
-}
-
-.svg-stroke.round {
-  stroke-linecap: round;
-}
-
-.svg-stroke.muted {
-  color: #8c96a8;
-}
-
-.toolbar-btn:hover .svg-stroke.muted,
-.toolbar-btn.is-active .svg-stroke.muted {
-  color: currentColor;
-}
-
-.svg-stroke.accent {
-  color: #13bfa6;
-  stroke-width: 2.2;
-}
-
-.svg-stroke.danger {
-  color: #e47777;
-  stroke-width: 2.2;
-}
-
-.svg-soft-fill {
-  fill: currentColor;
-  opacity: 0.14;
-}
-
-.svg-color-fill {
-  fill: currentColor;
-}
-
-.color-preview-stroke {
-  stroke-width: 2.8;
-}
-
-.svg-heading-main,
-.svg-heading-level,
-.svg-bold {
-  fill: currentColor;
-  font-family: Georgia, 'Times New Roman', serif;
-  font-weight: 700;
-}
-
-.svg-heading-main {
-  font-size: 20px;
-}
-
-.svg-heading-level {
-  font-family: Arial, sans-serif;
-  font-size: 10px;
-  font-weight: 800;
-}
-
-.svg-bold {
-  font-size: 18px;
-}
-
-.color-btn {
-  position: relative;
-  width: 42px;
-  padding: 0;
-}
-
-.clear-highlight-btn {
-  width: 38px;
-}
-
-.table-trigger-btn {
-  width: 40px;
-}
-
-.table-op-btn {
-  width: 44px;
-  overflow: visible;
-}
-
-.hidden-color-input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-  width: 0;
-  height: 0;
-}
-
-.table-picker {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.table-picker-title {
-  color: #1f2a44;
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.table-picker-grid {
-  display: grid;
-  grid-template-columns: repeat(10, 1fr);
-  gap: 4px;
-}
-
-.table-picker-cell {
-  width: 24px;
-  height: 24px;
-  border: 1px solid #c9d4e5;
-  border-radius: 4px;
-  background: #fff;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.table-picker-cell.is-active,
-.table-picker-cell:hover {
-  border-color: #13bfa6;
-  background: rgba(19, 191, 166, 0.14);
-}
-
-.table-picker-tip {
-  color: #65708a;
-  font-size: 12px;
-}
-
-.table-context-menu {
-  position: absolute;
-  z-index: 20;
-  min-width: 148px;
-  padding: 6px;
-  border: 1px solid #d8dfeb;
-  border-radius: 8px;
-  background: #fff;
-  box-shadow: 0 16px 36px rgba(31, 42, 68, 0.18);
-}
-
-.table-context-menu button {
-  width: 100%;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  padding: 0 10px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: #2b3345;
-  font-size: 13px;
-  text-align: left;
-  cursor: pointer;
-}
-
-.table-context-menu button:hover {
-  background: rgba(19, 191, 166, 0.1);
-  color: #008f7c;
-}
-
-.table-context-menu button.is-danger {
-  color: #c45656;
-}
-
-.table-context-menu button.is-danger:hover {
-  background: rgba(196, 86, 86, 0.1);
-}
-
-.table-context-divider {
-  height: 1px;
-  margin: 5px 4px;
-  background: #edf1f7;
-}
-
-.editor-content-shell {
-  min-height: 420px;
-  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
-  border: 1px solid #dbe6f3;
-  border-radius: 18px;
-  overflow: auto;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 14px 38px rgba(31, 42, 68, 0.08);
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-}
-
-:deep(.docx-wrapper) {
-  min-height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 28px 0 48px !important;
-  background: #858585 !important;
-}
-
-:deep(.docx-preview) {
-  min-height: 100%;
-  background: #858585;
-  span{
-    line-height: 2em;
-  }
-}
-
-:deep(.docx) {
-  margin: 0 auto 24px;
-  box-shadow: 0 16px 40px rgba(20, 32, 61, 0.16);
-  border-radius: 2px;
-}
-
-:deep(.docx p),
-:deep(.docx li),
-:deep(.docx span),
-:deep(.docx td),
-:deep(.docx th) {
-  line-height: 1.6 !important;
-}
-
-:deep(.editable-field-anchor) {
-  display: inline;
-  padding: 0;
-  margin: 0;
-  border: none;
-  border-radius: 4px;
-  background: rgba(19, 191, 166, 0.12);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  white-space: pre-wrap;
-  word-break: break-word;
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-  font: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  font-style: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  color: inherit;
-  vertical-align: inherit;
-  text-decoration-line: underline;
-  text-decoration-style: dashed;
-  text-decoration-color: rgba(19, 191, 166, 0.85);
-  text-underline-offset: 3px;
-  outline: 1px solid rgba(19, 191, 166, 0.28);
-  box-shadow: 0 0 0 1px rgba(19, 191, 166, 0.08);
-}
-
-:deep(.editable-field-anchor:hover) {
-  background: rgba(19, 191, 166, 0.2);
-  text-decoration-color: #13bfa6;
-  outline-color: rgba(19, 191, 166, 0.5);
-  box-shadow: 0 6px 14px rgba(19, 191, 166, 0.12);
-}
-
-:deep(.editable-field-anchor.is-placeholder) {
-  color: rgba(79, 91, 114, 0.58);
-  font-style: italic;
-}
-
-:deep(.editable-field-block) {
-  display: block;
-  //padding: 6px 8px;
-  margin: 2px 0;
-  border-radius: 8px;
-  background: rgba(19, 191, 166, 0.08);
-  outline: 1px dashed rgba(19, 191, 166, 0.36);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font: inherit;
-  //font-family: inherit;
-  //font-size: inherit;
-  //font-weight: inherit;
-  //font-style: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  color: inherit;
-  font-size: 16px;
-  padding: 25px!important;
-}
-
-:deep(.editable-field-block:hover) {
-  background: rgba(19, 191, 166, 0.14);
-  outline-color: rgba(19, 191, 166, 0.58);
-  box-shadow: 0 8px 18px rgba(19, 191, 166, 0.12);
-}
-
-:deep(.editable-field-block.is-placeholder) {
-  min-height: 32px;
-  display: flex;
-  align-items: center;
-  color: rgba(79, 91, 114, 0.58);
-  font-style: italic;
-}
-
-:deep(.editable-field-block.is-table-field) {
-  padding: 6px 8px !important;
-  background: rgba(19, 191, 166, 0.04);
-}
-
-:deep(.editable-field-block p) {
-  margin: 0 0 0.5em;
-  font: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  font-style: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  color: inherit;
-}
-
-:deep(.editable-field-block p:last-child) {
-  margin-bottom: 0;
-}
-
-:deep(.ProseMirror) {
-  min-height: 420px;
-  padding: 20px 24px;
-  outline: none;
-  color: #2b3345;
-  font-size: 15px;
-  line-height: 1.9;
-}
-
-:deep(.ProseMirror .is-empty.is-editor-empty::before) {
-  content: attr(data-placeholder);
-  height: 0;
-  float: left;
-  color: rgba(79, 91, 114, 0.45);
-  pointer-events: none;
-}
-
-:deep(.ProseMirror h1),
-:deep(.ProseMirror h2),
-:deep(.ProseMirror h3) {
-  color: #1f2a44;
-  line-height: 1.5;
-  margin: 0 0 16px;
-}
-
-:deep(.ProseMirror h1) {
-  font-size: 30px;
-}
-
-:deep(.ProseMirror h2) {
-  font-size: 22px;
-}
-
-:deep(.ProseMirror h3) {
-  font-size: 18px;
-}
-
-:deep(.ProseMirror p) {
-  margin: 0 0 14px;
-}
-
-:deep(.ProseMirror table) {
-  width: 100% !important;
-  min-width: 100% !important;
-  max-width: 100% !important;
-  margin: 0 0 16px;
-  border-collapse: collapse;
-  table-layout: fixed;
-  border: 1.2px solid #000;
-  color: #000;
-  font-family: v-bind(EDITOR_TABLE_FONT_FAMILY);
-  font-size: v-bind(EDITOR_TABLE_BODY_FONT_SIZE);
-  line-height: 1.15;
-}
-
-:deep(.ProseMirror td),
-:deep(.ProseMirror th) {
-  position: relative;
-  min-width: 72px;
-  height: 28px;
-  padding: 2px 6px;
-  border: 1.2px solid #000;
-  color: #000;
-  font-family: v-bind(EDITOR_TABLE_FONT_FAMILY);
-  font-size: v-bind(EDITOR_TABLE_BODY_FONT_SIZE);
-  line-height: 1.15;
-  text-align: center;
-  vertical-align: middle;
-}
-
-:deep(.ProseMirror th) {
-  background: #a6a6a6;
-  font-size: v-bind(EDITOR_TABLE_HEADER_FONT_SIZE);
-  font-weight: 700;
-}
-
-:deep(.ProseMirror td p) {
-  margin: 0;
-  font-family: v-bind(EDITOR_TABLE_FONT_FAMILY) !important;
-  font-size: v-bind(EDITOR_TABLE_BODY_FONT_SIZE) !important;
-  line-height: 1.15 !important;
-}
-
-:deep(.ProseMirror th p) {
-  margin: 0;
-  font-family: v-bind(EDITOR_TABLE_FONT_FAMILY) !important;
-  font-size: v-bind(EDITOR_TABLE_HEADER_FONT_SIZE) !important;
-  line-height: 1.15 !important;
-}
-
-:deep(.ProseMirror td *),
-:deep(.ProseMirror th *) {
-  font-family: v-bind(EDITOR_TABLE_FONT_FAMILY) !important;
-}
-
-:deep(.ProseMirror .selectedCell:after) {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: rgba(19, 191, 166, 0.12);
-  pointer-events: none;
-}
-
-:deep(.ProseMirror .tableWrapper) {
-  width: 100% !important;
-  max-width: 100% !important;
-  margin: 0 0 16px;
-  overflow-x: auto;
-}
-
-:deep(.editable-field-block table) {
-  width: 100% !important;
-  min-width: 100% !important;
-  max-width: 100% !important;
-  margin: 0 0 12px;
-  border-collapse: collapse;
-  table-layout: fixed;
-  border: 1.2px solid #000;
-  color: #000;
-  font-family: v-bind(EDITOR_TABLE_FONT_FAMILY);
-  font-size: v-bind(EDITOR_TABLE_BODY_FONT_SIZE);
-  line-height: 1.15;
-}
-
-:deep(.editable-field-block .tableWrapper) {
-  width: 100% !important;
-  max-width: 100% !important;
-}
-
-:deep(.editable-field-block td),
-:deep(.editable-field-block th) {
-  height: 28px;
-  padding: 2px 6px;
-  border: 1.2px solid #000;
-  color: #000;
-  font-family: v-bind(EDITOR_TABLE_FONT_FAMILY);
-  font-size: v-bind(EDITOR_TABLE_BODY_FONT_SIZE);
-  line-height: 1.15;
-  text-align: center;
-  vertical-align: middle;
-}
-
-:deep(.editable-field-block th) {
-  background: #a6a6a6;
-  font-size: v-bind(EDITOR_TABLE_HEADER_FONT_SIZE);
-  font-weight: 700;
-}
-
-:deep(.editable-field-block td p) {
-  margin: 0;
-  font-family: v-bind(EDITOR_TABLE_FONT_FAMILY) !important;
-  font-size: v-bind(EDITOR_TABLE_BODY_FONT_SIZE) !important;
-  line-height: 1.15 !important;
-}
-
-:deep(.editable-field-block th p) {
-  margin: 0;
-  font-family: v-bind(EDITOR_TABLE_FONT_FAMILY) !important;
-  font-size: v-bind(EDITOR_TABLE_HEADER_FONT_SIZE) !important;
-  line-height: 1.15 !important;
-}
-
-:deep(.editable-field-block td *),
-:deep(.editable-field-block th *) {
-  font-family: v-bind(EDITOR_TABLE_FONT_FAMILY) !important;
-}
-
-:deep(.editDialog-dialog){
-  height: 70%;
-  .el-dialog__body{
-    height: calc(100% - 80px);
-    .edit-dialog{
-      height: 100%;
-      .editor-content-shell{
-        height: 100%;
-        overflow: auto;
-      }
-    }
-  }
-}
-</style>