@univerjs/docs-ui 0.3.0 → 0.4.0-alpha.0

package/lib/es/index.js

@@ -2,7 +2,7 @@ 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, useDependency, LocaleService, isInternalEditorID, debounce, ThemeService, DocumentFlavor, 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, OnLifecycle, LifecycleStages, 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, mergeOverrideWithDependencies } from "@univerjs/core";
+import { Inject, Disposable, toDisposable, UniverInstanceType, BuildTextUtils, IUniverInstanceService, TextX, JSONX, TextXActionType, getBodySlice, Tools, UpdateDocsAttributeType, ObjectRelativeFromH, ObjectRelativeFromV, CommandType, ICommandService, IUndoRedoService, DOC_RANGE_TYPE, RANGE_DIRECTION, COLORS, BooleanNumber, Rectangle, RxDisposable, DataStreamTreeTokenType, ILogService, DEFAULT_STYLES, createIdentifier, EDITOR_ACTIVATED, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, FOCUSING_EDITOR_INPUT_FORMULA, DEFAULT_EMPTY_DOCUMENT_VALUE, VerticalAlign, HorizontalAlign, IContextService, DocumentFlavor, useDependency, LocaleService, isInternalEditorID, debounce, PresetListType, sequenceExecuteAsync, FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, FOCUSING_COMMON_DRAWINGS, MemoryCursor, BaselineOffset, PRESET_LIST_TYPE, GridType, sortRulesFactory, useObservable, TableCellHeightRule, TableSizeType, generateRandomId, TableAlignmentType, TableTextWrapType, PositionedObjectLayoutType, 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 { DocSelectionManagerService, RichTextEditingMutation, DocSkeletonManagerService, SetTextSelectionsOperation, DocStateEmitService, DocInterceptorService } from "@univerjs/docs";
 import { IRenderManagerService, Liquid, GlyphType, DocumentSkeletonPageType, getPageFromPath, getTableIdAndSliceIndex, NORMAL_TEXT_SELECTION_PLUGIN_STYLE, getColor, RegularPolygon, Rect, getOffsetRectForDom, ScrollTimer, CURSOR_TYPE, getSystemHighlightColor, Vector2, PageLayoutType, DocumentEditArea, Shape, Path, getCharSpaceApply, getNumberUnitValue, hasListGlyph, isIndentByGlyph, isFirstGlyph, getParagraphByGlyph, pixelToPt, ptToPixel, parseDataStreamToTree, Viewport, ScrollBar, Layer, Documents, DocBackground, lineIterator, getLastLine, pxToNum, TRANSFORM_CHANGE_OBSERVABLE_TYPE, UniverRenderEnginePlugin } from "@univerjs/engine-render";
 import * as require$$0 from "react";
@@ -321,10 +321,11 @@ function addCustomRangeBySelectionFactory(accessor, param) {
 }
 __name(addCustomRangeBySelectionFactory, "addCustomRangeBySelectionFactory");
 function deleteCustomRangeFactory(accessor, params) {
-  const { unitId, segmentId, insert } = params, documentDataModel = accessor.get(IUniverInstanceService).getUnit(unitId);
+  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 doMutation = {
+  const textRange = selection != null && selection.collapsed ? { index: selection.startOffset } : void 0, doMutation = {
     id: RichTextEditingMutation.id,
     params: {
       unitId: params.unitId,
@@ -336,12 +337,13 @@ function deleteCustomRangeFactory(accessor, params) {
     documentDataModel,
     rangeId: params.rangeId,
     insert,
-    segmentId
+    segmentId,
+    textRange
   });
   if (!textX)
     return !1;
   const path = getRichTextEditPath(documentDataModel, segmentId);
-  return doMutation.params.actions = jsonX.editOp(textX.serialize(), path), doMutation;
+  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) {
@@ -445,15 +447,82 @@ function isElementVisible(element2) {
   return !(rect.width === 0 || rect.height === 0 || rect.bottom < 0 || rect.top > window.innerHeight || rect.right < 0 || rect.left > window.innerWidth);
 }
 __name(isElementVisible, "isElementVisible");
-const ReplaceContentCommand = {
+const ReplaceSnapshotCommand = {
+  id: "doc.command-replace-snapshot",
+  type: CommandType.COMMAND,
+  // eslint-disable-next-line max-lines-per-function, complexity
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    const { unitId, snapshot, textRanges, segmentId = "", options } = params, univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), docSelectionManagerService = accessor.get(DocSelectionManagerService), docDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC), prevSnapshot = docDataModel == null ? void 0 : docDataModel.getSelfOrHeaderFooterModel(segmentId).getSnapshot();
+    if (docDataModel == null || prevSnapshot == null)
+      return !1;
+    const { body, tableSource, footers, headers, lists, drawings, drawingsOrder } = snapshot, {
+      body: prevBody,
+      tableSource: prevTableSource,
+      footers: prevFooters,
+      headers: prevHeaders,
+      lists: prevLists,
+      drawings: prevDrawings,
+      drawingsOrder: prevDrawingsOrder
+    } = prevSnapshot;
+    if (body == null || prevBody == null)
+      return !1;
+    if (Tools.diffValue(body, prevBody) && textRanges)
+      return docSelectionManagerService.replaceDocRanges(textRanges, {
+        unitId,
+        subUnitId: unitId
+      }, !1), !0;
+    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.getUniverDocInstance(unitId), prevBody = docDataModel == null ? void 0 : docDataModel.getSnapshot().body, selections = docSelectionManagerService.getTextRanges();
-    if (docDataModel == null || prevBody == null || !Array.isArray(selections) || selections.length === 0)
+    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), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+    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",
@@ -469,15 +538,8 @@ const ReplaceContentCommand = {
     ), undoRedoService.clearUndoRedo(unitId), !0;
   }, "handler")
 };
-function getMutationParams(unitId, segmentId, docDatModel, prevBody, body) {
-  const doMutation = {
-    id: RichTextEditingMutation.id,
-    params: {
-      unitId,
-      actions: [],
-      textRanges: []
-    }
-  }, textX = new TextX(), jsonX = JSONX.getInstance(), deleteLen = (prevBody == null ? void 0 : prevBody.dataStream.length) - 2;
+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,
@@ -491,7 +553,19 @@ function getMutationParams(unitId, segmentId, docDatModel, prevBody, body) {
     segmentId
   });
   const path = getRichTextEditPath(docDatModel, segmentId);
