@univerjs/docs-ui 0.4.1 → 0.4.2-nightly.202410301606

package/lib/es/index.js

@@ -2,14 +2,16 @@ 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, DEFAULT_STYLES, createIdentifier, EDITOR_ACTIVATED, FOCUSING_EDITOR_STANDALONE, isInternalEditorID, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, FOCUSING_EDITOR_INPUT_FORMULA, DEFAULT_EMPTY_DOCUMENT_VALUE, VerticalAlign, HorizontalAlign, IContextService, DocumentFlavor, useDependency, LocaleService, debounce, BooleanNumber, PresetListType, sequenceExecuteAsync, FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, FOCUSING_COMMON_DRAWINGS, MemoryCursor, BaselineOffset, PRESET_LIST_TYPE, GridType, sortRulesFactory, useObservable, DataStreamTreeTokenType, TableCellHeightRule, TableSizeType, generateRandomId, TableAlignmentType, TableTextWrapType, PositionedObjectLayoutType, LRUMap, ColorKit, skipParseTagNames, CustomRangeType, DataStreamTreeNodeType, ILogService, SliceBodyType, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, normalizeBody, DOC_RANGE_TYPE, SpacingRule, ThemeService, DOCS_ZEN_EDITOR_UNIT_ID_KEY, Injector, connectInjector, IConfigService, RxDisposable, QuickListTypeMap, Direction, RANGE_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 { g as getRichTextEditPath, D as DocSelectionRenderService, a as getCommandSkeleton, b as DeleteDirection, U as UpdateCommand, c as DeleteCommand, I as InsertCommand, d as getAnchorBounding, N as NodePositionConvertToCursor, i as isInSameTableCell, e as getLineBounding } from "../core-editing.command-DAmOCaTR.mjs";
+import { E, h, R, T, m, k, l, j, f } from "../core-editing.command-DAmOCaTR.mjs";
 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 { 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 { IRenderManagerService, DocumentEditArea, Shape, PageLayoutType, Vector2, Rect, Path, getCharSpaceApply, getNumberUnitValue, hasListGlyph, isIndentByGlyph, isFirstGlyph, getParagraphByGlyph, pixelToPt, ptToPixel, parseDataStreamToTree, Viewport, ScrollBar, Layer, Documents, DocBackground, DocumentSkeletonPageType, lineIterator, getLastLine, pxToNum, CURSOR_TYPE, TRANSFORM_CHANGE_OBSERVABLE_TYPE, UniverRenderEnginePlugin } from "@univerjs/engine-render";
+import { Subject, merge, fromEvent, BehaviorSubject, combineLatest, Observable, map as map$1, takeUntil, distinctUntilChanged, filter as filter$1, throttleTime, switchMap, take, animationFrameScheduler } from "rxjs";
+import { KeyCode, useEvent, ILayoutService, 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) => {
@@ -65,7 +67,7 @@ let DocAutoFormatService = (_a = class extends Disposable {
         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));
@@ -123,9 +125,9 @@ const DefaultToolbarConfig = {
 var DOCS_VIEW_KEY = /* @__PURE__ */ ((DOCS_VIEW_KEY2) => (DOCS_VIEW_KEY2.MAIN = "__Document_Render_Main__", DOCS_VIEW_KEY2.BACKGROUND = "__Document_Render_Background__", DOCS_VIEW_KEY2))(DOCS_VIEW_KEY || {}), VIEWPORT_KEY = /* @__PURE__ */ ((VIEWPORT_KEY2) => (VIEWPORT_KEY2.VIEW_MAIN = "viewMain", VIEWPORT_KEY2.VIEW_TOP = "viewTop", VIEWPORT_KEY2.VIEW_LEFT = "viewLeft", VIEWPORT_KEY2.VIEW_LEFT_TOP = "viewLeftTop", VIEWPORT_KEY2))(VIEWPORT_KEY || {});
 const DOCS_COMPONENT_BACKGROUND_LAYER_INDEX = 0, DOCS_COMPONENT_MAIN_LAYER_INDEX = 2, DOCS_COMPONENT_HEADER_LAYER_INDEX = 4, DOCS_COMPONENT_DEFAULT_Z_INDEX = 10, NORMAL_TEXT_SELECTION_PLUGIN_NAME = "normalTextSelectionPluginName";
 function neoGetDocObject(renderContext) {
-  const { mainComponent, scene, engine, components } = renderContext, document2 = mainComponent, docBackground = components.get(DOCS_VIEW_KEY.BACKGROUND);
+  const { mainComponent, scene, engine, components } = renderContext, document = mainComponent, docBackground = components.get(DOCS_VIEW_KEY.BACKGROUND);
   return {
-    document: document2,
+    document,
     docBackground,
     scene,
     engine
@@ -139,9 +141,9 @@ function getDocObject(univerInstanceService, renderManagerService) {
   const unitId = documentModel.getUnitId(), currentRender = renderManagerService.getRenderById(unitId);
   if (currentRender == null)
     return;
-  const { mainComponent, scene, engine, components } = currentRender, document2 = mainComponent, docBackground = components.get(DOCS_VIEW_KEY.BACKGROUND);
+  const { mainComponent, scene, engine, components } = currentRender, document = mainComponent, docBackground = components.get(DOCS_VIEW_KEY.BACKGROUND);
   return {
-    document: document2,
+    document,
     docBackground,
     scene,
     engine
@@ -152,9 +154,9 @@ function getDocObjectById(unitId, renderManagerService) {
   const currentRender = renderManagerService.getRenderById(unitId);
   if (currentRender == null)
     return;
-  const { mainComponent, scene, engine, components } = currentRender, document2 = mainComponent, docBackground = components.get(DOCS_VIEW_KEY.BACKGROUND);
+  const { mainComponent, scene, engine, components } = currentRender, document = mainComponent, docBackground = components.get(DOCS_VIEW_KEY.BACKGROUND);
   return {
-    document: document2,
+    document,
     docBackground,
     scene,
     engine
@@ -175,8 +177,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 +189,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;
@@ -236,12 +236,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
@@ -249,143 +247,25 @@ function deleteCustomDecorationFactory(accessor, params) {
   }), doMutation.params.actions = jsonX.editOp(textX.serialize()), doMutation;
 }
 __name(deleteCustomDecorationFactory, "deleteCustomDecorationFactory");
-function getCommandSkeleton(accessor, unitId) {
-  var _a28;
-  return (_a28 = accessor.get(IRenderManagerService).getRenderById(unitId)) == null ? void 0 : _a28.with(DocSkeletonManagerService);
-}
-__name(getCommandSkeleton, "getCommandSkeleton");
-function getRichTextEditPath(docDataModel, segmentId = "") {
-  if (!segmentId)
-    return ["body"];
-  const { headers, footers } = docDataModel.getSnapshot();
-  if (headers == null && footers == null)
-    throw new Error("Document data model must have headers or footers when update by segment id");
-  if ((headers == null ? void 0 : headers[segmentId]) != null)
-    return ["headers", segmentId, "body"];
-  if ((footers == null ? void 0 : footers[segmentId]) != null)
-    return ["footers", segmentId, "body"];
-  throw new Error("Segment id not found in headers or footers");
-}
-__name(getRichTextEditPath, "getRichTextEditPath");
-function addCustomRangeFactory(accessor, param, body) {
-  const { unitId, segmentId } = param, documentDataModel = accessor.get(IUniverInstanceService).getUnit(unitId);
-  if (!documentDataModel)
-    return !1;
-  const doMutation = {
-    id: RichTextEditingMutation.id,
-    params: {
-      unitId: param.unitId,
-      actions: [],
-      textRanges: void 0
-    }
-  }, jsonX = JSONX.getInstance(), textX = BuildTextUtils.customRange.add({ ...param, body });
-  if (!textX)
-    return !1;
-  const path = getRichTextEditPath(documentDataModel, segmentId);
-  return doMutation.params.actions = jsonX.editOp(textX.serialize(), path), doMutation;
-}
-__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;
-  if (!selection)
-    return !1;
-  const documentDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-  if (!documentDataModel)
-    return !1;
-  const body = documentDataModel.getSelfOrHeaderFooterModel(selection.segmentId).getBody();
-  if (!body)
-    return !1;
-  const { startOffset, endOffset } = BuildTextUtils.selection.normalizeSelection(selection), textX = BuildTextUtils.customRange.add({
-    range: { startOffset, endOffset, collapsed: startOffset === endOffset },
-    rangeId,
-    rangeType,
-    segmentId,
-    wholeEntity,
-    properties,
-    body
-  });
-  if (!textX)
-    return !1;
-  const jsonX = JSONX.getInstance(), doMutation = {
-    id: RichTextEditingMutation.id,
-    params: {
-      unitId,
-      actions: [],
-      textRanges: void 0
-    },
-    textX
-  }, path = getRichTextEditPath(documentDataModel, segmentId);
-  return doMutation.params.actions = jsonX.editOp(textX.serialize(), path), doMutation;
-}
-__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);
-  if (!documentDataModel)
-    return !1;
-  const textRange = selection != null && selection.collapsed ? { index: selection.startOffset } : void 0, doMutation = {
-    id: RichTextEditingMutation.id,
-    params: {
-      unitId: params.unitId,
-      actions: [],
-      textRanges: void 0,
-      segmentId
-    }
-  }, jsonX = JSONX.getInstance(), textX = BuildTextUtils.customRange.delete(accessor, {
-    documentDataModel,
-    rangeId: params.rangeId,
-    insert,
-    segmentId,
-    textRange
-  });
-  if (!textX)
-    return !1;
-  const path = getRichTextEditPath(documentDataModel, segmentId);
-  return doMutation.params.actions = jsonX.editOp(textX.serialize(), path), doMutation.params.textRanges = textRange ? [{ startOffset: textRange.index, endOffset: textRange.index, collapsed: !0 }] : void 0, doMutation;
-}
-__name(deleteCustomRangeFactory, "deleteCustomRangeFactory");
 function hasParagraphInTable(paragraph, tables) {
   return tables.some((table) => paragraph.startIndex > table.startIndex && paragraph.startIndex < table.endIndex);
 }
 __name(hasParagraphInTable, "hasParagraphInTable");
-function replaceSelectionFactory(accessor, params) {
-  var _a28, _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();
-  if (!body) return !1;
-  const docSelectionManagerService = accessor.get(DocSelectionManagerService), selection = (_c = params.selection) != null ? _c : docSelectionManagerService.getActiveTextRange();
-  if (!selection || !body)
-    return !1;
-  const textRanges = (_d = params.textRanges) != null ? _d : [{
-    startOffset: selection.startOffset + insertBody.dataStream.length,
-    endOffset: selection.startOffset + insertBody.dataStream.length,
-    collapsed: !0,
-    segmentId
-  }], textX = BuildTextUtils.selection.replace({
-    selection,
-    body: insertBody,
-    doc: docDataModel
-  });
-  if (!textX)
-    return !1;
-  const doMutation = {
-    id: RichTextEditingMutation.id,
-    params: {
-      unitId,
-      actions: [],
-      textRanges,
-      debounce: !0,
-      segmentId
-    },
-    textX
-  }, jsonX = JSONX.getInstance(), path = getRichTextEditPath(docDataModel, segmentId);
-  return doMutation.params.actions = jsonX.editOp(textX.serialize(), path), doMutation;
+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(replaceSelectionFactory, "replaceSelectionFactory");
+__name(getTextRunAtPosition, "getTextRunAtPosition");
 function docDrawingPositionToTransform(position) {
   return {
     left: position.positionH.posOffset,
@@ -423,16 +303,16 @@ var jsxRuntime = { exports: {} }, reactJsxRuntime_production_min = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var f = require$$0__default, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: !0, ref: !0, __self: !0, __source: !0 };
+var f2 = require$$0__default, k2 = Symbol.for("react.element"), l2 = Symbol.for("react.fragment"), m2 = Object.prototype.hasOwnProperty, n = f2.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: !0, ref: !0, __self: !0, __source: !0 };
 function q(c, a, g) {
-  var b, d = {}, e = null, h = null;
-  g !== void 0 && (e = "" + g), a.key !== void 0 && (e = "" + a.key), a.ref !== void 0 && (h = a.ref);
-  for (b in a) m.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+  var b, d = {}, e = null, h2 = null;
+  g !== void 0 && (e = "" + g), a.key !== void 0 && (e = "" + a.key), a.ref !== void 0 && (h2 = a.ref);
+  for (b in a) m2.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
   if (c && c.defaultProps) for (b in a = c.defaultProps, a) d[b] === void 0 && (d[b] = a[b]);
-  return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
+  return { $$typeof: k2, type: c, key: e, ref: h2, props: d, _owner: n.current };
 }
 __name(q, "q");
-reactJsxRuntime_production_min.Fragment = l;
+reactJsxRuntime_production_min.Fragment = l2;
 reactJsxRuntime_production_min.jsx = q;
 reactJsxRuntime_production_min.jsxs = q;
 jsxRuntime.exports = reactJsxRuntime_production_min;
@@ -473,1839 +353,97 @@ const ReplaceSnapshotCommand = {
     const doMutation = {
       id: RichTextEditingMutation.id,
       params: {
-        unitId,
-        actions: [],
-        textRanges
-      }
-    };
-    options && (doMutation.params.options = options);
-    const rawActions = [], jsonX = JSONX.getInstance();
-    if (!Tools.diffValue(body, prevBody)) {
-      const actions = jsonX.replaceOp(["body"], prevBody, body);
-      actions != null && rawActions.push(actions);
-    }
-    if (!Tools.diffValue(tableSource, prevTableSource)) {
-      const actions = jsonX.replaceOp(["tableSource"], prevTableSource, tableSource);
-      actions != null && rawActions.push(actions);
-    }
-    if (!Tools.diffValue(footers, prevFooters)) {
-      const actions = jsonX.replaceOp(["footers"], prevFooters, footers);
-      actions != null && rawActions.push(actions);
-    }
-    if (!Tools.diffValue(headers, prevHeaders)) {
-      const actions = jsonX.replaceOp(["headers"], prevHeaders, headers);
-      actions != null && rawActions.push(actions);
-    }
-    if (!Tools.diffValue(lists, prevLists)) {
-      const actions = jsonX.replaceOp(["lists"], prevLists, lists);
-      actions != null && rawActions.push(actions);
-    }
-    if (!Tools.diffValue(drawings, prevDrawings)) {
-      const actions = jsonX.replaceOp(["drawings"], prevDrawings, drawings);
-      actions != null && rawActions.push(actions);
-    }
-    if (!Tools.diffValue(drawingsOrder, prevDrawingsOrder)) {
-      const actions = jsonX.replaceOp(["drawingsOrder"], prevDrawingsOrder, drawingsOrder);
-      actions != null && rawActions.push(actions);
-    }
-    return doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-  }, "handler")
-}, ReplaceContentCommand = {
-  id: "doc.command-replace-content",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    const { unitId, body, textRanges, segmentId = "", options } = params, univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), docSelectionManagerService = accessor.get(DocSelectionManagerService), docDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC), prevBody = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId).getSnapshot().body;
-    if (docDataModel == null || prevBody == null)
-      return !1;
-    const doMutation = getMutationParams(unitId, segmentId, docDataModel, prevBody, body);
-    return doMutation.params.textRanges = textRanges, options && (doMutation.params.options = options), doMutation.params.actions == null && textRanges ? (docSelectionManagerService.replaceDocRanges(textRanges, {
-      unitId,
-      subUnitId: unitId
-    }, !1), !0) : !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-  }, "handler")
-}, CoverContentCommand = {
-  id: "doc.command-cover-content",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    const { unitId, body, segmentId = "" } = params, univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), docDatModel = univerInstanceService.getUniverDocInstance(unitId), prevBody = docDatModel == null ? void 0 : docDatModel.getSnapshot().body;
-    if (docDatModel == null || prevBody == null)
-      return !1;
-    const doMutation = getMutationParams(unitId, segmentId, docDatModel, prevBody, body);
-    return doMutation.params.noNeedSetTextRange = !0, doMutation.params.noHistory = !0, commandService.syncExecuteCommand(
-      doMutation.id,
-      doMutation.params
-    ), undoRedoService.clearUndoRedo(unitId), !0;
-  }, "handler")
-};
-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
-  }), body.dataStream.length > 0 && textX.push({
-    t: TextXActionType.INSERT,
-    body,
-    len: body.dataStream.length,
-    line: 0,
-    segmentId
-  });
-  const path = getRichTextEditPath(docDatModel, segmentId);
-  return jsonX.editOp(textX.serialize(), path);
-}
-__name(getMutationActions, "getMutationActions");
-function getMutationParams(unitId, segmentId, docDatModel, prevBody, body) {
-  const doMutation = {
-    id: RichTextEditingMutation.id,
-    params: {
-      unitId,
-      actions: [],
-      textRanges: []
-    }
-  }, actions = getMutationActions(segmentId, docDatModel, prevBody, body);
-  return doMutation.params.actions = actions, doMutation;
-}
-__name(getMutationParams, "getMutationParams");
-CommandType.COMMAND;
-var NodePositionType = /* @__PURE__ */ ((NodePositionType2) => (NodePositionType2[NodePositionType2.page = 0] = "page", NodePositionType2[NodePositionType2.section = 1] = "section", NodePositionType2[NodePositionType2.column = 2] = "column", NodePositionType2[NodePositionType2.line = 3] = "line", NodePositionType2[NodePositionType2.divide = 4] = "divide", NodePositionType2[NodePositionType2.glyph = 5] = "glyph", NodePositionType2))(NodePositionType || {});
-const NodePositionMap = {
-  page: 0,
-  section: 1,
-  column: 2,
-  line: 3,
-  divide: 4,
-  glyph: 5
-};
-function compareNodePositionLogic(pos1, pos2) {
-  return pos1.page > pos2.page ? !1 : pos1.page < pos2.page ? !0 : pos1.section > pos2.section ? !1 : pos1.section < pos2.section ? !0 : pos1.column > pos2.column ? !1 : pos1.column < pos2.column ? !0 : pos1.line > pos2.line ? !1 : pos1.line < pos2.line ? !0 : pos1.divide > pos2.divide ? !1 : pos1.divide < pos2.divide ? !0 : pos1.glyph > pos2.glyph ? !1 : (pos1.glyph < pos2.glyph, !0);
-}
-__name(compareNodePositionLogic, "compareNodePositionLogic");
-function compareNodePosition(pos1, pos2) {
-  return compareNodePositionLogic(pos1, pos2) ? {
-    start: pos1,
-    end: pos2
-  } : {
-    start: pos2,
-    end: pos1
-  };
-}
-__name(compareNodePosition, "compareNodePosition");
-function getOneTextSelectionRange(rangeList) {
-  const rangeCount = rangeList.length;
-  if (rangeCount === 0)
-    return;
-  const firstCursor = rangeList[0], lastCursor = rangeList[rangeCount - 1], collapsed = rangeList.length === 1 && firstCursor.collapsed;
-  return {
-    startOffset: firstCursor.startOffset,
-    endOffset: lastCursor.endOffset,
-    collapsed
-  };
-}
-__name(getOneTextSelectionRange, "getOneTextSelectionRange");
-function getOffsetInDivide(glyphGroup, startGlyphIndex, endGlyphIndex, st) {
-  let startOffset = st, endOffset = st;
-  for (let i = 0; i < glyphGroup.length; i++) {
-    const contentLength = glyphGroup[i].count;
-    i < startGlyphIndex && (startOffset += contentLength), i < endGlyphIndex && (endOffset += contentLength);
-  }
-  return {
-    startOffset,
-    endOffset
-  };
-}
-__name(getOffsetInDivide, "getOffsetInDivide");
-function pushToPoints(position) {
-  const { startX, startY, endX, endY } = position, points = [];
-  return points.push({
-    x: startX,
-    y: startY
-  }), points.push({
-    x: endX,
-    y: startY
-  }), points.push({
-    x: endX,
-    y: endY
-  }), points.push({
-    x: startX,
-    y: endY
-  }), points.push({
-    x: startX,
-    y: startY
-  }), points;
-}
-__name(pushToPoints, "pushToPoints");
-const _NodePositionConvertToCursor = class _NodePositionConvertToCursor {
-  constructor(_documentOffsetConfig, _docSkeleton) {
-    __publicField(this, "_liquid", new Liquid());
-    __publicField(this, "_currentStartState", {
-      page: 0,
-      section: 0,
-      column: 0,
-      line: 0,
-      divide: 0,
-      glyph: 0
-      /* NORMAL */
-    });
-    __publicField(this, "_currentEndState", {
-      page: 0,
-      section: 0,
-      column: 0,
-      line: 0,
-      divide: 0,
-      glyph: 0
-      /* NORMAL */
-    });
-    this._documentOffsetConfig = _documentOffsetConfig, this._docSkeleton = _docSkeleton;
-  }
-  // eslint-disable-next-line max-lines-per-function
-  getRangePointData(startOrigin, endOrigin) {
-    const borderBoxPointGroup = [], contentBoxPointGroup = [], cursorList = [];
-    if (startOrigin == null || endOrigin == null)
-      return {
-        borderBoxPointGroup,
-        contentBoxPointGroup,
-        cursorList
-      };
-    if (!this._isValidPosition(startOrigin, endOrigin))
-      throw new Error(
-        `
-                Invalid positions in NodePositionConvertToCursor,
-                they are not in the same segment page when in header or footer.`
-      );
-    const { start, end } = compareNodePosition(startOrigin, endOrigin);
-    return this._selectionIterator(start, end, (start_sp, end_sp, isFirst, isLast, divide, line) => {
-      const { lineHeight, asc, paddingTop, marginTop, marginBottom } = line, { glyphGroup, st } = divide;
-      if (glyphGroup.length === 0)
-        return;
-      const { x: startX, y: startY } = this._liquid;
-      let borderBoxPosition, contentBoxPosition;
-      const firstGlyph = glyphGroup[start_sp], lastGlyph = glyphGroup[end_sp], preGlyph = glyphGroup[start_sp - 1], firstGlyphLeft = (firstGlyph == null ? void 0 : firstGlyph.left) || 0, firstGlyphWidth = (firstGlyph == null ? void 0 : firstGlyph.width) || 0, lastGlyphLeft = (lastGlyph == null ? void 0 : lastGlyph.left) || 0, lastGlyphWidth = (lastGlyph == null ? void 0 : lastGlyph.width) || 0, isCurrentList = (firstGlyph == null ? void 0 : firstGlyph.glyphType) === GlyphType.LIST, { startOffset, endOffset } = getOffsetInDivide(glyphGroup, start_sp, end_sp, st), isStartBack = start.glyph === start_sp && isFirst ? start.isBack : !0, isEndBack = end.glyph === end_sp && isLast ? end.isBack : !1, collapsed = start === end, anchorGlyph = isStartBack && preGlyph != null ? preGlyph : firstGlyph;
-      if (start_sp === 0 && end_sp === glyphGroup.length - 1)
-        borderBoxPosition = {
-          startX: startX + firstGlyphLeft + (isCurrentList ? firstGlyphWidth : 0),
-          startY,
-          endX: startX + lastGlyphLeft + (isEndBack ? 0 : lastGlyphWidth),
-          endY: startY + lineHeight - marginTop - marginBottom
-        }, contentBoxPosition = {
-          startX: startX + firstGlyphLeft + (isCurrentList ? firstGlyphWidth : 0),
-          startY: startY + paddingTop + asc - anchorGlyph.bBox.ba,
-          endX: startX + lastGlyphLeft + (isEndBack ? 0 : lastGlyphWidth),
-          endY: startY + paddingTop + asc + anchorGlyph.bBox.bd
-        };
-      else {
-        const isStartBackFin = isStartBack && !isCurrentList;
-        borderBoxPosition = {
-          startX: startX + firstGlyphLeft + (isStartBackFin ? 0 : firstGlyphWidth),
-          startY,
-          endX: startX + lastGlyphLeft + (isEndBack ? 0 : lastGlyphWidth),
-          endY: startY + lineHeight - marginTop - marginBottom
-        }, contentBoxPosition = {
-          startX: startX + firstGlyphLeft + (isStartBackFin ? 0 : firstGlyphWidth),
-          startY: startY + paddingTop + asc - anchorGlyph.bBox.ba,
-          endX: startX + lastGlyphLeft + (isEndBack ? 0 : lastGlyphWidth),
-          endY: startY + paddingTop + asc + anchorGlyph.bBox.bd
-        };
-      }
-      borderBoxPointGroup.push(pushToPoints(borderBoxPosition)), contentBoxPointGroup.push(pushToPoints(contentBoxPosition)), cursorList.push({
-        startOffset: isStartBack ? startOffset : startOffset + firstGlyph.count,
-        endOffset: isEndBack ? endOffset : endOffset + lastGlyph.count,
-        collapsed
-      });
-    }), {
-      borderBoxPointGroup,
-      contentBoxPointGroup,
-      cursorList
-    };
-  }
-  _isValidPosition(startOrigin, endOrigin) {
-    const { segmentPage: startPage, pageType: startPageType } = startOrigin, { segmentPage: endPage, pageType: endPageType } = endOrigin;
-    return startPageType !== endPageType ? !1 : startPageType === DocumentSkeletonPageType.HEADER || startPageType === DocumentSkeletonPageType.FOOTER ? startPage === endPage : !0;
-  }
-  _resetCurrentNodePositionState() {
-    this._currentStartState = {
-      page: 0,
-      section: 0,
-      column: 0,
-      line: 0,
-      divide: 0,
-      glyph: 0
-      /* NORMAL */
-    }, this._currentEndState = {
-      page: 0,
-      section: 0,
-      column: 0,
-      line: 0,
-      divide: 0,
-      glyph: 0
-      /* NORMAL */
-    };
-  }
-  _setNodePositionState(type = 0, start, end, current) {
-    current === start ? this._currentStartState[type] = 1 : this._currentStartState[type] = 0, current === end ? this._currentEndState[type] = 2 : this._currentEndState[type] = 0;
-  }
-  _checkPreviousNodePositionState(typeIndex, isStart = !0) {
-    let index = typeIndex, resultState;
-    for (; index >= 0; ) {
-      const type = NodePositionType[index];
-      let state;
-      if (isStart ? state = this._currentStartState[type] : state = this._currentEndState[type], state === void 0)
-        return;
-      if (resultState === void 0 && (resultState = state), state !== resultState)
-        return 0;
-      index--;
-    }
-    return resultState;
-  }
-  _getSelectionRuler(typeIndex, startPosition, endPosition, nextLength, current) {
-    let start_next = 0, end_next = nextLength;
-    const type = NodePositionType[typeIndex], nextType = NodePositionType[typeIndex + 1];
-    if (nextType === null || type === null)
-      return {
-        start_next,
-        end_next
-      };
-    const start = startPosition[type], end = endPosition[type];
-    this._setNodePositionState(type, start, end, current);
-    const preStartNestType = this._checkPreviousNodePositionState(typeIndex), preEndNestType = this._checkPreviousNodePositionState(typeIndex, !1);
-    return preStartNestType === 1 && (start_next = startPosition[nextType]), preEndNestType === 2 && (end_next = endPosition[nextType]), {
-      start_next,
-      end_next
-    };
-  }
-  // eslint-disable-next-line max-lines-per-function, complexity
-  _selectionIterator(startPosition, endPosition, func) {
-    var _a28, _b2;
-    const skeleton = this._docSkeleton;
-    if (!skeleton)
-      return [];
-    const { pageType, path } = startPosition;
-    this._liquid.reset();
-    const skeletonData = skeleton.getSkeletonData();
-    if (skeletonData == null)
-      return [];
-    const { pages, skeHeaders, skeFooters } = skeletonData, { page: pageIndex, segmentPage } = startPosition, { page: endPageIndex, segmentPage: endSegmentPage } = endPosition;
-    if (this._resetCurrentNodePositionState(), this._documentOffsetConfig == null)
-      return [];
-    const { pageLayoutType, pageMarginLeft, pageMarginTop } = this._documentOffsetConfig, skipPageIndex = pageType === DocumentSkeletonPageType.BODY || pageType === DocumentSkeletonPageType.CELL ? pageIndex : segmentPage;
-    for (let p2 = 0; p2 < skipPageIndex; p2++) {
-      const page = pages[p2];
-      this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
-    }
-    const endIndex = pageType === DocumentSkeletonPageType.BODY || pageType === DocumentSkeletonPageType.CELL ? endPageIndex : endSegmentPage;
-    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) {
-        this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
-        continue;
-      }
-      const sections = segmentPage2.sections, { start_next: start_s, end_next: end_s } = this._getSelectionRuler(
-        NodePositionMap.page,
-        startPosition,
-        endPosition,
-        sections.length - 1,
-        pageType === DocumentSkeletonPageType.BODY || pageType === DocumentSkeletonPageType.CELL ? p2 : 0
-      );
-      switch (this._liquid.translateSave(), pageType) {
-        case DocumentSkeletonPageType.HEADER:
-          this._liquid.translatePagePadding({
-            ...segmentPage2,
-            marginLeft: page.marginLeft
-            // Because header or footer margin Left is 0.
-          });
-          break;
-        case DocumentSkeletonPageType.FOOTER: {
-          const footerTop = page.pageHeight - segmentPage2.height - segmentPage2.marginBottom;
-          this._liquid.translate(page.marginLeft, footerTop);
-          break;
-        }
-        case DocumentSkeletonPageType.CELL: {
-          this._liquid.translatePagePadding(page);
-          const rowSke = segmentPage2.parent, tableSke = rowSke.parent, { left: cellLeft } = segmentPage2, { top: tableTop, left: tableLeft } = tableSke, { top: rowTop } = rowSke;
-          this._liquid.translate(tableLeft + cellLeft, tableTop + rowTop), this._liquid.translatePagePadding(segmentPage2);
-          break;
-        }
-        default:
-          this._liquid.translatePagePadding(page);
-          break;
-      }
-      for (let s = start_s; s <= end_s; s++) {
-        const section = sections[s], columns = section.columns, { start_next: start_c, end_next: end_c } = this._getSelectionRuler(
-          NodePositionMap.section,
-          startPosition,
-          endPosition,
-          columns.length - 1,
-          s
-        );
-        this._liquid.translateSection(section);
-        for (let c = start_c; c <= end_c; c++) {
-          const column = columns[c], lines = column.lines, { start_next: start_l, end_next: end_l } = this._getSelectionRuler(
-            NodePositionMap.column,
-            startPosition,
-            endPosition,
-            lines.length - 1,
-            c
-          );
-          this._liquid.translateColumn(column);
-          for (let l2 = start_l; l2 <= end_l; l2++) {
-            const line = lines[l2], { divides } = line, { start_next: start_d, end_next: end_d } = this._getSelectionRuler(
-              NodePositionMap.line,
-              startPosition,
-              endPosition,
-              divides.length - 1,
-              l2
-            );
-            this._liquid.translateSave(), this._liquid.translateLine(line, !0, !1);
-            for (let d = start_d; d <= end_d; d++) {
-              const divide = divides[d];
-              this._liquid.translateSave(), this._liquid.translateDivide(divide);
-              const { glyphGroup } = divide, { start_next: start_sp, end_next: end_sp } = this._getSelectionRuler(
-                NodePositionMap.divide,
-                startPosition,
-                endPosition,
-                glyphGroup.length - 1,
-                d
-              );
-              let isFirst = !1, isLast = !1;
-              p2 === skipPageIndex && s === start_s && c === start_c && l2 === start_l && d === start_d && (isFirst = !0), p2 === endIndex && s === end_s && c === end_c && l2 === end_l && d === end_d && (isLast = !0), func && func(start_sp, end_sp, isFirst, isLast, divide, line, column, section, segmentPage2), this._liquid.translateRestore();
-            }
-            this._liquid.translateRestore();
-          }
-        }
-      }
-      this._liquid.translateRestore(), this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
-    }
-  }
-};
-__name(_NodePositionConvertToCursor, "NodePositionConvertToCursor");
-let NodePositionConvertToCursor = _NodePositionConvertToCursor;
-function isValidRectRange(anchorNodePosition, focusNodePosition) {
-  const { path: anchorPath } = anchorNodePosition, { path: focusPath } = focusNodePosition;
-  if (anchorPath.length !== focusPath.length || anchorPath.indexOf("cells") === -1)
-    return !1;
-  const tableIdIndex = anchorPath.indexOf("skeTables") + 1, rowIndex = anchorPath.indexOf("rows") + 1, cellIndex = anchorPath.indexOf("cells") + 1, anchorTableId = getTableIdAndSliceIndex(anchorPath[tableIdIndex]).tableId, focusTableId = getTableIdAndSliceIndex(focusPath[tableIdIndex]).tableId;
-  if (anchorTableId !== focusTableId)
-    return !1;
-  const anchorRowIndex = anchorPath[rowIndex], focusRowIndex = focusPath[rowIndex], anchorCellIndex = anchorPath[cellIndex], focusCellIndex = focusPath[cellIndex];
-  return !(anchorRowIndex === focusRowIndex && anchorCellIndex === focusCellIndex);
-}
-__name(isValidRectRange, "isValidRectRange");
-function isInSameTableCell(anchorNodePosition, focusNodePosition) {
-  const { path: anchorPath } = anchorNodePosition, { path: focusPath } = focusNodePosition;
-  return anchorPath.indexOf("cells") === -1 || focusPath.indexOf("cells") === -1 ? !1 : Tools.diffValue(anchorPath, focusPath);
-}
-__name(isInSameTableCell, "isInSameTableCell");
-function compareNodePositionInTable(a, b) {
-  if (isInSameTableCell(a, b))
-    return compareNodePositionLogic(a, b);
-  const { path: aPath } = a, { path: bPath } = b, aTableId = aPath[aPath.length - 5], bTableId = bPath[bPath.length - 5];
-  if (aTableId !== bTableId && typeof aTableId == "string" && typeof bTableId == "string") {
-    const aSlideId = aTableId.split("#-#")[1], bSlideId = bTableId.split("#-#")[1];
-    return +aSlideId < +bSlideId;
-  }
-  const aRowCount = aPath[aPath.length - 3], bRowCount = bPath[bPath.length - 3], aCellCount = aPath[aPath.length - 1], bCellCount = bPath[bPath.length - 1];
-  return aRowCount < bRowCount ? !0 : aRowCount > bRowCount ? !1 : aCellCount <= bCellCount;
-}
-__name(compareNodePositionInTable, "compareNodePositionInTable");
-function firstGlyphInCellPage(cellPage) {
-  return cellPage.sections[0].columns[0].lines[0].divides[0].glyphGroup[0];
-}
-__name(firstGlyphInCellPage, "firstGlyphInCellPage");
-function lastGlyphInCellPage(cellPage) {
-  const { sections } = cellPage, lastSection = sections[sections.length - 1], lastColumn = lastSection.columns[lastSection.columns.length - 1], lastLine = lastColumn.lines[lastColumn.lines.length - 1], lastGlyphGroup = lastLine.divides[lastLine.divides.length - 1].glyphGroup;
-  return lastGlyphGroup[lastGlyphGroup.length - 2];
-}
-__name(lastGlyphInCellPage, "lastGlyphInCellPage");
-const _NodePositionConvertToRectRange = class _NodePositionConvertToRectRange {
-  constructor(_documentOffsetConfig, _docSkeleton) {
-    __publicField(this, "_liquid", new Liquid());
-    this._documentOffsetConfig = _documentOffsetConfig, this._docSkeleton = _docSkeleton;
-  }
-  // eslint-disable-next-line max-lines-per-function
-  getRangePointData(startNodePosition, endNodePosition) {
-    const pointGroup = [], skeletonData = this._docSkeleton.getSkeletonData();
-    if (skeletonData == null)
-      return;
-    const { pages } = skeletonData, { segmentPage: startSegmentPage, page: startPage, pageType } = startNodePosition, { segmentPage: endSegmentPage, page: endPage } = endNodePosition, rectInfo = this._getTableRectRangeInfo(startNodePosition, endNodePosition);
-    if (rectInfo == null)
-      return;
-    const {
-      tableId,
-      startRowIndex: startRow,
-      startColumnIndex: startColumn,
-      endRowIndex: endRow,
-      endColumnIndex: endColumn
-    } = rectInfo;
-    this._liquid.reset();
-    const { pageLayoutType, pageMarginLeft, pageMarginTop } = this._documentOffsetConfig, skipPageIndex = pageType === DocumentSkeletonPageType.BODY || pageType === DocumentSkeletonPageType.CELL ? startPage : startSegmentPage;
-    for (let p2 = 0; p2 < skipPageIndex; p2++) {
-      const page = pages[p2];
-      this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
-    }
-    const endIndex = pageType === DocumentSkeletonPageType.BODY || pageType === DocumentSkeletonPageType.CELL ? endPage : endSegmentPage;
-    for (let p2 = skipPageIndex; p2 <= endIndex; p2++) {
-      const page = pages[p2];
-      this._liquid.translatePagePadding(page);
-      const { skeTables } = page;
-      let table = null;
-      for (const [id, tableSke] of skeTables.entries())
-        id.startsWith(tableId) && (table = tableSke);
-      if (table == null) {
-        this._liquid.restorePagePadding(page), this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
-        continue;
-      }
-      this._liquid.translateSave(), this._liquid.translate(0, table.top);
-      const { x, y } = this._liquid;
-      for (const row of table.rows)
-        if (row.index >= startRow && row.index <= endRow) {
-          const rowStartCell = row.cells[startColumn], rowEndCell = row.cells[endColumn], position = {
-            startX: x + rowStartCell.left,
-            startY: y + row.top,
-            endX: x + rowEndCell.left + rowEndCell.pageWidth,
-            endY: y + row.top + row.height
-          };
-          pointGroup.push(pushToPoints(position));
-        }
-      this._liquid.translateRestore(), this._liquid.restorePagePadding(page), this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
-    }
-    return {
-      pointGroup,
-      startRow,
-      startColumn,
-      endRow,
-      endColumn,
-      tableId
-    };
-  }
-  getNodePositionGroup(anchorNodePosition, focusNodePosition) {
-    const nodePositionGroup = [], compare = compareNodePositionInTable(anchorNodePosition, focusNodePosition), startNodePosition = compare ? anchorNodePosition : focusNodePosition, endNodePosition = compare ? focusNodePosition : anchorNodePosition, { segmentPage } = startNodePosition, rectInfo = this._getTableRectRangeInfo(startNodePosition, endNodePosition);
-    if (rectInfo == null)
-      return;
-    const { tableId, pages, startRowIndex, startColumnIndex, endRowIndex, endColumnIndex } = rectInfo, tables = [];
-    for (const page of pages) {
-      const { skeTables } = page;
-      for (const [id, table] of skeTables.entries())
-        id.startsWith(tableId) && tables.push(table);
-    }
-    if (tables.length === 0)
-      return;
-    for (const table of tables)
-      this._collectPositionGroup(table, nodePositionGroup, startRowIndex, endRowIndex, startColumnIndex, endColumnIndex, segmentPage, compare);
-    const totalColumns = tables[0].rows[0].cells.length;
-    if (startColumnIndex === 0 && endColumnIndex === totalColumns - 1) {
-      const firstPosition = nodePositionGroup[0], lastPosition = nodePositionGroup[nodePositionGroup.length - 1];
-      nodePositionGroup.length = 0, nodePositionGroup.push({
-        anchor: compare ? firstPosition.anchor : lastPosition.anchor,
-        focus: compare ? lastPosition.focus : firstPosition.focus
-      });
-    }
-    return nodePositionGroup;
-  }
-  _collectPositionGroup(table, nodePositionGroup, startRowIndex, endRowIndex, startColumnIndex, endColumnIndex, segmentPage, compare) {
-    for (let i = 0; i < table.rows.length; i++) {
-      const row = table.rows[i];
-      if (row.index < startRowIndex)
-        continue;
-      if (row.index > endRowIndex)
-        break;
-      const startCellInRow = row.cells[startColumnIndex], endCellInRow = row.cells[endColumnIndex], startCellGlyph = firstGlyphInCellPage(startCellInRow), endCellGlyph = lastGlyphInCellPage(endCellInRow);
-      if (startCellGlyph == null || endCellGlyph == null)
-        continue;
-      const startPosition = this._docSkeleton.findPositionByGlyph(startCellGlyph, segmentPage), endPosition = this._docSkeleton.findPositionByGlyph(endCellGlyph, segmentPage);
-      if (startPosition == null || endPosition == null)
-        continue;
-      const anchor = compare ? startPosition : endPosition, focus = compare ? endPosition : startPosition;
-      nodePositionGroup.push({
-        anchor: {
-          ...anchor,
-          isBack: !0
-          // true or false is the same.
-        },
-        focus: {
-          ...focus,
-          isBack: !0
-        }
-      });
-    }
-  }
-  _getTableRectRangeInfo(startNodePosition, endNodePosition) {
-    const skeletonData = this._docSkeleton.getSkeletonData();
-    if (skeletonData == null)
-      return;
-    const { pages } = skeletonData, { path: startPath } = startNodePosition, { path: endPath } = endNodePosition, startCell = getPageFromPath(skeletonData, startPath), endCell = getPageFromPath(skeletonData, endPath);
-    if (startCell == null || endCell == null)
-      return;
-    const tableId = startCell.segmentId, startRow = startCell.parent.index, startColumn = startCell.parent.cells.indexOf(startCell), endRow = (endCell == null ? void 0 : endCell.parent).index, endColumn = (endCell == null ? void 0 : endCell.parent).cells.indexOf(endCell);
-    return {
-      pages,
-      tableId,
-      startCell,
-      endCell,
-      startRowIndex: startRow,
-      startColumnIndex: startColumn,
-      endRowIndex: endRow,
-      endColumnIndex: endColumn
-    };
-  }
-};
-__name(_NodePositionConvertToRectRange, "NodePositionConvertToRectRange");
-let NodePositionConvertToRectRange = _NodePositionConvertToRectRange;
-const TEXT_RANGE_KEY_PREFIX = "__TestSelectionRange__", TEXT_ANCHOR_KEY_PREFIX = "__TestSelectionAnchor__", ID_LENGTH$2 = 6, BLINK_ON = 500, BLINK_OFF = 500, TEXT_RANGE_LAYER_INDEX = 3;
-function getAnchorBounding(pointsGroup) {
-  const points = pointsGroup[0], startPoint = points[0], endPoint = points[2], { x: startX, y: startY } = startPoint, { x: endX, y: endY } = endPoint;
-  return {
-    left: startX,
-    top: startY,
-    width: endX - startX,
-    height: endY - startY
-  };
-}
-__name(getAnchorBounding, "getAnchorBounding");
-function getLineBounding(pointsGroup) {
-  return pointsGroup.map((line) => {
-    let xMin = 1 / 0, xMax = -1 / 0, yMin = 1 / 0, yMax = -1 / 0;
-    return line.forEach((point) => {
-      xMin = Math.min(point.x, xMin), xMax = Math.max(point.x, xMax), yMax = Math.max(point.y, yMax), yMin = Math.min(point.y, yMin);
-    }), {
-      left: xMin,
-      right: xMax,
-      top: yMin,
-      bottom: yMax
-    };
-  });
-}
-__name(getLineBounding, "getLineBounding");
-const _TextRange = class _TextRange {
-  constructor(_scene, _document, _docSkeleton, anchorNodePosition, focusNodePosition, style = NORMAL_TEXT_SELECTION_PLUGIN_STYLE, _segmentId = "", _segmentPage = -1) {
-    __publicField(this, "rangeType", DOC_RANGE_TYPE.TEXT);
-    // Identifies whether the range is the current one, most of which is the last range.
-    __publicField(this, "_current", !1);
-    // The rendered range graphic when collapsed is false
-    __publicField(this, "_rangeShape");
-    // The rendered range graphic when collapsed is true
-    __publicField(this, "_anchorShape");
-    __publicField(this, "_cursorList", []);
-    __publicField(this, "_anchorBlinkTimer", null);
-    this._scene = _scene, this._document = _document, this._docSkeleton = _docSkeleton, this.anchorNodePosition = anchorNodePosition, this.focusNodePosition = focusNodePosition, this.style = style, this._segmentId = _segmentId, this._segmentPage = _segmentPage, this._anchorBlink(), this.refresh();
-  }
-  _anchorBlink() {
-    setTimeout(() => {
-      this._anchorShape && this._anchorShape.visible && this.deactivateStatic();
-    }, BLINK_ON), this._anchorBlinkTimer = setInterval(() => {
-      this._anchorShape && this._anchorShape.visible && (this.activeStatic(), setTimeout(() => {
-        this.deactivateStatic();
-      }, BLINK_ON));
-    }, BLINK_OFF + BLINK_ON);
-  }
-  // 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();
-    if (startOffset == null || body == null)
-      return startOffset;
-    const maxLength = body.dataStream.length - 2;
-    return Math.min(maxLength, startOffset);
-  }
-  // 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();
-    if (endOffset == null || body == null)
-      return endOffset;
-    const maxLength = body.dataStream.length - 2;
-    return Math.min(endOffset, maxLength);
-  }
-  get collapsed() {
-    const { startOffset, endOffset } = this;
-    return startOffset != null && startOffset === endOffset;
-  }
-  get startNodePosition() {
-    if (this.anchorNodePosition == null)
-      return null;
-    if (this.focusNodePosition == null)
-      return this.anchorNodePosition;
-    const { start } = compareNodePosition(this.anchorNodePosition, this.focusNodePosition);
-    return start;
-  }
-  get endNodePosition() {
-    if (this.anchorNodePosition == null)
-      return this.focusNodePosition;
-    if (this.focusNodePosition == null)
-      return null;
-    const { end } = compareNodePosition(this.anchorNodePosition, this.focusNodePosition);
-    return end;
-  }
-  get direction() {
-    const { collapsed, anchorNodePosition, focusNodePosition } = this;
-    return collapsed || anchorNodePosition == null || focusNodePosition == null ? RANGE_DIRECTION.NONE : compareNodePositionLogic(anchorNodePosition, focusNodePosition) ? RANGE_DIRECTION.FORWARD : RANGE_DIRECTION.BACKWARD;
-  }
-  get segmentId() {
-    return this._segmentId;
-  }
-  get segmentPage() {
-    return this._segmentPage;
-  }
-  getAbsolutePosition() {
-    const anchor = this.anchorNodePosition, focus = this.focusNodePosition;
-    if (this._isEmpty())
-      return;
-    const documentOffsetConfig = this._document.getOffsetConfig(), { docsLeft, docsTop } = documentOffsetConfig, convertor = new NodePositionConvertToCursor(documentOffsetConfig, this._docSkeleton);
-    if (this._isCollapsed()) {
-      const { contentBoxPointGroup, cursorList: cursorList2 } = convertor.getRangePointData(anchor, anchor);
-      if (this._setCursorList(cursorList2), contentBoxPointGroup.length === 0)
-        return;
-      const pos2 = getAnchorBounding(contentBoxPointGroup);
-      return {
-        ...pos2,
-        left: pos2.left + docsLeft,
-        top: pos2.top + docsTop
-      };
-    }
-    const { borderBoxPointGroup, cursorList } = convertor.getRangePointData(anchor, focus);
-    if (this._setCursorList(cursorList), borderBoxPointGroup.length === 0)
-      return;
-    const pos = getAnchorBounding(borderBoxPointGroup);
-    return {
-      ...pos,
-      left: pos.left + docsLeft,
-      top: pos.top + docsTop
-    };
-  }
-  getAnchor() {
-    return this._anchorShape;
-  }
-  activeStatic() {
-    var _a28, _b2;
-    (_b2 = this._anchorShape) == null || _b2.setProps({
-      stroke: ((_a28 = this.style) == null ? void 0 : _a28.strokeActive) || getColor(COLORS.black, 1)
-    });
-  }
-  deactivateStatic() {
-    var _a28, _b2;
-    (_b2 = this._anchorShape) == null || _b2.setProps({
-      stroke: ((_a28 = this.style) == null ? void 0 : _a28.stroke) || getColor(COLORS.black, 0)
-    });
-  }
-  isActive() {
-    return this._current === !0;
-  }
-  activate() {
-    this._current = !0;
-  }
-  deactivate() {
-    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);
-  }
-  isIntersection(compareRange) {
-    const { startOffset: activeStart, endOffset: activeEnd } = this, { startOffset: compareStart, endOffset: compareEnd } = compareRange;
-    return activeStart == null || activeEnd == null || compareStart == null || compareEnd == null ? !1 : activeStart <= compareEnd && activeEnd >= compareStart;
-  }
-  // render cursor and selection.
-  refresh() {
-    var _a28, _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())
-      return;
-    const documentOffsetConfig = _document.getOffsetConfig(), { docsLeft, docsTop } = documentOffsetConfig, convertor = new NodePositionConvertToCursor(documentOffsetConfig, _docSkeleton);
-    if (this._isCollapsed()) {
-      const { contentBoxPointGroup, cursorList: cursorList2 } = convertor.getRangePointData(anchor, anchor);
-      if (this._setCursorList(cursorList2), contentBoxPointGroup.length > 0) {
-        const glyphAtCursor = _docSkeleton.findGlyphByPosition(anchor);
-        this._createOrUpdateAnchor(contentBoxPointGroup, docsLeft, docsTop, glyphAtCursor);
-      }
-      return;
-    }
-    const { borderBoxPointGroup, cursorList } = convertor.getRangePointData(anchor, focus);
-    this._setCursorList(cursorList), borderBoxPointGroup.length > 0 && this._createOrUpdateRange(borderBoxPointGroup, docsLeft, docsTop);
-  }
-  _isEmpty() {
-    return this.anchorNodePosition == null && this.focusNodePosition == null;
-  }
-  _isCollapsed() {
-    const anchor = this.anchorNodePosition, focus = this.focusNodePosition;
-    if (anchor != null && focus == null)
-      return !0;
-    if (anchor == null || focus == null)
-      return !1;
-    const keys = Object.keys(NodePositionMap);
-    for (const key of keys) {
-      const startNodeValue = anchor[key], endNodeValue = focus[key];
-      if (startNodeValue !== endNodeValue)
-        return !1;
-    }
-    return anchor.isBack === focus.isBack;
-  }
-  _createOrUpdateRange(pointsGroup, left, top) {
-    var _a28;
-    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),
-      left,
-      top,
-      evented: !1,
-      debounceParentDirty: !1
-    });
-    this._rangeShape = polygon, this._scene.addObject(polygon, TEXT_RANGE_LAYER_INDEX);
-  }
-  _createOrUpdateAnchor(pointsGroup, docsLeft, docsTop, glyph) {
-    var _a28, _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;
-    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;
-    }
-    const anchor = new Rect(TEXT_ANCHOR_KEY_PREFIX + Tools.generateRandomId(ID_LENGTH$2), {
-      left,
-      top,
-      height,
-      strokeWidth: ((_b2 = this.style) == null ? void 0 : _b2.strokeWidth) || 1.5,
-      stroke: ((_c = this.style) == null ? void 0 : _c.strokeActive) || getColor(COLORS.black, 1),
-      evented: !1
-    });
-    isItalic && anchor.skew(-ITALIC_DEGREE, 0), this._anchorShape = anchor, this._scene.addObject(anchor, TEXT_RANGE_LAYER_INDEX);
-  }
-  _setCursorList(cursorList) {
-    cursorList.length !== 0 && (this._cursorList = cursorList);
-  }
-};
-__name(_TextRange, "TextRange");
-let TextRange = _TextRange;
-const RECT_RANGE_KEY_PREFIX = "__DocTableRectRange__", ID_LENGTH$1 = 6;
-function convertPositionsToRectRanges(scene, document2, docSkeleton, anchorNodePosition, focusNodePosition, style = NORMAL_TEXT_SELECTION_PLUGIN_STYLE, segmentId = "", segmentPage = -1) {
-  const documentOffsetConfig = document2.getOffsetConfig(), nodePositionGroup = new NodePositionConvertToRectRange(documentOffsetConfig, docSkeleton).getNodePositionGroup(anchorNodePosition, focusNodePosition);
-  return (nodePositionGroup != null ? nodePositionGroup : []).map((position) => new RectRange(
-    scene,
-    document2,
-    docSkeleton,
-    position.anchor,
-    position.focus,
-    style,
-    segmentId,
-    segmentPage
-  ));
-}
-__name(convertPositionsToRectRanges, "convertPositionsToRectRanges");
-const _RectRange = class _RectRange {
-  constructor(_scene, _document, _docSkeleton, anchorNodePosition, focusNodePosition, style = NORMAL_TEXT_SELECTION_PLUGIN_STYLE, _segmentId = "", _segmentPage = -1) {
-    __publicField(this, "rangeType", DOC_RANGE_TYPE.RECT);
-    // The rendered rect range
-    __publicField(this, "_rangeShape");
-    // Identifies whether the range is the current one, most of which is the last range.
-    __publicField(this, "_current", !1);
-    // Rect Range start row.
-    __publicField(this, "_startRow");
-    // Rect Range start column.
-    __publicField(this, "_startCol");
-    // Rect Range end row.
-    __publicField(this, "_endRow");
-    // Rect Range end column.
-    __publicField(this, "_endCol");
-    // table id in view model.
-    __publicField(this, "_tableId");
-    this._scene = _scene, this._document = _document, this._docSkeleton = _docSkeleton, this.anchorNodePosition = anchorNodePosition, this.focusNodePosition = focusNodePosition, this.style = style, this._segmentId = _segmentId, this._segmentPage = _segmentPage, this.refresh();
-  }
-  get startOffset() {
-    const { startNodePosition } = this;
-    return this._docSkeleton.findCharIndexByPosition(startNodePosition);
-  }
-  get endOffset() {
-    const { endNodePosition } = this;
-    return this._docSkeleton.findCharIndexByPosition(endNodePosition);
-  }
-  get collapsed() {
-    return !1;
-  }
-  get startRow() {
-    return this._startRow;
-  }
-  get startColumn() {
-    return this._startCol;
-  }
-  get endRow() {
-    return this._endRow;
-  }
-  get endColumn() {
-    return this._endCol;
-  }
-  get tableId() {
-    return this._tableId;
-  }
-  get segmentId() {
-    return this._segmentId;
-  }
-  get segmentPage() {
-    return this._segmentPage;
-  }
-  get spanEntireRow() {
-    var _a28;
-    const table = (_a28 = this._docSkeleton.getViewModel().getSnapshot().tableSource) == null ? void 0 : _a28[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;
-    if (table == null)
-      throw new Error("Table is not found.");
-    const { tableRows } = table;
-    return _startRow === 0 && _endRow === tableRows.length - 1;
-  }
-  get spanEntireTable() {
-    return this.spanEntireRow && this.spanEntireColumn;
-  }
-  get startNodePosition() {
-    const { anchorNodePosition, focusNodePosition } = this;
-    return compareNodePositionInTable(anchorNodePosition, focusNodePosition) ? anchorNodePosition : focusNodePosition;
-  }
-  get endNodePosition() {
-    const { anchorNodePosition, focusNodePosition } = this;
-    return compareNodePositionInTable(anchorNodePosition, focusNodePosition) ? focusNodePosition : anchorNodePosition;
-  }
-  get direction() {
-    const { anchorNodePosition, focusNodePosition } = this;
-    return compareNodePositionInTable(anchorNodePosition, focusNodePosition) ? RANGE_DIRECTION.FORWARD : RANGE_DIRECTION.BACKWARD;
-  }
-  isActive() {
-    return this._current === !0;
-  }
-  activate() {
-    this._current = !0;
-  }
-  deactivate() {
-    this._current = !1;
-  }
-  dispose() {
-    var _a28;
-    (_a28 = this._rangeShape) == null || _a28.dispose(), this._rangeShape = null;
-  }
-  isIntersection(compareRange) {
-    const { startRow, startColumn, endRow, endColumn } = this, { startRow: cStartRow, startColumn: cStartColumn, endRow: cEndRow, endColumn: cEndColumn } = compareRange, rect1 = {
-      left: startColumn,
-      top: startRow,
-      right: endColumn,
-      bottom: endRow
-    }, rect2 = {
-      left: cStartColumn,
-      top: cStartRow,
-      right: cEndColumn,
-      bottom: cEndRow
-    };
-    return Rectangle.hasIntersectionBetweenTwoRect(rect1, rect2);
-  }
-  refresh() {
-    var _a28;
-    (_a28 = this._rangeShape) == null || _a28.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;
-    const { pointGroup = [], startRow, endRow, startColumn, endColumn, tableId } = rectInfo;
-    (pointGroup == null ? void 0 : pointGroup.length) > 0 && this._createOrUpdateRange(pointGroup, docsLeft, docsTop), this._updateTableInfo(startRow, endRow, startColumn, endColumn, tableId);
-  }
-  _updateTableInfo(startRow, endRow, startCol, endCol, tableId) {
-    this._startRow = startRow, this._endRow = endRow, this._startCol = startCol, this._endCol = endCol, this._tableId = tableId;
-  }
-  _createOrUpdateRange(pointsGroup, left, top) {
-    var _a28;
-    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),
-      left,
-      top,
-      evented: !1,
-      debounceParentDirty: !1
-    });
-    this._rangeShape = polygon, this._scene.addObject(polygon, TEXT_RANGE_LAYER_INDEX);
-  }
-};
-__name(_RectRange, "RectRange");
-let RectRange = _RectRange;
-function getTextRangeFromCharIndex(startOffset, endOffset, scene, document2, skeleton, style, segmentId, segmentPage, startIsBack = !0, endIsBack = !0) {
-  const startNodePosition = skeleton.findNodePositionByCharIndex(startOffset, startIsBack, segmentId, segmentPage), endNodePosition = skeleton.findNodePositionByCharIndex(endOffset, endIsBack, segmentId, segmentPage);
-  if (!(startNodePosition == null || endNodePosition == null))
-    return new TextRange(scene, document2, skeleton, startNodePosition, endNodePosition, style, segmentId, segmentPage);
-}
-__name(getTextRangeFromCharIndex, "getTextRangeFromCharIndex");
-function getRectRangeFromCharIndex(startOffset, endOffset, scene, document2, skeleton, style, segmentId, segmentPage) {
-  const startNodePosition = skeleton.findNodePositionByCharIndex(startOffset, !0, segmentId, segmentPage), endNodePosition = skeleton.findNodePositionByCharIndex(endOffset, !0, segmentId, segmentPage);
-  if (!(startNodePosition == null || endNodePosition == null))
-    return new RectRange(scene, document2, skeleton, startNodePosition, endNodePosition, style, segmentId, segmentPage);
-}
-__name(getRectRangeFromCharIndex, "getRectRangeFromCharIndex");
-function getRangeListFromCharIndex(startOffset, endOffset, scene, document2, skeleton, style, segmentId, segmentPage) {
-  const startNodePosition = skeleton.findNodePositionByCharIndex(startOffset, !0, segmentId, segmentPage), endNodePosition = skeleton.findNodePositionByCharIndex(endOffset, !0, segmentId, segmentPage);
-  if (!(startNodePosition == null || endNodePosition == null))
-    return getRangeListFromSelection(
-      startNodePosition,
-      endNodePosition,
-      scene,
-      document2,
-      skeleton,
-      style,
-      segmentId,
-      segmentPage
-    );
-}
-__name(getRangeListFromCharIndex, "getRangeListFromCharIndex");
-function getRangeListFromSelection(anchorPosition, focusPosition, scene, document2, skeleton, style, segmentId, segmentPage) {
-  const textRanges = [], rectRanges = [], rangeParams = [scene, document2, skeleton, anchorPosition, focusPosition, style, segmentId, segmentPage];
-  if (isInSameTableCell(anchorPosition, focusPosition))
-    return textRanges.push(new TextRange(...rangeParams)), {
-      textRanges,
-      rectRanges
-    };
-  if (isValidRectRange(anchorPosition, focusPosition)) {
-    const ranges = convertPositionsToRectRanges(
-      ...rangeParams
-    );
-    return rectRanges.push(...ranges), {
-      textRanges,
-      rectRanges
-    };
-  }
-  const viewModel = skeleton.getViewModel().getSelfOrHeaderFooterViewModel(segmentId), anchorOffset = skeleton.findCharIndexByPosition(anchorPosition), focusOffset = skeleton.findCharIndexByPosition(focusPosition);
-  if (anchorOffset == null || focusOffset == null)
-    return;
-  const direction = anchorOffset <= focusOffset ? RANGE_DIRECTION.FORWARD : RANGE_DIRECTION.BACKWARD, startOffset = Math.min(anchorOffset, focusOffset), endOffset = Math.max(anchorOffset, focusOffset);
-  let start = startOffset, end = endOffset;
-  for (const section of viewModel.children)
-    for (const paragraph of section.children) {
-      const { startIndex, endIndex, children } = paragraph, table = children[0];
-      let endInTable = !1;
-      if (table) {
-        const { startIndex: tableStart, endIndex: tableEnd, children: children2 } = table;
-        let tableStartPosition = null, tableEndPosition = null;
-        const startRow = children2.find((row) => row.startIndex <= startOffset && row.endIndex >= startOffset), endRow = children2.find((row) => row.startIndex <= endOffset && row.endIndex >= endOffset);
-        if (startOffset > tableStart && startOffset < tableEnd)
-          tableStartPosition = skeleton.findNodePositionByCharIndex(startRow.startIndex + 2, !0, segmentId, segmentPage), tableEndPosition = skeleton.findNodePositionByCharIndex(tableEnd - 4, !0, segmentId, segmentPage), start = tableEnd + 1;
-        else if (endOffset > tableStart && endOffset < tableEnd)
-          tableStartPosition = skeleton.findNodePositionByCharIndex(tableStart + 3, !0, segmentId, segmentPage), tableEndPosition = skeleton.findNodePositionByCharIndex(endRow.endIndex - 3, !0, segmentId, segmentPage), end = tableStart - 1, endInTable = !0;
-        else if (tableStart > startOffset && tableEnd < endOffset) {
-          if (tableStartPosition = skeleton.findNodePositionByCharIndex(tableStart + 3, !0, segmentId, segmentPage), tableEndPosition = skeleton.findNodePositionByCharIndex(tableEnd - 4, !0, segmentId, segmentPage), start <= tableStart - 1) {
-            const sp = skeleton.findNodePositionByCharIndex(start, !0, segmentId, segmentPage), ep = skeleton.findNodePositionByCharIndex(tableStart - 1, !1, segmentId, segmentPage), ap = direction === RANGE_DIRECTION.FORWARD ? sp : ep, fp = direction === RANGE_DIRECTION.FORWARD ? ep : sp;
-            textRanges.push(new TextRange(scene, document2, skeleton, ap, fp, style, segmentId, segmentPage));
-          }
-          start = tableEnd + 1;
-        }
-        if (tableStartPosition && tableEndPosition) {
-          const ap = direction === RANGE_DIRECTION.FORWARD ? tableStartPosition : tableEndPosition, fp = direction === RANGE_DIRECTION.FORWARD ? tableEndPosition : tableStartPosition;
-          rectRanges.push(...convertPositionsToRectRanges(
-            scene,
-            document2,
-            skeleton,
-            ap,
-            fp,
-            style,
-            segmentId,
-            segmentPage
-          ));
-        }
-      }
-      if (end >= startIndex && end <= endIndex || endInTable) {
-        const sp = skeleton.findNodePositionByCharIndex(start, !0, segmentId, segmentPage), ep = skeleton.findNodePositionByCharIndex(end, !endInTable, segmentId, segmentPage), ap = direction === RANGE_DIRECTION.FORWARD ? sp : ep, fp = direction === RANGE_DIRECTION.FORWARD ? ep : sp;
-        if (rectRanges.length && Tools.diffValue(ap, fp))
-          continue;
-        textRanges.push(new TextRange(scene, document2, skeleton, ap, fp, style, segmentId, segmentPage));
-      }
-    }
-  return {
-    textRanges,
-    rectRanges
-  };
-}
-__name(getRangeListFromSelection, "getRangeListFromSelection");
-function getCanvasOffsetByEngine(engine) {
-  const canvas = engine == null ? void 0 : engine.getCanvasElement();
-  if (!canvas)
-    return {
-      left: 0,
-      top: 0
-    };
-  const { top, left } = getOffsetRectForDom(canvas);
-  return {
-    left,
-    top
-  };
-}
-__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;
-  if (line == null || column == null)
-    return;
-  const { paragraphIndex } = line, lines = column.lines.filter((line2) => line2.paragraphIndex === paragraphIndex);
-  let nodeIndex = -1, content = "", hasFound = !1;
-  for (const line2 of lines)
-    for (const divide of line2.divides)
-      for (const glyph of divide.glyphGroup)
-        hasFound || (nodeIndex += glyph.count), glyph === node && (hasFound = !0), content += glyph.count > 0 ? glyph.content : "";
-  return {
-    st: lines[0].st,
-    ed: paragraphIndex,
-    content,
-    nodeIndex
-  };
-}
-__name(getParagraphInfoByGlyph, "getParagraphInfoByGlyph");
-function serializeTextRange(textRange) {
-  const { startOffset, endOffset, collapsed, rangeType, startNodePosition, endNodePosition, direction, segmentId, segmentPage } = textRange;
-  return {
-    startOffset,
-    endOffset,
-    collapsed,
-    rangeType,
-    startNodePosition,
-    endNodePosition,
-    direction,
-    segmentId,
-    segmentPage,
-    isActive: textRange.isActive()
-  };
-}
-__name(serializeTextRange, "serializeTextRange");
-function serializeRectRange(rectRange) {
-  const serializedTextRange = serializeTextRange(rectRange), {
-    startRow,
-    startColumn,
-    endRow,
-    endColumn,
-    tableId,
-    spanEntireRow,
-    spanEntireColumn,
-    spanEntireTable
-  } = rectRange;
-  return {
-    ...serializedTextRange,
-    startRow,
-    startColumn,
-    endRow,
-    endColumn,
-    tableId,
-    spanEntireRow,
-    spanEntireColumn,
-    spanEntireTable
-  };
-}
-__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--)
-    (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;
-let DocSelectionRenderService = (_a2 = class extends RxDisposable {
-  constructor(_context, _layoutService, _logService, _univerInstanceService, _docSkeletonManagerService) {
-    super();
-    __publicField(this, "_onInputBefore$", new Subject());
-    __publicField(this, "onInputBefore$", this._onInputBefore$.asObservable());
-    __publicField(this, "_onKeydown$", new Subject());
-    __publicField(this, "onKeydown$", this._onKeydown$.asObservable());
-    __publicField(this, "_onInput$", new Subject());
-    __publicField(this, "onInput$", this._onInput$.asObservable());
-    __publicField(this, "_onCompositionstart$", new BehaviorSubject(null));
-    __publicField(this, "onCompositionstart$", this._onCompositionstart$.asObservable());
-    __publicField(this, "_onCompositionupdate$", new BehaviorSubject(null));
-    __publicField(this, "onCompositionupdate$", this._onCompositionupdate$.asObservable());
-    __publicField(this, "_onCompositionend$", new BehaviorSubject(null));
-    __publicField(this, "onCompositionend$", this._onCompositionend$.asObservable());
-    __publicField(this, "_onSelectionStart$", new BehaviorSubject(null));
-    __publicField(this, "onSelectionStart$", this._onSelectionStart$.asObservable());
-    __publicField(this, "_onPaste$", new Subject());
-    __publicField(this, "onPaste$", this._onPaste$.asObservable());
-    __publicField(this, "_textSelectionInner$", new BehaviorSubject(null));
-    __publicField(this, "textSelectionInner$", this._textSelectionInner$.asObservable());
-    __publicField(this, "_onFocus$", new Subject());
-    __publicField(this, "onFocus$", this._onFocus$.asObservable());
-    __publicField(this, "_onBlur$", new Subject());
-    __publicField(this, "onBlur$", this._onBlur$.asObservable());
-    __publicField(this, "_onPointerDown$", new Subject());
-    __publicField(this, "onPointerDown$", this._onPointerDown$.asObservable());
-    __publicField(this, "_container");
-    __publicField(this, "_inputParent");
-    __publicField(this, "_input");
-    __publicField(this, "_scrollTimers", []);
-    __publicField(this, "_rangeList", []);
-    // Use to cache range list in moving.
-    __publicField(this, "_rangeListCache", []);
-    // Rect range list.
-    __publicField(this, "_rectRangeList", []);
-    // Use to cache rect range list in moving.
-    __publicField(this, "_rectRangeListCache", []);
-    __publicField(this, "_anchorNodePosition", null);
-    __publicField(this, "_focusNodePosition", null);
-    __publicField(this, "_currentSegmentId", "");
-    __publicField(this, "_currentSegmentPage", -1);
-    __publicField(this, "_selectionStyle", NORMAL_TEXT_SELECTION_PLUGIN_STYLE);
-    __publicField(this, "_viewPortObserverMap", /* @__PURE__ */ new Map());
-    __publicField(this, "_isIMEInputApply", !1);
-    __publicField(this, "_scenePointerMoveSubs", []);
-    __publicField(this, "_scenePointerUpSubs", []);
-    __publicField(this, "_editorFocusing", !0);
-    // When the user switches editors, whether to clear the doc ranges.
-    __publicField(this, "_reserveRanges", !1);
-    this._context = _context, this._layoutService = _layoutService, this._logService = _logService, this._univerInstanceService = _univerInstanceService, this._docSkeletonManagerService = _docSkeletonManagerService, this._initDOM(), this._registerContainer(), this._setSystemHighlightColorToStyle(), this._listenCurrentUnitChange();
-  }
-  _listenCurrentUnitChange() {
-    this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC).pipe(takeUntil(this.dispose$)).subscribe((documentModel) => {
-      if (documentModel == null)
-        return;
-      documentModel.getUnitId() !== this._context.unitId && !this._reserveRanges && this.removeAllRanges();
-    });
-  }
-  get activeViewPort() {
-    return this._context.scene.getViewports()[0];
-  }
-  setSegment(id) {
-    this._currentSegmentId = id;
-  }
-  getSegment() {
-    return this._currentSegmentId;
-  }
-  setSegmentPage(pageIndex) {
-    this._currentSegmentPage = pageIndex;
-  }
-  getSegmentPage() {
-    return this._currentSegmentPage;
-  }
-  setReserveRangesStatus(status) {
-    this._reserveRanges = status;
-  }
-  _setRangeStyle(style = NORMAL_TEXT_SELECTION_PLUGIN_STYLE) {
-    this._selectionStyle = style;
-  }
-  // eslint-disable-next-line max-lines-per-function
-  addDocRanges(ranges, isEditing = !0, options) {
-    const {
-      _currentSegmentId: segmentId,
-      _currentSegmentPage: segmentPage,
-      _selectionStyle: style
-    } = this, { scene, mainComponent } = this._context, document2 = mainComponent, docSkeleton = this._docSkeletonManagerService.getSkeleton();
-    for (const range of ranges) {
-      const { startOffset, endOffset, rangeType, startNodePosition, endNodePosition } = range;
-      if (rangeType === DOC_RANGE_TYPE.RECT) {
-        const rectRange = getRectRangeFromCharIndex(
-          startOffset,
-          endOffset,
-          scene,
-          document2,
-          docSkeleton,
-          style,
-          segmentId,
-          segmentPage
-        );
-        rectRange && this._addRectRanges([rectRange]);
-      } else if (rangeType === DOC_RANGE_TYPE.TEXT) {
-        let textRange = null;
-        startNodePosition && endNodePosition ? textRange = getTextRangeFromCharIndex(
-          startNodePosition.isBack ? startOffset : startOffset - 1,
-          endNodePosition.isBack ? endOffset : endOffset - 1,
-          scene,
-          document2,
-          docSkeleton,
-          style,
-          segmentId,
-          segmentPage,
-          startNodePosition.isBack,
-          endNodePosition.isBack
-        ) : textRange = getTextRangeFromCharIndex(
-          startOffset,
-          endOffset,
-          scene,
-          document2,
-          docSkeleton,
-          style,
-          segmentId,
-          segmentPage
-        ), textRange && this._addTextRange(textRange);
-      } else {
-        const rangeList = getRangeListFromCharIndex(
-          startOffset,
-          endOffset,
-          scene,
-          document2,
-          docSkeleton,
-          style,
-          segmentId,
-          segmentPage
-        );
-        if (rangeList == null)
-          continue;
-        const { textRanges, rectRanges } = rangeList;
-        for (const textRange of textRanges)
-          this._addTextRange(textRange);
-        this._addRectRanges(rectRanges);
-      }
-    }
-    this._textSelectionInner$.next({
-      textRanges: this._getAllTextRanges(),
-      rectRanges: this._getAllRectRanges(),
-      segmentId,
-      segmentPage,
-      style,
-      isEditing,
-      options
-    }), this._updateInputPosition(options == null ? void 0 : options.forceFocus);
-  }
-  setCursorManually(evtOffsetX, evtOffsetY) {
-    const startNode = this._findNodeByCoord(evtOffsetX, evtOffsetY, {
-      strict: !0,
-      segmentId: this._currentSegmentId,
-      segmentPage: this._currentSegmentPage
-    }), position = this._getNodePosition(startNode);
-    if (position == null) {
-      this._removeAllRanges();
-      return;
-    }
-    (startNode == null ? void 0 : startNode.node.streamType) === DataStreamTreeTokenType.PARAGRAPH && (position.isBack = !0), this._createTextRangeByAnchorPosition(position), this._textSelectionInner$.next({
-      textRanges: this._getAllTextRanges(),
-      rectRanges: this._getAllRectRanges(),
-      segmentId: this._currentSegmentId,
-      segmentPage: this._currentSegmentPage,
-      style: this._selectionStyle,
-      isEditing: !1
-    });
-  }
-  // Sync canvas selection to dom selection.
-  sync() {
-    this._updateInputPosition();
-  }
-  /**
-   * @deprecated
-   */
-  activate(x, y, force = !1) {
-    const isFocusing = this._input === document.activeElement || document.activeElement === document.body || document.activeElement === null;
-    this._container.style.left = `${x}px`, this._container.style.top = `${y}px`, this._container.style.zIndex = "1000", (isFocusing || force) && this.focus();
-  }
-  hasFocus() {
-    return document.activeElement === this._input;
-  }
-  focus() {
-    this._editorFocusing && this._input.focus();
-  }
-  blur() {
-    this._input.blur();
-  }
-  /**
-   * @deprecated
-   */
-  focusEditor() {
-    this._editorFocusing = !0, this.focus();
-  }
-  /**
-   * @deprecated
-   */
-  blurEditor() {
-    this._editorFocusing = !1, this.blur();
-  }
-  // FIXME: for editor cell editor we don't need to blur the input element
-  /**
-   * @deprecated
-   */
-  deactivate() {
-    this._container.style.left = "0px", this._container.style.top = "0px";
-  }
-  // Handler double click.
-  __handleDblClick(evt) {
-    const { offsetX: evtOffsetX, offsetY: evtOffsetY } = evt, startNode = this._findNodeByCoord(evtOffsetX, evtOffsetY, {
-      strict: !1,
-      segmentId: this._currentSegmentId,
-      segmentPage: this._currentSegmentPage
-    });
-    if (startNode == null || startNode.node == null)
-      return;
-    const paragraphInfo = getParagraphInfoByGlyph(startNode.node);
-    if (paragraphInfo == null)
-      return;
-    const { content, st, nodeIndex } = paragraphInfo;
-    if (nodeIndex === -1 || Intl.Segmenter == null)
-      return;
-    const segments = new Intl.Segmenter(void 0, { granularity: "word" }).segment(content);
-    let startOffset = Number.NEGATIVE_INFINITY, endOffset = Number.NEGATIVE_INFINITY;
-    for (const { segment, index, isWordLike } of segments)
-      if (index <= nodeIndex && nodeIndex < index + segment.length && isWordLike) {
-        startOffset = index + st, endOffset = index + st + segment.length;
-        break;
+        unitId,
+        actions: [],
+        textRanges
       }
-    if (Number.isFinite(startOffset) && Number.isFinite(endOffset)) {
-      this.removeAllRanges();
-      const textRanges = [
-        {
-          startOffset,
-          endOffset
-        }
-      ];
-      this.addDocRanges(textRanges, !1, { forceFocus: !0 });
+    };
+    options && (doMutation.params.options = options);
+    const rawActions = [], jsonX = JSONX.getInstance();
+    if (!Tools.diffValue(body, prevBody)) {
+      const actions = jsonX.replaceOp(["body"], prevBody, body);
+      actions != null && rawActions.push(actions);
     }
-  }
-  __handleTripleClick(evt) {
-    const { offsetX: evtOffsetX, offsetY: evtOffsetY } = evt, startNode = this._findNodeByCoord(evtOffsetX, evtOffsetY, {
-      strict: !1,
-      segmentId: this._currentSegmentId,
-      segmentPage: this._currentSegmentPage
-    });
-    if (startNode == null || startNode.node == null)
-      return;
-    const paragraphInfo = getParagraphInfoByGlyph(startNode.node);
-    if (paragraphInfo == null)
-      return;
-    this.removeAllRanges();
-    const { st, ed } = paragraphInfo, textRanges = [
-      {
-        startOffset: st,
-        endOffset: ed
-      }
-    ];
-    this.addDocRanges(textRanges, !1, { forceFocus: !0 });
-  }
-  // Handle pointer down.
-  // eslint-disable-next-line max-lines-per-function, complexity
-  __onPointDown(evt) {
-    var _a28, _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,
-      segmentId: this._currentSegmentId,
-      segmentPage: this._currentSegmentPage
-    }), position = this._getNodePosition(startNode);
-    if (position == null || startNode == null) {
-      this._removeAllRanges();
-      return;
+    if (!Tools.diffValue(tableSource, prevTableSource)) {
+      const actions = jsonX.replaceOp(["tableSource"], prevTableSource, tableSource);
+      actions != null && rawActions.push(actions);
     }
-    (startNode == null ? void 0 : startNode.node.streamType) === DataStreamTreeTokenType.PARAGRAPH && (position.isBack = !0);
-    const docSelection = this._textSelectionInner$.value;
-    if (startNode && evt.button === 2 && docSelection) {
-      const nodeCharIndex = skeleton.findCharIndexByPosition(position);
-      if (typeof nodeCharIndex == "number" && docSelection.textRanges.some((textRange) => textRange.startOffset <= nodeCharIndex && textRange.endOffset > nodeCharIndex) || typeof nodeCharIndex == "number" && docSelection.rectRanges.some((rectRange) => rectRange.startOffset <= nodeCharIndex && rectRange.endOffset >= nodeCharIndex))
-        return;
+    if (!Tools.diffValue(footers, prevFooters)) {
+      const actions = jsonX.replaceOp(["footers"], prevFooters, footers);
+      actions != null && rawActions.push(actions);
     }
-    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();
-    let preMoveOffsetX = evtOffsetX, preMoveOffsetY = evtOffsetY;
-    this._scenePointerMoveSubs.push(scene.onPointerMove$.subscribeEvent((moveEvt) => {
-      const { offsetX: moveOffsetX, offsetY: moveOffsetY } = moveEvt;
-      scene.setCursor(CURSOR_TYPE.TEXT), !(Math.sqrt((moveOffsetX - preMoveOffsetX) ** 2 + (moveOffsetY - preMoveOffsetY) ** 2) < 3) && (this._moving(moveOffsetX, moveOffsetY), scrollTimer.scrolling(moveOffsetX, moveOffsetY, () => {
-        this._moving(moveOffsetX, moveOffsetY);
-      }), preMoveOffsetX = moveOffsetX, preMoveOffsetY = moveOffsetY);
-    })), this._scenePointerUpSubs.push(scene.onPointerUp$.subscribeEvent(() => {
-      if ([...this._scenePointerMoveSubs, ...this._scenePointerUpSubs].forEach((e) => {
-        e.unsubscribe();
-      }), scene.enableObjectsEvent(), this._anchorNodePosition && !this._focusNodePosition) {
-        if (evt.ctrlKey) {
-          this._disposeScrollTimers();
-          return;
-        }
-        const textRange = new TextRange(scene, mainComponent, skeleton, this._anchorNodePosition, void 0, this._selectionStyle, this._currentSegmentId, this._currentSegmentPage);
-        this._addTextRange(textRange);
-      } else if (this._anchorNodePosition && this._focusNodePosition) {
-        for (const textRange of this._rangeListCache)
-          evt.ctrlKey ? textRange.collapsed ? textRange.dispose() : this._addTextRange(textRange) : this._addTextRange(textRange);
-        this._addRectRanges(this._rectRangeListCache), this._rangeListCache = [], this._rectRangeListCache = [];
-      }
-      this._anchorNodePosition = null, this._focusNodePosition = null;
-      const selectionInfo = {
-        textRanges: this._getAllTextRanges(),
-        rectRanges: this._getAllRectRanges(),
-        segmentId: this._currentSegmentId,
-        segmentPage: this._currentSegmentPage,
-        style: this._selectionStyle,
-        isEditing: !1
-      };
-      this._textSelectionInner$.next(selectionInfo), this._disposeScrollTimers(), this._updateInputPosition(!0);
-    }));
-  }
-  removeAllRanges() {
-    this._removeAllRanges(), this.deactivate();
-  }
-  getActiveTextRange() {
-    return this._getActiveRangeInstance();
-  }
-  _disposeScrollTimers() {
-    this._scrollTimers.forEach((timer) => {
-      timer == null || timer.dispose();
-    }), this._scrollTimers = [];
-  }
-  _setSystemHighlightColorToStyle() {
-    const { r: r2, g, b, a } = getSystemHighlightColor(), style = {
-      strokeWidth: 1.5,
-      stroke: "rgba(0, 0, 0, 0)",
-      strokeActive: "rgba(0, 0, 0, 1)",
-      fill: `rgba(${r2}, ${g}, ${b}, ${a != null ? a : 0.3})`
-    };
-    this._setRangeStyle(style);
-  }
-  _getAllTextRanges() {
-    return this._rangeList.map(serializeTextRange);
-  }
-  _getAllRectRanges() {
-    return this._rectRangeList.map(serializeRectRange);
-  }
-  _getActiveRange() {
-    const activeRange = this._rangeList.find((range) => range.isActive());
-    if (activeRange == null)
-      return null;
-    const { startOffset, endOffset } = activeRange;
-    return startOffset == null || endOffset == null ? null : serializeTextRange(activeRange);
-  }
-  _getActiveRangeInstance() {
-    return this._rangeList.find((range) => range.isActive());
-  }
-  dispose() {
-    super.dispose(), this._detachEvent(), this._removeAllRanges(), this._container.remove();
-  }
-  _initDOM() {
-    const { unitId } = this._context, container = document.createElement("div");
-    container.style.position = "fixed", container.style.left = "0px", container.style.top = "0px", container.id = `univer-doc-selection-container-${unitId}`;
-    const inputParent = document.createElement("div"), inputDom = document.createElement("div");
-    inputParent.appendChild(inputDom), container.appendChild(inputParent), this._container = container, this._inputParent = inputParent, this._input = inputDom, this._initInput(), this._initInputEvents(), document.body.appendChild(container);
-  }
-  _registerContainer() {
-    this.disposeWithMe(
-      // the content editable div should be regarded as part of the applications container
-      this._layoutService.registerContainerElement(this._container)
-    );
-  }
-  _initInput() {
-    this._inputParent.style.cssText = `
-            position:absolute;
-            height:1px;
-            width:1px;
-            overflow: hidden;
-        `, this._input.contentEditable = "true", this._input.classList.add("univer-editor"), this._input.style.cssText = `
-            position: absolute;
-            overflow: hidden;
-            opacity: 1;
-            background: #000;
-            color: transparent;
-            outline: none;
-            z-index: -2;
-            caret-color: transparent;
-            white-space: pre-wrap;
-            user-select: text;
-        `;
-  }
-  _getNodePosition(node) {
-    if (node == null)
-      return;
-    const { node: glyph, ratioX, segmentPage } = node, position = this._docSkeletonManagerService.getSkeleton().findPositionByGlyph(glyph, segmentPage);
-    if (position == null)
-      return;
-    const isBack = ratioX < 0.5;
-    return {
-      ...position,
-      isBack
-    };
-  }
-  _interactTextRanges(textRanges) {
-    const newTextRanges = [];
-    for (const range of this._rangeList) {
-      if (textRanges.some((textRange) => textRange.isIntersection(range))) {
-        range.dispose();
-        continue;
-      }
-      newTextRanges.push(range);
+    if (!Tools.diffValue(headers, prevHeaders)) {
+      const actions = jsonX.replaceOp(["headers"], prevHeaders, headers);
+      actions != null && rawActions.push(actions);
     }
-    this._rangeList = newTextRanges;
-  }
-  _interactRectRanges(rectRanges) {
-    const newRanges = [];
-    for (const range of this._rectRangeList) {
-      if (rectRanges.some((rectRange) => rectRange.isIntersection(range))) {
-        range.dispose();
-        continue;
-      }
-      newRanges.push(range);
+    if (!Tools.diffValue(lists, prevLists)) {
+      const actions = jsonX.replaceOp(["lists"], prevLists, lists);
+      actions != null && rawActions.push(actions);
     }
-    this._rectRangeList = newRanges;
-  }
-  _removeCollapsedTextRange() {
-    const oldTextRanges = this._rangeList;
-    this._rangeList = [];
-    for (const textRange of oldTextRanges)
-      textRange.collapsed ? textRange.dispose() : this._rangeList.push(textRange);
-  }
-  _removeAllRanges() {
-    this._removeAllTextRanges(), this._removeAllRectRanges();
-  }
-  _removeAllCacheRanges() {
-    this._rangeListCache.forEach((range) => {
-      range.dispose();
-    }), this._rectRangeListCache.forEach((range) => {
-      range.dispose();
-    }), this._rangeListCache = [], this._rectRangeListCache = [];
-  }
-  _removeAllTextRanges() {
-    this._rangeList.forEach((range) => {
-      range.dispose();
-    }), this._rangeList = [];
-  }
-  _removeAllRectRanges() {
-    this._rectRangeList.forEach((range) => {
-      range.dispose();
-    }), this._rectRangeList = [];
-  }
-  _removeAllCollapsedTextRanges() {
-    for (const range of this._rangeList)
-      range.collapsed && range.dispose();
-  }
-  _deactivateAllTextRanges() {
-    this._rangeList.forEach((range) => {
-      range.deactivate();
-    });
-  }
-  _deactivateAllRectRanges() {
-    this._rectRangeList.forEach((range) => {
-      range.deactivate();
-    });
-  }
-  _addTextRangesToCache(textRanges) {
-    this._rangeListCache.push(...textRanges);
-  }
-  _addTextRange(textRange) {
-    this._deactivateAllTextRanges(), textRange.activate(), this._rangeList.push(textRange);
-  }
-  _addRectRangesToCache(rectRanges) {
-    this._rectRangeListCache.push(...rectRanges);
-  }
-  _addRectRanges(rectRanges) {
-    rectRanges.length !== 0 && (this._deactivateAllRectRanges(), rectRanges[rectRanges.length - 1].activate(), this._rectRangeList.push(...rectRanges));
-  }
-  _createTextRangeByAnchorPosition(position) {
-    this._removeAllRanges();
-    const { scene, mainComponent } = this._context, skeleton = this._docSkeletonManagerService.getSkeleton(), lastRange = new TextRange(scene, mainComponent, skeleton, position, void 0, this._selectionStyle, this._currentSegmentId, this._currentSegmentPage);
-    this._addTextRange(lastRange);
-  }
-  _updateActiveRangePosition(position) {
-    const activeTextRange = this._getActiveRangeInstance();
-    if (activeTextRange == null || activeTextRange.anchorNodePosition == null) {
-      this._logService.error(
-        "[DocSelectionRenderService] _updateActiveRangeFocusPosition: active range has no anchor"
-      );
-      return;
+    if (!Tools.diffValue(drawings, prevDrawings)) {
+      const actions = jsonX.replaceOp(["drawings"], prevDrawings, drawings);
+      actions != null && rawActions.push(actions);
     }
-    this._removeAllRanges(), this._anchorNodePosition = activeTextRange.anchorNodePosition, this._focusNodePosition = position;
-    const { scene, mainComponent } = this._context, skeleton = this._docSkeletonManagerService.getSkeleton(), { _anchorNodePosition, _focusNodePosition, _selectionStyle, _currentSegmentId, _currentSegmentPage } = this;
-    if (_anchorNodePosition == null || _focusNodePosition == null || mainComponent == null)
-      return;
-    const ranges = getRangeListFromSelection(
-      _anchorNodePosition,
-      _focusNodePosition,
-      scene,
-      mainComponent,
-      skeleton,
-      _selectionStyle,
-      _currentSegmentId,
-      _currentSegmentPage
-    );
-    if (ranges == null)
-      return;
-    const { textRanges, rectRanges } = ranges;
-    this._addTextRangesToCache(textRanges), this._addRectRangesToCache(rectRanges), this.deactivate();
-  }
-  _isEmpty() {
-    return this._rangeList.length === 0 && this._rectRangeList.length === 0;
-  }
-  _getCanvasOffset() {
-    var _a28;
-    const engine = (_a28 = this._context.scene) == null ? void 0 : _a28.getEngine();
-    return getCanvasOffsetByEngine(engine);
-  }
-  _updateInputPosition(forceFocus = !1) {
-    const activeRangeInstance = this._getActiveRangeInstance(), anchor = activeRangeInstance == null ? void 0 : activeRangeInstance.getAnchor();
-    if (!anchor || anchor && !anchor.visible || this.activeViewPort == null) {
-      this.focus();
-      return;
+    if (!Tools.diffValue(drawingsOrder, prevDrawingsOrder)) {
+      const actions = jsonX.replaceOp(["drawingsOrder"], prevDrawingsOrder, drawingsOrder);
+      actions != null && rawActions.push(actions);
     }
-    const { left, top } = anchor, absoluteCoord = this.activeViewPort.getAbsoluteVector(Vector2.FromArray([left, top])), { x, y } = absoluteCoord;
-    let { left: canvasLeft, top: canvasTop } = this._getCanvasOffset();
-    canvasLeft += x, canvasTop += y, this.activate(canvasLeft, canvasTop, forceFocus);
-  }
-  _moving(moveOffsetX, moveOffsetY) {
-    var _a28, _b2;
-    const focusNode = this._findNodeByCoord(moveOffsetX, moveOffsetY, {
-      strict: !0,
-      segmentId: this._currentSegmentId,
-      segmentPage: this._currentSegmentPage
-    }), focusNodePosition = this._getNodePosition(focusNode);
-    if (!focusNodePosition || focusNode == null)
-      return;
-    const divide = focusNode == null ? void 0 : focusNode.node.parent, nextGlyph = divide == null ? void 0 : divide.glyphGroup[divide.glyphGroup.indexOf(focusNode.node) + 1];
-    (focusNode == null ? void 0 : focusNode.node.streamType) === DataStreamTreeTokenType.PARAGRAPH && (nextGlyph == null ? void 0 : nextGlyph.streamType) === DataStreamTreeTokenType.SECTION_BREAK && (focusNodePosition.isBack = !0), this._focusNodePosition = focusNodePosition, this._removeAllCacheRanges();
-    const { _anchorNodePosition, _focusNodePosition, _selectionStyle, _currentSegmentId, _currentSegmentPage } = this, { scene, mainComponent } = this._context, skeleton = this._docSkeletonManagerService.getSkeleton();
-    if (_anchorNodePosition == null || _focusNodePosition == null || mainComponent == null)
-      return;
-    const ranges = getRangeListFromSelection(
-      _anchorNodePosition,
-      _focusNodePosition,
-      scene,
-      mainComponent,
-      skeleton,
-      _selectionStyle,
-      _currentSegmentId,
-      _currentSegmentPage
-    );
-    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();
-  }
-  __attachScrollEvent() {
-    const viewport = this.activeViewPort;
-    if (!viewport)
-      return;
-    const { unitId } = this._context;
-    if (this._viewPortObserverMap.has(unitId))
-      return;
-    const scrollBefore = viewport.onScrollAfter$.subscribeEvent((param) => {
-      if (!param.viewport)
-        return;
-      const activeRangeInstance = this._getActiveRangeInstance();
-      activeRangeInstance == null || activeRangeInstance.activeStatic();
-    }), scrollStop = viewport.onScrollEnd$.subscribeEvent((param) => {
-      const viewport2 = param.viewport;
-      if (!viewport2)
-        return;
-      const bounds = viewport2.getBounding(), activeRangeInstance = this._getActiveRangeInstance(), anchor = activeRangeInstance == null ? void 0 : activeRangeInstance.getAnchor();
-      if (!(!anchor || anchor && !anchor.visible)) {
-        if (bounds) {
-          const { left, top, right, bottom } = bounds.viewBound;
-          if (anchor.left < left || anchor.left > right || anchor.top < top || anchor.top > bottom) {
-            activeRangeInstance == null || activeRangeInstance.deactivateStatic();
-            return;
-          }
-        }
-        this._updateInputPosition();
-      }
-    });
-    this._viewPortObserverMap.set(unitId, {
-      scrollBefore,
-      scrollStop
-    });
-  }
-  // FIXME: listeners here are not correctly disposed
-  // eslint-disable-next-line max-lines-per-function
-  _initInputEvents() {
-    this.disposeWithMe(
-      fromEvent(this._input, "keydown").subscribe((e) => {
-        this._isIMEInputApply || this._eventHandle(e, (config) => {
-          this._onKeydown$.next(config);
-        });
-      })
-    ), this.disposeWithMe(
-      fromEvent(this._input, "input").subscribe((e) => {
-        if (!(e.inputType === "historyUndo" || e.inputType === "historyRedo")) {
-          if (this._rectRangeList.length > 0)
-            return e.stopPropagation(), e.preventDefault();
-          this._isIMEInputApply || this._eventHandle(e, (config) => {
-            this._onInputBefore$.next(config), this._onInput$.next(config);
-          });
-        }
-      })
-    ), this.disposeWithMe(
-      fromEvent(this._input, "compositionstart").subscribe((e) => {
-        if (this._rectRangeList.length > 0)
-          return e.stopPropagation(), e.preventDefault();
-        this._isIMEInputApply = !0, this._eventHandle(e, (config) => {
-          this._onCompositionstart$.next(config);
-        });
-      })
-    ), this.disposeWithMe(
-      fromEvent(this._input, "compositionend").subscribe((e) => {
-        this._isIMEInputApply = !1, this._eventHandle(e, (config) => {
-          this._onCompositionend$.next(config);
-        });
-      })
-    ), this.disposeWithMe(
-      fromEvent(this._input, "compositionupdate").subscribe((e) => {
-        this._eventHandle(e, (config) => {
-          this._onInputBefore$.next(config), this._onCompositionupdate$.next(config);
-        });
-      })
-    ), this.disposeWithMe(
-      fromEvent(this._input, "paste").subscribe((e) => {
-        this._eventHandle(e, (config) => {
-          this._onPaste$.next(config);
-        });
-      })
-    ), this.disposeWithMe(
-      fromEvent(this._input, "focus").subscribe((e) => {
-        this._eventHandle(e, (config) => {
-          this._onFocus$.next(config);
-        });
-      })
-    ), this.disposeWithMe(
-      fromEvent(this._input, "blur").subscribe((e) => {
-        this._eventHandle(e, (config) => {
-          this._onBlur$.next(config);
-        });
-      })
-    );
-  }
-  _eventHandle(e, func) {
-    const content = this._input.textContent || "";
-    this._input.innerHTML = "";
-    const activeRange = this._getActiveRange(), rangeList = this._getAllTextRanges();
-    func({
-      event: e,
-      content,
-      activeRange,
-      rangeList
-    });
-  }
-  _getTransformCoordForDocumentOffset(evtOffsetX, evtOffsetY) {
-    const document2 = this._context.mainComponent, { documentTransform } = document2.getOffsetConfig();
-    if (this.activeViewPort == null || documentTransform == null)
-      return;
-    const originCoord = this.activeViewPort.transformVector2SceneCoord(Vector2.FromArray([evtOffsetX, evtOffsetY]));
-    if (originCoord)
-      return documentTransform.clone().invert().applyPoint(originCoord);
-  }
-  _findNodeByCoord(evtOffsetX, evtOffsetY, restrictions) {
-    const coord = this._getTransformCoordForDocumentOffset(evtOffsetX, evtOffsetY);
-    if (coord == null)
-      return;
-    const document2 = this._context.mainComponent, skeleton = this._docSkeletonManagerService.getSkeleton(), {
-      pageLayoutType = PageLayoutType.VERTICAL,
-      pageMarginLeft,
-      pageMarginTop
-    } = document2.getOffsetConfig();
-    return skeleton.findNodeByCoord(
-      coord,
-      pageLayoutType,
-      pageMarginLeft,
-      pageMarginTop,
-      restrictions
-    );
-  }
-  _detachEvent() {
-    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);
+    return doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+  }, "handler")
+}, ReplaceContentCommand = {
+  id: "doc.command-replace-content",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    const { unitId, body, textRanges, segmentId = "", options } = params, univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), docSelectionManagerService = accessor.get(DocSelectionManagerService), docDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC), prevBody = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId).getSnapshot().body;
+    if (docDataModel == null || prevBody == null)
+      return !1;
+    const doMutation = getMutationParams(unitId, segmentId, docDataModel, prevBody, body);
+    return doMutation.params.textRanges = textRanges, options && (doMutation.params.options = options), doMutation.params.actions == null && textRanges ? (docSelectionManagerService.replaceDocRanges(textRanges, {
+      unitId,
+      subUnitId: unitId
+    }, !1), !0) : !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+  }, "handler")
+}, CoverContentCommand = {
+  id: "doc.command-cover-content",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    const { unitId, body, segmentId = "" } = params, univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), docDatModel = univerInstanceService.getUniverDocInstance(unitId), prevBody = docDatModel == null ? void 0 : docDatModel.getSnapshot().body;
+    if (docDatModel == null || prevBody == null)
+      return !1;
+    const doMutation = getMutationParams(unitId, segmentId, docDatModel, prevBody, body);
+    return doMutation.params.noNeedSetTextRange = !0, doMutation.params.noHistory = !0, commandService.syncExecuteCommand(
+      doMutation.id,
+      doMutation.params
+    ), undoRedoService.clearUndoRedo(unitId), !0;
+  }, "handler")
+};
+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
+  }), body.dataStream.length > 0 && textX.push({
+    t: TextXActionType.INSERT,
+    body,
+    len: body.dataStream.length
+  });
+  const path = getRichTextEditPath(docDatModel, segmentId);
+  return jsonX.editOp(textX.serialize(), path);
+}
+__name(getMutationActions, "getMutationActions");
+function getMutationParams(unitId, segmentId, docDatModel, prevBody, body) {
+  const doMutation = {
+    id: RichTextEditingMutation.id,
+    params: {
+      unitId,
+      actions: [],
+      textRanges: []
+    }
+  }, actions = getMutationActions(segmentId, docDatModel, prevBody, body);
+  return doMutation.params.actions = actions, doMutation;
+}
+__name(getMutationParams, "getMutationParams");
+CommandType.COMMAND;
 const _Editor = class _Editor extends Disposable {
   constructor(_param, _univerInstanceService, _docSelectionManagerService, _commandService, _undoRedoService) {
     super();
@@ -2599,11 +737,11 @@ const _Editor = class _Editor extends Disposable {
 };
 __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",
@@ -2701,7 +839,7 @@ let EditorService = (_b = class extends Disposable {
     const editor = this.getEditor(editorUnitId);
     if (!editor)
       return !1;
-    editor.setFocus(!0), this._contextService.setContextValue(EDITOR_ACTIVATED, !0), this._contextService.setContextValue(FOCUSING_EDITOR_STANDALONE, !0), this._contextService.setContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, editor.isSingle()), this._spreadsheetFocusState || this.singleSelection(!!editor.isSingleChoice()), this._focusStyle$.next(editorUnitId), this.setFocusId(editorUnitId);
+    editor.setFocus(!0), this._contextService.setContextValue(EDITOR_ACTIVATED, !0), isInternalEditorID(editorUnitId) || (this._contextService.setContextValue(FOCUSING_EDITOR_STANDALONE, !0), this._contextService.setContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, editor.isSingle())), this._spreadsheetFocusState || this.singleSelection(!!editor.isSingleChoice()), this._focusStyle$.next(editorUnitId), this.setFocusId(editorUnitId);
   }
   /** @deprecated */
   singleSelection(state) {
@@ -2731,8 +869,8 @@ let EditorService = (_b = class extends Disposable {
     this._univerInstanceService.setCurrentUnitForType(editorUnitId);
     const valueCount = editor.getValue().length;
     this.focusStyle(editorUnitId), this._focus$.next({
-      startOffset: valueCount - 2,
-      endOffset: valueCount - 2
+      startOffset: valueCount,
+      endOffset: valueCount
     });
   }
   /** @deprecated */
@@ -2896,14 +1034,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 +1071,7 @@ function genSnapShotByValue(id = "", value = "") {
     },
     tableSource: {},
     documentStyle: {
-      documentFlavor: DocumentFlavor.MODERN
+      documentFlavor: DocumentFlavor.UNSPECIFIED
     }
   };
 }
@@ -3196,17 +1334,17 @@ var element = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width:
 });
 TodoList.displayName = "TodoList";
 function r(e) {
-  var t, f2, n2 = "";
+  var t, f3, n2 = "";
   if (typeof e == "string" || typeof e == "number") n2 += e;
   else if (typeof e == "object") if (Array.isArray(e)) {
     var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f2 = r(e[t])) && (n2 && (n2 += " "), n2 += f2);
-  } else for (f2 in e) e[f2] && (n2 && (n2 += " "), n2 += f2);
+    for (t = 0; t < o; t++) e[t] && (f3 = r(e[t])) && (n2 && (n2 += " "), n2 += f3);
+  } else for (f3 in e) e[f3] && (n2 && (n2 += " "), n2 += f3);
   return n2;
 }
 __name(r, "r");
 function clsx() {
-  for (var e, t, f2 = 0, n2 = "", o = arguments.length; f2 < o; f2++) (e = arguments[f2]) && (t = r(e)) && (n2 && (n2 += " "), n2 += t);
+  for (var e, t, f3 = 0, n2 = "", o = arguments.length; f3 < o; f3++) (e = arguments[f3]) && (t = r(e)) && (n2 && (n2 += " "), n2 += t);
   return n2;
 }
 __name(clsx, "clsx");
