@univerjs/sheets-ui 1.0.4 → 1.1.0

package/lib/cjs/index.js

@@ -241,7 +241,7 @@ let SHEET_VIEW_KEY = /* @__PURE__ */ function(SHEET_VIEW_KEY) {
 }({});
 
 //#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) {
@@ -252,7 +252,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];
@@ -265,14 +265,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,
@@ -1045,7 +1045,7 @@ function genSelectionByRange(skeleton, range) {
 }
 
 //#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);
@@ -1053,7 +1053,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);
@@ -3106,9 +3106,10 @@ var HtmlToUSMService = class HtmlToUSMService {
 					cellDataStream = `${dataStream.substring(starts[i])}\r\n`;
 					if (cellDataStream === "\r\n") continue;
 				} else cellDataStream = `${dataStream.substring(starts[i], starts[i + 1] - 1)}\r\n`;
+				const end = starts[i + 1] ?? dataStream.length;
 				const cellTextRuns = [];
 				textRuns === null || textRuns === void 0 || textRuns.forEach((t) => {
-					if (t.st >= starts[i] && t.ed <= starts[i + 1]) cellTextRuns.push({
+					if (t.st >= starts[i] && t.ed <= end) cellTextRuns.push({
 						st: t.st - starts[i],
 						ed: t.ed - starts[i],
 						ts: t.ts
@@ -3116,7 +3117,7 @@ var HtmlToUSMService = class HtmlToUSMService {
 				});
 				const cellCustomRanges = [];
 				customRanges === null || customRanges === void 0 || customRanges.forEach((c) => {
-					if (c.startIndex >= starts[i] && c.endIndex <= starts[i + 1]) cellCustomRanges.push({
+					if (c.startIndex >= starts[i] && c.endIndex <= end) cellCustomRanges.push({
 						...c,
 						startIndex: c.startIndex - starts[i],
 						endIndex: c.endIndex - starts[i]
@@ -3144,14 +3145,9 @@ var HtmlToUSMService = class HtmlToUSMService {
 				payloads,
 				customRanges
 			};
-			if (!(customRanges === null || customRanges === void 0 ? void 0 : customRanges.length)) valueMatrix.setValue(0, 0, convertToCellStyle({ v: dataStream }, dataStream, textRuns));
-			else {
-				const p = this._generateDocumentDataModelSnapshot({ body: singleDocBody });
-				valueMatrix.setValue(0, 0, convertToCellStyle({
-					v: dataStream,
-					p
-				}, dataStream, textRuns));
-			}
+			const cell = { v: dataStream };
+			if ((textRuns === null || textRuns === void 0 ? void 0 : textRuns.length) || (customRanges === null || customRanges === void 0 ? void 0 : customRanges.length)) cell.p = this._generateDocumentDataModelSnapshot({ body: singleDocBody });
+			valueMatrix.setValue(0, 0, convertToCellStyle(cell, dataStream, textRuns));
 			rowProperties.push({});
 		}
 		if (tableStrings) tableStrings.forEach((t, index) => {
@@ -3768,7 +3764,7 @@ const LarkPastePlugin = {
 const UniverPastePlugin = {
 	name: "univer-sheet-paste-plugin-univer",
 	checkPasteType(html) {
-		return /UniverNormal/i.test(html);
+		return /<p\b[^>]*\sclass\s*=\s*["'](?:[^"']*\s)?UniverNormal(?:\s[^"']*)?["']/i.test(html);
 	},
 	stylesRules: [],
 	afterProcessRules: [{
@@ -4145,9 +4141,9 @@ function wrapHtmlForExcel(html) {
 /**
 * This service provide hooks for sheet features to supplement content or modify behavior of clipboard.
 */
+HtmlToUSMService.use(UniverPastePlugin);
 HtmlToUSMService.use(WordPastePlugin);
 HtmlToUSMService.use(LarkPastePlugin);
-HtmlToUSMService.use(UniverPastePlugin);
 const ISheetClipboardService = (0, _univerjs_core.createIdentifier)("sheet.clipboard-service");
 let SheetClipboardService = class SheetClipboardService extends _univerjs_core.Disposable {
 	constructor(_logService, _univerInstanceService, _selectionManagerService, _clipboardInterfaceService, _undoRedoService, _commandService, _markSelectionService, _notificationService, _platformService, _renderManagerService, _themeService, _localeService, _errorService, _injector) {
@@ -6942,7 +6938,7 @@ const SetSelectionFrozenCommand = {
 			if (selectRow === 0) selectRow = 1;
 			let selectColumn = (primary === null || primary === void 0 ? void 0 : primary.startColumn) ?? range.startColumn;
 			if (selectColumn === 0) selectColumn = 1;
-			const rangeType = range.rangeType;
+			const rangeType = range.rangeType ?? _univerjs_core.RANGE_TYPE.NORMAL;
 			if (rangeType === _univerjs_core.RANGE_TYPE.ROW || type === 1) {
 				startRow = selectRow;
 				freezedRowCount = selectRow - sheetViewStartRow;
@@ -8241,14 +8237,17 @@ function transformPosition2Offset(x, y, scene, skeleton, worksheet) {
 	const endSheetView = skeleton.getNoMergeCellWithCoordByIndex(startRow, startColumn, false);
 	const { rowHeaderWidth, columnHeaderHeight } = skeleton;
 	const freezeWidth = endSheetView.startX - startSheetView.startX;
-	const freezeHeight = endSheetView.startY - startSheetView.startY;
+	const freezeStartY = ySplit > 0 && startRow === ySplit ? 0 : startSheetView.startY;
+	const freezeHeight = endSheetView.startY - freezeStartY;
 	const { top, left, viewportScrollX, viewportScrollY } = viewMain;
+	const viewportLeft = left / scaleX;
+	const viewportTop = top / scaleY;
 	let offsetX;
-	if (x > left) offsetX = (x - viewportScrollX) * scaleX;
-	else offsetX = (freezeWidth + rowHeaderWidth - (left - x)) * scaleX;
+	if (x > viewportLeft) offsetX = (x - viewportScrollX) * scaleX;
+	else offsetX = (freezeWidth + rowHeaderWidth - (viewportLeft - x)) * scaleX;
 	let offsetY;
-	if (y > top) offsetY = (y - viewportScrollY) * scaleY;
-	else offsetY = (freezeHeight + columnHeaderHeight - (top - y)) * scaleX;
+	if (y > viewportTop) offsetY = (y - viewportScrollY) * scaleY;
+	else offsetY = (freezeHeight + columnHeaderHeight - (viewportTop - y)) * scaleY;
 	return {
 		x: offsetX,
 		y: offsetY
@@ -10394,6 +10393,18 @@ let SheetCellEditorResizeService = class SheetCellEditorResizeService extends _u
 		this._univerInstanceService = _univerInstanceService;
 		this._configService = _configService;
 		this._embedFloatingGeometryService = _embedFloatingGeometryService;
+		_defineProperty(this, "_editorWidth", 0);
+		_defineProperty(this, "_editorHeight", 0);
+		_defineProperty(this, "_initialEditorSize", null);
+		_defineProperty(this, "_cellSize", null);
+		this.disposeWithMe(this._editorBridgeService.visible$.subscribe(({ visible }) => {
+			if (!visible) {
+				this._editorWidth = 0;
+				this._editorHeight = 0;
+				this._initialEditorSize = null;
+				this._cellSize = null;
+			}
+		}));
 	}
 	get _currentRenderer() {
 		return (0, _univerjs_engine_render.getCurrentTypeOfRenderer)(_univerjs_core.UniverInstanceType.UNIVER_SHEET, this._univerInstanceService, this._renderManagerService);
@@ -10421,10 +10432,13 @@ let SheetCellEditorResizeService = class SheetCellEditorResizeService extends _u
 		if (!param) return;
 		const { position, documentLayoutObject, canvasOffset, scaleX, scaleY } = param;
 		const { startX, startY, endX, endY } = position;
+		const cellWidth = endX - startX;
+		const cellHeight = endY - startY;
 		const documentDataModel = this._univerInstanceService.getUnit(_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY, _univerjs_core.UniverInstanceType.UNIVER_DOC);
 		if (documentDataModel == null) return;
 		const documentSkeleton = this._getEditorSkeleton();
 		if (!documentSkeleton) return;
+		this._syncCellSize(cellWidth / scaleX, cellHeight / scaleY);
 		documentSkeleton.resetInitialWidth();
 		const info = this._predictingSize(position, canvasOffset, documentSkeleton, documentLayoutObject, scaleX, scaleY);
 		if (!info || info.actualWidth <= 0) return;
@@ -10432,17 +10446,17 @@ let SheetCellEditorResizeService = class SheetCellEditorResizeService extends _u
 		const { verticalAlign, horizontalAlign, paddingData, fill } = documentLayoutObject;
 		actualWidth = actualWidth + (paddingData.l ?? 0) * scaleX + (paddingData.r ?? 0) * scaleX;
 		actualHeight = actualHeight + (paddingData.t ?? 0) * scaleY + (paddingData.b ?? 0) * scaleY;
-		let editorWidth = endX - startX;
-		let editorHeight = endY - startY;
-		if (editorWidth < actualWidth) editorWidth = Math.ceil(actualWidth);
-		if (editorHeight < actualHeight) editorHeight = Math.ceil(actualHeight);
+		const contentWidth = cellWidth < actualWidth ? Math.ceil(actualWidth) : cellWidth;
+		const contentHeight = cellHeight < actualHeight ? Math.ceil(actualHeight) : cellHeight;
+		const editorWidth = Math.max(contentWidth, Math.min(this._editorWidth * scaleX, info.maxSize.width));
+		const editorHeight = Math.max(contentHeight, Math.min(this._editorHeight * scaleY, info.maxSize.height));
 		let offsetTop = 0;
 		if (verticalAlign === _univerjs_core.VerticalAlign.MIDDLE) offsetTop = (editorHeight - actualHeight) / 2 / scaleY;
 		else if (verticalAlign === _univerjs_core.VerticalAlign.TOP) offsetTop = paddingData.t || 0;
 		else offsetTop = (editorHeight - actualHeight) / scaleY;
 		let offsetLeft = 0;
-		if (horizontalAlign === _univerjs_core.HorizontalAlign.CENTER) {} else if (horizontalAlign === _univerjs_core.HorizontalAlign.RIGHT) offsetLeft = (editorWidth - actualWidth) / scaleX;
-		else offsetLeft = paddingData.l || 0;
+		if (horizontalAlign === _univerjs_core.HorizontalAlign.RIGHT) offsetLeft = (editorWidth - actualWidth) / scaleX;
+		else if (horizontalAlign !== _univerjs_core.HorizontalAlign.CENTER) offsetLeft = paddingData.l || 0;
 		offsetTop = Math.max(offsetTop, paddingData.t || 0);
 		offsetLeft = Math.max(offsetLeft, paddingData.l || 0);
 		documentDataModel.updateDocumentDataMargin({
@@ -10450,7 +10464,22 @@ let SheetCellEditorResizeService = class SheetCellEditorResizeService extends _u
 			l: offsetLeft
 		});
 		documentSkeleton.calculate();
-		this._editAreaProcessing(editorWidth, editorHeight, position, canvasOffset, fill, scaleX, scaleY, horizontalAlign, callback);
+		this._editAreaProcessing({
+			width: editorWidth,
+			height: editorHeight,
+			contentWidth
+		}, position, canvasOffset, fill, scaleX, scaleY, horizontalAlign, callback);
+	}
+	_syncCellSize(width, height) {
+		if (this._cellSize && (Math.abs(this._cellSize.width - width) > 1e-6 || Math.abs(this._cellSize.height - height) > 1e-6)) {
+			var _this$_initialEditorS, _this$_initialEditorS2;
+			this._editorWidth = ((_this$_initialEditorS = this._initialEditorSize) === null || _this$_initialEditorS === void 0 ? void 0 : _this$_initialEditorS.width) ?? 0;
+			this._editorHeight = ((_this$_initialEditorS2 = this._initialEditorSize) === null || _this$_initialEditorS2 === void 0 ? void 0 : _this$_initialEditorS2.height) ?? 0;
+		}
+		this._cellSize = {
+			width,
+			height
+		};
 	}
 	/**
 	* Mainly used to pre-calculate the width of the editor,
@@ -10461,25 +10490,26 @@ let SheetCellEditorResizeService = class SheetCellEditorResizeService extends _u
 		const { textRotation, wrapStrategy, paddingData } = documentLayoutObject;
 		const documentDataModel = this._univerInstanceService.getUnit(_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY, _univerjs_core.UniverInstanceType.UNIVER_DOC);
 		const { vertexAngle: angle } = (0, _univerjs_engine_render.convertTextRotation)(textRotation);
+		const maxSize = this._getEditorMaxSize(actualRangeWithCoord, canvasOffset, documentLayoutObject.horizontalAlign);
+		if (!maxSize) return;
+		documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataMargin({
+			l: paddingData.l,
+			t: paddingData.t
+		});
 		if (wrapStrategy === _univerjs_core.WrapStrategy.WRAP && angle === 0) {
 			documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataPageSize((endX - startX) / scaleX);
-			documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataMargin({
-				l: paddingData.l,
-				t: paddingData.t
-			});
 			documentSkeleton.calculate();
 			const { actualWidth, actualHeight } = documentSkeleton.getActualSize();
 			return {
 				actualWidth: actualWidth * scaleX,
-				actualHeight: actualHeight * scaleY
+				actualHeight: actualHeight * scaleY,
+				maxSize
 			};
 		}
-		const maxSize = this._getEditorMaxSize(actualRangeWithCoord, canvasOffset, documentLayoutObject.horizontalAlign);
-		if (!maxSize) return;
 		documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataPageSize(maxSize.width / scaleX);
 		documentSkeleton.calculate();
 		const size = documentSkeleton.getActualSize();
-		let editorWidth = endX - startX;
+		let editorWidth = Math.max(endX - startX, Math.min(this._editorWidth * scaleX, maxSize.width));
 		if (editorWidth < size.actualWidth * scaleX + EDITOR_INPUT_SELF_EXTEND_GAP * scaleX) editorWidth = size.actualWidth * scaleX + EDITOR_INPUT_SELF_EXTEND_GAP * scaleX;
 		documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataPageSize(editorWidth / scaleX);
 		/**
@@ -10491,7 +10521,8 @@ let SheetCellEditorResizeService = class SheetCellEditorResizeService extends _u
 		});
 		return {
 			actualWidth: size.actualWidth * scaleX,
-			actualHeight: size.actualHeight * scaleY
+			actualHeight: size.actualHeight * scaleY,
+			maxSize
 		};
 	}
 	_getEditorMaxSize(position, canvasOffset, horizontalAlign) {
@@ -10537,7 +10568,7 @@ let SheetCellEditorResizeService = class SheetCellEditorResizeService extends _u
 	* determine whether a scrollbar appears,
 	* and calculate the editor's boundaries relative to the browser.
 	*/
-	_editAreaProcessing(editorWidth, editorHeight, actualRangeWithCoord, canvasOffset, fill, scaleX = 1, scaleY = 1, horizontalAlign, callback) {
+	_editAreaProcessing(size, actualRangeWithCoord, canvasOffset, fill, scaleX = 1, scaleY = 1, horizontalAlign, callback) {
 		const editorObject = this._getEditorObject();
 		if (editorObject == null) return;
 		const engine = this.engine;
@@ -10545,25 +10576,16 @@ let SheetCellEditorResizeService = class SheetCellEditorResizeService extends _u
 		const canvasElement = engine.getCanvasElement();
 		let { startX, startY } = actualRangeWithCoord;
 		const { document: documentComponent, scene: editorScene, engine: docEngine } = editorObject;
-		const viewportMain = editorScene.getViewport(_univerjs_docs_ui.VIEWPORT_KEY.VIEW_MAIN);
 		const { height: clientHeight, width: clientWidth, contentScaleX, contentScaleY, scaleAdjustX, scaleAdjustY } = this._getEditorMaxSize(actualRangeWithCoord, canvasOffset, horizontalAlign);
-		let physicHeight = editorHeight;
-		let scrollBar = viewportMain === null || viewportMain === void 0 ? void 0 : viewportMain.getScrollBar();
-		if (physicHeight > clientHeight) {
-			if (scrollBar == null) viewportMain && new _univerjs_engine_render.ScrollBar(viewportMain, {
-				enableHorizontal: false,
-				barSize: 8
-			});
-			else viewportMain === null || viewportMain === void 0 || viewportMain.resetCanvasSizeAndUpdateScroll();
-			viewportMain === null || viewportMain === void 0 || viewportMain.scrollToViewportPos({ viewportScrollY: physicHeight - clientHeight });
-			physicHeight = clientHeight;
-		} else {
-			var _viewportMain$getScro;
-			scrollBar = null;
-			viewportMain === null || viewportMain === void 0 || (_viewportMain$getScro = viewportMain.getScrollBar()) === null || _viewportMain$getScro === void 0 || _viewportMain$getScro.dispose();
-		}
-		editorWidth += (scrollBar === null || scrollBar === void 0 ? void 0 : scrollBar.barSize) || 0;
-		if (editorWidth > clientWidth) editorWidth = clientWidth;
+		const { physicHeight, scrollBarWidth } = this._fitEditorViewport(editorScene, size.height, clientHeight);
+		const editorWidth = Math.min(Math.max(size.width, size.contentWidth + scrollBarWidth), clientWidth);
+		const editorHeight = size.height;
+		this._editorWidth = Math.max(this._editorWidth, editorWidth / scaleX);
+		this._editorHeight = Math.max(this._editorHeight, physicHeight / scaleY);
+		if (!this._initialEditorSize && this._editorBridgeService.isVisible().visible) this._initialEditorSize = {
+			width: editorWidth / scaleX,
+			height: physicHeight / scaleY
+		};
 		this._addBackground(editorScene, editorWidth / scaleX, editorHeight / scaleY, fill);
 		const { scaleX: precisionScaleX, scaleY: precisionScaleY } = editorScene.getPrecisionScale();
 		editorScene.transformByState({
@@ -10573,11 +10595,6 @@ let SheetCellEditorResizeService = class SheetCellEditorResizeService extends _u
 			scaleY: scaleY * scaleAdjustY
 		});
 		documentComponent.resize(editorWidth * scaleAdjustX / scaleX, editorHeight * scaleAdjustY / scaleY);
-		/**
-		* sometimes requestIdleCallback is invalid, so use setTimeout to ensure the successful execution of the resizeBySize method.
-		* resize canvas
-		* When modifying the selection area for a formula, it is necessary to add a setTimeout to ensure successful updating.
-		*/
 		setTimeout(() => {
 			docEngine.resizeBySize((0, _univerjs_engine_render.fixLineWidthByScale)(editorWidth, precisionScaleX), (0, _univerjs_engine_render.fixLineWidthByScale)(physicHeight, precisionScaleY));
 			callback === null || callback === void 0 || callback();
@@ -10597,6 +10614,26 @@ let SheetCellEditorResizeService = class SheetCellEditorResizeService extends _u
 			show: true
 		});
 	}
+	_fitEditorViewport(editorScene, editorHeight, clientHeight) {
+		const viewportMain = editorScene.getViewport(_univerjs_docs_ui.VIEWPORT_KEY.VIEW_MAIN);
+		let scrollBar = viewportMain === null || viewportMain === void 0 ? void 0 : viewportMain.getScrollBar();
+		if (editorHeight > clientHeight) {
+			if (scrollBar == null) viewportMain && new _univerjs_engine_render.ScrollBar(viewportMain, {
+				enableHorizontal: false,
+				barSize: 8
+			});
+			else viewportMain === null || viewportMain === void 0 || viewportMain.resetCanvasSizeAndUpdateScroll();
+			viewportMain === null || viewportMain === void 0 || viewportMain.scrollToViewportPos({ viewportScrollY: editorHeight - clientHeight });
+		} else {
+			var _viewportMain$getScro;
+			scrollBar = null;
+			viewportMain === null || viewportMain === void 0 || (_viewportMain$getScro = viewportMain.getScrollBar()) === null || _viewportMain$getScro === void 0 || _viewportMain$getScro.dispose();
+		}
+		return {
+			physicHeight: Math.min(editorHeight, clientHeight),
+			scrollBarWidth: (scrollBar === null || scrollBar === void 0 ? void 0 : scrollBar.barSize) ?? 0
+		};
+	}
 	_getEditorContentElement() {
 		var _this$_embedFloatingG;
 		return ((_this$_embedFloatingG = this._embedFloatingGeometryService) === null || _this$_embedFloatingG === void 0 || (_this$_embedFloatingG = _this$_embedFloatingG.getRegistrationByChildUnitId(this._editingUnitId)) === null || _this$_embedFloatingG === void 0 ? void 0 : _this$_embedFloatingG.contentRoot) ?? this._layoutService.getContentElement();
@@ -14685,6 +14722,7 @@ let HeaderFreezeRenderController = class HeaderFreezeRenderController extends _u
 		if (row === -1 || row === 0) isTopView = false;
 		if (column === -1 || column === 0) isLeftView = false;
 		const startSheetView = skeleton.getNoMergeCellWithCoordByIndex(row - ySplit, column - xSplit, false);
+		if (isTopView && row === ySplit) startSheetView.startY = 0;
 		const endSheetView = skeleton.getNoMergeCellWithCoordByIndex(row, column, false);
 		viewMainLeftTop.disable();
 		viewMainTop.disable();
@@ -14917,6 +14955,10 @@ let HeaderFreezeRenderController = class HeaderFreezeRenderController extends _u
 	* When switching sheet tabs, it is necessary to update the frozen state of the current view.
 	*/
 	_skeletonListener() {
+		this.disposeWithMe(this._sheetSkeletonManagerService.currentSkeleton$.pipe((0, rxjs.switchMap)((param) => {
+			var _param$skeleton;
+			return (param === null || param === void 0 || (_param$skeleton = param.skeleton) === null || _param$skeleton === void 0 ? void 0 : _param$skeleton.gapConfigChanged$) ?? rxjs.EMPTY;
+		})).subscribe(() => this._refreshCurrent()));
 		this.disposeWithMe((0, _univerjs_core.toDisposable)(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
 			if ([
 				_univerjs_sheets.SetWorksheetActiveOperation.id,
@@ -17452,51 +17494,51 @@ const BORDER_LINE_CHILDREN = [
 ];
 const BORDER_SIZE_CHILDREN = [
 	{
-		label: _univerjs_core.BorderStyleTypes.THIN,
+		label: "sheets-ui.borderStyle.thin",
 		value: _univerjs_core.BorderStyleTypes.THIN
 	},
 	{
-		label: _univerjs_core.BorderStyleTypes.HAIR,
+		label: "sheets-ui.borderStyle.hair",
 		value: _univerjs_core.BorderStyleTypes.HAIR
 	},
 	{
-		label: _univerjs_core.BorderStyleTypes.DOTTED,
+		label: "sheets-ui.borderStyle.dotted",
 		value: _univerjs_core.BorderStyleTypes.DOTTED
 	},
 	{
-		label: _univerjs_core.BorderStyleTypes.DASHED,
+		label: "sheets-ui.borderStyle.dashed",
 		value: _univerjs_core.BorderStyleTypes.DASHED
 	},
 	{
-		label: _univerjs_core.BorderStyleTypes.DASH_DOT,
+		label: "sheets-ui.borderStyle.dashDot",
 		value: _univerjs_core.BorderStyleTypes.DASH_DOT
 	},
 	{
-		label: _univerjs_core.BorderStyleTypes.DASH_DOT_DOT,
+		label: "sheets-ui.borderStyle.dashDotDot",
 		value: _univerjs_core.BorderStyleTypes.DASH_DOT_DOT
 	},
 	{
-		label: _univerjs_core.BorderStyleTypes.MEDIUM,
+		label: "sheets-ui.borderStyle.medium",
 		value: _univerjs_core.BorderStyleTypes.MEDIUM
 	},
 	{
-		label: _univerjs_core.BorderStyleTypes.MEDIUM_DASHED,
+		label: "sheets-ui.borderStyle.mediumDashed",
 		value: _univerjs_core.BorderStyleTypes.MEDIUM_DASHED
 	},
 	{
-		label: _univerjs_core.BorderStyleTypes.MEDIUM_DASH_DOT,
+		label: "sheets-ui.borderStyle.mediumDashDot",
 		value: _univerjs_core.BorderStyleTypes.MEDIUM_DASH_DOT
 	},
 	{
-		label: _univerjs_core.BorderStyleTypes.MEDIUM_DASH_DOT_DOT,
+		label: "sheets-ui.borderStyle.mediumDashDotDot",
 		value: _univerjs_core.BorderStyleTypes.MEDIUM_DASH_DOT_DOT
 	},
 	{
-		label: _univerjs_core.BorderStyleTypes.THICK,
+		label: "sheets-ui.borderStyle.thick",
 		value: _univerjs_core.BorderStyleTypes.THICK
 	},
 	{
-		label: _univerjs_core.BorderStyleTypes.DOUBLE,
+		label: "sheets-ui.borderStyle.double",
 		value: _univerjs_core.BorderStyleTypes.DOUBLE
 	}
 ];
@@ -19526,6 +19568,7 @@ function PasteRibbonMenuItemFactory(accessor) {
 	return {
 		...PasteSpacialMenuItemFactory(accessor),
 		id: PASTE_RIBBON_MENU_ID,
+		icon: "DocPasteOptionsIcon",
 		title: "sheets-ui.rightClick.paste",
 		hidden$: (0, rxjs.combineLatest)([getObservableWithExclusiveRange$(accessor, (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET)), accessor.get(_univerjs_core.IContextService).subscribeContextValue$(_univerjs_core.FOCUSING_SHAPE_TEXT_EDITOR).pipe((0, rxjs.startWith)(false))]).pipe((0, rxjs.map)(([hidden, editing]) => hidden || editing))
 	};
@@ -19798,6 +19841,9 @@ function SetColWidthMenuItemFactory(accessor) {
 //#endregion
 //#region src/menu/merge.menu.ts
 function CellMergeMenuItemFactory(accessor) {
+	const commandService = accessor.get(_univerjs_core.ICommandService);
+	const instanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+	const selectionService = accessor.get(_univerjs_sheets.SheetsSelectionsService);
 	const editDisabled$ = getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, {
 		workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
 		worksheetTypes: [
@@ -19813,6 +19859,22 @@ function CellMergeMenuItemFactory(accessor) {
 		icon: "MergeAllIcon",
 		tooltip: "sheets-ui.toolbar.mergeCell.main",
 		type: _univerjs_ui.MenuItemType.SUBITEMS,
+		activated$: deriveStateFromActiveSheet$(instanceService, false, ({ worksheet }) => new rxjs.Observable((subscriber) => {
+			const update = () => {
+				var _selectionService$get;
+				const primary = (_selectionService$get = selectionService.getCurrentLastSelection()) === null || _selectionService$get === void 0 ? void 0 : _selectionService$get.primary;
+				subscriber.next(!!primary && !!worksheet.getMergedCell(primary.actualRow, primary.actualColumn));
+			};
+			const selectionSubscription = selectionService.selectionChanged$.subscribe(update);
+			const commandDisposable = commandService.onCommandExecuted((command) => {
+				if (command.id === _univerjs_sheets.AddWorksheetMergeMutation.id || command.id === _univerjs_sheets.RemoveWorksheetMergeMutation.id) update();
+			});
+			update();
+			return () => {
+				selectionSubscription.unsubscribe();
+				commandDisposable.dispose();
+			};
+		})).pipe((0, rxjs.distinctUntilChanged)()),
 		hidden$: (0, rxjs.combineLatest)([(0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET), accessor.get(_univerjs_core.IContextService).subscribeContextValue$(_univerjs_core.FOCUSING_COMMON_DRAWINGS).pipe((0, rxjs.startWith)(false))]).pipe((0, rxjs.map)(([hidden, focusingDrawing]) => hidden || focusingDrawing)),
 		disabled$: editDisabled$.pipe((0, rxjs.combineLatestWith)(selectionsHasCross$), (0, rxjs.map)(([disable, hasCross]) => disable || hasCross))
 	};
@@ -20396,18 +20458,6 @@ function Text2NumberContextMenuItemFactory(accessor) {
 	};
 }
 
-//#endregion
-//#region src/views/sheet-slider/SheetZoomInput.tsx
-const SHEET_ZOOM_INPUT_COMPONENT = "SHEET_ZOOM_INPUT_COMPONENT";
-function SheetZoomInput({ className, ...props }) {
-	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.ZoomInput, {
-		...props,
-		className: (0, _univerjs_design.clsx)("!univer-bg-transparent dark:!univer-bg-transparent", className),
-		onChange: (value) => commandService.executeCommand(SetZoomRatioFromToolbarCommand.id, { value })
-	});
-}
-
 //#endregion
 //#region src/menu/zoom.menu.ts
 const ZOOM_RATIO_MENU_ID = "sheet.menu.zoom-ratio";
@@ -20436,16 +20486,14 @@ function getZoomRatioValue$(accessor) {
 function ZoomRatioMenuItemFactory(accessor) {
 	return {
 		id: ZOOM_RATIO_MENU_ID,
-		commandId: SetZoomRatioFromToolbarCommand.id,
-		type: _univerjs_ui.MenuItemType.BUTTON,
-		label: {
-			name: SHEET_ZOOM_INPUT_COMPONENT,
-			props: {
-				min: SHEET_ZOOM_RANGE[0],
-				max: SHEET_ZOOM_RANGE[1],
-				shortcuts: ZOOM_RATIO_LIST
-			}
-		},
+		selectionsCommandId: SetZoomRatioFromToolbarCommand.id,
+		type: _univerjs_ui.MenuItemType.SELECTOR,
+		icon: "ZoomInIcon",
+		tooltip: "sheets-ui.toolbar.zoom",
+		selections: ZOOM_RATIO_LIST.map((value) => ({
+			value,
+			label: `${value}%`
+		})),
 		value$: getZoomRatioValue$(accessor),
 		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET)
 	};
@@ -20682,31 +20730,29 @@ const menuSchema = {
 				order: 1,
 				gridLayout: {
 					row: 1,
-					column: 2,
-					width: 112
+					column: 2
 				},
 				menuItemFactory: ZoomRatioMenuItemFactory
+			}
+		},
+		[_univerjs_ui.RibbonViewGroup.VISIBILITY]: {
+			[_univerjs_sheets.ToggleGridlinesCommand.id]: {
+				order: 0,
+				gridLayout: {
+					row: 1,
+					column: 1
+				},
+				menuItemFactory: ToggleGridlinesMenuFactory
 			},
 			[_univerjs_ui.ToggleFullscreenOperation.id]: {
-				order: 2,
+				order: 1,
 				gridLayout: {
 					row: 2,
-					column: 2,
-					showLabel: true,
-					width: 112
+					column: 1
 				},
 				menuItemFactory: FullscreenMenuItemFactory
 			}
-		},
-		[_univerjs_ui.RibbonViewGroup.VISIBILITY]: { [_univerjs_sheets.ToggleGridlinesCommand.id]: {
-			order: 0,
-			gridLayout: {
-				row: 1,
-				column: 1,
-				showLabel: true
-			},
-			menuItemFactory: ToggleGridlinesMenuFactory
-		} }
+		}
 	},
 	[_univerjs_ui.ContextMenuPosition.MAIN_AREA]: {
 		[_univerjs_ui.ContextMenuGroup.QUICK]: {
@@ -22121,11 +22167,15 @@ function DefinedName({ disable }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: nameBoxRef,
 		"data-u-comp": "defined-name",
+		onMouseDown: (e) => {
+			if (disable) e.preventDefault();
+		},
 		className: "univer-relative univer-box-border univer-flex univer-h-full univer-w-24 univer-border-r-gray-200 univer-py-1.5 univer-transition-all",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			ref: inputRef,
 			className: (0, _univerjs_design.clsx)("univer-box-border univer-size-full univer-appearance-none univer-bg-transparent univer-pl-1.5 univer-pr-5 univer-text-gray-900 focus:univer-outline-none dark:!univer-border-r-gray-700 dark:!univer-text-gray-0", _univerjs_design.borderRightClassName, { "univer-cursor-not-allowed": disable }),
 			type: "text",
+			disabled: disable,
 			value: inputValue,
 			onChange: handleChangeSelection,
 			onKeyDown: handleKeyDown,
@@ -22142,7 +22192,7 @@ function DefinedName({ disable }) {
 				})
 			}),
 			disabled: disable,
-			open,
+			open: !disable && open,
 			onOpenChange: setOpen,
 			onOpenAutoFocus: (e) => e.preventDefault(),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
@@ -22323,7 +22373,7 @@ function FormulaBar(props) {
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-relative univer-box-border univer-h-full univer-w-[100px]",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefinedName, { disable: disableDefinedName ?? editDisable })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefinedName, { disable: iconActivated || (disableDefinedName ?? editDisable) })
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "univer-flex univer-size-full",
@@ -23514,6 +23564,7 @@ function SheetBarTabs() {
 	const slideTabBarContainerRef = (0, react.useRef)(null);
 	const activeSheetIdRef = (0, react.useRef)(activeSheetId);
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const layoutService = (0, _univerjs_ui.useDependency)(_univerjs_ui.ILayoutService);
 	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
 	const sheetBarService = (0, _univerjs_ui.useDependency)(ISheetBarService);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
@@ -23699,6 +23750,7 @@ function SheetBarTabs() {
 			subUnitId,
 			unitId: workbookRef.current.getUnitId()
 		}).then((result) => {
+			requestAnimationFrame(() => layoutService.focus(workbookRef.current.getUnitId()));
 			if (result !== false) return;
 			const worksheet = workbookRef.current.getSheetBySheetId(subUnitId);
 			if (worksheet) {
@@ -23706,7 +23758,11 @@ function SheetBarTabs() {
 				syncActiveSheetRender(subUnitId);
 			}
 		});
-	}, [commandService, syncActiveSheetRender]);
+	}, [
+		commandService,
+		layoutService,
+		syncActiveSheetRender
+	]);
 	const observeResize = (0, react.useCallback)((slideTabBar) => {
 		var _slideTabBarContainer;
 		const slideTabBarContainer = (_slideTabBarContainer = slideTabBarContainerRef.current) === null || _slideTabBarContainer === void 0 ? void 0 : _slideTabBarContainer.querySelector("[data-u-comp=slide-tab-bar]");
@@ -25016,7 +25072,7 @@ const useHighlightRange = (ranges = []) => {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-ui";
-var version = "1.0.4";
+var version = "1.1.0";
 
 //#endregion
 //#region src/views/cell-popup/config.ts
@@ -25349,7 +25405,7 @@ function CellAlert({ popup, DropdownMenuComponent = _univerjs_design.DropdownMen
 	const [isHovered, setIsHovered] = (0, react.useState)(false);
 	const alert = (_popup$extraProps = popup.extraProps) === null || _popup$extraProps === void 0 ? void 0 : _popup$extraProps.alert;
 	if (!alert) return null;
-	const { type, title, message, menu } = alert;
+	const { type, title, message, menu, action, width } = alert;
 	if (menu === null || menu === void 0 ? void 0 : menu.length) {
 		const accessibleLabel = [title, message].filter((value) => typeof value === "string").join(": ");
 		const showMore = visible || isHovered;
@@ -25389,14 +25445,24 @@ function CellAlert({ popup, DropdownMenuComponent = _univerjs_design.DropdownMen
 		[1]: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.WarningIcon, { className: "univer-text-yellow-500" })
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-z-[100] univer-box-border univer-w-[156px] univer-rounded-lg univer-bg-gray-0 univer-px-2 univer-py-1 univer-text-gray-900 univer-shadow dark:!univer-bg-gray-1000 dark:!univer-text-gray-0",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-mb-1.5 univer-flex univer-h-5 univer-flex-row univer-items-center univer-gap-x-1.5 univer-text-sm univer-font-medium",
-			children: [type ? iconMap[type] : null, title]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-text-sm",
-			children: message
-		})]
+		style: { width },
+		className: "univer-z-[100] univer-box-border univer-rounded-lg univer-bg-gray-0 univer-px-2 univer-py-1 univer-text-gray-900 univer-shadow dark:!univer-bg-gray-1000 dark:!univer-text-gray-0",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-mb-1.5 univer-flex univer-h-5 univer-flex-row univer-items-center univer-gap-x-1.5 univer-text-sm univer-font-medium",
+				children: [type ? iconMap[type] : null, title]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-sm",
+				children: message
+			}),
+			action && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+				className: "univer-mt-2",
+				disabled: action.disabled,
+				onClick: action.onSelect,
+				children: action.label
+			})
+		]
 	});
 }
 
@@ -25424,15 +25490,17 @@ let CellAlertManagerService = class CellAlertManagerService extends _univerjs_co
 		_defineProperty(this, "_currentAlert", /* @__PURE__ */ new Map());
 		_defineProperty(this, "currentAlert$", this._currentAlert$.asObservable());
 		this.disposeWithMe(() => {
+			this.clearAlert();
 			this._currentAlert$.complete();
 		});
 	}
 	showAlert(alert) {
 		var _alert$menu, _alert$menu2, _alert$menu3;
 		let lastPopup = this._currentAlert.get(alert.key);
-		if (lastPopup) lastPopup.dispose.dispose();
-		if (lastPopup) lastPopup.dispose.dispose();
-		else {
+		if (lastPopup) {
+			lastPopup.dispose.dispose();
+			lastPopup.alert = alert;
+		} else {
 			lastPopup = {
 				alert,
 				dispose: { dispose() {} }
@@ -25455,13 +25523,7 @@ let CellAlertManagerService = class CellAlertManagerService extends _univerjs_co
 			extraProps: { alert },
 			priority: 1
 		});
-		if (disposable) {
-			if (lastPopup) {
-				var _lastPopup$dispose;
-				(_lastPopup$dispose = lastPopup.dispose) === null || _lastPopup$dispose === void 0 || _lastPopup$dispose.dispose();
-			}
-			lastPopup.dispose = disposable;
-		}
+		if (disposable) lastPopup.dispose = disposable;
 		this._currentAlert$.next(Array.from(this._currentAlert.entries()));
 	}
 	removeAlert(key) {
@@ -26313,8 +26375,8 @@ function SelectList(props) {
 	const filteredOptions = (0, react.useMemo)(() => {
 		return options.filter((item) => lowerFilter ? item.label.toLowerCase().includes(lowerFilter) : true);
 	}, [options, lowerFilter]);
-	const handleSearchChange = (e) => {
-		setLowerFilter(e.target.value.toLowerCase());
+	const handleSearchChange = (value) => {
+		setLowerFilter(value.toLowerCase());
 	};
 	const sheetPermissionCheckController = (0, _univerjs_ui.useDependency)(_univerjs_sheets.SheetPermissionCheckController);
 	const hasPermission = (0, react.useMemo)(() => sheetPermissionCheckController.permissionCheckWithRanges({
@@ -26340,9 +26402,8 @@ function SelectList(props) {
 		children: [
 			showSearchOnDropdown && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-box-border univer-flex univer-w-full univer-px-2",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
 					ref: searchRef,
-					className: (0, _univerjs_design.clsx)("univer-w-full univer-rounded-md univer-bg-gray-0 univer-px-2 univer-py-1 univer-text-sm univer-text-gray-900 focus:univer-border-primary-500 focus:univer-outline-none dark:!univer-bg-gray-1000 dark:!univer-text-gray-0", _univerjs_design.borderClassName),
 					type: "text",
 					value: lowerFilter,
 					autoFocus: true,
@@ -26371,14 +26432,16 @@ function SelectList(props) {
 					const index = item.label.toLocaleLowerCase().indexOf(lowerFilter);
 					const isThemeColor = Boolean(((_item$color = item.color) === null || _item$color === void 0 ? void 0 : _item$color.includes(".")) && themeService.isValidThemeColor(item.color));
 					const backgroundColor = isThemeColor ? themeService.getColorFromTheme(item.color) : item.color;
-					const isDark = new _univerjs_core.ColorKit(backgroundColor).isDark();
+					const color = new _univerjs_core.ColorKit(backgroundColor);
+					const hasBackground = Boolean(backgroundColor) && backgroundColor !== "transparent" && color.getAlpha() > 0;
+					const isDark = color.isDark();
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "univer-flex univer-cursor-pointer univer-flex-row univer-items-center univer-justify-between univer-rounded-md univer-px-1.5 univer-py-1 hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-700",
 						onClick: handleClick,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: (0, _univerjs_design.clsx)("univer-inline-flex univer-h-4 univer-w-fit univer-items-center univer-truncate univer-rounded-full univer-px-1.5 univer-text-xs", {
-								"univer-text-gray-900": isThemeColor || !isDark,
-								"univer-text-gray-0": !isThemeColor && isDark
+								"univer-text-gray-900": hasBackground && (isThemeColor || !isDark),
+								"univer-text-gray-0": hasBackground && !isThemeColor && isDark
 							}),
 							style: { background: backgroundColor },
 							children: lowerFilter && item.label.toLowerCase().includes(lowerFilter) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
@@ -27043,6 +27106,7 @@ function BorderLine(props) {
 //#endregion
 //#region src/views/border-panel/BorderPanel.tsx
 function BorderPanel(props) {
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const iconManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.IconManager);
 	const selectionManagerService = (0, _univerjs_ui.useDependency)(_univerjs_sheets.SheetsSelectionsService);
 	const { direction } = (0, react.useContext)(_univerjs_design.ConfigContext);
@@ -27108,7 +27172,7 @@ function BorderPanel(props) {
 							className: "univer-m-0 univer-grid univer-list-none univer-gap-1 univer-p-0",
 							children: BORDER_SIZE_CHILDREN.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
-								"aria-label": _univerjs_core.BorderStyleTypes[item.value],
+								"aria-label": localeService.t(item.label),
 								"aria-pressed": item.value === value.style,
 								className: (0, _univerjs_design.clsx)("univer-flex univer-w-full univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-border-none univer-bg-transparent univer-px-1 univer-py-3 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700", { "univer-bg-gray-200 dark:!univer-bg-gray-600": item.value === value.style }),
 								onClick: () => handleClick(item.value, "style"),
@@ -27656,16 +27720,35 @@ function MobileMenuItemInput(props) {
 	const { prefix, suffix, value, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, disabled$, onChange } = props;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const disabled = (0, _univerjs_ui.useObservable)(disabled$ ?? null, false);
-	const inputValue = Math.min(max, Math.max(min, Number(value)));
+	const [draft, setDraft] = (0, react.useState)(null);
+	const inputValue = draft !== null && draft.source === value ? draft.value : Math.min(max, Math.max(min, Number(value)));
+	if (draft !== null && draft.source !== value) setDraft(null);
 	function handleChange(nextValue) {
-		if (nextValue == null) return;
+		setDraft({
+			source: value,
+			value: nextValue
+		});
+	}
+	function handleConfirm() {
+		if (disabled || inputValue == null || !Number.isFinite(inputValue)) return;
+		const nextValue = Math.min(max, Math.max(min, inputValue));
+		setDraft({
+			source: value,
+			value: nextValue
+		});
 		onChange(nextValue.toString());
 	}
 	function handleKeyDown(event) {
+		if (event.key === "Escape" && !event.nativeEvent.isComposing) return;
 		event.stopPropagation();
+		if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+			event.preventDefault();
+			handleConfirm();
+		}
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-flex univer-min-w-0 univer-flex-1 univer-items-center univer-gap-2",
+		className: "univer-flex univer-min-w-0 univer-flex-1 univer-flex-wrap univer-items-center univer-gap-2",
+		onClick: (event) => event.stopPropagation(),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "univer-shrink-0 univer-text-base univer-font-medium",
@@ -27673,13 +27756,11 @@ function MobileMenuItemInput(props) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-w-20 univer-shrink-0",
-				onClick: (event) => event.stopPropagation(),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 					value: inputValue,
 					size: "small",
 					precision: 0,
-					min,
-					max,
+					allowEmpty: true,
 					disabled,
 					onKeyDown: handleKeyDown,
 					onChange: handleChange
@@ -27688,6 +27769,15 @@ function MobileMenuItemInput(props) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "univer-min-w-0 univer-truncate univer-text-base univer-font-medium",
 				children: localeService.t(suffix)
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+				type: "button",
+				variant: "primary",
+				size: "large",
+				className: "univer-shrink-0",
+				disabled: disabled || inputValue == null || !Number.isFinite(inputValue),
+				onClick: handleConfirm,
+				children: localeService.t("sheets-ui.button.confirm")
 			})
 		]
 	});
@@ -28982,6 +29072,7 @@ const sheetsUIIcons = {
 	DeleteColumnDoubleIcon: _univerjs_icons.DeleteColumnDoubleIcon,
 	DeleteIcon: _univerjs_icons.DeleteIcon,
 	DeleteRowDoubleIcon: _univerjs_icons.DeleteRowDoubleIcon,
+	DocPasteOptionsIcon: _univerjs_icons.DocPasteOptionsIcon,
 	DownBorderDoubleIcon: _univerjs_icons.DownBorderDoubleIcon,
 	DownloadImageIcon: _univerjs_icons.DownloadImageIcon,
 	EyeIcon: _univerjs_icons.EyeIcon,
@@ -29039,7 +29130,8 @@ const sheetsUIIcons = {
 	VerticalCenterIcon: _univerjs_icons.VerticalCenterIcon,
 	VerticalIntegrationIcon: _univerjs_icons.VerticalIntegrationIcon,
 	VerticalTextIcon: _univerjs_icons.VerticalTextIcon,
-	WriteIcon: _univerjs_icons.WriteIcon
+	WriteIcon: _univerjs_icons.WriteIcon,
+	ZoomInIcon: _univerjs_icons.ZoomInIcon
 };
 
 //#endregion
@@ -29055,7 +29147,6 @@ let MobileComponentsController = class MobileComponentsController extends _unive
 		this.disposeWithMe(componentManager.register(CascaderDropdown.componentKey, CascaderDropdown));
 		this.disposeWithMe(componentManager.register(MENU_ITEM_INPUT_COMPONENT, MobileMenuItemInput));
 		this.disposeWithMe(componentManager.register(MENU_ITEM_FROZEN_COMPONENT, MenuItemFrozen));
-		this.disposeWithMe(componentManager.register(SHEET_ZOOM_INPUT_COMPONENT, SheetZoomInput));
 		this.disposeWithMe(componentManager.register(BORDER_PANEL_COMPONENT, MobileBorderPanel));
 		this.disposeWithMe(componentManager.register(DEFINED_NAME_CONTAINER, MobileDefinedNameContainer));
 		this.disposeWithMe(componentManager.register(CELL_POPUP_COMPONENT_KEY, CellPopup));
@@ -30719,6 +30810,7 @@ function MobileBorderColorView(props) {
 }
 function MobileBorderStyleView(props) {
 	const { value, onExecute } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-overflow-hidden univer-rounded-xl univer-bg-gray-0 dark:!univer-bg-gray-800",
 		children: BORDER_SIZE_CHILDREN.map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -30738,7 +30830,7 @@ function MobileBorderStyleView(props) {
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "univer-flex-1 univer-text-left univer-text-sm",
-					children: option.value
+					children: localeService.t(option.label)
 				}),
 				value.style === option.value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CheckMarkIcon, { className: "univer-text-primary-600 dark:!univer-text-primary-400" })
 			]
@@ -31283,7 +31375,11 @@ function MobileFormulaBar() {
 		let cursorFrame;
 		const contentFrame = requestAnimationFrame(() => {
 			editorBridgeService.refreshEditCellState();
-			editorService.focus(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+			if (editorService.getFocusId() !== _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY) editorService.focus(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+			else {
+				var _editorService$getEdi;
+				(_editorService$getEdi = editorService.getEditor(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY)) === null || _editorService$getEdi === void 0 || _editorService$getEdi.focus();
+			}
 			cursorFrame = requestAnimationFrame(() => {
 				var _editor$getDocumentDa;
 				const editor = editorService.getEditor(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
@@ -31845,7 +31941,7 @@ const MobileFormulaBarSubmitCommand = {
 	id: MOBILE_FORMULA_BAR_SUBMIT_COMMAND_ID,
 	type: _univerjs_core.CommandType.COMMAND,
 	async handler(accessor) {
-		var _accessor$get$getCurr, _workbook$getActiveSh, _formulaModel$getBody, _accessor$get$getEdit;
+		var _accessor$get$getCurr, _workbook$getActiveSh, _formulaModel$getBody;
 		const instanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 		const workbook = instanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
 		const formulaModel = instanceService.getUnit(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, _univerjs_core.UniverInstanceType.UNIVER_DOC);
@@ -31877,8 +31973,12 @@ const MobileFormulaBarSubmitCommand = {
 		});
 		editorBridgeService.refreshEditCellState();
 		editorBridgeService.changeEditorDirty(false);
+		const editorService = accessor.get(_univerjs_docs_ui.IEditorService);
+		const formulaEditor = editorService.getEditor(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+		if (editorService.getFocusId() !== _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY) editorService.focus(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+		else formulaEditor === null || formulaEditor === void 0 || formulaEditor.focus();
 		const endOffset = Math.max(0, (((_formulaModel$getBody = formulaModel.getBody()) === null || _formulaModel$getBody === void 0 ? void 0 : _formulaModel$getBody.dataStream.length) ?? 2) - 2);
-		(_accessor$get$getEdit = accessor.get(_univerjs_docs_ui.IEditorService).getEditor(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY)) === null || _accessor$get$getEdit === void 0 || _accessor$get$getEdit.setSelectionRanges([{
+		formulaEditor === null || formulaEditor === void 0 || formulaEditor.setSelectionRanges([{
 			startOffset: endOffset,
 			endOffset
 		}], false);
@@ -31961,6 +32061,7 @@ let SheetUIMobileController = class SheetUIMobileController extends _univerjs_co
 			ScrollToRangeOperation,
 			_univerjs_sheets.SetUnderlineCommand,
 			SetZoomRatioCommand,
+			SetZoomRatioFromToolbarCommand,
 			SetZoomRatioOperation,
 			ShowMenuListCommand,
 			InsertRangeMoveDownConfirmCommand,
@@ -32971,11 +33072,7 @@ let MobileCellEditRenderController = class MobileCellEditRenderController extend
 			this._commandService.syncExecuteCommand(SetCellEditVisibleOperation.id, {
 				visible: true,
 				eventType: _univerjs_engine_render.DeviceInputEventType.Dblclick,
-				unitId: this._context.unitId,
-				pointerPosition: {
-					x: cell.event.clientX,
-					y: cell.event.clientY
-				}
+				unitId: this._context.unitId
 			});
 		}));
 		this.disposeWithMe(hoverManagerService.currentPointerDownCell$.subscribe((cell) => {
@@ -35466,7 +35563,6 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 		const componentManager = this._componentManager;
 		this.disposeWithMe(componentManager.register(MENU_ITEM_INPUT_COMPONENT, MenuItemInput));
 		this.disposeWithMe(componentManager.register(MENU_ITEM_FROZEN_COMPONENT, MenuItemFrozen));
-		this.disposeWithMe(componentManager.register(SHEET_ZOOM_INPUT_COMPONENT, SheetZoomInput));
 		this.disposeWithMe(componentManager.register(BORDER_PANEL_COMPONENT, BorderPanel));
 		this.disposeWithMe(componentManager.register(DEFINED_NAME_CONTAINER, DefinedNameContainer));
 		this.disposeWithMe(componentManager.register(CELL_POPUP_COMPONENT_KEY, CellPopup));
@@ -36370,19 +36466,19 @@ exports.AddRangeProtectionFromSheetBarCommand = AddRangeProtectionFromSheetBarCo
 exports.AddRangeProtectionFromToolbarCommand = AddRangeProtectionFromToolbarCommand;
 exports.ApplyFormatPainterCommand = ApplyFormatPainterCommand;
 exports.AutoFillPopupMenu = AutoFillPopupMenu;
-Object.defineProperty(exports, 'AutoFillUIController', {
+Object.defineProperty(exports, "AutoFillUIController", {
   enumerable: true,
   get: function () {
     return AutoFillUIController;
   }
 });
-Object.defineProperty(exports, 'AutoHeightController', {
+Object.defineProperty(exports, "AutoHeightController", {
   enumerable: true,
   get: function () {
     return AutoHeightController;
   }
 });
-Object.defineProperty(exports, 'AutoWidthController', {
+Object.defineProperty(exports, "AutoWidthController", {
   enumerable: true,
   get: function () {
     return AutoWidthController;
@@ -36394,21 +36490,21 @@ exports.BaseSelectionRenderService = BaseSelectionRenderService;
 exports.BorderLine = BorderLine;
 exports.COPY_SPECIAL_MENU_ID = COPY_SPECIAL_MENU_ID;
 exports.COPY_TYPE = COPY_TYPE;
-Object.defineProperty(exports, 'CellAlertManagerService', {
+Object.defineProperty(exports, "CellAlertManagerService", {
   enumerable: true,
   get: function () {
     return CellAlertManagerService;
   }
 });
 exports.CellAlertType = CellAlertType;
-Object.defineProperty(exports, 'CellCustomRenderController', {
+Object.defineProperty(exports, "CellCustomRenderController", {
   enumerable: true,
   get: function () {
     return CellCustomRenderController;
   }
 });
 exports.CellEditorManagerService = CellEditorManagerService;
-Object.defineProperty(exports, 'CellPopupManagerService', {
+Object.defineProperty(exports, "CellPopupManagerService", {
   enumerable: true,
   get: function () {
     return CellPopupManagerService;
@@ -36421,13 +36517,13 @@ exports.DeleteRangeMoveLeftConfirmCommand = DeleteRangeMoveLeftConfirmCommand;
 exports.DeleteRangeMoveUpConfirmCommand = DeleteRangeMoveUpConfirmCommand;
 exports.DeleteRangeProtectionFromContextMenuCommand = DeleteRangeProtectionFromContextMenuCommand;
 exports.DeleteWorksheetProtectionFormSheetBarCommand = DeleteWorksheetProtectionFormSheetBarCommand;
-Object.defineProperty(exports, 'DragManagerService', {
+Object.defineProperty(exports, "DragManagerService", {
   enumerable: true,
   get: function () {
     return DragManagerService;
   }
 });
-Object.defineProperty(exports, 'DragRenderController', {
+Object.defineProperty(exports, "DragRenderController", {
   enumerable: true,
   get: function () {
     return DragRenderController;
@@ -36435,13 +36531,13 @@ Object.defineProperty(exports, 'DragRenderController', {
 });
 exports.EMBEDDING_FORMULA_EDITOR = EMBEDDING_FORMULA_EDITOR;
 exports.EMBEDDING_FORMULA_EDITOR_COMPONENT_KEY = EMBEDDING_FORMULA_EDITOR_COMPONENT_KEY;
-Object.defineProperty(exports, 'EditingRenderController', {
+Object.defineProperty(exports, "EditingRenderController", {
   enumerable: true,
   get: function () {
     return EditingRenderController;
   }
 });
-Object.defineProperty(exports, 'EditorBridgeService', {
+Object.defineProperty(exports, "EditorBridgeService", {
   enumerable: true,
   get: function () {
     return EditorBridgeService;
@@ -36452,26 +36548,26 @@ exports.ExpandSelectionCommand = ExpandSelectionCommand;
 exports.FORMULA_CLIPBOARD_MIME_TYPE = FORMULA_CLIPBOARD_MIME_TYPE;
 exports.FormatPainterStatus = FormatPainterStatus;
 exports.FormulaBar = FormulaBar;
-Object.defineProperty(exports, 'FormulaEditorController', {
+Object.defineProperty(exports, "FormulaEditorController", {
   enumerable: true,
   get: function () {
     return FormulaEditorController;
   }
 });
 exports.HEADER_UNHIDE_RANGE_VISIBLE_CHECK = HEADER_UNHIDE_RANGE_VISIBLE_CHECK;
-Object.defineProperty(exports, 'HeaderFreezeRenderController', {
+Object.defineProperty(exports, "HeaderFreezeRenderController", {
   enumerable: true,
   get: function () {
     return HeaderFreezeRenderController;
   }
 });
-Object.defineProperty(exports, 'HeaderMoveRenderController', {
+Object.defineProperty(exports, "HeaderMoveRenderController", {
   enumerable: true,
   get: function () {
     return HeaderMoveRenderController;
   }
 });
-Object.defineProperty(exports, 'HeaderResizeRenderController', {
+Object.defineProperty(exports, "HeaderResizeRenderController", {
   enumerable: true,
   get: function () {
     return HeaderResizeRenderController;
@@ -36479,7 +36575,7 @@ Object.defineProperty(exports, 'HeaderResizeRenderController', {
 });
 exports.HeaderUnhideRangeAxis = HeaderUnhideRangeAxis;
 exports.HeaderUnhideRangeService = HeaderUnhideRangeService;
-Object.defineProperty(exports, 'HeaderUnhideRenderController', {
+Object.defineProperty(exports, "HeaderUnhideRenderController", {
   enumerable: true,
   get: function () {
     return HeaderUnhideRenderController;
@@ -36487,13 +36583,13 @@ Object.defineProperty(exports, 'HeaderUnhideRenderController', {
 });
 exports.HideColConfirmCommand = HideColConfirmCommand;
 exports.HideRowConfirmCommand = HideRowConfirmCommand;
-Object.defineProperty(exports, 'HoverManagerService', {
+Object.defineProperty(exports, "HoverManagerService", {
   enumerable: true,
   get: function () {
     return HoverManagerService;
   }
 });
-Object.defineProperty(exports, 'HoverRenderController', {
+Object.defineProperty(exports, "HoverRenderController", {
   enumerable: true,
   get: function () {
     return HoverRenderController;
@@ -36522,7 +36618,7 @@ exports.MOBILE_CONTEXT_MENU = MOBILE_CONTEXT_MENU;
 exports.MOBILE_EXPANDING_SELECTION = MOBILE_EXPANDING_SELECTION;
 exports.MOBILE_FORMULA_FUNCTION_PANEL_OPEN = MOBILE_FORMULA_FUNCTION_PANEL_OPEN;
 exports.MOBILE_PINCH_ZOOMING = MOBILE_PINCH_ZOOMING;
-Object.defineProperty(exports, 'MarkSelectionService', {
+Object.defineProperty(exports, "MarkSelectionService", {
   enumerable: true,
   get: function () {
     return MarkSelectionService;
@@ -36596,37 +36692,37 @@ exports.SetZoomRatioCommand = SetZoomRatioCommand;
 exports.SetZoomRatioOperation = SetZoomRatioOperation;
 exports.SheetBar = SheetBar;
 exports.SheetBarService = SheetBarService;
-Object.defineProperty(exports, 'SheetCanvasPopManagerService', {
+Object.defineProperty(exports, "SheetCanvasPopManagerService", {
   enumerable: true,
   get: function () {
     return SheetCanvasPopManagerService;
   }
 });
-Object.defineProperty(exports, 'SheetCellDropdownManagerService', {
+Object.defineProperty(exports, "SheetCellDropdownManagerService", {
   enumerable: true,
   get: function () {
     return SheetCellDropdownManagerService;
   }
 });
-Object.defineProperty(exports, 'SheetCellEditorResizeService', {
+Object.defineProperty(exports, "SheetCellEditorResizeService", {
   enumerable: true,
   get: function () {
     return SheetCellEditorResizeService;
   }
 });
-Object.defineProperty(exports, 'SheetClipboardController', {
+Object.defineProperty(exports, "SheetClipboardController", {
   enumerable: true,
   get: function () {
     return SheetClipboardController;
   }
 });
-Object.defineProperty(exports, 'SheetClipboardService', {
+Object.defineProperty(exports, "SheetClipboardService", {
   enumerable: true,
   get: function () {
     return SheetClipboardService;
   }
 });
-Object.defineProperty(exports, 'SheetContextMenuMobileRenderController', {
+Object.defineProperty(exports, "SheetContextMenuMobileRenderController", {
   enumerable: true,
   get: function () {
     return SheetContextMenuMobileRenderController;
@@ -36641,7 +36737,7 @@ exports.SheetPasteCommand = SheetPasteCommand;
 exports.SheetPasteFormatCommand = SheetPasteFormatCommand;
 exports.SheetPasteShortKeyCommand = SheetPasteShortKeyCommand;
 exports.SheetPasteValueCommand = SheetPasteValueCommand;
-Object.defineProperty(exports, 'SheetPermissionCheckUIController', {
+Object.defineProperty(exports, "SheetPermissionCheckUIController", {
   enumerable: true,
   get: function () {
     return SheetPermissionCheckUIController;
@@ -36649,7 +36745,7 @@ Object.defineProperty(exports, 'SheetPermissionCheckUIController', {
 });
 exports.SheetPermissionOpenDialogOperation = SheetPermissionOpenDialogOperation;
 exports.SheetPermissionOpenPanelOperation = SheetPermissionOpenPanelOperation;
-Object.defineProperty(exports, 'SheetPermissionRenderManagerService', {
+Object.defineProperty(exports, "SheetPermissionRenderManagerService", {
   enumerable: true,
   get: function () {
     return SheetPermissionRenderManagerService;
@@ -36658,43 +36754,43 @@ Object.defineProperty(exports, 'SheetPermissionRenderManagerService', {
 exports.SheetPermissionUserManagerService = SheetPermissionUserManagerService;
 exports.SheetPrintInterceptorService = SheetPrintInterceptorService;
 exports.SheetPrintingResourceCollector = SheetPrintingResourceCollector;
-Object.defineProperty(exports, 'SheetRenderController', {
+Object.defineProperty(exports, "SheetRenderController", {
   enumerable: true,
   get: function () {
     return SheetRenderController;
   }
 });
-Object.defineProperty(exports, 'SheetScrollManagerService', {
+Object.defineProperty(exports, "SheetScrollManagerService", {
   enumerable: true,
   get: function () {
     return SheetScrollManagerService;
   }
 });
-Object.defineProperty(exports, 'SheetSelectionRenderService', {
+Object.defineProperty(exports, "SheetSelectionRenderService", {
   enumerable: true,
   get: function () {
     return SheetSelectionRenderService;
   }
 });
-Object.defineProperty(exports, 'SheetSkeletonManagerService', {
+Object.defineProperty(exports, "SheetSkeletonManagerService", {
   enumerable: true,
   get: function () {
     return SheetSkeletonManagerService;
   }
 });
-Object.defineProperty(exports, 'SheetUIController', {
+Object.defineProperty(exports, "SheetUIController", {
   enumerable: true,
   get: function () {
     return SheetUIController;
   }
 });
-Object.defineProperty(exports, 'SheetsRenderService', {
+Object.defineProperty(exports, "SheetsRenderService", {
   enumerable: true,
   get: function () {
     return SheetsRenderService;
   }
 });
-Object.defineProperty(exports, 'SheetsScrollRenderController', {
+Object.defineProperty(exports, "SheetsScrollRenderController", {
   enumerable: true,
   get: function () {
     return SheetsScrollRenderController;
@@ -36704,7 +36800,7 @@ exports.SheetsUIMenuSchema = menuSchema;
 exports.SheetsUIPart = SheetsUIPart;
 exports.ShowMenuListCommand = ShowMenuListCommand;
 exports.SidebarDefinedNameOperation = SidebarDefinedNameOperation;
-Object.defineProperty(exports, 'StatusBarController', {
+Object.defineProperty(exports, "StatusBarController", {
   enumerable: true,
   get: function () {
     return StatusBarController;
@@ -36712,13 +36808,13 @@ Object.defineProperty(exports, 'StatusBarController', {
 });
 exports.StatusBarService = StatusBarService;
 exports.UNIVER_SHEET_PERMISSION_USER_PART = UNIVER_SHEET_PERMISSION_USER_PART;
-Object.defineProperty(exports, 'UniverSheetsMobileUIPlugin', {
+Object.defineProperty(exports, "UniverSheetsMobileUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverSheetsMobileUIPlugin;
   }
 });
-Object.defineProperty(exports, 'UniverSheetsUIPlugin', {
+Object.defineProperty(exports, "UniverSheetsUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverSheetsUIPlugin;