@univerjs/docs-ui 0.4.1 → 0.4.2

package/lib/es/index.js

@@ -2,30 +2,30 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { Inject, Disposable, toDisposable, UniverInstanceType, BuildTextUtils, IUniverInstanceService, TextX, JSONX, TextXActionType, getBodySlice, Tools, UpdateDocsAttributeType, ObjectRelativeFromH, ObjectRelativeFromV, CommandType, ICommandService, IUndoRedoService, DOC_RANGE_TYPE, RANGE_DIRECTION, COLORS, BooleanNumber, Rectangle, RxDisposable, DataStreamTreeTokenType, ILogService, DEFAULT_STYLES, createIdentifier, EDITOR_ACTIVATED, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, FOCUSING_EDITOR_INPUT_FORMULA, DEFAULT_EMPTY_DOCUMENT_VALUE, VerticalAlign, HorizontalAlign, IContextService, DocumentFlavor, useDependency, LocaleService, isInternalEditorID, debounce, PresetListType, sequenceExecuteAsync, FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, FOCUSING_COMMON_DRAWINGS, MemoryCursor, BaselineOffset, PRESET_LIST_TYPE, GridType, sortRulesFactory, useObservable, TableCellHeightRule, TableSizeType, generateRandomId, TableAlignmentType, TableTextWrapType, PositionedObjectLayoutType, getCustomRangeSlice, getCustomDecorationSlice, LRUMap, ColorKit, skipParseTagNames, CustomRangeType, DataStreamTreeNodeType, SliceBodyType, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, normalizeBody, updateAttributeByInsert, SpacingRule, ThemeService, Injector, connectInjector, IConfigService, QuickListTypeMap, Direction, DisposableCollection, fromEventSubject, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_ZEN_EDITOR_UNIT_ID_KEY, checkForSubstrings, UndoCommandId, RedoCommandId, DependentOn, Plugin, touchDependencies, mergeOverrideWithDependencies } from "@univerjs/core";
+import { Inject, Disposable, toDisposable, UniverInstanceType, BuildTextUtils, IUniverInstanceService, TextX, JSONX, TextXActionType, getBodySlice, Tools, UpdateDocsAttributeType, ObjectRelativeFromH, ObjectRelativeFromV, CommandType, ICommandService, IUndoRedoService, DOC_RANGE_TYPE, RANGE_DIRECTION, COLORS, BooleanNumber, Rectangle, RxDisposable, DataStreamTreeTokenType, ILogService, DEFAULT_STYLES, createIdentifier, EDITOR_ACTIVATED, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, FOCUSING_EDITOR_INPUT_FORMULA, DEFAULT_EMPTY_DOCUMENT_VALUE, VerticalAlign, HorizontalAlign, IContextService, DocumentFlavor, useDependency, LocaleService, isInternalEditorID, debounce, PresetListType, sequenceExecuteAsync, FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, FOCUSING_COMMON_DRAWINGS, MemoryCursor, BaselineOffset, PRESET_LIST_TYPE, GridType, sortRulesFactory, useObservable, TableCellHeightRule, TableSizeType, generateRandomId, TableAlignmentType, TableTextWrapType, PositionedObjectLayoutType, LRUMap, ColorKit, skipParseTagNames, CustomRangeType, DataStreamTreeNodeType, SliceBodyType, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, normalizeBody, SpacingRule, ThemeService, DOCS_ZEN_EDITOR_UNIT_ID_KEY, Injector, connectInjector, IConfigService, QuickListTypeMap, Direction, DisposableCollection, fromEventSubject, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, checkForSubstrings, UndoCommandId, RedoCommandId, DependentOn, Plugin, touchDependencies, mergeOverrideWithDependencies } from "@univerjs/core";
 import { DocSelectionManagerService, RichTextEditingMutation, DocSkeletonManagerService, SetTextSelectionsOperation, DocStateEmitService, DocInterceptorService } from "@univerjs/docs";
 import { IRenderManagerService, Liquid, GlyphType, DocumentSkeletonPageType, getPageFromPath, getTableIdAndSliceIndex, NORMAL_TEXT_SELECTION_PLUGIN_STYLE, getColor, RegularPolygon, Rect, getOffsetRectForDom, ScrollTimer, CURSOR_TYPE, getSystemHighlightColor, Vector2, PageLayoutType, DocumentEditArea, Shape, Path, getCharSpaceApply, getNumberUnitValue, hasListGlyph, isIndentByGlyph, isFirstGlyph, getParagraphByGlyph, pixelToPt, ptToPixel, parseDataStreamToTree, Viewport, ScrollBar, Layer, Documents, DocBackground, lineIterator, getLastLine, pxToNum, TRANSFORM_CHANGE_OBSERVABLE_TYPE, UniverRenderEnginePlugin } from "@univerjs/engine-render";
 import * as require$$0 from "react";
 import require$$0__default, { useState, useRef, useEffect, forwardRef, createElement, useMemo, useCallback } from "react";
 import { LexerTreeBuilder, operatorToken, isReferenceStrings, serializeRange, serializeRangeWithSheet, serializeRangeWithSpreadsheet, isReferenceStringWithEffectiveColumn, getRangeWithRefsString } from "@univerjs/engine-formula";
-import { Subject, BehaviorSubject, takeUntil, fromEvent, merge, combineLatest, Observable, map as map$1, distinctUntilChanged, filter as filter$1, throttleTime, mergeMap, take, animationFrameScheduler } from "rxjs";
+import { Subject, BehaviorSubject, takeUntil, fromEvent, merge, combineLatest, Observable, map as map$1, distinctUntilChanged, filter as filter$1, throttleTime, switchMap, take, animationFrameScheduler } from "rxjs";
 import { ILayoutService, KeyCode, useEvent, ComponentManager, ISidebarService, MetaKeys, IClipboardInterfaceService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, HTML_CLIPBOARD_MIME_TYPE, CopyCommand, CutCommand, PasteCommand, IConfirmService, MenuItemType, getMenuHiddenObservable, FONT_FAMILY_LIST, FONT_SIZE_LIST, getHeaderFooterMenuHiddenObservable, RibbonStartGroup, ContextMenuPosition, ContextMenuGroup, FontFamily, FontFamilyItem, FontSize, BuiltInUIPart, IMenuManagerService, IUIPartsService, IShortcutService, ICanvasPopupService, IContextMenuService, SetEditorResizeOperation } from "@univerjs/ui";
 import { filter, bufferTime, map } from "rxjs/operators";
 import { Tooltip, Dialog, Button, Input, Checkbox, InputNumber, Slider, Select, ColorPicker } from "@univerjs/design";