@@ -3436,7 +1574,7 @@ 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) => {
+  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 _a28;
     setOptions((prev) => ({
       ...prev,
@@ -3486,12 +1624,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;
@@ -3633,11 +1768,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) {
@@ -3690,15 +1825,28 @@ function checkCreateHeaderFooterType(viewModel, editArea, segmentPage) {
   }
 }
 __name(checkCreateHeaderFooterType, "checkCreateHeaderFooterType");
-var _a3;
-let DocHeaderFooterController = (_a3 = class extends Disposable {
+var _a2;
+let DocHeaderFooterController = (_a2 = class extends Disposable {
   constructor(_context, _commandService, _editorService, _instanceSrv, _renderManagerService, _docSkeletonManagerService, _docSelectionRenderService, _localeService, _componentManager) {
     super();
     __publicField(this, "_loadedMap", /* @__PURE__ */ new WeakSet());
     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;
@@ -3709,15 +1857,15 @@ let DocHeaderFooterController = (_a3 = class extends Disposable {
     docObject == null || docObject.document == null || this._loadedMap.has(docObject.document) || (this._initialMain(unitId), this._loadedMap.add(docObject.document));
   }
   _initialMain(unitId) {
-    const docObject = neoGetDocObject(this._context), { document: document2 } = docObject;
-    this.disposeWithMe(document2.onDblclick$.subscribeEvent(async (evt) => {
-      if (this._isEditorReadOnly(unitId))
+    const docObject = neoGetDocObject(this._context), { document } = docObject;
+    this.disposeWithMe(document.onDblclick$.subscribeEvent(async (evt) => {
+      if (this._isEditorReadOnly(unitId) || !this._isTraditionalMode())
         return;
       const { offsetX, offsetY } = evt, {
         pageLayoutType = PageLayoutType.VERTICAL,
         pageMarginLeft,
         pageMarginTop
-      } = document2.getOffsetConfig(), coord = this._getTransformCoordForDocumentOffset(offsetX, offsetY);
+      } = document.getOffsetConfig(), coord = this._getTransformCoordForDocumentOffset(offsetX, offsetY);
       if (coord == null)
         return;
       const viewModel = this._docSkeletonManagerService.getViewModel(), skeleton = this._docSkeletonManagerService.getSkeleton(), preEditArea = viewModel.getEditArea(), { editArea, pageNumber } = skeleton.findEditAreaByCoord(
@@ -3743,7 +1891,7 @@ let DocHeaderFooterController = (_a3 = class extends Disposable {
     }));
   }
   _getTransformCoordForDocumentOffset(evtOffsetX, evtOffsetY) {
-    const docObject = neoGetDocObject(this._context), { document: document2, scene } = docObject, { documentTransform } = document2.getOffsetConfig(), activeViewport = scene.getViewports()[0];
+    const docObject = neoGetDocObject(this._context), { document, scene } = docObject, { documentTransform } = document.getOffsetConfig(), activeViewport = scene.getViewports()[0];
     if (activeViewport == null)
       return;
     const originCoord = activeViewport.transformVector2SceneCoord(Vector2.FromArray([evtOffsetX, evtOffsetY]));
@@ -3756,7 +1904,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 +1972,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))
+}, __name(_a2, "DocHeaderFooterController"), _a2);
+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",
@@ -3926,12 +2077,12 @@ function createHeaderFooterAction(segmentId, createType, documentStyle, actions)
     default:
       throw new Error(`Unknown header footer type: ${createType}`);
   }
-  for (const [k2, id] of [[key, firstSegmentId], [pairKey, secondSegmentId]])
-    if (documentStyle[k2] != null) {
-      const replaceAction = jsonX.replaceOp(["documentStyle", k2], documentStyle[k2], id);
+  for (const [k3, id] of [[key, firstSegmentId], [pairKey, secondSegmentId]])
+    if (documentStyle[k3] != null) {
+      const replaceAction = jsonX.replaceOp(["documentStyle", k3], documentStyle[k3], id);
       actions.push(replaceAction);
     } else {
-      const insertAction2 = jsonX.insertOp(["documentStyle", k2], id);
+      const insertAction2 = jsonX.insertOp(["documentStyle", k3], id);
       actions.push(insertAction2);
     }
   return actions;
@@ -3979,6 +2130,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 _a28;
+    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(), (_a28 = renderObject.mainComponent) == null || _a28.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,
@@ -4099,7 +2261,44 @@ const TabShortCut = {
   staticParameters: {
     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"), _a3;
+let DocMenuStyleService = (_a3 = 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(_a3, "DocMenuStyleService"), _a3);
+DocMenuStyleService = __decorateClass$o([
+  __decorateParam$o(0, Inject(DocSelectionManagerService))
+], DocMenuStyleService);
 function handleInlineFormat(preCommandId, params, commandService) {
   return commandService.executeCommand(SetInlineFormatCommand.id, {
     preCommandId,
@@ -4245,10 +2444,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 +2500,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 +2522,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);
@@ -4545,8 +2750,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,
@@ -4643,8 +2847,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 +2866,6 @@ const AlignOperationCommand = {
             }
           ]
         },
-        segmentId,
         coverType: UpdateDocsAttributeType.REPLACE
       }), memoryCursor.moveCursorTo(startIndex + 1);
     }
@@ -4817,7 +3019,7 @@ function genEmptyTable(rowCount, colCount) {
   const paragraphs = [], sectionBreaks = [];
   for (let i = 0; i < rowCount; i++) {
     dataStream += DataStreamTreeTokenType.TABLE_ROW_START;
-    for (let j = 0; j < colCount; j++)
+    for (let j2 = 0; j2 < colCount; j2++)
       dataStream += `${DataStreamTreeTokenType.TABLE_CELL_START}\r
 ${DataStreamTreeTokenType.TABLE_CELL_END}`, paragraphs.push({
         startIndex: dataStream.length - 3,
@@ -5350,8 +3552,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 +3561,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);
@@ -5383,9 +3582,8 @@ 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));
@@ -5417,13 +3615,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 +3629,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 +3648,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);
         }
       }
@@ -5510,133 +3699,6 @@ const INNER_CUT_COMMAND_ID = "doc.command.inner-cut", CutContentCommand = {
     };
     return doMutation.params.actions = getCutActionsFromDocRanges(selections, rectRanges, docDataModel, viewModel, segmentId), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
   }, "handler")
-};
-var DeleteDirection = /* @__PURE__ */ ((DeleteDirection2) => (DeleteDirection2[DeleteDirection2.LEFT = 0] = "LEFT", DeleteDirection2[DeleteDirection2.RIGHT = 1] = "RIGHT", DeleteDirection2))(DeleteDirection || {});
-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;
-    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)
-      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 = [
-      {
-        startOffset: startOffset + cursorMove,
-        endOffset: startOffset + cursorMove,
-        style: activeRange == null ? void 0 : activeRange.style,
-        collapsed
-      }
-    ], doMutation = {
-      id: RichTextEditingMutation.id,
-      params: {
-        unitId,
-        actions: [],
-        textRanges,
-        debounce: !0
-      }
-    }, textX = new TextX(), jsonX = JSONX.getInstance();
-    if (collapsed)
-      startOffset > 0 && textX.push({
-        t: TextXActionType.RETAIN,
-        len: startOffset,
-        segmentId
-      });
-    else {
-      const { dos, retain } = BuildTextUtils.selection.getDeleteActions(actualRange, segmentId, 0, originBody);
-      textX.push(...dos), doMutation.params.textRanges = [{
-        startOffset: startOffset + cursorMove + retain,
-        endOffset: startOffset + cursorMove + retain,
-        collapsed
-      }];
-    }
-    textX.push({
-      t: TextXActionType.INSERT,
-      body,
-      len: body.dataStream.length,
-      line: 0,
-      segmentId
-    });
-    const path = getRichTextEditPath(docDataModel, segmentId);
-    return doMutation.params.actions = jsonX.editOp(textX.serialize(), path), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-  }, "handler")
-}, DeleteCommand = {
-  id: "doc.command.delete-text",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    var _a28;
-    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 = [];
-    for (let i = 0; i < len; i++)
-      deleteIndexes.push(start + i);
-    toDeleteRanges == null || toDeleteRanges.forEach((range2) => {
-      deleteIndexes.push(range2.startIndex, range2.endIndex);
-    }), deleteIndexes.sort((pre, aft) => pre - aft);
-    const deleteStart = deleteIndexes[0], doMutation = {
-      id: RichTextEditingMutation.id,
-      params: {
-        unitId,
-        actions: [],
-        textRanges: [{
-          startOffset: deleteStart,
-          endOffset: deleteStart,
-          collapsed: !0
-        }],
-        debounce: !0
-      }
-    }, textX = new TextX(), jsonX = JSONX.getInstance();
-    let cursor = 0;
-    for (let i = 0; i < deleteIndexes.length; i++) {
-      const deleteIndex = deleteIndexes[i];
-      deleteIndex - cursor > 0 && textX.push({
-        t: TextXActionType.RETAIN,
-        len: deleteIndex - cursor,
-        segmentId
-      }), textX.push({
-        t: TextXActionType.DELETE,
-        len: 1,
-        segmentId,
-        line: 0
-      }), cursor = deleteIndex + 1;
-    }
-    const path = getRichTextEditPath(docDataModel, segmentId);
-    return doMutation.params.actions = jsonX.editOp(textX.serialize(), path), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-  }, "handler")
-}, UpdateCommand = {
-  id: "doc.command.update-text",
-  type: CommandType.COMMAND,
-  handler: /* @__PURE__ */ __name(async (accessor, params) => {
-    const { range, segmentId, updateBody, coverType, unitId, textRanges } = params, commandService = accessor.get(ICommandService), docDataModel = accessor.get(IUniverInstanceService).getCurrentUniverDocInstance();
-    if (docDataModel == null)
-      return !1;
-    const doMutation = {
-      id: RichTextEditingMutation.id,
-      params: {
-        unitId,
-        actions: [],
-        textRanges
-      }
-    }, textX = new TextX(), jsonX = JSONX.getInstance(), { startOffset, endOffset } = range;
-    textX.push({
-      t: TextXActionType.RETAIN,
-      len: startOffset,
-      segmentId
-    }), textX.push({
-      t: TextXActionType.RETAIN,
-      body: updateBody,
-      len: endOffset - startOffset,
-      segmentId,
-      coverType
-    });
-    const path = getRichTextEditPath(docDataModel, segmentId);
-    return doMutation.params.actions = jsonX.editOp(textX.serialize(), path), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-  }, "handler")
 }, getDeleteSelection = BuildTextUtils.selection.getDeleteSelection, DeleteCustomBlockCommand = {
   id: "doc.command.delete-custom-block",
   type: CommandType.COMMAND,
@@ -5662,13 +3724,10 @@ 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));
@@ -5683,13 +3742,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 +3774,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);
@@ -5758,7 +3831,7 @@ const DeleteLeftCommand = {
     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)