-  return doMutation.params.actions = jsonX.editOp(textX.serialize(), path), doMutation;
+  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;
@@ -917,14 +991,16 @@ const _NodePositionConvertToRectRange = class _NodePositionConvertToRectRange {
     }
     if (tables.length === 0)
       return;
-    const totalColumns = tables[0].rows[0].cells.length;
-    if (startColumnIndex === 0 && endColumnIndex === totalColumns - 1)
-      return nodePositionGroup.push({
-        anchor: anchorNodePosition,
-        focus: focusNodePosition
-      }), nodePositionGroup;
     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) {
@@ -1705,7 +1781,7 @@ let DocSelectionRenderService = (_a2 = class extends RxDisposable {
    * @deprecated
    */
   activate(x, y, force = !1) {
-    const isFocusing = this._input === document.activeElement;
+    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() {
@@ -1811,7 +1887,7 @@ let DocSelectionRenderService = (_a2 = class extends RxDisposable {
         return;
     }
     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._isEmpty() && this._removeAllRanges(), scene.disableObjectsEvent();
+    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;
@@ -1824,11 +1900,15 @@ let DocSelectionRenderService = (_a2 = class extends RxDisposable {
       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)
-          this._addTextRange(textRange);
+          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;
@@ -1840,9 +1920,7 @@ let DocSelectionRenderService = (_a2 = class extends RxDisposable {
         style: this._selectionStyle,
         isEditing: !1
       };
-      this._textSelectionInner$.next(selectionInfo), this._scrollTimers.forEach((timer) => {
-        timer == null || timer.dispose();
-      }), this._scrollTimers = [], this._updateInputPosition(!0);
+      this._textSelectionInner$.next(selectionInfo), this._disposeScrollTimers(), this._updateInputPosition(!0);
     }));
   }
   removeAllRanges() {
@@ -1851,6 +1929,11 @@ let DocSelectionRenderService = (_a2 = class extends RxDisposable {
   getActiveTextRange() {
     return this._getActiveRangeInstance();
   }
+  _disposeScrollTimers() {
+    this._scrollTimers.forEach((timer) => {
+      timer == null || timer.dispose();
+    }), this._scrollTimers = [];
+  }
   _setSystemHighlightColorToStyle() {
     const { r, g, b, a } = getSystemHighlightColor(), style = {
       strokeWidth: 1.5,
@@ -1970,6 +2053,10 @@ let DocSelectionRenderService = (_a2 = class extends RxDisposable {
       range.dispose();
     }), this._rectRangeList = [];
   }
+  _removeAllCollapsedTextRanges() {
+    for (const range of this._rangeList)
+      range.collapsed && range.dispose();
+  }
   _deactivateAllTextRanges() {
     this._rangeList.forEach((range) => {
       range.deactivate();
@@ -2324,23 +2411,18 @@ const _Editor = class _Editor extends Disposable {
   }
   // get editor id.
   getEditorId() {
-    return this._param.editorUnitId;
+    return this._getEditorId();
   }
   // get document data.
   getDocumentData() {
-    const editorUnitId = this.getEditorId();
-    return this._univerInstanceService.getUnit(editorUnitId, UniverInstanceType.UNIVER_DOC).getSnapshot();
+    return this._getDocDataModel().getSnapshot();
   }
   // Set the new document data.
   setDocumentData(data, textRanges) {
-    const { id, body } = data;
-    this._commandService.executeCommand(ReplaceContentCommand.id, {
+    const { id } = data;
+    this._commandService.executeCommand(ReplaceSnapshotCommand.id, {
       unitId: id,
-      body: {
-        ...body,
-        dataStream: body != null && body.dataStream.endsWith(`\r
-`) ? body.dataStream.substring(0, body.dataStream.length - 2) : body.dataStream
-      },
+      snapshot: data,
       textRanges
     });
   }
@@ -2349,11 +2431,8 @@ const _Editor = class _Editor extends Disposable {
     const editorUnitId = this.getEditorId();
     return this._undoRedoService.clearUndoRedo(editorUnitId);
   }
-  /**
-   * @deprecated use getDocumentData.
-   */
-  get documentDataModel() {
-    return this._param.documentDataModel;
+  dispose() {
+    this._getDocDataModel().dispose();
   }
   /**
    * @deprecated use getEditorId.
@@ -2361,6 +2440,12 @@ const _Editor = class _Editor extends Disposable {
   get editorUnitId() {
     return this._param.editorUnitId;
   }
+  /**
+   * @deprecated @TODO: @JOCS remove this in the future.
+   */
+  get params() {
+    return this._param;
+  }
   get cancelDefaultResizeListener() {
     return this._param.cancelDefaultResizeListener;
   }
@@ -2368,7 +2453,8 @@ const _Editor = class _Editor extends Disposable {
     return this._param.render;
   }
   isSingleChoice() {
-    return this._param.isSingleChoice;
+    var _a28;
+    return (_a28 = this._param.isSingleChoice) != null ? _a28 : !1;
   }
   /** @deprecated */
   setOpenForSheetUnitId(unitId) {
@@ -2439,13 +2525,13 @@ const _Editor = class _Editor extends Disposable {
    */
   getValue() {
     var _a28;
-    return (((_a28 = this._param.documentDataModel.getBody()) == null ? void 0 : _a28.dataStream) || "").replace(/\r\n/g, "").replace(/\n/g, "").replace(/\n/g, "");
+    return (((_a28 = this._getDocDataModel().getBody()) == null ? void 0 : _a28.dataStream) || "").replace(/\r\n/g, "").replace(/\n/g, "").replace(/\n/g, "");
   }
   /**
    * @deprecated use getDocumentData.
    */
   getBody() {
-    return this._param.documentDataModel.getBody();
+    return this._getDocDataModel().getBody();
   }
   /**
    * @deprecated.
@@ -2456,32 +2542,46 @@ const _Editor = class _Editor extends Disposable {
       ...param
     };
   }
+  /**
+   * @deprecated.
+   */
   verticalAlign() {
-    var _a28, _b2;
-    const documentDataModel = (_a28 = this._param) == null ? void 0 : _a28.documentDataModel;
-    if (documentDataModel == null)
+    var _a28;
+    const docDataModel = this._getDocDataModel();
+    if (docDataModel == null)
       return;
     const { width, height } = this._param.editorDom.getBoundingClientRect();
     if (height === 0 || width === 0)
       return;
     if (!this.isSingle()) {
-      documentDataModel.updateDocumentDataPageSize(width, void 0);
+      docDataModel.updateDocumentDataPageSize(width, void 0);
       return;
     }
     let fontSize = DEFAULT_STYLES.fs;
-    (_b2 = this._param.canvasStyle) != null && _b2.fontSize && (fontSize = this._param.canvasStyle.fontSize);
+    (_a28 = this._param.canvasStyle) != null && _a28.fontSize && (fontSize = this._param.canvasStyle.fontSize);
     const top = (height - fontSize * 4 / 3) / 2 - 2;
-    documentDataModel.updateDocumentDataMargin({
+    docDataModel.updateDocumentDataMargin({
       t: top < 0 ? 0 : top
-    }), documentDataModel.updateDocumentDataPageSize(void 0, void 0);
+    }), docDataModel.updateDocumentDataPageSize(void 0, void 0);
   }
+  /**
+   * @deprecated.
+   */
   updateCanvasStyle() {
     var _a28;
-    const documentDataModel = this._param.documentDataModel;
-    if (documentDataModel == null)
+    const docDataModel = this._getDocDataModel();
+    if (docDataModel == null)
       return;
     const documentStyle = {};
-    (_a28 = this._param.canvasStyle) != null && _a28.fontSize && (documentStyle.textStyle == null && (documentStyle.textStyle = {}), documentStyle.textStyle.fs = this._param.canvasStyle.fontSize), documentDataModel.updateDocumentStyle(documentStyle);
+    (_a28 = this._param.canvasStyle) != null && _a28.fontSize && (documentStyle.textStyle == null && (documentStyle.textStyle = {}), documentStyle.textStyle.fs = this._param.canvasStyle.fontSize), docDataModel.updateDocumentStyle(documentStyle);
+  }
+  _getDocDataModel() {
+    const editorUnitId = this._getEditorId();
+    return this._univerInstanceService.getUnit(editorUnitId, UniverInstanceType.UNIVER_DOC);
+  }
+  _getEditorId() {
+    var _a28;
+    return ((_a28 = this._param.initialSnapshot) == null ? void 0 : _a28.id) || this._param.editorUnitId || "";
   }
 };
 __name(_Editor, "Editor");
@@ -2539,6 +2639,7 @@ let EditorService = (_b = class extends Disposable {
       })
     );
   }
+  /** @deprecated */
   _blurSheetEditor(target) {
     if (editorFocusInElements.some((item) => target.classList.contains(item)))
       return;
@@ -2561,10 +2662,12 @@ let EditorService = (_b = class extends Disposable {
   isEditor(editorUnitId) {
     return this._editors.has(editorUnitId);
   }
+  /** @deprecated */
   isSheetEditor(editorUnitId) {
     const editor = this._editors.get(editorUnitId);
     return !!(editor && editor.isSheetEditor());
   }
+  /** @deprecated */
   closeRangePrompt() {
     const documentDataModel = this._univerInstanceService.getCurrentUniverDocInstance();
     if (!documentDataModel)
@@ -2580,15 +2683,18 @@ let EditorService = (_b = class extends Disposable {
   getSpreadsheetFocusState() {
     return this._spreadsheetFocusState;
   }
+  /** @deprecated */
   focusStyle(editorUnitId) {
     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);
   }
+  /** @deprecated */
   singleSelection(state) {
     this._singleSelection$.next(state);
   }
+  /** @deprecated */
   selectionChangingState() {
     const editorUnitId = this.getFocusId();
     if (editorUnitId == null)
@@ -2663,10 +2769,12 @@ let EditorService = (_b = class extends Disposable {
   getFirstEditor() {
     return [...this.getAllEditor().values()][0];
   }
+  /** @deprecated */
   resize(unitId) {
     const editor = this.getEditor(unitId);
     editor != null && (editor.verticalAlign(), this._resize$.next(unitId));
   }
+  /** @deprecated */
   isVisible(id) {
     var _a28;
     return (_a28 = this.getEditor(id)) == null ? void 0 : _a28.isVisible();
@@ -2688,8 +2796,9 @@ let EditorService = (_b = class extends Disposable {
     return this._currentSheetSubUnitId;
   }
   register(config, container) {
-    var _a28, _b2, _c, _d, _e;
-    const { initialSnapshot, editorUnitId, canvasStyle = {} } = config, documentDataModel = (_a28 = this._univerInstanceService.getUnit(editorUnitId, UniverInstanceType.UNIVER_DOC)) != null ? _a28 : this._univerInstanceService.createUnit(
+    var _a28, _b2, _c, _d;
+    const { initialSnapshot, canvasStyle = {} } = config, editorUnitId = initialSnapshot.id;
+    this._univerInstanceService.getUnit(editorUnitId, UniverInstanceType.UNIVER_DOC) == null && this._univerInstanceService.createUnit(
       UniverInstanceType.UNIVER_DOC,
       initialSnapshot || this._getBlank(editorUnitId),
       { makeCurrent: !1 }
@@ -2698,13 +2807,13 @@ let EditorService = (_b = class extends Disposable {
     if (render2 == null && (this._renderManagerService.create(editorUnitId), render2 = this._renderManagerService.getRenderById(editorUnitId)), render2) {
       render2.engine.setContainer(container);
       const editor = new Editor(
-        { ...config, render: render2, documentDataModel, editorDom: container, canvasStyle },
+        { ...config, render: render2, editorDom: container, canvasStyle },
         this._univerInstanceService,
         this._docSelectionManagerService,
         this._commandService,
         this._undoRedoService
       );
-      this._editors.set(editorUnitId, editor), (_e = (_d = (_c = (_b2 = render2.mainComponent) == null ? void 0 : _b2.getScene()) == null ? void 0 : _c.getViewports()) == null ? void 0 : _d[0].getScrollBar()) == null || _e.dispose(), editor.isSheetEditor() || (editor.verticalAlign(), editor.updateCanvasStyle());
+      this._editors.set(editorUnitId, editor), config.scrollBar || (_d = (_c = (_b2 = (_a28 = render2.mainComponent) == null ? void 0 : _a28.getScene()) == null ? void 0 : _b2.getViewports()) == null ? void 0 : _c[0].getScrollBar()) == null || _d.dispose(), !editor.isSheetEditor() && !config.noNeedVerticalAlign && (editor.verticalAlign(), editor.updateCanvasStyle());
     }
     return toDisposable(() => {
       this._unRegister(editorUnitId);
@@ -2712,15 +2821,17 @@ let EditorService = (_b = class extends Disposable {
   }
   _unRegister(editorUnitId) {
     const editor = this._editors.get(editorUnitId);
-    if (editor == null || (this._renderManagerService.removeRender(editorUnitId), editor.documentDataModel.dispose(), this._editors.delete(editorUnitId), this._univerInstanceService.disposeUnit(editorUnitId), this._contextService.setContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, !1), !this.isSheetEditor(editorUnitId))) return;
+    if (editor == null || (this._renderManagerService.removeRender(editorUnitId), editor.dispose(), this._editors.delete(editorUnitId), this._univerInstanceService.disposeUnit(editorUnitId), this._contextService.setContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, !1), !this.isSheetEditor(editorUnitId))) return;
     if (this._univerInstanceService.getAllUnitsForType(UniverInstanceType.UNIVER_SHEET).length > 0) {
       const current = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
       current && this._univerInstanceService.focusUnit(current.getUnitId());
     }
   }
+  /** @deprecated */
   refreshValueChange(editorUnitId) {
     this._refreshValueChange(editorUnitId);
   }
+  /** @deprecated */
   checkValueLegality(editorUnitId) {
     const editor = this._editors.get(editorUnitId);
     if (editor == null)
@@ -2788,7 +2899,33 @@ const IEditorService = createIdentifier("univer.editor.service"), textEditorCont
   textEditorContainerDisabled,
   textEditorContainerPlaceholder,
   textEditorValidationError
-}, excludeProps = /* @__PURE__ */ new Set([
+};
+function genSnapShotByValue(id = "", value = "") {
+  const dataStream = `${value}${DEFAULT_EMPTY_DOCUMENT_VALUE}`, paragraphs = [], sectionBreaks = [];
+  for (let i = 0; i < dataStream.length; i++)
+    dataStream[i] === "\r" && paragraphs.push({
+      startIndex: i
+    }), dataStream[i] === `
+` && sectionBreaks.push({
+      startIndex: i
+    });
+  return {
+    id,
+    body: {
+      dataStream,
+      tables: [],
+      textRuns: [],
+      paragraphs,
+      sectionBreaks
+    },
+    tableSource: {},
+    documentStyle: {
+      documentFlavor: DocumentFlavor.MODERN
+    }
+  };
+}
+__name(genSnapShotByValue, "genSnapShotByValue");
+const excludeProps = /* @__PURE__ */ new Set([
   "snapshot",
   "resizeCallBack",
   "cancelDefaultResizeListener",
@@ -2843,10 +2980,12 @@ function TextEditor(props) {
       cancelDefaultResizeListener !== !0 && editorService.resize(id), resizeCallBack && resizeCallBack(editorDom);
     });
     resizeObserver.observe(editorDom);
+    const initialSnapshot = snapshot != null ? snapshot : genSnapShotByValue(id, value);
+    initialSnapshot.id !== id && (initialSnapshot.id = id);
     const registerSubscription = editorService.register(
       {
         editorUnitId: id,
-        initialSnapshot: snapshot,
+        initialSnapshot,
         cancelDefaultResizeListener,
         isSheetEditor,
         canvasStyle,
@@ -2866,7 +3005,7 @@ function TextEditor(props) {
     const activeChange = debounce((state) => {
       setActive(state), onActive && onActive(state);
     }, 30), ANIMATION_DELAY = 160, valueChange = debounce((editor) => {
-      const unitId = editor.editorUnitId, isLegality = editorService.checkValueLegality(unitId);
+      const unitId = editor.getEditorId(), isLegality = editorService.checkValueLegality(unitId);
       setTimeout(() => {
         const rect = editor.getBoundingClientRect();
         setValidationOffset([rect.left, rect.top - 16]), rect.left + rect.top > 0 && setValidationVisible(isLegality), editor.onlyInputFormula() ? setValidationContent(localeService.t("textEditor.formulaError")) : setValidationContent(localeService.t("textEditor.rangeError"));
@@ -3092,13 +3231,11 @@ const IRangeSelectorService = createIdentifier(
   rangeSelectorModalContainerDeleteButton,
   rangeSelectorModalAdd,
   rangeSelectorModalAddButton
-}, disableInputStyle = {
-  pointerEvents: "none",
-  cursor: "not-allowed",
-  opacity: 0.5
+}, dialogOnlyInputStyle = {
+  pointerEvents: "none"
 };
 function RangeSelector(props) {
-  const { onChange, id, value = "", width = 220, placeholder = "", size = "middle", onActive, onValid, isSingleChoice = !1, openForSheetUnitId, openForSheetSubUnitId, isReadonly = !1, className, textEditorClassName, onSelectorVisibleChange: _onSelectorVisibleChange, disableInput } = props, onSelectorVisibleChange = useEvent(_onSelectorVisibleChange), [rangeDataList, setRangeDataList] = useState([""]), addNewItem = /* @__PURE__ */ __name((newValue) => {
+  const { dialogOnly, onChange, id, value = "", width = 220, placeholder = "", size = "middle", onActive, onValid, isSingleChoice = !1, openForSheetUnitId, openForSheetSubUnitId, isReadonly = !1, className, textEditorClassName, onSelectorVisibleChange: _onSelectorVisibleChange } = props, onSelectorVisibleChange = useEvent(_onSelectorVisibleChange), [rangeDataList, setRangeDataList] = useState([""]), addNewItem = /* @__PURE__ */ __name((newValue) => {
     setRangeDataList((prevRangeDataList) => [...prevRangeDataList, newValue]);
   }, "addNewItem"), removeItem = /* @__PURE__ */ __name((indexToRemove) => {
     setRangeDataList(
@@ -3115,7 +3252,7 @@ function RangeSelector(props) {
       const newList = [...prevRangeDataList];
       return newList.length > 0 && (newList[newList.length - 1] = newValue), newList;
     });
-  }, "changeLastItem"), editorService = useDependency(IEditorService), rangeSelectorService = useDependency(IRangeSelectorService), univerInstanceService = useDependency(IUniverInstanceService), [selectorVisible, setSelectorVisible] = useState(!1), localeService = useDependency(LocaleService), [active, setActive] = useState(!1), [valid, setValid] = useState(!0), [rangeValue, setRangeValue] = useState(value), [currentInputIndex, setCurrentInputIndex] = useState(-1), selectorRef = useRef(null), currentInputIndexRef = useRef(-1), openForSheetUnitIdRef = useRef(openForSheetUnitId), openForSheetSubUnitIdRef = useRef(openForSheetSubUnitId), isSingleChoiceRef = useRef(isSingleChoice), isReadonlyRef = useRef(isReadonly), themeService = useDependency(ThemeService);
+  }, "changeLastItem"), editorService = useDependency(IEditorService), rangeSelectorService = useDependency(IRangeSelectorService), univerInstanceService = useDependency(IUniverInstanceService), [selectorVisible, setSelectorVisible] = useState(!1), localeService = useDependency(LocaleService), [active, setActive] = useState(!1), [valid, setValid] = useState(!0), [rangeValue, setRangeValue] = useState(value), [currentInputIndex, setCurrentInputIndex] = useState(-1), selectorRef = useRef(null), currentInputIndexRef = useRef(-1), openForSheetUnitIdRef = useRef(openForSheetUnitId), openForSheetSubUnitIdRef = useRef(openForSheetSubUnitId), isSingleChoiceRef = useRef(isSingleChoice), isReadonlyRef = useRef(isReadonly);
   useEffect(() => {
     const selector = selectorRef.current;
     if (!selector)
@@ -3203,13 +3340,22 @@ function RangeSelector(props) {
   let sClassName = styles$6.rangeSelector;
   isReadonly ? sClassName = `${styles$6.rangeSelector} ${styles$6.rangeSelectorDisabled}` : valid ? active && (sClassName = `${styles$6.rangeSelector} ${styles$6.rangeSelectorActive}`) : sClassName = `${styles$6.rangeSelector} ${styles$6.rangeSelectorError}`, textEditorClassName && (sClassName = `${sClassName} ${textEditorClassName}`);
   let height = 28;
-  size === "mini" ? height = 20 : size === "small" ? height = 24 : size === "large" && (height = 32);
-  const theme = themeService.getCurrentTheme();
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: sClassName, ref: selectorRef, style: { width, height }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TextEditor, { style: disableInput ? disableInputStyle : void 0, placeholder, value, isReadonly, isSingleChoice, openForSheetUnitId, openForSheetSubUnitId, onValid: onEditorValid, onActive: onEditorActive, onChange: handleTextValueChange, id, onlyInputRange: !0, canvasStyle: { fontSize: 10 }, className: styles$6.rangeSelectorEditor }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: localeService.t("rangeSelector.buttonTooltip"), placement: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: styles$6.rangeSelectorIcon, onClick: handleOpenModal, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectRangeSingle, { style: disableInput ? { color: theme.primaryColor } : void 0 }) }) })
-    ] }),
+  return size === "mini" ? height = 20 : size === "small" ? height = 24 : size === "large" && (height = 32), /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: sClassName,
+        ref: selectorRef,
+        style: { width, height, cursor: dialogOnly ? "pointer" : void 0 },
+        onClickCapture: /* @__PURE__ */ __name((event) => {
+          dialogOnly && (event.stopPropagation(), event.preventDefault(), handleOpenModal());
+        }, "onClickCapture"),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TextEditor, { style: dialogOnly ? dialogOnlyInputStyle : void 0, placeholder, value, isReadonly, isSingleChoice, openForSheetUnitId, openForSheetSubUnitId, onValid: onEditorValid, onActive: onEditorActive, onChange: handleTextValueChange, id, onlyInputRange: !0, canvasStyle: { fontSize: 10 }, className: styles$6.rangeSelectorEditor }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: localeService.t("rangeSelector.buttonTooltip"), placement: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: styles$6.rangeSelectorIcon, onClick: handleOpenModal, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectRangeSingle, {}) }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Dialog,
       {
@@ -6632,7 +6778,8 @@ let DocClipboardService = (_a4 = class extends Disposable {
   async _setClipboardData(documentBodyList, snapshot, needCache = !0) {
     var _a28, _b2;
     const copyId = genId(), text = (documentBodyList.length > 1 ? documentBodyList.map((body) => body.dataStream).join(`
-`) : documentBodyList[0].dataStream).replaceAll(DataStreamTreeTokenType.CUSTOM_RANGE_START, "").replaceAll(DataStreamTreeTokenType.CUSTOM_RANGE_END, "");
+`) : documentBodyList[0].dataStream).replaceAll(DataStreamTreeTokenType.CUSTOM_RANGE_START, "").replaceAll(DataStreamTreeTokenType.CUSTOM_RANGE_END, "").replaceAll(DataStreamTreeTokenType.TABLE_START, "").replaceAll(DataStreamTreeTokenType.TABLE_END, "").replaceAll(DataStreamTreeTokenType.TABLE_ROW_START, "").replaceAll(DataStreamTreeTokenType.TABLE_ROW_END, "").replaceAll(DataStreamTreeTokenType.TABLE_CELL_START, "").replaceAll(DataStreamTreeTokenType.TABLE_CELL_END, "").replaceAll(`\r
+`, " ");
     let html = this._umdToHtml.convert(documentBodyList);
     if (documentBodyList.length === 1 && needCache) {
       html = html.replace(/(<[a-z]+)/, (_p0, p1) => `${p1} data-copy-id="${copyId}"`);
@@ -6726,10 +6873,6 @@ function whenDocOrEditor(contextService) {
   return contextService.getContextValue(FOCUSING_DOC) || contextService.getContextValue(EDITOR_ACTIVATED);
 }
 __name(whenDocOrEditor, "whenDocOrEditor");
-function whenFocusEditor(contextService) {
-  return contextService.getContextValue(EDITOR_ACTIVATED);
-}
-__name(whenFocusEditor, "whenFocusEditor");
 const DOC_CLIPBOARD_PRIORITY = 999, DocCopyCommand = {
   id: CopyCommand.id,
   name: "doc.command.copy",
@@ -7554,7 +7697,6 @@ let DocParagraphSettingController = (_a5 = class extends Disposable {
   }
 }, __name(_a5, "DocParagraphSettingController"), _a5);
 DocParagraphSettingController = __decorateClass$m([
-  OnLifecycle(LifecycleStages.Rendered, DocParagraphSettingController),
   __decorateParam$m(0, ICommandService),
   __decorateParam$m(1, Inject(ComponentManager)),
   __decorateParam$m(2, Inject(ISidebarService))
@@ -8100,7 +8242,7 @@ function HeaderFooterMenuItemFactory(accessor) {
   return {
     id: OpenHeaderFooterPanelCommand.id,
     type: MenuItemType.BUTTON,
-    icon: "FreezeRowSingle",
+    icon: "HeaderFooterSingle",
     tooltip: "toolbar.headerFooter",
     hidden$: combineLatest(getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC), getHeaderFooterMenuHiddenObservable(accessor), (one, two) => one || two)
   };
@@ -8601,7 +8743,6 @@ let DocUIController = (_a6 = class extends Disposable {
   }
 }, __name(_a6, "DocUIController"), _a6);
 DocUIController = __decorateClass$l([
-  OnLifecycle(LifecycleStages.Rendered, DocUIController),
   __decorateParam$l(0, Inject(Injector)),
   __decorateParam$l(1, Inject(ComponentManager)),
   __decorateParam$l(2, ICommandService),
@@ -8628,7 +8769,7 @@ let DocBackScrollRenderController = (_a7 = class extends RxDisposable {
       if (params == null)
         return;
       const { isEditing, unitId } = params;
-      unitId !== this._context.unitId || !isEditing || this._scrollToSelection();
+      unitId !== this._context.unitId || !isEditing || this._context.unitId !== DOCS_NORMAL_EDITOR_UNIT_ID_KEY && this._scrollToSelection();
     });
   }
   scrollToRange(range) {
@@ -8639,10 +8780,11 @@ let DocBackScrollRenderController = (_a7 = class extends RxDisposable {
     this.scrollToNode(anchorNodePosition);
   }
   scrollToNode(startNodePosition) {
+    var _a28;
     const { unitId, scene, mainComponent } = this._context, skeleton = this._docSkeletonManagerService.getSkeleton();
     if (mainComponent == null || skeleton == null)
       return;
-    const documentOffsetConfig = mainComponent.getOffsetConfig(), { docsLeft, docsTop } = documentOffsetConfig, convertor = new NodePositionConvertToCursor(documentOffsetConfig, skeleton), { contentBoxPointGroup } = convertor.getRangePointData(startNodePosition, startNodePosition), { left: aLeft, top: aTop, height } = getAnchorBounding(contentBoxPointGroup), left = aLeft + docsLeft, top = aTop + docsTop, viewportMain = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN), isEditor = !!this._editorService.getEditor(unitId);
+    const documentOffsetConfig = mainComponent.getOffsetConfig(), { docsLeft, docsTop } = documentOffsetConfig, convertor = new NodePositionConvertToCursor(documentOffsetConfig, skeleton), { contentBoxPointGroup } = convertor.getRangePointData(startNodePosition, startNodePosition), { left: aLeft, top: aTop, height } = getAnchorBounding(contentBoxPointGroup), left = aLeft + docsLeft, top = aTop + docsTop, viewportMain = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN), editor = this._editorService.getEditor(unitId);
     if (viewportMain == null)
       return;
     const {
@@ -8652,7 +8794,7 @@ let DocBackScrollRenderController = (_a7 = class extends RxDisposable {
       bottom: boundBottom
     } = viewportMain.getBounding().viewBound;
     let offsetY = 0, offsetX = 0;
-    const delta = isEditor ? 0 : 100;
+    const delta = editor ? (_a28 = editor.params.backScrollOffset) != null ? _a28 : 0 : 100;
     top < boundTop ? offsetY = top - boundTop - delta : top > boundBottom - height && (offsetY = top - boundBottom + height + delta), left < boundLeft ? offsetX = left - boundLeft : left > boundRight - ANCHOR_WIDTH && (offsetX = left - boundRight + ANCHOR_WIDTH);
     const config = viewportMain.transViewportScroll2ScrollValue(offsetX, offsetY);
     viewportMain.scrollByBarDeltaValue(config);
@@ -8683,13 +8825,15 @@ let DocRenderController = (_a8 = class extends RxDisposable {
   reRender(unitId) {
     var _a28, _b2;
     const docSkeletonManagerService = (_a28 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a28.with(DocSkeletonManagerService), skeleton = docSkeletonManagerService == null ? void 0 : docSkeletonManagerService.getSkeleton();
-    if (!(!skeleton || skeleton.getViewModel().getDataModel().getSnapshot().disabled)) {
-      if (skeleton.calculate(), this._editorService.isEditor(unitId)) {
-        (_b2 = this._context.mainComponent) == null || _b2.makeDirty();
-        return;
-      }
-      this._recalculateSizeBySkeleton(skeleton);
+    if (!skeleton || !!skeleton.getViewModel().getDataModel().getSnapshot().disabled)
+      return;
+    skeleton.calculate();
+    const editor = this._editorService.getEditor(unitId);
+    if (this._editorService.isEditor(unitId) && !(editor != null && editor.params.scrollBar)) {
+      (_b2 = this._context.mainComponent) == null || _b2.makeDirty();
+      return;
     }
+    this._recalculateSizeBySkeleton(skeleton);
   }
   _addNewRender() {
     const { scene, engine } = this._context, viewMain = new Viewport(VIEWPORT_KEY.VIEW_MAIN, scene, {
@@ -8758,7 +8902,9 @@ let DocRenderController = (_a8 = class extends RxDisposable {
       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));
     }
-    docsComponent.resize(width, height), docBackground.resize(width, height), this._editorService.isEditor(unitId) || scene.resize(width, height);
+    docsComponent.resize(width, height), docBackground.resize(width, height);
+    const editor = this._editorService.getEditor(unitId);
+    (!this._editorService.isEditor(unitId) || editor != null && editor.params.scrollBar) && scene.resize(width, height);
   }
 }, __name(_a8, "DocRenderController"), _a8);
 DocRenderController = __decorateClass$j([
@@ -9147,7 +9293,6 @@ let DocAutoFormatController = (_a11 = class extends Disposable {
   }
 }, __name(_a11, "DocAutoFormatController"), _a11);
 DocAutoFormatController = __decorateClass$g([
-  OnLifecycle(LifecycleStages.Rendered, DocAutoFormatController),
   __decorateParam$g(0, Inject(DocAutoFormatService))
 ], DocAutoFormatController);
 function firstLineInTable(table) {
@@ -9188,24 +9333,50 @@ function findLineBeforeAndAfterTable(table) {
 }
 __name(findLineBeforeAndAfterTable, "findLineBeforeAndAfterTable");
 function findBellowCell(cell) {
-  const row = cell.parent, table = row == null ? void 0 : row.parent;
+  var _a28, _b2;
+  const row = cell.parent, table = row == null ? void 0 : row.parent, tableId = table == null ? void 0 : table.tableId;
   if (row == null || table == null)
     return;
-  const bellowRow = table.rows[table.rows.indexOf(row) + 1];
-  if (bellowRow == null)
+  const col = row.cells.indexOf(cell), bellowRow = table.rows[table.rows.indexOf(row) + 1];
+  if (bellowRow == null) {
+    if (tableId.indexOf("#-#")) {
+      const [id, index] = tableId.split("#-#"), pages = (_b2 = (_a28 = table.parent) == null ? void 0 : _a28.parent) == null ? void 0 : _b2.pages, nextTableId = `${id}#-#${Number.parseInt(index) + 1}`;
+      if (pages)
+        for (const page of pages) {
+          const { skeTables } = page;
+          if (skeTables.has(nextTableId)) {
+            const nextTable = skeTables.get(nextTableId);
+            if (nextTable != null && nextTable.rows.length)
+              return nextTable.rows[0].cells[col];
+          }
+        }
+    }
     return;
-  const col = row.cells.indexOf(cell);
+  }
   return bellowRow.cells[col];
 }
 __name(findBellowCell, "findBellowCell");
 function findAboveCell(cell) {
+  var _a28, _b2;
   const row = cell.parent, table = row == null ? void 0 : row.parent;
   if (row == null || table == null)
     return;
-  const aboveRow = table.rows[table.rows.indexOf(row) - 1];
-  if (aboveRow == null)
+  const aboveRow = table.rows[table.rows.indexOf(row) - 1], col = row.cells.indexOf(cell);
+  if (aboveRow == null) {
+    if (table.tableId.indexOf("#-#")) {
+      const [id, index] = table.tableId.split("#-#"), pages = (_b2 = (_a28 = table.parent) == null ? void 0 : _a28.parent) == null ? void 0 : _b2.pages, nextTableId = `${id}#-#${Number.parseInt(index) - 1}`;
+      if (pages)
+        for (const page of pages) {
+          const { skeTables } = page;
+          if (skeTables.has(nextTableId)) {
+            const nextTable = skeTables.get(nextTableId);
+            if (nextTable != null && nextTable.rows.length)
+              return nextTable.rows[nextTable.rows.length - 1].cells[col];
+          }
+        }
+    }
     return;
-  const col = row.cells.indexOf(cell);
+  }
   return aboveRow.cells[col];
 }
 __name(findAboveCell, "findAboveCell");
@@ -9379,8 +9550,8 @@ let DocMoveCursorController = (_a12 = class extends Disposable {
         direction === Direction.LEFT ? cursor = Math.min(range.startIndex, cursor) : cursor = Math.max(range.endIndex + 1, cursor);
       }), this._textSelectionManagerService.replaceTextRanges([
         {
-          startOffset: cursor,
-          endOffset: cursor,
+          startOffset: Math.max(0, cursor),
+          endOffset: Math.max(0, cursor),
           style
         }
       ], !1), this._scrollToFocusNodePosition(docDataModel.getUnitId(), cursor);
@@ -9395,8 +9566,8 @@ let DocMoveCursorController = (_a12 = class extends Disposable {
         let cursor;
         collapsed ? cursor = direction === Direction.UP ? 0 : dataStreamLength - 2 : cursor = direction === Direction.UP ? startOffset : endOffset, this._textSelectionManagerService.replaceTextRanges([
           {
-            startOffset: cursor,
-            endOffset: cursor,
+            startOffset: Math.max(0, cursor),
+            endOffset: Math.max(0, cursor),
             style
           }
         ], !1);
@@ -9537,7 +9708,6 @@ let DocMoveCursorController = (_a12 = class extends Disposable {
   }
 }, __name(_a12, "DocMoveCursorController"), _a12);
 DocMoveCursorController = __decorateClass$f([
-  OnLifecycle(LifecycleStages.Rendered, DocMoveCursorController),
   __decorateParam$f(0, IUniverInstanceService),
   __decorateParam$f(1, IRenderManagerService),
   __decorateParam$f(2, Inject(DocSelectionManagerService)),
@@ -9641,7 +9811,6 @@ let DocTableController = (_a13 = class extends Disposable {
   }
 }, __name(_a13, "DocTableController"), _a13);
 DocTableController = __decorateClass$e([
-  OnLifecycle(LifecycleStages.Rendered, DocTableController),
   __decorateParam$e(0, ICommandService),
   __decorateParam$e(1, Inject(ComponentManager))
 ], DocTableController);
@@ -10078,8 +10247,8 @@ var __defProp$a = Object.defineProperty, __getOwnPropDesc$a = Object.getOwnPrope
   return kind && result && __defProp$a(target, key, result), result;
 }, "__decorateClass$a"), __decorateParam$a = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$a"), _a17;
 let DocClipboardController = (_a17 = class extends RxDisposable {
-  constructor(_context, _commandService, _docClipboardService, _docSelectionRenderService, _contextService) {
-    super(), this._context = _context, this._commandService = _commandService, this._docClipboardService = _docClipboardService, this._docSelectionRenderService = _docSelectionRenderService, this._contextService = _contextService, this._init();
+  constructor(_context, _commandService, _docClipboardService, _docSelectionRenderService, _contextService, _editorService) {
+    super(), this._context = _context, this._commandService = _commandService, this._docClipboardService = _docClipboardService, this._docSelectionRenderService = _docSelectionRenderService, this._contextService = _contextService, this._editorService = _editorService, this._init();
   }
   _init() {
     this._initLegacyPasteCommand();
@@ -10094,7 +10263,7 @@ let DocClipboardController = (_a17 = class extends RxDisposable {
       const clipboardEvent = config.event;
       let htmlContent = (_a29 = clipboardEvent.clipboardData) == null ? void 0 : _a29.getData("text/html");
       const textContent = (_b2 = clipboardEvent.clipboardData) == null ? void 0 : _b2.getData("text/plain");
-      whenFocusEditor(this._contextService) && (htmlContent != null ? htmlContent : "").indexOf("</table>") > -1 && (htmlContent = ""), this._docClipboardService.legacyPaste(htmlContent, textContent);
+      this._editorService.getEditor(this._context.unitId) && (htmlContent != null ? htmlContent : "").indexOf("</table>") > -1 && (htmlContent = ""), this._docClipboardService.legacyPaste(htmlContent, textContent);
     });
   }
 }, __name(_a17, "DocClipboardController"), _a17);
@@ -10102,7 +10271,8 @@ DocClipboardController = __decorateClass$a([
   __decorateParam$a(1, ICommandService),
   __decorateParam$a(2, IDocClipboardService),
   __decorateParam$a(3, Inject(DocSelectionRenderService)),
-  __decorateParam$a(4, IContextService)
+  __decorateParam$a(4, IContextService),
+  __decorateParam$a(5, IEditorService)
 ], DocClipboardController);
 var __defProp$9 = Object.defineProperty, __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor, __decorateClass$9 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
@@ -10264,7 +10434,8 @@ let DocEditorBridgeController = (_a19 = class extends Disposable {
           const params = command.params, { unitId } = params;
           if (this._editorService.isSheetEditor(unitId) || unitId !== this._context.unitId)
             return;
-          this._resize(unitId), this._valueChange();
+          const editor = this._editorService.getEditor(unitId);
+          editor && !editor.params.scrollBar && (this._resize(unitId), this._valueChange());
         }
       })
     );
@@ -10749,7 +10920,6 @@ let DocStateChangeManagerService = (_a25 = class extends RxDisposable {
   }
 }, __name(_a25, "DocStateChangeManagerService"), _a25);
 DocStateChangeManagerService = __decorateClass$2([
-  OnLifecycle(LifecycleStages.Ready, DocStateChangeManagerService),
   __decorateParam$2(0, Inject(IUndoRedoService)),
   __decorateParam$2(1, ICommandService),
   __decorateParam$2(2, IUniverInstanceService),
@@ -10781,7 +10951,6 @@ let DocsRenderService = (_a26 = class extends RxDisposable {
   }
 }, __name(_a26, "DocsRenderService"), _a26);
 DocsRenderService = __decorateClass$1([
-  OnLifecycle(LifecycleStages.Ready, DocsRenderService),
   __decorateParam$1(0, IUniverInstanceService),
   __decorateParam$1(1, IRenderManagerService)
 ], DocsRenderService);
@@ -10871,10 +11040,21 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
     menu && this._configService.setConfig("menu", menu, { merge: !0 }), this._configService.setConfig(PLUGIN_CONFIG_KEY, rest), this._initDependencies(_injector), this._initializeShortcut(), this._initCommand();
   }
   onReady() {
-    this._initRenderBasics(), this._markDocAsFocused();
+    this._initRenderBasics(), this._markDocAsFocused(), touchDependencies(this._injector, [
+      [DocStateChangeManagerService],
+      [DocsRenderService]
+    ]);
   }
   onRendered() {
-    this._initUI(), this._initRenderModules();
+    this._initUI(), this._initRenderModules(), touchDependencies(this._injector, [
+      [DocAutoFormatController],
+      [DocMoveCursorController],
+      [DocParagraphSettingController],
+      [DocTableController],
+      // FIXME: LifecycleStages.Rendered must be used, otherwise the menu cannot be added to the DOM, but the sheet ui
+      // plugin can be added in LifecycleStages.Ready
+      [DocUIController]
+    ]);
   }
   _initCommand() {
     [
@@ -10931,6 +11111,7 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
       InnerPasteCommand,
       CutContentCommand,
       ReplaceContentCommand,
+      ReplaceSnapshotCommand,
       CoverContentCommand,
       SetDocZoomRatioCommand,
       SelectAllOperation,
@@ -10964,14 +11145,12 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
     mergeOverrideWithDependencies([
       [DocClipboardController],
       [DocEditorBridgeController],
-      // Controller
       [DocUIController],
       [DocAutoFormatController],
       [DocTableController],
       [DocMoveCursorController],
       [AppUIController],
       [DocParagraphSettingController],
-      // Services
       [IEditorService, { useClass: EditorService }],
       [IRangeSelectorService, { useClass: RangeSelectorService }],
       [IDocClipboardService, { useClass: DocClipboardService }],
@@ -10997,13 +11176,11 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
   }
   _initRenderBasics() {
     [
-      // Services.
       [DocSkeletonManagerService],
       [DocSelectionRenderService],
       [DocInterceptorService],
       [DocPageLayoutService],
       [DocIMEInputManagerService],
-      // Controllers.
       [DocRenderController],
       [DocZoomRenderController]
     ].forEach((m2) => {
@@ -11012,9 +11189,7 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
   }
   _initRenderModules() {
     [
-      // Services
       [DocEventManagerService],
-      // Controllers.
       [DocBackScrollRenderController],
       [DocSelectionRenderController],
       [DocHeaderFooterController],
@@ -11118,6 +11293,7 @@ export {
   RangeSelectorService,
   RectRange,
   ReplaceContentCommand,
+  ReplaceSnapshotCommand,
   ResetInlineFormatTextBackgroundColorCommand,
   SelectAllOperation,
   SetDocZoomRatioCommand,