@univerjs/sheets-ui 1.0.0-alpha.0 → 1.0.0-alpha.2

package/lib/cjs/facade.js

@@ -1276,13 +1276,14 @@ _univerjs_sheets_facade.FRange.extend(FRangeSheetsUIMixin);
 * @returns {string} The transformed component key.
 */
 function transformComponentKey(component, componentManager) {
-	const { componentKey, isVue3 } = component;
+	const { componentKey, framework } = component;
 	let key;
 	const disposableCollection = new _univerjs_core.DisposableCollection();
 	if (typeof componentKey === "string") key = componentKey;
 	else {
-		key = `External_${(0, _univerjs_core.generateRandomId)(6)}`;
-		disposableCollection.add(componentManager.register(key, componentKey, { framework: isVue3 ? "vue3" : "react" }));
+		const resolvedFramework = framework !== null && framework !== void 0 ? framework : "react";
+		key = resolvedFramework === "web-component" ? `external-${(0, _univerjs_core.generateRandomId)(6).toLowerCase()}` : `External_${(0, _univerjs_core.generateRandomId)(6)}`;
+		disposableCollection.add(componentManager.register(key, componentKey, { framework: resolvedFramework }));
 	}
 	return {
 		key,

package/lib/cjs/index.js

@@ -4064,6 +4064,7 @@ const IMAGE_MIME_TO_EXTENSION = {
 	[_univerjs_ui.FILE__WEBP_CLIPBOARD_MIME_TYPE]: "webp",
 	[_univerjs_ui.FILE__BMP_CLIPBOARD_MIME_TYPE]: "bmp"
 };
+const FORMULA_CLIPBOARD_MIME_TYPE = "web application/x-univer-sheets-formula";
 /**
 * This service provide hooks for sheet features to supplement content or modify behavior of clipboard.
 */
@@ -4129,6 +4130,7 @@ let SheetClipboardService = class SheetClipboardService extends _univerjs_core.D
 			return (_h$onBeforeCopy = h.onBeforeCopy) === null || _h$onBeforeCopy === void 0 ? void 0 : _h$onBeforeCopy.call(h, workbookId, worksheetId, range, copyType);
 		});
 		const copyContent = this._generateCopyContent(workbookId, worksheetId, range, hooks, copyHookType);
+		if (copyContent && copyType === "COPY") copyContent.formulaClipboardPayload = this._generateFormulaClipboardPayload(workbookId, worksheetId, range, copyContent, hooks);
 		hooks.forEach((h) => {
 			var _h$onAfterCopy;
 			return (_h$onAfterCopy = h.onAfterCopy) === null || _h$onAfterCopy === void 0 ? void 0 : _h$onAfterCopy.call(h);
@@ -4149,7 +4151,7 @@ let SheetClipboardService = class SheetClipboardService extends _univerjs_core.D
 			copyHookType
 		});
 		if (!copyContent) return false;
-		const { html, plain, matrixFragment, copyId, discreteRange } = copyContent;
+		const { html, plain, matrixFragment, copyId, discreteRange, formulaClipboardPayload } = copyContent;
 		this._copyContentCache.set(copyId, {
 			unitId: workbook.getUnitId(),
 			subUnitId: worksheet.getSheetId(),
@@ -4157,7 +4159,7 @@ let SheetClipboardService = class SheetClipboardService extends _univerjs_core.D
 			matrix: matrixFragment,
 			copyType
 		});