@@ -5986,43 +4059,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) {
@@ -6780,6 +4816,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 _a28, _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 = (_a28 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a28.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((l3) => l3.paragraphIndex === (line == null ? void 0 : line.paragraphIndex) && l3.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 +4899,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 +4948,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 +4998,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 +5055,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));
@@ -7028,16 +5101,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);
@@ -7071,45 +5141,47 @@ const BreakLineCommand = {
   id: "doc.command.break-line",
   type: CommandType.COMMAND,
   handler: /* @__PURE__ */ __name(async (accessor) => {
-    var _a28, _b2, _c, _d;
+    var _a28, _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);
     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,
@@ -7143,17 +5215,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 +5242,7 @@ const BreakLineCommand = {
           }
         ]
       },
-      len: tableDataStream.length,
-      line: 0,
-      segmentId
+      len: tableDataStream.length
     });
     const path = getRichTextEditPath(docDataModel, segmentId);
     rawActions.push(jsonX.editOp(textX.serialize(), path));
@@ -7235,8 +5302,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 +5321,6 @@ const BreakLineCommand = {
             }
           ]
         },
-        segmentId,
         coverType: UpdateDocsAttributeType.REPLACE
       }), memoryCursor.moveCursorTo(startIndex + 1);
     }
@@ -7767,6 +5832,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 _a28;
+      if (unitId == null) {
+        subscriber.next(!0);
+        return;
+      }
+      const docDataModel = univerInstanceService.getUnit(unitId);
+      if (docDataModel == null) {
+        subscriber.next(!0);
+        return;
+      }
+      return subscriber.next(((_a28 = docDataModel.getSnapshot().documentStyle) == null ? void 0 : _a28.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) => {
@@ -8112,6 +6209,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)
   };
 }
