@univerjs/docs-ui 1.0.3 → 1.1.0

package/lib/index.js

@@ -1,15 +1,15 @@
-import { BaselineOffset, BlockType, BooleanNumber, BuildTextUtils, COLORS, ColorKit, ColumnSeparatorType, CommandType, CustomDecorationType, CustomRangeType, DEFAULT_DOCUMENT_PARAGRAPH_LINE_SPACING, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_ABOVE, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_BELOW, DEFAULT_EMPTY_DOCUMENT_VALUE, DEFAULT_STYLES, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DOC_RANGE_TYPE, DashStyleType, DataStreamTreeNodeType, DataStreamTreeTokenType, DeleteDirection, DependentOn, Direction, Disposable, DisposableCollection, DocumentBlockRangeType, DocumentBlockType, DocumentFlavor, DrawingTypeEnum, EDITOR_ACTIVATED, ErrorService, FOCUSING_COMMENT_EDITOR, FOCUSING_COMMON_DRAWINGS, FOCUSING_DOC, FOCUSING_EDITOR_STANDALONE, FOCUSING_SHAPE_TEXT_EDITOR, FOCUSING_UNIVER_EDITOR, HorizontalAlign, ICommandService, IConfigService, IConfirmService, IContextService, ILogService, IPermissionService, IUndoRedoService, IUniverInstanceService, ImageSourceType, Inject, Injector, InterceptorManager, JSON1, JSONX, LOCALE_META, LRUMap, ListGlyphType, LocaleService, MODERN_DOCUMENT_DEFAULT_MARGIN, MODERN_DOCUMENT_WIDTH, MemoryCursor, ModernDocumentWidthMode, NAMED_STYLE_MAP, NamedStyleType, ObjectPermissionService, ObjectRelativeFromH, ObjectRelativeFromV, Optional, PAGE_SIZE, PAPER_TYPES, PRESERVE_INSERTED_PARAGRAPH_IDS, PRESET_LIST_TYPE, PageOrientType, Plugin, PositionedObjectLayoutType, PresetListType, QuickListTypeMap, RANGE_DIRECTION, Rectangle, RedoCommand, RegionService, RichTextBuilder, RxDisposable, SHEET_EDITOR_UNITS, SectionType, SliceBodyType, SpacingRule, TableAlignmentType, TableRowHeightRule, TableSizeType, TableTextWrapType, TextX, TextXActionType, ThemeService, Tools, UndoCommand, UniverInstanceType, UpdateDocsAttributeType, VerticalAlign, checkForSubstrings, cloneBodyWithFreshParagraphIds, containsInteriorInsertionOffset, createIdentifier, createInterceptorKey, createInternalEditorID, createParagraphId, createSectionId, debounce, fromEventSubject, generateRandomId, getBlockRangeInterval, getBodySlice, getBodySliceForTextXAction, getColorStyle, getCustomBlockIdsInSelections, getParagraphContentStartOffset, getParagraphContentStartOffsets, getPlainText, getRichTextEditPath, getSectionHeaderFooterReferenceKey, getTableRangeInterval, getTextRunSlice, isCommentEditorID, isInternalEditorID, isSafeUrl, merge, mergeOverrideWithDependencies, normalizeBody, remove, resolveDocumentParagraphStyle, resolveSectionHeaderFooterReference, resolveSectionHeaderFooterReferences, sequenceExecuteAsync, skipParseTagNames, toDisposable, touchDependencies, validateDocBodyStructure } from "@univerjs/core";
-import { CreateHeaderFooterCommand, DeleteTextCommand, DocBlockMoveValidatorService, DocContentInsertService, DocHistoryAction, DocInterceptorService, DocLayoutExecutorService, DocLayoutExecutorState, DocLayoutSessionStatus, DocSelectionManagerService, DocSkeletonManagerService, DocStateChangeManagerService, DocStateEmitService, HeaderFooterType, IDocStateChangeInterceptorService, InsertDocumentColumnBreakCommand, InsertDocumentSectionBreakCommand, InsertTextCommand, RichTextEditingMutation, SetDocumentPermissionCommand, SetSectionHeaderFooterLinkCommand, SetTextSelectionsOperation, UniverDocsPlugin, UpdateDocumentSectionCommand, UpdateTextCommand, buildDocTransform, canEditDocumentTargets, consumeContentInsertRange, createSectionColumnProperties, generateParagraphs, getDocumentEditTargetObjectIds, getDocumentParagraphPermissionObjectId, getDocumentPermissionValue, getDocumentSectionPermissionObjectId, getTopLevelSectionBreaks, isSheetLikeDocsCustomBlockChildType, resolveDocsCustomBlockSize, shouldUseInlineTextSelectionForDocsCustomBlockDrawing } from "@univerjs/docs";
+import { BaselineOffset, BlockType, BooleanNumber, BuildTextUtils, COLORS, ColorKit, ColumnSeparatorType, CommandType, CustomDecorationType, CustomRangeType, DEFAULT_DOCUMENT_PARAGRAPH_LINE_SPACING, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_ABOVE, DEFAULT_DOCUMENT_PARAGRAPH_SPACE_BELOW, DEFAULT_EMPTY_DOCUMENT_VALUE, DEFAULT_STYLES, DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DOC_RANGE_TYPE, DashStyleType, DataStreamTreeNodeType, DataStreamTreeTokenType, DeleteDirection, DependentOn, Direction, Disposable, DisposableCollection, DocumentBlockRangeType, DocumentBlockType, DocumentFlavor, DrawingTypeEnum, EDITOR_ACTIVATED, ErrorService, FOCUSING_COMMENT_EDITOR, FOCUSING_COMMON_DRAWINGS, FOCUSING_DOC, FOCUSING_EDITOR_STANDALONE, FOCUSING_FX_BAR_EDITOR, FOCUSING_SHAPE_TEXT_EDITOR, FOCUSING_UNIVER_EDITOR, HorizontalAlign, ICommandService, IConfigService, IConfirmService, IContextService, ILogService, IPermissionService, IUndoRedoService, IUniverInstanceService, ImageSourceType, Inject, Injector, InterceptorManager, JSON1, JSONX, LOCALE_META, LRUMap, ListGlyphType, LocaleService, MODERN_DOCUMENT_DEFAULT_MARGIN, MODERN_DOCUMENT_WIDTH, MemoryCursor, ModernDocumentWidthMode, NAMED_STYLE_MAP, NamedStyleType, ObjectPermissionService, ObjectRelativeFromH, ObjectRelativeFromV, Optional, PAGE_SIZE, PAPER_TYPES, PRESERVE_INSERTED_PARAGRAPH_IDS, PRESET_LIST_TYPE, PageOrientType, Plugin, PositionedObjectLayoutType, PresetListType, QuickListTypeMap, RANGE_DIRECTION, Rectangle, RedoCommand, RegionService, RichTextBuilder, RxDisposable, SHEET_EDITOR_UNITS, SectionType, SliceBodyType, SpacingRule, TableAlignmentType, TableRowHeightRule, TableSizeType, TableTextWrapType, TextX, TextXActionType, ThemeService, Tools, UndoCommand, UniverInstanceType, UpdateDocsAttributeType, VerticalAlign, checkForSubstrings, cloneBodyWithFreshParagraphIds, containsInteriorInsertionOffset, createIdentifier, createInterceptorKey, createInternalEditorID, createParagraphId, createSectionId, debounce, fromEventSubject, generateRandomId, getBlockRangeInterval, getBodySlice, getBodySliceForTextXAction, getColorStyle, getCustomBlockIdsInSelections, getParagraphContentStartOffset, getParagraphContentStartOffsets, getPlainText, getRichTextEditPath, getSectionHeaderFooterReferenceKey, getTableRangeInterval, getTextRunSlice, isCommentEditorID, isInternalEditorID, isSafeUrl, merge, mergeOverrideWithDependencies, normalizeBody, remove, resolveDocumentParagraphStyle, resolveSectionHeaderFooterReference, resolveSectionHeaderFooterReferences, sequenceExecuteAsync, skipParseTagNames, toDisposable, touchDependencies, validateDocBodyStructure } from "@univerjs/core";
+import { CreateHeaderFooterCommand, DeleteTextCommand, DocBlockMoveValidatorService, DocContentInsertService, DocHistoryAction, DocInterceptorService, DocLayoutExecutorService, DocLayoutExecutorState, DocLayoutSessionStatus, DocSelectionManagerService, DocSkeletonManagerService, DocStateChangeManagerService, DocStateEmitService, HeaderFooterType, IDocStateChangeInterceptorService, InsertDocumentColumnBreakCommand, InsertDocumentSectionBreakCommand, InsertTextCommand, RichTextEditingMutation, SetDocumentPermissionCommand, SetSectionHeaderFooterLinkCommand, SetTextSelectionsOperation, UniverDocsPlugin, UpdateDocumentSectionCommand, UpdateTextCommand, buildDocTransform, canEditDocumentTargets, consumeContentInsertRange, createSectionColumnProperties, generateParagraphs, getDocumentEditTargetObjectIds, getDocumentParagraphPermissionObjectId, getDocumentPermissionValue, getDocumentSectionPermissionObjectId, getTopLevelSectionBreaks, isSheetLikeDocsCustomBlockChildType, resolveDocsCustomBlockSize, shouldUseInlineTextSelectionForDocsCustomBlockDrawing, transformDocumentTextRanges } from "@univerjs/docs";
 import * as EngineRender from "@univerjs/engine-render";
 import { BaseObject, CURSOR_TYPE, DRAWING_OBJECT_UPPER_LAYER_INDEX, DeviceInputEventType, DocBackground, DocumentEditArea, DocumentSkeletonPageType, Documents, GlyphType, IRenderManagerService, Layer, LineType, Liquid, NORMAL_TEXT_SELECTION_PLUGIN_STYLE, PageLayoutType, Path, RENDER_CLASS_TYPE, Rect, RegularPolygon, ScrollBar, ScrollTimer, Shape, TRANSFORM_CHANGE_OBSERVABLE_TYPE, UniverRenderEnginePlugin, Vector2, Viewport, compareDocumentSkeletonNestedPagePathOrder, documentSkeletonLineIterator, documentSkeletonTableIterator, getColor, getDocsTableRenderViewport, getDocsTableViewportLeft, getDocumentSkeletonColumnPagePathInfo, getDocumentSkeletonNestedPageOffset, getLastColumn, getNextWheelZoomRatio, getNumberUnitValue, getOffsetRectForDom, getPageFromPath, getParagraphByGlyph, getSystemHighlightColor, getTableIdAndSliceIndex, getTopmostDocsTableHit, hasListGlyph, isFirstGlyph, isIndentByGlyph, parseDataStreamToTree, pixelToPt, ptToPixel, pxToNum, registerDocumentLayoutPresentation } from "@univerjs/engine-render";
-import { Button, Checkbox, Dropdown, DropdownMenu, InputNumber, MessageType, MobileSelect, Popup, Select, Separator, Tooltip, borderClassName, clsx, resetButtonClassName, scrollbarClassName, useMobileKeyboardViewportLayout } from "@univerjs/design";
-import { BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, ComponentManager, ContextMenuGroup, ContextMenuPanel, ContextMenuPosition, CopyCommand, CutCommand, EMOJI_PICKER_COMPONENT, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FormatPainterSessionService, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, ICanvasPopupService, IClipboardInterfaceService, IContextMenuService, ILayoutService, IMenuManagerService, IMessageService, IRibbonService, IShortcutService, ISidebarService, IUIPartsService, IWorkbenchService, IconManager, KeyCode, MOBILE_UI_MODE, MenuItemType, MenuManagerPosition, MetaKeys, MobileDrawer, MobileKeyboardInsetContext, MobileMenu, MobileZoomIndicator, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, RectPopup, RibbonInsertGroup, RibbonStartGroup, SYMBOL_PICKER_COMPONENT, Slider, ToolbarButton, ToolbarItem, UniverMobileUIPlugin, bindFormatPainterCanvas, connectInjector, getMenuHiddenObservable, getMobileCanvasPanDelta, imageMimeTypeSet, objectPermissionMenuItemFactory, openObjectPermissionDialog, openObjectPermissionPanel, preventBrowserZoomInContainers, useConfigValue, useDependency, useEvent, useInjector, useMobileCanvasPanel, useMobileCanvasViewport, useObservable } from "@univerjs/ui";
+import { Button, Checkbox, Dialog, Dropdown, DropdownMenu, InputNumber, MessageType, MobileColorPicker, MobileDropdown, MobileSelect, Popup, Select, Separator, Tooltip, borderClassName, clsx, resetButtonClassName, scrollbarClassName, selectClassName, useMobileKeyboardViewportLayout } from "@univerjs/design";
+import { BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, ComponentManager, ContextMenuGroup, ContextMenuPanel, ContextMenuPosition, CopyCommand, CutCommand, EMOJI_PICKER_COMPONENT, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FormatPainterSessionService, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, ICanvasPopupService, IClipboardInterfaceService, IContextMenuService, ILayoutService, IMenuManagerService, IMessageService, IRibbonService, IShortcutService, ISidebarService, IUIPartsService, IWorkbenchService, IconManager, KeyCode, MOBILE_UI_MODE, MenuItemType, MenuManagerPosition, MetaKeys, MobileDrawer, MobileKeyboardInsetContext, MobileMenu, MobileZoomIndicator, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, RectPopup, RibbonInsertGroup, RibbonStartGroup, RibbonViewGroup, SYMBOL_PICKER_COMPONENT, Slider, ToggleFullscreenOperation, ToolbarButton, ToolbarItem, UniverMobileUIPlugin, bindFormatPainterCanvas, connectInjector, getMenuHiddenObservable, getMobileCanvasPanDelta, imageMimeTypeSet, objectPermissionMenuItemFactory, openObjectPermissionDialog, openObjectPermissionPanel, preventBrowserZoomInContainers, useConfigValue, useDependency, useEvent, useInjector, useMobileCanvasPanel, useMobileCanvasViewport, useObservable } from "@univerjs/ui";
 import { UnitAction, UnitObject } from "@univerjs/protocol";
 import { BehaviorSubject, EMPTY, Observable, Subject, animationFrameScheduler, auditTime, combineLatest, debounceTime, distinctUntilChanged, filter, first, fromEvent, map, merge as merge$1, observeOn, of, shareReplay, startWith, switchMap, take, takeUntil, tap, throttleTime } from "rxjs";
 import { bufferTime, filter as filter$1, map as map$1 } from "rxjs/operators";
-import { createElement, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createElement, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AddImageIcon, AlignTextBothIcon, BoldIcon, CatalogueIcon, CheckMarkIcon, CloseIcon, ColorWheelMultiIcon, ColumnIcon, CopyDoubleIcon, CutIcon, DeleteColumnDoubleIcon, DeleteIcon, DeleteRowDoubleIcon, DeleteTableDoubleIcon, DocPasteOptionsIcon, DocSettingIcon, DownIcon, FontColorDoubleIcon, GridIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, HeaderFooterIcon, HorizontallyIcon, InsertDoubleIcon, InsertRowAboveDoubleIcon, InsertRowBelowDoubleIcon, ItalicIcon, KeyboardIcon, LeftInsertColumnDoubleIcon, LeftJustifyingIcon, LineIndentDecreaseIcon, LineIndentIncreaseIcon, LoadingMultiIcon, MenuIcon, MoreHorizontalIcon, MoreLeftIcon, MoreRightIcon, NoColorDoubleIcon, OrderIcon, PaintBucketDoubleIcon, ParagraphSettingIcon, PasteSpecialDoubleIcon, QuickAddIcon, ReduceDoubleIcon, ReduceIcon, RightInsertColumnDoubleIcon, RightJustifyingIcon, SectionSettingIcon, ShapeIcon, SmileIcon, StatisticalFunctionIcon, StrikethroughIcon, SubscriptIcon, SubtitleTypeIcon, SuperscriptIcon, SymbolsIcon, TextColorSwatchDoubleIcon, TextIcon, TextTypeIcon, TitleTypeIcon, TodoListDoubleIcon, UnderlineIcon, UnorderIcon, WriteIcon } from "@univerjs/icons";
+import { AddImageIcon, AlignTextBothIcon, BoldIcon, CalendarIcon, CatalogueIcon, CheckMarkIcon, CloseIcon, ColorWheelMultiIcon, ColumnIcon, CopyDoubleIcon, CutIcon, DeleteColumnDoubleIcon, DeleteIcon, DeleteRowDoubleIcon, DeleteTableDoubleIcon, DocPasteOptionsIcon, DocSettingIcon, DownIcon, FontColorDoubleIcon, GridIcon, H1Icon, H2Icon, H3Icon, H4Icon, H5Icon, HeaderFooterIcon, HorizontallyIcon, InsertBelowDoubleIcon, InsertDoubleIcon, InsertRowAboveDoubleIcon, InsertRowBelowDoubleIcon, ItalicIcon, KeyboardIcon, LeftInsertColumnDoubleIcon, LeftJustifyingIcon, LineIndentDecreaseIcon, LineIndentIncreaseIcon, LoadingMultiIcon, MenuIcon, MoreDownIcon, MoreHorizontalIcon, MoreLeftIcon, MoreRightIcon, NoColorDoubleIcon, NumberIcon, OrderIcon, PaintBucketDoubleIcon, ParagraphSettingIcon, PasteSpecialDoubleIcon, QuickAddIcon, ReduceDoubleIcon, ReduceIcon, RightInsertColumnDoubleIcon, RightJustifyingIcon, SectionSettingIcon, ShapeIcon, SmileIcon, StatisticalFunctionIcon, StrikethroughIcon, SubscriptIcon, SubtitleTypeIcon, SuperscriptIcon, SymbolsIcon, TextColorSwatchDoubleIcon, TextIcon, TextTypeIcon, TitleTypeIcon, TodoListDoubleIcon, UnderlineIcon, UnorderIcon, WriteIcon, ZoomInIcon } from "@univerjs/icons";
 import { getDrawingShapeKeyByDrawingSearch } from "@univerjs/drawing";
 
 //#region src/basics/docs-view-key.ts