-var __defProp$r = Object.defineProperty, __getOwnPropDesc$r = Object.getOwnPropertyDescriptor, __decorateClass$r = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$s = Object.defineProperty, __getOwnPropDesc$s = Object.getOwnPropertyDescriptor, __decorateClass$s = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$r(target, key, result), result;
-}, "__decorateClass$r"), __decorateParam$r = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$r");
+  return kind && result && __defProp$s(target, key, result), result;
+}, "__decorateClass$s"), __decorateParam$s = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$s");
 function getParagraphsInRange$1(activeRange, paragraphs) {
-  var _a28, _b2;
+  var _a29, _b2;
   const { startOffset, endOffset } = activeRange, results = [];
   let start = -1;
   for (let i = 0; i < paragraphs.length; i++) {
     const paragraph = paragraphs[i], prevParagraph = paragraphs[i - 1], { startIndex } = paragraph;
     startOffset > start && startOffset <= startIndex || endOffset > start && endOffset <= startIndex ? results.push({
       ...paragraph,
-      paragraphStart: ((_a28 = prevParagraph == null ? void 0 : prevParagraph.startIndex) != null ? _a28 : -1) + 1,
+      paragraphStart: ((_a29 = prevParagraph == null ? void 0 : prevParagraph.startIndex) != null ? _a29 : -1) + 1,
       paragraphEnd: paragraph.startIndex
     }) : startIndex >= startOffset && startIndex <= endOffset && results.push({
       ...paragraph,
@@ -46,8 +46,8 @@ let DocAutoFormatService = (_a = class extends Disposable {
   registerAutoFormat(match) {
     const matchList = this._matches.get(match.id);
     return matchList ? (matchList.push(match), matchList.sort((a, b) => {
-      var _a28, _b2;
-      return ((_a28 = b.priority) != null ? _a28 : 0) - ((_b2 = a.priority) != null ? _b2 : 0);
+      var _a29, _b2;
+      return ((_a29 = b.priority) != null ? _a29 : 0) - ((_b2 = a.priority) != null ? _b2 : 0);
     })) : this._matches.set(match.id, [match]), toDisposable(() => {
       const matchList2 = this._matches.get(match.id);
       if (matchList2) {
@@ -57,15 +57,15 @@ let DocAutoFormatService = (_a = class extends Disposable {
     });
   }
   onAutoFormat(id, params) {
-    var _a28, _b2, _c, _d, _e, _f;
-    const autoFormats = (_a28 = this._matches.get(id)) != null ? _a28 : [], unit = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), selection = this._textSelectionManagerService.getActiveTextRange();
+    var _a29, _b2, _c, _d, _e, _f;
+    const autoFormats = (_a29 = this._matches.get(id)) != null ? _a29 : [], unit = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), selection = this._textSelectionManagerService.getActiveTextRange();
     if (unit && selection) {
       const doc = unit.getSelfOrHeaderFooterModel(selection.segmentId), context = {
         unit: doc,
         selection,
         isBody: !selection.segmentId,
         paragraphs: getParagraphsInRange$1(selection, (_c = (_b2 = doc.getBody()) == null ? void 0 : _b2.paragraphs) != null ? _c : []),
-        customRanges: BuildTextUtils.customRange.getCustomRangesInterestsWithRange(selection, (_e = (_d = doc.getBody()) == null ? void 0 : _d.customRanges) != null ? _e : []),
+        customRanges: BuildTextUtils.customRange.getCustomRangesInterestsWithSelection(selection, (_e = (_d = doc.getBody()) == null ? void 0 : _d.customRanges) != null ? _e : []),
         commandId: id,
         commandParams: params
       }, matched = autoFormats.find((i) => i.match(context));
@@ -74,9 +74,9 @@ let DocAutoFormatService = (_a = class extends Disposable {
     return [];
   }
 }, __name(_a, "DocAutoFormatService"), _a);
-DocAutoFormatService = __decorateClass$r([
-  __decorateParam$r(0, IUniverInstanceService),
-  __decorateParam$r(1, Inject(DocSelectionManagerService))
+DocAutoFormatService = __decorateClass$s([
+  __decorateParam$s(0, IUniverInstanceService),
+  __decorateParam$s(1, Inject(DocSelectionManagerService))
 ], DocAutoFormatService);
 const DefaultToolbarConfig = {
   undo: !0,
@@ -175,8 +175,7 @@ function addCustomDecorationFactory(param) {
     const range = ranges[i], { startOffset: start, endOffset: end } = range;
     start > 0 && textX.push({
       t: TextXActionType.RETAIN,
-      len: start - cursor,
-      segmentId
+      len: start - cursor
     }), textX.push({
       t: TextXActionType.RETAIN,
       body: {
@@ -188,8 +187,7 @@ function addCustomDecorationFactory(param) {
           endIndex: end - start - 1
         }]
       },
-      len: end - start,
-      segmentId
+      len: end - start
     }), cursor = end;
   }
   return doMutation.params.actions = jsonX.editOp(textX.serialize()), doMutation;
@@ -212,17 +210,17 @@ function addCustomDecorationBySelectionFactory(accessor, param) {
 }
 __name(addCustomDecorationBySelectionFactory, "addCustomDecorationBySelectionFactory");
 function deleteCustomDecorationFactory(accessor, params) {
-  var _a28, _b2;
+  var _a29, _b2;
   const { unitId, id, segmentId } = params, documentDataModel = accessor.get(IUniverInstanceService).getUnit(unitId), body = documentDataModel == null ? void 0 : documentDataModel.getBody();
   if (!documentDataModel || !body)
     return !1;
-  const decorations = (_b2 = (_a28 = documentDataModel.getBody()) == null ? void 0 : _a28.customDecorations) == null ? void 0 : _b2.filter((d) => d.id === id);
+  const decorations = (_b2 = (_a29 = documentDataModel.getBody()) == null ? void 0 : _a29.customDecorations) == null ? void 0 : _b2.filter((d) => d.id === id);
   if (!(decorations != null && decorations.length))
     return !1;
   const oldBodySlices = decorations.map((i) => getBodySlice(body, i.startIndex, i.endIndex + 1)), bodySlices = oldBodySlices.map((bodySlice) => {
-    var _a29;
+    var _a30;
     const copy = Tools.deepClone(bodySlice);
-    return copy.customDecorations = (_a29 = copy.customDecorations) == null ? void 0 : _a29.filter((decoration) => decoration.id !== id), copy;
+    return copy.customDecorations = (_a30 = copy.customDecorations) == null ? void 0 : _a30.filter((decoration) => decoration.id !== id), copy;
   }), doMutation = {
     id: RichTextEditingMutation.id,
     params: {
@@ -236,12 +234,10 @@ function deleteCustomDecorationFactory(accessor, params) {
     const bodySlice = bodySlices[i], oldBody = oldBodySlices[i];
     decoration.startIndex !== cursor && textX.push({
       t: TextXActionType.RETAIN,
-      len: decoration.startIndex - cursor,
-      segmentId
+      len: decoration.startIndex - cursor
     }), cursor = decoration.startIndex, textX.push({
       t: TextXActionType.RETAIN,
       len: decoration.endIndex - decoration.startIndex + 1,
-      segmentId,
       body: bodySlice,
       oldBody,
       coverType: UpdateDocsAttributeType.REPLACE
@@ -250,8 +246,8 @@ function deleteCustomDecorationFactory(accessor, params) {
 }
 __name(deleteCustomDecorationFactory, "deleteCustomDecorationFactory");
 function getCommandSkeleton(accessor, unitId) {
-  var _a28;
-  return (_a28 = accessor.get(IRenderManagerService).getRenderById(unitId)) == null ? void 0 : _a28.with(DocSkeletonManagerService);
+  var _a29;
+  return (_a29 = accessor.get(IRenderManagerService).getRenderById(unitId)) == null ? void 0 : _a29.with(DocSkeletonManagerService);
 }
 __name(getCommandSkeleton, "getCommandSkeleton");
 function getRichTextEditPath(docDataModel, segmentId = "") {
@@ -286,8 +282,8 @@ function addCustomRangeFactory(accessor, param, body) {
 }
 __name(addCustomRangeFactory, "addCustomRangeFactory");
 function addCustomRangeBySelectionFactory(accessor, param) {
-  var _a28;
-  const { rangeId, rangeType, wholeEntity, properties, unitId, selection: propSelection } = param, docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), selection = propSelection != null ? propSelection : (_a28 = docSelectionManagerService.getTextRanges({ unitId, subUnitId: unitId })) == null ? void 0 : _a28[0], segmentId = selection == null ? void 0 : selection.segmentId;
+  var _a29;
+  const { rangeId, rangeType, wholeEntity, properties, unitId, selection: propSelection } = param, docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), selection = propSelection != null ? propSelection : (_a29 = docSelectionManagerService.getTextRanges({ unitId, subUnitId: unitId })) == null ? void 0 : _a29[0], segmentId = selection == null ? void 0 : selection.segmentId;
   if (!selection)
     return !1;
   const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
@@ -320,8 +316,8 @@ function addCustomRangeBySelectionFactory(accessor, param) {
 }
 __name(addCustomRangeBySelectionFactory, "addCustomRangeBySelectionFactory");
 function deleteCustomRangeFactory(accessor, params) {
-  var _a28;
-  const { unitId, segmentId, insert } = params, univerInstanceService = accessor.get(IUniverInstanceService), selection = (_a28 = accessor.get(DocSelectionManagerService).getTextRanges({ unitId, subUnitId: unitId })) == null ? void 0 : _a28[0], documentDataModel = univerInstanceService.getUnit(unitId);
+  var _a29;
+  const { unitId, segmentId, insert } = params, univerInstanceService = accessor.get(IUniverInstanceService), selection = (_a29 = accessor.get(DocSelectionManagerService).getTextRanges({ unitId, subUnitId: unitId })) == null ? void 0 : _a29[0], documentDataModel = univerInstanceService.getUnit(unitId);
   if (!documentDataModel)
     return !1;
   const textRange = selection != null && selection.collapsed ? { index: selection.startOffset } : void 0, doMutation = {
@@ -349,13 +345,28 @@ function hasParagraphInTable(paragraph, tables) {
   return tables.some((table) => paragraph.startIndex > table.startIndex && paragraph.startIndex < table.endIndex);
 }
 __name(hasParagraphInTable, "hasParagraphInTable");
+function getTextRunAtPosition(textRuns, position, cacheStyle) {
+  for (let i = textRuns.length - 1; i >= 0; i--) {
+    const textRun = textRuns[i], { st, ed } = textRun;
+    if (position > st && position <= ed)
+      return {
+        ...textRun,
+        ts: {
+          ...textRun.ts,
+          ...cacheStyle
+        }
+      };
+  }
+  return cacheStyle ? { ts: cacheStyle } : null;
+}
+__name(getTextRunAtPosition, "getTextRunAtPosition");
 function replaceSelectionFactory(accessor, params) {
-  var _a28, _b2, _c, _d;
+  var _a29, _b2, _c, _d;
   const { unitId, body: insertBody, doc } = params;
   let docDataModel = doc;
   if (docDataModel || (docDataModel = accessor.get(IUniverInstanceService).getUnit(unitId)), !docDataModel)
     return !1;
-  const segmentId = (_a28 = params.selection) == null ? void 0 : _a28.segmentId, body = (_b2 = docDataModel.getSelfOrHeaderFooterModel(segmentId)) == null ? void 0 : _b2.getBody();
+  const segmentId = (_a29 = params.selection) == null ? void 0 : _a29.segmentId, body = (_b2 = docDataModel.getSelfOrHeaderFooterModel(segmentId)) == null ? void 0 : _b2.getBody();
   if (!body) return !1;
   const docSelectionManagerService = accessor.get(DocSelectionManagerService), selection = (_c = params.selection) != null ? _c : docSelectionManagerService.getActiveTextRange();
   if (!selection || !body)
@@ -541,15 +552,11 @@ function getMutationActions(segmentId, docDatModel, prevBody, body) {
   const textX = new TextX(), jsonX = JSONX.getInstance(), deleteLen = (prevBody == null ? void 0 : prevBody.dataStream.length) - 2;
   deleteLen > 0 && textX.push({
     t: TextXActionType.DELETE,
-    len: deleteLen,
-    line: 0,
-    segmentId
+    len: deleteLen
   }), body.dataStream.length > 0 && textX.push({
     t: TextXActionType.INSERT,
     body,
-    len: body.dataStream.length,
-    line: 0,
-    segmentId
+    len: body.dataStream.length
   });
   const path = getRichTextEditPath(docDatModel, segmentId);
   return jsonX.editOp(textX.serialize(), path);
@@ -775,7 +782,7 @@ const _NodePositionConvertToCursor = class _NodePositionConvertToCursor {
   }
   // eslint-disable-next-line max-lines-per-function, complexity
   _selectionIterator(startPosition, endPosition, func) {
-    var _a28, _b2;
+    var _a29, _b2;
     const skeleton = this._docSkeleton;
     if (!skeleton)
       return [];
@@ -796,7 +803,7 @@ const _NodePositionConvertToCursor = class _NodePositionConvertToCursor {
     for (let p2 = skipPageIndex; p2 <= endIndex; p2++) {
       const page = pages[p2], { headerId, footerId, pageWidth } = page;
       let segmentPage2 = page;
-      if (pageType === DocumentSkeletonPageType.HEADER ? segmentPage2 = (_a28 = skeHeaders.get(headerId)) == null ? void 0 : _a28.get(pageWidth) : pageType === DocumentSkeletonPageType.FOOTER ? segmentPage2 = (_b2 = skeFooters.get(footerId)) == null ? void 0 : _b2.get(pageWidth) : pageType === DocumentSkeletonPageType.CELL && (segmentPage2 = getPageFromPath(skeletonData, path)), segmentPage2 == null) {
+      if (pageType === DocumentSkeletonPageType.HEADER ? segmentPage2 = (_a29 = skeHeaders.get(headerId)) == null ? void 0 : _a29.get(pageWidth) : pageType === DocumentSkeletonPageType.FOOTER ? segmentPage2 = (_b2 = skeFooters.get(footerId)) == null ? void 0 : _b2.get(pageWidth) : pageType === DocumentSkeletonPageType.CELL && (segmentPage2 = getPageFromPath(skeletonData, path)), segmentPage2 == null) {
         this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
         continue;
       }
@@ -1100,8 +1107,8 @@ const _TextRange = class _TextRange {
   }
   // The start position of the range
   get startOffset() {
-    var _a28;
-    const { startOffset } = (_a28 = getOneTextSelectionRange(this._cursorList)) != null ? _a28 : {}, body = this._docSkeleton.getViewModel().getDataModel().getSelfOrHeaderFooterModel(this._segmentId).getBody();
+    var _a29;
+    const { startOffset } = (_a29 = getOneTextSelectionRange(this._cursorList)) != null ? _a29 : {}, body = this._docSkeleton.getViewModel().getDataModel().getSelfOrHeaderFooterModel(this._segmentId).getBody();
     if (startOffset == null || body == null)
       return startOffset;
     const maxLength = body.dataStream.length - 2;
@@ -1109,8 +1116,8 @@ const _TextRange = class _TextRange {
   }
   // The end position of the range
   get endOffset() {
-    var _a28;
-    const { endOffset } = (_a28 = getOneTextSelectionRange(this._cursorList)) != null ? _a28 : {}, body = this._docSkeleton.getViewModel().getDataModel().getSelfOrHeaderFooterModel(this._segmentId).getBody();
+    var _a29;
+    const { endOffset } = (_a29 = getOneTextSelectionRange(this._cursorList)) != null ? _a29 : {}, body = this._docSkeleton.getViewModel().getDataModel().getSelfOrHeaderFooterModel(this._segmentId).getBody();
     if (endOffset == null || body == null)
       return endOffset;
     const maxLength = body.dataStream.length - 2;
@@ -1176,15 +1183,15 @@ const _TextRange = class _TextRange {
     return this._anchorShape;
   }
   activeStatic() {
-    var _a28, _b2;
+    var _a29, _b2;
     (_b2 = this._anchorShape) == null || _b2.setProps({
-      stroke: ((_a28 = this.style) == null ? void 0 : _a28.strokeActive) || getColor(COLORS.black, 1)
+      stroke: ((_a29 = this.style) == null ? void 0 : _a29.strokeActive) || getColor(COLORS.black, 1)
     });
   }
   deactivateStatic() {
-    var _a28, _b2;
+    var _a29, _b2;
     (_b2 = this._anchorShape) == null || _b2.setProps({
-      stroke: ((_a28 = this.style) == null ? void 0 : _a28.stroke) || getColor(COLORS.black, 0)
+      stroke: ((_a29 = this.style) == null ? void 0 : _a29.stroke) || getColor(COLORS.black, 0)
     });
   }
   isActive() {
@@ -1197,8 +1204,8 @@ const _TextRange = class _TextRange {
     this._current = !1;
   }
   dispose() {
-    var _a28, _b2;
-    (_a28 = this._rangeShape) == null || _a28.dispose(), this._rangeShape = null, (_b2 = this._anchorShape) == null || _b2.dispose(), this._anchorShape = null, this._anchorBlinkTimer && (clearInterval(this._anchorBlinkTimer), this._anchorBlinkTimer = null);
+    var _a29, _b2;
+    (_a29 = this._rangeShape) == null || _a29.dispose(), this._rangeShape = null, (_b2 = this._anchorShape) == null || _b2.dispose(), this._anchorShape = null, this._anchorBlinkTimer && (clearInterval(this._anchorBlinkTimer), this._anchorBlinkTimer = null);
   }
   isIntersection(compareRange) {
     const { startOffset: activeStart, endOffset: activeEnd } = this, { startOffset: compareStart, endOffset: compareEnd } = compareRange;
@@ -1206,9 +1213,9 @@ const _TextRange = class _TextRange {
   }
   // render cursor and selection.
   refresh() {
-    var _a28, _b2;
+    var _a29, _b2;
     const { _document, _docSkeleton } = this, anchor = this.anchorNodePosition, focus = this.focusNodePosition;
-    if ((_a28 = this._anchorShape) == null || _a28.hide(), (_b2 = this._rangeShape) == null || _b2.hide(), this._isEmpty())
+    if ((_a29 = this._anchorShape) == null || _a29.hide(), (_b2 = this._rangeShape) == null || _b2.hide(), this._isEmpty())
       return;
     const documentOffsetConfig = _document.getOffsetConfig(), { docsLeft, docsTop } = documentOffsetConfig, convertor = new NodePositionConvertToCursor(documentOffsetConfig, _docSkeleton);
     if (this._isCollapsed()) {
@@ -1240,14 +1247,14 @@ const _TextRange = class _TextRange {
     return anchor.isBack === focus.isBack;
   }
   _createOrUpdateRange(pointsGroup, left, top) {
-    var _a28;
+    var _a29;
     if (this._rangeShape) {
       this._rangeShape.translate(left, top), this._rangeShape.updatePointGroup(pointsGroup), this._rangeShape.show();
       return;
     }
     const OPACITY = 0.3, polygon = new RegularPolygon(TEXT_RANGE_KEY_PREFIX + Tools.generateRandomId(ID_LENGTH$2), {
       pointsGroup,
-      fill: ((_a28 = this.style) == null ? void 0 : _a28.fill) || getColor(COLORS.black, OPACITY),
+      fill: ((_a29 = this.style) == null ? void 0 : _a29.fill) || getColor(COLORS.black, OPACITY),
       left,
       top,
       evented: !1,
@@ -1256,14 +1263,14 @@ const _TextRange = class _TextRange {
     this._rangeShape = polygon, this._scene.addObject(polygon, TEXT_RANGE_LAYER_INDEX);
   }
   _createOrUpdateAnchor(pointsGroup, docsLeft, docsTop, glyph) {
-    var _a28, _b2, _c;
+    var _a29, _b2, _c;
     const bounding = getAnchorBounding(pointsGroup), { left: boundingLeft } = bounding;
     let { top: boundingTop, height } = bounding;
     const MIN_CURSOR_HEIGHT = 14;
     height < MIN_CURSOR_HEIGHT && (boundingTop -= MIN_CURSOR_HEIGHT - height, height = MIN_CURSOR_HEIGHT);
     const ITALIC_DEGREE = 12;
     let left = boundingLeft + docsLeft;
-    const top = boundingTop + docsTop, isItalic = ((_a28 = glyph == null ? void 0 : glyph.ts) == null ? void 0 : _a28.it) === BooleanNumber.TRUE;
+    const top = boundingTop + docsTop, isItalic = ((_a29 = glyph == null ? void 0 : glyph.ts) == null ? void 0 : _a29.it) === BooleanNumber.TRUE;
     if (isItalic && (left += height * Math.tan(ITALIC_DEGREE * Math.PI / 180) / 2), this._anchorShape) {
       this._anchorShape.transformByState({ left, top, height }), this._anchorShape.show(), isItalic ? this._anchorShape.skew(-ITALIC_DEGREE, 0) : this._anchorShape.skew(0, 0);
       return;
@@ -1351,16 +1358,16 @@ const _RectRange = class _RectRange {
     return this._segmentPage;
   }
   get spanEntireRow() {
-    var _a28;
-    const table = (_a28 = this._docSkeleton.getViewModel().getSnapshot().tableSource) == null ? void 0 : _a28[this._tableId], { _startCol, _endCol } = this;
+    var _a29;
+    const table = (_a29 = this._docSkeleton.getViewModel().getSnapshot().tableSource) == null ? void 0 : _a29[this._tableId], { _startCol, _endCol } = this;
     if (table == null)
       throw new Error("Table is not found.");
     const { tableColumns } = table;
     return _startCol === 0 && _endCol === tableColumns.length - 1;
   }
   get spanEntireColumn() {
-    var _a28;
-    const table = (_a28 = this._docSkeleton.getViewModel().getSnapshot().tableSource) == null ? void 0 : _a28[this._tableId], { _startRow, _endRow } = this;
+    var _a29;
+    const table = (_a29 = this._docSkeleton.getViewModel().getSnapshot().tableSource) == null ? void 0 : _a29[this._tableId], { _startRow, _endRow } = this;
     if (table == null)
       throw new Error("Table is not found.");
     const { tableRows } = table;
@@ -1391,8 +1398,8 @@ const _RectRange = class _RectRange {
     this._current = !1;
   }
   dispose() {
-    var _a28;
-    (_a28 = this._rangeShape) == null || _a28.dispose(), this._rangeShape = null;
+    var _a29;
+    (_a29 = this._rangeShape) == null || _a29.dispose(), this._rangeShape = null;
   }
   isIntersection(compareRange) {
     const { startRow, startColumn, endRow, endColumn } = this, { startRow: cStartRow, startColumn: cStartColumn, endRow: cEndRow, endColumn: cEndColumn } = compareRange, rect1 = {
@@ -1409,8 +1416,8 @@ const _RectRange = class _RectRange {
     return Rectangle.hasIntersectionBetweenTwoRect(rect1, rect2);
   }
   refresh() {
-    var _a28;
-    (_a28 = this._rangeShape) == null || _a28.hide();
+    var _a29;
+    (_a29 = this._rangeShape) == null || _a29.hide();
     const { startNodePosition, endNodePosition, _document, _docSkeleton } = this, documentOffsetConfig = _document.getOffsetConfig(), { docsLeft, docsTop } = documentOffsetConfig, rectInfo = new NodePositionConvertToRectRange(documentOffsetConfig, _docSkeleton).getRangePointData(startNodePosition, endNodePosition);
     if (rectInfo == null)
       return;
@@ -1421,14 +1428,14 @@ const _RectRange = class _RectRange {
     this._startRow = startRow, this._endRow = endRow, this._startCol = startCol, this._endCol = endCol, this._tableId = tableId;
   }
   _createOrUpdateRange(pointsGroup, left, top) {
-    var _a28;
+    var _a29;
     if (this._rangeShape) {
       this._rangeShape.translate(left, top), this._rangeShape.updatePointGroup(pointsGroup), this._rangeShape.show();
       return;
     }
     const OPACITY = 0.3, polygon = new RegularPolygon(RECT_RANGE_KEY_PREFIX + Tools.generateRandomId(ID_LENGTH$1), {
       pointsGroup,
-      fill: ((_a28 = this.style) == null ? void 0 : _a28.fill) || getColor(COLORS.black, OPACITY),
+      fill: ((_a29 = this.style) == null ? void 0 : _a29.fill) || getColor(COLORS.black, OPACITY),
       left,
       top,
       evented: !1,
@@ -1548,8 +1555,8 @@ function getCanvasOffsetByEngine(engine) {
 }
 __name(getCanvasOffsetByEngine, "getCanvasOffsetByEngine");
 function getParagraphInfoByGlyph(node) {
-  var _a28;
-  const line = (_a28 = node.parent) == null ? void 0 : _a28.parent, column = line == null ? void 0 : line.parent;
+  var _a29;
+  const line = (_a29 = node.parent) == null ? void 0 : _a29.parent, column = line == null ? void 0 : line.parent;
   if (line == null || column == null)
     return;
   const { paragraphIndex } = line, lines = column.lines.filter((line2) => line2.paragraphIndex === paragraphIndex);
@@ -1606,11 +1613,11 @@ function serializeRectRange(rectRange) {
   };
 }
 __name(serializeRectRange, "serializeRectRange");
-var __defProp$q = Object.defineProperty, __getOwnPropDesc$q = Object.getOwnPropertyDescriptor, __decorateClass$q = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$r = Object.defineProperty, __getOwnPropDesc$r = Object.getOwnPropertyDescriptor, __decorateClass$r = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$q(target, key, result), result;
-}, "__decorateClass$q"), __decorateParam$q = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$q"), _a2;
+  return kind && result && __defProp$r(target, key, result), result;
+}, "__decorateClass$r"), __decorateParam$r = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$r"), _a2;
 let DocSelectionRenderService = (_a2 = class extends RxDisposable {
   constructor(_context, _layoutService, _logService, _univerInstanceService, _docSkeletonManagerService) {
     super();
@@ -1878,7 +1885,7 @@ let DocSelectionRenderService = (_a2 = class extends RxDisposable {
   // Handle pointer down.
   // eslint-disable-next-line max-lines-per-function, complexity
   __onPointDown(evt) {
-    var _a28, _b2;
+    var _a29, _b2;
     this._editorFocusing = !0;
     const { scene, mainComponent } = this._context, skeleton = this._docSkeletonManagerService.getSkeleton(), { offsetX: evtOffsetX, offsetY: evtOffsetY } = evt, startNode = this._findNodeByCoord(evtOffsetX, evtOffsetY, {
       strict: !1,
@@ -1899,7 +1906,7 @@ let DocSelectionRenderService = (_a2 = class extends RxDisposable {
     const { segmentId, segmentPage } = startNode;
     segmentId && this._currentSegmentId && segmentId !== this._currentSegmentId && this.setSegment(segmentId), segmentId && segmentPage !== this._currentSegmentPage && this.setSegmentPage(segmentPage), this._anchorNodePosition = position, evt.shiftKey && this._getActiveRangeInstance() ? this._updateActiveRangePosition(position) : evt.ctrlKey ? this._removeAllCollapsedTextRanges() : this._isEmpty() || this._removeAllRanges(), scene.disableObjectsEvent();
     const scrollTimer = ScrollTimer.create(scene);
-    this._scrollTimers.push(scrollTimer), scrollTimer.startScroll(evtOffsetX, evtOffsetY), this._onSelectionStart$.next((_a28 = this._getActiveRangeInstance()) == null ? void 0 : _a28.startNodePosition), (_b2 = scene.getTransformer()) == null || _b2.clearSelectedObjects();
+    this._scrollTimers.push(scrollTimer), scrollTimer.startScroll(evtOffsetX, evtOffsetY), this._onSelectionStart$.next((_a29 = this._getActiveRangeInstance()) == null ? void 0 : _a29.startNodePosition), (_b2 = scene.getTransformer()) == null || _b2.clearSelectedObjects();
     let preMoveOffsetX = evtOffsetX, preMoveOffsetY = evtOffsetY;
     this._scenePointerMoveSubs.push(scene.onPointerMove$.subscribeEvent((moveEvt) => {
       const { offsetX: moveOffsetX, offsetY: moveOffsetY } = moveEvt;
@@ -2125,8 +2132,8 @@ let DocSelectionRenderService = (_a2 = class extends RxDisposable {
     return this._rangeList.length === 0 && this._rectRangeList.length === 0;
   }
   _getCanvasOffset() {
-    var _a28;
-    const engine = (_a28 = this._context.scene) == null ? void 0 : _a28.getEngine();
+    var _a29;
+    const engine = (_a29 = this._context.scene) == null ? void 0 : _a29.getEngine();
     return getCanvasOffsetByEngine(engine);
   }
   _updateInputPosition(forceFocus = !1) {
@@ -2140,7 +2147,7 @@ let DocSelectionRenderService = (_a2 = class extends RxDisposable {
     canvasLeft += x, canvasTop += y, this.activate(canvasLeft, canvasTop, forceFocus);
   }
   _moving(moveOffsetX, moveOffsetY) {
-    var _a28, _b2;
+    var _a29, _b2;
     const focusNode = this._findNodeByCoord(moveOffsetX, moveOffsetY, {
       strict: !0,
       segmentId: this._currentSegmentId,
@@ -2166,7 +2173,7 @@ let DocSelectionRenderService = (_a2 = class extends RxDisposable {
     if (ranges == null)
       return;
     const { textRanges, rectRanges } = ranges;
-    this._rangeList.length > 0 && textRanges.length > 0 && this._interactTextRanges(textRanges), this._rectRangeList.length > 0 && rectRanges.length > 0 && this._interactRectRanges(rectRanges), this._addTextRangesToCache(textRanges), this._addRectRangesToCache(rectRanges), this.deactivate(), (_b2 = (_a28 = this._context.scene) == null ? void 0 : _a28.getEngine()) == null || _b2.setRemainCapture();
+    this._rangeList.length > 0 && textRanges.length > 0 && this._interactTextRanges(textRanges), this._rectRangeList.length > 0 && rectRanges.length > 0 && this._interactRectRanges(rectRanges), this._addTextRangesToCache(textRanges), this._addRectRangesToCache(rectRanges), this.deactivate(), (_b2 = (_a29 = this._context.scene) == null ? void 0 : _a29.getEngine()) == null || _b2.setRemainCapture();
   }
   __attachScrollEvent() {
     const viewport = this.activeViewPort;
@@ -2300,11 +2307,11 @@ let DocSelectionRenderService = (_a2 = class extends RxDisposable {
     this._onInputBefore$.complete(), this._onKeydown$.complete(), this._onInput$.complete(), this._onCompositionstart$.complete(), this._onCompositionupdate$.complete(), this._onCompositionend$.complete(), this._onSelectionStart$.complete(), this._textSelectionInner$.complete(), this._onPaste$.complete(), this._onFocus$.complete(), this._onBlur$.complete(), this._onPointerDown$.complete();
   }
 }, __name(_a2, "DocSelectionRenderService"), _a2);
-DocSelectionRenderService = __decorateClass$q([
-  __decorateParam$q(1, ILayoutService),
-  __decorateParam$q(2, ILogService),
-  __decorateParam$q(3, IUniverInstanceService),
-  __decorateParam$q(4, Inject(DocSkeletonManagerService))
+DocSelectionRenderService = __decorateClass$r([
+  __decorateParam$r(1, ILayoutService),
+  __decorateParam$r(2, ILogService),
+  __decorateParam$r(3, IUniverInstanceService),
+  __decorateParam$r(4, Inject(DocSkeletonManagerService))
 ], DocSelectionRenderService);
 const _Editor = class _Editor extends Disposable {
   constructor(_param, _univerInstanceService, _docSelectionManagerService, _commandService, _undoRedoService) {
@@ -2466,8 +2473,8 @@ const _Editor = class _Editor extends Disposable {
     return this._param.render;
   }
   isSingleChoice() {
-    var _a28;
-    return (_a28 = this._param.isSingleChoice) != null ? _a28 : !1;
+    var _a29;
+    return (_a29 = this._param.isSingleChoice) != null ? _a29 : !1;
   }
   /** @deprecated */
   setOpenForSheetUnitId(unitId) {
@@ -2537,8 +2544,8 @@ const _Editor = class _Editor extends Disposable {
    * @deprecated use getDocumentData.
    */
   getValue() {
-    var _a28;
-    return (((_a28 = this._getDocDataModel().getBody()) == null ? void 0 : _a28.dataStream) || "").replace(/\r\n/g, "").replace(/\n/g, "").replace(/\n/g, "");
+    var _a29;
+    return (((_a29 = this._getDocDataModel().getBody()) == null ? void 0 : _a29.dataStream) || "").replace(/\r\n/g, "").replace(/\n/g, "").replace(/\n/g, "");
   }
   /**
    * @deprecated use getDocumentData.
@@ -2559,7 +2566,7 @@ const _Editor = class _Editor extends Disposable {
    * @deprecated.
    */
   verticalAlign() {
-    var _a28;
+    var _a29;
     const docDataModel = this._getDocDataModel();
     if (docDataModel == null)
       return;
@@ -2571,7 +2578,7 @@ const _Editor = class _Editor extends Disposable {
       return;
     }
     let fontSize = DEFAULT_STYLES.fs;
-    (_a28 = this._param.canvasStyle) != null && _a28.fontSize && (fontSize = this._param.canvasStyle.fontSize);
+    (_a29 = this._param.canvasStyle) != null && _a29.fontSize && (fontSize = this._param.canvasStyle.fontSize);
     const top = (height - fontSize * 4 / 3) / 2 - 2;
     docDataModel.updateDocumentDataMargin({
       t: top < 0 ? 0 : top
@@ -2581,29 +2588,29 @@ const _Editor = class _Editor extends Disposable {
    * @deprecated.
    */
   updateCanvasStyle() {
-    var _a28;
+    var _a29;
     const docDataModel = this._getDocDataModel();
     if (docDataModel == null)
       return;
     const documentStyle = {};
-    (_a28 = this._param.canvasStyle) != null && _a28.fontSize && (documentStyle.textStyle == null && (documentStyle.textStyle = {}), documentStyle.textStyle.fs = this._param.canvasStyle.fontSize), docDataModel.updateDocumentStyle(documentStyle);
+    (_a29 = this._param.canvasStyle) != null && _a29.fontSize && (documentStyle.textStyle == null && (documentStyle.textStyle = {}), documentStyle.textStyle.fs = this._param.canvasStyle.fontSize), docDataModel.updateDocumentStyle(documentStyle);
   }
   _getDocDataModel() {
     const editorUnitId = this._getEditorId();
     return this._univerInstanceService.getUnit(editorUnitId, UniverInstanceType.UNIVER_DOC);
   }
   _getEditorId() {
-    var _a28;
-    return ((_a28 = this._param.initialSnapshot) == null ? void 0 : _a28.id) || this._param.editorUnitId || "";
+    var _a29;
+    return ((_a29 = this._param.initialSnapshot) == null ? void 0 : _a29.id) || this._param.editorUnitId || "";
   }
 };
 __name(_Editor, "Editor");
 let Editor = _Editor;
-var __defProp$p = Object.defineProperty, __getOwnPropDesc$p = Object.getOwnPropertyDescriptor, __decorateClass$p = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$q = Object.defineProperty, __getOwnPropDesc$q = Object.getOwnPropertyDescriptor, __decorateClass$q = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$p(target, key, result), result;
-}, "__decorateClass$p"), __decorateParam$p = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$p");
+  return kind && result && __defProp$q(target, key, result), result;
+}, "__decorateClass$q"), __decorateParam$q = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$q");
 const editorFocusInElements = [
   "univer-editor",
   "univer-range-selector",
@@ -2722,7 +2729,7 @@ let EditorService = (_b = class extends Disposable {
     }), this._focusStyle$.next(), this._blur$.next(null);
   }
   /** @deprecated */
-  focus(editorUnitId = ((_a28) => (_a28 = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : _a28.getUnitId())()) {
+  focus(editorUnitId = ((_a29) => (_a29 = this._univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : _a29.getUnitId())()) {
     if (editorUnitId == null)
       return;
     const editor = this.getEditor(editorUnitId);
@@ -2789,8 +2796,8 @@ let EditorService = (_b = class extends Disposable {
   }
   /** @deprecated */
   isVisible(id) {
-    var _a28;
-    return (_a28 = this.getEditor(id)) == null ? void 0 : _a28.isVisible();
+    var _a29;
+    return (_a29 = this.getEditor(id)) == null ? void 0 : _a29.isVisible();
   }
   /** @deprecated */
   setOperationSheetUnitId(unitId) {
@@ -2809,7 +2816,7 @@ let EditorService = (_b = class extends Disposable {
     return this._currentSheetSubUnitId;
   }
   register(config, container) {
-    var _a28, _b2, _c, _d;
+    var _a29, _b2, _c, _d;
     const { initialSnapshot, canvasStyle = {} } = config, editorUnitId = initialSnapshot.id;
     this._univerInstanceService.getUnit(editorUnitId, UniverInstanceType.UNIVER_DOC) == null && this._univerInstanceService.createUnit(
       UniverInstanceType.UNIVER_DOC,
@@ -2826,7 +2833,7 @@ let EditorService = (_b = class extends Disposable {
         this._commandService,
         this._undoRedoService
       );
-      this._editors.set(editorUnitId, editor), config.scrollBar || (_d = (_c = (_b2 = (_a28 = render2.mainComponent) == null ? void 0 : _a28.getScene()) == null ? void 0 : _b2.getViewports()) == null ? void 0 : _c[0].getScrollBar()) == null || _d.dispose(), !editor.isSheetEditor() && !config.noNeedVerticalAlign && (editor.verticalAlign(), editor.updateCanvasStyle());
+      this._editors.set(editorUnitId, editor), config.scrollBar || (_d = (_c = (_b2 = (_a29 = render2.mainComponent) == null ? void 0 : _a29.getScene()) == null ? void 0 : _b2.getViewports()) == null ? void 0 : _c[0].getScrollBar()) == null || _d.dispose(), !editor.isSheetEditor() && !config.noNeedVerticalAlign && (editor.verticalAlign(), editor.updateCanvasStyle());
     }
     return toDisposable(() => {
       this._unRegister(editorUnitId);
@@ -2896,14 +2903,14 @@ let EditorService = (_b = class extends Disposable {
     };
   }
 }, __name(_b, "EditorService"), _b);
-EditorService = __decorateClass$p([
-  __decorateParam$p(0, IUniverInstanceService),
-  __decorateParam$p(1, IRenderManagerService),
-  __decorateParam$p(2, Inject(LexerTreeBuilder)),
-  __decorateParam$p(3, Inject(DocSelectionManagerService)),
-  __decorateParam$p(4, IContextService),
-  __decorateParam$p(5, ICommandService),
-  __decorateParam$p(6, IUndoRedoService)
+EditorService = __decorateClass$q([
+  __decorateParam$q(0, IUniverInstanceService),
+  __decorateParam$q(1, IRenderManagerService),
+  __decorateParam$q(2, Inject(LexerTreeBuilder)),
+  __decorateParam$q(3, Inject(DocSelectionManagerService)),
+  __decorateParam$q(4, IContextService),
+  __decorateParam$q(5, ICommandService),
+  __decorateParam$q(6, IUndoRedoService)
 ], EditorService);
 const IEditorService = createIdentifier("univer.editor.service"), textEditorContainer = "univer-text-editor-container", textEditorContainerActive = "univer-text-editor-container-active", textEditorContainerError = "univer-text-editor-container-error", textEditorContainerDisabled = "univer-text-editor-container-disabled", textEditorContainerPlaceholder = "univer-text-editor-container-placeholder", textEditorValidationError = "univer-text-editor-validation-error", styles$7 = {
   textEditorContainer,
@@ -2933,7 +2940,7 @@ function genSnapShotByValue(id = "", value = "") {
     },
     tableSource: {},
     documentStyle: {
-      documentFlavor: DocumentFlavor.MODERN
+      documentFlavor: DocumentFlavor.UNSPECIFIED
     }
   };
 }
@@ -3105,15 +3112,15 @@ function replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend) {
   var attrs = __assign({}, node.attrs);
   extend != null && extend.colorChannel1 && attrs.fill === "colorChannel1" && (attrs.fill = extend.colorChannel1);
   var defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a28) {
-    var key = _a28[0], value = _a28[1];
+  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a29) {
+    var key = _a29[0], value = _a29[1];
     typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
   })), attrs;
 }
 __name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
 function replaceRuntimeIdsInDefs(node, runtimeProps) {
-  var _a28, defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a28 = node.children) === null || _a28 === void 0) && _a28.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
+  var _a29, defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a29 = node.children) === null || _a29 === void 0) && _a29.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
     return typeof child.attrs.id == "string" && defIds && defIds.indexOf(child.attrs.id) > -1 ? __assign(__assign({}, child), { attrs: __assign(__assign({}, child.attrs), { id: child.attrs.id + runtimeProps.idSuffix }) }) : child;
   }) }) : node;
 }
@@ -3352,8 +3359,8 @@ function RangeSelector(props) {
   }
   __name(handleAddRange, "handleAddRange");
   function getSheetIdByName(name) {
-    var _a28, _b2;
-    return ((_b2 = (_a28 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a28.getSheetBySheetName(name)) == null ? void 0 : _b2.getSheetId()) || "";
+    var _a29, _b2;
+    return ((_b2 = (_a29 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a29.getSheetBySheetName(name)) == null ? void 0 : _b2.getSheetId()) || "";
   }
   __name(getSheetIdByName, "getSheetIdByName");
   function handleTextValueChange(value2) {
@@ -3436,13 +3443,13 @@ function getSegmentId(documentStyle, editArea, pageIndex) {
 }
 __name(getSegmentId, "getSegmentId");
 const DocHeaderFooterOptions = /* @__PURE__ */ __name((props) => {
-  const localeService = useDependency(LocaleService), univerInstanceService = useDependency(IUniverInstanceService), renderManagerService = useDependency(IRenderManagerService), commandService = useDependency(ICommandService), docSelectionManagerService = useDependency(DocSelectionManagerService), layoutService = useDependency(ILayoutService), { unitId } = props, docSelectionRenderService = renderManagerService.getRenderById(unitId).with(DocSelectionRenderService), [options, setOptions] = useState({}), handleCheckboxChange = /* @__PURE__ */ __name((val, type) => {
-    var _a28;
+  const localeService = useDependency(LocaleService), univerInstanceService = useDependency(IUniverInstanceService), renderManagerService = useDependency(IRenderManagerService), commandService = useDependency(ICommandService), layoutService = useDependency(ILayoutService), { unitId } = props, docSelectionRenderService = renderManagerService.getRenderById(unitId).with(DocSelectionRenderService), [options, setOptions] = useState({}), handleCheckboxChange = /* @__PURE__ */ __name((val, type) => {
+    var _a29;
     setOptions((prev) => ({
       ...prev,
       [type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE
     }));
-    const docDataModel = univerInstanceService.getUniverDocInstance(unitId), documentStyle = docDataModel == null ? void 0 : docDataModel.getSnapshot().documentStyle, docSkeletonManagerService = (_a28 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a28.with(DocSkeletonManagerService), viewModel = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getViewModel();
+    const docDataModel = univerInstanceService.getUniverDocInstance(unitId), documentStyle = docDataModel == null ? void 0 : docDataModel.getSnapshot().documentStyle, docSkeletonManagerService = (_a29 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a29.with(DocSkeletonManagerService), viewModel = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getViewModel();
     if (documentStyle == null || viewModel == null)
       return;
     const editArea = viewModel.getEditArea();
@@ -3486,12 +3493,9 @@ const DocHeaderFooterOptions = /* @__PURE__ */ __name((props) => {
       }
     }), docSelectionRenderService.removeAllRanges(), docSelectionRenderService.blur();
   }, "handleMarginChange"), closeHeaderFooter = /* @__PURE__ */ __name(() => {
-    var _a28;
-    const renderObject = renderManagerService.getRenderById(unitId);
-    if (renderObject == null)
-      return;
-    const { scene } = renderObject, transformer = scene.getTransformerByCreate(), docSkeletonManagerService = renderObject.with(DocSkeletonManagerService), skeleton = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getSkeleton(), viewModel = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getViewModel(), render2 = renderManagerService.getRenderById(unitId);
-    render2 == null || viewModel == null || skeleton == null || (docSelectionManagerService.replaceTextRanges([]), transformer.clearSelectedObjects(), docSelectionRenderService.setSegment(""), docSelectionRenderService.setSegmentPage(-1), viewModel.setEditArea(DocumentEditArea.BODY), skeleton.calculate(), (_a28 = render2.mainComponent) == null || _a28.makeDirty(!0));
+    commandService.executeCommand(CloseHeaderFooterCommand.id, {
+      unitId
+    });
   }, "closeHeaderFooter");
   return useEffect(() => {
     const docDataModel = univerInstanceService.getUniverDocInstance(unitId), documentStyle = docDataModel == null ? void 0 : docDataModel.getSnapshot().documentStyle;
@@ -3569,8 +3573,8 @@ const DocHeaderFooterOptions = /* @__PURE__ */ __name((props) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.optionsSection, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { onClick: closeHeaderFooter, children: localeService.t("headerFooter.closeHeaderFooter") }) })
   ] });
 }, "DocHeaderFooterOptions"), DocHeaderFooterPanel = /* @__PURE__ */ __name(() => {
-  var _a28;
-  const localeService = useDependency(LocaleService), renderManagerService = useDependency(IRenderManagerService), unitId = useDependency(IUniverInstanceService).getCurrentUniverDocInstance().getUnitId(), viewModel = ((_a28 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a28.with(DocSkeletonManagerService)).getViewModel(), [isEditHeaderFooter, setIsEditHeaderFooter] = useState(!0);
+  var _a29;
+  const localeService = useDependency(LocaleService), renderManagerService = useDependency(IRenderManagerService), unitId = useDependency(IUniverInstanceService).getCurrentUniverDocInstance().getUnitId(), viewModel = ((_a29 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a29.with(DocSkeletonManagerService)).getViewModel(), [isEditHeaderFooter, setIsEditHeaderFooter] = useState(!0);
   return useEffect(() => {
     const editArea = viewModel.getEditArea();
     setIsEditHeaderFooter(editArea !== DocumentEditArea.BODY);
@@ -3633,11 +3637,11 @@ const _TextBubbleShape = class _TextBubbleShape extends Shape {
 };
 __name(_TextBubbleShape, "TextBubbleShape");
 let TextBubbleShape = _TextBubbleShape;
-var __defProp$o = Object.defineProperty, __getOwnPropDesc$o = Object.getOwnPropertyDescriptor, __decorateClass$o = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$p = Object.defineProperty, __getOwnPropDesc$p = Object.getOwnPropertyDescriptor, __decorateClass$p = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$o(target, key, result), result;
-}, "__decorateClass$o"), __decorateParam$o = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$o");
+  return kind && result && __defProp$p(target, key, result), result;
+}, "__decorateClass$p"), __decorateParam$p = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$p");
 const HEADER_FOOTER_STROKE_COLOR = "rgba(58, 96, 247, 1)", HEADER_FOOTER_FILL_COLOR = "rgba(58, 96, 247, 0.08)";
 var HeaderFooterType = /* @__PURE__ */ ((HeaderFooterType2) => (HeaderFooterType2[HeaderFooterType2.FIRST_PAGE_HEADER = 0] = "FIRST_PAGE_HEADER", HeaderFooterType2[HeaderFooterType2.FIRST_PAGE_FOOTER = 1] = "FIRST_PAGE_FOOTER", HeaderFooterType2[HeaderFooterType2.DEFAULT_HEADER = 2] = "DEFAULT_HEADER", HeaderFooterType2[HeaderFooterType2.DEFAULT_FOOTER = 3] = "DEFAULT_FOOTER", HeaderFooterType2[HeaderFooterType2.EVEN_PAGE_HEADER = 4] = "EVEN_PAGE_HEADER", HeaderFooterType2[HeaderFooterType2.EVEN_PAGE_FOOTER = 5] = "EVEN_PAGE_FOOTER", HeaderFooterType2))(HeaderFooterType || {});
 function checkCreateHeaderFooterType(viewModel, editArea, segmentPage) {
@@ -3698,7 +3702,20 @@ let DocHeaderFooterController = (_a3 = class extends Disposable {
     this._context = _context, this._commandService = _commandService, this._editorService = _editorService, this._instanceSrv = _instanceSrv, this._renderManagerService = _renderManagerService, this._docSkeletonManagerService = _docSkeletonManagerService, this._docSelectionRenderService = _docSelectionRenderService, this._localeService = _localeService, this._componentManager = _componentManager, this._initialize();
   }
   _initialize() {
-    this._context.unit.getSnapshot().documentStyle.documentFlavor === DocumentFlavor.TRADITIONAL && (this._init(), this._drawHeaderFooterLabel(), this._initCustomComponents());
+    this._init(), this._drawHeaderFooterLabel(), this._initCustomComponents(), this._listenSwitchMode();
+  }
+  // Close header footer panel when switch mode.
+  _listenSwitchMode() {
+    this.disposeWithMe(
+      this._commandService.onCommandExecuted((command) => {
+        if (RichTextEditingMutation.id === command.id) {
+          const docDataModel = this._context.unit, editArea = this._docSkeletonManagerService.getViewModel().getEditArea(), documentFlavor = docDataModel.getSnapshot().documentStyle.documentFlavor;
+          editArea !== DocumentEditArea.BODY && documentFlavor === DocumentFlavor.MODERN && this._commandService.executeCommand(CloseHeaderFooterCommand.id, {
+            unitId: this._context.unitId
+          });
+        }
+      })
+    );
   }
   _initCustomComponents() {
     const componentManager = this._componentManager;
@@ -3711,7 +3728,7 @@ let DocHeaderFooterController = (_a3 = class extends Disposable {
   _initialMain(unitId) {
     const docObject = neoGetDocObject(this._context), { document: document2 } = docObject;
     this.disposeWithMe(document2.onDblclick$.subscribeEvent(async (evt) => {
-      if (this._isEditorReadOnly(unitId))
+      if (this._isEditorReadOnly(unitId) || !this._isTraditionalMode())
         return;
       const { offsetX, offsetY } = evt, {
         pageLayoutType = PageLayoutType.VERTICAL,
@@ -3756,7 +3773,7 @@ let DocHeaderFooterController = (_a3 = class extends Disposable {
       if (unitId == null)
         return;
       const currentRender = this._renderManagerService.getRenderById(unitId);
-      if (this._editorService.isEditor(unitId) || this._instanceSrv.getUniverDocInstance(unitId) == null || currentRender == null)
+      if (this._editorService.isEditor(unitId) || this._instanceSrv.getUniverDocInstance(unitId) == null || !this._isTraditionalMode() || currentRender == null)
         return;
       const { mainComponent } = currentRender, docsComponent = mainComponent;
       this.disposeWithMe(
@@ -3824,19 +3841,22 @@ let DocHeaderFooterController = (_a3 = class extends Disposable {
     const editor = this._editorService.getEditor(unitId);
     return editor ? editor.isReadOnly() : !1;
   }
+  _isTraditionalMode() {
+    return this._context.unit.getSnapshot().documentStyle.documentFlavor === DocumentFlavor.TRADITIONAL;
+  }
   _getDocDataModel() {
     return this._context.unit;
   }
 }, __name(_a3, "DocHeaderFooterController"), _a3);
-DocHeaderFooterController = __decorateClass$o([
-  __decorateParam$o(1, ICommandService),
-  __decorateParam$o(2, IEditorService),
-  __decorateParam$o(3, IUniverInstanceService),
-  __decorateParam$o(4, IRenderManagerService),
-  __decorateParam$o(5, Inject(DocSkeletonManagerService)),
-  __decorateParam$o(6, Inject(DocSelectionRenderService)),
-  __decorateParam$o(7, Inject(LocaleService)),
-  __decorateParam$o(8, Inject(ComponentManager))
+DocHeaderFooterController = __decorateClass$p([
+  __decorateParam$p(1, ICommandService),
+  __decorateParam$p(2, IEditorService),
+  __decorateParam$p(3, IUniverInstanceService),
+  __decorateParam$p(4, IRenderManagerService),
+  __decorateParam$p(5, Inject(DocSkeletonManagerService)),
+  __decorateParam$p(6, Inject(DocSelectionRenderService)),
+  __decorateParam$p(7, Inject(LocaleService)),
+  __decorateParam$p(8, Inject(ComponentManager))
 ], DocHeaderFooterController);
 const SidebarDocHeaderFooterPanelOperation = {
   id: "sidebar.operation.doc-header-footer-panel",
@@ -3942,8 +3962,8 @@ const CoreHeaderFooterCommandId = "doc.command.core-header-footer", CoreHeaderFo
   type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    var _a28;
-    const commandService = accessor.get(ICommandService), univerInstanceService = accessor.get(IUniverInstanceService), renderManagerService = accessor.get(IRenderManagerService), { unitId, segmentId, createType, headerFooterProps } = params, docSkeletonManagerService = (_a28 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a28.with(DocSkeletonManagerService), docDataModel = univerInstanceService.getUniverDocInstance(unitId), docViewModel = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getViewModel();
+    var _a29;
+    const commandService = accessor.get(ICommandService), univerInstanceService = accessor.get(IUniverInstanceService), renderManagerService = accessor.get(IRenderManagerService), { unitId, segmentId, createType, headerFooterProps } = params, docSkeletonManagerService = (_a29 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a29.with(DocSkeletonManagerService), docDataModel = univerInstanceService.getUniverDocInstance(unitId), docViewModel = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getViewModel();
     if (docDataModel == null || docViewModel == null)
       return !1;
     const editArea = docViewModel.getEditArea(), { documentStyle } = docDataModel.getSnapshot(), isUpdateMargin = (headerFooterProps == null ? void 0 : headerFooterProps.marginFooter) != null || (headerFooterProps == null ? void 0 : headerFooterProps.marginHeader) != null, textRanges = [{
@@ -3979,6 +3999,17 @@ const CoreHeaderFooterCommandId = "doc.command.core-header-footer", CoreHeaderFo
   id: "doc.command.open-header-footer-panel",
   type: CommandType.COMMAND,
   handler: /* @__PURE__ */ __name(async (accessor, _params) => accessor.get(ICommandService).executeCommand(SidebarDocHeaderFooterPanelOperation.id, { value: "open" }), "handler")
+}, CloseHeaderFooterCommand = {
+  id: "doc.command.close-header-footer",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    var _a29;
+    const commandService = accessor.get(ICommandService), renderManagerService = accessor.get(IRenderManagerService), docSelectionManagerService = accessor.get(DocSelectionManagerService), { unitId } = params, renderObject = renderManagerService.getRenderById(unitId);
+    if (renderObject == null)
+      return !1;
+    const { scene } = renderObject, transformer = scene.getTransformerByCreate(), docSkeletonManagerService = renderObject.with(DocSkeletonManagerService), docSelectionRenderService = renderObject.with(DocSelectionRenderService), skeleton = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getSkeleton(), viewModel = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getViewModel();
+    return viewModel == null || skeleton == null ? !1 : (docSelectionManagerService.replaceDocRanges([]), transformer.clearSelectedObjects(), docSelectionRenderService.setSegment(""), docSelectionRenderService.setSegmentPage(-1), viewModel.setEditArea(DocumentEditArea.BODY), skeleton.calculate(), (_a29 = renderObject.mainComponent) == null || _a29.makeDirty(!0), commandService.executeCommand(SidebarDocHeaderFooterPanelOperation.id, { value: "close" }), !0);
+  }, "handler")
 }, COMPONENT_PREFIX = "UI_PLUGIN_DOCS", COLOR_PICKER_COMPONENT = `${COMPONENT_PREFIX}_COLOR_PICKER_COMPONENT`, FONT_FAMILY_COMPONENT = `${COMPONENT_PREFIX}_FONT_FAMILY_COMPONENT`, FONT_FAMILY_ITEM_COMPONENT = `${COMPONENT_PREFIX}_FONT_FAMILY_ITEM_COMPONENT`, FONT_SIZE_COMPONENT = `${COMPONENT_PREFIX}_FONT_SIZE_COMPONENT`, docListTypePicker = "univer-doc-list-type-picker", docListTypePickerItem = "univer-doc-list-type-picker-item", docListTypePickerItemActive = "univer-doc-list-type-picker-item-active", styles$4 = {
   docListTypePicker,
   docListTypePickerItem,
@@ -4100,6 +4131,43 @@ const TabShortCut = {
     shift: !0
   }
 };
+var __defProp$o = Object.defineProperty, __getOwnPropDesc$o = Object.getOwnPropertyDescriptor, __decorateClass$o = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$o(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$o(target, key, result), result;
+}, "__decorateClass$o"), __decorateParam$o = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$o"), _a4;
+let DocMenuStyleService = (_a4 = class extends Disposable {
+  constructor(_textSelectionManagerService) {
+    super();
+    __publicField(this, "_cacheStyle", null);
+    this._textSelectionManagerService = _textSelectionManagerService, this._init();
+  }
+  _init() {
+    this._listenDocRangeChange();
+  }
+  _listenDocRangeChange() {
+    this.disposeWithMe(
+      this._textSelectionManagerService.textSelection$.subscribe(() => {
+        this._clearStyleCache();
+      })
+    );
+  }
+  getStyleCache() {
+    return this._cacheStyle;
+  }
+  setStyleCache(style) {
+    this._cacheStyle = {
+      ...this._cacheStyle,
+      ...style
+    };
+  }
+  _clearStyleCache() {
+    this._cacheStyle = null;
+  }
+}, __name(_a4, "DocMenuStyleService"), _a4);
+DocMenuStyleService = __decorateClass$o([
+  __decorateParam$o(0, Inject(DocSelectionManagerService))
+], DocMenuStyleService);
 function handleInlineFormat(preCommandId, params, commandService) {
   return commandService.executeCommand(SetInlineFormatCommand.id, {
     preCommandId,
@@ -4245,10 +4313,10 @@ const SetInlineFormatBoldCommandId = "doc.command.set-inline-format-bold", SetIn
   type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    const { value, preCommandId } = params, commandService = accessor.get(ICommandService), docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), docRanges = docSelectionManagerService.getDocRanges();
+    const { value, preCommandId } = params, commandService = accessor.get(ICommandService), docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), docMenuStyleService = accessor.get(DocMenuStyleService), docRanges = docSelectionManagerService.getDocRanges();
     if (docRanges.length === 0)
       return !1;
-    const segmentId = docRanges[0].segmentId, docDataModel = univerInstanceService.getCurrentUniverDocInstance();
+    const segmentId = docRanges[0].segmentId, docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
     if (docDataModel == null)
       return !1;
     const unitId = docDataModel.getUnitId();
@@ -4301,6 +4369,14 @@ const SetInlineFormatBoldCommandId = "doc.command.set-inline-format-bold", SetIn
       const { startOffset, endOffset } = range;
       if (startOffset == null || endOffset == null)
         continue;
+      if (startOffset === endOffset) {
+        docMenuStyleService.setStyleCache(
+          {
+            [COMMAND_ID_TO_FORMAT_KEY_MAP[preCommandId]]: formatValue
+          }
+        );
+        continue;
+      }
       const body = {
         dataStream: "",
         textRuns: [
@@ -4315,13 +4391,11 @@ const SetInlineFormatBoldCommandId = "doc.command.set-inline-format-bold", SetIn
       }, len = startOffset - memoryCursor.cursor;
       len !== 0 && textX.push({
         t: TextXActionType.RETAIN,
-        len,
-        segmentId
+        len
       }), textX.push({
         t: TextXActionType.RETAIN,
         body,
-        len: endOffset - startOffset,
-        segmentId
+        len: endOffset - startOffset
       }), memoryCursor.reset(), memoryCursor.moveCursor(endOffset);
     }
     const path = getRichTextEditPath(docDataModel, segmentId);
@@ -4364,8 +4438,8 @@ const ListOperationCommand = {
   id: "doc.command.list-operation",
   type: CommandType.COMMAND,
   handler: /* @__PURE__ */ __name((accessor, params) => {
-    var _a28, _b2;
-    const docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), listType = params.listType, docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), docRanges = (_a28 = docSelectionManagerService.getDocRanges()) != null ? _a28 : [];
+    var _a29, _b2;
+    const docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), listType = params.listType, docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), docRanges = (_a29 = docSelectionManagerService.getDocRanges()) != null ? _a29 : [];
     if (docDataModel == null || docRanges.length === 0)
       return !1;
     const segmentId = docRanges[0].segmentId, paragraphs = (_b2 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _b2.paragraphs;
@@ -4393,11 +4467,11 @@ const ListOperationCommand = {
   id: "doc.command.change-list-type",
   type: CommandType.COMMAND,
   handler: /* @__PURE__ */ __name((accessor, params) => {
-    var _a28, _b2;
+    var _a29, _b2;
     const docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), { listType } = params, docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), activeRanges = docSelectionManagerService.getDocRanges();
     if (docDataModel == null || activeRanges == null || !activeRanges.length)
       return !1;
-    const { segmentId } = activeRanges[0], selections = (_a28 = docSelectionManagerService.getDocRanges()) != null ? _a28 : [], paragraphs = (_b2 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _b2.paragraphs;
+    const { segmentId } = activeRanges[0], selections = (_a29 = docSelectionManagerService.getDocRanges()) != null ? _a29 : [], paragraphs = (_b2 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _b2.paragraphs;
     if (paragraphs == null)
       return !1;
     const currentParagraphs = getParagraphsInRanges(selections, paragraphs), unitId = docDataModel.getUnitId(), textX = BuildTextUtils.paragraph.bullet.set({
@@ -4425,13 +4499,13 @@ const ChangeListNestingLevelCommand = {
   id: "doc.command.change-list-nesting-level",
   type: CommandType.COMMAND,
   handler: /* @__PURE__ */ __name((accessor, params) => {
-    var _a28, _b2;
+    var _a29, _b2;
     if (!params)
       return !1;
     const { type } = params, docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), activeRange = docSelectionManagerService.getActiveTextRange();
     if (docDataModel == null || activeRange == null)
       return !1;
-    const { segmentId } = activeRange, selections = (_a28 = docSelectionManagerService.getDocRanges()) != null ? _a28 : [], paragraphs = (_b2 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _b2.paragraphs;
+    const { segmentId } = activeRange, selections = (_a29 = docSelectionManagerService.getDocRanges()) != null ? _a29 : [], paragraphs = (_b2 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _b2.paragraphs;
     if (paragraphs == null)
       return !1;
     const currentParagraphs = getParagraphsInRange(activeRange, paragraphs), unitId = docDataModel.getUnitId(), jsonX = JSONX.getInstance(), textX = BuildTextUtils.paragraph.bullet.changeNestLevel({
@@ -4476,11 +4550,11 @@ const ChangeListNestingLevelCommand = {
   id: "doc.command.toggle-check-list",
   type: CommandType.COMMAND,
   handler: /* @__PURE__ */ __name((accessor, params) => {
-    var _a28;
+    var _a29;
     if (!params)
       return !1;
     const univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), { index, segmentId, textRanges } = params, docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
-    if (docDataModel == null || ((_a28 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a28.paragraphs) == null)
+    if (docDataModel == null || ((_a29 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a29.paragraphs) == null)
       return !1;
     const unitId = docDataModel.getUnitId(), doMutation = {
       id: RichTextEditingMutation.id,
@@ -4517,13 +4591,13 @@ const ChangeListNestingLevelCommand = {
   type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler(accessor, params) {
-    var _a28, _b2, _c, _d, _e;
+    var _a29, _b2, _c, _d, _e;
     if (!params)
       return !1;
     const docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), activeRange = docSelectionManagerService.getActiveTextRange();
     if (docDataModel == null || activeRange == null)
       return !1;
-    const { segmentId } = activeRange, { listType, paragraph } = params, { paragraphStart, paragraphEnd } = paragraph, textX = new TextX(), jsonX = JSONX.getInstance(), { defaultTabStop = 36 } = docDataModel.getSnapshot().documentStyle, sectionBreaks = (_b2 = (_a28 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a28.sectionBreaks) != null ? _b2 : [], { startIndex, paragraphStyle = {} } = paragraph, { indentFirstLine, snapToGrid, indentStart } = paragraphStyle, paragraphProperties = PRESET_LIST_TYPE[listType].nestingLevel[0].paragraphProperties || {}, { hanging: listHanging, indentStart: listIndentStart } = paragraphProperties, bulletParagraphTextStyle = paragraphProperties.textStyle, { charSpace, gridType } = findNearestSectionBreak(startIndex, sectionBreaks) || { charSpace: 0, gridType: GridType.LINES }, charSpaceApply = getCharSpaceApply(charSpace, defaultTabStop, gridType, snapToGrid);
+    const { segmentId } = activeRange, { listType, paragraph } = params, { paragraphStart, paragraphEnd } = paragraph, textX = new TextX(), jsonX = JSONX.getInstance(), { defaultTabStop = 36 } = docDataModel.getSnapshot().documentStyle, sectionBreaks = (_b2 = (_a29 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a29.sectionBreaks) != null ? _b2 : [], { startIndex, paragraphStyle = {} } = paragraph, { indentFirstLine, snapToGrid, indentStart } = paragraphStyle, paragraphProperties = PRESET_LIST_TYPE[listType].nestingLevel[0].paragraphProperties || {}, { hanging: listHanging, indentStart: listIndentStart } = paragraphProperties, bulletParagraphTextStyle = paragraphProperties.textStyle, { charSpace, gridType } = findNearestSectionBreak(startIndex, sectionBreaks) || { charSpace: 0, gridType: GridType.LINES }, charSpaceApply = getCharSpaceApply(charSpace, defaultTabStop, gridType, snapToGrid);
     let listId = Tools.generateRandomId(6);
     const paragraphs = (_d = (_c = docDataModel.getBody()) == null ? void 0 : _c.paragraphs) != null ? _d : [], curIndex = paragraphs.findIndex((i) => i.startIndex === paragraph.startIndex), prevParagraph = paragraphs[curIndex - 1], nextParagraph = paragraphs[curIndex + 1];
     prevParagraph && prevParagraph.bullet && prevParagraph.bullet.listType.indexOf(listType) === 0 ? listId = prevParagraph.bullet.listId : nextParagraph && nextParagraph.bullet && nextParagraph.bullet.listType.indexOf(listType) === 0 && (listId = nextParagraph.bullet.listId);
@@ -4545,8 +4619,7 @@ const ChangeListNestingLevelCommand = {
       len: paragraphStart
     }), textX.push({
       t: TextXActionType.DELETE,
-      len: paragraphEnd - paragraphStart,
-      line: 1
+      len: paragraphEnd - paragraphStart
     }), textX.push({
       t: TextXActionType.RETAIN,
       len: 1,
@@ -4616,19 +4689,19 @@ const AlignOperationCommand = {
   type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler: /* @__PURE__ */ __name((accessor, params) => {
-    var _a28;
+    var _a29;
     const docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), { alignType } = params, docDataModel = univerInstanceService.getCurrentUniverDocInstance();
     if (docDataModel == null)
       return !1;
     const allRanges = docSelectionManagerService.getDocRanges();
     if (allRanges.length === 0)
       return !1;
-    const segmentId = allRanges[0].segmentId, paragraphs = (_a28 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a28.paragraphs;
+    const segmentId = allRanges[0].segmentId, paragraphs = (_a29 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a29.paragraphs;
     if (paragraphs == null)
       return !1;
     const currentParagraphs = getParagraphsInRanges(allRanges, paragraphs), unitId = docDataModel.getUnitId(), isAlreadyAligned = currentParagraphs.every((paragraph) => {
-      var _a29;
-      return ((_a29 = paragraph.paragraphStyle) == null ? void 0 : _a29.horizontalAlign) === alignType;
+      var _a30;
+      return ((_a30 = paragraph.paragraphStyle) == null ? void 0 : _a30.horizontalAlign) === alignType;
     }), doMutation = {
       id: RichTextEditingMutation.id,
       params: {
@@ -4643,8 +4716,7 @@ const AlignOperationCommand = {
       const { startIndex } = paragraph;
       textX.push({
         t: TextXActionType.RETAIN,
-        len: startIndex - memoryCursor.cursor,
-        segmentId
+        len: startIndex - memoryCursor.cursor
       });
       const paragraphStyle = {
         ...paragraph.paragraphStyle,
@@ -4663,7 +4735,6 @@ const AlignOperationCommand = {
             }
           ]
         },
-        segmentId,
         coverType: UpdateDocsAttributeType.REPLACE
       }), memoryCursor.moveCursorTo(startIndex + 1);
     }
@@ -4765,9 +4836,9 @@ const AlignOperationCommand = {
 }, ZOOM_MAP = [50, 80, 100, 130, 150, 170, 200, 400], DOC_ZOOM_RANGE = [10, 400];
 function ZoomSlider() {
   const commandService = useDependency(ICommandService), univerInstanceService = useDependency(IUniverInstanceService), currentDoc$ = useMemo(() => univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC), []), documentDataModel = useObservable(currentDoc$), getCurrentZoom = useCallback(() => {
-    var _a28, _b2;
+    var _a29, _b2;
     if (!documentDataModel) return 100;
-    const currentZoom = ((_b2 = (_a28 = documentDataModel.getSettings()) == null ? void 0 : _a28.zoomRatio) != null ? _b2 : 1) * 100;
+    const currentZoom = ((_b2 = (_a29 = documentDataModel.getSettings()) == null ? void 0 : _a29.zoomRatio) != null ? _b2 : 1) * 100;
     return Math.round(currentZoom);
   }, [documentDataModel]), [zoom, setZoom] = useState(() => getCurrentZoom());
   useEffect(() => (setZoom(getCurrentZoom()), commandService.onCommandExecuted((commandInfo) => {
@@ -4997,10 +5068,10 @@ ${DataStreamTreeTokenType.TABLE_CELL_END}`, paragraphs = [], sectionBreaks = [];
 }
 __name(getInsertColumnBody, "getInsertColumnBody");
 function getInsertRowActionsParams(rangeInfo, position, viewModel) {
-  var _a28, _b2, _c;
+  var _a29, _b2, _c;
   const { startOffset, endOffset, segmentId } = rangeInfo, vm = viewModel.getSelfOrHeaderFooterViewModel(segmentId), index = position === 0 ? startOffset : endOffset;
   let tableRow = null;
-  const tableId = (_c = (_b2 = (_a28 = viewModel.getBody()) == null ? void 0 : _a28.tables) == null ? void 0 : _b2.find((t) => index >= t.startIndex && index <= t.endIndex)) == null ? void 0 : _c.tableId;
+  const tableId = (_c = (_b2 = (_a29 = viewModel.getBody()) == null ? void 0 : _a29.tables) == null ? void 0 : _b2.find((t) => index >= t.startIndex && index <= t.endIndex)) == null ? void 0 : _c.tableId;
   let rowIndex = 0;
   for (const section of vm.children) {
     for (const paragraph of section.children) {
@@ -5027,8 +5098,8 @@ function getInsertRowActionsParams(rangeInfo, position, viewModel) {
 }
 __name(getInsertRowActionsParams, "getInsertRowActionsParams");
 function getInsertColumnActionsParams(rangeInfo, position, viewModel) {
-  var _a28, _b2, _c;
-  const { startOffset, endOffset, segmentId } = rangeInfo, vm = viewModel.getSelfOrHeaderFooterViewModel(segmentId), index = position === 0 ? startOffset : endOffset, tableId = (_c = (_b2 = (_a28 = viewModel.getBody()) == null ? void 0 : _a28.tables) == null ? void 0 : _b2.find((t) => index >= t.startIndex && index <= t.endIndex)) == null ? void 0 : _c.tableId, offsets = [];
+  var _a29, _b2, _c;
+  const { startOffset, endOffset, segmentId } = rangeInfo, vm = viewModel.getSelfOrHeaderFooterViewModel(segmentId), index = position === 0 ? startOffset : endOffset, tableId = (_c = (_b2 = (_a29 = viewModel.getBody()) == null ? void 0 : _a29.tables) == null ? void 0 : _b2.find((t) => index >= t.startIndex && index <= t.endIndex)) == null ? void 0 : _c.tableId, offsets = [];
   let table = null, columnIndex = -1;
   for (const section of vm.children) {
     for (const paragraph of section.children) {
@@ -5085,8 +5156,8 @@ function getColumnWidths(pageWidth, tableColumns, insertColumnIndex) {
 }
 __name(getColumnWidths, "getColumnWidths");
 function getDeleteRowsActionsParams(rangeInfo, viewModel) {
-  var _a28, _b2, _c;
-  const { startOffset, endOffset, segmentId } = rangeInfo, vm = viewModel.getSelfOrHeaderFooterViewModel(segmentId), tableId = (_c = (_b2 = (_a28 = viewModel.getBody()) == null ? void 0 : _a28.tables) == null ? void 0 : _b2.find((t) => startOffset >= t.startIndex && endOffset <= t.endIndex)) == null ? void 0 : _c.tableId, rowIndexes = [];
+  var _a29, _b2, _c;
+  const { startOffset, endOffset, segmentId } = rangeInfo, vm = viewModel.getSelfOrHeaderFooterViewModel(segmentId), tableId = (_c = (_b2 = (_a29 = viewModel.getBody()) == null ? void 0 : _a29.tables) == null ? void 0 : _b2.find((t) => startOffset >= t.startIndex && endOffset <= t.endIndex)) == null ? void 0 : _c.tableId, rowIndexes = [];
   let offset = -1, len = 0, cursor = -1, selectWholeTable = !1;
   for (const section of vm.children) {
     for (const paragraph of section.children) {
@@ -5117,8 +5188,8 @@ function getDeleteRowsActionsParams(rangeInfo, viewModel) {
 }
 __name(getDeleteRowsActionsParams, "getDeleteRowsActionsParams");
 function getDeleteColumnsActionParams(rangeInfo, viewModel) {
-  var _a28, _b2, _c;
-  const { startOffset, endOffset, segmentId } = rangeInfo, vm = viewModel.getSelfOrHeaderFooterViewModel(segmentId), tableId = (_c = (_b2 = (_a28 = viewModel.getBody()) == null ? void 0 : _a28.tables) == null ? void 0 : _b2.find((t) => startOffset >= t.startIndex && endOffset <= t.endIndex)) == null ? void 0 : _c.tableId, offsets = [];
+  var _a29, _b2, _c;
+  const { startOffset, endOffset, segmentId } = rangeInfo, vm = viewModel.getSelfOrHeaderFooterViewModel(segmentId), tableId = (_c = (_b2 = (_a29 = viewModel.getBody()) == null ? void 0 : _a29.tables) == null ? void 0 : _b2.find((t) => startOffset >= t.startIndex && endOffset <= t.endIndex)) == null ? void 0 : _c.tableId, offsets = [];
   let table = null;
   const columnIndexes = [];
   let cursor = -1, startColumnIndex = -1, endColumnIndex = -1;
@@ -5164,8 +5235,8 @@ function getDeleteColumnsActionParams(rangeInfo, viewModel) {
 }
 __name(getDeleteColumnsActionParams, "getDeleteColumnsActionParams");
 function getDeleteTableActionParams(rangeInfo, viewModel) {
-  var _a28, _b2, _c;
-  const { startOffset, endOffset, segmentId } = rangeInfo, vm = viewModel.getSelfOrHeaderFooterViewModel(segmentId), tableId = (_c = (_b2 = (_a28 = viewModel.getBody()) == null ? void 0 : _a28.tables) == null ? void 0 : _b2.find((t) => startOffset >= t.startIndex && endOffset <= t.endIndex)) == null ? void 0 : _c.tableId;
+  var _a29, _b2, _c;
+  const { startOffset, endOffset, segmentId } = rangeInfo, vm = viewModel.getSelfOrHeaderFooterViewModel(segmentId), tableId = (_c = (_b2 = (_a29 = viewModel.getBody()) == null ? void 0 : _a29.tables) == null ? void 0 : _b2.find((t) => startOffset >= t.startIndex && endOffset <= t.endIndex)) == null ? void 0 : _c.tableId;
   let offset = -1, len = 0, cursor = -1;
   for (const section of vm.children) {
     for (const paragraph of section.children) {
@@ -5190,8 +5261,8 @@ function getDeleteTableActionParams(rangeInfo, viewModel) {
 }
 __name(getDeleteTableActionParams, "getDeleteTableActionParams");
 function getDeleteRowContentActionParams(rangeInfo, viewModel) {
-  var _a28, _b2, _c;
-  const { startOffset, endOffset, segmentId } = rangeInfo, vm = viewModel.getSelfOrHeaderFooterViewModel(segmentId), tableId = (_c = (_b2 = (_a28 = viewModel.getBody()) == null ? void 0 : _a28.tables) == null ? void 0 : _b2.find((t) => startOffset >= t.startIndex && endOffset <= t.endIndex)) == null ? void 0 : _c.tableId, offsets = [];
+  var _a29, _b2, _c;
+  const { startOffset, endOffset, segmentId } = rangeInfo, vm = viewModel.getSelfOrHeaderFooterViewModel(segmentId), tableId = (_c = (_b2 = (_a29 = viewModel.getBody()) == null ? void 0 : _a29.tables) == null ? void 0 : _b2.find((t) => startOffset >= t.startIndex && endOffset <= t.endIndex)) == null ? void 0 : _c.tableId, offsets = [];
   let table = null, cursor = -1, rowIndex = -1, startColumnIndex = -1, endColumnIndex = -1;
   for (const section of vm.children) {
     for (const paragraph of section.children) {
@@ -5305,7 +5376,7 @@ const InnerPasteCommand = {
   type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function, complexity
   handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    var _a28, _b2, _c, _d;
+    var _a29, _b2, _c, _d;
     const { segmentId, textRanges, doc } = params, commandService = accessor.get(ICommandService), docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), originSelections = docSelectionManagerService.getTextRanges(), rectRanges = docSelectionManagerService.getRectRanges(), { body, tableSource, drawings } = doc;
     if (!Array.isArray(originSelections) || originSelections.length === 0 || body == null)
       return !1;
@@ -5322,7 +5393,7 @@ const InnerPasteCommand = {
       }
     }, memoryCursor = new MemoryCursor();
     memoryCursor.reset();
-    const textX = new TextX(), jsonX = JSONX.getInstance(), rawActions = [], hasTable = !!((_a28 = body.tables) != null && _a28.length), hasCustomBlock = !!((_b2 = body.customBlocks) != null && _b2.length);
+    const textX = new TextX(), jsonX = JSONX.getInstance(), rawActions = [], hasTable = !!((_a29 = body.tables) != null && _a29.length), hasCustomBlock = !!((_b2 = body.customBlocks) != null && _b2.length);
     if (hasTable && segmentId || hasTable && hasRangeInTable(selections) || selections.length && (rectRanges != null && rectRanges.length))
       return !1;
     for (const selection of selections) {
@@ -5350,8 +5421,7 @@ const InnerPasteCommand = {
       if (collapsed)
         textX.push({
           t: TextXActionType.RETAIN,
-          len,
-          segmentId
+          len
         });
       else {
         const { dos } = BuildTextUtils.selection.getDeleteActions(selection, segmentId, memoryCursor.cursor, originBody);
@@ -5360,9 +5430,7 @@ const InnerPasteCommand = {
       textX.push({
         t: TextXActionType.INSERT,
         body: cloneBody,
-        len: body.dataStream.length,
-        line: 0,
-        segmentId
+        len: body.dataStream.length
       }), memoryCursor.reset(), memoryCursor.moveCursor(endOffset);
     }
     const path = getRichTextEditPath(docDataModel, segmentId);
@@ -5370,7 +5438,7 @@ const InnerPasteCommand = {
   }, "handler")
 };
 function getCutActionsFromTextRanges(selections, docDataModel, segmentId) {
-  var _a28, _b2;
+  var _a29, _b2;
   const originBody = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody(), textX = new TextX(), jsonX = JSONX.getInstance(), rawActions = [];
   if (originBody == null)
     return rawActions;
@@ -5383,13 +5451,12 @@ function getCutActionsFromTextRanges(selections, docDataModel, segmentId) {
     const len = startOffset - memoryCursor.cursor;
     collapsed ? textX.push({
       t: TextXActionType.RETAIN,
-      len,
-      segmentId
-    }) : textX.push(...BuildTextUtils.selection.getDeleteExculdeLastLineBreakActions(selection, originBody, segmentId, memoryCursor.cursor, !1)), memoryCursor.reset(), memoryCursor.moveCursor(endOffset);
+      len
+    }) : textX.push(...BuildTextUtils.selection.getDeleteExcludeLastLineBreakActions(selection, originBody, segmentId, memoryCursor.cursor, !1)), memoryCursor.reset(), memoryCursor.moveCursor(endOffset);
   }
   const path = getRichTextEditPath(docDataModel, segmentId);
   rawActions.push(jsonX.editOp(textX.serialize(), path));
-  const removedCustomBlockIds = getCustomBlockIdsInSelections(originBody, selections), drawings = (_a28 = docDataModel.getDrawings()) != null ? _a28 : {}, drawingOrder = (_b2 = docDataModel.getDrawingsOrder()) != null ? _b2 : [], sortedRemovedCustomBlockIds = removedCustomBlockIds.sort((a, b) => drawingOrder.indexOf(a) > drawingOrder.indexOf(b) ? -1 : drawingOrder.indexOf(a) < drawingOrder.indexOf(b) ? 1 : 0);
+  const removedCustomBlockIds = getCustomBlockIdsInSelections(originBody, selections), drawings = (_a29 = docDataModel.getDrawings()) != null ? _a29 : {}, drawingOrder = (_b2 = docDataModel.getDrawingsOrder()) != null ? _b2 : [], sortedRemovedCustomBlockIds = removedCustomBlockIds.sort((a, b) => drawingOrder.indexOf(a) > drawingOrder.indexOf(b) ? -1 : drawingOrder.indexOf(a) < drawingOrder.indexOf(b) ? 1 : 0);
   if (sortedRemovedCustomBlockIds.length > 0)
     for (const blockId of sortedRemovedCustomBlockIds) {
       const drawing = drawings[blockId], drawingIndex = drawingOrder.indexOf(blockId);
@@ -5417,13 +5484,10 @@ function getCutActionsFromRectRanges(ranges, docDataModel, viewModel, segmentId)
         const { offset, len, tableId } = actionParams;
         offset - memoryCursor.cursor > 0 && textX.push({
           t: TextXActionType.RETAIN,
-          len: offset - memoryCursor.cursor,
-          segmentId
+          len: offset - memoryCursor.cursor
         }), textX.push({
           t: TextXActionType.DELETE,
-          len,
-          line: 0,
-          segmentId
+          len
         });
         const action = jsonX.removeOp(["tableSource", tableId]);
         rawActions.push(action), memoryCursor.moveCursorTo(offset + len);
@@ -5434,13 +5498,10 @@ function getCutActionsFromRectRanges(ranges, docDataModel, viewModel, segmentId)
         const { offset, rowIndexes, len, tableId } = actionParams;
         offset - memoryCursor.cursor > 0 && textX.push({
           t: TextXActionType.RETAIN,
-          len: offset - memoryCursor.cursor,
-          segmentId
+          len: offset - memoryCursor.cursor
         }), textX.push({
           t: TextXActionType.DELETE,
-          len,
-          line: 0,
-          segmentId
+          len
         });
         for (const index of rowIndexes.reverse()) {
           const action = jsonX.removeOp(["tableSource", tableId, "tableRows", index]);
@@ -5456,13 +5517,10 @@ function getCutActionsFromRectRanges(ranges, docDataModel, viewModel, segmentId)
           const { retain, delete: delLen } = offset;
           retain - memoryCursor.cursor > 0 && textX.push({
             t: TextXActionType.RETAIN,
-            len: retain - memoryCursor.cursor,
-            segmentId
+            len: retain - memoryCursor.cursor
           }), textX.push({
             t: TextXActionType.DELETE,
-            len: delLen,
-            line: 0,
-            segmentId
+            len: delLen
           }), memoryCursor.moveCursorTo(retain + delLen);
         }
       }
@@ -5487,8 +5545,8 @@ const INNER_CUT_COMMAND_ID = "doc.command.inner-cut", CutContentCommand = {
   id: INNER_CUT_COMMAND_ID,
   type: CommandType.COMMAND,
   handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    var _a28, _b2;
-    const { segmentId, textRanges } = params, commandService = accessor.get(ICommandService), docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), selections = (_a28 = params.selections) != null ? _a28 : docSelectionManagerService.getTextRanges(), rectRanges = docSelectionManagerService.getRectRanges();
+    var _a29, _b2;
+    const { segmentId, textRanges } = params, commandService = accessor.get(ICommandService), docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), selections = (_a29 = params.selections) != null ? _a29 : docSelectionManagerService.getTextRanges(), rectRanges = docSelectionManagerService.getRectRanges();
     if ((!Array.isArray(selections) || selections.length === 0) && (!Array.isArray(rectRanges) || rectRanges.length === 0))
       return !1;
     const unitId = (_b2 = univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : _b2.getUnitId();
@@ -5515,14 +5573,13 @@ var DeleteDirection = /* @__PURE__ */ ((DeleteDirection2) => (DeleteDirection2[D
 const EditorInsertTextCommandId = "doc.command.insert-text", InsertCommand = {
   id: EditorInsertTextCommandId,
   type: CommandType.COMMAND,
-  // eslint-disable-next-line max-lines-per-function
   handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    var _a28;
+    var _a29;
     const commandService = accessor.get(ICommandService), { range, segmentId, body, unitId, cursorOffset, extendLastRange } = params, docSelectionManagerService = accessor.get(DocSelectionManagerService), docDataModel = accessor.get(IUniverInstanceService).getUnit(unitId, UniverInstanceType.UNIVER_DOC);
     if (docDataModel == null)
       return !1;
-    const activeRange = docSelectionManagerService.getActiveTextRange(), originBody = docDataModel.getSelfOrHeaderFooterModel((_a28 = activeRange == null ? void 0 : activeRange.segmentId) != null ? _a28 : "").getBody();
-    if (!originBody)
+    const activeRange = docSelectionManagerService.getActiveTextRange(), originBody = docDataModel.getSelfOrHeaderFooterModel((_a29 = activeRange == null ? void 0 : activeRange.segmentId) != null ? _a29 : "").getBody();
+    if (originBody == null)
       return !1;
     const actualRange = extendLastRange ? BuildTextUtils.selection.getDeleteSelection(range, originBody) : BuildTextUtils.selection.getInsertSelection(range, originBody), { startOffset, collapsed } = actualRange, cursorMove = cursorOffset != null ? cursorOffset : body.dataStream.length, textRanges = [
       {
@@ -5543,8 +5600,7 @@ const EditorInsertTextCommandId = "doc.command.insert-text", InsertCommand = {
     if (collapsed)
       startOffset > 0 && textX.push({
         t: TextXActionType.RETAIN,
-        len: startOffset,
-        segmentId
+        len: startOffset
       });
     else {
       const { dos, retain } = BuildTextUtils.selection.getDeleteActions(actualRange, segmentId, 0, originBody);
@@ -5557,9 +5613,7 @@ const EditorInsertTextCommandId = "doc.command.insert-text", InsertCommand = {
     textX.push({
       t: TextXActionType.INSERT,
       body,
-      len: body.dataStream.length,
-      line: 0,
-      segmentId
+      len: body.dataStream.length
     });
     const path = getRichTextEditPath(docDataModel, segmentId);
     return doMutation.params.actions = jsonX.editOp(textX.serialize(), path), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
@@ -5568,11 +5622,11 @@ const EditorInsertTextCommandId = "doc.command.insert-text", InsertCommand = {
   id: "doc.command.delete-text",
   type: CommandType.COMMAND,
   handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    var _a28;
+    var _a29;
     const commandService = accessor.get(ICommandService), univerInstanceService = accessor.get(IUniverInstanceService), { range, segmentId, unitId, direction, len = 1 } = params, docDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC), body = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
     if (docDataModel == null || body == null)
       return !1;
-    const { startOffset } = range, dataStream = body.dataStream, start = direction === DeleteDirection.LEFT ? startOffset - len : startOffset, end = start + len - 1, relativeCustomRanges = (_a28 = body.customRanges) == null ? void 0 : _a28.filter((customRange) => BuildTextUtils.customRange.isIntersecting(customRange.startIndex, customRange.endIndex, start, end)), toDeleteRanges = relativeCustomRanges == null ? void 0 : relativeCustomRanges.filter((customRange) => BuildTextUtils.customRange.shouldDeleteCustomRange(start, len, customRange, dataStream)), deleteIndexes = [];
+    const { startOffset } = range, dataStream = body.dataStream, start = direction === DeleteDirection.LEFT ? startOffset - len : startOffset, end = start + len - 1, relativeCustomRanges = (_a29 = body.customRanges) == null ? void 0 : _a29.filter((customRange) => BuildTextUtils.customRange.isIntersecting(customRange.startIndex, customRange.endIndex, start, end)), toDeleteRanges = relativeCustomRanges == null ? void 0 : relativeCustomRanges.filter((customRange) => BuildTextUtils.customRange.shouldDeleteCustomRange(start, len, customRange, dataStream)), deleteIndexes = [];
     for (let i = 0; i < len; i++)
       deleteIndexes.push(start + i);
     toDeleteRanges == null || toDeleteRanges.forEach((range2) => {
@@ -5596,13 +5650,10 @@ const EditorInsertTextCommandId = "doc.command.insert-text", InsertCommand = {
       const deleteIndex = deleteIndexes[i];
       deleteIndex - cursor > 0 && textX.push({
         t: TextXActionType.RETAIN,
-        len: deleteIndex - cursor,
-        segmentId
+        len: deleteIndex - cursor
       }), textX.push({
         t: TextXActionType.DELETE,
-        len: 1,
-        segmentId,
-        line: 0
+        len: 1
       }), cursor = deleteIndex + 1;
     }
     const path = getRichTextEditPath(docDataModel, segmentId);
@@ -5625,13 +5676,11 @@ const EditorInsertTextCommandId = "doc.command.insert-text", InsertCommand = {
     }, textX = new TextX(), jsonX = JSONX.getInstance(), { startOffset, endOffset } = range;
     textX.push({
       t: TextXActionType.RETAIN,
-      len: startOffset,
-      segmentId
+      len: startOffset
     }), textX.push({
       t: TextXActionType.RETAIN,
       body: updateBody,
       len: endOffset - startOffset,
-      segmentId,
       coverType
     });
     const path = getRichTextEditPath(docDataModel, segmentId);
@@ -5641,7 +5690,7 @@ const EditorInsertTextCommandId = "doc.command.insert-text", InsertCommand = {
   id: "doc.command.delete-custom-block",
   type: CommandType.COMMAND,
   handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    var _a28;
+    var _a29;
     const docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), activeRange = docSelectionManagerService.getActiveTextRange(), documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
     if (activeRange == null || documentDataModel == null)
       return !1;
@@ -5662,17 +5711,14 @@ const EditorInsertTextCommandId = "doc.command.insert-text", InsertCommand = {
     }, textX = new TextX(), jsonX = JSONX.getInstance(), rawActions = [];
     startOffset > 0 && textX.push({
       t: TextXActionType.RETAIN,
-      len: direction === DeleteDirection.LEFT ? startOffset - 1 : startOffset,
-      segmentId
+      len: direction === DeleteDirection.LEFT ? startOffset - 1 : startOffset
     }), textX.push({
       t: TextXActionType.DELETE,
-      len: 1,
-      line: 0,
-      segmentId
+      len: 1
     });
     const path = getRichTextEditPath(documentDataModel, segmentId);
     rawActions.push(jsonX.editOp(textX.serialize(), path));
-    const drawing = ((_a28 = documentDataModel.getDrawings()) != null ? _a28 : {})[drawingId], drawingIndex = documentDataModel.getDrawingsOrder().indexOf(drawingId), removeDrawingAction = jsonX.removeOp(["drawings", drawingId], drawing), removeDrawingOrderAction = jsonX.removeOp(["drawingsOrder", drawingIndex], drawingId);
+    const drawing = ((_a29 = documentDataModel.getDrawings()) != null ? _a29 : {})[drawingId], drawingIndex = documentDataModel.getDrawingsOrder().indexOf(drawingId), removeDrawingAction = jsonX.removeOp(["drawings", drawingId], drawing), removeDrawingOrderAction = jsonX.removeOp(["drawingsOrder", drawingIndex], drawingId);
     return rawActions.push(removeDrawingAction), rawActions.push(removeDrawingOrderAction), doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
   }, "handler")
 }, MergeTwoParagraphCommand = {
@@ -5683,13 +5729,24 @@ const EditorInsertTextCommandId = "doc.command.insert-text", InsertCommand = {
     const docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), { direction, range } = params, activeRange = docSelectionManagerService.getActiveTextRange(), ranges = docSelectionManagerService.getTextRanges();
     if (activeRange == null || ranges == null)
       return !1;
-    const { segmentId, style } = activeRange, docDataModel = univerInstanceService.getCurrentUniverDocInstance(), originBody = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
-    if (!docDataModel || !originBody)
+    const { segmentId, style } = activeRange, docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), originBody = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
+    if (docDataModel == null || originBody == null)
       return !1;
     const actualRange = getDeleteSelection(activeRange, originBody), unitId = docDataModel.getUnitId(), { startOffset, collapsed } = actualRange;
     if (!collapsed)
       return !1;
-    const startIndex = direction === DeleteDirection.LEFT ? startOffset : startOffset + 1, endIndex = originBody.paragraphs.find((p2) => p2.startIndex >= startIndex).startIndex, body = getParagraphBody(accessor, unitId, originBody, startIndex, endIndex), cursor = direction === DeleteDirection.LEFT ? startOffset - 1 : startOffset, textRanges = [
+    const startIndex = direction === DeleteDirection.LEFT ? startOffset : startOffset + 1;
+    let curParagraph, nextParagraph;
+    for (const paragraph of originBody.paragraphs) {
+      if (paragraph.startIndex >= startIndex) {
+        nextParagraph = paragraph;
+        break;
+      }
+      curParagraph = paragraph;
+    }
+    if (curParagraph == null || nextParagraph == null)
+      return !1;
+    const cursor = direction === DeleteDirection.LEFT ? startOffset - 1 : startOffset, textRanges = [
       {
         startOffset: cursor,
         endOffset: cursor,
@@ -5704,25 +5761,28 @@ const EditorInsertTextCommandId = "doc.command.insert-text", InsertCommand = {
         prevTextRanges: [range]
       }
     }, textX = new TextX(), jsonX = JSONX.getInstance();
-    textX.push({
+    curParagraph.startIndex > 0 && textX.push({
       t: TextXActionType.RETAIN,
-      len: direction === DeleteDirection.LEFT ? startOffset - 1 : startOffset,
-      segmentId
-    }), body.dataStream.length && textX.push({
-      t: TextXActionType.INSERT,
-      body,
-      len: body.dataStream.length,
-      line: 0,
-      segmentId
+      len: curParagraph.startIndex
     }), textX.push({
+      t: TextXActionType.DELETE,
+      len: 1
+    }), nextParagraph.startIndex > curParagraph.startIndex + 1 && textX.push({
       t: TextXActionType.RETAIN,
-      len: 1,
-      segmentId
+      len: nextParagraph.startIndex - curParagraph.startIndex - 1
     }), textX.push({
-      t: TextXActionType.DELETE,
-      len: endIndex + 1 - startIndex,
-      line: 0,
-      segmentId
+      t: TextXActionType.RETAIN,
+      len: 1,
+      coverType: UpdateDocsAttributeType.REPLACE,
+      body: {
+        dataStream: "",
+        paragraphs: [
+          {
+            ...Tools.deepClone(curParagraph),
+            startIndex: 0
+          }
+        ]
+      }
     });
     const path = getRichTextEditPath(docDataModel, segmentId);
     return doMutation.params.actions = jsonX.editOp(textX.serialize(), path), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
@@ -5754,11 +5814,11 @@ const DeleteLeftCommand = {
   type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function, complexity
   handler: /* @__PURE__ */ __name(async (accessor) => {
-    var _a28, _b2;
+    var _a29, _b2;
     const docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService);
     let result = !0;
     const docDataModel = univerInstanceService.getCurrentUniverDocInstance();
-    if (!docDataModel)
+    if (docDataModel == null)
       return !1;
     const unitId = docDataModel.getUnitId(), docSkeletonManagerService = getCommandSkeleton(accessor, unitId), activeRange = docSelectionManagerService.getActiveTextRange(), rectRanges = docSelectionManagerService.getRectRanges(), ranges = docSelectionManagerService.getTextRanges(), skeleton = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getSkeleton();
     if (skeleton == null)
@@ -5829,7 +5889,7 @@ const DeleteLeftCommand = {
           range: actualRange
         });
       else if (preGlyph.streamType === "\b") {
-        const drawing = (_b2 = docDataModel.getSnapshot().drawings) == null ? void 0 : _b2[(_a28 = preGlyph.drawingId) != null ? _a28 : ""];
+        const drawing = (_b2 = docDataModel.getSnapshot().drawings) == null ? void 0 : _b2[(_a29 = preGlyph.drawingId) != null ? _a29 : ""];
         if (drawing == null)
           return !0;
         if (drawing.layoutType === PositionedObjectLayoutType.INLINE) {
@@ -5888,7 +5948,7 @@ const DeleteLeftCommand = {
   type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function, complexity
   handler: /* @__PURE__ */ __name(async (accessor) => {
-    var _a28, _b2;
+    var _a29, _b2;
     const docSelectionManagerService = accessor.get(DocSelectionManagerService), docDataModel = accessor.get(IUniverInstanceService).getCurrentUniverDocInstance();
     if (!docDataModel)
       return !1;
@@ -5924,7 +5984,7 @@ const DeleteLeftCommand = {
           range: activeRange
         });
       else if (needDeleteGlyph.streamType === "\b") {
-        const drawing = (_b2 = docDataModel.getSnapshot().drawings) == null ? void 0 : _b2[(_a28 = needDeleteGlyph.drawingId) != null ? _a28 : ""];
+        const drawing = (_b2 = docDataModel.getSnapshot().drawings) == null ? void 0 : _b2[(_a29 = needDeleteGlyph.drawingId) != null ? _a29 : ""];
         if (drawing == null)
           return !0;
         if (drawing.layoutType === PositionedObjectLayoutType.INLINE) {
@@ -5986,43 +6046,6 @@ const DeleteLeftCommand = {
     return result;
   }, "handler")
 };
-function getParagraphBody(accessor, unitId, body, start, end) {
-  const { textRuns: originTextRuns = [], customBlocks: originCustomBlocks = [] } = body, bodySlice = {
-    dataStream: body.dataStream.substring(start, end),
-    customRanges: getCustomRangeSlice(body, start, end).customRanges.map((range) => ({
-      ...Tools.deepClone(range),
-      rangeId: generateRandomId()
-    })),
-    customDecorations: getCustomDecorationSlice(body, start, end)
-  }, textRuns = [];
-  for (const textRun of originTextRuns) {
-    const { st, ed } = textRun;
-    ed <= start || st >= end || (st < start ? textRuns.push({
-      ...textRun,
-      st: 0,
-      ed: ed - start
-    }) : ed > end ? textRuns.push({
-      ...textRun,
-      st: st - start,
-      ed: end - start
-    }) : textRuns.push({
-      ...textRun,
-      st: st - start,
-      ed: ed - start
-    }));
-  }
-  textRuns.length > 0 && (bodySlice.textRuns = textRuns);
-  const customBlocks = [];
-  for (const block of originCustomBlocks) {
-    const { startIndex } = block;
-    startIndex >= start && startIndex <= end && customBlocks.push({
-      ...block,
-      startIndex: startIndex - start
-    });
-  }
-  return customBlocks.length > 0 && (bodySlice.customBlocks = customBlocks), bodySlice;
-}
-__name(getParagraphBody, "getParagraphBody");
 function getTextRangesWhenDelete(activeRange, ranges) {
   let cursor = activeRange.endOffset;
   for (const range of ranges) {
@@ -6184,11 +6207,11 @@ const DEFAULT_TABLE_WIDTH = 600, _HtmlToUDMService = class _HtmlToUDMService {
     return pastePlugin && (this._styleRules = [...pastePlugin.stylesRules], this._afterProcessRules = [...pastePlugin.afterProcessRules]), this._tableCache = [], this._styleCache.clear(), this._process(null, dom.childNodes, docData), this._styleCache.clear(), this._styleRules = [], this._afterProcessRules = [], docData;
   }
   _process(parent, nodes, doc) {
-    var _a28, _b2;
+    var _a29, _b2;
     const body = doc.body;
     for (const node of nodes)
       if (node.nodeType === Node.TEXT_NODE) {
-        if (((_a28 = node.nodeValue) == null ? void 0 : _a28.trim()) === "")
+        if (((_a29 = node.nodeValue) == null ? void 0 : _a29.trim()) === "")
           continue;
         const text = (_b2 = node.nodeValue) == null ? void 0 : _b2.replace(/[\r\n]/g, "");
         let style;
@@ -6213,11 +6236,11 @@ const DEFAULT_TABLE_WIDTH = 600, _HtmlToUDMService = class _HtmlToUDMService {
       }
   }
   _processBeforeTable(node, doc) {
-    var _a28;
+    var _a29;
     const tagName = node.tagName.toUpperCase(), body = doc.body;
     switch (tagName) {
       case "TABLE": {
-        body.dataStream[body.dataStream.length - 1] !== "\r" && (body.dataStream += "\r", body.paragraphs == null && (body.paragraphs = []), (_a28 = body.paragraphs) == null || _a28.push({
+        body.dataStream[body.dataStream.length - 1] !== "\r" && (body.dataStream += "\r", body.paragraphs == null && (body.paragraphs = []), (_a29 = body.paragraphs) == null || _a29.push({
           startIndex: body.dataStream.length - 1
         }));
         const table = genTableSource(0, 0, DEFAULT_TABLE_WIDTH);
@@ -6240,7 +6263,7 @@ const DEFAULT_TABLE_WIDTH = 600, _HtmlToUDMService = class _HtmlToUDMService {
     }
   }
   _processAfterTable(node, doc) {
-    var _a28, _b2;
+    var _a29, _b2;
     const tagName = node.tagName.toUpperCase(), body = doc.body;
     doc.tableSource == null && (doc.tableSource = {}), body.tables == null && (body.tables = []), body.sectionBreaks == null && (body.sectionBreaks = []);
     const { tableSource } = doc;
@@ -6259,7 +6282,7 @@ const DEFAULT_TABLE_WIDTH = 600, _HtmlToUDMService = class _HtmlToUDMService {
         break;
       }
       case "TD": {
-        body.dataStream[body.dataStream.length - 1] !== "\r" && ((_a28 = body.paragraphs) == null || _a28.push({
+        body.dataStream[body.dataStream.length - 1] !== "\r" && ((_a29 = body.paragraphs) == null || _a29.push({
           startIndex: body.dataStream.length
         }), body.dataStream += "\r"), (_b2 = body.sectionBreaks) == null || _b2.push({
           startIndex: body.dataStream.length
@@ -6274,9 +6297,9 @@ ${DataStreamTreeTokenType.TABLE_CELL_END}`;
     return element2.tagName.toUpperCase() === "A" && (body.dataStream += DataStreamTreeTokenType.CUSTOM_RANGE_START), start;
   }
   _processAfterLink(node, doc, start) {
-    var _a28, _b2;
+    var _a29, _b2;
     const body = doc.body, element2 = node;
-    element2.tagName.toUpperCase() === "A" && (body.dataStream += DataStreamTreeTokenType.CUSTOM_RANGE_END, body.customRanges = (_a28 = body.customRanges) != null ? _a28 : [], body.customRanges.push({
+    element2.tagName.toUpperCase() === "A" && (body.dataStream += DataStreamTreeTokenType.CUSTOM_RANGE_END, body.customRanges = (_a29 = body.customRanges) != null ? _a29 : [], body.customRanges.push({
       startIndex: start,
       endIndex: body.dataStream.length - 1,
       rangeId: (_b2 = element2.dataset.rangeid) != null ? _b2 : generateRandomId(),
@@ -6426,13 +6449,13 @@ function getBodySliceHtml(body, startIndex, endIndex) {
   const { customRanges = [] } = body, customRangesInRange = customRanges.filter((range) => range.startIndex >= startIndex && range.endIndex <= endIndex);
   let cursorIndex = startIndex, html = "";
   customRangesInRange.forEach((range) => {
-    var _a28, _b2;
+    var _a29, _b2;
     const { startIndex: startIndex2, endIndex: endIndex2, rangeType, rangeId } = range, preHtml = getBodyInlineSlice(body, cursorIndex, startIndex2);
     html += preHtml;
     const sliceHtml = getBodyInlineSlice(body, startIndex2 + 1, endIndex2);
     switch (rangeType) {
       case CustomRangeType.HYPERLINK: {
-        html += `<a data-rangeid="${rangeId}" href="${(_b2 = (_a28 = range.properties) == null ? void 0 : _a28.url) != null ? _b2 : ""}">${sliceHtml}</a>`;
+        html += `<a data-rangeid="${rangeId}" href="${(_b2 = (_a29 = range.properties) == null ? void 0 : _a29.url) != null ? _b2 : ""}">${sliceHtml}</a>`;
         break;
       }
       default: {
@@ -6463,7 +6486,7 @@ function convertBodyToHtml(body) {
 }
 __name(convertBodyToHtml, "convertBodyToHtml");
 function processNode(node, body, result) {
-  var _a28;
+  var _a29;
   switch (node.nodeType) {
     case DataStreamTreeNodeType.SECTION_BREAK: {
       for (const n2 of node.children)
@@ -6471,7 +6494,7 @@ function processNode(node, body, result) {
       break;
     }
     case DataStreamTreeNodeType.PARAGRAPH: {
-      const { children, startIndex, endIndex } = node, paragraph = (_a28 = body.paragraphs.find((p2) => p2.startIndex === endIndex)) != null ? _a28 : {}, { paragraphStyle = {} } = paragraph, { spaceAbove, spaceBelow, lineSpacing } = paragraphStyle, style = [];
+      const { children, startIndex, endIndex } = node, paragraph = (_a29 = body.paragraphs.find((p2) => p2.startIndex === endIndex)) != null ? _a29 : {}, { paragraphStyle = {} } = paragraph, { spaceAbove, spaceBelow, lineSpacing } = paragraphStyle, style = [];
       if (spaceAbove != null && (typeof spaceAbove == "number" ? style.push(`margin-top: ${spaceAbove}px`) : style.push(`margin-top: ${spaceAbove.v}px`)), spaceBelow != null && (typeof spaceBelow == "number" ? style.push(`margin-bottom: ${spaceBelow}px`) : style.push(`margin-bottom: ${spaceBelow.v}px`)), lineSpacing != null && style.push(`line-height: ${lineSpacing}`), result.html += `<p class="UniverNormal" ${style.length ? `style="${style.join("; ")};"` : ""}>`, children.length)
         for (const table of children)
           processNode(table, body, result);
@@ -6528,9 +6551,9 @@ HtmlToUDMService.use(wordPastePlugin);
 HtmlToUDMService.use(wordPastePlugin$1);
 HtmlToUDMService.use(univerPastePlugin);
 function getTableSlice(body, start, end) {
-  var _a28, _b2, _c;
+  var _a29, _b2, _c;
   const bodySlice = getBodySlice(body, start, end + 2), dataStream = DataStreamTreeTokenType.TABLE_START + DataStreamTreeTokenType.TABLE_ROW_START + DataStreamTreeTokenType.TABLE_CELL_START + bodySlice.dataStream + DataStreamTreeTokenType.TABLE_CELL_END + DataStreamTreeTokenType.TABLE_ROW_END + DataStreamTreeTokenType.TABLE_END;
-  return bodySlice.dataStream = dataStream, (_a28 = bodySlice.textRuns) == null || _a28.forEach((textRun) => {
+  return bodySlice.dataStream = dataStream, (_a29 = bodySlice.textRuns) == null || _a29.forEach((textRun) => {
     const { st, ed } = textRun;
     textRun.st = st + 3, textRun.ed = ed + 3;
   }), (_b2 = bodySlice.tables) == null || _b2.forEach((table) => {
@@ -6543,8 +6566,8 @@ function getTableSlice(body, start, end) {
 }
 __name(getTableSlice, "getTableSlice");
 const IDocClipboardService = createIdentifier("doc.clipboard-service");
-var _a4;
-let DocClipboardService = (_a4 = class extends Disposable {
+var _a5;
+let DocClipboardService = (_a5 = class extends Disposable {
   constructor(_univerInstanceService, _logService, _commandService, _clipboardInterfaceService, _docSelectionManagerService) {
     super();
     __publicField(this, "_clipboardHooks", []);
@@ -6553,8 +6576,8 @@ let DocClipboardService = (_a4 = class extends Disposable {
     this._univerInstanceService = _univerInstanceService, this._logService = _logService, this._commandService = _commandService, this._clipboardInterfaceService = _clipboardInterfaceService, this._docSelectionManagerService = _docSelectionManagerService;
   }
   async copy(sliceType = SliceBodyType.copy) {
-    var _a28;
-    const { bodyList = [], needCache = !1, snapshot } = (_a28 = this._getDocumentBodyInRanges(sliceType)) != null ? _a28 : {};
+    var _a29;
+    const { bodyList = [], needCache = !1, snapshot } = (_a29 = this._getDocumentBodyInRanges(sliceType)) != null ? _a29 : {};
     if (bodyList.length === 0 || snapshot == null)
       return !1;
     try {
@@ -6573,9 +6596,9 @@ let DocClipboardService = (_a4 = class extends Disposable {
     return this._paste(partDocData);
   }
   async legacyPaste(html, text) {
-    var _a28;
+    var _a29;
     const partDocData = this._genDocDataFromHtmlAndText(html, text);
-    if (((_a28 = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a28.getUnitId()) === DOCS_NORMAL_EDITOR_UNIT_ID_KEY)
+    if (((_a29 = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a29.getUnitId()) === DOCS_NORMAL_EDITOR_UNIT_ID_KEY)
       if (text) {
         const textDocData = BuildTextUtils.transform.fromPlainText(text);
         return this._paste({ body: textDocData });
@@ -6584,12 +6607,12 @@ let DocClipboardService = (_a4 = class extends Disposable {
     return this._paste(partDocData);
   }
   async _cut() {
-    var _a28, _b2, _c;
+    var _a29, _b2, _c;
     const {
       segmentId,
       endOffset: activeEndOffset,
       style
-    } = (_a28 = this._docSelectionManagerService.getActiveTextRange()) != null ? _a28 : {}, textRanges = (_b2 = this._docSelectionManagerService.getTextRanges()) != null ? _b2 : [], rectRanges = (_c = this._docSelectionManagerService.getRectRanges()) != null ? _c : [];
+    } = (_a29 = this._docSelectionManagerService.getActiveTextRange()) != null ? _a29 : {}, textRanges = (_b2 = this._docSelectionManagerService.getTextRanges()) != null ? _b2 : [], rectRanges = (_c = this._docSelectionManagerService.getRectRanges()) != null ? _c : [];
     if (segmentId == null && this._logService.error("[DocClipboardController] segmentId is not existed"), textRanges.length === 0 && rectRanges.length === 0)
       return !1;
     this.copy(SliceBodyType.cut);
@@ -6617,12 +6640,12 @@ let DocClipboardService = (_a4 = class extends Disposable {
     }
   }
   async _paste(docData) {
-    var _a28, _b2;
+    var _a29, _b2;
     const { body: _body } = docData;
     if (_body == null)
       return !1;
     let body = normalizeBody(_body);
-    if (!((_a28 = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a28.getUnitId()))
+    if (!((_a29 = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a29.getUnitId()))
       return !1;
     this._clipboardHooks.forEach((hook) => {
       hook.onBeforePaste && (body = hook.onBeforePaste(body));
@@ -6656,7 +6679,7 @@ let DocClipboardService = (_a4 = class extends Disposable {
     }
   }
   async _setClipboardData(documentBodyList, snapshot, needCache = !0) {
-    var _a28, _b2;
+    var _a29, _b2;
     const copyId = genId(), text = (documentBodyList.length > 1 ? documentBodyList.map((body) => body.dataStream).join(`
 `) : documentBodyList[0].dataStream).replaceAll(DataStreamTreeTokenType.CUSTOM_RANGE_START, "").replaceAll(DataStreamTreeTokenType.CUSTOM_RANGE_END, "").replaceAll(DataStreamTreeTokenType.TABLE_START, "").replaceAll(DataStreamTreeTokenType.TABLE_END, "").replaceAll(DataStreamTreeTokenType.TABLE_ROW_START, "").replaceAll(DataStreamTreeTokenType.TABLE_ROW_END, "").replaceAll(DataStreamTreeTokenType.TABLE_CELL_START, "").replaceAll(DataStreamTreeTokenType.TABLE_CELL_END, "").replaceAll(`\r
 `, " ");
@@ -6664,7 +6687,7 @@ let DocClipboardService = (_a4 = class extends Disposable {
     if (documentBodyList.length === 1 && needCache) {
       html = html.replace(/(<[a-z]+)/, (_p0, p1) => `${p1} data-copy-id="${copyId}"`);
       const body = documentBodyList[0], cache = { body };
-      if ((_a28 = body.customBlocks) != null && _a28.length) {
+      if ((_a29 = body.customBlocks) != null && _a29.length) {
         cache.drawings = {};
         for (const block of body.customBlocks) {
           const { blockId } = block, drawing = (_b2 = snapshot.drawings) == null ? void 0 : _b2[blockId];
@@ -6688,12 +6711,12 @@ let DocClipboardService = (_a4 = class extends Disposable {
     });
   }
   _getDocumentBodyInRanges(sliceType) {
-    var _a28;
+    var _a29;
     const docDataModel = this._univerInstanceService.getCurrentUniverDocInstance(), allRanges = this._docSelectionManagerService.getDocRanges(), results = [];
     let needCache = !0;
     if (docDataModel == null || allRanges.length === 0)
       return;
-    const segmentId = allRanges[0].segmentId, body = (_a28 = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId)) == null ? void 0 : _a28.getBody(), snapshot = docDataModel.getSnapshot();
+    const segmentId = allRanges[0].segmentId, body = (_a29 = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId)) == null ? void 0 : _a29.getBody(), snapshot = docDataModel.getSnapshot();
     if (body != null) {
       for (const range of allRanges) {
         const { startOffset, endOffset, collapsed, rangeType } = range;
@@ -6741,7 +6764,7 @@ let DocClipboardService = (_a4 = class extends Disposable {
     }
     return this._htmlToUDM.convert(html);
   }
-}, __name(_a4, "DocClipboardService"), _a4);
+}, __name(_a5, "DocClipboardService"), _a5);
 DocClipboardService = __decorateClass$n([
   __decorateParam$n(0, IUniverInstanceService),
   __decorateParam$n(1, ILogService),
@@ -6780,6 +6803,55 @@ const DOC_CLIPBOARD_PRIORITY = 999, DocCopyCommand = {
     const docClipboardService = accessor.get(IDocClipboardService), clipboardItems = await accessor.get(IClipboardInterfaceService).read();
     return clipboardItems.length === 0 ? !1 : docClipboardService.paste(clipboardItems);
   }, "handler")
+}, SwitchDocModeCommand = {
+  id: "doc.command.switch-mode",
+  type: CommandType.COMMAND,
+  // eslint-disable-next-line max-lines-per-function, complexity
+  handler: /* @__PURE__ */ __name(async (accessor) => {
+    var _a29, _b2, _c, _d, _e;
+    const commandService = accessor.get(ICommandService), renderManagerService = accessor.get(IRenderManagerService), docSelectionManagerService = accessor.get(DocSelectionManagerService), docDataModel = accessor.get(IUniverInstanceService).getCurrentUniverDocInstance();
+    if (docDataModel == null)
+      return !1;
+    const unitId = docDataModel.getUnitId(), skeleton = (_a29 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a29.with(DocSkeletonManagerService).getSkeleton(), docSelectionRenderService = (_b2 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _b2.with(DocSelectionRenderService);
+    if (skeleton == null || docSelectionRenderService == null)
+      return !1;
+    const segmentId = docSelectionRenderService == null ? void 0 : docSelectionRenderService.getSegment(), segmentPage = docSelectionRenderService == null ? void 0 : docSelectionRenderService.getSegmentPage(), oldDocumentFlavor = docDataModel.getSnapshot().documentStyle.documentFlavor, docRanges = docSelectionManagerService.getDocRanges(), doMutation = {
+      id: RichTextEditingMutation.id,
+      params: {
+        unitId,
+        actions: [],
+        textRanges: oldDocumentFlavor === DocumentFlavor.TRADITIONAL && segmentId ? [] : docRanges
+      }
+    }, jsonX = JSONX.getInstance(), rawActions = [];
+    let action;
+    if (oldDocumentFlavor === void 0 ? action = jsonX.insertOp(["documentStyle", "documentFlavor"], DocumentFlavor.MODERN) : oldDocumentFlavor === DocumentFlavor.MODERN ? action = jsonX.replaceOp(["documentStyle", "documentFlavor"], oldDocumentFlavor, DocumentFlavor.TRADITIONAL) : action = jsonX.replaceOp(["documentStyle", "documentFlavor"], oldDocumentFlavor, DocumentFlavor.MODERN), action)
+      rawActions.push(action);
+    else
+      return !1;
+    if (oldDocumentFlavor !== DocumentFlavor.MODERN) {
+      const snapshot = docDataModel.getSnapshot(), { drawings = {}, body } = snapshot, customBlocks = (_c = body == null ? void 0 : body.customBlocks) != null ? _c : [];
+      for (const drawingId in drawings) {
+        const drawing = drawings[drawingId], customBlock = customBlocks.find((block) => block.blockId === drawingId);
+        if (customBlock == null)
+          continue;
+        const drawingPositionV = drawing.docTransform.positionV, { relativeFrom: prevRelativeFrom, posOffset: prevPosOffset } = drawingPositionV;
+        if (prevRelativeFrom === ObjectRelativeFromV.PARAGRAPH)
+          continue;
+        const { startIndex } = customBlock, glyph = skeleton.findNodeByCharIndex(startIndex, segmentId, segmentPage), line = (_d = glyph == null ? void 0 : glyph.parent) == null ? void 0 : _d.parent, column = line == null ? void 0 : line.parent, paragraphStartLine = column == null ? void 0 : column.lines.find((l2) => l2.paragraphIndex === (line == null ? void 0 : line.paragraphIndex) && l2.paragraphStart), page = (_e = column == null ? void 0 : column.parent) == null ? void 0 : _e.parent;
+        if (glyph == null || line == null || paragraphStartLine == null || column == null || page == null)
+          continue;
+        let delta = 0;
+        prevRelativeFrom === ObjectRelativeFromV.LINE ? delta -= line.top : prevRelativeFrom === ObjectRelativeFromV.PAGE && (delta += page.marginTop), delta += paragraphStartLine.top;
+        const newPositionV = {
+          ...drawingPositionV,
+          relativeFrom: ObjectRelativeFromV.PARAGRAPH,
+          posOffset: (prevPosOffset != null ? prevPosOffset : 0) - delta
+        }, updateDrawingAction = jsonX.replaceOp(["drawings", drawingId, "docTransform", "positionV"], drawingPositionV, newPositionV);
+        updateDrawingAction && rawActions.push(updateDrawingAction);
+      }
+    }
+    return doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+  }, "handler")
 }, DocTableDeleteRowsCommand = {
   id: "doc.table.delete-rows",
   type: CommandType.COMMAND,
@@ -6814,13 +6886,10 @@ const DOC_CLIPBOARD_PRIORITY = 999, DocCopyCommand = {
     };
     offset > 0 && textX.push({
       t: TextXActionType.RETAIN,
-      len: offset,
-      segmentId
+      len: offset
     }), textX.push({
       t: TextXActionType.DELETE,
-      len,
-      line: 0,
-      segmentId
+      len
     });
     const path = getRichTextEditPath(docDataModel, segmentId);
     rawActions.push(jsonX.editOp(textX.serialize(), path));
@@ -6866,13 +6935,10 @@ const DOC_CLIPBOARD_PRIORITY = 999, DocCopyCommand = {
       const { retain, delete: deleteLen } = offset;
       retain > 0 && textX.push({
         t: TextXActionType.RETAIN,
-        len: retain,
-        segmentId
+        len: retain
       }), textX.push({
         t: TextXActionType.DELETE,
-        len: deleteLen,
-        line: 0,
-        segmentId
+        len: deleteLen
       });
     }
     const path = getRichTextEditPath(docDataModel, segmentId);
@@ -6919,13 +6985,10 @@ const DOC_CLIPBOARD_PRIORITY = 999, DocCopyCommand = {
     };
     offset > 0 && textX.push({
       t: TextXActionType.RETAIN,
-      len: offset,
-      segmentId
+      len: offset
     }), textX.push({
       t: TextXActionType.DELETE,
-      len,
-      line: 0,
-      segmentId
+      len
     });
     const path = getRichTextEditPath(docDataModel, segmentId);
     rawActions.push(jsonX.editOp(textX.serialize(), path));
@@ -6979,16 +7042,13 @@ const DOC_CLIPBOARD_PRIORITY = 999, DocCopyCommand = {
     };
     offset > 0 && textX.push({
       t: TextXActionType.RETAIN,
-      len: offset,
-      segmentId
+      len: offset
     });
     const insertBody = getInsertRowBody(colCount);
     textX.push({
       t: TextXActionType.INSERT,
       body: insertBody,
-      len: insertBody.dataStream.length,
-      line: 0,
-      segmentId
+      len: insertBody.dataStream.length
     });
     const path = getRichTextEditPath(docDataModel, segmentId);
     rawActions.push(jsonX.editOp(textX.serialize(), path));
@@ -7000,7 +7060,7 @@ const DOC_CLIPBOARD_PRIORITY = 999, DocCopyCommand = {
   type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    var _a28, _b2, _c;
+    var _a29, _b2, _c;
     const { position } = params, docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), activeRectRanges = docSelectionManagerService.getRectRanges(), activeTextRange = docSelectionManagerService.getActiveTextRange(), rangeInfo = getRangeInfoFromRanges(activeTextRange, activeRectRanges);
     if (rangeInfo == null)
       return !1;
@@ -7028,16 +7088,13 @@ const DOC_CLIPBOARD_PRIORITY = 999, DocCopyCommand = {
     for (const offset of offsets) {
       textX.push({
         t: TextXActionType.RETAIN,
-        len: offset,
-        segmentId
+        len: offset
       });
       const insertBody = getInsertColumnBody();
       textX.push({
         t: TextXActionType.INSERT,
         body: insertBody,
-        len: insertBody.dataStream.length,
-        line: 0,
-        segmentId
+        len: insertBody.dataStream.length
       });
     }
     const path = getRichTextEditPath(docDataModel, segmentId);
@@ -7046,7 +7103,7 @@ const DOC_CLIPBOARD_PRIORITY = 999, DocCopyCommand = {
       const insertCell = getEmptyTableCell(), insertTableSource = jsonX.insertOp(["tableSource", tableId, "tableRows", i, "tableCells", columnIndex], insertCell);
       rawActions.push(insertTableSource);
     }
-    const snapshot = docDataModel.getSnapshot(), documentStyle = snapshot.documentStyle, { marginLeft = 0, marginRight = 0 } = documentStyle, pageWidth = ((_b2 = (_a28 = documentStyle.pageSize) == null ? void 0 : _a28.width) != null ? _b2 : 800) - marginLeft - marginRight, tableColumns = (_c = snapshot == null ? void 0 : snapshot.tableSource) == null ? void 0 : _c[tableId].tableColumns, { newColWidth, widths } = getColumnWidths(pageWidth, tableColumns, columnIndex);
+    const snapshot = docDataModel.getSnapshot(), documentStyle = snapshot.documentStyle, { marginLeft = 0, marginRight = 0 } = documentStyle, pageWidth = ((_b2 = (_a29 = documentStyle.pageSize) == null ? void 0 : _a29.width) != null ? _b2 : 800) - marginLeft - marginRight, tableColumns = (_c = snapshot == null ? void 0 : snapshot.tableSource) == null ? void 0 : _c[tableId].tableColumns, { newColWidth, widths } = getColumnWidths(pageWidth, tableColumns, columnIndex);
     for (let i = 0; i < widths.length; i++) {
       const action = jsonX.replaceOp(["tableSource", tableId, "tableColumns", i, "size", "width", "v"], tableColumns[i].size.width.v, widths[i]);
       rawActions.push(action);
@@ -7071,52 +7128,54 @@ const BreakLineCommand = {
   id: "doc.command.break-line",
   type: CommandType.COMMAND,
   handler: /* @__PURE__ */ __name(async (accessor) => {
-    var _a28, _b2, _c, _d;
+    var _a29, _b2;
     const docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), activeTextRange = docSelectionManagerService.getActiveTextRange(), rectRanges = docSelectionManagerService.getRectRanges();
     if (activeTextRange == null)
       return !1;
     if (rectRanges && rectRanges.length) {
       const { startOffset: startOffset2 } = activeTextRange;
-      return docSelectionManagerService.replaceTextRanges([{
+      return docSelectionManagerService.replaceDocRanges([{
         startOffset: startOffset2,
         endOffset: startOffset2
       }]), !0;
     }
-    const { segmentId } = activeTextRange, docDataModel = univerInstanceService.getCurrentUniverDocInstance(), body = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
-    if (!docDataModel || !body)
+    const { segmentId } = activeTextRange, docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), body = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId != null ? segmentId : "").getBody();
+    if (docDataModel == null || body == null)
       return !1;
-    const unitId = docDataModel.getUnitId(), { startOffset, endOffset } = BuildTextUtils.selection.getInsertSelection(activeTextRange, body), prevParagraph = ((_a28 = body.paragraphs) != null ? _a28 : []).find((p2) => p2.startIndex >= startOffset);
+    const unitId = docDataModel.getUnitId(), { startOffset, endOffset } = BuildTextUtils.selection.getInsertSelection(activeTextRange, body), prevParagraph = ((_a29 = body.paragraphs) != null ? _a29 : []).find((p2) => p2.startIndex >= startOffset);
     if (!prevParagraph)
       return !1;
-    const bodyAfter = normalizeBody(getBodySlice(body, endOffset, prevParagraph.startIndex + 1));
-    bodyAfter.customRanges = (_b2 = bodyAfter.customRanges) == null ? void 0 : _b2.map(BuildTextUtils.customRange.copyCustomRange);
-    const deleteRange = {
+    const prevParagraphIndex = prevParagraph.startIndex, insertBody = {
+      dataStream: DataStreamTreeTokenType.PARAGRAPH,
+      paragraphs: generateParagraphs(DataStreamTreeTokenType.PARAGRAPH, prevParagraph)
+    }, deleteRange = {
       startOffset,
-      endOffset: prevParagraph.startIndex + 1,
-      collapsed: !1
-    };
-    return ((_d = (_c = bodyAfter.paragraphs) == null ? void 0 : _c[0].bullet) == null ? void 0 : _d.listType) === PresetListType.CHECK_LIST_CHECKED && (bodyAfter.paragraphs[0].bullet.listType = PresetListType.CHECK_LIST), updateAttributeByInsert(
-      bodyAfter,
-      {
-        dataStream: DataStreamTreeTokenType.PARAGRAPH,
-        paragraphs: generateParagraphs(DataStreamTreeTokenType.PARAGRAPH, prevParagraph)
-      },
-      1,
-      0
-    ), await commandService.executeCommand(InsertCommand.id, {
+      endOffset
+    }, result = await commandService.executeCommand(InsertCommand.id, {
       unitId,
-      body: bodyAfter,
+      body: insertBody,
       range: deleteRange,
-      segmentId,
-      cursorOffset: 1
+      segmentId
     });
+    if (((_b2 = prevParagraph.bullet) == null ? void 0 : _b2.listType) === PresetListType.CHECK_LIST_CHECKED) {
+      const params = {
+        index: prevParagraphIndex + 1 - (endOffset - startOffset),
+        segmentId,
+        textRanges: [{
+          startOffset: startOffset + 1,
+          endOffset: startOffset + 1
+        }]
+      };
+      return !!await commandService.executeCommand(ToggleCheckListCommand.id, params) && result;
+    }
+    return result;
   }, "handler")
 }, CreateDocTableCommandId = "doc.command.create-table", CreateDocTableCommand = {
   id: CreateDocTableCommandId,
   type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function, complexity
   handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    var _a28, _b2, _c, _d, _e, _f;
+    var _a29, _b2, _c, _d, _e, _f;
     const { rowCount, colCount } = params, docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), activeRange = docSelectionManagerService.getActiveTextRange();
     if (activeRange == null)
       return !1;
@@ -7126,7 +7185,7 @@ const BreakLineCommand = {
     const unitId = docDataModel.getUnitId(), docSkeletonManagerService = getCommandSkeleton(accessor, unitId), skeleton = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getSkeleton();
     if (skeleton == null)
       return !1;
-    const { startOffset } = BuildTextUtils.selection.getInsertSelection(activeRange, body), prevParagraph = ((_a28 = body.paragraphs) != null ? _a28 : []).find((p2) => p2.startIndex >= startOffset), curGlyph = skeleton.findNodeByCharIndex(startOffset, segmentId, segmentPage), line = (_b2 = curGlyph == null ? void 0 : curGlyph.parent) == null ? void 0 : _b2.parent, preGlyph = skeleton.findNodeByCharIndex(startOffset - 1, segmentId, segmentPage), isInParagraph = preGlyph && preGlyph.content !== "\r";
+    const { startOffset } = BuildTextUtils.selection.getInsertSelection(activeRange, body), prevParagraph = ((_a29 = body.paragraphs) != null ? _a29 : []).find((p2) => p2.startIndex >= startOffset), curGlyph = skeleton.findNodeByCharIndex(startOffset, segmentId, segmentPage), line = (_b2 = curGlyph == null ? void 0 : curGlyph.parent) == null ? void 0 : _b2.parent, preGlyph = skeleton.findNodeByCharIndex(startOffset - 1, segmentId, segmentPage), isInParagraph = preGlyph && preGlyph.content !== "\r";
     if (curGlyph == null || line == null)
       return !1;
     const needCreateParagraph = isInParagraph || line.isBehindTable, textX = new TextX(), jsonX = JSONX.getInstance(), rawActions = [], cursor = startOffset + (needCreateParagraph ? 4 : 3), textRanges = [{
@@ -7143,17 +7202,14 @@ const BreakLineCommand = {
     };
     startOffset > 0 && textX.push({
       t: TextXActionType.RETAIN,
-      len: startOffset,
-      segmentId
+      len: startOffset
     }), needCreateParagraph && textX.push({
       t: TextXActionType.INSERT,
       body: {
         dataStream: DataStreamTreeTokenType.PARAGRAPH,
         paragraphs: generateParagraphs(DataStreamTreeTokenType.PARAGRAPH, prevParagraph)
       },
-      len: 1,
-      line: 0,
-      segmentId
+      len: 1
     });
     const { dataStream: tableDataStream, paragraphs: tableParagraphs, sectionBreaks } = genEmptyTable(rowCount, colCount), page = (_f = (_e = (_d = (_c = curGlyph.parent) == null ? void 0 : _c.parent) == null ? void 0 : _d.parent) == null ? void 0 : _e.parent) == null ? void 0 : _f.parent;
     if (page == null)
@@ -7173,9 +7229,7 @@ const BreakLineCommand = {
           }
         ]
       },
-      len: tableDataStream.length,
-      line: 0,
-      segmentId
+      len: tableDataStream.length
     });
     const path = getRichTextEditPath(docDataModel, segmentId);
     rawActions.push(jsonX.editOp(textX.serialize(), path));
@@ -7217,11 +7271,11 @@ const BreakLineCommand = {
   id: "doc-paragraph-setting.command",
   type: CommandType.COMMAND,
   handler: /* @__PURE__ */ __name(async (accessor, config) => {
-    var _a28, _b2, _c;
+    var _a29, _b2, _c;
     const docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), docRanges = docSelectionManagerService.getDocRanges();
     if (!docDataModel || docRanges.length === 0 || !config)
       return !1;
-    const segmentId = docRanges[0].segmentId, unitId = docDataModel.getUnitId(), allParagraphs = (_b2 = (_a28 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a28.paragraphs) != null ? _b2 : [], paragraphs = (_c = getParagraphsInRanges(docRanges, allParagraphs)) != null ? _c : [], doMutation = {
+    const segmentId = docRanges[0].segmentId, unitId = docDataModel.getUnitId(), allParagraphs = (_b2 = (_a29 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a29.paragraphs) != null ? _b2 : [], paragraphs = (_c = getParagraphsInRanges(docRanges, allParagraphs)) != null ? _c : [], doMutation = {
       id: RichTextEditingMutation.id,
       params: {
         unitId,
@@ -7235,8 +7289,7 @@ const BreakLineCommand = {
       const { startIndex } = paragraph;
       textX.push({
         t: TextXActionType.RETAIN,
-        len: startIndex - memoryCursor.cursor,
-        segmentId
+        len: startIndex - memoryCursor.cursor
       });
       const paragraphStyle = {
         ...paragraph.paragraphStyle,
@@ -7255,7 +7308,6 @@ const BreakLineCommand = {
             }
           ]
         },
-        segmentId,
         coverType: UpdateDocsAttributeType.REPLACE
       }), memoryCursor.moveCursorTo(startIndex + 1);
     }
@@ -7268,89 +7320,89 @@ const BreakLineCommand = {
     docRanges.length || docParagraphSettingController.closePanel();
   }, [docRanges]), docRanges;
 }, "useDocRanges"), useCurrentParagraph = /* @__PURE__ */ __name(() => {
-  var _a28, _b2, _c;
+  var _a29, _b2, _c;
   const docDataModel = useDependency(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), docRanges = useDocRanges();
   if (!docDataModel || docRanges.length === 0)
     return [];
-  const segmentId = docRanges[0].segmentId, paragraphs = (_b2 = (_a28 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a28.paragraphs) != null ? _b2 : [];
+  const segmentId = docRanges[0].segmentId, paragraphs = (_b2 = (_a29 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a29.paragraphs) != null ? _b2 : [];
   return (_c = getParagraphsInRanges(docRanges, paragraphs)) != null ? _c : [];
 }, "useCurrentParagraph"), useFirstParagraphHorizontalAlign = /* @__PURE__ */ __name((paragraph, defaultValue) => {
   const commandService = useDependency(ICommandService), [horizontalAlign, _horizontalAlignSet] = useState(() => {
-    var _a28, _b2;
+    var _a29, _b2;
     const firstParagraph = paragraph[0];
-    return firstParagraph ? String((_b2 = (_a28 = firstParagraph.paragraphStyle) == null ? void 0 : _a28.horizontalAlign) != null ? _b2 : defaultValue) : defaultValue;
+    return firstParagraph ? String((_b2 = (_a29 = firstParagraph.paragraphStyle) == null ? void 0 : _a29.horizontalAlign) != null ? _b2 : defaultValue) : defaultValue;
   });
   return [horizontalAlign, /* @__PURE__ */ __name((v) => (_horizontalAlignSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
     paragraph: { horizontalAlign: Number(v) }
   })), "horizontalAlignSet")];
 }, "useFirstParagraphHorizontalAlign"), useFirstParagraphIndentStart = /* @__PURE__ */ __name((paragraph) => {
   const commandService = useDependency(ICommandService), [indentStart, _indentStartSet] = useState(() => {
-    var _a28;
+    var _a29;
     const firstParagraph = paragraph[0];
-    return firstParagraph ? getNumberUnitValue((_a28 = firstParagraph.paragraphStyle) == null ? void 0 : _a28.indentStart, 0) : 0;
+    return firstParagraph ? getNumberUnitValue((_a29 = firstParagraph.paragraphStyle) == null ? void 0 : _a29.indentStart, 0) : 0;
   });
   return [indentStart, /* @__PURE__ */ __name((v) => (_indentStartSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
     paragraph: { indentStart: { v } }
   })), "indentStartSet")];
 }, "useFirstParagraphIndentStart"), useFirstParagraphIndentEnd = /* @__PURE__ */ __name((paragraph) => {
   const commandService = useDependency(ICommandService), [indentEnd, _indentEndSet] = useState(() => {
-    var _a28;
+    var _a29;
     const firstParagraph = paragraph[0];
-    return firstParagraph ? getNumberUnitValue((_a28 = firstParagraph.paragraphStyle) == null ? void 0 : _a28.indentEnd, 0) : 0;
+    return firstParagraph ? getNumberUnitValue((_a29 = firstParagraph.paragraphStyle) == null ? void 0 : _a29.indentEnd, 0) : 0;
   });
   return [indentEnd, /* @__PURE__ */ __name((v) => (_indentEndSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
     paragraph: { indentEnd: { v } }
   })), "indentEndSet")];
 }, "useFirstParagraphIndentEnd"), useFirstParagraphIndentFirstLine = /* @__PURE__ */ __name((paragraph) => {
   const commandService = useDependency(ICommandService), [indentFirstLine, _indentFirstLineSet] = useState(() => {
-    var _a28;
+    var _a29;
     const firstParagraph = paragraph[0];
-    return firstParagraph ? getNumberUnitValue((_a28 = firstParagraph.paragraphStyle) == null ? void 0 : _a28.indentFirstLine, 0) : 0;
+    return firstParagraph ? getNumberUnitValue((_a29 = firstParagraph.paragraphStyle) == null ? void 0 : _a29.indentFirstLine, 0) : 0;
   });
   return [indentFirstLine, /* @__PURE__ */ __name((v) => (_indentFirstLineSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
     paragraph: { indentFirstLine: { v } }
   })), "indentFirstLineSet")];
 }, "useFirstParagraphIndentFirstLine"), useFirstParagraphIndentHanging = /* @__PURE__ */ __name((paragraph) => {
   const commandService = useDependency(ICommandService), [hanging, _hangingSet] = useState(() => {
-    var _a28;
+    var _a29;
     const firstParagraph = paragraph[0];
-    return firstParagraph ? getNumberUnitValue((_a28 = firstParagraph.paragraphStyle) == null ? void 0 : _a28.hanging, 0) : 0;
+    return firstParagraph ? getNumberUnitValue((_a29 = firstParagraph.paragraphStyle) == null ? void 0 : _a29.hanging, 0) : 0;
   });
   return [hanging, /* @__PURE__ */ __name((v) => (_hangingSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
     paragraph: { hanging: { v } }
   })), "hangingSet")];
 }, "useFirstParagraphIndentHanging"), useFirstParagraphIndentSpaceAbove = /* @__PURE__ */ __name((paragraph) => {
   const commandService = useDependency(ICommandService), [spaceAbove, _spaceAboveSet] = useState(() => {
-    var _a28;
+    var _a29;
     const firstParagraph = paragraph[0];
-    return firstParagraph ? getNumberUnitValue((_a28 = firstParagraph.paragraphStyle) == null ? void 0 : _a28.spaceAbove, 0) : 0;
+    return firstParagraph ? getNumberUnitValue((_a29 = firstParagraph.paragraphStyle) == null ? void 0 : _a29.spaceAbove, 0) : 0;
   });
   return [spaceAbove, /* @__PURE__ */ __name((v) => (_spaceAboveSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
     paragraph: { spaceAbove: { v } }
   })), "spaceAboveSet")];
 }, "useFirstParagraphIndentSpaceAbove"), useFirstParagraphSpaceBelow = /* @__PURE__ */ __name((paragraph) => {
   const commandService = useDependency(ICommandService), [spaceBelow, _spaceBelowSet] = useState(() => {
-    var _a28;
+    var _a29;
     const firstParagraph = paragraph[0];
-    return firstParagraph ? getNumberUnitValue((_a28 = firstParagraph.paragraphStyle) == null ? void 0 : _a28.spaceBelow, 0) : 0;
+    return firstParagraph ? getNumberUnitValue((_a29 = firstParagraph.paragraphStyle) == null ? void 0 : _a29.spaceBelow, 0) : 0;
   });
   return [spaceBelow, /* @__PURE__ */ __name((v) => (_spaceBelowSet(v), commandService.executeCommand(DocParagraphSettingCommand.id, {
     paragraph: { spaceBelow: { v } }
   })), "spaceBelowSet")];
 }, "useFirstParagraphSpaceBelow"), useFirstParagraphLineSpacing = /* @__PURE__ */ __name((paragraph) => {
   const commandService = useDependency(ICommandService), renderManagerService = useDependency(IRenderManagerService), univerInstanceService = useDependency(IUniverInstanceService), skeleton = useMemo(() => {
-    var _a28;
+    var _a29;
     const docDataModel = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
     if (docDataModel)
-      return (_a28 = renderManagerService.getRenderById(docDataModel == null ? void 0 : docDataModel.getUnitId())) == null ? void 0 : _a28.with(DocSkeletonManagerService).getSkeleton();
+      return (_a29 = renderManagerService.getRenderById(docDataModel == null ? void 0 : docDataModel.getUnitId())) == null ? void 0 : _a29.with(DocSkeletonManagerService).getSkeleton();
   }, []), stateChange$ = useMemo(() => new BehaviorSubject({}), []), [lineSpacing, _lineSpacingSet] = useState(() => {
-    var _a28, _b2;
+    var _a29, _b2;
     const firstParagraph = paragraph[0];
-    return firstParagraph && (_b2 = (_a28 = firstParagraph.paragraphStyle) == null ? void 0 : _a28.lineSpacing) != null ? _b2 : 1;
+    return firstParagraph && (_b2 = (_a29 = firstParagraph.paragraphStyle) == null ? void 0 : _a29.lineSpacing) != null ? _b2 : 1;
   }), lineSpacingCache = useRef(lineSpacing), [spacingRule, _spacingRuleSet] = useState(() => {
-    var _a28, _b2;
+    var _a29, _b2;
     const firstParagraph = paragraph[0];
-    return firstParagraph ? (_b2 = (_a28 = firstParagraph.paragraphStyle) == null ? void 0 : _a28.spacingRule) != null ? _b2 : SpacingRule.AUTO : SpacingRule.AUTO;
+    return firstParagraph ? (_b2 = (_a29 = firstParagraph.paragraphStyle) == null ? void 0 : _a29.spacingRule) != null ? _b2 : SpacingRule.AUTO : SpacingRule.AUTO;
   }), lineSpacingSet = /* @__PURE__ */ __name(async (v) => {
     _lineSpacingSet(v), stateChange$.next({ lineSpacing: v, spacingRule });
   }, "lineSpacingSet"), spacingRuleSet = /* @__PURE__ */ __name(async (v) => {
@@ -7402,8 +7454,8 @@ const BreakLineCommand = {
       onChange: /* @__PURE__ */ __name((v) => {
         onChange(v != null ? v : 0).finally(() => {
           setTimeout(() => {
-            var _a28;
-            (_a28 = ref.current) == null || _a28.focus();
+            var _a29;
+            (_a29 = ref.current) == null || _a29.focus();
           }, 30);
         });
       }, "onChange"),
@@ -7517,13 +7569,13 @@ function ParagraphSettingIndex() {
   const commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), currentLocale = useObservable(localeService.currentLocale$), [key, keySet] = useState(""), rangeRef = useRef([]);
   return useEffect(() => {
     const dispose = commandService.onCommandExecuted((info) => {
-      var _a28;
+      var _a29;
       if (SetTextSelectionsOperation.id === info.id) {
         const ranges = info.params.ranges;
         isRangesEqual(ranges, rangeRef.current) || keySet(generateRandomId(4)), rangeRef.current = ranges;
       }
       if (RichTextEditingMutation.id === info.id) {
-        const params = info.params, ranges = (_a28 = params.textRanges) != null ? _a28 : [];
+        const params = info.params, ranges = (_a29 = params.textRanges) != null ? _a29 : [];
         params.trigger !== DocParagraphSettingCommand.id && isRangesIntersection(ranges, rangeRef.current) && keySet(generateRandomId(4));
       }
     });
@@ -7539,8 +7591,8 @@ var __defProp$m = Object.defineProperty, __getOwnPropDesc$m = Object.getOwnPrope
   return kind && result && __defProp$m(target, key, result), result;
 }, "__decorateClass$m"), __decorateParam$m = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$m");
 const paragraphSettingIndexKey = "doc_ui_paragraph-setting-panel";
-var _a5;
-let DocParagraphSettingController = (_a5 = class extends Disposable {
+var _a6;
+let DocParagraphSettingController = (_a6 = class extends Disposable {
   constructor(_commandService, _componentManager, _sidebarService) {
     super();
     __publicField(this, "_id");
@@ -7563,7 +7615,7 @@ let DocParagraphSettingController = (_a5 = class extends Disposable {
   closePanel() {
     this._sidebarService.close(this._id);
   }
-}, __name(_a5, "DocParagraphSettingController"), _a5);
+}, __name(_a6, "DocParagraphSettingController"), _a6);
 DocParagraphSettingController = __decorateClass$m([
   __decorateParam$m(0, ICommandService),
   __decorateParam$m(1, Inject(ComponentManager)),
@@ -7594,14 +7646,14 @@ const getDisableWhenSelectionNotInTableObservable = /* @__PURE__ */ __name((acce
   const docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService);
   return new Observable((subscriber) => {
     const observable = docSelectionManagerService.textSelection$.subscribe(() => {
-      var _a28;
+      var _a29;
       const rectRanges = docSelectionManagerService.getRectRanges(), activeRange = docSelectionManagerService.getActiveTextRange();
       if (rectRanges && rectRanges.length && inSameTable(rectRanges)) {
         subscriber.next(!1);
         return;
       }
       if (activeRange && (rectRanges == null || rectRanges.length === 0)) {
-        const { segmentId, startOffset, endOffset } = activeRange, docDataModel = univerInstanceService.getCurrentUniverDocInstance(), tables = (_a28 = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a28.tables;
+        const { segmentId, startOffset, endOffset } = activeRange, docDataModel = univerInstanceService.getCurrentUniverDocInstance(), tables = (_a29 = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a29.tables;
         if (tables && tables.length && tables.some((table) => {
           const { startIndex, endIndex } = table;
           return startOffset > startIndex && startOffset < endIndex || endOffset > startIndex && endOffset < endIndex;
@@ -7767,6 +7819,38 @@ function getInsertTableHiddenObservable(accessor) {
   });
 }
 __name(getInsertTableHiddenObservable, "getInsertTableHiddenObservable");
+function getHeaderFooterDisabledObservable(accessor) {
+  const univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService);
+  return new Observable((subscriber) => {
+    const subscription0 = commandService.onCommandExecuted((command) => {
+      if (command.id === SwitchDocModeCommand.id) {
+        const docDataModel = univerInstanceService.getCurrentUniverDocInstance();
+        if (docDataModel == null) {
+          subscriber.next(!0);
+          return;
+        }
+        const documentStyle = docDataModel.getSnapshot().documentStyle;
+        subscriber.next((documentStyle == null ? void 0 : documentStyle.documentFlavor) !== DocumentFlavor.TRADITIONAL);
+      }
+    }), subscription = univerInstanceService.focused$.subscribe((unitId) => {
+      var _a29;
+      if (unitId == null) {
+        subscriber.next(!0);
+        return;
+      }
+      const docDataModel = univerInstanceService.getUnit(unitId);
+      if (docDataModel == null) {
+        subscriber.next(!0);
+        return;
+      }
+      return subscriber.next(((_a29 = docDataModel.getSnapshot().documentStyle) == null ? void 0 : _a29.documentFlavor) !== DocumentFlavor.TRADITIONAL);
+    });
+    return () => {
+      subscription.unsubscribe(), subscription0.dispose();
+    };
+  });
+}
+__name(getHeaderFooterDisabledObservable, "getHeaderFooterDisabledObservable");
 function getTableDisabledObservable(accessor) {
   const docSelectionManagerService = accessor.get(DocSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService);
   return new Observable((subscriber) => {
@@ -7841,7 +7925,7 @@ function BoldMenuItemFactory(accessor) {
     tooltip: "toolbar.bold",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
-        var _a28;
+        var _a29;
         const id = c.id;
         if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
           const textRun = getFontStyleAtCursor(accessor);
@@ -7849,7 +7933,7 @@ function BoldMenuItemFactory(accessor) {
             subscriber.next(!1);
             return;
           }
-          const bl = (_a28 = textRun.ts) == null ? void 0 : _a28.bl;
+          const bl = (_a29 = textRun.ts) == null ? void 0 : _a29.bl;
           subscriber.next(bl === BooleanNumber.TRUE);
         }
       });
@@ -7870,7 +7954,7 @@ function ItalicMenuItemFactory(accessor) {
     tooltip: "toolbar.italic",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
-        var _a28;
+        var _a29;
         const id = c.id;
         if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
           const textRun = getFontStyleAtCursor(accessor);
@@ -7878,7 +7962,7 @@ function ItalicMenuItemFactory(accessor) {
             subscriber.next(!1);
             return;
           }
-          const it = (_a28 = textRun.ts) == null ? void 0 : _a28.it;
+          const it = (_a29 = textRun.ts) == null ? void 0 : _a29.it;
           subscriber.next(it === BooleanNumber.TRUE);
         }
       });
@@ -7899,7 +7983,7 @@ function UnderlineMenuItemFactory(accessor) {
     tooltip: "toolbar.underline",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
-        var _a28;
+        var _a29;
         const id = c.id;
         if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
           const textRun = getFontStyleAtCursor(accessor);
@@ -7907,7 +7991,7 @@ function UnderlineMenuItemFactory(accessor) {
             subscriber.next(!1);
             return;
           }
-          const ul = (_a28 = textRun.ts) == null ? void 0 : _a28.ul;
+          const ul = (_a29 = textRun.ts) == null ? void 0 : _a29.ul;
           subscriber.next((ul == null ? void 0 : ul.s) === BooleanNumber.TRUE);
         }
       });
@@ -7928,7 +8012,7 @@ function StrikeThroughMenuItemFactory(accessor) {
     tooltip: "toolbar.strikethrough",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
-        var _a28;
+        var _a29;
         const id = c.id;
         if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
           const textRun = getFontStyleAtCursor(accessor);
@@ -7936,7 +8020,7 @@ function StrikeThroughMenuItemFactory(accessor) {
             subscriber.next(!1);
             return;
           }
-          const st = (_a28 = textRun.ts) == null ? void 0 : _a28.st;
+          const st = (_a29 = textRun.ts) == null ? void 0 : _a29.st;
           subscriber.next((st == null ? void 0 : st.s) === BooleanNumber.TRUE);
         }
       });
@@ -7956,7 +8040,7 @@ function SubscriptMenuItemFactory(accessor) {
     tooltip: "toolbar.subscript",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
-        var _a28;
+        var _a29;
         const id = c.id;
         if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
           const textRun = getFontStyleAtCursor(accessor);
@@ -7964,7 +8048,7 @@ function SubscriptMenuItemFactory(accessor) {
             subscriber.next(!1);
             return;
           }
-          const va = (_a28 = textRun.ts) == null ? void 0 : _a28.va;
+          const va = (_a29 = textRun.ts) == null ? void 0 : _a29.va;
           subscriber.next(va === BaselineOffset.SUBSCRIPT);
         }
       });
@@ -7984,7 +8068,7 @@ function SuperscriptMenuItemFactory(accessor) {
     tooltip: "toolbar.superscript",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
-        var _a28;
+        var _a29;
         const id = c.id;
         if (id === SetTextSelectionsOperation.id || id === SetInlineFormatCommand.id) {
           const textRun = getFontStyleAtCursor(accessor);
@@ -7992,7 +8076,7 @@ function SuperscriptMenuItemFactory(accessor) {
             subscriber.next(!1);
             return;
           }
-          const va = (_a28 = textRun.ts) == null ? void 0 : _a28.va;
+          const va = (_a29 = textRun.ts) == null ? void 0 : _a29.va;
           subscriber.next(va === BaselineOffset.SUPERSCRIPT);
         }
       });
@@ -8020,7 +8104,7 @@ function FontFamilySelectorMenuItemFactory(accessor) {
     // disabled$: getCurrentSheetDisabled$(accessor),
     value$: new Observable((subscriber) => {
       const defaultValue = FONT_FAMILY_LIST[0].value, disposable = commandService.onCommandExecuted((c) => {
-        var _a28;
+        var _a29;
         const id = c.id;
         if (id === SetTextSelectionsOperation.id || id === SetInlineFormatFontFamilyCommand.id) {
           const textRun = getFontStyleAtCursor(accessor);
@@ -8028,7 +8112,7 @@ function FontFamilySelectorMenuItemFactory(accessor) {
             subscriber.next(defaultValue);
             return;
           }
-          const ff = (_a28 = textRun.ts) == null ? void 0 : _a28.ff;
+          const ff = (_a29 = textRun.ts) == null ? void 0 : _a29.ff;
           subscriber.next(ff != null ? ff : defaultValue);
         }
       });
@@ -8057,7 +8141,7 @@ function FontSizeSelectorMenuItemFactory(accessor) {
     // disabled$,
     value$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
-        var _a28;
+        var _a29;
         const id = c.id;
         if (id === SetTextSelectionsOperation.id || id === SetInlineFormatFontSizeCommand.id) {
           const textRun = getFontStyleAtCursor(accessor);
@@ -8065,7 +8149,7 @@ function FontSizeSelectorMenuItemFactory(accessor) {
             subscriber.next(14);
             return;
           }
-          const fs = (_a28 = textRun.ts) == null ? void 0 : _a28.fs;
+          const fs = (_a29 = textRun.ts) == null ? void 0 : _a29.fs;
           subscriber.next(fs != null ? fs : 14);
         }
       });
@@ -8112,6 +8196,7 @@ function HeaderFooterMenuItemFactory(accessor) {
     type: MenuItemType.BUTTON,
     icon: "HeaderFooterSingle",
     tooltip: "toolbar.headerFooter",
+    disabled$: getHeaderFooterDisabledObservable(accessor),
     hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getHeaderFooterMenuHiddenObservable(accessor), (one, two) => one || two)
   };
 }
@@ -8148,13 +8233,13 @@ function AlignLeftMenuItemFactory(accessor) {
     disabled$: disableMenuWhenNoDocRange(accessor),
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
-        var _a28;
+        var _a29;
         const id = c.id;
         if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
           const paragraph = getParagraphStyleAtCursor(accessor);
           if (paragraph == null)
             return;
-          const alignType = (_a28 = paragraph.paragraphStyle) == null ? void 0 : _a28.horizontalAlign;
+          const alignType = (_a29 = paragraph.paragraphStyle) == null ? void 0 : _a29.horizontalAlign;
           subscriber.next(alignType === HorizontalAlign.LEFT);
         }
       });
@@ -8173,13 +8258,13 @@ function AlignCenterMenuItemFactory(accessor) {
     tooltip: "toolbar.alignCenter",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
-        var _a28;
+        var _a29;
         const id = c.id;
         if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
           const paragraph = getParagraphStyleAtCursor(accessor);
           if (paragraph == null)
             return;
-          const alignType = (_a28 = paragraph.paragraphStyle) == null ? void 0 : _a28.horizontalAlign;
+          const alignType = (_a29 = paragraph.paragraphStyle) == null ? void 0 : _a29.horizontalAlign;
           subscriber.next(alignType === HorizontalAlign.CENTER);
         }
       });
@@ -8199,13 +8284,13 @@ function AlignRightMenuItemFactory(accessor) {
     tooltip: "toolbar.alignRight",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
-        var _a28;
+        var _a29;
         const id = c.id;
         if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
           const paragraph = getParagraphStyleAtCursor(accessor);
           if (paragraph == null)
             return;
-          const alignType = (_a28 = paragraph.paragraphStyle) == null ? void 0 : _a28.horizontalAlign;
+          const alignType = (_a29 = paragraph.paragraphStyle) == null ? void 0 : _a29.horizontalAlign;
           subscriber.next(alignType === HorizontalAlign.RIGHT);
         }
       });
@@ -8225,13 +8310,13 @@ function AlignJustifyMenuItemFactory(accessor) {
     tooltip: "toolbar.alignJustify",
     activated$: new Observable((subscriber) => {
       const disposable = commandService.onCommandExecuted((c) => {
-        var _a28;
+        var _a29;
         const id = c.id;
         if (id === SetTextSelectionsOperation.id || id === AlignOperationCommand.id) {
           const paragraph = getParagraphStyleAtCursor(accessor);
           if (paragraph == null)
             return;
-          const alignType = (_a28 = paragraph.paragraphStyle) == null ? void 0 : _a28.horizontalAlign;
+          const alignType = (_a29 = paragraph.paragraphStyle) == null ? void 0 : _a29.horizontalAlign;
           subscriber.next(alignType === HorizontalAlign.JUSTIFIED);
         }
       });
@@ -8250,14 +8335,14 @@ const listValueFactory$ = /* @__PURE__ */ __name((accessor) => new Observable((s
       return;
     const docDataModel = univerInstanceService.getUniverDocInstance(unitId);
     docDataModel != null && (textSubscription = docSelectionManagerService.textSelection$.subscribe(() => {
-      var _a28, _b2;
+      var _a29, _b2;
       const range = docSelectionManagerService.getActiveTextRange();
       if (range) {
-        const doc = docDataModel.getSelfOrHeaderFooterModel(range == null ? void 0 : range.segmentId), paragraphs = getParagraphsInRange(range, (_b2 = (_a28 = doc.getBody()) == null ? void 0 : _a28.paragraphs) != null ? _b2 : []);
+        const doc = docDataModel.getSelfOrHeaderFooterModel(range == null ? void 0 : range.segmentId), paragraphs = getParagraphsInRange(range, (_b2 = (_a29 = doc.getBody()) == null ? void 0 : _a29.paragraphs) != null ? _b2 : []);
         let listType;
         if (paragraphs.every((p2) => {
-          var _a29;
-          return listType || (listType = (_a29 = p2.bullet) == null ? void 0 : _a29.listType), p2.bullet && p2.bullet.listType === listType;
+          var _a30;
+          return listType || (listType = (_a30 = p2.bullet) == null ? void 0 : _a30.listType), p2.bullet && p2.bullet.listType === listType;
         })) {
           subscriber.next(listType);
           return;
@@ -8324,6 +8409,28 @@ function CheckListMenuItemFactory(accessor) {
   };
 }
 __name(CheckListMenuItemFactory, "CheckListMenuItemFactory");
+function DocSwitchModeMenuItemFactory(accessor) {
+  const commandService = accessor.get(ICommandService), univerInstanceService = accessor.get(IUniverInstanceService);
+  return {
+    id: SwitchDocModeCommand.id,
+    type: MenuItemType.BUTTON,
+    icon: "KeyboardSingle",
+    tooltip: "toolbar.documentFlavor",
+    hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC, void 0, DOCS_ZEN_EDITOR_UNIT_ID_KEY),
+    activated$: new Observable((subscriber) => {
+      var _a29;
+      const subscription = commandService.onCommandExecuted((c) => {
+        var _a30;
+        if (c.id === SwitchDocModeCommand.id) {
+          const instance2 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
+          subscriber.next(((_a30 = instance2 == null ? void 0 : instance2.getSnapshot()) == null ? void 0 : _a30.documentStyle.documentFlavor) === DocumentFlavor.MODERN);
+        }
+      }), instance = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
+      return subscriber.next(((_a29 = instance == null ? void 0 : instance.getSnapshot()) == null ? void 0 : _a29.documentStyle.documentFlavor) === DocumentFlavor.MODERN), () => subscription.dispose();
+    })
+  };
+}
+__name(DocSwitchModeMenuItemFactory, "DocSwitchModeMenuItemFactory");
 function ResetBackgroundColorMenuItemFactory(accessor) {
   return {
     id: ResetInlineFormatTextBackgroundColorCommand.id,
@@ -8363,13 +8470,17 @@ function BackgroundColorSelectorMenuItemFactory(accessor) {
 }
 __name(BackgroundColorSelectorMenuItemFactory, "BackgroundColorSelectorMenuItemFactory");
 function getFontStyleAtCursor(accessor) {
-  var _a28;
-  const univerInstanceService = accessor.get(IUniverInstanceService), textSelectionService = accessor.get(DocSelectionManagerService), docDataModel = univerInstanceService.getCurrentUniverDocInstance(), activeTextRange = textSelectionService.getActiveTextRange();
+  var _a29, _b2;
+  const univerInstanceService = accessor.get(IUniverInstanceService), textSelectionService = accessor.get(DocSelectionManagerService), docMenuStyleService = accessor.get(DocMenuStyleService), docDataModel = univerInstanceService.getCurrentUniverDocInstance(), activeTextRange = textSelectionService.getActiveTextRange(), cacheStyle = (_a29 = docMenuStyleService.getStyleCache()) != null ? _a29 : {};
   if (docDataModel == null || activeTextRange == null)
-    return;
-  const { startOffset, segmentId } = activeTextRange, textRuns = (_a28 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a28.textRuns;
+    return {
+      ts: cacheStyle
+    };
+  const { startOffset, segmentId } = activeTextRange, textRuns = (_b2 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _b2.textRuns;
   if (textRuns == null)
-    return;
+    return {
+      ts: cacheStyle
+    };
   let textRun;
   for (let i = textRuns.length - 1; i >= 0; i--) {
     const curTextRun = textRuns[i];
@@ -8378,15 +8489,21 @@ function getFontStyleAtCursor(accessor) {
       break;
     }
   }
-  return textRun;
+  return {
+    ...textRun,
+    ts: {
+      ...textRun == null ? void 0 : textRun.ts,
+      ...cacheStyle
+    }
+  };
 }
 __name(getFontStyleAtCursor, "getFontStyleAtCursor");
 function getParagraphStyleAtCursor(accessor) {
-  var _a28;
+  var _a29;
   const univerInstanceService = accessor.get(IUniverInstanceService), textSelectionService = accessor.get(DocSelectionManagerService), docDataModel = univerInstanceService.getCurrentUniverDocInstance(), activeTextRange = textSelectionService.getActiveTextRange();
   if (docDataModel == null || activeTextRange == null)
     return;
-  const { startOffset, segmentId } = activeTextRange, paragraphs = (_a28 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a28.paragraphs;
+  const { startOffset, segmentId } = activeTextRange, paragraphs = (_a29 = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) == null ? void 0 : _a29.paragraphs;
   if (paragraphs == null)
     return;
   let prevIndex = -1;
@@ -8486,6 +8603,10 @@ const menuSchema = {
     [OpenHeaderFooterPanelCommand.id]: {
       order: 9,
       menuItemFactory: HeaderFooterMenuItemFactory
+    },
+    [SwitchDocModeCommand.id]: {
+      order: 10,
+      menuItemFactory: DocSwitchModeMenuItemFactory
     }
   },
   [ContextMenuPosition.MAIN_AREA]: {
@@ -8555,8 +8676,8 @@ var __defProp$l = Object.defineProperty, __getOwnPropDesc$l = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$l(target, key, result), result;
-}, "__decorateClass$l"), __decorateParam$l = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$l"), _a6;
-let DocUIController = (_a6 = class extends Disposable {
+}, "__decorateClass$l"), __decorateParam$l = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$l"), _a7;
+let DocUIController = (_a7 = class extends Disposable {
   constructor(_injector, _componentManager, _commandService, _layoutService, _menuManagerService, _uiPartsService, _univerInstanceService, _shortcutService, _configService) {
     super(), this._injector = _injector, this._componentManager = _componentManager, this._commandService = _commandService, this._layoutService = _layoutService, this._menuManagerService = _menuManagerService, this._uiPartsService = _uiPartsService, this._univerInstanceService = _univerInstanceService, this._shortcutService = _shortcutService, this._configService = _configService, this._init();
   }
@@ -8566,9 +8687,9 @@ let DocUIController = (_a6 = class extends Disposable {
   }
   // TODO: @zhangwei, why add workbook to docs-ui?
   _initUiParts() {
-    var _a28, _b2;
+    var _a29, _b2;
     const workbook = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET), config = this._configService.getConfig(PLUGIN_CONFIG_KEY);
-    (_b2 = (_a28 = config == null ? void 0 : config.layout) == null ? void 0 : _a28.docContainerConfig) != null && _b2.footer && !workbook && this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.FOOTER, () => connectInjector(DocFooter, this._injector)));
+    (_b2 = (_a29 = config == null ? void 0 : config.layout) == null ? void 0 : _a29.docContainerConfig) != null && _b2.footer && !workbook && this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.FOOTER, () => connectInjector(DocFooter, this._injector)));
   }
   _initMenus() {
     this._menuManagerService.mergeMenu(menuSchema);
@@ -8609,7 +8730,7 @@ let DocUIController = (_a6 = class extends Disposable {
       })
     );
   }
-}, __name(_a6, "DocUIController"), _a6);
+}, __name(_a7, "DocUIController"), _a7);
 DocUIController = __decorateClass$l([
   __decorateParam$l(0, Inject(Injector)),
   __decorateParam$l(1, Inject(ComponentManager)),
@@ -8627,8 +8748,8 @@ var __defProp$k = Object.defineProperty, __getOwnPropDesc$k = Object.getOwnPrope
   return kind && result && __defProp$k(target, key, result), result;
 }, "__decorateClass$k"), __decorateParam$k = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$k");
 const ANCHOR_WIDTH = 1.5;
-var _a7;
-let DocBackScrollRenderController = (_a7 = class extends RxDisposable {
+var _a8;
+let DocBackScrollRenderController = (_a8 = class extends RxDisposable {
   constructor(_context, _textSelectionManagerService, _editorService, _docSkeletonManagerService) {
     super(), this._context = _context, this._textSelectionManagerService = _textSelectionManagerService, this._editorService = _editorService, this._docSkeletonManagerService = _docSkeletonManagerService, this._init();
   }
@@ -8648,7 +8769,7 @@ let DocBackScrollRenderController = (_a7 = class extends RxDisposable {
     anchorNodePosition && this.scrollToNode(anchorNodePosition);
   }
   scrollToNode(startNodePosition) {
-    var _a28;
+    var _a29;
     const { unitId, scene, mainComponent } = this._context, skeleton = this._docSkeletonManagerService.getSkeleton();
     if (mainComponent == null || skeleton == null)
       return;
@@ -8662,7 +8783,7 @@ let DocBackScrollRenderController = (_a7 = class extends RxDisposable {
       bottom: boundBottom
     } = viewportMain.getBounding().viewBound;
     let offsetY = 0, offsetX = 0;
-    const delta = editor ? (_a28 = editor.params.backScrollOffset) != null ? _a28 : 0 : 100;
+    const delta = editor ? (_a29 = editor.params.backScrollOffset) != null ? _a29 : 0 : 100;
     top < boundTop ? offsetY = top - boundTop - delta : top > boundBottom - height && (offsetY = top - boundBottom + height + delta), left < boundLeft ? offsetX = left - boundLeft : left > boundRight - ANCHOR_WIDTH && (offsetX = left - boundRight + ANCHOR_WIDTH);
     const config = viewportMain.transViewportScroll2ScrollValue(offsetX, offsetY);
     viewportMain.scrollByBarDeltaValue(config);
@@ -8675,7 +8796,7 @@ let DocBackScrollRenderController = (_a7 = class extends RxDisposable {
     const { collapsed, startNodePosition } = activeTextRange;
     collapsed && this.scrollToNode(startNodePosition);
   }
-}, __name(_a7, "DocBackScrollRenderController"), _a7);
+}, __name(_a8, "DocBackScrollRenderController"), _a8);
 DocBackScrollRenderController = __decorateClass$k([
   __decorateParam$k(1, Inject(DocSelectionManagerService)),
   __decorateParam$k(2, IEditorService),
@@ -8685,14 +8806,14 @@ var __defProp$j = Object.defineProperty, __getOwnPropDesc$j = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$j(target, key, result), result;
-}, "__decorateClass$j"), __decorateParam$j = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$j"), _a8;
-let DocRenderController = (_a8 = class extends RxDisposable {
-  constructor(_context, _contextService, _commandService, _docSelectionRenderService, _docSkeletonManagerService, _editorService, _renderManagerService, _univerInstanceService) {
-    super(), this._context = _context, this._contextService = _contextService, this._commandService = _commandService, this._docSelectionRenderService = _docSelectionRenderService, this._docSkeletonManagerService = _docSkeletonManagerService, this._editorService = _editorService, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._addNewRender(), this._initRenderRefresh(), this._initCommandListener();
+}, "__decorateClass$j"), __decorateParam$j = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$j"), _a9;
+let DocRenderController = (_a9 = class extends RxDisposable {
+  constructor(_context, _commandService, _docSelectionRenderService, _docSkeletonManagerService, _editorService, _renderManagerService, _univerInstanceService) {
+    super(), this._context = _context, this._commandService = _commandService, this._docSelectionRenderService = _docSelectionRenderService, this._docSkeletonManagerService = _docSkeletonManagerService, this._editorService = _editorService, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._addNewRender(), this._initRenderRefresh(), this._initCommandListener();
   }
   reRender(unitId) {
-    var _a28, _b2;
-    const docSkeletonManagerService = (_a28 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a28.with(DocSkeletonManagerService), skeleton = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getSkeleton();
+    var _a29, _b2;
+    const docSkeletonManagerService = (_a29 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a29.with(DocSkeletonManagerService), skeleton = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getSkeleton();
     if (!skeleton || !!skeleton.getViewModel().getDataModel().getSnapshot().disabled)
       return;
     skeleton.calculate();
@@ -8709,8 +8830,6 @@ let DocRenderController = (_a8 = class extends RxDisposable {
       top: 0,
       bottom: 0,
       right: 0,
-      explicitViewportWidthSet: !1,
-      explicitViewportHeightSet: !1,
       isWheelPreventDefaultX: !0
     });
     scene.attachControl(), scene.onMouseWheel$.subscribeEvent((evt, state) => {
@@ -8733,8 +8852,8 @@ let DocRenderController = (_a8 = class extends RxDisposable {
   }
   _addComponent() {
     const { scene, unit: documentModel, components } = this._context, config = {
-      pageMarginLeft: documentModel.documentStyle.marginLeft || 0,
-      pageMarginTop: documentModel.documentStyle.marginTop || 0
+      pageMarginLeft: 20,
+      pageMarginTop: 20
     }, documents = new Documents(DOCS_VIEW_KEY.MAIN, void 0, config);
     documents.zIndex = DOCS_COMPONENT_DEFAULT_Z_INDEX;
     const docBackground = new DocBackground(DOCS_VIEW_KEY.BACKGROUND, void 0, config);
@@ -8761,28 +8880,29 @@ let DocRenderController = (_a8 = class extends RxDisposable {
     }));
   }
   _recalculateSizeBySkeleton(skeleton) {
-    var _a28;
-    const { mainComponent, scene, unitId, components } = this._context, docsComponent = mainComponent, docBackground = components.get(DOCS_VIEW_KEY.BACKGROUND), pages = (_a28 = skeleton.getSkeletonData()) == null ? void 0 : _a28.pages;
+    var _a29;
+    const { mainComponent, scene, unitId, components } = this._context, docsComponent = mainComponent, docBackground = components.get(DOCS_VIEW_KEY.BACKGROUND), pages = (_a29 = skeleton.getSkeletonData()) == null ? void 0 : _a29.pages;
     if (pages == null)
       return;
     let width = 0, height = 0;
+    const documentFlavor = this._context.unit.getSnapshot().documentStyle.documentFlavor;
     for (let i = 0, len = pages.length; i < len; i++) {
-      const page = pages[i], { pageWidth, pageHeight } = page;
-      docsComponent.pageLayoutType === PageLayoutType.VERTICAL ? (height += pageHeight, height += docsComponent.pageMarginTop, i === len - 1 && (height += docsComponent.pageMarginTop), width = Math.max(width, pageWidth)) : docsComponent.pageLayoutType === PageLayoutType.HORIZONTAL && (width += pageWidth, i !== len - 1 && (width += docsComponent.pageMarginLeft), height = Math.max(height, pageHeight));
+      const page = pages[i];
+      let { pageWidth, pageHeight, marginLeft, marginRight, marginTop, marginBottom } = page;
+      documentFlavor === DocumentFlavor.MODERN && (pageWidth === Number.POSITIVE_INFINITY && (pageWidth = page.width + marginLeft + marginRight), pageHeight === Number.POSITIVE_INFINITY && (pageHeight = page.height + marginTop + marginBottom)), docsComponent.pageLayoutType === PageLayoutType.VERTICAL ? (height += pageHeight, height += docsComponent.pageMarginTop, i === len - 1 && (height += docsComponent.pageMarginTop), width = Math.max(width, pageWidth)) : docsComponent.pageLayoutType === PageLayoutType.HORIZONTAL && (width += pageWidth, i !== len - 1 && (width += docsComponent.pageMarginLeft), height = Math.max(height, pageHeight));
     }
     docsComponent.resize(width, height), docBackground.resize(width, height);
     const editor = this._editorService.getEditor(unitId);
     (!this._editorService.isEditor(unitId) || editor != null && editor.params.scrollBar) && scene.resize(width, height);
   }
-}, __name(_a8, "DocRenderController"), _a8);
+}, __name(_a9, "DocRenderController"), _a9);
 DocRenderController = __decorateClass$j([
-  __decorateParam$j(1, IContextService),
-  __decorateParam$j(2, ICommandService),
-  __decorateParam$j(3, Inject(DocSelectionRenderService)),
-  __decorateParam$j(4, Inject(DocSkeletonManagerService)),
-  __decorateParam$j(5, IEditorService),
-  __decorateParam$j(6, IRenderManagerService),
-  __decorateParam$j(7, IUniverInstanceService)
+  __decorateParam$j(1, ICommandService),
+  __decorateParam$j(2, Inject(DocSelectionRenderService)),
+  __decorateParam$j(3, Inject(DocSkeletonManagerService)),
+  __decorateParam$j(4, IEditorService),
+  __decorateParam$j(5, IRenderManagerService),
+  __decorateParam$j(6, IUniverInstanceService)
 ], DocRenderController);
 const _DocIMEInputManagerService = class _DocIMEInputManagerService extends RxDisposable {
   constructor(_context) {
@@ -8840,8 +8960,8 @@ const IMEInputCommand = {
   type: CommandType.COMMAND,
   // eslint-disable-next-line max-lines-per-function
   handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    var _a28;
-    const { unitId, newText, oldTextLen, isCompositionEnd, isCompositionStart } = params, commandService = accessor.get(ICommandService), imeInputManagerService = (_a28 = accessor.get(IRenderManagerService).getRenderById(unitId)) == null ? void 0 : _a28.with(DocIMEInputManagerService), docDataModel = accessor.get(IUniverInstanceService).getCurrentUniverDocInstance();
+    var _a29, _b2;
+    const { unitId, newText, oldTextLen, isCompositionEnd, isCompositionStart } = params, commandService = accessor.get(ICommandService), renderManagerService = accessor.get(IRenderManagerService), univerInstanceService = accessor.get(IUniverInstanceService), docMenuStyleService = accessor.get(DocMenuStyleService), imeInputManagerService = (_a29 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a29.with(DocIMEInputManagerService), docDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
     if (docDataModel == null || imeInputManagerService == null)
       return !1;
     const previousActiveRange = imeInputManagerService.getActiveRange();
@@ -8866,9 +8986,9 @@ const IMEInputCommand = {
         actions: [],
         textRanges
       }
-    }, textX = new TextX(), jsonX = JSONX.getInstance();
+    }, styleCache = docMenuStyleService.getStyleCache(), curTextRun = getTextRunAtPosition((_b2 = body.textRuns) != null ? _b2 : [], startOffset + oldTextLen, styleCache), textX = new TextX(), jsonX = JSONX.getInstance();
     if (!previousActiveRange.collapsed && isCompositionStart) {
-      const { dos, retain, cursor } = BuildTextUtils.selection.getDeleteActions(previousActiveRange, segmentId, 0, body);
+      const { dos, retain } = BuildTextUtils.selection.getDeleteActions(previousActiveRange, segmentId, 0, body);
       textX.push(...dos), doMutation.params.textRanges = [{
         startOffset: startOffset + len + retain,
         endOffset: startOffset + len + retain,
@@ -8877,22 +8997,22 @@ const IMEInputCommand = {
     } else
       textX.push({
         t: TextXActionType.RETAIN,
-        len: startOffset,
-        segmentId
+        len: startOffset
       });
     oldTextLen > 0 && textX.push({
       t: TextXActionType.DELETE,
-      len: oldTextLen,
-      line: 0,
-      segmentId
+      len: oldTextLen
     }), textX.push({
       t: TextXActionType.INSERT,
       body: {
-        dataStream: newText
+        dataStream: newText,
+        textRuns: curTextRun ? [{
+          ...curTextRun,
+          st: 0,
+          ed: newText.length
+        }] : []
       },
-      len: newText.length,
-      line: 0,
-      segmentId
+      len: newText.length
     });
     const path = getRichTextEditPath(docDataModel, segmentId);
     doMutation.params.actions = jsonX.editOp(textX.serialize(), path), doMutation.params.noHistory = !isCompositionEnd, doMutation.params.isCompositionEnd = isCompositionEnd;
@@ -8903,9 +9023,9 @@ const IMEInputCommand = {
   type: CommandType.COMMAND,
   id: "doc.command.set-zoom-ratio",
   handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    var _a28, _b2, _c;
+    var _a29, _b2, _c;
     const commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), univerInstanceService = accessor.get(IUniverInstanceService);
-    let documentId = (_a28 = univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : _a28.getUnitId();
+    let documentId = (_a29 = univerInstanceService.getCurrentUniverDocInstance()) == null ? void 0 : _a29.getUnitId();
     if (!documentId) return !1;
     let zoomRatio = 1;
     if (params && (documentId = (_b2 = params.documentId) != null ? _b2 : documentId, zoomRatio = (_c = params.zoomRatio) != null ? _c : zoomRatio), !univerInstanceService.getUniverDocInstance(documentId)) return !1;
@@ -8972,8 +9092,8 @@ var __defProp$i = Object.defineProperty, __getOwnPropDesc$i = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$i(target, key, result), result;
-}, "__decorateClass$i"), __decorateParam$i = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$i"), _a9;
-let DocContainerUIController = (_a9 = class {
+}, "__decorateClass$i"), __decorateParam$i = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$i"), _a10;
+let DocContainerUIController = (_a10 = class {
   constructor(_localeService, _injector, _configService) {
     __publicField(this, "_docContainer");
     // 获取SheetContainer组件
@@ -9011,7 +9131,7 @@ let DocContainerUIController = (_a9 = class {
   getDocContainer() {
     return this._docContainer;
   }
-}, __name(_a9, "DocContainerUIController"), _a9);
+}, __name(_a10, "DocContainerUIController"), _a10);
 DocContainerUIController = __decorateClass$i([
   __decorateParam$i(0, Inject(LocaleService)),
   __decorateParam$i(1, Inject(Injector)),
@@ -9021,14 +9141,14 @@ var __defProp$h = Object.defineProperty, __getOwnPropDesc$h = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$h(target, key, result), result;
-}, "__decorateClass$h"), __decorateParam$h = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$h"), _a10;
-let AppUIController = (_a10 = class extends RxDisposable {
+}, "__decorateClass$h"), __decorateParam$h = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$h"), _a11;
+let AppUIController = (_a11 = class extends RxDisposable {
   constructor(_injector) {
     super();
     __publicField(this, "_docContainerController");
     this._injector = _injector, this._docContainerController = this._injector.createInstance(DocContainerUIController);
   }
-}, __name(_a10, "AppUIController"), _a10);
+}, __name(_a11, "AppUIController"), _a11);
 AppUIController = __decorateClass$h([
   __decorateParam$h(0, Inject(Injector))
 ], AppUIController);
@@ -9036,8 +9156,8 @@ var __defProp$g = Object.defineProperty, __getOwnPropDesc$g = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$g(target, key, result), result;
-}, "__decorateClass$g"), __decorateParam$g = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$g"), _a11;
-let DocAutoFormatController = (_a11 = class extends Disposable {
+}, "__decorateClass$g"), __decorateParam$g = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$g"), _a12;
+let DocAutoFormatController = (_a12 = class extends Disposable {
   constructor(_docAutoFormatService) {
     super(), this._docAutoFormatService = _docAutoFormatService, this._initListTabAutoFormat(), this._initListSpaceAutoFormat(), this._initDefaultEnterFormat(), this._initExitListAutoFormat();
   }
@@ -9046,12 +9166,12 @@ let DocAutoFormatController = (_a11 = class extends Disposable {
       this._docAutoFormatService.registerAutoFormat({
         id: TabCommand.id,
         match: /* @__PURE__ */ __name((context) => {
-          var _a28;
+          var _a29;
           const { selection, paragraphs, unit } = context;
           if (paragraphs.length === 1 && selection.startOffset === paragraphs[0].paragraphStart && paragraphs[0].bullet) {
-            const allParagraphs = (_a28 = unit.getBody()) == null ? void 0 : _a28.paragraphs, bulletParagraphs = allParagraphs == null ? void 0 : allParagraphs.filter((p2) => {
-              var _a29;
-              return ((_a29 = p2.bullet) == null ? void 0 : _a29.listId) === paragraphs[0].bullet.listId;
+            const allParagraphs = (_a29 = unit.getBody()) == null ? void 0 : _a29.paragraphs, bulletParagraphs = allParagraphs == null ? void 0 : allParagraphs.filter((p2) => {
+              var _a30;
+              return ((_a30 = p2.bullet) == null ? void 0 : _a30.listId) === paragraphs[0].bullet.listId;
             });
             return (bulletParagraphs == null ? void 0 : bulletParagraphs.findIndex((p2) => p2.startIndex === paragraphs[0].startIndex)) !== 0;
           } else if (paragraphs.length > 1 && paragraphs.some((p2) => p2.bullet))
@@ -9095,16 +9215,16 @@ let DocAutoFormatController = (_a11 = class extends Disposable {
       this._docAutoFormatService.registerAutoFormat({
         id: AfterSpaceCommand.id,
         match: /* @__PURE__ */ __name((context) => {
-          var _a28;
+          var _a29;
           const { selection, paragraphs, unit } = context;
           if (!selection.collapsed || paragraphs.length !== 1)
             return !1;
-          const text = (_a28 = unit.getBody()) == null ? void 0 : _a28.dataStream.slice(paragraphs[0].paragraphStart, paragraphs[0].paragraphEnd - 1);
+          const text = (_a29 = unit.getBody()) == null ? void 0 : _a29.dataStream.slice(paragraphs[0].paragraphStart, paragraphs[0].paragraphEnd - 1);
           return !!(text && Object.keys(QuickListTypeMap).includes(text));
         }, "match"),
         getMutations(context) {
-          var _a28;
-          const { paragraphs, unit } = context, text = (_a28 = unit.getBody()) == null ? void 0 : _a28.dataStream.slice(paragraphs[0].paragraphStart, paragraphs[0].paragraphEnd - 1);
+          var _a29;
+          const { paragraphs, unit } = context, text = (_a29 = unit.getBody()) == null ? void 0 : _a29.dataStream.slice(paragraphs[0].paragraphStart, paragraphs[0].paragraphEnd - 1);
           if (text && Object.keys(QuickListTypeMap).includes(text)) {
             const type = QuickListTypeMap[text];
             return [{
@@ -9159,7 +9279,7 @@ let DocAutoFormatController = (_a11 = class extends Disposable {
       })
     );
   }
-}, __name(_a11, "DocAutoFormatController"), _a11);
+}, __name(_a12, "DocAutoFormatController"), _a12);
 DocAutoFormatController = __decorateClass$g([
   __decorateParam$g(0, Inject(DocAutoFormatService))
 ], DocAutoFormatController);
@@ -9201,14 +9321,14 @@ function findLineBeforeAndAfterTable(table) {
 }
 __name(findLineBeforeAndAfterTable, "findLineBeforeAndAfterTable");
 function findBellowCell(cell) {
-  var _a28, _b2;
+  var _a29, _b2;
   const row = cell.parent, table = row == null ? void 0 : row.parent, tableId = table == null ? void 0 : table.tableId;
   if (row == null || table == null)
     return;
   const col = row.cells.indexOf(cell), bellowRow = table.rows[table.rows.indexOf(row) + 1];
   if (bellowRow == null) {
     if (tableId.indexOf("#-#")) {
-      const [id, index] = tableId.split("#-#"), pages = (_b2 = (_a28 = table.parent) == null ? void 0 : _a28.parent) == null ? void 0 : _b2.pages, nextTableId = `${id}#-#${Number.parseInt(index) + 1}`;
+      const [id, index] = tableId.split("#-#"), pages = (_b2 = (_a29 = table.parent) == null ? void 0 : _a29.parent) == null ? void 0 : _b2.pages, nextTableId = `${id}#-#${Number.parseInt(index) + 1}`;
       if (pages)
         for (const page of pages) {
           const { skeTables } = page;
@@ -9225,14 +9345,14 @@ function findBellowCell(cell) {
 }
 __name(findBellowCell, "findBellowCell");
 function findAboveCell(cell) {
-  var _a28, _b2;
+  var _a29, _b2;
   const row = cell.parent, table = row == null ? void 0 : row.parent;
   if (row == null || table == null)
     return;
   const aboveRow = table.rows[table.rows.indexOf(row) - 1], col = row.cells.indexOf(cell);
   if (aboveRow == null) {
     if (table.tableId.indexOf("#-#")) {
-      const [id, index] = table.tableId.split("#-#"), pages = (_b2 = (_a28 = table.parent) == null ? void 0 : _a28.parent) == null ? void 0 : _b2.pages, nextTableId = `${id}#-#${Number.parseInt(index) - 1}`;
+      const [id, index] = table.tableId.split("#-#"), pages = (_b2 = (_a29 = table.parent) == null ? void 0 : _a29.parent) == null ? void 0 : _b2.pages, nextTableId = `${id}#-#${Number.parseInt(index) - 1}`;
       if (pages)
         for (const page of pages) {
           const { skeTables } = page;
@@ -9271,16 +9391,16 @@ var __defProp$f = Object.defineProperty, __getOwnPropDesc$f = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$f(target, key, result), result;
-}, "__decorateClass$f"), __decorateParam$f = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$f"), _a12;
-let DocMoveCursorController = (_a12 = class extends Disposable {
+}, "__decorateClass$f"), __decorateParam$f = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$f"), _a13;
+let DocMoveCursorController = (_a13 = class extends Disposable {
   constructor(_univerInstanceService, _renderManagerService, _textSelectionManagerService, _commandService) {
     super();
     __publicField(this, "_onInputSubscription");
     this._univerInstanceService = _univerInstanceService, this._renderManagerService = _renderManagerService, this._textSelectionManagerService = _textSelectionManagerService, this._commandService = _commandService, this._commandExecutedListener();
   }
   dispose() {
-    var _a28;
-    super.dispose(), (_a28 = this._onInputSubscription) == null || _a28.unsubscribe();
+    var _a29;
+    super.dispose(), (_a29 = this._onInputSubscription) == null || _a29.unsubscribe();
   }
   _commandExecutedListener() {
     const updateCommandList = [MoveCursorOperation.id, MoveSelectionOperation.id];
@@ -9302,11 +9422,11 @@ let DocMoveCursorController = (_a12 = class extends Disposable {
   }
   // eslint-disable-next-line max-lines-per-function, complexity
   _handleShiftMoveSelection(direction) {
-    var _a28, _b2, _c;
+    var _a29, _b2, _c;
     const activeRange = this._textSelectionManagerService.getActiveTextRange(), allRanges = this._textSelectionManagerService.getTextRanges(), docDataModel = this._univerInstanceService.getCurrentUniverDocInstance();
     if (docDataModel == null)
       return;
-    const skeleton = (_a28 = this._renderManagerService.getRenderById(docDataModel.getUnitId())) == null ? void 0 : _a28.with(DocSkeletonManagerService).getSkeleton(), docObject = this._getDocObject();
+    const skeleton = (_a29 = this._renderManagerService.getRenderById(docDataModel.getUnitId())) == null ? void 0 : _a29.with(DocSkeletonManagerService).getSkeleton(), docObject = this._getDocObject();
     if (activeRange == null || skeleton == null || docObject == null)
       return;
     const {
@@ -9375,11 +9495,11 @@ let DocMoveCursorController = (_a12 = class extends Disposable {
   }
   // eslint-disable-next-line max-lines-per-function, complexity
   _handleMoveCursor(direction) {
-    var _a28, _b2, _c, _d;
+    var _a29, _b2, _c, _d;
     const activeRange = this._textSelectionManagerService.getActiveTextRange(), allRanges = this._textSelectionManagerService.getTextRanges(), docDataModel = this._univerInstanceService.getCurrentUniverDocInstance();
     if (docDataModel == null)
       return !1;
-    const skeleton = (_a28 = this._renderManagerService.getRenderById(docDataModel.getUnitId())) == null ? void 0 : _a28.with(DocSkeletonManagerService).getSkeleton(), docObject = this._getDocObject();
+    const skeleton = (_a29 = this._renderManagerService.getRenderById(docDataModel.getUnitId())) == null ? void 0 : _a29.with(DocSkeletonManagerService).getSkeleton(), docObject = this._getDocObject();
     if (activeRange == null || skeleton == null || docObject == null || allRanges == null)
       return;
     const { startOffset, endOffset, style, collapsed, segmentId, startNodePosition, endNodePosition, segmentPage } = activeRange, body = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
@@ -9490,7 +9610,7 @@ let DocMoveCursorController = (_a12 = class extends Disposable {
   }
   // eslint-disable-next-line max-lines-per-function, complexity
   _getNextOrPrevLine(glyph, direction, skipCellContent = !1) {
-    var _a28, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    var _a29, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
     const divide = glyph.parent, line = divide == null ? void 0 : divide.parent, column = line == null ? void 0 : line.parent, section = column == null ? void 0 : column.parent, page = section == null ? void 0 : section.parent;
     if (divide == null || line == null || column == null || section == null || page == null)
       return;
@@ -9524,7 +9644,7 @@ let DocMoveCursorController = (_a12 = class extends Disposable {
     if (currentColumnIndex === -1)
       return;
     if (direction === !0)
-      newLine = (_a28 = section.columns[currentColumnIndex + 1]) == null ? void 0 : _a28.lines[0];
+      newLine = (_a29 = section.columns[currentColumnIndex + 1]) == null ? void 0 : _a29.lines[0];
     else {
       const prevColumnLines = (_c = (_b2 = section.columns) == null ? void 0 : _b2[currentColumnIndex - 1]) == null ? void 0 : _c.lines;
       newLine = prevColumnLines == null ? void 0 : prevColumnLines[prevColumnLines.length - 1];
@@ -9563,8 +9683,8 @@ let DocMoveCursorController = (_a12 = class extends Disposable {
     }
   }
   _scrollToFocusNodePosition(unitId, offset) {
-    var _a28;
-    const backScrollController = (_a28 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a28.with(DocBackScrollRenderController);
+    var _a29;
+    const backScrollController = (_a29 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a29.with(DocBackScrollRenderController);
     backScrollController != null && backScrollController.scrollToRange({
       startOffset: offset,
       endOffset: offset,
@@ -9574,7 +9694,7 @@ let DocMoveCursorController = (_a12 = class extends Disposable {
   _getDocObject() {
     return getDocObject(this._univerInstanceService, this._renderManagerService);
   }
-}, __name(_a12, "DocMoveCursorController"), _a12);
+}, __name(_a13, "DocMoveCursorController"), _a13);
 DocMoveCursorController = __decorateClass$f([
   __decorateParam$f(0, IUniverInstanceService),
   __decorateParam$f(1, IRenderManagerService),
@@ -9582,14 +9702,14 @@ DocMoveCursorController = __decorateClass$f([
   __decorateParam$f(3, ICommandService)
 ], DocMoveCursorController);
 function findAboveOrBellowCellLine(page, direction) {
-  var _a28, _b2;
+  var _a29, _b2;
   let newLine = null;
   if (direction === !0) {
     const bellowCell = findBellowCell(page);
     if (bellowCell)
       newLine = firstLineInCell(bellowCell);
     else {
-      const table = (_a28 = page.parent) == null ? void 0 : _a28.parent, { lineAfterTable } = findLineBeforeAndAfterTable(table);
+      const table = (_a29 = page.parent) == null ? void 0 : _a29.parent, { lineAfterTable } = findLineBeforeAndAfterTable(table);
       lineAfterTable && (newLine = lineAfterTable);
     }
   } else {
@@ -9658,8 +9778,8 @@ var __defProp$e = Object.defineProperty, __getOwnPropDesc$e = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$e(target, key, result), result;
-}, "__decorateClass$e"), __decorateParam$e = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$e"), _a13;
-let DocTableController = (_a13 = class extends Disposable {
+}, "__decorateClass$e"), __decorateParam$e = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$e"), _a14;
+let DocTableController = (_a14 = class extends Disposable {
   constructor(_commandService, _componentManager) {
     super(), this._commandService = _commandService, this._componentManager = _componentManager, this._initialize();
   }
@@ -9677,7 +9797,7 @@ let DocTableController = (_a13 = class extends Disposable {
   }
   _init() {
   }
-}, __name(_a13, "DocTableController"), _a13);
+}, __name(_a14, "DocTableController"), _a14);
 DocTableController = __decorateClass$e([
   __decorateParam$e(0, ICommandService),
   __decorateParam$e(1, Inject(ComponentManager))
@@ -9738,8 +9858,8 @@ const calcDocRangePositions$1 = /* @__PURE__ */ __name((range, currentRender) =>
     bottom: (i.bottom + docsTop * scaleY) * scaleAdjust + top
   }));
 }, "calcDocRangePositions$1");
-var _a14;
-let DocCanvasPopManagerService = (_a14 = class extends Disposable {
+var _a15;
+let DocCanvasPopManagerService = (_a15 = class extends Disposable {
   constructor(_globalPopupManagerService, _renderManagerService, _univerInstanceService, _commandService) {
     super(), this._globalPopupManagerService = _globalPopupManagerService, this._renderManagerService = _renderManagerService, this._univerInstanceService = _univerInstanceService, this._commandService = _commandService;
   }
@@ -9771,8 +9891,8 @@ let DocCanvasPopManagerService = (_a14 = class extends Disposable {
     };
   }
   _createRangePositionObserver(range, currentRender) {
-    var _a28;
-    const positions = (_a28 = calcDocRangePositions$1(range, currentRender)) != null ? _a28 : [], positions$ = new BehaviorSubject(positions), disposable = new DisposableCollection();
+    var _a29;
+    const positions = (_a29 = calcDocRangePositions$1(range, currentRender)) != null ? _a29 : [], positions$ = new BehaviorSubject(positions), disposable = new DisposableCollection();
     disposable.add(this._commandService.onCommandExecuted((commandInfo) => {
       if (commandInfo.id === SetDocZoomRatioOperation.id) {
         const position = calcDocRangePositions$1(range, currentRender);
@@ -9848,7 +9968,7 @@ let DocCanvasPopManagerService = (_a14 = class extends Disposable {
     };
   }
   // #endregion
-}, __name(_a14, "DocCanvasPopManagerService"), _a14);
+}, __name(_a15, "DocCanvasPopManagerService"), _a15);
 DocCanvasPopManagerService = __decorateClass$d([
   __decorateParam$d(0, Inject(ICanvasPopupService)),
   __decorateParam$d(1, IRenderManagerService),
@@ -9861,11 +9981,11 @@ var __defProp$c = Object.defineProperty, __getOwnPropDesc$c = Object.getOwnPrope
   return kind && result && __defProp$c(target, key, result), result;
 }, "__decorateClass$c"), __decorateParam$c = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$c");
 const calcDocRangePositions = /* @__PURE__ */ __name((range, documents, skeleton, pageIndex) => {
-  var _a28, _b2, _c, _d, _e;
+  var _a29, _b2, _c, _d, _e;
   const startPosition = skeleton.findNodePositionByCharIndex(range.startOffset, !1, range.segmentId, pageIndex), skeletonData = skeleton.getSkeletonData();
   let end = range.endOffset;
   if (range.segmentId) {
-    const root = (_e = Array.from((_b2 = (_a28 = skeletonData == null ? void 0 : skeletonData.skeFooters.get(range.segmentId)) == null ? void 0 : _a28.values()) != null ? _b2 : [])[0]) != null ? _e : Array.from((_d = (_c = skeletonData == null ? void 0 : skeletonData.skeHeaders.get(range.segmentId)) == null ? void 0 : _c.values()) != null ? _d : [])[0];
+    const root = (_e = Array.from((_b2 = (_a29 = skeletonData == null ? void 0 : skeletonData.skeFooters.get(range.segmentId)) == null ? void 0 : _a29.values()) != null ? _b2 : [])[0]) != null ? _e : Array.from((_d = (_c = skeletonData == null ? void 0 : skeletonData.skeHeaders.get(range.segmentId)) == null ? void 0 : _c.values()) != null ? _d : [])[0];
     root && (end = Math.min(root.ed, end));
   }
   const endPosition = skeleton.findNodePositionByCharIndex(end, !1, range.segmentId, pageIndex);
@@ -9890,8 +10010,8 @@ const calcDocRangePositions = /* @__PURE__ */ __name((range, documents, skeleton
     right: rect.left + documentOffsetConfig.docsLeft + glyph.width
   };
 }, "calcDocGlyphPosition");
-var _a15;
-let DocEventManagerService = (_a15 = class extends Disposable {
+var _a16;
+let DocEventManagerService = (_a16 = class extends Disposable {
   constructor(_context, _docSkeletonManagerService) {
     super();
     __publicField(this, "_hoverCustomRanges$", new BehaviorSubject([]));
@@ -9954,7 +10074,7 @@ let DocEventManagerService = (_a15 = class extends Disposable {
     }));
     const onPointerDown$ = fromEventSubject(this._context.mainComponent.onPointerDown$), onPointerUp$ = fromEventSubject(this._context.scene.onPointerUp$);
     this.disposeWithMe(onPointerDown$.pipe(
-      mergeMap((down) => onPointerUp$.pipe(take(1), map$1((up) => ({ down, up })))),
+      switchMap((down) => onPointerUp$.pipe(take(1), map$1((up) => ({ down, up })))),
       filter$1(({ down, up }) => down.target === up.target && up.timeStamp - down.timeStamp < 300)
       // filter(({ down, up }) => down.offsetX === up.offsetX && down.offsetY === up.offsetY)
     ).subscribe(({ down }) => {
@@ -9967,8 +10087,8 @@ let DocEventManagerService = (_a15 = class extends Disposable {
     }));
   }
   _buildCustomRangeBoundsBySegment(segmentId, segmentPage = -1) {
-    var _a28, _b2, _c;
-    const customRanges = (_c = (_b2 = (_a28 = this._context.unit.getSelfOrHeaderFooterModel(segmentId)) == null ? void 0 : _a28.getBody()) == null ? void 0 : _b2.customRanges) != null ? _c : [], layouts = [];
+    var _a29, _b2, _c;
+    const customRanges = (_c = (_b2 = (_a29 = this._context.unit.getSelfOrHeaderFooterModel(segmentId)) == null ? void 0 : _a29.getBody()) == null ? void 0 : _b2.customRanges) != null ? _c : [], layouts = [];
     return customRanges.forEach((range) => {
       const textRange = {
         startOffset: range.startIndex,
@@ -9987,12 +10107,12 @@ let DocEventManagerService = (_a15 = class extends Disposable {
     }), layouts;
   }
   _buildCustomRangeBounds() {
-    var _a28;
+    var _a29;
     if (!this._customRangeDirty)
       return;
     this._customRangeDirty = !1;
     const customRangeBounds = [];
-    customRangeBounds.push(...this._buildCustomRangeBoundsBySegment()), (_a28 = this._skeleton.getSkeletonData()) == null || _a28.pages.forEach((page, pageIndex) => {
+    customRangeBounds.push(...this._buildCustomRangeBoundsBySegment()), (_a29 = this._skeleton.getSkeletonData()) == null || _a29.pages.forEach((page, pageIndex) => {
       page.headerId && customRangeBounds.push(...this._buildCustomRangeBoundsBySegment(page.headerId, pageIndex)), page.footerId && customRangeBounds.push(...this._buildCustomRangeBoundsBySegment(page.footerId, pageIndex));
     }), this._customRangeBounds = customRangeBounds;
   }
@@ -10012,12 +10132,12 @@ let DocEventManagerService = (_a15 = class extends Disposable {
     );
   }
   _buildBulletBoundsBySegment(segmentId, segmentPage = -1) {
-    var _a28, _b2, _c, _d, _e;
-    const body = (_a28 = this._context.unit.getSelfOrHeaderFooterModel(segmentId)) == null ? void 0 : _a28.getBody(), paragraphs = ((_b2 = body == null ? void 0 : body.paragraphs) != null ? _b2 : []).filter((p2) => p2.bullet && p2.bullet.listType.indexOf("CHECK_LIST") === 0), bounds = [], skeletonData = this._skeleton.getSkeletonData();
+    var _a29, _b2, _c, _d, _e;
+    const body = (_a29 = this._context.unit.getSelfOrHeaderFooterModel(segmentId)) == null ? void 0 : _a29.getBody(), paragraphs = ((_b2 = body == null ? void 0 : body.paragraphs) != null ? _b2 : []).filter((p2) => p2.bullet && p2.bullet.listType.indexOf("CHECK_LIST") === 0), bounds = [], skeletonData = this._skeleton.getSkeletonData();
     if (!skeletonData)
       return bounds;
     const calc = /* @__PURE__ */ __name((pages) => {
-      var _a29, _b3, _c2;
+      var _a30, _b3, _c2;
       for (const page of pages) {
         const sections = [...page.sections];
         if (page.skeTables) {
@@ -10030,7 +10150,7 @@ let DocEventManagerService = (_a15 = class extends Disposable {
               if (line.paragraphStart) {
                 const paragraph = paragraphs.find((p2) => p2.startIndex === line.paragraphIndex);
                 if (paragraph) {
-                  const targetLine = line, bulletNode = (_c2 = (_b3 = (_a29 = targetLine == null ? void 0 : targetLine.divides) == null ? void 0 : _a29[0]) == null ? void 0 : _b3.glyphGroup) == null ? void 0 : _c2[0];
+                  const targetLine = line, bulletNode = (_c2 = (_b3 = (_a30 = targetLine == null ? void 0 : targetLine.divides) == null ? void 0 : _a30[0]) == null ? void 0 : _b3.glyphGroup) == null ? void 0 : _c2[0];
                   if (!bulletNode)
                     continue;
                   const rect = calcDocGlyphPosition(bulletNode, this._documents, this._skeleton, segmentPage);
@@ -10054,8 +10174,8 @@ let DocEventManagerService = (_a15 = class extends Disposable {
     return calc(skeletonData.pages);
   }
   _buildBulletBounds() {
-    var _a28;
-    this._bulletDirty && (this._bulletDirty = !1, this._bulletBounds = [], this._bulletBounds.push(...this._buildBulletBoundsBySegment()), (_a28 = this._skeleton.getSkeletonData()) == null || _a28.pages.forEach((page, pageIndex) => {
+    var _a29;
+    this._bulletDirty && (this._bulletDirty = !1, this._bulletBounds = [], this._bulletBounds.push(...this._buildBulletBoundsBySegment()), (_a29 = this._skeleton.getSkeletonData()) == null || _a29.pages.forEach((page, pageIndex) => {
       page.headerId && this._bulletBounds.push(...this._buildBulletBoundsBySegment(page.headerId, pageIndex)), page.footerId && this._bulletBounds.push(...this._buildBulletBoundsBySegment(page.footerId, pageIndex));
     }));
   }
@@ -10067,7 +10187,7 @@ let DocEventManagerService = (_a15 = class extends Disposable {
       return x >= left && x <= right && y >= top && y <= bottom;
     });
   }
-}, __name(_a15, "DocEventManagerService"), _a15);
+}, __name(_a16, "DocEventManagerService"), _a16);
 DocEventManagerService = __decorateClass$c([
   __decorateParam$c(1, Inject(DocSkeletonManagerService))
 ], DocEventManagerService);
@@ -10075,8 +10195,8 @@ var __defProp$b = Object.defineProperty, __getOwnPropDesc$b = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$b(target, key, result), result;
-}, "__decorateClass$b"), __decorateParam$b = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$b"), _a16;
-let DocChecklistRenderController = (_a16 = class extends Disposable {
+}, "__decorateClass$b"), __decorateParam$b = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$b"), _a17;
+let DocChecklistRenderController = (_a17 = class extends Disposable {
   constructor(_context, _docSkeletonManagerService, _commandService, _docEventManagerService, _textSelectionManagerService) {
     super(), this._context = _context, this._docSkeletonManagerService = _docSkeletonManagerService, this._commandService = _commandService, this._docEventManagerService = _docEventManagerService, this._textSelectionManagerService = _textSelectionManagerService, this._initPointerDownObserver(), this._initHoverCursor();
   }
@@ -10102,7 +10222,7 @@ let DocChecklistRenderController = (_a16 = class extends Disposable {
     if (originCoord)
       return documentTransform.clone().invert().applyPoint(originCoord);
   }
-}, __name(_a16, "DocChecklistRenderController"), _a16);
+}, __name(_a17, "DocChecklistRenderController"), _a17);
 DocChecklistRenderController = __decorateClass$b([
   __decorateParam$b(1, Inject(DocSkeletonManagerService)),
   __decorateParam$b(2, ICommandService),
@@ -10113,8 +10233,8 @@ var __defProp$a = Object.defineProperty, __getOwnPropDesc$a = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$a(target, key, result), result;
-}, "__decorateClass$a"), __decorateParam$a = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$a"), _a17;
-let DocClipboardController = (_a17 = class extends RxDisposable {
+}, "__decorateClass$a"), __decorateParam$a = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$a"), _a18;
+let DocClipboardController = (_a18 = class extends RxDisposable {
   constructor(_context, _commandService, _docClipboardService, _docSelectionRenderService, _contextService, _editorService) {
     super(), this._context = _context, this._commandService = _commandService, this._docClipboardService = _docClipboardService, this._docSelectionRenderService = _docSelectionRenderService, this._contextService = _contextService, this._editorService = _editorService, this._init();
   }
@@ -10122,19 +10242,19 @@ let DocClipboardController = (_a17 = class extends RxDisposable {
     this._initLegacyPasteCommand();
   }
   _initLegacyPasteCommand() {
-    var _a28;
-    (_a28 = this._docSelectionRenderService) == null || _a28.onPaste$.pipe(takeUntil(this.dispose$)).subscribe((config) => {
-      var _a29, _b2;
+    var _a29;
+    (_a29 = this._docSelectionRenderService) == null || _a29.onPaste$.pipe(takeUntil(this.dispose$)).subscribe((config) => {
+      var _a30, _b2;
       if (!whenDocOrEditor(this._contextService))
         return;
       config.event.preventDefault();
       const clipboardEvent = config.event;
-      let htmlContent = (_a29 = clipboardEvent.clipboardData) == null ? void 0 : _a29.getData("text/html");
+      let htmlContent = (_a30 = clipboardEvent.clipboardData) == null ? void 0 : _a30.getData("text/html");
       const textContent = (_b2 = clipboardEvent.clipboardData) == null ? void 0 : _b2.getData("text/plain");
       this._editorService.getEditor(this._context.unitId) && (htmlContent != null ? htmlContent : "").indexOf("</table>") > -1 && (htmlContent = ""), this._docClipboardService.legacyPaste(htmlContent, textContent);
     });
   }
-}, __name(_a17, "DocClipboardController"), _a17);
+}, __name(_a18, "DocClipboardController"), _a18);
 DocClipboardController = __decorateClass$a([
   __decorateParam$a(1, ICommandService),
   __decorateParam$a(2, IDocClipboardService),
@@ -10153,14 +10273,14 @@ const SKIP_UNIT_IDS = [
   DOCS_NORMAL_EDITOR_UNIT_ID_KEY,
   DOCS_ZEN_EDITOR_UNIT_ID_KEY
 ];
-var _a18;
-let DocContextMenuRenderController = (_a18 = class extends Disposable {
+var _a19;
+let DocContextMenuRenderController = (_a19 = class extends Disposable {
   constructor(_context, _contextMenuService, _commandService) {
     super(), this._context = _context, this._contextMenuService = _contextMenuService, this._commandService = _commandService, SKIP_UNIT_IDS.includes(this._context.unitId) || (this._initPointerDown(), this._initEditChange());
   }
   _initPointerDown() {
-    var _a28, _b2;
-    const documentsSubscription = ((_b2 = (_a28 = this._context) == null ? void 0 : _a28.mainComponent) == null ? void 0 : _b2.onPointerDown$).subscribeEvent((event) => {
+    var _a29, _b2;
+    const documentsSubscription = ((_b2 = (_a29 = this._context) == null ? void 0 : _a29.mainComponent) == null ? void 0 : _b2.onPointerDown$).subscribeEvent((event) => {
       event.button === 2 && this._contextMenuService.triggerContextMenu(event, ContextMenuPosition.MAIN_AREA);
     });
     this.disposeWithMe(documentsSubscription);
@@ -10172,7 +10292,7 @@ let DocContextMenuRenderController = (_a18 = class extends Disposable {
       })
     );
   }
-}, __name(_a18, "DocContextMenuRenderController"), _a18);
+}, __name(_a19, "DocContextMenuRenderController"), _a19);
 DocContextMenuRenderController = __decorateClass$9([
   __decorateParam$9(1, IContextMenuService),
   __decorateParam$9(2, ICommandService)
@@ -10181,8 +10301,8 @@ var __defProp$8 = Object.defineProperty, __getOwnPropDesc$8 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$8(target, key, result), result;
-}, "__decorateClass$8"), __decorateParam$8 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$8"), _a19;
-let DocEditorBridgeController = (_a19 = class extends Disposable {
+}, "__decorateClass$8"), __decorateParam$8 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$8"), _a20;
+let DocEditorBridgeController = (_a20 = class extends Disposable {
   constructor(_context, _univerInstanceService, _editorService, _commandService, _docSelectionRenderService, _docSkeletonManagerService, _renderManagerService) {
     super();
     __publicField(this, "_initialEditors", /* @__PURE__ */ new Set());
@@ -10200,7 +10320,7 @@ let DocEditorBridgeController = (_a19 = class extends Disposable {
   }
   // eslint-disable-next-line complexity
   _resize(unitId) {
-    var _a28, _b2;
+    var _a29, _b2;
     if (unitId == null)
       return;
     const editor = this._editorService.getEditor(unitId);
@@ -10222,7 +10342,7 @@ let DocEditorBridgeController = (_a19 = class extends Disposable {
     scene.transformByState({
       width: contentWidth,
       height: contentHeight
-    }), mainComponent == null || mainComponent.resize(contentWidth, contentHeight), editor.isSingle() ? actualWidth > width ? scrollBar == null ? viewportMain && new ScrollBar(viewportMain, { barSize: 8, enableVertical: !1 }) : viewportMain == null || viewportMain.resetCanvasSizeAndUpdateScroll() : (scrollBar = null, viewportMain == null || viewportMain.scrollToBarPos({ x: 0, y: 0 }), (_b2 = viewportMain == null ? void 0 : viewportMain.getScrollBar()) == null || _b2.dispose()) : actualHeight > height ? scrollBar == null ? viewportMain && new ScrollBar(viewportMain, { enableHorizontal: !1, barSize: 8 }) : viewportMain == null || viewportMain.resetCanvasSizeAndUpdateScroll() : (scrollBar = null, viewportMain == null || viewportMain.scrollToBarPos({ x: 0, y: 0 }), (_a28 = viewportMain == null ? void 0 : viewportMain.getScrollBar()) == null || _a28.dispose());
+    }), mainComponent == null || mainComponent.resize(contentWidth, contentHeight), editor.isSingle() ? actualWidth > width ? scrollBar == null ? viewportMain && new ScrollBar(viewportMain, { barSize: 8, enableVertical: !1 }) : viewportMain == null || viewportMain.resetCanvasSizeAndUpdateScroll() : (scrollBar = null, viewportMain == null || viewportMain.scrollToBarPos({ x: 0, y: 0 }), (_b2 = viewportMain == null ? void 0 : viewportMain.getScrollBar()) == null || _b2.dispose()) : actualHeight > height ? scrollBar == null ? viewportMain && new ScrollBar(viewportMain, { enableHorizontal: !1, barSize: 8 }) : viewportMain == null || viewportMain.resetCanvasSizeAndUpdateScroll() : (scrollBar = null, viewportMain == null || viewportMain.scrollToBarPos({ x: 0, y: 0 }), (_a29 = viewportMain == null ? void 0 : viewportMain.getScrollBar()) == null || _a29.dispose());
   }
   _initialSetValue() {
     this.disposeWithMe(
@@ -10250,8 +10370,8 @@ let DocEditorBridgeController = (_a19 = class extends Disposable {
   _initialFocus() {
     this.disposeWithMe(
       this._editorService.focus$.subscribe((textRange) => {
-        var _a28;
-        ((_a28 = this._editorService.getFocusEditor()) == null ? void 0 : _a28.getEditorId()) === this._context.unitId && (this._docSelectionRenderService.removeAllRanges(), this._docSelectionRenderService.addDocRanges([textRange]));
+        var _a29;
+        ((_a29 = this._editorService.getFocusEditor()) == null ? void 0 : _a29.getEditorId()) === this._context.unitId && (this._docSelectionRenderService.removeAllRanges(), this._docSelectionRenderService.addDocRanges([textRange]));
       })
     );
     const focusExcepts = [
@@ -10308,7 +10428,7 @@ let DocEditorBridgeController = (_a19 = class extends Disposable {
       })
     );
   }
-}, __name(_a19, "DocEditorBridgeController"), _a19);
+}, __name(_a20, "DocEditorBridgeController"), _a20);
 DocEditorBridgeController = __decorateClass$8([
   __decorateParam$8(1, IUniverInstanceService),
   __decorateParam$8(2, IEditorService),
@@ -10321,20 +10441,20 @@ var __defProp$7 = Object.defineProperty, __getOwnPropDesc$7 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$7(target, key, result), result;
-}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7"), _a20;
-let DocIMEInputController = (_a20 = class extends Disposable {
-  constructor(_context, _univerInstanceService, _renderManagerSrv, _docSelectionRenderService, _docImeInputManagerService, _commandService) {
+}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7"), _a21;
+let DocIMEInputController = (_a21 = class extends Disposable {
+  constructor(_context, _docSelectionRenderService, _docImeInputManagerService, _docSkeletonManagerService, _commandService) {
     super();
     __publicField(this, "_previousIMEContent", "");
     __publicField(this, "_isCompositionStart", !0);
     __publicField(this, "_onStartSubscription");
     __publicField(this, "_onUpdateSubscription");
     __publicField(this, "_onEndSubscription");
-    this._context = _context, this._univerInstanceService = _univerInstanceService, this._renderManagerSrv = _renderManagerSrv, this._docSelectionRenderService = _docSelectionRenderService, this._docImeInputManagerService = _docImeInputManagerService, this._commandService = _commandService, this._initialize();
+    this._context = _context, this._docSelectionRenderService = _docSelectionRenderService, this._docImeInputManagerService = _docImeInputManagerService, this._docSkeletonManagerService = _docSkeletonManagerService, this._commandService = _commandService, this._initialize();
   }
   dispose() {
-    var _a28, _b2, _c;
-    (_a28 = this._onStartSubscription) == null || _a28.unsubscribe(), (_b2 = this._onUpdateSubscription) == null || _b2.unsubscribe(), (_c = this._onEndSubscription) == null || _c.unsubscribe();
+    var _a29, _b2, _c;
+    (_a29 = this._onStartSubscription) == null || _a29.unsubscribe(), (_b2 = this._onUpdateSubscription) == null || _b2.unsubscribe(), (_c = this._onEndSubscription) == null || _c.unsubscribe();
   }
   _initialize() {
     this._initialOnCompositionstart(), this._initialOnCompositionUpdate(), this._initialOnCompositionend();
@@ -10359,18 +10479,14 @@ let DocIMEInputController = (_a20 = class extends Disposable {
     });
   }
   async _updateContent(config, isUpdate) {
-    var _a28;
     if (config == null)
       return;
-    const documentModel = this._univerInstanceService.getCurrentUniverDocInstance();
-    if (!documentModel)
-      return;
-    const skeleton = (_a28 = this._renderManagerSrv.getRenderById(documentModel.getUnitId())) == null ? void 0 : _a28.with(DocSkeletonManagerService).getSkeleton(), { event, activeRange } = config;
+    const unitId = this._context.unitId, skeleton = this._docSkeletonManagerService.getSkeleton(), { event, activeRange } = config;
     if (skeleton == null || activeRange == null)
       return;
     const content = event.data;
     content === this._previousIMEContent && isUpdate || (await this._commandService.executeCommand(IMEInputCommand.id, {
-      unitId: documentModel.getUnitId(),
+      unitId,
       newText: content,
       oldTextLen: this._previousIMEContent.length,
       isCompositionStart: this._isCompositionStart,
@@ -10380,44 +10496,51 @@ let DocIMEInputController = (_a20 = class extends Disposable {
   _resetIME() {
     this._previousIMEContent = "", this._isCompositionStart = !0, this._docImeInputManagerService.clearUndoRedoMutationParamsCache(), this._docImeInputManagerService.setActiveRange(null);
   }
-}, __name(_a20, "DocIMEInputController"), _a20);
+}, __name(_a21, "DocIMEInputController"), _a21);
 DocIMEInputController = __decorateClass$7([
-  __decorateParam$7(1, IUniverInstanceService),
-  __decorateParam$7(2, IRenderManagerService),
-  __decorateParam$7(3, Inject(DocSelectionRenderService)),
-  __decorateParam$7(4, Inject(DocIMEInputManagerService)),
-  __decorateParam$7(5, ICommandService)
+  __decorateParam$7(1, Inject(DocSelectionRenderService)),
+  __decorateParam$7(2, Inject(DocIMEInputManagerService)),
+  __decorateParam$7(3, Inject(DocSkeletonManagerService)),
+  __decorateParam$7(4, ICommandService)
 ], DocIMEInputController);
 var __defProp$6 = Object.defineProperty, __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor, __decorateClass$6 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$6(target, key, result), result;
-}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$6"), _a21;
-let DocInputController = (_a21 = class extends Disposable {
-  constructor(_context, _docSelectionRenderService, _docSkeletonManagerService, _commandService) {
+}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$6"), _a22;
+let DocInputController = (_a22 = class extends Disposable {
+  constructor(_context, _docSelectionRenderService, _docSkeletonManagerService, _commandService, _docMenuStyleService) {
     super();
     __publicField(this, "_onInputSubscription");
-    this._context = _context, this._docSelectionRenderService = _docSelectionRenderService, this._docSkeletonManagerService = _docSkeletonManagerService, this._commandService = _commandService, this._init();
+    this._context = _context, this._docSelectionRenderService = _docSelectionRenderService, this._docSkeletonManagerService = _docSkeletonManagerService, this._commandService = _commandService, this._docMenuStyleService = _docMenuStyleService, this._init();
   }
   dispose() {
-    var _a28;
-    super.dispose(), (_a28 = this._onInputSubscription) == null || _a28.unsubscribe();
+    var _a29;
+    super.dispose(), (_a29 = this._onInputSubscription) == null || _a29.unsubscribe();
   }
   _init() {
     this._initialNormalInput();
   }
   _initialNormalInput() {
     this._onInputSubscription = this._docSelectionRenderService.onInput$.subscribe(async (config) => {
+      var _a29;
       if (config == null)
         return;
-      const unitId = this._context.unitId, { event, content = "", activeRange } = config, e = event, skeleton = this._docSkeletonManagerService.getSkeleton();
-      if (e.data == null || skeleton == null || !skeleton || !activeRange)
+      const { unitId } = this._context, { event, content = "", activeRange } = config, e = event, skeleton = this._docSkeletonManagerService.getSkeleton();
+      if (e.data == null || skeleton == null || activeRange == null)
         return;
-      const { segmentId } = activeRange, UNITS = [DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DOCS_ZEN_EDITOR_UNIT_ID_KEY, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY];
+      const { segmentId } = activeRange, UNITS = [DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DOCS_ZEN_EDITOR_UNIT_ID_KEY, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY], originBody = this._context.unit.getSelfOrHeaderFooterModel(segmentId).getBody(), cacheStyle = this._docMenuStyleService.getStyleCache(), curTextRun = getTextRunAtPosition((_a29 = originBody == null ? void 0 : originBody.textRuns) != null ? _a29 : [], activeRange.endOffset, cacheStyle);
       await this._commandService.executeCommand(InsertCommand.id, {
         unitId,
         body: {
-          dataStream: content
+          dataStream: content,
+          textRuns: curTextRun ? [
+            {
+              ...curTextRun,
+              st: 0,
+              ed: content.length
+            }
+          ] : []
         },
         range: activeRange,
         segmentId,
@@ -10425,24 +10548,25 @@ let DocInputController = (_a21 = class extends Disposable {
       }), content === " " && await this._commandService.executeCommand(AfterSpaceCommand.id);
     });
   }
-}, __name(_a21, "DocInputController"), _a21);
+}, __name(_a22, "DocInputController"), _a22);
 DocInputController = __decorateClass$6([
   __decorateParam$6(1, Inject(DocSelectionRenderService)),
   __decorateParam$6(2, Inject(DocSkeletonManagerService)),
-  __decorateParam$6(3, ICommandService)
+  __decorateParam$6(3, ICommandService),
+  __decorateParam$6(4, Inject(DocMenuStyleService))
 ], DocInputController);
 const _DocPageLayoutService = class _DocPageLayoutService extends Disposable {
   constructor(_context) {
     super(), this._context = _context;
   }
   calculatePagePosition() {
-    var _a28, _b2;
-    const docObject = neoGetDocObject(this._context), zoomRatio = (_b2 = (_a28 = this._context.unit.getSettings()) == null ? void 0 : _a28.zoomRatio) != null ? _b2 : 1, { document: docsComponent, scene, docBackground } = docObject, parent = scene == null ? void 0 : scene.getParent(), { width: docsWidth, height: docsHeight, pageMarginLeft, pageMarginTop } = docsComponent;
+    var _a29, _b2;
+    const docObject = neoGetDocObject(this._context), zoomRatio = (_b2 = (_a29 = this._context.unit.getSettings()) == null ? void 0 : _a29.zoomRatio) != null ? _b2 : 1, { document: docsComponent, scene, docBackground } = docObject, parent = scene == null ? void 0 : scene.getParent(), { width: docsWidth, height: docsHeight, pageMarginLeft, pageMarginTop } = docsComponent;
     if (parent == null || docsWidth === Number.POSITIVE_INFINITY || docsHeight === Number.POSITIVE_INFINITY)
       return;
     const { width: engineWidth, height: engineHeight } = parent;
-    let docsLeft = 0, docsTop = 0, sceneWidth = 0, sceneHeight = 0, scrollToX = Number.POSITIVE_INFINITY;
-    engineWidth > (docsWidth + pageMarginLeft * 2) * zoomRatio ? (docsLeft = engineWidth / 2 - docsWidth * zoomRatio / 2, docsLeft /= zoomRatio, sceneWidth = (engineWidth - pageMarginLeft * 2) / zoomRatio, scrollToX = 0) : (docsLeft = pageMarginLeft, sceneWidth = docsWidth + pageMarginLeft * 2, scrollToX = (sceneWidth - engineWidth / zoomRatio) / 2), engineHeight > docsHeight ? (docsTop = engineHeight / 2 - docsHeight / 2, sceneHeight = (engineHeight - pageMarginTop * 2) / zoomRatio) : (docsTop = pageMarginTop, sceneHeight = docsHeight + pageMarginTop * 2), scene.resize(sceneWidth, sceneHeight + 200), engineWidth <= 1 && (docsLeft = -1e4, docsTop = -1e4), docsComponent.translate(docsLeft, docsTop), docBackground.translate(docsLeft, docsTop);
+    let docsLeft = 0, docsTop = pageMarginTop, sceneWidth = 0, sceneHeight = 0, scrollToX = Number.POSITIVE_INFINITY;
+    engineWidth > (docsWidth + pageMarginLeft * 2) * zoomRatio ? (docsLeft = engineWidth / 2 - docsWidth * zoomRatio / 2, docsLeft /= zoomRatio, sceneWidth = (engineWidth - pageMarginLeft * 2) / zoomRatio, scrollToX = 0) : (docsLeft = pageMarginLeft, sceneWidth = docsWidth + pageMarginLeft * 2, scrollToX = (sceneWidth - engineWidth / zoomRatio) / 2), engineHeight > docsHeight ? sceneHeight = (engineHeight - pageMarginTop * 2) / zoomRatio : sceneHeight = docsHeight + pageMarginTop * 2, scene.resize(sceneWidth, sceneHeight), engineWidth <= 1 && (docsLeft = -1e4, docsTop = -1e4), docsComponent.translate(docsLeft, docsTop), docBackground.translate(docsLeft, docsTop);
     const viewport = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
     return scrollToX !== Number.POSITIVE_INFINITY && viewport != null && viewport.scrollToViewportPos({
       viewportScrollX: scrollToX
@@ -10455,8 +10579,8 @@ var __defProp$5 = Object.defineProperty, __getOwnPropDesc$5 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$5(target, key, result), result;
-}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5"), _a22;
-let DocResizeRenderController = (_a22 = class extends Disposable {
+}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5"), _a23;
+let DocResizeRenderController = (_a23 = class extends Disposable {
   constructor(_context, _docPageLayoutService, _textSelectionManagerService) {
     super(), this._context = _context, this._docPageLayoutService = _docPageLayoutService, this._textSelectionManagerService = _textSelectionManagerService;
     const unitId = this._context.unitId;
@@ -10473,7 +10597,7 @@ let DocResizeRenderController = (_a22 = class extends Disposable {
       })
     );
   }
-}, __name(_a22, "DocResizeRenderController"), _a22);
+}, __name(_a23, "DocResizeRenderController"), _a23);
 DocResizeRenderController = __decorateClass$5([
   __decorateParam$5(1, Inject(DocPageLayoutService)),
   __decorateParam$5(2, Inject(DocSelectionManagerService))
@@ -10482,8 +10606,8 @@ var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$4(target, key, result), result;
-}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$4"), _a23;
-let DocSelectionRenderController = (_a23 = class extends Disposable {
+}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$4"), _a24;
+let DocSelectionRenderController = (_a24 = class extends Disposable {
   constructor(_context, _commandService, _editorService, _instanceSrv, _docSelectionRenderService, _docSkeletonManagerService, _docSelectionManagerService) {
     super();
     __publicField(this, "_loadedMap", /* @__PURE__ */ new WeakSet());
@@ -10502,7 +10626,7 @@ let DocSelectionRenderController = (_a23 = class extends Disposable {
         if (params == null)
           return;
         const { unitId, docRanges, isEditing, options } = params;
-        unitId === this._context.unitId && (this._docSelectionRenderService.removeAllRanges(), docRanges.length && this._docSelectionRenderService.addDocRanges(docRanges, isEditing, options));
+        unitId === this._context.unitId && (this._docSelectionRenderService.removeAllRanges(), this._docSelectionRenderService.addDocRanges(docRanges, isEditing, options));
       })
     );
   }
@@ -10571,9 +10695,9 @@ let DocSelectionRenderController = (_a23 = class extends Disposable {
     const updateCommandList = [SetDocZoomRatioOperation.id];
     this.disposeWithMe(
       this._commandService.onCommandExecuted((command) => {
-        var _a28;
+        var _a29;
         if (updateCommandList.includes(command.id)) {
-          const params = command.params, { unitId: documentId } = params, unitId = (_a28 = this._docSelectionManagerService.__getCurrentSelection()) == null ? void 0 : _a28.unitId;
+          const params = command.params, { unitId: documentId } = params, unitId = (_a29 = this._docSelectionManagerService.__getCurrentSelection()) == null ? void 0 : _a29.unitId;
           if (documentId !== unitId)
             return;
           this._docSelectionManagerService.refreshSelection();
@@ -10596,7 +10720,7 @@ let DocSelectionRenderController = (_a23 = class extends Disposable {
       }, !1));
     }));
   }
-}, __name(_a23, "DocSelectionRenderController"), _a23);
+}, __name(_a24, "DocSelectionRenderController"), _a24);
 DocSelectionRenderController = __decorateClass$4([
   __decorateParam$4(1, ICommandService),
   __decorateParam$4(2, IEditorService),
@@ -10609,8 +10733,8 @@ var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$3(target, key, result), result;
-}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3"), _a24;
-let DocZoomRenderController = (_a24 = class extends Disposable {
+}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3"), _a25;
+let DocZoomRenderController = (_a25 = class extends Disposable {
   constructor(_context, _contextService, _docSkeletonManagerService, _univerInstanceService, _commandService, _textSelectionManagerService, _editorService, _docPageLayoutService) {
     super(), this._context = _context, this._contextService = _contextService, this._docSkeletonManagerService = _docSkeletonManagerService, this._univerInstanceService = _univerInstanceService, this._commandService = _commandService, this._textSelectionManagerService = _textSelectionManagerService, this._editorService = _editorService, this._docPageLayoutService = _docPageLayoutService, this._initSkeletonListener(), this._initCommandExecutedListener(), this._initRenderRefresher(), setTimeout(() => this.updateViewZoom(1, !0), 20);
   }
@@ -10625,6 +10749,9 @@ let DocZoomRenderController = (_a24 = class extends Disposable {
         const documentModel = this._univerInstanceService.getCurrentUniverDocInstance();
         if (!documentModel)
           return;
+        const { documentFlavor } = documentModel.getSnapshot().documentStyle;
+        if (documentFlavor === DocumentFlavor.MODERN)
+          return;
         const deltaFactor = Math.abs(e.deltaX);
         let ratioDelta = deltaFactor < 40 ? 0.2 : deltaFactor < 80 ? 0.4 : 0.2;
         ratioDelta *= e.deltaY > 0 ? -1 : 1, scene.scaleX < 1 && (ratioDelta /= 2);
@@ -10654,14 +10781,21 @@ let DocZoomRenderController = (_a24 = class extends Disposable {
         const zoomRatio = this._context.unit.zoomRatio || 1;
         this.updateViewZoom(zoomRatio);
       }
-    }));
+    })), this.disposeWithMe(
+      this._commandService.beforeCommandExecuted((command) => {
+        command.id === SwitchDocModeCommand.id && this._commandService.executeCommand(SetDocZoomRatioCommand.id, {
+          zoomRatio: 1,
+          unitId: this._context.unitId
+        });
+      })
+    );
   }
   updateViewZoom(zoomRatio, needRefreshSelection = !0) {
-    var _a28;
+    var _a29;
     const docObject = neoGetDocObject(this._context);
-    docObject.scene.scale(zoomRatio, zoomRatio), this._docPageLayoutService.calculatePagePosition(), needRefreshSelection && !this._editorService.isEditor(this._context.unitId) && this._textSelectionManagerService.refreshSelection(), (_a28 = docObject.scene.getTransformer()) == null || _a28.clearSelectedObjects();
+    docObject.scene.scale(zoomRatio, zoomRatio), this._editorService.isEditor(this._context.unitId) || this._docPageLayoutService.calculatePagePosition(), needRefreshSelection && !this._editorService.isEditor(this._context.unitId) && this._textSelectionManagerService.refreshSelection(), (_a29 = docObject.scene.getTransformer()) == null || _a29.clearSelectedObjects();
   }
-}, __name(_a24, "DocZoomRenderController"), _a24);
+}, __name(_a25, "DocZoomRenderController"), _a25);
 DocZoomRenderController = __decorateClass$3([
   __decorateParam$3(1, IContextService),
   __decorateParam$3(2, Inject(DocSkeletonManagerService)),
@@ -10677,8 +10811,8 @@ var __defProp$2 = Object.defineProperty, __getOwnPropDesc$2 = Object.getOwnPrope
   return kind && result && __defProp$2(target, key, result), result;
 }, "__decorateClass$2"), __decorateParam$2 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$2");
 const DEBOUNCE_DELAY = 300;
-var _a25;
-let DocStateChangeManagerService = (_a25 = class extends RxDisposable {
+var _a26;
+let DocStateChangeManagerService = (_a26 = class extends RxDisposable {
   constructor(_undoRedoService, _commandService, _univerInstanceService, _docStateEmitService, _renderManagerService) {
     super();
     __publicField(this, "_docStateChange$", new BehaviorSubject(null));
@@ -10691,6 +10825,16 @@ let DocStateChangeManagerService = (_a25 = class extends RxDisposable {
     __publicField(this, "_changeStateCacheTimer", null);
     this._undoRedoService = _undoRedoService, this._commandService = _commandService, this._univerInstanceService = _univerInstanceService, this._docStateEmitService = _docStateEmitService, this._renderManagerService = _renderManagerService, this._initialize(), this._listenDocStateChange();
   }
+  getStateCache(unitId) {
+    var _a29, _b2;
+    return {
+      history: (_a29 = this._historyStateCache.get(unitId)) != null ? _a29 : [],
+      collaboration: (_b2 = this._changeStateCache.get(unitId)) != null ? _b2 : []
+    };
+  }
+  setStateCache(unitId, cache) {
+    this._historyStateCache.set(unitId, cache.history), this._changeStateCache.set(unitId, cache.collaboration);
+  }
   _setChangeState(changeState) {
     this._cacheChangeState(changeState, "history"), this._cacheChangeState(changeState, "collaboration");
   }
@@ -10709,10 +10853,10 @@ let DocStateChangeManagerService = (_a25 = class extends RxDisposable {
   }
   _listenDocStateChange() {
     this._docStateEmitService.docStateChangeParams$.pipe(takeUntil(this.dispose$)).subscribe((changeStateInfo) => {
-      var _a28;
+      var _a29;
       if (changeStateInfo == null)
         return;
-      const { isCompositionEnd, ...changeState } = changeStateInfo, imeInputManagerService = (_a28 = this._renderManagerService.getRenderById(changeStateInfo.unitId)) == null ? void 0 : _a28.with(DocIMEInputManagerService);
+      const { isCompositionEnd, isSync, syncer, ...changeState } = changeStateInfo, imeInputManagerService = (_a29 = this._renderManagerService.getRenderById(isSync ? syncer : changeStateInfo.unitId)) == null ? void 0 : _a29.with(DocIMEInputManagerService);
       if (imeInputManagerService != null) {
         if (isCompositionEnd) {
           const historyParams = imeInputManagerService.fetchComposedUndoRedoMutationParams();
@@ -10786,7 +10930,7 @@ let DocStateChangeManagerService = (_a25 = class extends RxDisposable {
     };
     cacheStates.length = 0, this._docStateChange$.next(changeState);
   }
-}, __name(_a25, "DocStateChangeManagerService"), _a25);
+}, __name(_a26, "DocStateChangeManagerService"), _a26);
 DocStateChangeManagerService = __decorateClass$2([
   __decorateParam$2(0, Inject(IUndoRedoService)),
   __decorateParam$2(1, ICommandService),
@@ -10798,8 +10942,10 @@ var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPrope
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp$1(target, key, result), result;
-}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1"), _a26;
-let DocsRenderService = (_a26 = class extends RxDisposable {
+}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1");
+const DOC_MAIN_CANVAS_ID = "univer-doc-main-canvas";
+var _a27;
+let DocsRenderService = (_a27 = class extends RxDisposable {
   constructor(_instanceSrv, _renderManagerService) {
     super(), this._instanceSrv = _instanceSrv, this._renderManagerService = _renderManagerService, this._init();
   }
@@ -10807,8 +10953,11 @@ let DocsRenderService = (_a26 = class extends RxDisposable {
     this._renderManagerService.createRender$.pipe(takeUntil(this.dispose$)).subscribe((unitId) => this._createRenderWithId(unitId)), this._instanceSrv.getAllUnitsForType(UniverInstanceType.UNIVER_DOC).forEach((documentModel) => this._createRenderer(documentModel)), this._instanceSrv.getTypeOfUnitAdded$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((doc) => this._createRenderer(doc)), this._instanceSrv.getTypeOfUnitDisposed$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((doc) => this._disposeRenderer(doc));
   }
   _createRenderer(doc) {
-    const unitId = doc.getUnitId();
-    this._renderManagerService.has(unitId) || (this._createRenderWithId(unitId), this._renderManagerService.setCurrent(unitId));
+    var _a29;
+    const unitId = doc.getUnitId(), workbookId = (_a29 = this._instanceSrv.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a29.getUnitId();
+    this._renderManagerService.created$.subscribe((renderer) => {
+      renderer.unitId === workbookId && (renderer.engine.getCanvas().setId(DOC_MAIN_CANVAS_ID), renderer.engine.getCanvas().getContext().setId(DOC_MAIN_CANVAS_ID));
+    }), this._renderManagerService.has(unitId) || (this._createRenderWithId(unitId), this._renderManagerService.setCurrent(unitId));
   }
   _createRenderWithId(unitId) {
     this._renderManagerService.createRender(unitId);
@@ -10817,7 +10966,7 @@ let DocsRenderService = (_a26 = class extends RxDisposable {
     const unitId = doc.getUnitId();
     this._renderManagerService.removeRender(unitId);
   }
-}, __name(_a26, "DocsRenderService"), _a26);
+}, __name(_a27, "DocsRenderService"), _a27);
 DocsRenderService = __decorateClass$1([
   __decorateParam$1(0, IUniverInstanceService),
   __decorateParam$1(1, IRenderManagerService)
@@ -10899,8 +11048,8 @@ var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnProperty
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp2(target, key, result), result;
-}, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam"), __publicField2 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp2(obj, key + "", value), "__publicField"), _a27;
-let UniverDocsUIPlugin = (_a27 = class extends Plugin {
+}, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam"), __publicField2 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp2(obj, key + "", value), "__publicField"), _a28;
+let UniverDocsUIPlugin = (_a28 = class extends Plugin {
   // static override type = UniverInstanceType.UNIVER_DOC;
   constructor(_config = defaultPluginConfig, _injector, _renderManagerSrv, _commandService, _logService, _configService) {
     super(), this._config = _config, this._injector = _injector, this._renderManagerSrv = _renderManagerSrv, this._commandService = _commandService, this._logService = _logService, this._configService = _configService;
@@ -10965,6 +11114,7 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
       DocTableDeleteRowsCommand,
       DocTableDeleteColumnsCommand,
       DocTableDeleteTableCommand,
+      CloseHeaderFooterCommand,
       DocTableTabCommand,
       TabCommand,
       AfterSpaceCommand,
@@ -10975,6 +11125,7 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
       ToggleCheckListCommand,
       QuickListCommand,
       IMEInputCommand,
+      SwitchDocModeCommand,
       DocParagraphSettingCommand,
       InnerPasteCommand,
       CutContentCommand,
@@ -11025,7 +11176,8 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
       [DocCanvasPopManagerService],
       [DocsRenderService],
       [DocStateChangeManagerService],
-      [DocAutoFormatService]
+      [DocAutoFormatService],
+      [DocMenuStyleService]
     ], this._config.override).forEach((d) => injector.add(d));
   }
   _markDocAsFocused() {
@@ -11072,7 +11224,7 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
       this._renderManagerSrv.registerRenderModule(UniverInstanceType.UNIVER_DOC, m2);
     });
   }
-}, __name(_a27, "UniverDocsUIPlugin"), _a27);
+}, __name(_a28, "UniverDocsUIPlugin"), _a28);
 __publicField2(UniverDocsUIPlugin, "pluginName", DOC_UI_PLUGIN_NAME);
 UniverDocsUIPlugin = __decorateClass([
   DependentOn(UniverRenderEnginePlugin),