@@ -8324,6 +6422,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 _a28;
+      const subscription = commandService.onCommandExecuted((c) => {
+        var _a29;
+        if (c.id === SwitchDocModeCommand.id) {
+          const instance2 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
+          subscriber.next(((_a29 = instance2 == null ? void 0 : instance2.getSnapshot()) == null ? void 0 : _a29.documentStyle.documentFlavor) === DocumentFlavor.MODERN);
+        }
+      }), instance = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
+      return subscriber.next(((_a28 = instance == null ? void 0 : instance.getSnapshot()) == null ? void 0 : _a28.documentStyle.documentFlavor) === DocumentFlavor.MODERN), () => subscription.dispose();
+    })
+  };
+}
+__name(DocSwitchModeMenuItemFactory, "DocSwitchModeMenuItemFactory");
 function ResetBackgroundColorMenuItemFactory(accessor) {
   return {
     id: ResetInlineFormatTextBackgroundColorCommand.id,
@@ -8363,13 +6483,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 _a28, _b2;
+  const univerInstanceService = accessor.get(IUniverInstanceService), textSelectionService = accessor.get(DocSelectionManagerService), docMenuStyleService = accessor.get(DocMenuStyleService), docDataModel = univerInstanceService.getCurrentUniverDocInstance(), activeTextRange = textSelectionService.getActiveTextRange(), cacheStyle = (_a28 = docMenuStyleService.getStyleCache()) != null ? _a28 : {};
   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,7 +6502,13 @@ function getFontStyleAtCursor(accessor) {
       break;
     }
   }
-  return textRun;
+  return {
+    ...textRun,
+    ts: {
+      ...textRun == null ? void 0 : textRun.ts,
+      ...cacheStyle
+    }
+  };
 }
 __name(getFontStyleAtCursor, "getFontStyleAtCursor");
 function getParagraphStyleAtCursor(accessor) {
@@ -8486,6 +6616,10 @@ const menuSchema = {
     [OpenHeaderFooterPanelCommand.id]: {
       order: 9,
       menuItemFactory: HeaderFooterMenuItemFactory
+    },
+    [SwitchDocModeCommand.id]: {
+      order: 10,
+      menuItemFactory: DocSwitchModeMenuItemFactory
     }
   },
   [ContextMenuPosition.MAIN_AREA]: {
@@ -8687,8 +6821,8 @@ var __defProp$j = Object.defineProperty, __getOwnPropDesc$j = Object.getOwnPrope
   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();
+  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;
@@ -8709,8 +6843,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 +6865,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);
@@ -8766,9 +6898,11 @@ let DocRenderController = (_a8 = class extends RxDisposable {
     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);
@@ -8776,13 +6910,12 @@ let DocRenderController = (_a8 = class extends RxDisposable {
   }
 }, __name(_a8, "DocRenderController"), _a8);
 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 +6973,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 _a28, _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 = (_a28 = renderManagerService.getRenderById(unitId)) == null ? void 0 : _a28.with(DocIMEInputManagerService), docDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
     if (docDataModel == null || imeInputManagerService == null)
       return !1;
     const previousActiveRange = imeInputManagerService.getActiveRange();
@@ -8866,9 +6999,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 +7010,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;
@@ -9192,8 +7325,8 @@ function findLineBeforeAndAfterTable(table) {
       lineAfterTable
     };
   const { st, ed } = table, pages = tablePage.type === DocumentSkeletonPageType.CELL ? [tablePage] : tablePage.parent.pages;
-  return lineIterator(pages, (l2) => {
-    l2.st === ed + 1 ? lineAfterTable = l2 : l2.ed === st - 1 && (lineBeforeTable = l2);
+  return lineIterator(pages, (l3) => {
+    l3.st === ed + 1 ? lineAfterTable = l3 : l3.ed === st - 1 && (lineBeforeTable = l3);
   }), {
     lineBeforeTable,
     lineAfterTable
@@ -9727,10 +7860,10 @@ function transformOffset2Bound(offsetX, offsetY, scene) {
 }
 __name(transformOffset2Bound, "transformOffset2Bound");
 const calcDocRangePositions$1 = /* @__PURE__ */ __name((range, currentRender) => {
-  const { scene, mainComponent, engine } = currentRender, skeleton = currentRender.with(DocSkeletonManagerService).getSkeleton(), startPosition = skeleton.findNodePositionByCharIndex(range.startOffset, !1, range.segmentId, range.segmentPage), endPosition = skeleton.findNodePositionByCharIndex(range.endOffset, !1, range.segmentId, range.segmentPage), document2 = mainComponent;
+  const { scene, mainComponent, engine } = currentRender, skeleton = currentRender.with(DocSkeletonManagerService).getSkeleton(), startPosition = skeleton.findNodePositionByCharIndex(range.startOffset, !1, range.segmentId, range.segmentPage), endPosition = skeleton.findNodePositionByCharIndex(range.endOffset, !1, range.segmentId, range.segmentPage), document = mainComponent;
   if (!endPosition || !startPosition)
     return;
-  const documentOffsetConfig = document2.getOffsetConfig(), { docsLeft, docsTop } = documentOffsetConfig, canvasElement = engine.getCanvasElement(), canvasClientRect = canvasElement.getBoundingClientRect(), widthOfCanvas = pxToNum(canvasElement.style.width), { top, left, width } = canvasClientRect, scaleAdjust = width / widthOfCanvas, { scaleX, scaleY } = scene.getAncestorScale(), convertor = new NodePositionConvertToCursor(documentOffsetConfig, skeleton), { borderBoxPointGroup } = convertor.getRangePointData(startPosition, endPosition);
+  const documentOffsetConfig = document.getOffsetConfig(), { docsLeft, docsTop } = documentOffsetConfig, canvasElement = engine.getCanvasElement(), canvasClientRect = canvasElement.getBoundingClientRect(), widthOfCanvas = pxToNum(canvasElement.style.width), { top, left, width } = canvasClientRect, scaleAdjust = width / widthOfCanvas, { scaleX, scaleY } = scene.getAncestorScale(), convertor = new NodePositionConvertToCursor(documentOffsetConfig, skeleton), { borderBoxPointGroup } = convertor.getRangePointData(startPosition, endPosition);
   return getLineBounding(borderBoxPointGroup).map((bound) => transformBound2OffsetBound(bound, scene)).map((i) => ({
     left: (i.left + docsLeft * scaleX) * scaleAdjust + left,
     right: (i.right + docsLeft * scaleX) * scaleAdjust + left,
@@ -9954,7 +8087,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 }) => {
@@ -10097,8 +8230,8 @@ let DocChecklistRenderController = (_a16 = class extends Disposable {
       })
     );
   }
-  _getTransformCoordForDocumentOffset(document2, viewport, evtOffsetX, evtOffsetY) {
-    const { documentTransform } = document2.getOffsetConfig(), originCoord = viewport.transformVector2SceneCoord(Vector2.FromArray([evtOffsetX, evtOffsetY]));
+  _getTransformCoordForDocumentOffset(document, viewport, evtOffsetX, evtOffsetY) {
+    const { documentTransform } = document.getOffsetConfig(), originCoord = viewport.transformVector2SceneCoord(Vector2.FromArray([evtOffsetX, evtOffsetY]));
     if (originCoord)
       return documentTransform.clone().invert().applyPoint(originCoord);
   }
@@ -10243,7 +8376,7 @@ let DocEditorBridgeController = (_a19 = class extends Disposable {
     ), this.disposeWithMe(
       this._docSelectionRenderService.onBlur$.subscribe(() => {
         const { unitId } = this._context, editor = this._editorService.getEditor(unitId), focusEditor = this._editorService.getFocusEditor();
-        editor == null || editor.isSheetEditor() || focusEditor && focusEditor.getEditorId() === unitId || this._editorService.blur();
+        editor == null || editor.isSheetEditor() || focusEditor && focusEditor.getEditorId() === unitId || unitId.includes("range_selector") || unitId.includes("embedding_formula_editor") || this._editorService.blur();
       })
     );
   }
@@ -10323,14 +8456,14 @@ var __defProp$7 = Object.defineProperty, __getOwnPropDesc$7 = Object.getOwnPrope
   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) {
+  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;
@@ -10359,18 +8492,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,
@@ -10382,11 +8511,10 @@ let DocIMEInputController = (_a20 = class extends Disposable {
   }
 }, __name(_a20, "DocIMEInputController"), _a20);
 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--)
@@ -10394,10 +8522,10 @@ var __defProp$6 = Object.defineProperty, __getOwnPropDesc$6 = Object.getOwnPrope
   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) {
+  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;
@@ -10408,16 +8536,24 @@ let DocInputController = (_a21 = class extends Disposable {
   }
   _initialNormalInput() {
     this._onInputSubscription = this._docSelectionRenderService.onInput$.subscribe(async (config) => {
+      var _a28;
       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((_a28 = originBody == null ? void 0 : originBody.textRuns) != null ? _a28 : [], 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,
@@ -10429,7 +8565,8 @@ let DocInputController = (_a21 = class extends Disposable {
 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) {
@@ -10441,8 +8578,8 @@ const _DocPageLayoutService = class _DocPageLayoutService extends Disposable {
     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
@@ -10502,7 +8639,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));
       })
     );
   }
@@ -10515,12 +8652,12 @@ let DocSelectionRenderController = (_a23 = class extends Disposable {
   }
   // eslint-disable-next-line max-lines-per-function
   _initialMain(unitId) {
-    const docObject = neoGetDocObject(this._context), { document: document2, scene } = docObject;
-    this.disposeWithMe(document2.onPointerEnter$.subscribeEvent(() => {
-      this._isEditorReadOnly(unitId) || (document2.cursor = CURSOR_TYPE.TEXT);
-    })), this.disposeWithMe(document2.onPointerLeave$.subscribeEvent(() => {
-      document2.cursor = CURSOR_TYPE.DEFAULT, scene.resetCursor();
-    })), this.disposeWithMe(document2.onPointerDown$.subscribeEvent((evt, state) => {
+    const docObject = neoGetDocObject(this._context), { document, scene } = docObject;
+    this.disposeWithMe(document.onPointerEnter$.subscribeEvent(() => {
+      this._isEditorReadOnly(unitId) || (document.cursor = CURSOR_TYPE.TEXT);
+    })), this.disposeWithMe(document.onPointerLeave$.subscribeEvent(() => {
+      document.cursor = CURSOR_TYPE.DEFAULT, scene.resetCursor();
+    })), this.disposeWithMe(document.onPointerDown$.subscribeEvent((evt, state) => {
       if (this._isEditorReadOnly(unitId))
         return;
       const docDataModel = this._instanceSrv.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
@@ -10531,7 +8668,7 @@ let DocSelectionRenderController = (_a23 = class extends Disposable {
           pageLayoutType = PageLayoutType.VERTICAL,
           pageMarginLeft,
           pageMarginTop
-        } = document2.getOffsetConfig(), { editArea } = skeleton.findEditAreaByCoord(
+        } = document.getOffsetConfig(), { editArea } = skeleton.findEditAreaByCoord(
           coord,
           pageLayoutType,
           pageMarginLeft,
@@ -10547,14 +8684,14 @@ let DocSelectionRenderController = (_a23 = class extends Disposable {
         }, 0);
       }
       evt.button !== 2 && state.stopPropagation();
-    })), this.disposeWithMe(document2.onDblclick$.subscribeEvent((evt) => {
+    })), this.disposeWithMe(document.onDblclick$.subscribeEvent((evt) => {
       this._isEditorReadOnly(unitId) || this._docSelectionRenderService.__handleDblClick(evt);
-    })), this.disposeWithMe(document2.onTripleClick$.subscribeEvent((evt) => {
+    })), this.disposeWithMe(document.onTripleClick$.subscribeEvent((evt) => {
       this._isEditorReadOnly(unitId) || this._docSelectionRenderService.__handleTripleClick(evt);
     }));
   }
   _getTransformCoordForDocumentOffset(evtOffsetX, evtOffsetY) {
-    const docObject = neoGetDocObject(this._context), { document: document2, scene } = docObject, { documentTransform } = document2.getOffsetConfig(), activeViewport = scene.getViewports()[0];
+    const docObject = neoGetDocObject(this._context), { document, scene } = docObject, { documentTransform } = document.getOffsetConfig(), activeViewport = scene.getViewports()[0];
     if (activeViewport == null)
       return;
     const originCoord = activeViewport.transformVector2SceneCoord(Vector2.FromArray([evtOffsetX, evtOffsetY]));
@@ -10625,6 +8762,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,12 +8794,19 @@ 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;
     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(), (_a28 = docObject.scene.getTransformer()) == null || _a28.clearSelectedObjects();
   }
 }, __name(_a24, "DocZoomRenderController"), _a24);
 DocZoomRenderController = __decorateClass$3([
@@ -10691,6 +8838,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 _a28, _b2;
+    return {
+      history: (_a28 = this._historyStateCache.get(unitId)) != null ? _a28 : [],
+      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");
   }
@@ -10712,7 +8869,7 @@ let DocStateChangeManagerService = (_a25 = class extends RxDisposable {
       var _a28;
       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 = (_a28 = this._renderManagerService.getRenderById(isSync ? syncer : changeStateInfo.unitId)) == null ? void 0 : _a28.with(DocIMEInputManagerService);
       if (imeInputManagerService != null) {
         if (isCompositionEnd) {
           const historyParams = imeInputManagerService.fetchComposedUndoRedoMutationParams();
@@ -10798,7 +8955,9 @@ 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;
+}, "__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 _a26;
 let DocsRenderService = (_a26 = class extends RxDisposable {
   constructor(_instanceSrv, _renderManagerService) {
     super(), this._instanceSrv = _instanceSrv, this._renderManagerService = _renderManagerService, this._init();
@@ -10807,8 +8966,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 _a28;
+    const unitId = doc.getUnitId(), workbookId = (_a28 = this._instanceSrv.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC)) == null ? void 0 : _a28.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);
@@ -10965,6 +9127,7 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
       DocTableDeleteRowsCommand,
       DocTableDeleteColumnsCommand,
       DocTableDeleteTableCommand,
+      CloseHeaderFooterCommand,
       DocTableTabCommand,
       TabCommand,
       AfterSpaceCommand,
@@ -10975,6 +9138,7 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
       ToggleCheckListCommand,
       QuickListCommand,
       IMEInputCommand,
+      SwitchDocModeCommand,
       DocParagraphSettingCommand,
       InnerPasteCommand,
       CutContentCommand,
@@ -11025,7 +9189,8 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
       [DocCanvasPopManagerService],
       [DocsRenderService],
       [DocStateChangeManagerService],
-      [DocAutoFormatService]
+      [DocAutoFormatService],
+      [DocMenuStyleService]
     ], this._config.override).forEach((d) => injector.add(d));
   }
   _markDocAsFocused() {
@@ -11051,8 +9216,8 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
       [DocIMEInputManagerService],
       [DocRenderController],
       [DocZoomRenderController]
-    ].forEach((m2) => {
-      this._renderManagerSrv.registerRenderModule(UniverInstanceType.UNIVER_DOC, m2);
+    ].forEach((m3) => {
+      this._renderManagerSrv.registerRenderModule(UniverInstanceType.UNIVER_DOC, m3);
     });
   }
   _initRenderModules() {
@@ -11068,8 +9233,8 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
       [DocInputController],
       [DocIMEInputController],
       [DocEditorBridgeController]
-    ].forEach((m2) => {
-      this._renderManagerSrv.registerRenderModule(UniverInstanceType.UNIVER_DOC, m2);
+    ].forEach((m3) => {
+      this._renderManagerSrv.registerRenderModule(UniverInstanceType.UNIVER_DOC, m3);
     });
   }
 }, __name(_a27, "UniverDocsUIPlugin"), _a27);
@@ -11136,7 +9301,7 @@ export {
   DocUIController,
   DocsRenderService,
   Editor,
-  EditorInsertTextCommandId,
+  E as EditorInsertTextCommandId,
   EditorService,
   EnterCommand,
   IDocClipboardService,
@@ -11151,7 +9316,7 @@ export {
   MoveSelectionOperation,
   NORMAL_TEXT_SELECTION_PLUGIN_NAME,
   NodePositionConvertToCursor,
-  NodePositionConvertToRectRange,
+  h as NodePositionConvertToRectRange,
   OrderListCommand,
   wordPastePlugin$1 as PastePluginLark,
   univerPastePlugin as PastePluginUniver,
@@ -11159,7 +9324,7 @@ export {
   QuickListCommand,
   RangeSelector,
   RangeSelectorService,
-  RectRange,
+  R as RectRange,
   ReplaceContentCommand,
   ReplaceSnapshotCommand,
   ResetInlineFormatTextBackgroundColorCommand,
@@ -11177,26 +9342,23 @@ export {
   SetInlineFormatTextBackgroundColorCommand,
   SetInlineFormatTextColorCommand,
   SetInlineFormatUnderlineCommand,
-  TEXT_RANGE_LAYER_INDEX,
+  T as TEXT_RANGE_LAYER_INDEX,
   TabCommand,
   TextEditor,
-  TextRange,
+  m as TextRange,
   ToggleCheckListCommand,
   UniverDocsUIPlugin,
   UpdateCommand,
   VIEWPORT_KEY,
   addCustomDecorationBySelectionFactory,
   addCustomDecorationFactory,
-  addCustomRangeBySelectionFactory,
-  addCustomRangeFactory,
-  convertPositionsToRectRanges,
+  k as convertPositionsToRectRanges,
   deleteCustomDecorationFactory,
-  deleteCustomRangeFactory,
   docDrawingPositionToTransform,
   genTableSource,
   generateParagraphs,
   getAnchorBounding,
-  getCanvasOffsetByEngine,
+  l as getCanvasOffsetByEngine,
   getCommandSkeleton,
   getCursorWhenDelete,
   getCustomBlockIdsInSelections,
@@ -11206,17 +9368,16 @@ export {
   getEmptyTableCell,
   getEmptyTableRow,
   getLineBounding,
-  getOneTextSelectionRange,
+  j as getOneTextSelectionRange,
   getParagraphsInRange,
   getParagraphsInRanges,
   getRichTextEditPath,
   getTableColumn,
   hasParagraphInTable,
   isInSameTableCell,
-  isValidRectRange,
+  f as isValidRectRange,
   menuSchema,
   neoGetDocObject,
-  replaceSelectionFactory,
   transformToDocDrawingPosition,
   whenDocAndEditorFocused
 };