@univerjs/docs-ui 0.4.0 → 0.4.1-experimental.20241023-bbb123f

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, DocumentFlavor, useDependency, LocaleService, isInternalEditorID, debounce, PresetListType, sequenceExecuteAsync, FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, FOCUSING_COMMON_DRAWINGS, MemoryCursor, BaselineOffset, PRESET_LIST_TYPE, GridType, sortRulesFactory, useObservable, TableCellHeightRule, TableSizeType, generateRandomId, TableAlignmentType, TableTextWrapType, PositionedObjectLayoutType, getCustomRangeSlice, getCustomDecorationSlice, LRUMap, ColorKit, skipParseTagNames, CustomRangeType, DataStreamTreeNodeType, SliceBodyType, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, normalizeBody, updateAttributeByInsert, SpacingRule, ThemeService, Injector, connectInjector, IConfigService, QuickListTypeMap, Direction, DisposableCollection, fromEventSubject, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_ZEN_EDITOR_UNIT_ID_KEY, checkForSubstrings, UndoCommandId, RedoCommandId, DependentOn, Plugin, touchDependencies, mergeOverrideWithDependencies } from "@univerjs/core";
+import { Inject, Disposable, toDisposable, UniverInstanceType, BuildTextUtils, IUniverInstanceService, TextX, JSONX, TextXActionType, getBodySlice, Tools, UpdateDocsAttributeType, ObjectRelativeFromH, ObjectRelativeFromV, CommandType, ICommandService, IUndoRedoService, DOC_RANGE_TYPE, RANGE_DIRECTION, COLORS, BooleanNumber, Rectangle, RxDisposable, DataStreamTreeTokenType, ILogService, DEFAULT_STYLES, createIdentifier, EDITOR_ACTIVATED, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, FOCUSING_EDITOR_INPUT_FORMULA, DEFAULT_EMPTY_DOCUMENT_VALUE, VerticalAlign, HorizontalAlign, IContextService, DocumentFlavor, useDependency, LocaleService, isInternalEditorID, debounce, PresetListType, sequenceExecuteAsync, FOCUSING_DOC, FOCUSING_UNIVER_EDITOR, FOCUSING_COMMON_DRAWINGS, MemoryCursor, BaselineOffset, PRESET_LIST_TYPE, GridType, sortRulesFactory, useObservable, TableCellHeightRule, TableSizeType, generateRandomId, TableAlignmentType, TableTextWrapType, PositionedObjectLayoutType, getCustomRangeSlice, getCustomDecorationSlice, LRUMap, ColorKit, skipParseTagNames, CustomRangeType, DataStreamTreeNodeType, SliceBodyType, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, normalizeBody, updateAttributeByInsert, SpacingRule, ThemeService, DOCS_ZEN_EDITOR_UNIT_ID_KEY, Injector, connectInjector, IConfigService, QuickListTypeMap, Direction, DisposableCollection, fromEventSubject, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, checkForSubstrings, UndoCommandId, RedoCommandId, DependentOn, Plugin, touchDependencies, mergeOverrideWithDependencies } from "@univerjs/core";
 import { DocSelectionManagerService, RichTextEditingMutation, DocSkeletonManagerService, SetTextSelectionsOperation, DocStateEmitService, DocInterceptorService } from "@univerjs/docs";
 import { IRenderManagerService, Liquid, GlyphType, DocumentSkeletonPageType, getPageFromPath, getTableIdAndSliceIndex, NORMAL_TEXT_SELECTION_PLUGIN_STYLE, getColor, RegularPolygon, Rect, getOffsetRectForDom, ScrollTimer, CURSOR_TYPE, getSystemHighlightColor, Vector2, PageLayoutType, DocumentEditArea, Shape, Path, getCharSpaceApply, getNumberUnitValue, hasListGlyph, isIndentByGlyph, isFirstGlyph, getParagraphByGlyph, pixelToPt, ptToPixel, parseDataStreamToTree, Viewport, ScrollBar, Layer, Documents, DocBackground, lineIterator, getLastLine, pxToNum, TRANSFORM_CHANGE_OBSERVABLE_TYPE, UniverRenderEnginePlugin } from "@univerjs/engine-render";
 import * as require$$0 from "react";
@@ -65,7 +65,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));
@@ -2933,7 +2933,7 @@ function genSnapShotByValue(id = "", value = "") {
     },
     tableSource: {},
     documentStyle: {
-      documentFlavor: DocumentFlavor.MODERN
+      documentFlavor: DocumentFlavor.UNSPECIFIED
     }
   };
 }