@@ -242,7 +242,7 @@ function getCustomDecorationAtPosition(customDecorations, position) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -253,7 +253,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -266,14 +266,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -284,7 +284,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -292,7 +292,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -408,8 +408,8 @@ let DocMenuStyleService = class DocMenuStyleService extends Disposable {
 		}));
 	}
 	_listenDocRangeChange() {
-		this.disposeWithMe(this._textSelectionManagerService.textSelection$.subscribe(() => {
-			this._clearStyleCache();
+		this.disposeWithMe(this._textSelectionManagerService.textSelection$.subscribe(({ options }) => {
+			if (!(options === null || options === void 0 ? void 0 : options.preserveInputStyle)) this._clearStyleCache();
 		}));
 	}
 	getStyleCache() {
@@ -1643,10 +1643,10 @@ var NodePositionConvertToCursor = class {
 			let segmentPage = page;
 			if (pageType === DocumentSkeletonPageType.HEADER) {
 				var _skeHeaders$get;
-				segmentPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+				segmentPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(page.headerLayoutKey ?? pageWidth);
 			} else if (pageType === DocumentSkeletonPageType.FOOTER) {
 				var _skeFooters$get;
-				segmentPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+				segmentPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(page.footerLayoutKey ?? pageWidth);
 			} else if (pageType === DocumentSkeletonPageType.NOTE) {
 				var _getPageFromPath3, _page$notes;
 				const noteId = (_getPageFromPath3 = getPageFromPath(skeletonData, path)) === null || _getPageFromPath3 === void 0 ? void 0 : _getPageFromPath3.segmentId;
@@ -1813,8 +1813,8 @@ function getCellPageFromSegmentPath(skeletonData, rootPage, path) {
 	if (path[0] === "pages") return null;
 	const segmentPages = [];
 	const { headerId, footerId, pageWidth } = rootPage;
-	const headerPage = headerId == null ? null : (_skeletonData$skeHead = skeletonData.skeHeaders.get(headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(pageWidth);
-	const footerPage = footerId == null ? null : (_skeletonData$skeFoot = skeletonData.skeFooters.get(footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(pageWidth);
+	const headerPage = headerId == null ? null : (_skeletonData$skeHead = skeletonData.skeHeaders.get(headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(rootPage.headerLayoutKey ?? pageWidth);
+	const footerPage = footerId == null ? null : (_skeletonData$skeFoot = skeletonData.skeFooters.get(footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(rootPage.footerLayoutKey ?? pageWidth);
 	if (headerPage != null) segmentPages.push(headerPage);
 	if (footerPage != null) segmentPages.push(footerPage);
 	for (const segmentPage of segmentPages) {
@@ -2229,7 +2229,7 @@ function getCellPageFromPositionPath(skeletonData, position) {
 	const rootPage = skeletonData.pages[segmentPage];
 	if (rootPage == null) return null;
 	const { headerId, footerId, pageWidth } = rootPage;
-	const segmentPages = [headerId == null ? null : (_skeletonData$skeHead = skeletonData.skeHeaders.get(headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(pageWidth), footerId == null ? null : (_skeletonData$skeFoot = skeletonData.skeFooters.get(footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(pageWidth)];
+	const segmentPages = [headerId == null ? null : (_skeletonData$skeHead = skeletonData.skeHeaders.get(headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(rootPage.headerLayoutKey ?? pageWidth), footerId == null ? null : (_skeletonData$skeFoot = skeletonData.skeFooters.get(footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(rootPage.footerLayoutKey ?? pageWidth)];
 	for (const segmentPage of segmentPages) {
 		if (segmentPage == null) continue;
 		const page = getPageFromPath({
@@ -3169,6 +3169,20 @@ function getWordBoundaryByIndex(content, nodeIndex, paragraphStartOffset) {
 		endOffset: paragraphStartOffset + range.end
 	};
 }
+function getWordSelectionByIndex(content, nodeIndex, paragraphStartOffset, isBack) {
+	var _segments;
+	const text = content.replace(/[\r\n]+$/, "");
+	if (!text.length || nodeIndex < 0) return null;
+	const index = Math.min(nodeIndex, text.length - 1);
+	const segments = Array.from(new Intl.Segmenter(void 0, { granularity: "word" }).segment(text));
+	const segmentIndex = segments.findIndex((segment) => segment.index <= index && index < segment.index + segment.segment.length);
+	const segment = segments[segmentIndex];
+	const whitespace = /^\s+$/.test(segment.segment);
+	return {
+		startOffset: paragraphStartOffset + (whitespace ? ((_segments = segments[segmentIndex - 1]) === null || _segments === void 0 ? void 0 : _segments.index) ?? segment.index : segment.index),
+		endOffset: paragraphStartOffset + (whitespace ? Math.min(nodeIndex + (isBack ? 0 : 1), text.length) : segment.index + segment.segment.length)
+	};
+}
 function getNextWordBoundaryOffset(content, nodeIndex, paragraphStartOffset, direction) {
 	if (nodeIndex < 0) return null;
 	const ranges = getWordRanges(content);
@@ -3198,6 +3212,12 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 	get isFocusing() {
 		return this._input === this._getOwnerDocument().activeElement;
 	}
+	get inputElement() {
+		return this._input;
+	}
+	get selectionContainer() {
+		return this._container;
+	}
 	get isEditing() {
 		var _this$_textSelectionI;
 		return ((_this$_textSelectionI = this._textSelectionInner$.value) === null || _this$_textSelectionI === void 0 ? void 0 : _this$_textSelectionI.isEditing) === true;
@@ -3331,15 +3351,13 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		this._selectionStyle = style;
 	}
 	replaceDocRanges(ranges, isEditing = true, options) {
-		var _this$_context$unit$g;
 		if (this._onPointerEvent) {
 			this._pendingSelection = null;
 			return false;
 		}
 		this._syncNoteSegment(ranges[0]);
-		const isBodyOrNote = this._currentSegmentId === "" || ((_this$_context$unit$g = this._context.unit.getSnapshot().notes) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g[this._currentSegmentId]) != null;
 		let currentLogicalSelection = null;
-		if (isBodyOrNote && ranges.length > 0) {
+		if (ranges.length > 0) {
 			const { unitId } = this._context;
 			const selection = this._docSelectionManagerService.getSelectionInfo({
 				unitId,
@@ -3412,7 +3430,12 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 			this._addRectRanges(rectRanges);
 		};
 		for (const range of ranges) {
-			const { startOffset, endOffset, rangeType, startNodePosition, endNodePosition } = range;
+			const { rangeType } = range;
+			let { startOffset, endOffset, startNodePosition, endNodePosition } = range;
+			if (rangeType !== DOC_RANGE_TYPE.RECT && range.direction === RANGE_DIRECTION.BACKWARD && startOffset < endOffset) {
+				[startOffset, endOffset] = [endOffset, startOffset];
+				[startNodePosition, endNodePosition] = [endNodePosition, startNodePosition];
+			}
 			const rangeStyle = range.style ?? style;
 			if (rangeType !== DOC_RANGE_TYPE.RECT && startOffset === endOffset) {
 				const textRange = cursorConvertToTextRange(scene, {
@@ -3430,7 +3453,7 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 				if (startNodePosition && endNodePosition) textRange = getTextRangeFromCharIndex(startNodePosition.isBack ? startOffset : startOffset - 1, endNodePosition.isBack ? endOffset : endOffset - 1, scene, document, docSkeleton, rangeStyle, segmentId, segmentPage, startNodePosition.isBack, endNodePosition.isBack);
 				else textRange = getTextRangeFromCharIndex(startOffset, endOffset, scene, document, docSkeleton, rangeStyle, segmentId, segmentPage);
 				if (textRange) this._addTextRange(textRange);
-			} catch (_e) {
+			} catch {
 				generalAddRange(startOffset, endOffset, rangeStyle);
 			}
 			else generalAddRange(startOffset, endOffset, rangeStyle);
@@ -3520,7 +3543,7 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		if (paragraphInfo == null) return;
 		const { content, st, nodeIndex } = paragraphInfo;
 		if (nodeIndex === -1) return;
-		const wordBoundary = getWordBoundaryByIndex(content, nodeIndex, st);
+		const wordBoundary = this._context.unitId === DOCS_NORMAL_EDITOR_UNIT_ID_KEY || this._context.unitId === DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY ? getWordSelectionByIndex(content, nodeIndex, st, startNode.ratioX < .5) : getWordBoundaryByIndex(content, nodeIndex, st);
 		if (wordBoundary != null) {
 			this.removeAllRanges();
 			const textRanges = [{
@@ -4109,10 +4132,26 @@ let DocSelectionRenderService = class DocSelectionRenderService extends RxDispos
 		}));
 	}
 	_refreshMissingInputRange(config) {
+		var _this$_context$unit$g;
 		if (config.activeRange == null) {
 			config.activeRange = this._getActiveRange();
 			config.rangeList = this._getAllTextRanges();
 		}
+		const { unitId } = this._context;
+		if (config.activeRange != null || unitId !== DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY || ((_this$_context$unit$g = this._context.unit.getBody()) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.dataStream) !== "\r\n") return;
+		const selection = this._docSelectionManagerService.getSelectionInfo({
+			unitId,
+			subUnitId: unitId
+		});
+		if (selection == null || selection.textRanges.length !== 1 || selection.rectRanges.length > 0) return;
+		const caret = selection.textRanges[0];
+		if (!caret.isActive || caret.startOffset !== 0 || caret.endOffset !== 0) return;
+		config.activeRange = {
+			...caret,
+			segmentId: selection.segmentId,
+			segmentPage: selection.segmentPage
+		};
+		config.rangeList = [config.activeRange];
 	}
 	_handleInputFocus(event) {
 		this._eventHandle(event, (config) => {
@@ -5657,7 +5696,7 @@ const CutContentCommand = {
 	id: "doc.command.inner-cut",
 	type: CommandType.COMMAND,
 	handler: (accessor, params) => {
-		var _selectionInfo$option3;
+		var _selectionInfo$option3, _docDataModel$getSelf7;
 		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
 		const commandService = accessor.get(ICommandService);
 		const univerInstanceService = accessor.get(IUniverInstanceService);
@@ -5677,12 +5716,19 @@ const CutContentCommand = {
 		const docSkeletonManagerService = getCommandSkeleton(accessor, unitId);
 		if (docSkeletonManagerService == null) return false;
 		const viewModel = docSkeletonManagerService.getViewModel();
+		const body = (_docDataModel$getSelf7 = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf7 === void 0 ? void 0 : _docDataModel$getSelf7.getBody();
+		const clearsBody = wholeBodySelected || body != null && isWholeBodySelected(selections, rectRanges, body);
 		const doMutation = {
 			id: RichTextEditingMutation.id,
 			params: {
 				unitId,
 				actions: [],
-				textRanges,
+				textRanges: clearsBody ? [{
+					...textRanges[0],
+					startOffset: 0,
+					endOffset: 0,
+					collapsed: true
+				}] : textRanges,
 				trigger: CutContentCommand.id
 			}
 		};
@@ -5699,6 +5745,31 @@ function isHorizontalLineParagraph(dataStream, paragraph) {
 	return Array.from(dataStream).every((token) => token === DataStreamTreeTokenType.PARAGRAPH || token === DataStreamTreeTokenType.SECTION_BREAK) && (paragraphStyle === null || paragraphStyle === void 0 ? void 0 : paragraphStyle.borderBottom) != null && paragraphStyle.borderTop == null && paragraphStyle.borderLeft == null && paragraphStyle.borderRight == null && paragraphStyle.borderBetween == null;
 }
 
+//#endregion
+//#region src/commands/operations/doc-cursor.operation.ts
+/**
+* The operation to move cursor in the current document.
+*/
+const MoveCursorOperation = {
+	id: "doc.operation.move-cursor",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		if (!params) return false;
+		return true;
+	}
+};
+/**
+* The operation to move selection in the current document.
+*/
+const MoveSelectionOperation = {
+	id: "doc.operation.move-selection",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		if (!params) return false;
+		return true;
+	}
+};
+
 //#endregion
 //#region src/commands/commands/format-painter.command.ts
 function captureTextFormat(body, range, defaultStyle = {}, lists = {}, document = { documentStyle: {} }) {
@@ -6112,11 +6183,25 @@ function isDeleteOffsetInsideBlockRange(body, offset) {
 		return interval.startOffset < offset && offset < interval.endOffset - 1;
 	})) ?? false;
 }
+function selectDeleteBoundary(accessor, direction, granularity) {
+	var _selections$getActive, _selections$getRectRa;
+	const selections = accessor.get(DocSelectionManagerService);
+	if (((_selections$getActive = selections.getActiveTextRange()) === null || _selections$getActive === void 0 ? void 0 : _selections$getActive.collapsed) && !((_selections$getRectRa = selections.getRectRanges()) === null || _selections$getRectRa === void 0 ? void 0 : _selections$getRectRa.length)) {
+		var _selections$getActive2;
+		accessor.get(ICommandService).syncExecuteCommand(MoveSelectionOperation.id, {
+			direction,
+			granularity
+		});
+		return ((_selections$getActive2 = selections.getActiveTextRange()) === null || _selections$getActive2 === void 0 ? void 0 : _selections$getActive2.collapsed) === false;
+	}
+	return true;
+}
 const DeleteLeftCommand = {
 	id: "doc.command.delete-left",
 	type: CommandType.COMMAND,
-	handler: async (accessor) => {
+	handler: async (accessor, params) => {
 		var _docDataModel$getSelf3, _docDataModel$getSelf4;
+		if ((params === null || params === void 0 ? void 0 : params.granularity) && !selectDeleteBoundary(accessor, Direction.LEFT, params.granularity)) return true;
 		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
 		const univerInstanceService = accessor.get(IUniverInstanceService);
 		const commandService = accessor.get(ICommandService);
@@ -6276,8 +6361,9 @@ const DeleteLeftCommand = {
 const DeleteRightCommand = {
 	id: "doc.command.delete-right",
 	type: CommandType.COMMAND,
-	handler: async (accessor) => {
+	handler: async (accessor, params) => {
 		var _docDataModel$getSelf5;
+		if ((params === null || params === void 0 ? void 0 : params.granularity) && !selectDeleteBoundary(accessor, Direction.RIGHT, params.granularity)) return true;
 		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
 		const docDataModel = accessor.get(IUniverInstanceService).getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
 		if (!docDataModel) return false;
@@ -8452,23 +8538,39 @@ function getTableClipboardBodySlice(body, range) {
 	return getTableCellContentClipboardBodySlice(body, startOffset, endOffset);
 }
 function getTableCellContentClipboardBodySlice(body, start, end) {
-	var _bodySlice$textRuns, _bodySlice$tables, _bodySlice$paragraphs;
+	var _bodySlice$textRuns, _bodySlice$docxExport;
 	const bodySlice = getBodySlice(body, start, end + 2);
-	bodySlice.dataStream = DataStreamTreeTokenType.TABLE_START + DataStreamTreeTokenType.TABLE_ROW_START + DataStreamTreeTokenType.TABLE_CELL_START + bodySlice.dataStream + DataStreamTreeTokenType.TABLE_CELL_END + DataStreamTreeTokenType.TABLE_ROW_END + DataStreamTreeTokenType.TABLE_END;
+	const prefix = DataStreamTreeTokenType.TABLE_START + DataStreamTreeTokenType.TABLE_ROW_START + DataStreamTreeTokenType.TABLE_CELL_START;
+	bodySlice.dataStream = prefix + bodySlice.dataStream + DataStreamTreeTokenType.TABLE_CELL_END + DataStreamTreeTokenType.TABLE_ROW_END + DataStreamTreeTokenType.TABLE_END;
+	const offset = prefix.length;
 	(_bodySlice$textRuns = bodySlice.textRuns) === null || _bodySlice$textRuns === void 0 || _bodySlice$textRuns.forEach((textRun) => {
-		const { st, ed } = textRun;
-		textRun.st = st + 3;
-		textRun.ed = ed + 3;
-	});
-	(_bodySlice$tables = bodySlice.tables) === null || _bodySlice$tables === void 0 || _bodySlice$tables.forEach((table) => {
-		const { startIndex, endIndex } = table;
-		table.startIndex = startIndex + 3;
-		table.endIndex = endIndex + 3;
+		textRun.st += offset;
+		textRun.ed += offset;
 	});
-	(_bodySlice$paragraphs = bodySlice.paragraphs) === null || _bodySlice$paragraphs === void 0 || _bodySlice$paragraphs.forEach((paragraph) => {
-		const { startIndex } = paragraph;
-		paragraph.startIndex = startIndex + 3;
+	[
+		bodySlice.paragraphs,
+		bodySlice.sectionBreaks,
+		bodySlice.customBlocks,
+		bodySlice.docxRawCustomBlocks,
+		bodySlice.docxRawBlocks
+	].forEach((items) => items === null || items === void 0 ? void 0 : items.forEach((item) => {
+		item.startIndex += offset;
+	}));
+	[
+		bodySlice.tables,
+		bodySlice.columnGroups,
+		bodySlice.blockRanges,
+		bodySlice.customRanges,
+		bodySlice.customDecorations
+	].forEach((ranges) => ranges === null || ranges === void 0 ? void 0 : ranges.forEach((range) => {
+		range.startIndex += offset;
+		range.endIndex += offset;
+	}));
+	(_bodySlice$docxExport = bodySlice.docxExportExcludedRanges) === null || _bodySlice$docxExport === void 0 || _bodySlice$docxExport.forEach((range) => {
+		range.start += offset;
+		range.end += offset;
 	});
+	if (bodySlice.renderedPageBreaks) bodySlice.renderedPageBreaks = bodySlice.renderedPageBreaks.map((index) => index + offset);
 	return bodySlice;
 }
 const IDocClipboardService = createIdentifier("doc.clipboard-service");
@@ -8498,7 +8600,11 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		_defineProperty(this, "_umdToHtml", void 0);
 		this._umdToHtml = new UDMToHtmlService(docHtmlExportService);
 		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
-			if (!this._applyingPaste && command.type === CommandType.MUTATION) this.dismissPasteOptions();
+			var _command$params, _this$_pasteOptions$$;
+			if (this._applyingPaste || command.type !== CommandType.MUTATION) return;
+			const unitId = (_command$params = command.params) === null || _command$params === void 0 ? void 0 : _command$params.unitId;
+			const pasteUnitId = ((_this$_pasteOptions$$ = this._pasteOptions$.value) === null || _this$_pasteOptions$$ === void 0 ? void 0 : _this$_pasteOptions$$.unitId) ?? this._getCurrentDocumentUnitId();
+			if (!unitId || unitId === pasteUnitId) this.dismissPasteOptions();
 		}));
 		const invalidateSelection = () => {
 			const key = this._getPasteSelectionKey();
@@ -8572,6 +8678,12 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 			mode
 		});
 	}
+	isPasteOptionsEnabled(unitId) {
+		return !isInternalEditorID(unitId) || this._clipboardHooks.some((hook) => {
+			var _hook$supportsPasteOp;
+			return (_hook$supportsPasteOp = hook.supportsPasteOptions) === null || _hook$supportsPasteOp === void 0 ? void 0 : _hook$supportsPasteOp.call(hook, unitId);
+		});
+	}
 	setNextPasteMode(mode) {
 		this._nextPasteMode = mode;
 	}
@@ -8662,7 +8774,7 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		try {
 			this._stateChangeManager.flushPendingChanges(unitId);
 			const result = this._paste(doc, unitId);
-			if (result && !isInternalEditorID(unitId)) this._savePasteSession(payload, mode === "text" ? cachedSource : source, style, mode, unitId);
+			if (result && this.isPasteOptionsEnabled(unitId)) this._savePasteSession(payload, mode === "text" ? cachedSource : source, style, mode, unitId);
 			return result;
 		} finally {
 			this._applyingPaste = false;
@@ -8886,7 +8998,11 @@ let DocClipboardService = class DocClipboardService extends Disposable {
 		this._clipboardHooks.push(hook);
 		return toDisposable(() => {
 			const index = this._clipboardHooks.indexOf(hook);
-			if (index > -1) this._clipboardHooks.splice(index, 1);
+			if (index > -1) {
+				this._clipboardHooks.splice(index, 1);
+				const state = this._pasteOptions$.value;
+				if (state && !this.isPasteOptionsEnabled(state.unitId)) this.dismissPasteOptions();
+			}
 		});
 	}
 	_applyCopyDocDataHooks(doc, sourceDocuments) {
@@ -11592,31 +11708,6 @@ const DocCreateTableOperation = {
 	}
 };
 
-//#endregion
-//#region src/commands/operations/doc-cursor.operation.ts
-/**
-* The operation to move cursor in the current document.
-*/
-const MoveCursorOperation = {
-	id: "doc.operation.move-cursor",
-	type: CommandType.OPERATION,
-	handler: (accessor, params) => {
-		if (!params) return false;
-		return true;
-	}
-};
-/**
-* The operation to move selection in the current document.
-*/
-const MoveSelectionOperation = {
-	id: "doc.operation.move-selection",
-	type: CommandType.OPERATION,
-	handler: (accessor, params) => {
-		if (!params) return false;
-		return true;
-	}
-};
-
 //#endregion
 //#region src/config/config.ts
 const DOCS_UI_PLUGIN_CONFIG_KEY = "docs-ui.config";
@@ -12061,6 +12152,7 @@ function getLineFontFamily(line) {
 function drawParagraphPlaceholders(ctx, placeholders, color = PLACEHOLDER_COLOR) {
 	ctx.save();
 	ctx.fillStyle = color;
+	ctx.globalAlpha *= .5;
 	ctx.textBaseline = "alphabetic";
 	for (const placeholder of placeholders) {
 		const clipLeft = placeholder.clipLeft ?? placeholder.x;
@@ -12684,12 +12776,35 @@ var DocLayoutInteractionService = class extends Disposable {
 //#region src/services/doc-zoom.ts
 const DEFAULT_DOC_ZOOM_RATIO = 1;
 const DEFAULT_MODERN_DOC_ZOOM_RATIO = 1;
+const DOC_ZOOM_SHORTCUTS = [
+	50,
+	80,
+	100,
+	130,
+	150,
+	170,
+	200,
+	400
+];
 function getDocEffectiveZoomRatio(documentModel) {
 	var _documentModel$getSet, _documentModel$getSna;
 	const zoomRatio = (_documentModel$getSet = documentModel.getSettings()) === null || _documentModel$getSet === void 0 ? void 0 : _documentModel$getSet.zoomRatio;
 	if (zoomRatio != null) return zoomRatio;
 	return ((_documentModel$getSna = documentModel.getSnapshot().documentStyle) === null || _documentModel$getSna === void 0 ? void 0 : _documentModel$getSna.documentFlavor) === DocumentFlavor.MODERN ? 1 : DEFAULT_DOC_ZOOM_RATIO;
 }
+function getDocZoomRatio$(commandService, instanceService) {
+	return instanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC).pipe(switchMap((documentModel) => {
+		if (!documentModel) return of(100);
+		return new Observable((subscriber) => {
+			const update = () => subscriber.next(Math.round(getDocEffectiveZoomRatio(documentModel) * 100));
+			const disposable = commandService.onCommandExecuted((command) => {
+				if (command.id === SetDocZoomRatioOperation.id && command.params.unitId === documentModel.getUnitId()) update();
+			});
+			update();
+			return () => disposable.dispose();
+		});
+	}), distinctUntilChanged());
+}
 
 //#endregion
 //#region src/services/doc-view-scale.ts
@@ -13339,11 +13454,13 @@ function doesDocMutationRequireLayout(actions, drawings) {
 	if (!sawComponent || !drawingOnly) return true;
 	if (transitions.size === 0) return false;
 	for (const [drawingId, transition] of transitions) {
-		var _drawings$drawingId;
-		const currentLayoutType = drawings === null || drawings === void 0 || (_drawings$drawingId = drawings[drawingId]) === null || _drawings$drawingId === void 0 ? void 0 : _drawings$drawingId.layoutType;
+		var _currentDrawing$docTr, _currentDrawing$docTr2;
+		const currentDrawing = drawings === null || drawings === void 0 ? void 0 : drawings[drawingId];
+		const currentLayoutType = currentDrawing === null || currentDrawing === void 0 ? void 0 : currentDrawing.layoutType;
 		const before = transition.before ?? currentLayoutType;
 		const after = transition.after ?? currentLayoutType;
 		if (before == null || after == null || before !== PositionedObjectLayoutType.WRAP_NONE || after !== PositionedObjectLayoutType.WRAP_NONE) return true;
+		if ((currentDrawing === null || currentDrawing === void 0 || (_currentDrawing$docTr = currentDrawing.docTransform) === null || _currentDrawing$docTr === void 0 ? void 0 : _currentDrawing$docTr.positionH.relativeFrom) !== ObjectRelativeFromH.PAGE || (currentDrawing === null || currentDrawing === void 0 || (_currentDrawing$docTr2 = currentDrawing.docTransform) === null || _currentDrawing$docTr2 === void 0 ? void 0 : _currentDrawing$docTr2.positionV.relativeFrom) !== ObjectRelativeFromV.PAGE) return true;
 	}
 	return false;
 }
@@ -14323,6 +14440,8 @@ function getHeaderFooterTarget(viewModel, editArea, segmentPage, page) {
 * limitations under the License.
 */
 const COMPONENT_DOC_HEADER_FOOTER_PANEL = "COMPONENT_DOC_HEADER_FOOTER_PANEL";
+const DOC_HEADER_FOOTER_RIBBON_TAB = "docs-ui.ribbon.header-footer";
+const DOC_HEADER_FOOTER_RIBBON_CONTROL = "DocHeaderFooterRibbonControl";
 
 //#endregion
 //#region src/commands/operations/doc-header-footer-panel.operation.ts
@@ -14380,8 +14499,8 @@ const CoreHeaderFooterCommand = {
 		let resolvedCreateType = createType;
 		if (headerFooterProps != null) Object.keys(headerFooterProps).forEach((key) => {
 			const value = headerFooterProps[key];
-			if (resolvedCreateType == null && key === "useFirstPageHeaderFooter" && value === BooleanNumber.TRUE && !headerFooterConfig.firstPageHeaderId) resolvedCreateType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.FIRST_PAGE_HEADER : HeaderFooterType.FIRST_PAGE_FOOTER;
-			else if (resolvedCreateType == null && key === "evenAndOddHeaders" && value === BooleanNumber.TRUE && !headerFooterConfig.evenPageHeaderId) resolvedCreateType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.EVEN_PAGE_HEADER : HeaderFooterType.EVEN_PAGE_FOOTER;
+			if (resolvedCreateType == null && key === "useFirstPageHeaderFooter" && value === BooleanNumber.TRUE && !(editArea === DocumentEditArea.HEADER ? headerFooterConfig.firstPageHeaderId : headerFooterConfig.firstPageFooterId)) resolvedCreateType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.FIRST_PAGE_HEADER : HeaderFooterType.FIRST_PAGE_FOOTER;
+			else if (resolvedCreateType == null && key === "evenAndOddHeaders" && value === BooleanNumber.TRUE && !(editArea === DocumentEditArea.HEADER ? headerFooterConfig.evenPageHeaderId : headerFooterConfig.evenPageFooterId)) resolvedCreateType = editArea === DocumentEditArea.HEADER ? HeaderFooterType.EVEN_PAGE_HEADER : HeaderFooterType.EVEN_PAGE_FOOTER;
 		});
 		return commandService.syncExecuteCommand(CreateHeaderFooterCommand.id, {
 			unitId,
@@ -14396,8 +14515,8 @@ const CoreHeaderFooterCommand = {
 const OpenHeaderFooterPanelCommand = {
 	id: "doc.command.open-header-footer-panel",
 	type: CommandType.COMMAND,
-	handler: async (accessor, _params) => {
-		var _skeleton$getSkeleton;
+	handler: async (accessor, params) => {
+		var _skeleton$getSkeleton, _docDataModel$getSelf;
 		const commandService = accessor.get(ICommandService);
 		const instanceService = accessor.get(IUniverInstanceService);
 		const renderManagerService = accessor.get(IRenderManagerService);
@@ -14414,8 +14533,9 @@ const OpenHeaderFooterPanelCommand = {
 		const currentPage = selectionRenderService.getSegmentPage();
 		const pageNumber = currentPage >= 0 && currentPage < pages.length ? currentPage : 0;
 		const page = pages[pageNumber];
-		viewModel.setEditArea(DocumentEditArea.HEADER);
-		const { createType, headerFooterId, sectionId } = getHeaderFooterTarget(viewModel, DocumentEditArea.HEADER, pageNumber, page);
+		const editArea = (params === null || params === void 0 ? void 0 : params.editArea) ?? DocumentEditArea.HEADER;
+		viewModel.setEditArea(editArea);
+		const { createType, headerFooterId, sectionId } = getHeaderFooterTarget(viewModel, editArea, pageNumber, page);
 		selectionRenderService.setSegmentPage(pageNumber);
 		if (createType != null) {
 			const segmentId = generateRandomId(6);
@@ -14432,6 +14552,21 @@ const OpenHeaderFooterPanelCommand = {
 				return false;
 			}
 		} else if (headerFooterId != null) selectionRenderService.setSegment(headerFooterId);
+		const segmentId = selectionRenderService.getSegment();
+		const segmentSnapshot = (_docDataModel$getSelf = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf === void 0 ? void 0 : _docDataModel$getSelf.getSnapshot();
+		if (!segmentSnapshot) return false;
+		const offset = findFirstCursorOffset(segmentSnapshot);
+		accessor.get(DocSelectionManagerService).replaceDocRanges([{
+			startOffset: offset,
+			endOffset: offset,
+			collapsed: true,
+			segmentId,
+			segmentPage: pageNumber
+		}], {
+			unitId,
+			subUnitId: unitId
+		});
+		selectionRenderService.focus();
 		return commandService.executeCommand(SidebarDocHeaderFooterPanelOperation.id, { value: "open" });
 	}
 };
@@ -14474,7 +14609,254 @@ const CloseHeaderFooterCommand = {
 				endOffset: offset
 			}]);
 		});
-		commandService.executeCommand(SidebarDocHeaderFooterPanelOperation.id, { value: "close" });
+		await commandService.executeCommand(SidebarDocHeaderFooterPanelOperation.id, { value: "close" });
+		return true;
+	}
+};
+
+//#endregion
+//#region src/utils/date-time-field.ts
+function createDateTimeField(format, locale, date) {
+	const options = format === "time" ? {
+		hour: "2-digit",
+		minute: "2-digit",
+		second: "2-digit",
+		hourCycle: "h23"
+	} : {
+		year: "numeric",
+		month: format === "long" ? "long" : "2-digit",
+		day: "2-digit"
+	};
+	const formatter = new Intl.DateTimeFormat(locale, {
+		...options,
+		calendar: "gregory",
+		numberingSystem: "latn"
+	});
+	const parts = formatter.formatToParts(date);
+	const tokens = {
+		year: "yyyy",
+		month: format === "long" ? "MMMM" : "MM",
+		day: "dd",
+		hour: "HH",
+		minute: "mm",
+		second: "ss"
+	};
+	const mask = parts.map((part) => tokens[part.type] ?? `'${part.value.replace(/'/g, "''")}'`).join("");
+	const fieldType = format === "time" ? "TIME" : "DATE";
+	return {
+		fieldType,
+		instruction: `${fieldType} \\@ "${mask}"`,
+		cachedResult: formatter.format(date)
+	};
+}
+function resolveDateTimeField(instruction, locale, date) {
+	try {
+		Intl.getCanonicalLocales(locale);
+	} catch {
+		return;
+	}
+	for (const format of [
+		"short",
+		"long",
+		"time"
+	]) {
+		const field = createDateTimeField(format, locale, date);
+		if (field.instruction === instruction) return field.cachedResult;
+	}
+}
+
+//#endregion
+//#region src/commands/commands/insert-header-footer-field.command.ts
+const InsertHeaderFooterFieldCommand = {
+	id: "doc.command.insert-header-footer-field",
+	type: CommandType.COMMAND,
+	handler(accessor, params) {
+		var _snapshot$headers, _snapshot$footers, _model$getSelfOrHeade, _body$customRanges;
+		if (!params || ![
+			"PAGE",
+			"NUMPAGES",
+			"DATE",
+			"TIME"
+		].includes(params.fieldType)) return false;
+		const model = accessor.get(IUniverInstanceService).getUnit(params.unitId, UniverInstanceType.UNIVER_DOC);
+		const active = accessor.get(DocSelectionManagerService).getActiveTextRange();
+		const selection = params.selection ?? active;
+		const segmentId = params.segmentId ?? (active === null || active === void 0 ? void 0 : active.segmentId);
+		const snapshot = model === null || model === void 0 ? void 0 : model.getSnapshot();
+		if (!model || (snapshot === null || snapshot === void 0 ? void 0 : snapshot.disabled) || !selection || !segmentId || !(snapshot === null || snapshot === void 0 || (_snapshot$headers = snapshot.headers) === null || _snapshot$headers === void 0 ? void 0 : _snapshot$headers[segmentId]) && !(snapshot === null || snapshot === void 0 || (_snapshot$footers = snapshot.footers) === null || _snapshot$footers === void 0 ? void 0 : _snapshot$footers[segmentId])) return false;
+		const body = (_model$getSelfOrHeade = model.getSelfOrHeaderFooterModel(segmentId)) === null || _model$getSelfOrHeade === void 0 ? void 0 : _model$getSelfOrHeade.getBody();
+		if (!body || params.expectedDataStream != null && params.expectedDataStream !== body.dataStream || !Number.isInteger(selection.startOffset) || !Number.isInteger(selection.endOffset) || selection.startOffset < 0 || selection.endOffset < selection.startOffset || selection.endOffset > body.dataStream.length - 2) return false;
+		if (!canEditDocumentTargets(accessor.get(IPermissionService), params.unitId, getDocumentEditTargetObjectIds(model, segmentId, selection))) return false;
+		if ((_body$customRanges = body.customRanges) === null || _body$customRanges === void 0 ? void 0 : _body$customRanges.some((range) => {
+			var _range$properties;
+			return range.rangeType === CustomRangeType.FIELD && ((_range$properties = range.properties) === null || _range$properties === void 0 ? void 0 : _range$properties.locked) === BooleanNumber.TRUE && selection.startOffset <= range.endIndex && selection.endOffset > range.startIndex;
+		})) return false;
+		const locale = LOCALE_META[accessor.get(LocaleService).getCurrentLocale()].tag;
+		let properties;
+		if (params.fieldType === "DATE" || params.fieldType === "TIME") {
+			const format = params.format ?? (params.fieldType === "TIME" ? "time" : "short");
+			if (![
+				"short",
+				"long",
+				"time"
+			].includes(format)) return false;
+			properties = createDateTimeField(format, locale, /* @__PURE__ */ new Date());
+		} else {
+			var _accessor$get$getRend, _skeleton$getSkeleton;
+			const skeleton = (_accessor$get$getRend = accessor.get(IRenderManagerService).getRenderUnitById(params.unitId)) === null || _accessor$get$getRend === void 0 ? void 0 : _accessor$get$getRend.with(DocSkeletonManagerService).getSkeleton();
+			const pages = skeleton === null || skeleton === void 0 || (_skeleton$getSkeleton = skeleton.getSkeletonData()) === null || _skeleton$getSkeleton === void 0 ? void 0 : _skeleton$getSkeleton.pages;
+			if (!(pages === null || pages === void 0 ? void 0 : pages.length)) return false;
+			const pageIndex = params.segmentPage ?? (active === null || active === void 0 ? void 0 : active.segmentPage) ?? 0;
+			const page = pages[Math.max(0, pageIndex)];
+			if (!page) return false;
+			properties = {
+				fieldType: params.fieldType,
+				instruction: params.fieldType,
+				cachedResult: String(params.fieldType === "PAGE" ? page.pageNumber : (skeleton === null || skeleton === void 0 ? void 0 : skeleton.getCompletedPageCount()) ?? "…")
+			};
+		}
+		const automatic = params.automatic !== false || params.fieldType === "PAGE" || params.fieldType === "NUMPAGES";
+		const dataStream = automatic ? `${DataStreamTreeTokenType.CUSTOM_RANGE_START}${properties.cachedResult}${DataStreamTreeTokenType.CUSTOM_RANGE_END}` : properties.cachedResult;
+		const style = accessor.get(DocMenuStyleService);
+		const textRun = getTextRunForSelection(body, selection, style.getDefaultStyle(), style.getStyleCache(), false);
+		return accessor.get(ICommandService).syncExecuteCommand(InsertTextCommand.id, {
+			unitId: params.unitId,
+			segmentId,
+			range: selection,
+			debounce: false,
+			body: {
+				dataStream,
+				textRuns: [{
+					...textRun,
+					ts: {
+						...textRun.ts,
+						lang: locale
+					},
+					st: 0,
+					ed: dataStream.length
+				}],
+				customRanges: automatic ? [{
+					startIndex: 0,
+					endIndex: dataStream.length - 1,
+					rangeId: generateRandomId(),
+					rangeType: CustomRangeType.FIELD,
+					wholeEntity: false,
+					properties: {
+						...properties,
+						sourceKind: "complex"
+					}
+				}] : []
+			},
+			textRanges: [{
+				...selection,
+				segmentId,
+				segmentPage: params.segmentPage ?? (active === null || active === void 0 ? void 0 : active.segmentPage),
+				startOffset: selection.startOffset + dataStream.length,
+				endOffset: selection.startOffset + dataStream.length,
+				collapsed: true
+			}]
+		});
+	}
+};
+
+//#endregion
+//#region src/commands/commands/refresh-header-footer-fields.command.ts
+const RefreshHeaderFooterFieldsCommand = {
+	id: "doc.command.refresh-header-footer-fields",
+	type: CommandType.COMMAND,
+	handler(accessor, params) {
+		if (!params) return false;
+		const model = accessor.get(IUniverInstanceService).getUnit(params.unitId, UniverInstanceType.UNIVER_DOC);
+		const snapshot = model === null || model === void 0 ? void 0 : model.getSnapshot();
+		if (!model || !snapshot || snapshot.disabled) return false;
+		const permissions = accessor.get(IPermissionService);
+		const locale = LOCALE_META[accessor.get(LocaleService).getCurrentLocale()].tag;
+		const now = /* @__PURE__ */ new Date();
+		const selections = accessor.get(DocSelectionManagerService).getTextRanges({
+			unitId: params.unitId,
+			subUnitId: params.unitId
+		}) ?? [];
+		let actions = null;
+		for (const [segmentId, segment] of Object.entries({
+			"": { body: snapshot.body },
+			...snapshot.headers,
+			...snapshot.footers
+		})) {
+			if (!segment.body) continue;
+			const textX = refreshDateTimeFields(segment.body, locale, now, (field) => (!params.selectionOnly || selections.some((selection) => (selection.segmentId ?? "") === segmentId && selection.startOffset <= field.endIndex && selection.endOffset > field.startIndex)) && canEditDocumentTargets(permissions, params.unitId, getDocumentEditTargetObjectIds(model, segmentId, {
+				startOffset: field.startIndex,
+				endOffset: field.endIndex + 1
+			})));
+			if (textX.length) actions = JSONX.compose(actions, JSONX.getInstance().editOp(textX, getRichTextEditPath(model, segmentId)));
+		}
+		if (JSONX.isNoop(actions)) return true;
+		if (!params.onOpen) accessor.get(DocStateChangeManagerService).flushPendingChanges(params.unitId);
+		return Boolean(accessor.get(ICommandService).syncExecuteCommand(RichTextEditingMutation.id, {
+			unitId: params.unitId,
+			actions,
+			textRanges: transformDocumentTextRanges(actions, [...selections]),
+			noHistory: params.onOpen === true,
+			debounce: false,
+			trigger: RefreshHeaderFooterFieldsCommand.id
+		}));
+	}
+};
+const UpdateSelectedDocFieldsCommand = {
+	id: "doc.command.update-selected-fields",
+	type: CommandType.COMMAND,
+	handler(accessor) {
+		const model = accessor.get(IUniverInstanceService).getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
+		if (!model) return false;
+		return accessor.get(ICommandService).syncExecuteCommand(RefreshHeaderFooterFieldsCommand.id, {
+			unitId: model.getUnitId(),
+			selectionOnly: true
+		});
+	}
+};
+function refreshDateTimeFields(body, locale, date, canEdit) {
+	const textX = new TextX();
+	let cursor = 0;
+	const ranges = [...body.customRanges ?? []].sort((a, b) => a.startIndex - b.startIndex);
+	for (const field of ranges) {
+		var _body$textRuns, _run$ts;
+		const properties = field.properties;
+		if (field.rangeType !== CustomRangeType.FIELD || (properties === null || properties === void 0 ? void 0 : properties.locked) === BooleanNumber.TRUE || (properties === null || properties === void 0 ? void 0 : properties.fieldType) !== "DATE" && (properties === null || properties === void 0 ? void 0 : properties.fieldType) !== "TIME" || !canEdit(field) || ranges.some((range) => range !== field && range.startIndex > field.startIndex && range.endIndex < field.endIndex)) continue;
+		const start = field.startIndex;
+		const run = (_body$textRuns = body.textRuns) === null || _body$textRuns === void 0 ? void 0 : _body$textRuns.find((run) => run.st <= start + 1 && run.ed > start + 1);
+		const value = resolveDateTimeField(properties.instruction, (run === null || run === void 0 || (_run$ts = run.ts) === null || _run$ts === void 0 ? void 0 : _run$ts.lang) ?? locale, date);
+		if (value == null || start < cursor || body.dataStream.slice(start + 1, field.endIndex) === value && properties.cachedResult === value) continue;
+		const dataStream = `${DataStreamTreeTokenType.CUSTOM_RANGE_START}${value}${DataStreamTreeTokenType.CUSTOM_RANGE_END}`;
+		textX.retain(start - cursor).delete(field.endIndex - start + 1).insert(dataStream.length, {
+			dataStream,
+			textRuns: run ? [{
+				...run,
+				st: 0,
+				ed: dataStream.length
+			}] : [],
+			customRanges: [{
+				...field,
+				startIndex: 0,
+				endIndex: dataStream.length - 1,
+				properties: {
+					...properties,
+					cachedResult: value
+				}
+			}]
+		});
+		cursor = field.endIndex + 1;
+	}
+	return textX.serialize();
+}
+
+//#endregion
+//#region src/commands/operations/doc-header-footer-ribbon.operation.ts
+const DocHeaderFooterRibbonOperation = {
+	id: SidebarDocHeaderFooterPanelOperation.id,
+	type: SidebarDocHeaderFooterPanelOperation.type,
+	handler(accessor, params) {
+		const ribbon = accessor.get(IRibbonService);
+		if ((params === null || params === void 0 ? void 0 : params.value) === "open") ribbon.showContextualTab(DOC_HEADER_FOOTER_RIBBON_TAB, { activate: true });
+		else ribbon.hideContextualTab(DOC_HEADER_FOOTER_RIBBON_TAB);
 		return true;
 	}
 };
@@ -15103,8 +15485,12 @@ let DocEventManagerService = class DocEventManagerService extends Disposable {
 	}
 	_initPointer() {
 		let preCursor = CURSOR_TYPE.TEXT;
+		let pointing = false;
 		this.disposeWithMe(this.hoverCustomRanges$.subscribe((ranges) => {
-			if (ranges.length) {
+			const nextPointing = ranges.some(({ range }) => range.rangeType !== CustomRangeType.FIELD);
+			if (nextPointing === pointing) return;
+			pointing = nextPointing;
+			if (pointing) {
 				preCursor = this._context.scene.getCursor();
 				this._context.scene.setCursor(CURSOR_TYPE.POINTER);
 			} else this._context.scene.setCursor(preCursor);
@@ -15227,6 +15613,10 @@ let DocEventManagerService = class DocEventManagerService extends Disposable {
 		this._buildBulletBounds();
 		return [...this._bulletBounds];
 	}
+	getCustomRangeBounds() {
+		this._buildCustomRangeBounds();
+		return [...this._customRangeBounds];
+	}
 	getListContextMenuBulletByOffset(offsetX, offsetY) {
 		const point = transformOffset2Bound(offsetX, offsetY, this._context.scene);
 		return this._calcActiveBullet(point) ?? this._calcActiveListParagraph(point);
@@ -15772,133 +16162,51 @@ const OpenDocPermissionPanelOperation = {
 };
 
 //#endregion
-//#region src/controllers/doc-paragraph-setting.controller.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const paragraphSettingIndexKey$1 = "doc_ui_paragraph-setting-panel";
-let DocParagraphSettingController = class DocParagraphSettingController extends Disposable {
-	constructor(_commandService, _sidebarService) {
-		super();
-		this._commandService = _commandService;
-		this._sidebarService = _sidebarService;
-		_defineProperty(this, "_id", void 0);
-	}
-	openPanel() {
-		const props = {
-			header: { title: "docs-ui.doc.slider.paragraphSetting" },
-			id: this._id,
-			children: { label: paragraphSettingIndexKey$1 },
-			width: 300
-		};
-		this._sidebarService.open(props);
-	}
-	closePanel() {
-		this._sidebarService.close(this._id);
-	}
-};
-DocParagraphSettingController = __decorate([__decorateParam(0, ICommandService), __decorateParam(1, Inject(ISidebarService))], DocParagraphSettingController);
-
-//#endregion
-//#region src/commands/operations/doc-paragraph-setting-panel.operation.ts
-const DocParagraphSettingPanelOperation = {
-	id: "sidebar.operation.doc-paragraph-setting-panel",
-	type: CommandType.OPERATION,
-	handler: (accessor) => {
-		accessor.get(DocParagraphSettingController).openPanel();
-		return true;
-	}
-};
-
-//#endregion
-//#region src/views/section-setting/component-name.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const DOC_SECTION_SETTING_COMPONENT = "doc_ui_section-setting-panel";
-
-//#endregion
-//#region src/controllers/doc-section-setting.controller.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-let DocSectionSettingController = class DocSectionSettingController extends Disposable {
-	constructor(_sidebarService, _selectionManager) {
-		super();
-		this._sidebarService = _sidebarService;
-		this._selectionManager = _selectionManager;
-		_defineProperty(this, "_panelId", "DocSectionSetting");
-	}
-	openPanel() {
-		this._sidebarService.open({
-			header: { title: "docs-ui.doc.slider.sectionSetting" },
-			id: this._panelId,
-			children: { label: DOC_SECTION_SETTING_COMPONENT },
-			width: 300
+//#region src/commands/commands/insert-special-character.command.ts
+const InsertSpecialCharacterCommand = {
+	id: "doc.command.insert-special-character",
+	type: CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _docDataModel$getSelf, _getEditorRuntimeConf;
+		if (!(params === null || params === void 0 ? void 0 : params.value)) return false;
+		const commandService = accessor.get(ICommandService);
+		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const docMenuStyleService = accessor.get(DocMenuStyleService);
+		const docDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
+		const activeRange = docSelectionManagerService.getActiveTextRange();
+		if (!docDataModel || !activeRange) return false;
+		const { segmentId } = activeRange;
+		const originBody = (_docDataModel$getSelf = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf === void 0 ? void 0 : _docDataModel$getSelf.getBody();
+		if (!originBody) return false;
+		const { value } = params;
+		const curTextRun = getTextRunForSelection(originBody, activeRange, docMenuStyleService.getDefaultStyle(), docMenuStyleService.getStyleCache(), false, ((_getEditorRuntimeConf = getEditorRuntimeConfig(docDataModel)) === null || _getEditorRuntimeConf === void 0 ? void 0 : _getEditorRuntimeConf.inheritParagraphStartStyle) === true);
+		const curCustomRange = getCustomRangeAtPosition(originBody.customRanges ?? [], activeRange.endOffset);
+		const curCustomDecorations = getCustomDecorationAtPosition(originBody.customDecorations ?? [], activeRange.endOffset);
+		return commandService.executeCommand(InsertTextCommand.id, {
+			unitId: docDataModel.getUnitId(),
+			body: {
+				dataStream: value,
+				textRuns: [{
+					...curTextRun,
+					st: 0,
+					ed: value.length
+				}],
+				customRanges: curCustomRange ? [{
+					...curCustomRange,
+					startIndex: 0,
+					endIndex: value.length - 1
+				}] : [],
+				customDecorations: curCustomDecorations.map((customDecoration) => ({
+					...customDecoration,
+					startIndex: 0,
+					endIndex: value.length - 1
+				}))
+			},
+			range: activeRange,
+			segmentId
 		});
 	}
-	closePanel() {
-		this._sidebarService.close(this._panelId);
-	}
-	navigateToSectionEnd(unitId, sectionStart, sectionEnd) {
-		const params = {
-			unitId,
-			subUnitId: unitId
-		};
-		const cursorOffset = Math.max(sectionStart, sectionEnd - 1);
-		this._selectionManager.replaceDocRanges([{
-			startOffset: cursorOffset,
-			endOffset: cursorOffset
-		}], params, true, { shouldFocus: false });
-	}
-};
-DocSectionSettingController = __decorate([__decorateParam(0, Inject(ISidebarService)), __decorateParam(1, Inject(DocSelectionManagerService))], DocSectionSettingController);
-
-//#endregion
-//#region src/commands/operations/doc-section-setting-panel.operation.ts
-const DocSectionSettingPanelOperation = {
-	id: "sidebar.operation.doc-section-setting-panel",
-	type: CommandType.OPERATION,
-	handler: (accessor) => {
-		accessor.get(DocSectionSettingController).openPanel();
-		return true;
-	}
 };
 
 //#endregion
@@ -16331,54 +16639,6 @@ const DocOpenPageSettingCommand = {
 	}
 };
 
-//#endregion
-//#region src/commands/commands/insert-special-character.command.ts
-const InsertSpecialCharacterCommand = {
-	id: "doc.command.insert-special-character",
-	type: CommandType.COMMAND,
-	handler: (accessor, params) => {
-		var _docDataModel$getSelf, _getEditorRuntimeConf;
-		if (!(params === null || params === void 0 ? void 0 : params.value)) return false;
-		const commandService = accessor.get(ICommandService);
-		const docSelectionManagerService = accessor.get(DocSelectionManagerService);
-		const univerInstanceService = accessor.get(IUniverInstanceService);
-		const docMenuStyleService = accessor.get(DocMenuStyleService);
-		const docDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
-		const activeRange = docSelectionManagerService.getActiveTextRange();
-		if (!docDataModel || !activeRange) return false;
-		const { segmentId } = activeRange;
-		const originBody = (_docDataModel$getSelf = docDataModel.getSelfOrHeaderFooterModel(segmentId)) === null || _docDataModel$getSelf === void 0 ? void 0 : _docDataModel$getSelf.getBody();
-		if (!originBody) return false;
-		const { value } = params;
-		const curTextRun = getTextRunForSelection(originBody, activeRange, docMenuStyleService.getDefaultStyle(), docMenuStyleService.getStyleCache(), false, ((_getEditorRuntimeConf = getEditorRuntimeConfig(docDataModel)) === null || _getEditorRuntimeConf === void 0 ? void 0 : _getEditorRuntimeConf.inheritParagraphStartStyle) === true);
-		const curCustomRange = getCustomRangeAtPosition(originBody.customRanges ?? [], activeRange.endOffset);
-		const curCustomDecorations = getCustomDecorationAtPosition(originBody.customDecorations ?? [], activeRange.endOffset);
-		return commandService.executeCommand(InsertTextCommand.id, {
-			unitId: docDataModel.getUnitId(),
-			body: {
-				dataStream: value,
-				textRuns: [{
-					...curTextRun,
-					st: 0,
-					ed: value.length
-				}],
-				customRanges: curCustomRange ? [{
-					...curCustomRange,
-					startIndex: 0,
-					endIndex: value.length - 1
-				}] : [],
-				customDecorations: curCustomDecorations.map((customDecoration) => ({
-					...customDecoration,
-					startIndex: 0,
-					endIndex: value.length - 1
-				}))
-			},
-			range: activeRange,
-			segmentId
-		});
-	}
-};
-
 //#endregion
 //#region src/views/const.ts
 /**
@@ -17735,6 +17995,210 @@ function PageSettingMenuItemFactory(accessor) {
 	};
 }
 
+//#endregion
+//#region src/menu/header-footer-ribbon.ts
+const headerFooterRibbonSchema = {
+	[ContextMenuPosition.MAIN_AREA]: { [ContextMenuGroup.FORMAT]: { [UpdateSelectedDocFieldsCommand.id]: {
+		order: 1,
+		menuItemFactory: (accessor) => {
+			const instances = accessor.get(IUniverInstanceService);
+			const selections = accessor.get(DocSelectionManagerService);
+			return {
+				id: UpdateSelectedDocFieldsCommand.id,
+				type: MenuItemType.BUTTON,
+				title: "docs-ui.headerFooter.refreshFields",
+				disabled$: disableMenuWithoutDocumentUnitPermission(accessor, UnitAction.Edit),
+				hidden$: combineLatest([instances.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC), selections.textSelection$.pipe(startWith(null))]).pipe(map(([model]) => !model || !(selections.getTextRanges({
+					unitId: model.getUnitId(),
+					subUnitId: model.getUnitId()
+				}) ?? []).some((selection) => {
+					var _model$getSelfOrHeade;
+					return (_model$getSelfOrHeade = model.getSelfOrHeaderFooterModel(selection.segmentId)) === null || _model$getSelfOrHeade === void 0 || (_model$getSelfOrHeade = _model$getSelfOrHeade.getBody()) === null || _model$getSelfOrHeade === void 0 || (_model$getSelfOrHeade = _model$getSelfOrHeade.customRanges) === null || _model$getSelfOrHeade === void 0 ? void 0 : _model$getSelfOrHeade.some((field) => field.rangeType === CustomRangeType.FIELD && selection.startOffset <= field.endIndex && selection.endOffset > field.startIndex);
+				})))
+			};
+		}
+	} } },
+	[MenuManagerPosition.RIBBON]: { [DOC_HEADER_FOOTER_RIBBON_TAB]: {
+		order: 90,
+		title: "docs-ui.toolbar.headerFooter",
+		contextual: true,
+		...Object.fromEntries([
+			"insertion",
+			"navigation",
+			"options",
+			"position"
+		].map((kind, order) => [`${DOC_HEADER_FOOTER_RIBBON_TAB}.${kind}`, {
+			order,
+			[`${DOC_HEADER_FOOTER_RIBBON_CONTROL}.${kind}`]: {
+				order: 0,
+				gridLayout: {
+					row: 1,
+					column: 1,
+					rowSpan: 2
+				},
+				menuItemFactory: () => ({
+					id: `${DOC_HEADER_FOOTER_RIBBON_CONTROL}.${kind}`,
+					type: MenuItemType.BUTTON,
+					label: {
+						name: DOC_HEADER_FOOTER_RIBBON_CONTROL,
+						hoverable: false,
+						props: { kind }
+					}
+				})
+			}
+		}])),
+		"docs-ui.headerFooter.close": {
+			order: 5,
+			[CloseHeaderFooterCommand.id]: {
+				order: 0,
+				gridLayout: {
+					row: 1,
+					column: 1,
+					rowSpan: 2,
+					showLabel: true
+				},
+				menuItemFactory: () => ({
+					id: CloseHeaderFooterCommand.id,
+					type: MenuItemType.BUTTON,
+					icon: "CloseIcon",
+					title: "docs-ui.headerFooter.closeHeaderFooter",
+					tooltip: "docs-ui.headerFooter.closeHeaderFooter"
+				})
+			}
+		}
+	} }
+};
+
+//#endregion
+//#region src/controllers/doc-paragraph-setting.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const paragraphSettingIndexKey$1 = "doc_ui_paragraph-setting-panel";
+let DocParagraphSettingController = class DocParagraphSettingController extends Disposable {
+	constructor(_commandService, _sidebarService) {
+		super();
+		this._commandService = _commandService;
+		this._sidebarService = _sidebarService;
+		_defineProperty(this, "_id", void 0);
+	}
+	openPanel() {
+		const props = {
+			header: { title: "docs-ui.doc.slider.paragraphSetting" },
+			id: this._id,
+			children: { label: paragraphSettingIndexKey$1 },
+			width: 300
+		};
+		this._sidebarService.open(props);
+	}
+	closePanel() {
+		this._sidebarService.close(this._id);
+	}
+};
+DocParagraphSettingController = __decorate([__decorateParam(0, ICommandService), __decorateParam(1, Inject(ISidebarService))], DocParagraphSettingController);
+
+//#endregion
+//#region src/commands/operations/doc-paragraph-setting-panel.operation.ts
+const DocParagraphSettingPanelOperation = {
+	id: "sidebar.operation.doc-paragraph-setting-panel",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		accessor.get(DocParagraphSettingController).openPanel();
+		return true;
+	}
+};
+
+//#endregion
+//#region src/views/section-setting/component-name.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const DOC_SECTION_SETTING_COMPONENT = "doc_ui_section-setting-panel";
+
+//#endregion
+//#region src/controllers/doc-section-setting.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let DocSectionSettingController = class DocSectionSettingController extends Disposable {
+	constructor(_sidebarService, _selectionManager) {
+		super();
+		this._sidebarService = _sidebarService;
+		this._selectionManager = _selectionManager;
+		_defineProperty(this, "_panelId", "DocSectionSetting");
+	}
+	openPanel() {
+		this._sidebarService.open({
+			header: { title: "docs-ui.doc.slider.sectionSetting" },
+			id: this._panelId,
+			children: { label: DOC_SECTION_SETTING_COMPONENT },
+			width: 300
+		});
+	}
+	closePanel() {
+		this._sidebarService.close(this._panelId);
+	}
+	navigateToSectionEnd(unitId, sectionStart, sectionEnd) {
+		const params = {
+			unitId,
+			subUnitId: unitId
+		};
+		const cursorOffset = Math.max(sectionStart, sectionEnd - 1);
+		this._selectionManager.replaceDocRanges([{
+			startOffset: cursorOffset,
+			endOffset: cursorOffset
+		}], params, true, { shouldFocus: false });
+	}
+};
+DocSectionSettingController = __decorate([__decorateParam(0, Inject(ISidebarService)), __decorateParam(1, Inject(DocSelectionManagerService))], DocSectionSettingController);
+
+//#endregion
+//#region src/commands/operations/doc-section-setting-panel.operation.ts
+const DocSectionSettingPanelOperation = {
+	id: "sidebar.operation.doc-section-setting-panel",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		accessor.get(DocSectionSettingController).openPanel();
+		return true;
+	}
+};
+
 //#endregion
 //#region src/menu/context-menu.ts
 const getDisableOnCollapsedObservable = (accessor) => {
@@ -18018,6 +18482,46 @@ function PasteRibbonMenuFactory(accessor) {
 	};
 }
 
+//#endregion
+//#region src/menu/display.menu.ts
+const DOC_ZOOM_RATIO_MENU_ID = "doc.menu.zoom-ratio";
+function DocZoomRatioMenuItemFactory(accessor) {
+	const commandService = accessor.get(ICommandService);
+	const instanceService = accessor.get(IUniverInstanceService);
+	return {
+		id: DOC_ZOOM_RATIO_MENU_ID,
+		type: MenuItemType.SELECTOR,
+		icon: "ZoomInIcon",
+		tooltip: "docs-ui.toolbar.zoom",
+		selectionsCommandId: SetDocZoomRatioOperation.id,
+		selections: DOC_ZOOM_SHORTCUTS.map((value) => ({
+			value,
+			label: `${value}%`,
+			params: () => {
+				var _instanceService$getC;
+				return {
+					unitId: (_instanceService$getC = instanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC)) === null || _instanceService$getC === void 0 ? void 0 : _instanceService$getC.getUnitId(),
+					zoomRatio: value / 100
+				};
+			}
+		})),
+		value$: getDocZoomRatio$(commandService, instanceService),
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
+	};
+}
+function DocFullscreenMenuItemFactory(accessor) {
+	const root = accessor.get(ILayoutService).rootContainerElement;
+	const fullscreen$ = root ? merge$1(of(null), fromEvent(root.ownerDocument, "fullscreenchange")).pipe(map(() => root.ownerDocument.fullscreenElement === root), distinctUntilChanged()) : of(false);
+	return {
+		id: ToggleFullscreenOperation.id,
+		type: MenuItemType.BUTTON,
+		tooltip: "docs-ui.toolbar.fullscreen",
+		icon: fullscreen$.pipe(map((fullscreen) => fullscreen ? "ShrinkIcon" : "ExpandIcon")),
+		activated$: fullscreen$,
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
+	};
+}
+
 //#endregion
 //#region src/views/paragraph-menu/theme-color.ts
 function getHighlightBackgroundColor(themeService, index) {
@@ -18426,7 +18930,7 @@ function ParagraphMenuInsertBelowSubmenuItemFactory(accessor) {
 	return {
 		id: DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID,
 		type: MenuItemType.SUBITEMS,
-		icon: "TextTypeIcon",
+		icon: "InsertBelowDoubleIcon",
 		title: "docs-ui.rightClick.insertBellow",
 		tooltip: "docs-ui.rightClick.insertBellow",
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC)
@@ -18644,7 +19148,8 @@ const menuSchema = {
 			order: 0,
 			gridLayout: {
 				row: 2,
-				column: 1
+				column: 1,
+				width: 44
 			},
 			menuItemFactory: BoldMenuItemFactory
 		},
@@ -18652,7 +19157,8 @@ const menuSchema = {
 			order: 1,
 			gridLayout: {
 				row: 2,
-				column: 2
+				column: 2,
+				width: 44
 			},
 			menuItemFactory: ItalicMenuItemFactory
 		},
@@ -18660,7 +19166,8 @@ const menuSchema = {
 			order: 2,
 			gridLayout: {
 				row: 2,
-				column: 3
+				column: 3,
+				width: 44
 			},
 			menuItemFactory: UnderlineMenuItemFactory
 		},
@@ -18668,7 +19175,8 @@ const menuSchema = {
 			order: 3,
 			gridLayout: {
 				row: 2,
-				column: 4
+				column: 4,
+				width: 44
 			},
 			menuItemFactory: StrikeThroughMenuItemFactory
 		},
@@ -18676,7 +19184,8 @@ const menuSchema = {
 			order: 4,
 			gridLayout: {
 				row: 2,
-				column: 5
+				column: 6,
+				width: 44
 			},
 			menuItemFactory: SubscriptMenuItemFactory
 		},
@@ -18684,7 +19193,8 @@ const menuSchema = {
 			order: 5,
 			gridLayout: {
 				row: 2,
-				column: 6
+				column: 5,
+				width: 44
 			},
 			menuItemFactory: SuperscriptMenuItemFactory
 		},
@@ -18694,7 +19204,7 @@ const menuSchema = {
 				row: 1,
 				column: 1,
 				columnSpan: 2,
-				width: 100
+				width: 96
 			},
 			menuItemFactory: HeadingSelectorMenuItemFactory
 		},
@@ -18703,7 +19213,8 @@ const menuSchema = {
 			gridLayout: {
 				row: 1,
 				column: 7,
-				width: 64
+				columnSpan: 2,
+				width: 96
 			},
 			menuItemFactory: FontSizeSelectorMenuItemFactory
 		},
@@ -18713,7 +19224,7 @@ const menuSchema = {
 				row: 1,
 				column: 3,
 				columnSpan: 4,
-				width: 160
+				width: 200
 			},
 			menuItemFactory: FontFamilySelectorMenuItemFactory
 		},
@@ -18721,7 +19232,8 @@ const menuSchema = {
 			order: 8,
 			gridLayout: {
 				row: 2,
-				column: 7
+				column: 8,
+				width: 44
 			},
 			menuItemFactory: TextColorSelectorMenuItemFactory,
 			[ResetInlineFormatTextColorCommand.id]: {
@@ -18733,7 +19245,8 @@ const menuSchema = {
 			order: 9,
 			gridLayout: {
 				row: 2,
-				column: 8
+				column: 7,
+				width: 44
 			},
 			menuItemFactory: BackgroundColorSelectorMenuItemFactory,
 			[ResetInlineFormatTextBackgroundColorCommand.id]: {
@@ -18784,16 +19297,6 @@ const menuSchema = {
 				showLabel: true
 			},
 			menuItemFactory: HeaderFooterMenuItemFactory
-		},
-		[DocOpenPageSettingCommand.id]: {
-			order: 12,
-			gridLayout: {
-				row: 1,
-				column: 4,
-				rowSpan: 2,
-				showLabel: true
-			},
-			menuItemFactory: PageSettingMenuItemFactory
 		}
 	},
 	[RibbonInsertGroup.MEDIA]: {
@@ -18859,13 +19362,41 @@ const menuSchema = {
 			},
 			menuItemFactory: EmojiPickerMenuItemFactory
 		},
-		[DOC_INSERT_SYMBOL_MENU_ID]: {
-			order: 6,
+		[DOC_INSERT_SYMBOL_MENU_ID]: {
+			order: 6,
+			gridLayout: {
+				row: 2,
+				column: 3
+			},
+			menuItemFactory: SymbolPickerMenuItemFactory
+		}
+	},
+	[RibbonViewGroup.DISPLAY]: {
+		[DocOpenPageSettingCommand.id]: {
+			order: 0,
+			gridLayout: {
+				row: 1,
+				column: 1,
+				rowSpan: 2,
+				showLabel: true
+			},
+			menuItemFactory: PageSettingMenuItemFactory
+		},
+		[DOC_ZOOM_RATIO_MENU_ID]: {
+			order: 1,
+			gridLayout: {
+				row: 1,
+				column: 2
+			},
+			menuItemFactory: DocZoomRatioMenuItemFactory
+		},
+		[ToggleFullscreenOperation.id]: {
+			order: 2,
 			gridLayout: {
 				row: 2,
-				column: 3
+				column: 2
 			},
-			menuItemFactory: SymbolPickerMenuItemFactory
+			menuItemFactory: DocFullscreenMenuItemFactory
 		}
 	},
 	[ContextMenuPosition.MAIN_AREA]: {
@@ -19492,6 +20023,9 @@ const menuSchema = {
 
 //#endregion
 //#region src/shortcuts/utils.ts
+function whenTextEditorFocused(contextService) {
+	return contextService.getContextValue(FOCUSING_UNIVER_EDITOR) && !contextService.getContextValue(FOCUSING_COMMON_DRAWINGS) && (contextService.getContextValue(FOCUSING_DOC) || contextService.getContextValue(EDITOR_ACTIVATED) || contextService.getContextValue(FOCUSING_FX_BAR_EDITOR));
+}
 function whenDocAndEditorFocused(contextService) {
 	return contextService.getContextValue(FOCUSING_DOC) && contextService.getContextValue(FOCUSING_UNIVER_EDITOR) && !contextService.getContextValue(FOCUSING_COMMON_DRAWINGS);
 }
@@ -19506,6 +20040,11 @@ const TabShortCut = {
 	binding: KeyCode.TAB,
 	preconditions: whenDocAndEditorFocused
 };
+const UpdateDocFieldsShortcut = {
+	id: UpdateSelectedDocFieldsCommand.id,
+	binding: KeyCode.F9,
+	preconditions: whenDocAndEditorFocused
+};
 const ShiftTabShortCut = {
 	id: TabCommand.id,
 	binding: KeyCode.TAB | MetaKeys.SHIFT,
@@ -19578,45 +20117,23 @@ const BulletListShortCut = {
 
 //#endregion
 //#region src/views/count-bar/ZoomSlider.tsx
-const ZOOM_MAP = [
-	50,
-	80,
-	100,
-	130,
-	150,
-	170,
-	200,
-	400
-];
 const DOC_ZOOM_RANGE = [10, 400];
 function ZoomSlider() {
 	const commandService = useDependency(ICommandService);
 	const univerInstanceService = useDependency(IUniverInstanceService);
-	const documentDataModel = useObservable(() => univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC).pipe(filter((documentDataModel) => documentDataModel != null)), null, false, [univerInstanceService]);
-	const getCurrentZoom = useCallback((docModel = documentDataModel) => {
-		if (!docModel) return 100;
-		return Math.round(getDocEffectiveZoomRatio(docModel) * 100);
-	}, [documentDataModel]);
-	const [zoom, setZoom] = useState(100);
-	useEffect(() => setZoom(getCurrentZoom(documentDataModel)), [documentDataModel, getCurrentZoom]);
-	useEffect(() => {
-		return commandService.onCommandExecuted((commandInfo) => {
-			if (commandInfo.id === SetDocZoomRatioOperation.id) setZoom(getCurrentZoom());
-		}).dispose;
-	}, [commandService, getCurrentZoom]);
+	const zoom = useObservable(() => getDocZoomRatio$(commandService, univerInstanceService), 100, void 0, [commandService, univerInstanceService]);
 	function handleChange(value) {
-		setZoom(value);
+		const documentDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
 		if (documentDataModel == null) return;
-		const zoomRatio = value / 100;
-		commandService.executeCommand(SetDocZoomRatioOperation.id, {
+		return commandService.executeCommand(SetDocZoomRatioOperation.id, {
 			unitId: documentDataModel.getUnitId(),
-			zoomRatio
+			zoomRatio: value / 100
 		});
 	}
 	return /* @__PURE__ */ jsx(Slider, {
 		min: DOC_ZOOM_RANGE[0],
 		value: zoom,
-		shortcuts: ZOOM_MAP,
+		shortcuts: DOC_ZOOM_SHORTCUTS,
 		onChange: handleChange
 	});
 }
@@ -20515,21 +21032,6 @@ function DocSideMenuContent() {
 
 //#endregion
 //#region src/controllers/ui.controller.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
 let DocUIController = class DocUIController extends Disposable {
 	constructor(_injector, _commandService, _layoutService, _menuManagerService, _uiPartsService, _univerInstanceService, _shortcutService, _configService, _embedInteractionBoundaryService, _embedRuntimeFocusCoordinator) {
 		super();
@@ -20551,6 +21053,7 @@ let DocUIController = class DocUIController extends Disposable {
 	_initMenus() {
 		this._menuManagerService.appendRootMenu(floatToolbarMenuSchema);
 		this._menuManagerService.mergeMenu(menuSchema);
+		this._menuManagerService.mergeMenu(headerFooterRibbonSchema);
 	}
 	_initShortCut() {
 		[
@@ -20566,7 +21069,8 @@ let DocUIController = class DocUIController extends Disposable {
 			AlignLeftShortCut,
 			OrderListShortCut,
 			BulletListShortCut,
-			TabShortCut
+			TabShortCut,
+			UpdateDocFieldsShortcut
 		].forEach((shortcut) => {
 			this.disposeWithMe(this._shortcutService.registerShortcut(shortcut));
 		});
@@ -20575,6 +21079,7 @@ let DocUIController = class DocUIController extends Disposable {
 		this._initMenus();
 		this._initFocusHandler();
 		this._initCommands();
+		this._initDateTimeFields();
 		this._initUiParts();
 		this._initShortCut();
 	}
@@ -20583,10 +21088,25 @@ let DocUIController = class DocUIController extends Disposable {
 			OpenDocPermissionPanelOperation,
 			OpenDocParagraphPermissionOperation,
 			CoreHeaderFooterCommand,
+			InsertHeaderFooterFieldCommand,
+			RefreshHeaderFooterFieldsCommand,
+			UpdateSelectedDocFieldsCommand,
 			OpenHeaderFooterPanelCommand,
-			SidebarDocHeaderFooterPanelOperation
+			DocHeaderFooterRibbonOperation
 		].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
 	}
+	_initDateTimeFields() {
+		const refreshed = /* @__PURE__ */ new WeakSet();
+		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC).subscribe((model) => {
+			if (model && !refreshed.has(model)) {
+				refreshed.add(model);
+				this._commandService.syncExecuteCommand(RefreshHeaderFooterFieldsCommand.id, {
+					unitId: model.getUnitId(),
+					onOpen: true
+				});
+			}
+		}));
+	}
 	_initFocusHandler() {
 		this.disposeWithMe(this._layoutService.registerFocusHandler(UniverInstanceType.UNIVER_DOC, (unitId) => {
 			if (this._shouldPreserveEmbedFocus(unitId)) return;
@@ -20884,7 +21404,7 @@ function resolveDocsCustomBlockRenderViewport(params) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-ui";
-var version = "1.0.3";
+var version = "1.1.0";
 
 //#endregion
 //#region src/commands/commands/doc-paragraph-setting.command.ts
@@ -21131,8 +21651,8 @@ var HeaderFooterContentCover = class extends BaseObject {
 					right: pageLeft + page.pageWidth,
 					bottom: pageTop + page.pageHeight
 				});
-				const header = (_data$skeHeaders$get = data.skeHeaders.get(page.headerId)) === null || _data$skeHeaders$get === void 0 ? void 0 : _data$skeHeaders$get.get(page.pageWidth);
-				const footer = (_data$skeFooters$get = data.skeFooters.get(page.footerId)) === null || _data$skeFooters$get === void 0 ? void 0 : _data$skeFooters$get.get(page.pageWidth);
+				const header = (_data$skeHeaders$get = data.skeHeaders.get(page.headerId)) === null || _data$skeHeaders$get === void 0 ? void 0 : _data$skeHeaders$get.get(page.headerLayoutKey ?? page.pageWidth);
+				const footer = (_data$skeFooters$get = data.skeFooters.get(page.footerId)) === null || _data$skeFooters$get === void 0 ? void 0 : _data$skeFooters$get.get(page.footerLayoutKey ?? page.pageWidth);
 				const local = [];
 				if (header) this._collectTextAndTables(header, pageLeft + page.marginLeft, pageTop + header.marginTop, local);
 				if (footer) this._collectTextAndTables(footer, pageLeft + page.marginLeft, pageTop + page.pageHeight - footer.height - footer.marginBottom, local);
@@ -21590,7 +22110,7 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 		const body = (_docDataModel$getSelf = docDataModel.getSelfOrHeaderFooterModel(normalizedSegmentId)) === null || _docDataModel$getSelf === void 0 ? void 0 : _docDataModel$getSelf.getBody();
 		if (body == null) return;
 		const dataStreamLength = body.dataStream.length ?? Number.POSITIVE_INFINITY;
-		const customRanges = docDataModel.getCustomRanges() ?? [];
+		const customRanges = body.customRanges ?? [];
 		if (granularity !== "character") {
 			const nextOffset = this._getCursorOffsetByGranularity(skeleton, focusOffset, direction, granularity, normalizedSegmentId, normalizedSegmentPage, dataStreamLength, body.dataStream);
 			if (nextOffset == null || nextOffset === focusOffset) return;
@@ -21662,7 +22182,7 @@ let DocMoveCursorController = class DocMoveCursorController extends Disposable {
 		const body = (_docDataModel$getSelf2 = docDataModel.getSelfOrHeaderFooterModel(normalizedSegmentId)) === null || _docDataModel$getSelf2 === void 0 ? void 0 : _docDataModel$getSelf2.getBody();
 		if (body == null) return;
 		const dataStreamLength = body.dataStream.length ?? Number.POSITIVE_INFINITY;
-		const customRanges = docDataModel.getCustomRanges() ?? [];
+		const customRanges = body.customRanges ?? [];
 		if (granularity !== "character") {
 			let cursorOffset;
 			if (!activeRange.collapsed || allRanges.length > 1) {
@@ -22285,26 +22805,33 @@ function DocPasteOptions() {
 	const commandService = useDependency(ICommandService);
 	const localeService = useDependency(LocaleService);
 	const layoutService = useDependency(ILayoutService);
+	const editorService = useDependency(IEditorService);
 	const state = useObservable(clipboard.pasteOptions$, null);
 	const [busy, setBusy] = useState(false);
 	const [open, setOpen] = useState(false);
+	const focusEditor = () => {
+		const editor = state && clipboard.isPasteOptionsEnabled(state.unitId) && editorService.getEditor(state.unitId);
+		if (editor) editor.focus();
+		else layoutService.focus();
+	};
 	const changeMode = async (value) => {
 		setBusy(true);
 		try {
 			await commandService.executeCommand(DocChangePasteModeCommand.id, { value });
 		} finally {
 			setBusy(false);
-			layoutService.focus();
+			focusEditor();
 		}
 	};
 	if (!state) return null;
 	return /* @__PURE__ */ jsx(DropdownMenu, {
+		"data-u-editor-interaction-boundary": "true",
 		align: "start",
 		open,
 		onOpenChange: setOpen,
 		onCloseAutoFocus: (event) => {
 			event.preventDefault();
-			layoutService.focus();
+			focusEditor();
 		},
 		onEscapeKeyDown: () => clipboard.dismissPasteOptions(),
 		items: DOC_PASTE_OPTIONS.map((option) => ({
@@ -22316,6 +22843,7 @@ function DocPasteOptions() {
 			onSelect: () => changeMode(option.value)
 		})),
 		children: /* @__PURE__ */ jsxs(Button, {
+			"data-u-editor-interaction-boundary": "true",
 			size: "small",
 			disabled: busy,
 			"aria-label": localeService.t("docs-ui.pasteOptions.title"),
@@ -22324,7 +22852,7 @@ function DocPasteOptions() {
 			onKeyDown: (event) => {
 				if (event.key === "Escape") {
 					clipboard.dismissPasteOptions();
-					layoutService.focus();
+					focusEditor();
 				}
 			},
 			className: "univer-shadow-sm",
@@ -22583,28 +23111,37 @@ function useHeaderFooterOptions(unitId) {
 			page
 		};
 	};
-	const [options, setOptions] = useState(() => {
-		var _getCurrentSectionCon;
-		const config = (_getCurrentSectionCon = getCurrentSectionContext()) === null || _getCurrentSectionCon === void 0 ? void 0 : _getCurrentSectionCon.config;
-		return {
-			marginHeader: (config === null || config === void 0 ? void 0 : config.marginHeader) ?? 0,
-			marginFooter: (config === null || config === void 0 ? void 0 : config.marginFooter) ?? 0,
-			useFirstPageHeaderFooter: (config === null || config === void 0 ? void 0 : config.useFirstPageHeaderFooter) ?? BooleanNumber.FALSE,
-			evenAndOddHeaders: (config === null || config === void 0 ? void 0 : config.evenAndOddHeaders) ?? BooleanNumber.FALSE
+	const [, refresh] = useReducer((revision) => revision + 1, 0);
+	useEffect(() => {
+		const commandListener = commandService.onCommandExecuted((command) => {
+			var _command$params;
+			if (command.id === RichTextEditingMutation.id && ((_command$params = command.params) === null || _command$params === void 0 ? void 0 : _command$params.unitId) === unitId) refresh();
+		});
+		const segmentListener = docSelectionRenderService.segmentContext$.subscribe(() => refresh());
+		return () => {
+			commandListener.dispose();
+			segmentListener.unsubscribe();
 		};
-	});
+	}, [
+		commandService,
+		docSelectionRenderService,
+		unitId
+	]);
 	const sectionContext = getCurrentSectionContext();
+	const config = sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.config;
+	const options = {
+		marginHeader: (config === null || config === void 0 ? void 0 : config.marginHeader) ?? 0,
+		marginFooter: (config === null || config === void 0 ? void 0 : config.marginFooter) ?? 0,
+		useFirstPageHeaderFooter: (config === null || config === void 0 ? void 0 : config.useFirstPageHeaderFooter) ?? BooleanNumber.FALSE,
+		evenAndOddHeaders: (config === null || config === void 0 ? void 0 : config.evenAndOddHeaders) ?? BooleanNumber.FALSE
+	};
 	const headerFooterKind = ((_renderManagerService2 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.with(DocSkeletonManagerService)) === null || _renderManagerService2 === void 0 || (_renderManagerService2 = _renderManagerService2.getViewModel()) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.getEditArea()) === DocumentEditArea.FOOTER ? "footer" : "header";
 	const variant = getHeaderFooterVariant((sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.config) ?? {}, docSelectionRenderService.getSegmentPage(), sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.page);
 	const referenceKey = getSectionHeaderFooterReferenceKey(headerFooterKind, variant);
 	const canLinkToPrevious = ((sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.sectionIndex) ?? -1) > 0;
-	const [linkedToPrevious, setLinkedToPrevious] = useState(canLinkToPrevious && !(sectionContext === null || sectionContext === void 0 || (_sectionContext$secti = sectionContext.section) === null || _sectionContext$secti === void 0 ? void 0 : _sectionContext$secti[referenceKey]));
-	const handleCheckboxChange = (val, type) => {
+	const linkedToPrevious = canLinkToPrevious && !(sectionContext === null || sectionContext === void 0 || (_sectionContext$secti = sectionContext.section) === null || _sectionContext$secti === void 0 ? void 0 : _sectionContext$secti[referenceKey]);
+	const handleCheckboxChange = async (val, type) => {
 		var _renderManagerService3;
-		setOptions((prev) => ({
-			...prev,
-			[type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE
-		}));
 		const sectionContext = getCurrentSectionContext();
 		const documentStyle = sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.config;
 		const docSkeletonManagerService = (_renderManagerService3 = renderManagerService.getRenderUnitById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(DocSkeletonManagerService);
@@ -22629,7 +23166,7 @@ function useHeaderFooterOptions(unitId) {
 		if (needCreateHeaderFooter) {
 			const segmentId = generateRandomId(6);
 			if (needChangeSegmentId) docSelectionRenderService.setSegment(segmentId);
-			commandService.executeCommand(CoreHeaderFooterCommandId, {
+			await commandService.executeCommand(CoreHeaderFooterCommandId, {
 				unitId,
 				segmentId,
 				headerFooterProps: { [type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE },
@@ -22643,7 +23180,7 @@ function useHeaderFooterOptions(unitId) {
 				[type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE
 			}, editArea, segmentPageIndex, sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.page);
 			if (needFocusSegmentId && needFocusSegmentId !== prevSegmentId) docSelectionRenderService.setSegment(needFocusSegmentId);
-			commandService.executeCommand(CoreHeaderFooterCommandId, {
+			await commandService.executeCommand(CoreHeaderFooterCommandId, {
 				unitId,
 				headerFooterProps: { [type]: val ? BooleanNumber.TRUE : BooleanNumber.FALSE },
 				sectionId: sectionContext === null || sectionContext === void 0 ? void 0 : sectionContext.sectionId
@@ -22652,21 +23189,16 @@ function useHeaderFooterOptions(unitId) {
 		layoutService.focus();
 	};
 	const handleMarginChange = async (val, type) => {
-		var _getCurrentSectionCon2;
-		setOptions((prev) => ({
-			...prev,
-			[type]: val
-		}));
+		var _getCurrentSectionCon;
 		await commandService.executeCommand(CoreHeaderFooterCommandId, {
 			unitId,
 			headerFooterProps: { [type]: val },
-			sectionId: (_getCurrentSectionCon2 = getCurrentSectionContext()) === null || _getCurrentSectionCon2 === void 0 ? void 0 : _getCurrentSectionCon2.sectionId
+			sectionId: (_getCurrentSectionCon = getCurrentSectionContext()) === null || _getCurrentSectionCon === void 0 ? void 0 : _getCurrentSectionCon.sectionId
 		});
-		docSelectionRenderService.removeAllRanges();
 		docSelectionRenderService.blur();
 	};
 	const closeHeaderFooter = () => {
-		commandService.executeCommand(CloseHeaderFooterCommand.id, { unitId });
+		return commandService.executeCommand(CloseHeaderFooterCommand.id, { unitId });
 	};
 	const handleLinkToPreviousChange = async (linked) => {
 		var _renderManagerService4;
@@ -22685,7 +23217,6 @@ function useHeaderFooterOptions(unitId) {
 			linkedToPrevious: linked,
 			...linked ? {} : { segmentId }
 		})) return;
-		setLinkedToPrevious(linked);
 		docSelectionRenderService.setSegment(linked ? previousSegmentId ?? "" : segmentId);
 		layoutService.focus();
 	};
@@ -24061,6 +24592,7 @@ let MobileComponentsController = class MobileComponentsController extends Dispos
 			H5Icon,
 			HeaderFooterIcon,
 			HorizontallyIcon,
+			InsertBelowDoubleIcon,
 			InsertDoubleIcon,
 			InsertRowAboveDoubleIcon,
 			InsertRowBelowDoubleIcon,
@@ -24093,6 +24625,7 @@ let MobileComponentsController = class MobileComponentsController extends Dispos
 			TodoListDoubleIcon,
 			UnderlineIcon,
 			UnorderIcon,
+			ZoomInIcon,
 			DefaultTextColorIcon,
 			HeaderTextColorIcon,
 			MoreRightIcon,
@@ -25387,9 +25920,9 @@ let DocPasteOptionsRenderController = class DocPasteOptionsRenderController exte
 		this._context = _context;
 		this._clipboard = _clipboard;
 		_defineProperty(this, "_popup", void 0);
-		if (isInternalEditorID(_context.unitId)) return;
 		const mobile = contextService.getContextValue(MOBILE_UI_MODE) === true;
 		this.disposeWithMe(selection.onKeydown$.subscribe(({ event }) => {
+			if (!this._clipboard.isPasteOptionsEnabled(this._context.unitId)) return;
 			const key = event;
 			if ((key.ctrlKey || key.metaKey) && key.shiftKey && key.key.toLowerCase() === "v") this._clipboard.setNextPasteMode("text");
 			else if (![
@@ -25402,12 +25935,17 @@ let DocPasteOptionsRenderController = class DocPasteOptionsRenderController exte
 				this._clipboard.dismissPasteOptions();
 			}
 		}));
-		this.disposeWithMe(selection.onInputBefore$.subscribe(() => this._clipboard.dismissPasteOptions()));
+		this.disposeWithMe(selection.onInputBefore$.subscribe(() => {
+			if (this._clipboard.isPasteOptionsEnabled(this._context.unitId)) this._clipboard.dismissPasteOptions();
+		}));
 		this.disposeWithMe(selection.onPointerDown$.subscribe(() => {
+			if (!this._clipboard.isPasteOptionsEnabled(this._context.unitId)) return;
 			this._clipboard.setNextPasteMode("source");
 			if (!mobile) this._clipboard.dismissPasteOptions();
 		}));
-		this.disposeWithMe(selection.onBlur$.subscribe(() => this._clipboard.setNextPasteMode("source")));
+		this.disposeWithMe(selection.onBlur$.subscribe(() => {
+			if (this._clipboard.isPasteOptionsEnabled(this._context.unitId)) this._clipboard.setNextPasteMode("source");
+		}));
 		this.disposeWithMe(this._clipboard.pasteOptions$.subscribe((state) => {
 			var _this$_popup;
 			(_this$_popup = this._popup) === null || _this$_popup === void 0 || _this$_popup.dispose();
@@ -25427,7 +25965,7 @@ let DocPasteOptionsRenderController = class DocPasteOptionsRenderController exte
 		this.disposeWithMe(() => {
 			var _this$_popup2;
 			(_this$_popup2 = this._popup) === null || _this$_popup2 === void 0 || _this$_popup2.dispose();
-			this._clipboard.dismissPasteOptions();
+			if (this._popup) this._clipboard.dismissPasteOptions();
 		});
 	}
 };
@@ -26464,8 +27002,8 @@ var DocPrintInterceptorService = class extends Disposable {
 		const page = data.pages[pageIndex];
 		if (!page) return drawingIds;
 		collectPageDrawingIds(page, drawingIds);
-		const header = (_data$skeHeaders$get = data.skeHeaders.get(page.headerId)) === null || _data$skeHeaders$get === void 0 ? void 0 : _data$skeHeaders$get.get(page.pageWidth);
-		const footer = (_data$skeFooters$get = data.skeFooters.get(page.footerId)) === null || _data$skeFooters$get === void 0 ? void 0 : _data$skeFooters$get.get(page.pageWidth);
+		const header = (_data$skeHeaders$get = data.skeHeaders.get(page.headerId)) === null || _data$skeHeaders$get === void 0 ? void 0 : _data$skeHeaders$get.get(page.headerLayoutKey ?? page.pageWidth);
+		const footer = (_data$skeFooters$get = data.skeFooters.get(page.footerId)) === null || _data$skeFooters$get === void 0 ? void 0 : _data$skeFooters$get.get(page.footerLayoutKey ?? page.pageWidth);
 		if (header) collectPageDrawingIds(header, drawingIds);
 		if (footer) collectPageDrawingIds(footer, drawingIds);
 		return drawingIds;
@@ -27466,6 +28004,319 @@ UniverDocsMobileUIPlugin = __decorate([
 	__decorateParam(4, IConfigService)
 ], UniverDocsMobileUIPlugin);
 
+//#endregion
+//#region src/views/header-footer/panel/DocHeaderFooterFields.tsx
+function DocHeaderFooterFields({ unitId, disabled }) {
+	const localeService = useDependency(LocaleService);
+	useObservable(localeService.currentLocale$);
+	const commands = useDependency(ICommandService);
+	const layout = useDependency(ILayoutService);
+	const shortcuts = useDependency(IShortcutService);
+	const selections = useDependency(DocSelectionManagerService);
+	const instances = useDependency(IUniverInstanceService);
+	const [target, setTarget] = useState(null);
+	const [format, setFormat] = useState("short");
+	const [automatic, setAutomatic] = useState(true);
+	const [error, setError] = useState(false);
+	const [previewDate, setPreviewDate] = useState(() => /* @__PURE__ */ new Date());
+	const locale = LOCALE_META[localeService.getCurrentLocale()].tag;
+	const dialogOpen = target !== null;
+	const dialogFocusRef = useRef(null);
+	useEffect(() => {
+		var _instances$getFocused;
+		if (dialogOpen) return;
+		const focus = dialogFocusRef.current;
+		dialogFocusRef.current = null;
+		if ((focus === null || focus === void 0 ? void 0 : focus.unitId) === unitId && instances.getUnit(unitId) && ((_instances$getFocused = instances.getFocusedUnit()) === null || _instances$getFocused === void 0 ? void 0 : _instances$getFocused.getUnitId()) === focus.focusedUnitId) layout.focus(unitId);
+	}, [
+		dialogOpen,
+		instances,
+		layout,
+		unitId
+	]);
+	useEffect(() => {
+		if (!dialogOpen) return;
+		const escape = shortcuts.forceEscape();
+		return () => escape.dispose();
+	}, [dialogOpen, shortcuts]);
+	function restoreFocus(event) {
+		event.preventDefault();
+		layout.focus(unitId);
+	}
+	function openDateTime() {
+		var _instances$getUnit, _instances$getFocused2;
+		const selection = selections.getActiveTextRange();
+		const body = (_instances$getUnit = instances.getUnit(unitId)) === null || _instances$getUnit === void 0 || (_instances$getUnit = _instances$getUnit.getSelfOrHeaderFooterModel(selection === null || selection === void 0 ? void 0 : selection.segmentId)) === null || _instances$getUnit === void 0 ? void 0 : _instances$getUnit.getBody();
+		if (!(selection === null || selection === void 0 ? void 0 : selection.segmentId) || !body) return;
+		dialogFocusRef.current = {
+			unitId,
+			focusedUnitId: (_instances$getFocused2 = instances.getFocusedUnit()) === null || _instances$getFocused2 === void 0 ? void 0 : _instances$getFocused2.getUnitId()
+		};
+		setTarget({
+			unitId,
+			selection: { ...selection },
+			segmentId: selection.segmentId,
+			segmentPage: selection.segmentPage,
+			expectedDataStream: body.dataStream
+		});
+		setPreviewDate(/* @__PURE__ */ new Date());
+		setError(false);
+	}
+	async function insertDateTime() {
+		if (!target) return;
+		if (await commands.executeCommand(InsertHeaderFooterFieldCommand.id, {
+			...target,
+			fieldType: format === "time" ? "TIME" : "DATE",
+			format,
+			automatic
+		})) setTarget(null);
+		else setError(true);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-flex univer-flex-col univer-gap-1 univer-text-xs",
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenu, {
+				onCloseAutoFocus: restoreFocus,
+				disabled,
+				items: [
+					{
+						type: "item",
+						children: localeService.t("docs-ui.headerFooter.currentPage"),
+						onSelect: () => commands.executeCommand(InsertHeaderFooterFieldCommand.id, {
+							unitId,
+							fieldType: "PAGE"
+						})
+					},
+					{
+						type: "item",
+						children: localeService.t("docs-ui.headerFooter.totalPages"),
+						onSelect: () => commands.executeCommand(InsertHeaderFooterFieldCommand.id, {
+							unitId,
+							fieldType: "NUMPAGES"
+						})
+					},
+					{ type: "separator" },
+					{
+						type: "item",
+						children: localeService.t("docs-ui.headerFooter.refreshFields"),
+						onSelect: () => commands.executeCommand(RefreshHeaderFooterFieldsCommand.id, { unitId })
+					}
+				],
+				children: /* @__PURE__ */ jsxs(Button, {
+					className: "univer-justify-start",
+					"data-u-command": InsertHeaderFooterFieldCommand.id,
+					size: "small",
+					variant: "text",
+					disabled,
+					onMouseDown: (event) => event.preventDefault(),
+					children: [
+						/* @__PURE__ */ jsx(NumberIcon, { "aria-hidden": "true" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "univer-flex-1 univer-text-start",
+							children: localeService.t("docs-ui.headerFooter.pageNumber")
+						}),
+						/* @__PURE__ */ jsx(MoreDownIcon, { "aria-hidden": "true" })
+					]
+				})
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				className: "univer-justify-start",
+				"data-u-command": InsertHeaderFooterFieldCommand.id,
+				size: "small",
+				variant: "text",
+				disabled,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: openDateTime,
+				children: [/* @__PURE__ */ jsx(CalendarIcon, { "aria-hidden": "true" }), localeService.t("docs-ui.headerFooter.dateTime")]
+			}),
+			/* @__PURE__ */ jsx(Dialog, {
+				open: dialogOpen,
+				width: 360,
+				title: localeService.t("docs-ui.headerFooter.dateTime"),
+				showOk: true,
+				showCancel: true,
+				onClose: () => setTarget(null),
+				onCancel: () => setTarget(null),
+				onOk: insertDateTime,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "univer-flex univer-flex-col univer-gap-4",
+					children: [
+						/* @__PURE__ */ jsx(DropdownMenu, {
+							align: "start",
+							className: "univer-w-[--radix-popper-anchor-width]",
+							items: [{
+								type: "radio",
+								value: format,
+								hideIndicator: true,
+								onSelect: (value) => setFormat(value),
+								options: [
+									"short",
+									"long",
+									"time"
+								].map((value) => ({
+									value,
+									label: createDateTimeField(value, locale, previewDate).cachedResult
+								}))
+							}],
+							children: /* @__PURE__ */ jsxs(Button, {
+								"aria-label": localeService.t("docs-ui.headerFooter.dateTime"),
+								className: selectClassName,
+								"data-u-comp": "select",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "univer-flex-1 univer-truncate univer-text-start",
+									children: createDateTimeField(format, locale, previewDate).cachedResult
+								}), /* @__PURE__ */ jsx(MoreDownIcon, { "aria-hidden": "true" })]
+							})
+						}),
+						/* @__PURE__ */ jsx(Checkbox, {
+							checked: automatic,
+							onChange: (value) => setAutomatic(Boolean(value)),
+							children: localeService.t("docs-ui.headerFooter.updateAutomatically")
+						}),
+						error && /* @__PURE__ */ jsx("p", {
+							role: "alert",
+							children: localeService.t("docs-ui.headerFooter.insertFailed")
+						})
+					]
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/views/header-footer/panel/DocHeaderFooterRibbonControl.tsx
+function DocHeaderFooterRibbonControl(props) {
+	const instances = useDependency(IUniverInstanceService);
+	const localeService = useDependency(LocaleService);
+	useObservable(localeService.currentLocale$);
+	const document = useObservable(() => instances.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC), void 0, false, [instances]);
+	const containerRef = useRef(null);
+	const [compact, setCompact] = useState(false);
+	const { kind } = props;
+	useEffect(() => {
+		var _containerRef$current;
+		const toolbar = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.closest("[role=\"toolbar\"]");
+		if (!toolbar || kind === "insertion") return;
+		const thresholds = {
+			position: 1100,
+			options: 900,
+			navigation: 650
+		};
+		const resize = () => setCompact(toolbar.getBoundingClientRect().width < thresholds[kind]);
+		const observer = new ResizeObserver(resize);
+		observer.observe(toolbar);
+		return () => observer.disconnect();
+	}, [kind, document]);
+	if (!document) return null;
+	const content = /* @__PURE__ */ jsx(HeaderFooterRibbonControl, {
+		...props,
+		unitId: document.getUnitId()
+	}, document.getUnitId());
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		"data-u-command": OpenHeaderFooterPanelCommand.id,
+		className: "univer-flex univer-items-center univer-whitespace-nowrap",
+		children: compact && kind !== "insertion" ? /* @__PURE__ */ jsx(DropdownMenu, {
+			items: [{
+				type: "custom",
+				className: "univer-p-2",
+				children: content
+			}],
+			children: /* @__PURE__ */ jsx(Button, {
+				"data-u-command": OpenHeaderFooterPanelCommand.id,
+				size: "small",
+				variant: "text",
+				onMouseDown: (event) => event.preventDefault(),
+				children: localeService.t(`docs-ui.headerFooter.${kind}`)
+			})
+		}) : content
+	});
+}
+function HeaderFooterRibbonControl({ kind, unitId }) {
+	var _instances$getUnit, _renders$getRenderUni;
+	const localeService = useDependency(LocaleService);
+	const commandService = useDependency(ICommandService);
+	const renders = useDependency(IRenderManagerService);
+	const permissionService = useDependency(IPermissionService);
+	useObservable(permissionService.permissionPointUpdate$);
+	const instances = useDependency(IUniverInstanceService);
+	const disabled = Boolean((_instances$getUnit = instances.getUnit(unitId)) === null || _instances$getUnit === void 0 ? void 0 : _instances$getUnit.getSnapshot().disabled) || !getDocumentPermissionValue(permissionService, unitId, unitId, UnitAction.Edit);
+	const { canLinkToPrevious, linkedToPrevious, options, handleLinkToPreviousChange, handleCheckboxChange, handleMarginChange } = useHeaderFooterOptions(unitId);
+	const area = (_renders$getRenderUni = renders.getRenderUnitById(unitId)) === null || _renders$getRenderUni === void 0 ? void 0 : _renders$getRenderUni.with(DocSkeletonManagerService).getViewModel().getEditArea();
+	if (kind === "insertion") return /* @__PURE__ */ jsx(DocHeaderFooterFields, {
+		unitId,
+		disabled
+	});
+	if (kind === "navigation") return /* @__PURE__ */ jsxs("div", {
+		className: "univer-grid univer-grid-cols-[auto_auto] univer-items-center univer-gap-x-2 univer-gap-y-1 univer-text-start univer-text-xs",
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				"data-u-command": OpenHeaderFooterPanelCommand.id,
+				size: "small",
+				variant: "text",
+				disabled: disabled || area === DocumentEditArea.HEADER,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: () => commandService.executeCommand(OpenHeaderFooterPanelCommand.id, { editArea: DocumentEditArea.HEADER }),
+				children: localeService.t("docs-ui.headerFooter.goToHeader")
+			}),
+			/* @__PURE__ */ jsx(Checkbox, {
+				disabled: disabled || !canLinkToPrevious,
+				checked: linkedToPrevious,
+				onChange: (value) => handleLinkToPreviousChange(Boolean(value)),
+				children: localeService.t("docs-ui.headerFooter.linkToPrevious")
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				"data-u-command": OpenHeaderFooterPanelCommand.id,
+				size: "small",
+				variant: "text",
+				disabled: disabled || area === DocumentEditArea.FOOTER,
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: () => commandService.executeCommand(OpenHeaderFooterPanelCommand.id, { editArea: DocumentEditArea.FOOTER }),
+				children: localeService.t("docs-ui.headerFooter.goToFooter")
+			})
+		]
+	});
+	if (kind === "options") return /* @__PURE__ */ jsxs("div", {
+		className: "univer-flex univer-flex-col univer-gap-2 univer-text-start univer-text-xs",
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			disabled,
+			checked: options.useFirstPageHeaderFooter === BooleanNumber.TRUE,
+			onChange: (value) => handleCheckboxChange(Boolean(value), "useFirstPageHeaderFooter"),
+			children: localeService.t("docs-ui.headerFooter.firstPageCheckBox")
+		}), /* @__PURE__ */ jsx(Checkbox, {
+			disabled,
+			checked: options.evenAndOddHeaders === BooleanNumber.TRUE,
+			onChange: (value) => handleCheckboxChange(Boolean(value), "evenAndOddHeaders"),
+			children: localeService.t("docs-ui.headerFooter.oddEvenCheckBox")
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-flex univer-flex-col univer-gap-1 univer-text-start univer-text-xs",
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "univer-grid univer-grid-cols-[1fr_5rem] univer-items-center univer-gap-x-2",
+			children: [/* @__PURE__ */ jsx("span", { children: localeService.t("docs-ui.headerFooter.headerTopMargin") }), /* @__PURE__ */ jsx(InputNumber, {
+				disabled,
+				min: 0,
+				max: 200,
+				precision: 1,
+				value: options.marginHeader,
+				onChange: (value) => handleMarginChange(value ?? 0, "marginHeader")
+			})]
+		}), /* @__PURE__ */ jsxs("label", {
+			className: "univer-grid univer-grid-cols-[1fr_5rem] univer-items-center univer-gap-x-2",
+			children: [/* @__PURE__ */ jsx("span", { children: localeService.t("docs-ui.headerFooter.footerBottomMargin") }), /* @__PURE__ */ jsx(InputNumber, {
+				disabled,
+				min: 0,
+				max: 200,
+				precision: 1,
+				value: options.marginFooter,
+				onChange: (value) => handleMarginChange(value ?? 0, "marginFooter")
+			})]
+		})]
+	});
+}
+
 //#endregion
 //#region src/views/paragraph-menu/component-keys.ts
 /**
@@ -27523,6 +28374,10 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 		var _this$_paragraphMenu2;
 		return ((_this$_paragraphMenu2 = this._paragraphMenu) === null || _this$_paragraphMenu2 === void 0 ? void 0 : _this$_paragraphMenu2.target) ?? null;
 	}
+	get focusedTableTarget() {
+		var _this$_focusedTableMe;
+		return ((_this$_focusedTableMe = this._focusedTableMenu) === null || _this$_focusedTableMe === void 0 ? void 0 : _this$_focusedTableMe.target) ?? null;
+	}
 	setBlockMenuDragging(isDragging) {
 		this._isBlockMenuDragging = isDragging;
 		if (isDragging) this._dragInteraction ??= this._docLayoutInteractionService.beginInteraction();
@@ -27550,6 +28405,11 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 		_defineProperty(this, "_paragraphMenu", null);
 		_defineProperty(this, "_activeTarget$", new BehaviorSubject(null));
 		_defineProperty(this, "activeTarget$", this._activeTarget$.asObservable());
+		_defineProperty(this, "_focusedTableMenu", null);
+		_defineProperty(this, "_focusedTableTarget$", new BehaviorSubject(null));
+		_defineProperty(this, "focusedTableTarget$", this._focusedTableTarget$.asObservable());
+		_defineProperty(this, "_focusedTableMenuDismiss$", new Subject());
+		_defineProperty(this, "focusedTableMenuDismiss$", this._focusedTableMenuDismiss$.asObservable());
 		_defineProperty(this, "_slashMenuRequest$", new BehaviorSubject(null));
 		_defineProperty(this, "slashMenuRequest$", this._slashMenuRequest$.asObservable());
 		_defineProperty(this, "_isBlockMenuDragging", false);
@@ -27565,6 +28425,7 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 				this._isBlockMenuDragging = false;
 				this.hideParagraphMenu(true);
 			}
+			if (this._focusedTableMenu && !this._canEditDocument(this._focusedTableMenu.target.menuRange)) this.hideFocusedTableMenu();
 		}));
 	}
 	_isCursorInActiveParagraph() {
@@ -27601,9 +28462,11 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 	_hasExpandedSelection() {
 		return this._hasExpandedSelectionRanges(this._docSelectionManagerService.getDocRanges());
 	}
-	setParagraphMenuActive(active) {
-		if (this._paragraphMenu) this._paragraphMenu.active = active;
-		if (active && this._paragraphMenu) this._menuInteraction ??= this._docLayoutInteractionService.beginInteraction();
+	setParagraphMenuActive(active, focusedTable = false) {
+		var _this$_paragraphMenu3, _this$_focusedTableMe2;
+		const menu = focusedTable ? this._focusedTableMenu : this._paragraphMenu;
+		if (menu) menu.active = active;
+		if (((_this$_paragraphMenu3 = this._paragraphMenu) === null || _this$_paragraphMenu3 === void 0 ? void 0 : _this$_paragraphMenu3.active) || ((_this$_focusedTableMe2 = this._focusedTableMenu) === null || _this$_focusedTableMe2 === void 0 ? void 0 : _this$_focusedTableMe2.active)) this._menuInteraction ??= this._docLayoutInteractionService.beginInteraction();
 		else {
 			var _this$_menuInteractio;
 			(_this$_menuInteractio = this._menuInteraction) === null || _this$_menuInteractio === void 0 || _this$_menuInteractio.dispose();
@@ -27612,7 +28475,9 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 	}
 	_init() {
 		const handleHoverTarget = (paragraph, tableBound) => {
+			var _this$_focusedTableMe3;
 			if (this._isBlockMenuDragging) return;
+			if ((_this$_focusedTableMe3 = this._focusedTableMenu) === null || _this$_focusedTableMe3 === void 0 ? void 0 : _this$_focusedTableMe3.active) return;
 			if (this._docSelectionRenderService.isOnPointerEvent) {
 				this.hideParagraphMenu(true);
 				return;
@@ -27623,18 +28488,18 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 				return;
 			}
 			if (selectionState.hasRectRange) {
-				var _this$_paragraphMenu3;
+				var _this$_paragraphMenu4;
 				if (tableBound) {
 					this.showTableMenu(tableBound);
 					return;
 				}
-				if (((_this$_paragraphMenu3 = this._paragraphMenu) === null || _this$_paragraphMenu3 === void 0 ? void 0 : _this$_paragraphMenu3.target.kind) === DocumentBlockType.TABLE) return;
+				if (((_this$_paragraphMenu4 = this._paragraphMenu) === null || _this$_paragraphMenu4 === void 0 ? void 0 : _this$_paragraphMenu4.target.kind) === DocumentBlockType.TABLE) return;
 				this.hideParagraphMenu(true);
 				return;
 			}
 			if (this._docSkeletonManagerService.getViewModel().getEditArea() === DocumentEditArea.BODY && !this._floatMenuService.floatMenu && !this._context.unit.getDisabled() && this._canEditDocument()) {
-				var _this$_paragraphMenu4;
-				if ((_this$_paragraphMenu4 = this._paragraphMenu) === null || _this$_paragraphMenu4 === void 0 ? void 0 : _this$_paragraphMenu4.active) return;
+				var _this$_paragraphMenu5;
+				if ((_this$_paragraphMenu5 = this._paragraphMenu) === null || _this$_paragraphMenu5 === void 0 ? void 0 : _this$_paragraphMenu5.active) return;
 				if (paragraph) {
 					this.showParagraphMenu(paragraph);
 					return;
@@ -27660,16 +28525,17 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 			this.hideParagraphMenu(true);
 		}));
 		this.disposeWithMe(this._docSelectionManagerService.textSelection$.subscribe(({ textRanges, rectRanges }) => {
-			var _this$_paragraphMenu5;
+			var _this$_paragraphMenu6;
 			const selectionState = this._getExpandedSelectionState([...textRanges, ...rectRanges]);
-			if (selectionState.hasExpandedTextRange || selectionState.hasRectRange && ((_this$_paragraphMenu5 = this._paragraphMenu) === null || _this$_paragraphMenu5 === void 0 ? void 0 : _this$_paragraphMenu5.target.kind) !== DocumentBlockType.TABLE) this.hideParagraphMenu(true);
+			if (selectionState.hasExpandedTextRange || selectionState.hasRectRange && ((_this$_paragraphMenu6 = this._paragraphMenu) === null || _this$_paragraphMenu6 === void 0 ? void 0 : _this$_paragraphMenu6.target.kind) !== DocumentBlockType.TABLE) this.hideParagraphMenu(true);
 		}));
 		let lastScrollY = 0;
 		this.disposeWithMe(this._context.scene.getViewport("viewMain").onScrollAfter$.subscribeEvent((e) => {
-			var _this$_paragraphMenu6;
+			var _this$_paragraphMenu7;
 			if (lastScrollY === e.scrollY) return;
 			lastScrollY = e.scrollY;
-			if ((_this$_paragraphMenu6 = this._paragraphMenu) === null || _this$_paragraphMenu6 === void 0 ? void 0 : _this$_paragraphMenu6.blockRange) return;
+			this._focusedTableMenuDismiss$.next();
+			if ((_this$_paragraphMenu7 = this._paragraphMenu) === null || _this$_paragraphMenu7 === void 0 ? void 0 : _this$_paragraphMenu7.blockRange) return;
 			if (this._isBlockMenuDragging) return;
 			this.hideParagraphMenu(true);
 		}));
@@ -27680,6 +28546,7 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 		this.disposeWithMe(this._docSelectionRenderService.onKeydown$.subscribe((config) => {
 			if (this._isBlockMenuDragging) return;
 			if (this._handleSlashMenuKeydown(config)) return;
+			this._focusedTableMenuDismiss$.next();
 			this.hideParagraphMenu(true);
 		}));
 		this.disposeWithMe(this._docSelectionRenderService.onInputBefore$.subscribe((config) => {
@@ -27735,10 +28602,10 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 		return null;
 	}
 	_getSlashMenuParagraph(config) {
-		var _this$_paragraphMenu7;
+		var _this$_paragraphMenu8;
 		const activeRange = this._getCollapsedTextRange(config);
 		const offset = activeRange === null || activeRange === void 0 ? void 0 : activeRange.startOffset;
-		const activeParagraph = ((_this$_paragraphMenu7 = this._paragraphMenu) === null || _this$_paragraphMenu7 === void 0 ? void 0 : _this$_paragraphMenu7.paragraph) ?? null;
+		const activeParagraph = ((_this$_paragraphMenu8 = this._paragraphMenu) === null || _this$_paragraphMenu8 === void 0 ? void 0 : _this$_paragraphMenu8.paragraph) ?? null;
 		if (activeParagraph && offset != null && offset >= activeParagraph.paragraphStart && offset <= activeParagraph.paragraphEnd) return activeParagraph;
 		if (activeParagraph && offset == null) return activeParagraph;
 		if (offset == null) return null;
@@ -27759,7 +28626,7 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 		}
 	}
 	showParagraphMenu(paragraph) {
-		var _this$_paragraphMenu8;
+		var _this$_paragraphMenu9;
 		if (this._hasExpandedSelection()) {
 			this.hideParagraphMenu(true);
 			return;
@@ -27769,7 +28636,7 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 			this.hideParagraphMenu(true);
 			return;
 		}
-		if (((_this$_paragraphMenu8 = this._paragraphMenu) === null || _this$_paragraphMenu8 === void 0 ? void 0 : _this$_paragraphMenu8.target.key) === target.key) return;
+		if (((_this$_paragraphMenu9 = this._paragraphMenu) === null || _this$_paragraphMenu9 === void 0 ? void 0 : _this$_paragraphMenu9.target.key) === target.key) return;
 		this.hideParagraphMenu(true);
 		const targetParagraph = target.paragraph ?? paragraph;
 		const blockRange = target.blockRange;
@@ -27804,15 +28671,19 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 		};
 		this._activeTarget$.next(target);
 	}
-	showTableMenu(tableBound) {
-		var _body$tables, _this$_paragraphMenu9;
-		if (this._hasExpandedTextSelection()) {
+	showTableMenu(tableBound, focused = false) {
+		var _this$_focusedTableMe4, _body$tables, _this$_paragraphMenu10;
+		if (!focused && ((_this$_focusedTableMe4 = this._focusedTableMenu) === null || _this$_focusedTableMe4 === void 0 || (_this$_focusedTableMe4 = _this$_focusedTableMe4.target.table) === null || _this$_focusedTableMe4 === void 0 ? void 0 : _this$_focusedTableMe4.tableId) === tableBound.tableId) return;
+		if (!focused && this._hasExpandedTextSelection()) {
 			this.hideParagraphMenu(true);
 			return;
 		}
 		const body = this._context.unit.getBody();
 		const table = body === null || body === void 0 || (_body$tables = body.tables) === null || _body$tables === void 0 ? void 0 : _body$tables.find((item) => item.tableId === tableBound.tableId);
-		if (!table) return;
+		if (!table) {
+			if (focused) this.hideFocusedTableMenu();
+			return;
+		}
 		const target = {
 			kind: DocumentBlockType.TABLE,
 			key: `${DocumentBlockType.TABLE}:${table.tableId}`,
@@ -27825,17 +28696,21 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 			},
 			moveRange: {
 				startOffset: table.startIndex,
-				endOffset: table.endIndex
+				endOffset: table.endIndex + ((body === null || body === void 0 ? void 0 : body.dataStream[table.endIndex]) === "\r" ? 1 : 0)
 			},
 			emptyMode: false,
 			draggable: true
 		};
 		if (!this._canEditDocument(target.menuRange)) {
+			if (focused) {
+				this.hideFocusedTableMenu();
+				return;
+			}
 			this.hideParagraphMenu(true);
 			return;
 		}
-		if (this._shouldKeepCurrentCellMenuForTable(table)) return;
-		if (((_this$_paragraphMenu9 = this._paragraphMenu) === null || _this$_paragraphMenu9 === void 0 ? void 0 : _this$_paragraphMenu9.target.key) === target.key) return;
+		if (!focused && this._shouldKeepCurrentCellMenuForTable(table)) return;
+		if (!focused && ((_this$_paragraphMenu10 = this._paragraphMenu) === null || _this$_paragraphMenu10 === void 0 ? void 0 : _this$_paragraphMenu10.target.key) === target.key) return;
 		const anchorRect = getTableAnchorRect(tableBound);
 		const paragraph = {
 			rect: tableBound.rect,
@@ -27846,8 +28721,16 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 			pageIndex: tableBound.pageIndex,
 			firstLine: anchorRect
 		};
+		if (focused) {
+			target.paragraph = paragraph;
+			this._showFocusedTableMenu(tableBound, target);
+			return;
+		}
+		this._showHoverTableMenu(tableBound, target, paragraph);
+	}
+	_showHoverTableMenu(tableBound, target, paragraph) {
 		this.hideParagraphMenu(true);
-		const getFirstLine = () => getTableAnchorRect(this._docEventManagerService.tableBounds.get(table.tableId) ?? tableBound);
+		const getFirstLine = () => getTableAnchorRect(this._docEventManagerService.tableBounds.get(tableBound.tableId) ?? tableBound);
 		const disposable = this._docPopupManagerService.attachPopupToRect(getFirstLine, {
 			componentKey: DOC_TABLE_BLOCK_MENU_COMPONENT_KEY,
 			constrainToCanvas: true,
@@ -27866,9 +28749,40 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 		};
 		this._activeTarget$.next(target);
 	}
+	_showFocusedTableMenu(tableBound, target) {
+		var _this$_focusedTableMe5, _this$_paragraphMenu11;
+		if (((_this$_focusedTableMe5 = this._focusedTableMenu) === null || _this$_focusedTableMe5 === void 0 ? void 0 : _this$_focusedTableMe5.target.key) === target.key) {
+			this._focusedTableMenu.target = target;
+			this._focusedTableMenu.bound = tableBound;
+			this._focusedTableTarget$.next(target);
+			return;
+		}
+		this.hideFocusedTableMenu();
+		if (((_this$_paragraphMenu11 = this._paragraphMenu) === null || _this$_paragraphMenu11 === void 0 ? void 0 : _this$_paragraphMenu11.target.key) === target.key) this.hideParagraphMenu(true);
+		const getFocusedAnchor = () => {
+			var _this$_focusedTableMe6;
+			return getTableAnchorRect(this._docEventManagerService.tableBounds.get(tableBound.tableId) ?? ((_this$_focusedTableMe6 = this._focusedTableMenu) === null || _this$_focusedTableMe6 === void 0 ? void 0 : _this$_focusedTableMe6.bound) ?? tableBound);
+		};
+		const disposable = this._docPopupManagerService.attachPopupToRect(getFocusedAnchor, {
+			componentKey: DOC_TABLE_BLOCK_MENU_COMPONENT_KEY,
+			extraProps: { focusedTableMenu: true },
+			constrainToCanvas: true,
+			requiresStableLayout: false,
+			direction: "top-right",
+			onClickOutside: () => this._focusedTableMenuDismiss$.next(),
+			zIndex: 102
+		}, this._context.unitId);
+		this._focusedTableMenu = {
+			target,
+			bound: tableBound,
+			disposable,
+			active: false
+		};
+		this._focusedTableTarget$.next(target);
+	}
 	_shouldKeepCurrentCellMenuForTable(table) {
-		var _this$_paragraphMenu10;
-		const target = (_this$_paragraphMenu10 = this._paragraphMenu) === null || _this$_paragraphMenu10 === void 0 ? void 0 : _this$_paragraphMenu10.target;
+		var _this$_paragraphMenu12;
+		const target = (_this$_paragraphMenu12 = this._paragraphMenu) === null || _this$_paragraphMenu12 === void 0 ? void 0 : _this$_paragraphMenu12.target;
 		if (!target || target.kind === DocumentBlockType.TABLE || !target.cellRange) return false;
 		return target.cellRange.startOffset >= table.startIndex && target.cellRange.startOffset <= table.endIndex;
 	}
@@ -27911,22 +28825,32 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 	hideParagraphMenu(force = false) {
 		if (this._isBlockMenuDragging) return;
 		if (this._paragraphMenu && (this._paragraphMenu.disposable.canDispose() || force)) {
-			var _this$_menuInteractio2;
 			this._paragraphMenu.disposable.dispose();
 			this._paragraphMenu = null;
-			(_this$_menuInteractio2 = this._menuInteraction) === null || _this$_menuInteractio2 === void 0 || _this$_menuInteractio2.dispose();
-			this._menuInteraction = null;
+			this.setParagraphMenuActive(false);
 			this._isSlashMenuActive = false;
 			this._slashMenuRequest$.next(null);
 			this._activeTarget$.next(null);
 		}
 	}
+	hideFocusedTableMenu() {
+		var _this$_focusedTableMe7;
+		(_this$_focusedTableMe7 = this._focusedTableMenu) === null || _this$_focusedTableMe7 === void 0 || _this$_focusedTableMe7.disposable.dispose();
+		this._focusedTableMenu = null;
+		this._focusedTableTarget$.next(null);
+		this.setParagraphMenuActive(false, true);
+	}
 	_canEditDocument(range, segmentId = "") {
 		return canEditDocumentTargets(this._permissionService, this._context.unitId, range ? getDocumentEditTargetObjectIds(this._context.unit, segmentId, range) : []);
 	}
 	dispose() {
-		var _this$_menuInteractio3, _this$_dragInteractio2;
-		(_this$_menuInteractio3 = this._menuInteraction) === null || _this$_menuInteractio3 === void 0 || _this$_menuInteractio3.dispose();
+		var _this$_menuInteractio2, _this$_dragInteractio2;
+		this._isBlockMenuDragging = false;
+		this.hideFocusedTableMenu();
+		this.hideParagraphMenu(true);
+		this._focusedTableTarget$.complete();
+		this._focusedTableMenuDismiss$.complete();
+		(_this$_menuInteractio2 = this._menuInteraction) === null || _this$_menuInteractio2 === void 0 || _this$_menuInteractio2.dispose();
 		this._menuInteraction = null;
 		(_this$_dragInteractio2 = this._dragInteraction) === null || _this$_dragInteractio2 === void 0 || _this$_dragInteractio2.dispose();
 		this._dragInteraction = null;
@@ -28258,9 +29182,6 @@ function createParagraphMenuHoverOpenScheduler(openMenu, delay = 800) {
 		}
 	};
 }
-function setParagraphMenuInteractionActive(docParagraphMenuService, active) {
-	docParagraphMenuService === null || docParagraphMenuService === void 0 || docParagraphMenuService.setParagraphMenuActive(active);
-}
 function isEmptyParagraphMenuTarget(dataStream, paragraph) {
 	if (!paragraph) return false;
 	return dataStream.slice(paragraph.paragraphStart, paragraph.paragraphEnd).replace(/[\r\n]/g, "") === "";
@@ -28670,7 +29591,7 @@ function getBlockRangeClipboardTargetRange(commandId, target, paragraph) {
 	return null;
 }
 function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
-	var _doc$getBody, _paragraphObj$paragra;
+	var _popup$extraProps, _doc$getBody, _paragraphObj$paragra;
 	const [visible, setVisible] = useState(false);
 	const [openMode, setOpenMode] = useState("pointer");
 	const [anchorRect, setAnchorRect] = useState(null);
@@ -28679,10 +29600,12 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const targetRangeRef = useRef(null);
 	const dragTargetOffsetRef = useRef(null);
 	const dragRangeRef = useRef(null);
+	const dragCleanupRef = useRef(null);
 	const isDraggingRef = useRef(false);
 	const openMenuRef = useRef(() => void 0);
 	const hoverOpenSchedulerRef = useRef(createParagraphMenuHoverOpenScheduler(() => openMenuRef.current()));
 	const commandService = useDependency(ICommandService);
+	const logService = useDependency(ILogService);
 	const localeService = useDependency(LocaleService);
 	const themeService = useDependency(ThemeService);
 	const docSelectionManagerService = useDependency(DocSelectionManagerService);
@@ -28703,12 +29626,20 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const doc = univerInstanceService.getUnit(popup.unitId, UniverInstanceType.UNIVER_DOC);
 	const docParagraphMenuService = renderUnit === null || renderUnit === void 0 ? void 0 : renderUnit.with(DocParagraphMenuService);
 	const docEventManagerService = renderUnit === null || renderUnit === void 0 ? void 0 : renderUnit.with(DocEventManagerService);
-	const activeTarget = useObservable(docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget$);
+	const isFocusedTableMenu = ((_popup$extraProps = popup.extraProps) === null || _popup$extraProps === void 0 ? void 0 : _popup$extraProps.focusedTableMenu) === true;
+	const activeTarget = useObservable(isFocusedTableMenu ? docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.focusedTableTarget$ : docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget$);
 	const slashMenuRequest = useObservable(docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.slashMenuRequest$);
 	const paragraph = useObservable(docEventManagerService === null || docEventManagerService === void 0 ? void 0 : docEventManagerService.hoverParagraph$);
 	const paragraphLeft = useObservable(docEventManagerService === null || docEventManagerService === void 0 ? void 0 : docEventManagerService.hoverParagraphLeft$);
-	const rawActiveTarget = activeTarget ?? (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget);
-	const currentActiveTarget = tableBlockOnly ? (rawActiveTarget === null || rawActiveTarget === void 0 ? void 0 : rawActiveTarget.kind) === "table" ? rawActiveTarget : null : (rawActiveTarget === null || rawActiveTarget === void 0 ? void 0 : rawActiveTarget.kind) === "table" ? null : rawActiveTarget;
+	const getActiveTarget = () => {
+		if (isFocusedTableMenu) return (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.focusedTableTarget) ?? activeTarget;
+		return (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) ?? activeTarget;
+	};
+	const setMenuInteractionActive = (active) => {
+		docParagraphMenuService === null || docParagraphMenuService === void 0 || docParagraphMenuService.setParagraphMenuActive(active, isFocusedTableMenu);
+	};
+	const rawActiveTarget = getActiveTarget();
+	const currentActiveTarget = (rawActiveTarget === null || rawActiveTarget === void 0 ? void 0 : rawActiveTarget.kind) === "table" === tableBlockOnly ? rawActiveTarget : null;
 	const activeParagraphBound = (currentActiveTarget === null || currentActiveTarget === void 0 ? void 0 : currentActiveTarget.paragraph) ?? (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeParagraph) ?? paragraph ?? paragraphLeft;
 	const startIndex = activeParagraphBound === null || activeParagraphBound === void 0 ? void 0 : activeParagraphBound.startIndex;
 	const dataStream = (doc === null || doc === void 0 || (_doc$getBody = doc.getBody()) === null || _doc$getBody === void 0 ? void 0 : _doc$getBody.dataStream) ?? "";
@@ -28761,13 +29692,41 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		if (activeElement === focusedElement || !focusedElement.isConnected && activeElement === body) layoutService.focus();
 	}, [layoutService]);
 	useLayoutEffect(() => restoreMenuFocus, [restoreMenuFocus]);
-	const handleHideMenu = () => {
+	const handleHideMenu = useCallback(() => {
+		hoverOpenSchedulerRef.current.cancel();
 		restoreMenuFocus();
 		setVisible(false);
 		setOpenMode("pointer");
 		targetRangeRef.current = null;
-		setParagraphMenuInteractionActive(docParagraphMenuService, false);
-	};
+		docParagraphMenuService === null || docParagraphMenuService === void 0 || docParagraphMenuService.setParagraphMenuActive(false, isFocusedTableMenu);
+	}, [
+		docParagraphMenuService,
+		isFocusedTableMenu,
+		restoreMenuFocus
+	]);
+	useEffect(() => {
+		if (!isFocusedTableMenu || !docParagraphMenuService) return;
+		const subscription = docParagraphMenuService.focusedTableMenuDismiss$.subscribe(handleHideMenu);
+		const ownerDocument = popup.canvasElement.ownerDocument;
+		const handleKeydown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				handleHideMenu();
+			}
+		};
+		if (visible) ownerDocument.addEventListener("keydown", handleKeydown, true);
+		return () => {
+			subscription.unsubscribe();
+			ownerDocument.removeEventListener("keydown", handleKeydown, true);
+		};
+	}, [
+		docParagraphMenuService,
+		isFocusedTableMenu,
+		handleHideMenu,
+		popup.canvasElement,
+		visible
+	]);
 	const clearHideTimer = () => {
 		if (hideTimerRef.current != null) {
 			window.clearTimeout(hideTimerRef.current);
@@ -28785,8 +29744,8 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const handleOpenMenu = (mode = "pointer") => {
 		clearHideTimer();
 		if (openMode === "slash") return;
-		const latestTarget = (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) ?? activeTarget;
-		setParagraphMenuInteractionActive(docParagraphMenuService, true);
+		const latestTarget = getActiveTarget();
+		setMenuInteractionActive(true);
 		const targetRange = latestTarget ? {
 			...latestTarget.menuRange,
 			segmentId: activeParagraphBound === null || activeParagraphBound === void 0 ? void 0 : activeParagraphBound.segmentId
@@ -28834,7 +29793,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		return commandService.executeCommand(resolved.commandId, resolved.params);
 	};
 	const unwrapActiveBlockRange = async () => {
-		const latestTarget = (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) ?? activeTarget;
+		const latestTarget = getActiveTarget();
 		if (!latestTarget || latestTarget.kind !== "blockRange" || !latestTarget.blockRange || !(doc === null || doc === void 0 ? void 0 : doc.getBody())) return null;
 		const previousBody = doc.getBody();
 		const { body, range } = unwrapBlockRangeBody(previousBody, latestTarget.blockRange);
@@ -28857,7 +29816,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 		return nextRange;
 	};
 	const executeParagraphMenuOption = async (option) => {
-		const latestTarget = (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) ?? activeTarget;
+		const latestTarget = getActiveTarget();
 		const targetRange = getTargetSelectionRange(latestTarget, activeParagraphBound ?? void 0);
 		const blockRange = getBlockSelectionRange(latestTarget, activeParagraphBound ?? void 0);
 		const formattingRange = getParagraphFormattingRange(latestTarget, activeParagraphBound ?? void 0);
@@ -28961,31 +29920,35 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 	const hoverBridgeStyle = visible && (menuDirection === "left" || menuDirection === "right") ? getParagraphMenuHoverBridgeStyle(anchorRect, menuDirection) : void 0;
 	const resolvedParagraphMenuType = openMode === "slash" ? DOC_PARAGRAPH_T_INSERT_MENU_ID : paragraphMenuType;
 	useEffect(() => () => {
+		var _dragCleanupRef$curre;
+		(_dragCleanupRef$curre = dragCleanupRef.current) === null || _dragCleanupRef$curre === void 0 || _dragCleanupRef$curre.call(dragCleanupRef);
 		if (hideTimerRef.current != null) {
 			window.clearTimeout(hideTimerRef.current);
 			hideTimerRef.current = null;
 		}
 		hoverOpenSchedulerRef.current.cancel();
-		setParagraphMenuInteractionActive(docParagraphMenuService, false);
-	}, []);
+		docParagraphMenuService === null || docParagraphMenuService === void 0 || docParagraphMenuService.setParagraphMenuActive(false, isFocusedTableMenu);
+	}, [docParagraphMenuService, isFocusedTableMenu]);
 	useEffect(() => {
-		if (!slashMenuRequest || handledSlashRequestNonceRef.current >= slashMenuRequest.nonce) return;
+		if (tableBlockOnly || !slashMenuRequest || handledSlashRequestNonceRef.current >= slashMenuRequest.nonce) return;
 		handledSlashRequestNonceRef.current = slashMenuRequest.nonce;
 		hoverOpenSchedulerRef.current.cancel();
 		clearHideTimer();
 		isMouseOver.current = false;
 		handleOpenSlashMenu(slashMenuRequest);
-	}, [slashMenuRequest]);
+	}, [slashMenuRequest, tableBlockOnly]);
 	if (!currentActiveTarget) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("div", {
 			"data-u-comp": "paragraph-menu",
+			"data-u-table-menu": tableBlockOnly ? "true" : void 0,
+			"data-u-focused-table-menu": isFocusedTableMenu ? "true" : void 0,
 			ref: anchorRef,
-			className: clsx("univer-mr-1 univer-inline-flex univer-h-7 univer-cursor-pointer univer-items-center univer-gap-1 univer-rounded-md univer-border univer-border-gray-200 univer-bg-gray-0 univer-px-2 univer-py-0 univer-shadow-sm univer-transition-colors hover:univer-bg-gray-50 hover:univer-shadow-md dark:!univer-border-gray-700 dark:!univer-bg-gray-900 dark:hover:!univer-bg-gray-800", { "univer-bg-gray-100 univer-shadow-md dark:!univer-bg-gray-800": visible }),
+			className: clsx("univer-mr-1 univer-inline-flex univer-h-7 univer-cursor-pointer univer-items-center univer-gap-1 univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-gray-0 univer-px-2 univer-py-0 univer-shadow-sm univer-transition-colors hover:univer-bg-gray-50 hover:univer-shadow-md dark:!univer-border-gray-600 dark:!univer-bg-gray-900 dark:hover:!univer-bg-gray-800", { "univer-bg-gray-100 univer-shadow-md dark:!univer-bg-gray-800": visible }),
 			onMouseEnter: (e) => {
 				var _popup$onPointerEnter;
 				(_popup$onPointerEnter = popup.onPointerEnter) === null || _popup$onPointerEnter === void 0 || _popup$onPointerEnter.call(popup, e);
-				setParagraphMenuInteractionActive(docParagraphMenuService, true);
+				setMenuInteractionActive(true);
 				isMouseOver.current = true;
 				scheduleOpenMenu();
 			},
@@ -29007,7 +29970,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 				title: localeService.t("docs-ui.doc.blockMenu.dragBlock"),
 				onPointerDown: (event) => {
 					var _event$currentTarget$, _event$currentTarget;
-					const latestTarget = (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) ?? activeTarget;
+					const latestTarget = getActiveTarget();
 					const moveRange = latestTarget === null || latestTarget === void 0 ? void 0 : latestTarget.moveRange;
 					if (!moveRange || !(latestTarget === null || latestTarget === void 0 ? void 0 : latestTarget.draggable)) return;
 					event.preventDefault();
@@ -29035,6 +29998,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 						window.removeEventListener("pointerup", handlePointerUp);
 						window.removeEventListener("pointercancel", handlePointerCancel);
 						window.removeEventListener("blur", handleWindowBlur);
+						dragCleanupRef.current = null;
 						const range = dragRangeRef.current;
 						const targetOffset = dragTargetOffsetRef.current;
 						dragRangeRef.current = null;
@@ -29050,7 +30014,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 							unitId: popup.unitId,
 							sourceRange: range,
 							targetOffset
-						});
+						}).catch((error) => logService.error(error));
 					};
 					const handlePointerUp = (upEvent) => {
 						if (upEvent.pointerId !== pointerId) return;
@@ -29064,6 +30028,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 					const handleWindowBlur = () => {
 						finishDrag(false);
 					};
+					dragCleanupRef.current = () => finishDrag(false);
 					window.addEventListener("pointermove", handlePointerMove);
 					window.addEventListener("pointerup", handlePointerUp);
 					window.addEventListener("pointercancel", handlePointerCancel);
@@ -29079,7 +30044,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 			onMouseEnter: (e) => {
 				var _popup$onPointerEnter2;
 				(_popup$onPointerEnter2 = popup.onPointerEnter) === null || _popup$onPointerEnter2 === void 0 || _popup$onPointerEnter2.call(popup, e);
-				setParagraphMenuInteractionActive(docParagraphMenuService, true);
+				setMenuInteractionActive(true);
 				isMouseOver.current = true;
 				clearHideTimer();
 			},
@@ -29102,7 +30067,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 				onMouseEnter: (e) => {
 					var _popup$onPointerEnter3;
 					(_popup$onPointerEnter3 = popup.onPointerEnter) === null || _popup$onPointerEnter3 === void 0 || _popup$onPointerEnter3.call(popup, e);
-					setParagraphMenuInteractionActive(docParagraphMenuService, true);
+					setMenuInteractionActive(true);
 					isMouseOver.current = true;
 					clearHideTimer();
 				},
@@ -29120,7 +30085,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 					autoFocusTarget: openMode === "slash" ? "container" : void 0,
 					suppressHoverUntilPointerMove: openMode === "slash",
 					onMenuPointerEnter: () => {
-						setParagraphMenuInteractionActive(docParagraphMenuService, true);
+						setMenuInteractionActive(true);
 						isMouseOver.current = true;
 						clearHideTimer();
 					},
@@ -29134,7 +30099,7 @@ function ParagraphMenuBase({ popup, tableBlockOnly = false }) {
 					onOptionSelect: async (params) => {
 						const targetRange = targetRangeRef.current ?? getParagraphMenuTargetRange(activeParagraphBound);
 						const { commandId, params: commandParams } = getParagraphMenuCommand(params, targetRange);
-						const latestTarget = (docParagraphMenuService === null || docParagraphMenuService === void 0 ? void 0 : docParagraphMenuService.activeTarget) ?? activeTarget;
+						const latestTarget = getActiveTarget();
 						if ((latestTarget === null || latestTarget === void 0 ? void 0 : latestTarget.kind) === "table" && commandId && targetRange) {
 							univerInstanceService.focusUnit(popup.unitId);
 							const tableRange = {
@@ -29261,6 +30226,7 @@ let ComponentsController = class ComponentsController extends Disposable {
 			BoldIcon,
 			CopyDoubleIcon,
 			ColumnIcon,
+			CloseIcon,
 			CutIcon,
 			DeleteColumnDoubleIcon,
 			DeleteIcon,
@@ -29276,6 +30242,7 @@ let ComponentsController = class ComponentsController extends Disposable {
 			H5Icon,
 			HeaderFooterIcon,
 			HorizontallyIcon,
+			InsertBelowDoubleIcon,
 			InsertDoubleIcon,
 			InsertRowAboveDoubleIcon,
 			InsertRowBelowDoubleIcon,
@@ -29309,6 +30276,7 @@ let ComponentsController = class ComponentsController extends Disposable {
 			TodoListDoubleIcon,
 			UnderlineIcon,
 			UnorderIcon,
+			ZoomInIcon,
 			DefaultTextColorIcon,
 			HeaderTextColorIcon,
 			MoreRightIcon,
@@ -29339,7 +30307,8 @@ let ComponentsController = class ComponentsController extends Disposable {
 		}));
 	}
 	_registerComponents() {
-		if (!this._componentManager.get("COMPONENT_DOC_HEADER_FOOTER_PANEL")) this.disposeWithMe(this._componentManager.register(COMPONENT_DOC_HEADER_FOOTER_PANEL, DocHeaderFooterPanel));
+		this.disposeWithMe(this._componentManager.register(DOC_HEADER_FOOTER_RIBBON_CONTROL, DocHeaderFooterRibbonControl));
+		if (!this._componentManager.hasDefault("COMPONENT_DOC_HEADER_FOOTER_PANEL")) this.disposeWithMe(this._componentManager.register(COMPONENT_DOC_HEADER_FOOTER_PANEL, DocHeaderFooterPanel));
 		this.disposeWithMe(this._componentManager.register(paragraphSettingIndexKey, ParagraphSettingIndex));
 		this.disposeWithMe(this._componentManager.register(DOC_SECTION_SETTING_COMPONENT, SectionSettingIndex));
 		[
@@ -29357,6 +30326,43 @@ let ComponentsController = class ComponentsController extends Disposable {
 };
 ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
 
+//#endregion
+//#region src/controllers/doc-header-footer-ribbon.controller.ts
+let DocHeaderFooterRibbonController = class DocHeaderFooterRibbonController extends Disposable {
+	constructor(_context, skeletonManager, _instanceService, _ribbonService, _renderManager) {
+		super();
+		this._context = _context;
+		this._instanceService = _instanceService;
+		this._ribbonService = _ribbonService;
+		this._renderManager = _renderManager;
+		_defineProperty(this, "_visible", false);
+		this.disposeWithMe(combineLatest([skeletonManager.getViewModel().editAreaChange$, this._instanceService.focused$]).pipe(map(([area, focused]) => focused === this._context.unitId && this._context.unit.getDocumentStyle().documentFlavor === DocumentFlavor.TRADITIONAL && (area === DocumentEditArea.HEADER || area === DocumentEditArea.FOOTER)), distinctUntilChanged()).subscribe((visible) => {
+			if (visible === this._visible) return;
+			this._visible = visible;
+			if (visible) this._ribbonService.showContextualTab(DOC_HEADER_FOOTER_RIBBON_TAB, { activate: true });
+			else if (!this._focusedDocumentEditsHeaderFooter()) this._ribbonService.hideContextualTab(DOC_HEADER_FOOTER_RIBBON_TAB);
+		}));
+	}
+	_focusedDocumentEditsHeaderFooter() {
+		var _this$_renderManager$;
+		const focused = this._instanceService.getFocusedUnit();
+		if (!focused || focused.type !== UniverInstanceType.UNIVER_DOC || focused.getUnitId() === this._context.unitId) return false;
+		const manager = (_this$_renderManager$ = this._renderManager.getRenderUnitById(focused.getUnitId())) === null || _this$_renderManager$ === void 0 ? void 0 : _this$_renderManager$.with(DocSkeletonManagerService);
+		const area = manager === null || manager === void 0 ? void 0 : manager.getViewModel().getEditArea();
+		return (area === DocumentEditArea.HEADER || area === DocumentEditArea.FOOTER) && (manager === null || manager === void 0 ? void 0 : manager.getViewModel().getDataModel().getDocumentStyle().documentFlavor) === DocumentFlavor.TRADITIONAL;
+	}
+	dispose() {
+		if (this._visible && !this._focusedDocumentEditsHeaderFooter()) this._ribbonService.hideContextualTab(DOC_HEADER_FOOTER_RIBBON_TAB);
+		super.dispose();
+	}
+};
+DocHeaderFooterRibbonController = __decorate([
+	__decorateParam(1, Inject(DocSkeletonManagerService)),
+	__decorateParam(2, IUniverInstanceService),
+	__decorateParam(3, IRibbonService),
+	__decorateParam(4, IRenderManagerService)
+], DocHeaderFooterRibbonController);
+
 //#endregion
 //#region src/controllers/format-painter.controller.ts
 let DocFormatPainterController = class DocFormatPainterController extends Disposable {
@@ -29424,6 +30430,83 @@ DocFormatPainterController = __decorate([
 	__decorateParam(7, ICommandService)
 ], DocFormatPainterController);
 
+//#endregion
+//#region src/controllers/render-controllers/doc-field.render-controller.ts
+let DocFieldRenderController = class DocFieldRenderController extends Disposable {
+	constructor(_context, _events, _selections, theme, _instances) {
+		super();
+		this._context = _context;
+		this._events = _events;
+		this._selections = _selections;
+		this._instances = _instances;
+		_defineProperty(this, "_hovered", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_shade", "");
+		const documents = this._context.mainComponent;
+		this.disposeWithMe(theme.currentTheme$.subscribe(() => {
+			this._shade = theme.getColorFromTheme("gray.200");
+			documents.makeDirty(true);
+		}));
+		this.disposeWithMe(this._events.hoverCustomRanges$.subscribe((ranges) => {
+			this._hovered = new Set(ranges.filter(({ range }) => range.rangeType === CustomRangeType.FIELD).map(({ range, segmentId, segmentPageIndex }) => `${segmentId ?? ""}:${segmentPageIndex}:${range.rangeId}`));
+			documents.makeDirty(true);
+		}));
+		this.disposeWithMe(this._selections.textSelection$.subscribe(({ unitId }) => {
+			if (unitId === this._context.unitId) documents.makeDirty(true);
+		}));
+		this.disposeWithMe(this._instances.focused$.subscribe(() => documents.makeDirty(true)));
+		this.disposeWithMe(documents.getSkeleton().getViewModel().editAreaChange$.subscribe(() => documents.makeDirty(true)));
+		this.disposeWithMe(documents.pageRender$.subscribe((config) => this._drawFields(config)));
+	}
+	_drawFields({ page, pageLeft, pageTop, ctx }) {
+		var _this$_instances$getF;
+		if (((_this$_instances$getF = this._instances.getFocusedUnit()) === null || _this$_instances$getF === void 0 ? void 0 : _this$_instances$getF.getUnitId()) !== this._context.unitId) return;
+		const active = this._getActiveFields();
+		if (!active.size) return;
+		const documents = this._context.mainComponent;
+		const skeleton = documents.getSkeleton();
+		const pageIndex = skeleton.getSkeletonData().pages.indexOf(page);
+		const { docsLeft, docsTop } = documents.getOffsetConfig();
+		const area = skeleton.getViewModel().getEditArea();
+		const snapshot = this._context.unit.getSnapshot();
+		const activeSegments = area === DocumentEditArea.HEADER ? snapshot.headers : snapshot.footers;
+		ctx.save();
+		ctx.beginPath();
+		ctx.rect(pageLeft, pageTop, page.pageWidth, page.pageHeight);
+		ctx.clip();
+		ctx.fillStyle = this._shade;
+		ctx.globalAlpha *= .45;
+		for (const { customRange: field, segmentId, segmentPageIndex, rects } of this._events.getCustomRangeBounds()) {
+			if (field.rangeType !== CustomRangeType.FIELD) continue;
+			if (segmentId) {
+				if (area === DocumentEditArea.BODY || segmentPageIndex !== pageIndex || !(activeSegments === null || activeSegments === void 0 ? void 0 : activeSegments[segmentId])) continue;
+			} else if (area !== DocumentEditArea.BODY) continue;
+			if (!active.has(`${segmentId ?? ""}:${segmentPageIndex}:${field.rangeId}`)) continue;
+			for (const rect of rects) ctx.fillRect(rect.left - docsLeft, rect.top - docsTop, rect.right - rect.left, rect.bottom - rect.top);
+		}
+		ctx.restore();
+	}
+	_getActiveFields() {
+		const active = new Set(this._hovered);
+		const selections = this._selections.getTextRanges({
+			unitId: this._context.unitId,
+			subUnitId: this._context.unitId
+		}) ?? [];
+		for (const selection of selections) {
+			var _this$_context$unit$g;
+			const segmentId = selection.segmentId ?? "";
+			const fields = ((_this$_context$unit$g = this._context.unit.getSelfOrHeaderFooterModel(segmentId)) === null || _this$_context$unit$g === void 0 || (_this$_context$unit$g = _this$_context$unit$g.getBody()) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.customRanges) ?? [];
+			for (const field of fields) if (field.rangeType === CustomRangeType.FIELD && selection.startOffset <= field.endIndex && selection.endOffset > field.startIndex) active.add(`${segmentId}:${segmentId ? selection.segmentPage : -1}:${field.rangeId}`);
+		}
+		return active;
+	}
+};
+DocFieldRenderController = __decorate([
+	__decorateParam(1, Inject(DocEventManagerService)),
+	__decorateParam(2, Inject(DocSelectionManagerService)),
+	__decorateParam(3, Inject(ThemeService)),
+	__decorateParam(4, IUniverInstanceService)
+], DocFieldRenderController);
+
 //#endregion
 //#region src/controllers/render-controllers/doc-selection-render.controller.ts
 let DocSelectionRenderController = class DocSelectionRenderController extends Disposable {
@@ -29748,6 +30831,32 @@ const CloseHeaderFooterShortcut = {
 	preconditions: whenDocAndEditorFocused,
 	binding: KeyCode.ESC
 };
+const DeleteWordLeftShortcut = {
+	id: DeleteLeftCommand.id,
+	preconditions: whenTextEditorFocused,
+	binding: KeyCode.BACKSPACE | MetaKeys.CTRL_COMMAND,
+	mac: KeyCode.BACKSPACE | MetaKeys.ALT,
+	staticParameters: { granularity: "word" }
+};
+const DeleteWordRightShortcut = {
+	id: DeleteRightCommand.id,
+	preconditions: whenTextEditorFocused,
+	mac: KeyCode.DELETE | MetaKeys.ALT,
+	staticParameters: { granularity: "word" }
+};
+const DeleteLineStartShortcut = {
+	id: DeleteLeftCommand.id,
+	preconditions: whenTextEditorFocused,
+	mac: KeyCode.BACKSPACE | MetaKeys.CTRL_COMMAND,
+	staticParameters: { granularity: "line" }
+};
+const DeleteLineEndShortcut = {
+	id: DeleteRightCommand.id,
+	preconditions: whenTextEditorFocused,
+	binding: KeyCode.DELETE | MetaKeys.CTRL_COMMAND,
+	mac: KeyCode.DELETE | MetaKeys.MAC_CTRL,
+	staticParameters: { granularity: "line" }
+};
 
 //#endregion
 //#region src/shortcuts/cursor.shortcut.ts
@@ -29758,7 +30867,7 @@ function moveCursorShortcut(direction, granularity, binding, mac = binding, win
 		mac,
 		win,
 		linux,
-		preconditions: whenDocAndEditorFocused,
+		preconditions: whenTextEditorFocused,
 		staticParameters: {
 			direction,
 			granularity
@@ -29772,7 +30881,7 @@ function moveSelectionShortcut(direction, granularity, binding, mac = binding, w
 		mac,
 		win,
 		linux,
-		preconditions: whenDocAndEditorFocused,
+		preconditions: whenTextEditorFocused,
 		staticParameters: {
 			direction,
 			granularity
@@ -30035,6 +31144,10 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends Plugin {
 			MoveSelectionWordRightShortcut,
 			SelectAllShortcut,
 			DeleteLeftShortcut,
+			DeleteWordLeftShortcut,
+			DeleteWordRightShortcut,
+			DeleteLineStartShortcut,
+			DeleteLineEndShortcut,
 			DeleteRightShortcut,
 			CloseHeaderFooterShortcut,
 			BreakLineShortcut,
@@ -30111,10 +31224,12 @@ let UniverDocsUIPlugin = class UniverDocsUIPlugin extends Plugin {
 	_initRenderModules() {
 		[
 			[DocEventManagerService],
+			[DocFieldRenderController],
 			[DocFloatMenuService],
 			[DocPasteOptionsRenderController],
 			[DocParagraphMenuService],
 			[DocHeaderFooterController],
+			[DocHeaderFooterRibbonController],
 			[DocResizeRenderController],
 			[DocParagraphPlaceholderRenderController],
 			[DocContextMenuRenderController],
@@ -30317,6 +31432,35 @@ const mobileButtonClassName = `
 `;
 const activeButtonClassName = "univer-bg-primary-100 univer-text-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-primary-400";
 function MobileRichTextToolbar({ editorId, className }) {
+	function resolveToolbarState(editor, defaultTextColor) {
+		var _style$ul, _style$st, _style$cl;
+		const body = editor === null || editor === void 0 ? void 0 : editor.getDocumentData().body;
+		const ranges = (editor === null || editor === void 0 ? void 0 : editor.getSelectionRanges()) ?? [];
+		const range = ranges.find((item) => item.isActive) ?? ranges[0];
+		if (!body || !range) return {
+			bold: false,
+			italic: false,
+			underline: false,
+			strike: false,
+			color: defaultTextColor,
+			bulletList: false,
+			orderList: false
+		};
+		const style = getStyleInTextRange(body, range, {});
+		const listTypes = BuildTextUtils.range.getParagraphsInRanges([range], body.paragraphs ?? [], body.dataStream).map((paragraph) => {
+			var _paragraph$bullet;
+			return (_paragraph$bullet = paragraph.bullet) === null || _paragraph$bullet === void 0 ? void 0 : _paragraph$bullet.listType;
+		}).filter((listType) => typeof listType === "string");
+		return {
+			bold: style.bl === BooleanNumber.TRUE,
+			italic: style.it === BooleanNumber.TRUE,
+			underline: ((_style$ul = style.ul) === null || _style$ul === void 0 ? void 0 : _style$ul.s) === BooleanNumber.TRUE,
+			strike: ((_style$st = style.st) === null || _style$st === void 0 ? void 0 : _style$st.s) === BooleanNumber.TRUE,
+			color: ((_style$cl = style.cl) === null || _style$cl === void 0 ? void 0 : _style$cl.rgb) ?? defaultTextColor,
+			bulletList: Boolean(listTypes.length && listTypes.every((listType) => listType.startsWith(PresetListType.BULLET_LIST))),
+			orderList: Boolean(listTypes.length && listTypes.every((listType) => listType.startsWith(PresetListType.ORDER_LIST)))
+		};
+	}
 	const commandService = useDependency(ICommandService);
 	const editorService = useDependency(IEditorService);
 	const localeService = useDependency(LocaleService);
@@ -30330,12 +31474,11 @@ function MobileRichTextToolbar({ editorId, className }) {
 		return () => cancelAnimationFrame(frame);
 	}, [editorId, editorService]);
 	useEffect(() => {
-		if (!editor) return void 0;
+		if (!editor) return;
 		const subscription = merge$1(editor.input$, editor.selectionChange$).subscribe(() => setRevision((value) => value + 1));
 		return () => subscription.unsubscribe();
 	}, [editor]);
-	const defaultTextColor = themeService.getColorFromTheme("gray.900");
-	const state = resolveToolbarState(editor, defaultTextColor);
+	const state = resolveToolbarState(editor, themeService.getColorFromTheme("gray.900"));
 	const colors = COLOR_TOKENS.map((token) => themeService.getColorFromTheme(token));
 	async function execute(commandId, params) {
 		const activeEditor = editorService.getEditor(editorId);
@@ -30434,18 +31577,23 @@ function MobileRichTextToolbar({ editorId, className }) {
 					style: { backgroundColor: color },
 					onClick: () => execute(SetInlineFormatTextColorCommand.id, { value: color })
 				}, color)),
-				/* @__PURE__ */ jsxs("label", {
-					"aria-label": localeService.t("docs-ui.toolbar.textColor.main"),
-					className: clsx(resetButtonClassName, "univer-relative univer-flex univer-size-7 univer-items-center univer-justify-center univer-justify-self-center univer-overflow-hidden univer-rounded-md univer-border-2 univer-border-solid univer-border-transparent active:univer-scale-95"),
-					children: [/* @__PURE__ */ jsx(ColorWheelMultiIcon, { className: "univer-size-6" }), /* @__PURE__ */ jsx("input", {
+				/* @__PURE__ */ jsx(MobileDropdown, {
+					overlay: /* @__PURE__ */ jsx("div", {
+						className: "univer-px-4 univer-pb-2",
+						onPointerDown: (event) => event.stopPropagation(),
+						children: /* @__PURE__ */ jsx(MobileColorPicker, {
+							value: state.color,
+							onChange: (color) => execute(SetInlineFormatTextColorCommand.id, { value: color })
+						})
+					}),
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "text",
+						size: "icon",
 						"aria-label": localeService.t("docs-ui.toolbar.textColor.main"),
-						className: "univer-absolute univer-inset-0 univer-size-full univer-cursor-pointer univer-opacity-0",
-						type: "color",
-						defaultValue: defaultTextColor,
-						onChange: (event) => {
-							execute(SetInlineFormatTextColorCommand.id, { value: event.target.value });
-						}
-					})]
+						className: "univer-size-7 univer-justify-self-center",
+						children: /* @__PURE__ */ jsx(ColorWheelMultiIcon, { className: "!univer-size-6" })
+					})
 				})
 			]
 		})
@@ -30464,35 +31612,6 @@ function FormatButton(props) {
 		})
 	});
 }
-function resolveToolbarState(editor, defaultTextColor) {
-	var _style$ul, _style$st, _style$cl;
-	const body = editor === null || editor === void 0 ? void 0 : editor.getDocumentData().body;
-	const ranges = (editor === null || editor === void 0 ? void 0 : editor.getSelectionRanges()) ?? [];
-	const range = ranges.find((item) => item.isActive) ?? ranges[0];
-	if (!body || !range) return {
-		bold: false,
-		italic: false,
-		underline: false,
-		strike: false,
-		color: defaultTextColor,
-		bulletList: false,
-		orderList: false
-	};
-	const style = getStyleInTextRange(body, range, {});
-	const listTypes = BuildTextUtils.range.getParagraphsInRanges([range], body.paragraphs ?? [], body.dataStream).map((paragraph) => {
-		var _paragraph$bullet;
-		return (_paragraph$bullet = paragraph.bullet) === null || _paragraph$bullet === void 0 ? void 0 : _paragraph$bullet.listType;
-	}).filter((listType) => typeof listType === "string");
-	return {
-		bold: style.bl === BooleanNumber.TRUE,
-		italic: style.it === BooleanNumber.TRUE,
-		underline: ((_style$ul = style.ul) === null || _style$ul === void 0 ? void 0 : _style$ul.s) === BooleanNumber.TRUE,
-		strike: ((_style$st = style.st) === null || _style$st === void 0 ? void 0 : _style$st.s) === BooleanNumber.TRUE,
-		color: ((_style$cl = style.cl) === null || _style$cl === void 0 ? void 0 : _style$cl.rgb) ?? defaultTextColor,
-		bulletList: Boolean(listTypes.length && listTypes.every((listType) => listType.startsWith(PresetListType.BULLET_LIST))),
-		orderList: Boolean(listTypes.length && listTypes.every((listType) => listType.startsWith(PresetListType.ORDER_LIST)))
-	};
-}
 
 //#endregion
 //#region src/views/rich-text-editor/hooks/editor-undo-redo-keyboard.ts
@@ -31219,4 +32338,4 @@ function MobileRichTextEditor(props) {
 }
 
 //#endregion
-export { AfterSpaceCommand, AlignCenterCommand, AlignJustifyCommand, AlignLeftCommand, AlignMenuItemFactory, AlignOperationCommand, AlignRightCommand, BackgroundColorSelectorMenuItemFactory, BoldMenuItemFactory, BreakLineCommand, BulletListCommand, BulletListTypePicker, ChangeListNestingLevelCommand, ChangeListNestingLevelType, ChangeListTypeCommand, CheckListCommand, CoverContentCommand, CreateDocTableCommand, CutContentCommand, DEFAULT_DOC_FIT_TO_WIDTH_OPTIONS, DOCS_COMPONENT_BACKGROUND_LAYER_INDEX, DOCS_COMPONENT_DEFAULT_Z_INDEX, DOCS_COMPONENT_HEADER_LAYER_INDEX, DOCS_COMPONENT_MAIN_LAYER_INDEX, DOCS_UI_PLUGIN_CONFIG_KEY, DOCS_VIEW_KEY, DOC_CONTENT_INSERT_MENU_ID, DOC_CUSTOM_RANGE_CHROME_BACKGROUND_ALPHA, DOC_CUSTOM_RANGE_CHROME_RADIUS, DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, DOC_PARAGRAPH_T_ALIGN_MENU_ID, DOC_PARAGRAPH_T_COLORS_MENU_ID, DOC_PARAGRAPH_T_DIVIDER_MENU_ID, DOC_PARAGRAPH_T_EDIT_MENU_ID, DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID, DOC_PARAGRAPH_T_INSERT_MENU_ID, DOC_TABLE_BLOCK_MENU_ID, DOC_VERTICAL_PADDING, DeleteCurrentParagraphCommand, DeleteCustomBlockCommand, DeleteLeftCommand, DeleteRightCommand, DocAutoFormatService, DocBackScrollRenderController, DocCanvasPopManagerService, DocClipboardPasteAdapterService, DocContextualRibbonService, DocCopyCommand, DocCreateTableOperation, DocCutCommand, DocEventManagerService, DocFloatMenuService, DocHtmlExportService, DocIMEInputManagerService, DocLayoutInteractionService, DocMobileElementMenuService, DocPageLayoutService, DocParagraphMenuService, DocParagraphPlaceholderRenderController, DocPasteCommand, DocPrintInterceptorService, DocRenderController, DocSelectAllCommand, DocSelectionRenderService, DocTableDeleteColumnsCommand, DocTableDeleteRowsCommand, DocTableDeleteTableCommand, DocTableInsertColumnCommand, DocTableInsertColumnLeftCommand, DocTableInsertColumnRightCommand, DocTableInsertRowAboveCommand, DocTableInsertRowBellowCommand, DocTableInsertRowCommand, DocTableTabCommand, DocUIController, DocViewScaleService, DocsRenderService, menuSchema as DocsUIMenuSchema, EMPTY_PARAGRAPH_MENU_ID, Editor, EditorService, EnterCommand, FLOAT_TEXT_STYLE_MENU_ID, FLOAT_TOOLBAR_MENU_POSITION, FloatTextStyleMenuItemFactory, FontFamilySelectorMenuItemFactory, FontSizeSelectorMenuItemFactory, HorizontalLineCommand, IDocClipboardPasteAdapterService, IDocClipboardService, IDocEmbedInteractionBoundaryService, IDocEmbedRuntimeFocusCoordinator, IEditorService, IMEInputCommand, INSERT_BELLOW_MENU_ID, InnerPasteCommand, InsertCustomRangeCommand, ItalicMenuItemFactory, ListOperationCommand, MOBILE_DOC_ELEMENT_MENU, MergeTwoParagraphCommand, MobileDocElementMenu, MobileRichTextEditor, MobileRichTextToolbar, MoveCursorOperation, MoveDocBlockCommand, MoveSelectionOperation, NORMAL_TEXT_SELECTION_PLUGIN_NAME, NodePositionConvertToCursor, NodePositionConvertToRectRange, OrderListCommand, OrderListTypePicker, ParagraphMenuInsertBelowSubmenuItemFactory, LarkPastePlugin as PastePluginLark, UniverPastePlugin as PastePluginUniver, WordPastePlugin as PastePluginWord, QuickListCommand, RectRange, ReplaceSelectionCommand, ReplaceSnapshotCommand, ReplaceTextRunsCommand, ResetInlineFormatTextBackgroundColorCommand, ResetInlineFormatTextColorCommand, RichTextEditor, SetDocInputStyleCommand, SetDocZoomRatioCommand, SetDocZoomRatioOperation, SetInlineFormatBoldCommand, SetInlineFormatCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextColorCommand, SetInlineFormatTextFillCommand, SetInlineFormatUnderlineCommand, SetParagraphNamedStyleCommand, StrikeThroughMenuItemFactory, SwitchDocModeCommand, TEXT_RANGE_LAYER_INDEX, TabCommand, TextColorSelectorMenuItemFactory, TextRange, ToggleCheckListCommand, UnderlineMenuItemFactory, UniverDocsMobileUIPlugin, UniverDocsUIPlugin, VIEWPORT_KEY, addCustomDecorationBySelectionFactory, addCustomDecorationFactory, buildMoveDocBlockActions, calcDocFitToWidthScale, calcDocRangePositions, captureTextFormat, collectDocsTableLikeEmbedChildUnitIds, convertBodyToHtml, convertClipboardHtmlToDocumentData, convertClipboardRtfToPlainText, convertPositionsToRectRanges, createDefaultDocsTableLikeCustomBlockBleedViewport, createDocsCustomBlockSizeRefreshScheduler, createEditorUndoRedoKeyboardConfig, deleteCustomDecorationFactory, disableMenuWhenHeaderFooterEditing, disableMenuWithoutDocumentUnitPermission, drawDocCustomRangeChrome, executeEditorUndoRedoCommand, findDocRangeNodePositions, genTableSource, generateParagraphs, getAnchorBounding, getCanvasOffsetByEngine, getCommandSkeleton, getCursorWhenDelete, getCutActionsFromDocRanges, getDocBlockRangeMenuId, getDocObjectById, getEditorRuntimeConfig, getEmptyTableCell, getEmptyTableRow, getLineBounding, getListMarkerFallbackBound, getListParagraphContextMenuHit, getOneTextSelectionRange, getStyleInTextRange, getTableColumn, getTextRangeFromCharIndex, hasParagraphInTable, hideMenuWhenSelectionInBlockRange, isInSameTableCell, isTextRangeInAnyBlockRange, isValidRectRange, neoGetDocObject, normalizeDocFitToWidthOptions, registerEditorRuntimeConfig, removeClipboardHtmlImages, resolveDocCustomRangeChromeTheme, resolveDocFitBaseWidth, resolveDocViewScale, resolveDocsCustomBlockRenderViewport, resolveDocsTableLikeCustomBlockBleedViewport, resolveDocsTableLikeCustomBlockContentHeight, resolveDocsTableLikeCustomBlockContentWidth, scrollDocsTableLikeCustomBlockLive, shouldRefreshDocsCustomBlockSizeForCommand, useEditor, useEditorClickOutside, useIsFocusing, useKeyboardEvent, useLeftAndRightArrow, useOnChange, useResize, whenDocAndEditorFocused };
+export { AfterSpaceCommand, AlignCenterCommand, AlignJustifyCommand, AlignLeftCommand, AlignMenuItemFactory, AlignOperationCommand, AlignRightCommand, BackgroundColorSelectorMenuItemFactory, BoldMenuItemFactory, BreakLineCommand, BulletListCommand, BulletListTypePicker, ChangeListNestingLevelCommand, ChangeListNestingLevelType, ChangeListTypeCommand, CheckListCommand, CoverContentCommand, CreateDocTableCommand, CutContentCommand, DEFAULT_DOC_FIT_TO_WIDTH_OPTIONS, DOCS_COMPONENT_BACKGROUND_LAYER_INDEX, DOCS_COMPONENT_DEFAULT_Z_INDEX, DOCS_COMPONENT_HEADER_LAYER_INDEX, DOCS_COMPONENT_MAIN_LAYER_INDEX, DOCS_UI_PLUGIN_CONFIG_KEY, DOCS_VIEW_KEY, DOC_CONTENT_INSERT_MENU_ID, DOC_CUSTOM_RANGE_CHROME_BACKGROUND_ALPHA, DOC_CUSTOM_RANGE_CHROME_RADIUS, DOC_EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, DOC_PARAGRAPH_T_ALIGN_MENU_ID, DOC_PARAGRAPH_T_COLORS_MENU_ID, DOC_PARAGRAPH_T_DIVIDER_MENU_ID, DOC_PARAGRAPH_T_EDIT_MENU_ID, DOC_PARAGRAPH_T_INSERT_BELOW_MENU_ID, DOC_PARAGRAPH_T_INSERT_MENU_ID, DOC_TABLE_BLOCK_MENU_ID, DOC_VERTICAL_PADDING, DeleteCurrentParagraphCommand, DeleteCustomBlockCommand, DeleteLeftCommand, DeleteRightCommand, DocAutoFormatService, DocBackScrollRenderController, DocCanvasPopManagerService, DocClipboardPasteAdapterService, DocContextualRibbonService, DocCopyCommand, DocCreateTableOperation, DocCutCommand, DocEventManagerService, DocFloatMenuService, DocHtmlExportService, DocIMEInputManagerService, DocLayoutInteractionService, DocMobileElementMenuService, DocPageLayoutService, DocParagraphMenuService, DocParagraphPlaceholderRenderController, DocPasteCommand, DocPrintInterceptorService, DocRenderController, DocSelectAllCommand, DocSelectionRenderService, DocTableDeleteColumnsCommand, DocTableDeleteRowsCommand, DocTableDeleteTableCommand, DocTableInsertColumnCommand, DocTableInsertColumnLeftCommand, DocTableInsertColumnRightCommand, DocTableInsertRowAboveCommand, DocTableInsertRowBellowCommand, DocTableInsertRowCommand, DocTableTabCommand, DocUIController, DocViewScaleService, DocsRenderService, menuSchema as DocsUIMenuSchema, EMPTY_PARAGRAPH_MENU_ID, Editor, EditorService, EnterCommand, FLOAT_TEXT_STYLE_MENU_ID, FLOAT_TOOLBAR_MENU_POSITION, FloatTextStyleMenuItemFactory, FontFamilySelectorMenuItemFactory, FontSizeSelectorMenuItemFactory, HorizontalLineCommand, IDocClipboardPasteAdapterService, IDocClipboardService, IDocEmbedInteractionBoundaryService, IDocEmbedRuntimeFocusCoordinator, IEditorService, IMEInputCommand, INSERT_BELLOW_MENU_ID, InnerPasteCommand, InsertCustomRangeCommand, ItalicMenuItemFactory, ListOperationCommand, MOBILE_DOC_ELEMENT_MENU, MergeTwoParagraphCommand, MobileDocElementMenu, MobileRichTextEditor, MobileRichTextToolbar, MoveCursorOperation, MoveDocBlockCommand, MoveSelectionOperation, NORMAL_TEXT_SELECTION_PLUGIN_NAME, NodePositionConvertToCursor, NodePositionConvertToRectRange, OrderListCommand, OrderListTypePicker, ParagraphMenuInsertBelowSubmenuItemFactory, ParagraphSettingMenuFactory, LarkPastePlugin as PastePluginLark, UniverPastePlugin as PastePluginUniver, WordPastePlugin as PastePluginWord, QuickListCommand, RectRange, ReplaceSelectionCommand, ReplaceSnapshotCommand, ReplaceTextRunsCommand, ResetInlineFormatTextBackgroundColorCommand, ResetInlineFormatTextColorCommand, RichTextEditor, SetDocInputStyleCommand, SetDocZoomRatioCommand, SetDocZoomRatioOperation, SetInlineFormatBoldCommand, SetInlineFormatCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextColorCommand, SetInlineFormatTextFillCommand, SetInlineFormatUnderlineCommand, SetParagraphNamedStyleCommand, StrikeThroughMenuItemFactory, SwitchDocModeCommand, TEXT_RANGE_LAYER_INDEX, TabCommand, TextColorSelectorMenuItemFactory, TextRange, ToggleCheckListCommand, UnderlineMenuItemFactory, UniverDocsMobileUIPlugin, UniverDocsUIPlugin, VIEWPORT_KEY, addCustomDecorationBySelectionFactory, addCustomDecorationFactory, buildMoveDocBlockActions, calcDocFitToWidthScale, calcDocRangePositions, captureTextFormat, collectDocsTableLikeEmbedChildUnitIds, convertBodyToHtml, convertClipboardHtmlToDocumentData, convertClipboardRtfToPlainText, convertPositionsToRectRanges, createDefaultDocsTableLikeCustomBlockBleedViewport, createDocsCustomBlockSizeRefreshScheduler, createEditorUndoRedoKeyboardConfig, deleteCustomDecorationFactory, disableMenuWhenHeaderFooterEditing, disableMenuWithoutDocumentUnitPermission, drawDocCustomRangeChrome, executeEditorUndoRedoCommand, findDocRangeNodePositions, genTableSource, generateParagraphs, getAnchorBounding, getCanvasOffsetByEngine, getCommandSkeleton, getCursorWhenDelete, getCutActionsFromDocRanges, getDocBlockRangeMenuId, getDocObjectById, getEditorRuntimeConfig, getEmptyTableCell, getEmptyTableRow, getLineBounding, getListMarkerFallbackBound, getListParagraphContextMenuHit, getOneTextSelectionRange, getStyleInTextRange, getTableColumn, getTextRangeFromCharIndex, hasParagraphInTable, hideMenuWhenSelectionInBlockRange, isInSameTableCell, isTextRangeInAnyBlockRange, isValidRectRange, neoGetDocObject, normalizeDocFitToWidthOptions, registerEditorRuntimeConfig, removeClipboardHtmlImages, resolveDocCustomRangeChromeTheme, resolveDocFitBaseWidth, resolveDocViewScale, resolveDocsCustomBlockRenderViewport, resolveDocsTableLikeCustomBlockBleedViewport, resolveDocsTableLikeCustomBlockContentHeight, resolveDocsTableLikeCustomBlockContentWidth, scrollDocsTableLikeCustomBlockLive, shouldRefreshDocsCustomBlockSizeForCommand, useEditor, useEditorClickOutside, useIsFocusing, useKeyboardEvent, useLeftAndRightArrow, useOnChange, useResize, whenDocAndEditorFocused };