-		await this._clipboardInterfaceService.write(plain, html);
+		await this._clipboardInterfaceService.write(plain, html, formulaClipboardPayload ? { [FORMULA_CLIPBOARD_MIME_TYPE]: formulaClipboardPayload } : void 0);
 		this._markSelectionService.removeAllShapes();
 		const style = createCopyPasteSelectionStyle(this._themeService);
 		this._copyMarkId = this._markSelectionService.addShape({
@@ -4173,6 +4175,7 @@ let SheetClipboardService = class SheetClipboardService extends _univerjs_core.D
 		const types = item.types;
 		const text = types.indexOf(_univerjs_ui.PLAIN_TEXT_CLIPBOARD_MIME_TYPE) !== -1 ? await item.getType(_univerjs_ui.PLAIN_TEXT_CLIPBOARD_MIME_TYPE).then((blob) => blob && blob.text()) : "";
 		const html = types.indexOf(_univerjs_ui.HTML_CLIPBOARD_MIME_TYPE) !== -1 ? await item.getType(_univerjs_ui.HTML_CLIPBOARD_MIME_TYPE).then((blob) => blob && blob.text()) : "";
+		const formulaClipboardPayload = types.indexOf("web application/x-univer-sheets-formula") !== -1 ? await item.getType(FORMULA_CLIPBOARD_MIME_TYPE).then((blob) => blob && blob.text()).catch(() => "") : "";
 		const imageIndex = types.findIndex((type) => _univerjs_ui.imageMimeTypeSet.has(type));
 		const shouldUseHTMLPaste = imageIndex === -1 || !htmlContainsImage(html);
 		if (html && shouldUseHTMLPaste) {
@@ -4181,7 +4184,7 @@ let SheetClipboardService = class SheetClipboardService extends _univerjs_core.D
 				title: this._localeService.t("sheets-ui.clipboard.shortCutNotify.title"),
 				content: this._localeService.t("sheets-ui.clipboard.shortCutNotify.useShortCutInstead")
 			});
-			return this._pasteHTML(html, pasteType);
+			return this._pasteHTML(html, pasteType, formulaClipboardPayload);
 		}
 		if (imageIndex !== -1) {
 			const imageMimeType = types[imageIndex];
@@ -4199,10 +4202,10 @@ let SheetClipboardService = class SheetClipboardService extends _univerjs_core.D
 	async pasteByCopyId(copyId, pasteType = PREDEFINED_HOOK_NAME_PASTE.DEFAULT_PASTE) {
 		return this._pasteInternal(copyId, pasteType);
 	}
-	async legacyPaste(html, text, files) {
+	async legacyPaste(html, text, files, formulaClipboardPayload) {
 		const isFromExcel = htmlIsFromExcel(html !== null && html !== void 0 ? html : "");
 		if (files && !isFromExcel) return this._pasteFiles(files, PREDEFINED_HOOK_NAME_PASTE.DEFAULT_PASTE);
-		else if (html) return this._pasteHTML(html, PREDEFINED_HOOK_NAME_PASTE.DEFAULT_PASTE);
+		else if (html) return this._pasteHTML(html, PREDEFINED_HOOK_NAME_PASTE.DEFAULT_PASTE, formulaClipboardPayload);
 		else if (text) if (/[\n\t]/.test(text)) return this._pasteHTML(convertTextToTable(text), PREDEFINED_HOOK_NAME_PASTE.DEFAULT_PASTE);
 		else return this._pastePlainText(text, PREDEFINED_HOOK_NAME_PASTE.DEFAULT_PASTE);
 		else return this._pasteUnrecognized();
@@ -4309,6 +4312,40 @@ let SheetClipboardService = class SheetClipboardService extends _univerjs_core.D
 			discreteRange
 		};
 	}
+	_generateFormulaClipboardPayload(unitId, subUnitId, range, copyContent, hooks) {
+		if (this._hasFilteredRows(unitId, subUnitId, range, hooks)) return;
+		const { startRow, startColumn, endRow, endColumn } = range;
+		const rowCount = endRow - startRow + 1;
+		const columnCount = endColumn - startColumn + 1;
+		const formulaOnlyHook = hooks.find((hook) => hook.id === PREDEFINED_HOOK_NAME_COPY.SPECIAL_COPY_FORMULA_ONLY);
+		const formulas = [];
+		for (let row = 0; row < rowCount; row++) for (let column = 0; column < columnCount; column++) {
+			var _formulaOnlyHook$onCo, _copyContent$matrixFr;
+			const formula = (formulaOnlyHook === null || formulaOnlyHook === void 0 || (_formulaOnlyHook$onCo = formulaOnlyHook.onCopyCellContent) === null || _formulaOnlyHook$onCo === void 0 ? void 0 : _formulaOnlyHook$onCo.call(formulaOnlyHook, startRow + row, startColumn + column)) || ((_copyContent$matrixFr = copyContent.matrixFragment.getValue(row, column)) === null || _copyContent$matrixFr === void 0 ? void 0 : _copyContent$matrixFr.f);
+			if (typeof formula === "string" && (0, _univerjs_core.isFormulaString)(formula)) formulas.push({
+				row,
+				column,
+				f: formula
+			});
+		}
+		if (!formulas.length) return;
+		return JSON.stringify({
+			rowCount,
+			columnCount,
+			origin: {
+				row: startRow,
+				column: startColumn
+			},
+			formulas
+		});
+	}
+	_hasFilteredRows(unitId, subUnitId, range, hooks) {
+		return hooks.some((hook) => {
+			var _hook$getFilteredOutR;
+			const rows = (_hook$getFilteredOutR = hook.getFilteredOutRows) === null || _hook$getFilteredOutR === void 0 ? void 0 : _hook$getFilteredOutR.call(hook, unitId, subUnitId, range);
+			return !!(rows === null || rows === void 0 ? void 0 : rows.length);
+		});
+	}
 	_notifyClipboardHook() {
 		this._clipboardHooks$.next(this._clipboardHooks);
 	}
@@ -4375,15 +4412,49 @@ let SheetClipboardService = class SheetClipboardService extends _univerjs_core.D
 			return (_h$onPasteUnrecognize = h.onPasteUnrecognized) === null || _h$onPasteUnrecognize === void 0 ? void 0 : _h$onPasteUnrecognize.call(h, payload);
 		});
 	}