@@ -3423,7 +3423,56 @@ function RangeSelector(props) {
   ] });
 }
 __name(RangeSelector, "RangeSelector");
-const COMPONENT_DOC_HEADER_FOOTER_PANEL = "COMPONENT_DOC_HEADER_FOOTER_PANEL", panel = "univer-panel", optionsSection = "univer-options-section", optionsFormItem = "univer-options-form-item", optionsInput = "univer-options-input", optionsMarginSetting = "univer-options-margin-setting", styles$5 = {
+const 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(), documentFlavor = docDataModel.getSnapshot().documentStyle.documentFlavor, docRanges = docSelectionManagerService.getDocRanges(), doMutation = {
+      id: RichTextEditingMutation.id,
+      params: {
+        unitId,
+        actions: [],
+        textRanges: docRanges
+      }
+    }, jsonX = JSONX.getInstance(), rawActions = [];
+    let action;
+    if (documentFlavor === void 0 ? action = jsonX.insertOp(["documentStyle", "documentFlavor"], DocumentFlavor.MODERN) : documentFlavor === DocumentFlavor.MODERN ? action = jsonX.replaceOp(["documentStyle", "documentFlavor"], documentFlavor, DocumentFlavor.TRADITIONAL) : action = jsonX.replaceOp(["documentStyle", "documentFlavor"], documentFlavor, DocumentFlavor.MODERN), action)
+      rawActions.push(action);
+    else
+      return !1;
+    if (documentFlavor !== DocumentFlavor.MODERN) {
+      const snapshot = docDataModel.getSnapshot(), { drawings = {}, body } = snapshot, customBlocks = (_c = body == null ? void 0 : body.customBlocks) != null ? _c : [];
+      for (const drawingId in drawings) {
+        const drawing = drawings[drawingId], customBlock = customBlocks.find((block) => block.blockId === drawingId);
+        if (customBlock == null)
+          continue;
+        const drawingPositionV = drawing.docTransform.positionV, { relativeFrom: prevRelativeFrom, posOffset: prevPosOffset } = drawingPositionV;
+        if (prevRelativeFrom === ObjectRelativeFromV.PARAGRAPH)
+          continue;
+        const { startIndex } = customBlock, glyph = skeleton.findNodeByCharIndex(startIndex, segmentId, segmentPage), line = (_d = glyph == null ? void 0 : glyph.parent) == null ? void 0 : _d.parent, column = line == null ? void 0 : line.parent, paragraphStartLine = column == null ? void 0 : column.lines.find((l2) => l2.paragraphIndex === (line == null ? void 0 : line.paragraphIndex) && l2.paragraphStart), page = (_e = column == null ? void 0 : column.parent) == null ? void 0 : _e.parent;
+        if (glyph == null || line == null || paragraphStartLine == null || column == null || page == null)
+          continue;
+        let delta = 0;
+        prevRelativeFrom === ObjectRelativeFromV.LINE ? delta -= line.top : prevRelativeFrom === ObjectRelativeFromV.PAGE && (delta += page.marginTop), delta += paragraphStartLine.top;
+        const newPositionV = {
+          ...drawingPositionV,
+          relativeFrom: ObjectRelativeFromV.PARAGRAPH,
+          posOffset: (prevPosOffset != null ? prevPosOffset : 0) - delta
+        }, updateDrawingAction = jsonX.replaceOp(["drawings", drawingId, "docTransform", "positionV"], drawingPositionV, newPositionV);
+        updateDrawingAction && rawActions.push(updateDrawingAction);
+      }
+    }
+    return doMutation.params.actions = rawActions.reduce((acc, cur) => JSONX.compose(acc, cur), null), !!commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+  }, "handler")
+}, COMPONENT_DOC_HEADER_FOOTER_PANEL = "COMPONENT_DOC_HEADER_FOOTER_PANEL", panel = "univer-panel", optionsSection = "univer-options-section", optionsFormItem = "univer-options-form-item", optionsInput = "univer-options-input", optionsMarginSetting = "univer-options-margin-setting", styles$5 = {
   panel,
   optionsSection,
   optionsFormItem,
@@ -3436,7 +3485,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 +3535,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;
@@ -3698,7 +3744,17 @@ let DocHeaderFooterController = (_a3 = class extends Disposable {
     this._context = _context, this._commandService = _commandService, this._editorService = _editorService, this._instanceSrv = _instanceSrv, this._renderManagerService = _renderManagerService, this._docSkeletonManagerService = _docSkeletonManagerService, this._docSelectionRenderService = _docSelectionRenderService, this._localeService = _localeService, this._componentManager = _componentManager, this._initialize();
   }
   _initialize() {
-    this._context.unit.getSnapshot().documentStyle.documentFlavor === DocumentFlavor.TRADITIONAL && (this._init(), this._drawHeaderFooterLabel(), this._initCustomComponents());
+    this._init(), this._drawHeaderFooterLabel(), this._initCustomComponents(), this._listenSwitchMode();
+  }
+  // Close header footer panel when switch mode.
+  _listenSwitchMode() {
+    this.disposeWithMe(
+      this._commandService.beforeCommandExecuted((command) => {
+        SwitchDocModeCommand.id === command.id && this._docSkeletonManagerService.getViewModel().getEditArea() !== DocumentEditArea.BODY && this._commandService.executeCommand(CloseHeaderFooterCommand.id, {
+          unitId: this._context.unitId
+        });
+      })
+    );
   }
   _initCustomComponents() {
     const componentManager = this._componentManager;
@@ -3711,7 +3767,7 @@ let DocHeaderFooterController = (_a3 = class extends Disposable {
   _initialMain(unitId) {
     const docObject = neoGetDocObject(this._context), { document: document2 } = docObject;
     this.disposeWithMe(document2.onDblclick$.subscribeEvent(async (evt) => {
-      if (this._isEditorReadOnly(unitId))
+      if (this._isEditorReadOnly(unitId) || !this._isTraditionalMode())
         return;
       const { offsetX, offsetY } = evt, {
         pageLayoutType = PageLayoutType.VERTICAL,
@@ -3756,7 +3812,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,6 +3880,9 @@ 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;
   }
@@ -3979,6 +4038,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.replaceTextRanges([]), 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" }));
+  }, "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,
@@ -7767,6 +7837,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 +8214,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 +8427,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,
@@ -8486,6 +8611,10 @@ const menuSchema = {
     [OpenHeaderFooterPanelCommand.id]: {
       order: 9,
       menuItemFactory: HeaderFooterMenuItemFactory
+    },
+    [SwitchDocModeCommand.id]: {
+      order: 10,
+      menuItemFactory: DocSwitchModeMenuItemFactory
     }
   },
   [ContextMenuPosition.MAIN_AREA]: {
@@ -8687,8 +8816,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;
@@ -8733,8 +8862,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 +8895,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 +8907,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) {
@@ -10441,8 +10571,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
@@ -10625,6 +10755,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 +10787,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([
@@ -10712,7 +10852,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 +10938,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 +10949,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 +11110,7 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
       DocTableDeleteRowsCommand,
       DocTableDeleteColumnsCommand,
       DocTableDeleteTableCommand,
+      CloseHeaderFooterCommand,
       DocTableTabCommand,
       TabCommand,
       AfterSpaceCommand,
@@ -10975,6 +11121,7 @@ let UniverDocsUIPlugin = (_a27 = class extends Plugin {
       ToggleCheckListCommand,
       QuickListCommand,
       IMEInputCommand,
+      SwitchDocModeCommand,
       DocParagraphSettingCommand,
       InnerPasteCommand,
       CutContentCommand,

package/lib/locale/en-US.json

@@ -28,6 +28,7 @@
     "order": "Ordered list",
     "unorder": "Unordered list",
     "checklist": "Task list",
+    "documentFlavor": "Modern Mode",
     "alignLeft": "Align Left",
     "alignCenter": "Align Center",
     "alignRight": "Align Right",

package/lib/locale/fa-IR.json

@@ -28,6 +28,7 @@
     "order": "لیست شماره‌دار",
     "unorder": "لیست بدون شماره",
     "checklist": "لیست وظیفه",
+    "documentFlavor": "Modern Mode",
     "alignLeft": "تراز چپ",
     "alignCenter": "تراز وسط",
     "alignRight": "تراز راست",

package/lib/locale/ru-RU.json

@@ -32,7 +32,8 @@
     "alignRight": "Выровнять по правому краю",
     "alignJustify": "Выровнять по ширине",
     "headerFooter": "Header & Footer",
-    "checklist": "Task list"
+    "checklist": "Task list",
+    "documentFlavor": "Modern Mode"
   },
   "table": {
     "insert": "Insert",

package/lib/locale/vi-VN.json

@@ -32,7 +32,8 @@
     "alignRight": "Căn phải",
     "alignJustify": "Căn đều hai bên",
     "headerFooter": "Đầu trang và chân trang",
-    "checklist": "Task list"
+    "checklist": "Task list",
+    "documentFlavor": "Modern Mode"
   },
   "table": {
     "insert": "Insert",

package/lib/locale/zh-CN.json

@@ -28,6 +28,7 @@
     "order": "有序列表",
     "unorder": "无序列表",
     "checklist": "任务列表",
+    "documentFlavor": "现代模式",
     "alignLeft": "左对齐",
     "alignCenter": "居中对齐",
     "alignRight": "右对齐",

package/lib/locale/zh-TW.json

@@ -32,7 +32,8 @@
     "alignRight": "右對齊",
     "alignJustify": "兩端對齊",
     "headerFooter": "頁眉頁腳",
-    "checklist": "任務列表"
+    "checklist": "任務列表",
+    "documentFlavor": "现代模式"
   },
   "table": {
     "insert": "Insert",

package/lib/types/commands/commands/doc-header-footer.command.d.ts

@@ -20,4 +20,8 @@ export declare const CoreHeaderFooterCommand: ICommand<ICoreHeaderFooterParams>;
 interface IOpenHeaderFooterPanelParams {
 }
 export declare const OpenHeaderFooterPanelCommand: ICommand<IOpenHeaderFooterPanelParams>;
+interface ICloseHeaderFooterParams {
+    unitId: string;
+}
+export declare const CloseHeaderFooterCommand: ICommand<ICloseHeaderFooterParams>;
 export {};

package/lib/types/commands/commands/switch-doc-mode.command.d.ts

@@ -0,0 +1,4 @@
+import { ICommand } from '@univerjs/core';
+export interface ISwitchDocModeCommandParams {
+}
+export declare const SwitchDocModeCommand: ICommand<ISwitchDocModeCommandParams>;

package/lib/types/controllers/doc-header-footer.controller.d.ts

@@ -25,11 +25,13 @@ export declare class DocHeaderFooterController extends Disposable implements IRe
     private _loadedMap;
     constructor(_context: IRenderContext<DocumentDataModel>, _commandService: ICommandService, _editorService: IEditorService, _instanceSrv: IUniverInstanceService, _renderManagerService: IRenderManagerService, _docSkeletonManagerService: DocSkeletonManagerService, _docSelectionRenderService: DocSelectionRenderService, _localeService: LocaleService, _componentManager: ComponentManager);
     private _initialize;
+    private _listenSwitchMode;
     private _initCustomComponents;
     private _init;
     private _initialMain;
     private _getTransformCoordForDocumentOffset;
     private _drawHeaderFooterLabel;
     private _isEditorReadOnly;
+    private _isTraditionalMode;
     private _getDocDataModel;
 }

package/lib/types/controllers/menu/menu.d.ts

@@ -21,5 +21,6 @@ export declare function AlignJustifyMenuItemFactory(accessor: IAccessor): IMenuB
 export declare function OrderListMenuItemFactory(accessor: IAccessor): IMenuSelectorItem<PresetListType, PresetListType>;
 export declare function BulletListMenuItemFactory(accessor: IAccessor): IMenuSelectorItem<PresetListType, PresetListType>;
 export declare function CheckListMenuItemFactory(accessor: IAccessor): IMenuButtonItem;
+export declare function DocSwitchModeMenuItemFactory(accessor: IAccessor): IMenuButtonItem;
 export declare function ResetBackgroundColorMenuItemFactory(accessor: IAccessor): IMenuButtonItem;
 export declare function BackgroundColorSelectorMenuItemFactory(accessor: IAccessor): IMenuSelectorItem<string>;

package/lib/types/controllers/render-controllers/doc.render-controller.d.ts

@@ -1,18 +1,17 @@
-import { DocumentDataModel, ICommandService, IContextService, IUniverInstanceService, RxDisposable } from '@univerjs/core';
+import { DocumentDataModel, ICommandService, IUniverInstanceService, RxDisposable } from '@univerjs/core';
 import { IRenderContext, IRenderModule, IRenderManagerService } from '@univerjs/engine-render';
 import { DocSkeletonManagerService } from '@univerjs/docs';
 import { IEditorService } from '../../services/editor/editor-manager.service';
 import { DocSelectionRenderService } from '../../services/selection/doc-selection-render.service';
 export declare class DocRenderController extends RxDisposable implements IRenderModule {
     private readonly _context;
-    private readonly _contextService;
     private readonly _commandService;
     private readonly _docSelectionRenderService;
     private readonly _docSkeletonManagerService;
     private readonly _editorService;
     private readonly _renderManagerService;
     private readonly _univerInstanceService;
-    constructor(_context: IRenderContext<DocumentDataModel>, _contextService: IContextService, _commandService: ICommandService, _docSelectionRenderService: DocSelectionRenderService, _docSkeletonManagerService: DocSkeletonManagerService, _editorService: IEditorService, _renderManagerService: IRenderManagerService, _univerInstanceService: IUniverInstanceService);
+    constructor(_context: IRenderContext<DocumentDataModel>, _commandService: ICommandService, _docSelectionRenderService: DocSelectionRenderService, _docSkeletonManagerService: DocSkeletonManagerService, _editorService: IEditorService, _renderManagerService: IRenderManagerService, _univerInstanceService: IUniverInstanceService);
     reRender(unitId: string): void;
     private _addNewRender;
     private _addComponent;

package/lib/types/controllers/render-controllers/zoom.render-controller.d.ts

@@ -1,6 +1,6 @@
-import { Disposable, ICommandService, IContextService, IUniverInstanceService, DocumentDataModel } from '@univerjs/core';
-import { DocSelectionManagerService, DocSkeletonManagerService } from '@univerjs/docs';
+import { DocumentDataModel, Disposable, ICommandService, IContextService, IUniverInstanceService } from '@univerjs/core';
 import { IRenderContext, IRenderModule } from '@univerjs/engine-render';
+import { DocSelectionManagerService, DocSkeletonManagerService } from '@univerjs/docs';
 import { DocPageLayoutService } from '../../services/doc-page-layout.service';
 import { IEditorService } from '../../services/editor/editor-manager.service';
 export declare class DocZoomRenderController extends Disposable implements IRenderModule {

package/lib/types/locale/zh-CN.d.ts

@@ -43,6 +43,7 @@ declare const locale: {
         order: string;
         unorder: string;
         checklist: string;
+        documentFlavor: string;
         alignLeft: string;
         alignCenter: string;
         alignRight: string;

package/lib/types/services/doc-auto-format.service.d.ts

@@ -1,6 +1,6 @@
-import { Disposable, IUniverInstanceService, DocumentDataModel, ICommandInfo, ICustomRange, IDisposable, IParagraphRange, Nullable } from '@univerjs/core';
-import { DocSelectionManagerService } from '@univerjs/docs';
+import { DocumentDataModel, ICommandInfo, ICustomRange, IDisposable, IParagraphRange, Nullable, Disposable, IUniverInstanceService } from '@univerjs/core';
 import { ITextRangeWithStyle } from '@univerjs/engine-render';
+import { DocSelectionManagerService } from '@univerjs/docs';
 export interface IAutoFormatContext {
     unit: DocumentDataModel;
     selection: ITextRangeWithStyle;

package/lib/types/services/selection/text-range.d.ts

@@ -1,5 +1,5 @@
-import { DOC_RANGE_TYPE, RANGE_DIRECTION, Nullable } from '@univerjs/core';
-import { Rect, Documents, DocumentSkeleton, INodePosition, IPoint, ISuccinctDocRangeParam, ITextSelectionStyle, Scene, ThinScene } from '@univerjs/engine-render';
+import { Nullable, DOC_RANGE_TYPE, RANGE_DIRECTION } from '@univerjs/core';
+import { Documents, DocumentSkeleton, INodePosition, IPoint, ISuccinctDocRangeParam, ITextSelectionStyle, Scene, ThinScene, Rect } from '@univerjs/engine-render';
 import { IDocRange } from './range-interface';
 export declare const TEXT_RANGE_LAYER_INDEX = 3;
 export declare function cursorConvertToTextRange(scene: Scene, range: ISuccinctDocRangeParam, docSkeleton: DocumentSkeleton, document: Documents): Nullable<TextRange>;

package/lib/types/views/doc-container/DocContainer.d.ts

@@ -1,5 +1,5 @@
-import { default as React, Component } from 'react';
 import { IUniverDocsUIConfig } from '../../controllers/config.schema';
+import { default as React, Component } from 'react';
 interface IBaseDocContainerProps {
     config: IUniverDocsUIConfig;
     changeLocale: (locale: string) => void;