@univerjs/docs-ui 1.0.4 → 1.1.0

package/lib/index.js

@@ -2,14 +2,14 @@ import { BaselineOffset, BlockType, BooleanNumber, BuildTextUtils, COLORS, Color
 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, Dialog, Dropdown, DropdownMenu, InputNumber, MessageType, 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, 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, useReducer, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-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, 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 } 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() {
@@ -3430,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, {
@@ -8533,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;
+		textRun.st += offset;
+		textRun.ed += offset;
 	});
-	(_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;
-	});
-	(_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");
@@ -12131,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;
@@ -12754,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
@@ -13409,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;
 }
@@ -18435,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) {
@@ -18843,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)
@@ -19061,7 +19148,8 @@ const menuSchema = {
 			order: 0,
 			gridLayout: {
 				row: 2,
-				column: 1
+				column: 1,
+				width: 44
 			},
 			menuItemFactory: BoldMenuItemFactory
 		},
@@ -19069,7 +19157,8 @@ const menuSchema = {
 			order: 1,
 			gridLayout: {
 				row: 2,
-				column: 2
+				column: 2,
+				width: 44
 			},
 			menuItemFactory: ItalicMenuItemFactory
 		},
@@ -19077,7 +19166,8 @@ const menuSchema = {
 			order: 2,
 			gridLayout: {
 				row: 2,
-				column: 3
+				column: 3,
+				width: 44
 			},
 			menuItemFactory: UnderlineMenuItemFactory
 		},
@@ -19085,7 +19175,8 @@ const menuSchema = {
 			order: 3,
 			gridLayout: {
 				row: 2,
-				column: 4
+				column: 4,
+				width: 44
 			},
 			menuItemFactory: StrikeThroughMenuItemFactory
 		},
@@ -19093,7 +19184,8 @@ const menuSchema = {
 			order: 4,
 			gridLayout: {
 				row: 2,
-				column: 5
+				column: 6,
+				width: 44
 			},
 			menuItemFactory: SubscriptMenuItemFactory
 		},
@@ -19101,7 +19193,8 @@ const menuSchema = {
 			order: 5,
 			gridLayout: {
 				row: 2,
-				column: 6
+				column: 5,
+				width: 44
 			},
 			menuItemFactory: SuperscriptMenuItemFactory
 		},
@@ -19111,7 +19204,7 @@ const menuSchema = {
 				row: 1,
 				column: 1,
 				columnSpan: 2,
-				width: 100
+				width: 96
 			},
 			menuItemFactory: HeadingSelectorMenuItemFactory
 		},
@@ -19120,7 +19213,8 @@ const menuSchema = {
 			gridLayout: {
 				row: 1,
 				column: 7,
-				width: 64
+				columnSpan: 2,
+				width: 96
 			},
 			menuItemFactory: FontSizeSelectorMenuItemFactory
 		},
@@ -19130,7 +19224,7 @@ const menuSchema = {
 				row: 1,
 				column: 3,
 				columnSpan: 4,
-				width: 160
+				width: 200
 			},
 			menuItemFactory: FontFamilySelectorMenuItemFactory
 		},
@@ -19138,7 +19232,8 @@ const menuSchema = {
 			order: 8,
 			gridLayout: {
 				row: 2,
-				column: 7
+				column: 8,
+				width: 44
 			},
 			menuItemFactory: TextColorSelectorMenuItemFactory,
 			[ResetInlineFormatTextColorCommand.id]: {
@@ -19150,7 +19245,8 @@ const menuSchema = {
 			order: 9,
 			gridLayout: {
 				row: 2,
-				column: 8
+				column: 7,
+				width: 44
 			},
 			menuItemFactory: BackgroundColorSelectorMenuItemFactory,
 			[ResetInlineFormatTextBackgroundColorCommand.id]: {
@@ -19201,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]: {
@@ -19285,6 +19371,34 @@ const menuSchema = {
 			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: 2
+			},
+			menuItemFactory: DocFullscreenMenuItemFactory
+		}
+	},
 	[ContextMenuPosition.MAIN_AREA]: {
 		[ContextMenuGroup.OTHERS]: { [OpenDocParagraphPermissionOperation.id]: {
 			order: 10,
@@ -20003,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
 	});
 }
@@ -21312,7 +21404,7 @@ function resolveDocsCustomBlockRenderViewport(params) {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-ui";
-var version = "1.0.4";
+var version = "1.1.0";
 
 //#endregion
 //#region src/commands/commands/doc-paragraph-setting.command.ts
@@ -24500,6 +24592,7 @@ let MobileComponentsController = class MobileComponentsController extends Dispos
 			H5Icon,
 			HeaderFooterIcon,
 			HorizontallyIcon,
+			InsertBelowDoubleIcon,
 			InsertDoubleIcon,
 			InsertRowAboveDoubleIcon,
 			InsertRowBelowDoubleIcon,
@@ -24532,6 +24625,7 @@ let MobileComponentsController = class MobileComponentsController extends Dispos
 			TodoListDoubleIcon,
 			UnderlineIcon,
 			UnorderIcon,
+			ZoomInIcon,
 			DefaultTextColorIcon,
 			HeaderTextColorIcon,
 			MoreRightIcon,
@@ -28280,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();
@@ -28307,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);
@@ -28322,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() {
@@ -28358,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();
@@ -28369,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;
@@ -28380,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;
@@ -28417,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);
 		}));
@@ -28437,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) => {
@@ -28492,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;
@@ -28516,7 +28626,7 @@ let DocParagraphMenuService = class DocParagraphMenuService extends Disposable {
 		}
 	}
 	showParagraphMenu(paragraph) {
-		var _this$_paragraphMenu8;
+		var _this$_paragraphMenu9;
 		if (this._hasExpandedSelection()) {
 			this.hideParagraphMenu(true);
 			return;
@@ -28526,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;
@@ -28561,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}`,
@@ -28582,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,
@@ -28603,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,
@@ -28623,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;
 	}
@@ -28668,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;
@@ -29015,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, "") === "";
@@ -29427,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);
@@ -29436,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);
@@ -29460,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) ?? "";
@@ -29518,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);
@@ -29542,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
@@ -29591,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);
@@ -29614,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);
@@ -29718,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();
 			},
@@ -29764,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();
@@ -29792,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;
@@ -29807,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;
@@ -29821,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);
@@ -29836,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();
 			},
@@ -29859,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();
 				},
@@ -29877,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();
 					},
@@ -29891,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 = {
@@ -30034,6 +30242,7 @@ let ComponentsController = class ComponentsController extends Disposable {
 			H5Icon,
 			HeaderFooterIcon,
 			HorizontallyIcon,
+			InsertBelowDoubleIcon,
 			InsertDoubleIcon,
 			InsertRowAboveDoubleIcon,
 			InsertRowBelowDoubleIcon,
@@ -30067,6 +30276,7 @@ let ComponentsController = class ComponentsController extends Disposable {
 			TodoListDoubleIcon,
 			UnderlineIcon,
 			UnorderIcon,
+			ZoomInIcon,
 			DefaultTextColorIcon,
 			HeaderTextColorIcon,
 			MoreRightIcon,
@@ -31222,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);
@@ -31235,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);
@@ -31339,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" })
+					})
 				})
 			]
 		})
@@ -31369,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
@@ -32124,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 };