-	async _pasteHTML(html, pasteType) {
+	async _pasteHTML(html, pasteType, formulaClipboardPayload) {
 		const copyId = extractId(html);
 		if (copyId && this._copyContentCache.get(copyId)) return this._pasteInternal(copyId, pasteType);
-		return this._pasteExternal(html, pasteType);
+		return this._pasteExternal(html, pasteType, formulaClipboardPayload);
 	}
-	async _pasteExternal(html, pasteType) {
-		var _this$_univerInstance;
+	async _pasteExternal(html, pasteType, formulaClipboardPayload) {
 		const { rowProperties, colProperties, cellMatrix } = this._htmlToUSM.convert(html);
 		if (!cellMatrix) return false;
+		const sourceRange = formulaClipboardPayload ? this._applyFormulaClipboardPayload(cellMatrix, formulaClipboardPayload) : void 0;
+		return this._pasteExternalData({
+			rowProperties,
+			colProperties,
+			cellMatrix
+		}, pasteType, sourceRange);
+	}
+	_applyFormulaClipboardPayload(cellMatrix, text) {
+		let payload;
+		try {
+			payload = JSON.parse(text);
+		} catch {
+			return;
+		}
+		if (!payload || !payload.origin || !Array.isArray(payload.formulas) || payload.rowCount <= 0 || payload.columnCount <= 0) return;
+		cellMatrix.setValue(payload.rowCount - 1, payload.columnCount - 1, {
+			...(0, _univerjs_core.getEmptyCell)(),
+			...cellMatrix.getValue(payload.rowCount - 1, payload.columnCount - 1)
+		});
+		payload.formulas.forEach((formula) => {
+			if ((0, _univerjs_core.isFormulaString)(formula.f) && formula.row >= 0 && formula.row < payload.rowCount && formula.column >= 0 && formula.column < payload.columnCount) cellMatrix.setValue(formula.row, formula.column, {
+				...(0, _univerjs_core.getEmptyCell)(),
+				...cellMatrix.getValue(formula.row, formula.column),
+				f: formula.f
+			});
+		});
+		return {
+			rows: Array.from({ length: payload.rowCount }, (_, index) => payload.origin.row + index),
+			cols: Array.from({ length: payload.columnCount }, (_, index) => payload.origin.column + index)
+		};
+	}
+	_pasteExternalData(data, pasteType, sourceRange) {
+		var _this$_univerInstance;
+		const { rowProperties, colProperties, cellMatrix } = data;
+		if (!cellMatrix) return false;
 		const pasteTarget = this._getPastedRange(cellMatrix);
 		if (!pasteTarget) return false;
 		const worksheet = (_this$_univerInstance = this._univerInstanceService.getUniverSheetInstance(pasteTarget.unitId)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getSheetBySheetId(pasteTarget.subUnitId);
@@ -4397,11 +4468,18 @@ let SheetClipboardService = class SheetClipboardService extends _univerjs_core.D
 				return false;
 			}
 		}
+		const source = sourceRange ? {
+			range: sourceRange,
+			unitId: pasteTarget.unitId,
+			subUnitId: pasteTarget.subUnitId,
+			copyType: "COPY",
+			copyId: ""
+		} : void 0;
 		return this._pasteUSM({
 			rowProperties,
 			colProperties,
 			cellMatrix
-		}, pasteTarget, pasteType);
+		}, pasteTarget, pasteType, source);
 	}
 	async _pasteInternal(copyId, pasteType) {
 		var _this$_univerInstance2, _this$_univerInstance3;
@@ -5033,8 +5111,8 @@ const SheetPasteShortKeyCommand = {
 	type: _univerjs_core.CommandType.COMMAND,
 	handler: async (accessor, params) => {
 		const clipboardService = accessor.get(ISheetClipboardService);
-		const { htmlContent, textContent, files } = params;
-		clipboardService.legacyPaste(htmlContent, textContent, files);
+		const { htmlContent, textContent, files, formulaClipboardPayload } = params;
+		clipboardService.legacyPaste(htmlContent, textContent, files, formulaClipboardPayload);
 		return true;
 	}
 };
@@ -9390,6 +9468,7 @@ let SheetCellEditorResizeService = class SheetCellEditorResizeService extends _u
 		if (documentDataModel == null) return;
 		const documentSkeleton = this._getEditorSkeleton();
 		if (!documentSkeleton) return;
+		documentSkeleton.resetInitialWidth();
 		const info = this._predictingSize(position, canvasOffset, documentSkeleton, documentLayoutObject, scaleX, scaleY);
 		if (!info || info.actualWidth <= 0) return;
 		let { actualWidth, actualHeight } = info;
@@ -10814,6 +10893,9 @@ let EditingRenderController = class EditingRenderController extends _univerjs_co
 		this._contextService.setContextValue(_univerjs_core.FOCUSING_EDITOR_BUT_HIDDEN, false);
 		this._contextService.setContextValue(_univerjs_core.FOCUSING_FX_BAR_EDITOR, false);
 		this._cellEditorManagerService.setState({ show: param.visible });
+		const formulaBarEditor = this._editorService.getEditor(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+		formulaBarEditor === null || formulaBarEditor === void 0 || formulaBarEditor.setSelectionRanges([], false);
+		formulaBarEditor === null || formulaBarEditor === void 0 || formulaBarEditor.blur();
 		const editorObject = this._getEditorObject();
 		editorObject === null || editorObject === void 0 || (_editorObject$scene$g = editorObject.scene.getViewport(_univerjs_docs_ui.VIEWPORT_KEY.VIEW_MAIN)) === null || _editorObject$scene$g === void 0 || _editorObject$scene$g.scrollToViewportPos({
 			viewportScrollX: 0,
@@ -11412,7 +11494,7 @@ const shouldRemoveShapeIds = [
 	_univerjs_sheets.MoveColsMutation.id
 ];
 let SheetClipboardController = class SheetClipboardController extends _univerjs_core.RxDisposable {
-	constructor(_injector, _instanceService, _renderManagerService, _commandService, _contextService, _configService, _sheetClipboardService, _messageService, _localService, _uiPartsService) {
+	constructor(_injector, _instanceService, _renderManagerService, _commandService, _contextService, _configService, _sheetClipboardService, _clipboardInterfaceService, _messageService, _localService, _uiPartsService) {
 		super();
 		this._injector = _injector;
 		this._instanceService = _instanceService;
@@ -11421,6 +11503,7 @@ let SheetClipboardController = class SheetClipboardController extends _univerjs_
 		this._contextService = _contextService;
 		this._configService = _configService;
 		this._sheetClipboardService = _sheetClipboardService;
+		this._clipboardInterfaceService = _clipboardInterfaceService;
 		this._messageService = _messageService;
 		this._localService = _localService;
 		this._uiPartsService = _uiPartsService;
@@ -11437,7 +11520,7 @@ let SheetClipboardController = class SheetClipboardController extends _univerjs_
 	_pasteWithDoc() {
 		var _this$_renderManagerS;
 		const sheetPasteShortKeyFn = (docSelectionRenderService) => {
-			docSelectionRenderService.onPaste$.pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((config) => {
+			docSelectionRenderService.onPaste$.pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe(async (config) => {
 				var _clipboardEvent$clipb, _clipboardEvent$clipb2;
 				if (!whenSheetEditorFocused(this._contextService)) return;
 				config.event.preventDefault();
@@ -11445,10 +11528,12 @@ let SheetClipboardController = class SheetClipboardController extends _univerjs_
 				const htmlContent = (_clipboardEvent$clipb = clipboardEvent.clipboardData) === null || _clipboardEvent$clipb === void 0 ? void 0 : _clipboardEvent$clipb.getData("text/html");
 				const textContent = (_clipboardEvent$clipb2 = clipboardEvent.clipboardData) === null || _clipboardEvent$clipb2 === void 0 ? void 0 : _clipboardEvent$clipb2.getData("text/plain");
 				const files = this._resolveClipboardFiles(clipboardEvent.clipboardData);
+				const formulaClipboardPayload = await this._readFormulaClipboardPayload();
 				this._commandService.executeCommand(SheetPasteShortKeyCommand.id, {
 					htmlContent,
 					textContent,
-					files
+					files,
+					formulaClipboardPayload
 				});
 			});
 			docSelectionRenderService === null || docSelectionRenderService === void 0 || docSelectionRenderService.onKeydown$.subscribe((event) => {
@@ -11470,6 +11555,16 @@ let SheetClipboardController = class SheetClipboardController extends _univerjs_
 		const files = Array.from(clipboardData.items).map((item) => item.kind === "file" ? item.getAsFile() : void 0).filter(Boolean);
 		return files.length > 0 ? files : void 0;
 	}
+	async _readFormulaClipboardPayload() {
+		if (!this._clipboardInterfaceService.supportClipboard) return;
+		try {
+			const item = (await this._clipboardInterfaceService.read()).find((clipboardItem) => clipboardItem.types.includes(FORMULA_CLIPBOARD_MIME_TYPE));
+			if (!item) return;
+			return (await item.getType(FORMULA_CLIPBOARD_MIME_TYPE)).text();
+		} catch {
+			return;
+		}
+	}
 	_init() {
 		[
 			SheetCopyCommand,
@@ -11924,9 +12019,10 @@ SheetClipboardController = __decorate([
 	__decorateParam(4, _univerjs_core.IContextService),
 	__decorateParam(5, _univerjs_core.IConfigService),
 	__decorateParam(6, ISheetClipboardService),
-	__decorateParam(7, _univerjs_ui.IMessageService),
-	__decorateParam(8, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
-	__decorateParam(9, _univerjs_ui.IUIPartsService)
+	__decorateParam(7, _univerjs_ui.IClipboardInterfaceService),
+	__decorateParam(8, _univerjs_ui.IMessageService),
+	__decorateParam(9, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
+	__decorateParam(10, _univerjs_ui.IUIPartsService)
 ], SheetClipboardController);
 
 //#endregion
@@ -12140,7 +12236,7 @@ let FormulaEditorController = class FormulaEditorController extends _univerjs_co
 			if (this._contextService.getContextValue(_univerjs_core.FOCUSING_EDITOR_BUT_HIDDEN) && !this._contextService.getContextValue(_univerjs_core.EDITOR_ACTIVATED)) {
 				var _formulaEditorDataMod;
 				this._univerInstanceService.setCurrentUnitForType(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
-				const formulaEditorDataModel = this._univerInstanceService.getUniverDocInstance(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+				const formulaEditorDataModel = this._univerInstanceService.getUnit(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, _univerjs_core.UniverInstanceType.UNIVER_DOC);
 				if (this._editorBridgeService.isVisible().visible === false) this._commandService.syncExecuteCommand(SetCellEditVisibleOperation.id, {
 					visible: true,
 					eventType: _univerjs_engine_render.DeviceInputEventType.PointerDown,
@@ -12180,7 +12276,7 @@ let FormulaEditorController = class FormulaEditorController extends _univerjs_co
 		this.disposeWithMe((0, rxjs.combineLatest)([this._formulaEditorManagerService.position$, addFormulaBar$]).subscribe(([position]) => {
 			if (!position) return this._clearScheduledCallback();
 			const editorObject = getEditorObject(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, this._renderManagerService);
-			const formulaEditorDataModel = this._univerInstanceService.getUniverDocInstance(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+			const formulaEditorDataModel = this._univerInstanceService.getUnit(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, _univerjs_core.UniverInstanceType.UNIVER_DOC);
 			if (editorObject == null || formulaEditorDataModel == null) return this._clearScheduledCallback();
 			const { width, height } = position;
 			if (width === 0 || height === 0) return this._clearScheduledCallback();
@@ -12199,7 +12295,7 @@ let FormulaEditorController = class FormulaEditorController extends _univerjs_co
 		const position = this._formulaEditorManagerService.getPosition();
 		const skeleton = (_this$_renderManagerS = this._renderManagerService.getRenderById(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
 		const editorObject = this._renderManagerService.getRenderById(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
-		const formulaEditorDataModel = this._univerInstanceService.getUniverDocInstance(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+		const formulaEditorDataModel = this._univerInstanceService.getUnit(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, _univerjs_core.UniverInstanceType.UNIVER_DOC);
 		if (skeleton == null || position == null || editorObject == null || formulaEditorDataModel == null) return;
 		const { marginTop = 0, marginBottom = 0 } = formulaEditorDataModel.getSnapshot().documentStyle;
 		const { scene, mainComponent } = editorObject;
@@ -15202,7 +15298,7 @@ let SheetRenderController = class SheetRenderController extends _univerjs_core.R
 			this._renderFrameTags = {};
 		}));
 		this.disposeWithMe(engine.endFrame$.subscribe(() => {
-			if (this._renderFrameTimeMetric && Object.keys(this._renderFrameTimeMetric).filter((key) => key.startsWith(_univerjs_engine_render.SHEET_EXTENSION_PREFIX)).length > 0) this._afterRenderMetric$.next({
+			if (this._renderFrameTimeMetric && Object.keys(this._renderFrameTimeMetric).some((key) => key.startsWith(_univerjs_engine_render.SHEET_EXTENSION_PREFIX))) this._afterRenderMetric$.next({
 				frameTimeMetric: this._renderFrameTimeMetric,
 				tags: this._renderFrameTags
 			});
@@ -17993,7 +18089,7 @@ function ShowRowMenuItemFactory(accessor) {
 	return {
 		id: _univerjs_sheets.SetSelectedRowsVisibleCommand.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
-		icon: "EyeOutlineIcon",
+		icon: "EyeIcon",
 		title: "sheets-ui.rightClick.showHideRow",
 		hidden$: deriveStateFromActiveSheet$(univerInstanceService, true, ({ worksheet }) => new rxjs.Observable((subscriber) => {
 			function hasHiddenRowsInSelections() {
@@ -18029,7 +18125,7 @@ function ShowColMenuItemFactory(accessor) {
 	return {
 		id: _univerjs_sheets.SetSelectedColsVisibleCommand.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
-		icon: "EyeOutlineIcon",
+		icon: "EyeIcon",
 		title: "sheets-ui.rightClick.showHideColumn",
 		hidden$: deriveStateFromActiveSheet$(univerInstanceService, true, ({ worksheet }) => new rxjs.Observable((subscriber) => {
 			function hasHiddenColsInSelections() {
@@ -19697,10 +19793,11 @@ function DefinedNameOverlay({ search, isInputEvent }) {
 	const definedNamesService = (0, _univerjs_ui.useDependency)(_univerjs_engine_formula.IDefinedNamesService);
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
 	const sidebarService = (0, _univerjs_ui.useDependency)(_univerjs_ui.ISidebarService);
+	const direction = localeService.getDirection();
 	const unitId = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET).getUnitId();
 	const getDefinedNameMap = () => {
 		const definedNameMap = definedNamesService.getDefinedNameMap(unitId);
-		if (definedNameMap) return Array.from(Object.values(definedNameMap));
+		if (definedNameMap) return Object.values(definedNameMap);
 		return [];
 	};
 	const [definedNames, setDefinedNames] = (0, react.useState)(getDefinedNameMap());
@@ -19751,7 +19848,9 @@ function DefinedNameOverlay({ search, isInputEvent }) {
 		definedNamesService.focusRange(unitId, id);
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-w-[300px]",
+		"data-u-comp": "defined-name-overlay",
+		dir: direction,
+		className: "univer-w-[300px] rtl:univer-text-right",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: listContainerRef,
 			className: (0, _univerjs_design.clsx)("univer-max-h-[360px] univer-min-h-0 univer-overflow-y-auto", _univerjs_design.scrollbarClassName, { "univer-min-h-[30px]": filteredDefinedNames.length > 0 }),
@@ -19765,13 +19864,16 @@ function DefinedNameOverlay({ search, isInputEvent }) {
 							focusDefinedName(definedName);
 						},
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-justify-between univer-gap-2 univer-py-1", _univerjs_design.borderBottomClassName),
+							"data-u-comp": "defined-name-overlay-row",
+							className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-gap-2 univer-py-1 rtl:univer-flex-row-reverse", _univerjs_design.borderBottomClassName),
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-w-[50%] univer-flex-shrink-0 univer-truncate univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
+								"data-u-comp": "defined-name-overlay-name",
+								className: "univer-min-w-0 univer-flex-1 univer-basis-0 univer-truncate univer-text-sm univer-text-gray-600 rtl:univer-text-right dark:!univer-text-gray-200",
 								title: definedName.name,
 								children: definedName.name
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-w-[50%] univer-flex-shrink-0 univer-truncate univer-text-xs univer-text-gray-400",
+								"data-u-comp": "defined-name-overlay-reference",
+								className: "univer-min-w-0 univer-flex-1 univer-basis-0 univer-truncate univer-text-xs univer-text-gray-400 rtl:univer-text-right",
 								title: definedName.formulaOrRefString,
 								children: definedName.formulaOrRefString
 							})]
@@ -19780,7 +19882,8 @@ function DefinedNameOverlay({ search, isInputEvent }) {
 				})
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-cursor-pointer univer-p-2 univer-transition-colors univer-duration-200 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-600",
+			"data-u-comp": "defined-name-overlay-footer",
+			className: "univer-cursor-pointer univer-p-2 univer-transition-colors univer-duration-200 hover:univer-bg-gray-100 rtl:univer-text-right dark:hover:!univer-bg-gray-600",
 			onClick: openSlider,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-mb-2 univer-text-sm univer-font-semibold univer-text-gray-600 dark:!univer-text-gray-200",
@@ -19815,7 +19918,7 @@ function DefinedName({ disable }) {
 	const inputRef = (0, react.useRef)(null);
 	const getDefinedNameMap = () => {
 		const definedNameMap = definedNamesService.getDefinedNameMap(unitId);
-		if (definedNameMap) return Array.from(Object.values(definedNameMap));
+		if (definedNameMap) return Object.values(definedNameMap);
 		return [];
 	};
 	const focusDefinedName = async (definedName) => {
@@ -19968,7 +20071,7 @@ function DefinedName({ disable }) {
 		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-pl-1.5 univer-pr-5 univer-text-gray-900 focus:univer-outline-none dark:!univer-border-r-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-white", _univerjs_design.borderRightClassName, { "univer-cursor-not-allowed": disable }),
+			className: (0, _univerjs_design.clsx)("univer-box-border univer-size-full univer-appearance-none univer-pl-1.5 univer-pr-5 univer-text-gray-900 focus:univer-outline-none rtl:univer-pl-5 rtl:univer-pr-1.5 dark:!univer-border-r-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-white", _univerjs_design.borderRightClassName, { "univer-cursor-not-allowed": disable }),
 			type: "text",
 			value: inputValue,
 			onChange: handleChangeSelection,
@@ -19987,7 +20090,7 @@ function DefinedName({ disable }) {
 			onOpenChange: setOpen,
 			onOpenAutoFocus: (e) => e.preventDefault(),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-				className: (0, _univerjs_design.clsx)("univer-absolute univer-right-0 univer-top-0 univer-flex univer-h-full univer-cursor-pointer univer-items-center univer-justify-center univer-px-1 univer-transition-colors univer-duration-200 hover:univer-bg-gray-100 dark:!univer-text-white dark:hover:!univer-bg-gray-800", { "univer-cursor-not-allowed univer-text-gray-300 hover:univer-bg-transparent dark:!univer-text-gray-700": disable }),
+				className: (0, _univerjs_design.clsx)("univer-absolute univer-right-0 univer-top-0 univer-flex univer-h-full univer-cursor-pointer univer-items-center univer-justify-center univer-px-1 univer-transition-colors univer-duration-200 hover:univer-bg-gray-100 rtl:univer-left-0 rtl:univer-right-auto dark:!univer-text-white dark:hover:!univer-bg-gray-800", { "univer-cursor-not-allowed univer-text-gray-300 hover:univer-bg-transparent dark:!univer-text-gray-700": disable }),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})
 			})
 		})]
@@ -21769,15 +21872,16 @@ const SheetBar = () => {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetBarTabs, {}),
 			(!leftScrollState || !rightScrollState) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-relative univer-flex univer-items-center univer-px-2 after:univer-absolute after:univer-right-0 after:univer-top-1/2 after:univer-h-4 after:univer-w-px after:-univer-translate-y-1/2 after:univer-bg-gray-200 after:univer-content-[\"\"]",
+				"data-u-comp": "sheet-bar-scroll-buttons",
+				className: "univer-relative univer-flex univer-items-center univer-px-2 after:univer-absolute after:univer-right-0 after:univer-top-1/2 after:univer-h-4 after:univer-w-px after:-univer-translate-y-1/2 after:univer-bg-gray-200 after:univer-content-[\"\"] rtl:univer-flex-row-reverse rtl:after:univer-left-0 rtl:after:univer-right-auto",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetBarButton, {
 					disabled: leftScrollState,
 					onClick: handleScrollLeft,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreIcon, { className: "univer-rotate-180" })
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreLeftIcon, {})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetBarButton, {
 					disabled: rightScrollState,
 					onClick: handleScrollRight,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreIcon, {})
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreRightIcon, {})
 				})]
 			})
 		]
@@ -22675,7 +22779,7 @@ const useHighlightRange = (ranges = []) => {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-ui";
-var version = "1.0.0-alpha.0";
+var version = "1.0.0-alpha.2";
 
 //#endregion
 //#region src/controllers/cell-alert.controller.ts
@@ -24086,7 +24190,9 @@ function BorderPanel(props) {
 	var _value$color;
 	const iconManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.IconManager);
 	const borderStyleManagerService = (0, _univerjs_ui.useDependency)(_univerjs_sheets.BorderStyleManagerService);
-	const { isAllValuesSame, value: currentValue } = (0, _univerjs_ui.useDependency)(_univerjs_sheets.SheetsSelectionsService).getCellStylesProperty("bd");
+	const selectionManagerService = (0, _univerjs_ui.useDependency)(_univerjs_sheets.SheetsSelectionsService);
+	const { direction } = (0, react.useContext)(_univerjs_design.ConfigContext);
+	const { isAllValuesSame, value: currentValue } = selectionManagerService.getCellStylesProperty("bd");
 	const color = isAllValuesSame ? getBorderColor(currentValue) : void 0;
 	const type = isAllValuesSame ? getBorderStyle(currentValue) : void 0;
 	const { onChange, value } = props;
@@ -24101,6 +24207,7 @@ function BorderPanel(props) {
 		return Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "univer-fill-primary-600" });
 	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		dir: direction,
 		className: "univer-box-border univer-grid univer-gap-2 univer-p-1.5",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -24495,7 +24602,7 @@ const DefinedNameContainer = () => {
 	const getDefinedNameMap = () => {
 		if (!unitId) return [];
 		const definedNameMap = definedNamesService.getDefinedNameMap(unitId);
-		if (definedNameMap) return Array.from(Object.values(definedNameMap));
+		if (definedNameMap) return Object.values(definedNameMap);
 		return [];
 	};
 	const [editState, setEditState] = (0, react.useState)(false);
@@ -25976,7 +26083,7 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 			DeleteRowDoubleIcon: _univerjs_icons.DeleteRowDoubleIcon,
 			DownBorderDoubleIcon: _univerjs_icons.DownBorderDoubleIcon,
 			DownloadImageIcon: _univerjs_icons.DownloadImageIcon,
-			EyeOutlineIcon: _univerjs_icons.EyeOutlineIcon,
+			EyeIcon: _univerjs_icons.EyeIcon,
 			FontColorDoubleIcon: _univerjs_icons.FontColorDoubleIcon,
 			FontSizeIncreaseIcon: _univerjs_icons.FontSizeIncreaseIcon,
 			FontSizeReduceIcon: _univerjs_icons.FontSizeReduceIcon,
@@ -26151,7 +26258,7 @@ const formulaEditorStyle = {
 	}
 };
 let EditorDataSyncController = class EditorDataSyncController extends _univerjs_core.Disposable {
-	constructor(_univerInstanceService, _renderManagerService, _editorBridgeService, _commandService, _rangeProtectionRuleModel, _worksheetProtectionRuleModel, _formulaEditorController, _formulaEditorManagerService) {
+	constructor(_univerInstanceService, _renderManagerService, _editorBridgeService, _commandService, _rangeProtectionRuleModel, _worksheetProtectionRuleModel, _formulaEditorController, _formulaEditorManagerService, _contextService) {
 		super();
 		this._univerInstanceService = _univerInstanceService;
 		this._renderManagerService = _renderManagerService;
@@ -26161,11 +26268,13 @@ let EditorDataSyncController = class EditorDataSyncController extends _univerjs_
 		this._worksheetProtectionRuleModel = _worksheetProtectionRuleModel;
 		this._formulaEditorController = _formulaEditorController;
 		this._formulaEditorManagerService = _formulaEditorManagerService;
+		this._contextService = _contextService;
 		this._initialize();
 	}
 	_initialize() {
 		this._syncFormulaEditorContent();
 		this._commandExecutedListener();
+		this._syncFormulaRefRenderStyleOnFocusChange();
 	}
 	_getEditorViewModel(unitId) {
 		var _this$_renderManagerS;
@@ -26251,6 +26360,7 @@ let EditorDataSyncController = class EditorDataSyncController extends _univerjs_
 			unitId,
 			syncer: parmas.unitId
 		});
+		this._checkAndSetRenderStyleConfig(docDataModel);
 		docViewModel.reset(docDataModel);
 		skeleton.calculate();
 		if (INCLUDE_LIST.includes(unitId)) {
@@ -26282,27 +26392,54 @@ let EditorDataSyncController = class EditorDataSyncController extends _univerjs_
 		}
 		if (unitId === _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY) this._formulaEditorController.autoScroll();
 	}
+	_syncFormulaRefRenderStyleOnFocusChange() {
+		this.disposeWithMe(this._contextService.subscribeContextValue$(_univerjs_core.FOCUSING_FX_BAR_EDITOR).subscribe(() => {
+			this._refreshRenderStyleConfig(_univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY);
+			this._refreshRenderStyleConfig(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+		}));
+	}
+	_refreshRenderStyleConfig(unitId) {
+		var _currentRender$mainCo3;
+		const currentRender = this._renderManagerService.getRenderById(unitId);
+		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const docDataModel = this._univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC);
+		const docViewModel = this._getEditorViewModel(unitId);
+		if (currentRender == null || skeleton == null || docDataModel == null || docViewModel == null) return;
+		this._checkAndSetRenderStyleConfig(docDataModel);
+		docViewModel.reset(docDataModel);
+		skeleton.calculate();
+		(_currentRender$mainCo3 = currentRender.mainComponent) === null || _currentRender$mainCo3 === void 0 || _currentRender$mainCo3.makeDirty();
+		if (unitId === _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY) this._formulaEditorController.autoScroll();
+	}
 	_checkAndSetRenderStyleConfig(documentDataModel) {
-		var _body$dataStream;
+		var _snapshot$body$dataSt, _snapshot$body;
 		const snapshot = documentDataModel.getSnapshot();
-		const { body } = snapshot;
-		if (snapshot.id !== _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY) return;
-		snapshot.documentStyle = formulaEditorStyle;
+		if (snapshot.id !== _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY && snapshot.id !== _univerjs_core.DOCS_NORMAL_EDITOR_UNIT_ID_KEY) return;
+		const isFormulaBar = snapshot.id === _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY;
+		if (isFormulaBar) snapshot.documentStyle = formulaEditorStyle;
+		else {
+			var _snapshot$documentSty;
+			(_snapshot$documentSty = snapshot.documentStyle) !== null && _snapshot$documentSty !== void 0 || (snapshot.documentStyle = {});
+		}
 		let renderConfig = snapshot.documentStyle.renderConfig;
 		if (renderConfig == null) {
 			renderConfig = {};
 			snapshot.documentStyle.renderConfig = renderConfig;
 		}
-		const position = this._formulaEditorManagerService.getPosition();
-		if (position) {
+		const position = isFormulaBar ? this._formulaEditorManagerService.getPosition() : null;
+		if (isFormulaBar && position) {
 			const width = position.width;
 			snapshot.documentStyle.pageSize = {
 				width,
 				height: Infinity
 			};
 		}
-		if (((_body$dataStream = body === null || body === void 0 ? void 0 : body.dataStream) !== null && _body$dataStream !== void 0 ? _body$dataStream : "").startsWith("=")) renderConfig.isRenderStyle = _univerjs_core.BooleanNumber.TRUE;
-		else renderConfig.isRenderStyle = _univerjs_core.BooleanNumber.FALSE;
+		if (!((_snapshot$body$dataSt = (_snapshot$body = snapshot.body) === null || _snapshot$body === void 0 ? void 0 : _snapshot$body.dataStream) !== null && _snapshot$body$dataSt !== void 0 ? _snapshot$body$dataSt : "").startsWith("=")) {
+			renderConfig.isRenderStyle = isFormulaBar ? _univerjs_core.BooleanNumber.FALSE : _univerjs_core.BooleanNumber.TRUE;
+			return;
+		}
+		const isFocusFxBar = this._contextService.getContextValue(_univerjs_core.FOCUSING_FX_BAR_EDITOR);
+		renderConfig.isRenderStyle = isFormulaBar === isFocusFxBar ? _univerjs_core.BooleanNumber.TRUE : _univerjs_core.BooleanNumber.FALSE;
 	}
 	_clearParagraph(paragraphs) {
 		const newParagraphs = _univerjs_core.Tools.deepClone(paragraphs);
@@ -26318,7 +26455,8 @@ EditorDataSyncController = __decorate([
 	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets.RangeProtectionRuleModel)),
 	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets.WorksheetProtectionRuleModel)),
 	__decorateParam(6, (0, _univerjs_core.Inject)(FormulaEditorController)),
-	__decorateParam(7, IFormulaEditorManagerService)
+	__decorateParam(7, IFormulaEditorManagerService),
+	__decorateParam(8, _univerjs_core.IContextService)
 ], EditorDataSyncController);
 
 //#endregion
@@ -31085,6 +31223,7 @@ Object.defineProperty(exports, 'EditorBridgeService', {
   }
 });
 exports.ExpandSelectionCommand = ExpandSelectionCommand;
+exports.FORMULA_CLIPBOARD_MIME_TYPE = FORMULA_CLIPBOARD_MIME_TYPE;
 exports.FormatPainterStatus = FormatPainterStatus;
 Object.defineProperty(exports, 'FormulaEditorController', {
   enumerable: true,

package/lib/cjs/locale/ar-SA.js

@@ -90,9 +90,16 @@ const locale = { "sheets-ui": {
 		horizontal: "دمج أفقي",
 		cancel: "إلغاء الدمج",
 		overlappingError: "لا يمكن دمج المناطق المتداخلة",
-		partiallyError: "لا يمكن إجراء هذه العملية على خلايا مدموجة جزئياً"
+		partiallyError: "لا يمكن إجراء هذه العملية على خلايا مدموجة جزئياً",
+		confirm: {
+			warning: "تحذير",
+			dismantleMergeCellWarning: "ستؤدي هذه العملية إلى إلغاء دمج الخلايا المدمجة. هل تريد المتابعة؟"
+		}
 	},
-	filter: {},
+	filter: { confirm: {
+		error: "لا يمكن تنفيذ هذه العملية",
+		notAllowedToInsertRange: "هذه العملية غير مسموح بها لأن النطاق يحتوي على صفوف تمت تصفيتها."
+	} },
 	textWrap: {
 		overflow: "تجاوز",
 		wrap: "التفاف",
@@ -263,8 +270,8 @@ const locale = { "sheets-ui": {
 		copied: "تم النسخ"
 	},
 	shortcut: {
-		"sheet-view": "Sheet View",
-		"sheet-edit": "Sheet Edit",
+		"sheet-view": "عرض الورقة",
+		"sheet-edit": "تحرير الورقة",
 		sheet: {
 			"zoom-in": "تكبير",
 			"zoom-out": "تصغير",