@univerjs/ui 1.0.0-alpha.7 → 1.0.0-alpha.8

package/lib/cjs/index.js

@@ -58,7 +58,7 @@ function getAttributeValue(target, name) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -69,7 +69,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -82,14 +82,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.140.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.137.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -100,7 +100,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -108,7 +108,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.140.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);
@@ -860,6 +860,15 @@ var UIRuntimeScopeService = class extends _univerjs_core.Disposable {
 //#endregion
 //#region src/services/shortcut/shortcut.service.ts
 /**
+* Defines whether a Univer shortcut should yield to the browser's native behavior
+* when the keyboard event originates from an editable text element.
+*/
+let NativeTextEditorShortcutBehavior = /* @__PURE__ */ function(NativeTextEditorShortcutBehavior) {
+	NativeTextEditorShortcutBehavior[NativeTextEditorShortcutBehavior["ALLOW_NATIVE"] = 0] = "ALLOW_NATIVE";
+	NativeTextEditorShortcutBehavior[NativeTextEditorShortcutBehavior["OVERRIDE_NATIVE"] = 1] = "OVERRIDE_NATIVE";
+	return NativeTextEditorShortcutBehavior;
+}({});
+/**
 * The dependency injection identifier of the {@link IShortcutService}.
 */
 const IShortcutService = (0, _univerjs_core.createIdentifier)("ui.shortcut.service");
@@ -950,17 +959,18 @@ let ShortcutService = class ShortcutService extends _univerjs_core.Disposable {
 		if (this._layoutService && !this._layoutService.checkElementInCurrentContainers(e.target)) return;
 		const binding = this._deriveBindingFromEvent(e);
 		if (binding === null) return;
-		if (this._shouldLetEmbedTextEditorHandleNativeShortcut(e, binding)) return;
 		const shortcuts = this._shortCutMapping.get(binding);
 		if (shortcuts === void 0) return;
 		const contextService = (_this$_getRuntimeServ3 = this._getRuntimeService(e, _univerjs_core.IContextService)) !== null && _this$_getRuntimeServ3 !== void 0 ? _this$_getRuntimeServ3 : this._contextService;
-		return Array.from(shortcuts).sort((s1, s2) => {
+		const candidateShortcut = Array.from(shortcuts).sort((s1, s2) => {
 			var _s2$priority, _s1$priority;
 			return ((_s2$priority = s2.priority) !== null && _s2$priority !== void 0 ? _s2$priority : 0) - ((_s1$priority = s1.priority) !== null && _s1$priority !== void 0 ? _s1$priority : 0);
 		}).find((s) => {
-			var _s$preconditions, _s$preconditions2;
-			return (_s$preconditions = (_s$preconditions2 = s.preconditions) === null || _s$preconditions2 === void 0 ? void 0 : _s$preconditions2.call(s, contextService)) !== null && _s$preconditions !== void 0 ? _s$preconditions : true;
+			var _s$eventPreconditions, _s$eventPreconditions2, _s$preconditions, _s$preconditions2;
+			return ((_s$eventPreconditions = (_s$eventPreconditions2 = s.eventPreconditions) === null || _s$eventPreconditions2 === void 0 ? void 0 : _s$eventPreconditions2.call(s, e)) !== null && _s$eventPreconditions !== void 0 ? _s$eventPreconditions : true) && ((_s$preconditions = (_s$preconditions2 = s.preconditions) === null || _s$preconditions2 === void 0 ? void 0 : _s$preconditions2.call(s, contextService)) !== null && _s$preconditions !== void 0 ? _s$preconditions : true);
 		});
+		if (this._shouldLetEmbedTextEditorHandleNativeShortcut(e, binding) && (candidateShortcut === null || candidateShortcut === void 0 ? void 0 : candidateShortcut.nativeTextEditorBehavior) !== 1) return;
+		return candidateShortcut;
 	}
 	_getBindingFromItem(item) {
 		if (this._platformService.isMac && item.mac) return item.mac;
@@ -1939,6 +1949,7 @@ var UIPartsService = class extends _univerjs_core.Disposable {
 	constructor(..._args) {
 		super(..._args);
 		_defineProperty(this, "_componentsByPart", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_disabledUIParts", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_componentRegistered$", new rxjs.Subject());
 		_defineProperty(this, "componentRegistered$", this._componentRegistered$.asObservable());
 		_defineProperty(this, "_uiVisible", /* @__PURE__ */ new Map());
@@ -1948,20 +1959,55 @@ var UIPartsService = class extends _univerjs_core.Disposable {
 	dispose() {
 		super.dispose();
 		this._componentsByPart.clear();
+		this._disabledUIParts.clear();
 		this._uiVisible.clear();
 		this._componentRegistered$.complete();
 		this._uiVisibleChange$.complete();
 	}
 	setUIVisible(part, visible) {
+		const wasVisible = this.isUIVisible(part);
 		this._uiVisible.set(part, visible);
-		this._uiVisibleChange$.next({
+		const isVisible = this.isUIVisible(part);
+		if (wasVisible !== isVisible) this._uiVisibleChange$.next({
 			ui: part,
-			visible
+			visible: isVisible
 		});
 	}
 	isUIVisible(part) {
-		var _this$_uiVisible$get;
-		return (_this$_uiVisible$get = this._uiVisible.get(part)) !== null && _this$_uiVisible$get !== void 0 ? _this$_uiVisible$get : true;
+		var _this$_uiVisible$get, _this$_disabledUIPart;
+		return ((_this$_uiVisible$get = this._uiVisible.get(part)) !== null && _this$_uiVisible$get !== void 0 ? _this$_uiVisible$get : true) && !((_this$_disabledUIPart = this._disabledUIParts.get(part)) === null || _this$_disabledUIPart === void 0 ? void 0 : _this$_disabledUIPart.size);
+	}
+	registerDisabledUIParts(parts, disabled$) {
+		const uniqueParts = [...new Set(parts)];
+		const registration = Symbol("disabled-ui-parts");
+		let disabled = false;
+		const update = (nextDisabled) => {
+			if (disabled === nextDisabled) return;
+			disabled = nextDisabled;
+			uniqueParts.forEach((part) => {
+				var _this$_disabledUIPart2;
+				const wasVisible = this.isUIVisible(part);
+				const registrations = (_this$_disabledUIPart2 = this._disabledUIParts.get(part)) !== null && _this$_disabledUIPart2 !== void 0 ? _this$_disabledUIPart2 : /* @__PURE__ */ new Set();
+				if (disabled) {
+					registrations.add(registration);
+					this._disabledUIParts.set(part, registrations);
+				} else {
+					registrations.delete(registration);
+					if (registrations.size === 0) this._disabledUIParts.delete(part);
+				}
+				const isVisible = this.isUIVisible(part);
+				if (wasVisible !== isVisible) this._uiVisibleChange$.next({
+					ui: part,
+					visible: isVisible
+				});
+			});
+		};
+		const subscription = disabled$.subscribe(update);
+		const disposable = (0, _univerjs_core.toDisposable)(() => {
+			subscription.unsubscribe();
+			update(false);
+		});
+		return this.disposeWithMe(disposable);
 	}
 	registerComponent(part, componentFactory) {
 		const componentType = componentFactory();
@@ -2719,24 +2765,21 @@ function placeRibbonGridItems(items) {
 	const occupied = /* @__PURE__ */ new Set();
 	const placements = /* @__PURE__ */ new Map();
 	const fallbackItems = [];
-	let maxExplicitColumn = 0;
 	for (const item of items) {
 		var _layout$rowSpan, _layout$columnSpan, _layout$showLabel;
 		const layout = item.gridLayout;
 		if (!layout) {
-			fallbackItems.push(item);
+			fallbackItems.push({ item });
 			continue;
 		}
 		const rowSpan = (_layout$rowSpan = layout.rowSpan) !== null && _layout$rowSpan !== void 0 ? _layout$rowSpan : 1;
 		const columnSpan = (_layout$columnSpan = layout.columnSpan) !== null && _layout$columnSpan !== void 0 ? _layout$columnSpan : 1;
 		const cells = getCells(layout.row, layout.column, rowSpan, columnSpan);
-		if (!(cells.length > 0 && layout.row + rowSpan - 1 <= RIBBON_GRID_ROWS && (layout.width === void 0 || Number.isFinite(layout.width) && layout.width > 0) && (layout.iconSize === void 0 || Number.isFinite(layout.iconSize) && layout.iconSize > 0) && cells.every((cell) => !occupied.has(cell)))) {
-			fallbackItems.push(item);
+		if (!isValidGridGeometry(layout, rowSpan, cells)) {
+			fallbackItems.push({ item });
 			continue;
 		}
-		cells.forEach((cell) => occupied.add(cell));
-		maxExplicitColumn = Math.max(maxExplicitColumn, layout.column + columnSpan - 1);
-		placements.set(item, {
+		const placement = {
 			item,
 			row: layout.row,
 			column: layout.column,
@@ -2745,27 +2788,49 @@ function placeRibbonGridItems(items) {
 			showLabel: (_layout$showLabel = layout.showLabel) !== null && _layout$showLabel !== void 0 ? _layout$showLabel : false,
 			width: layout.width,
 			iconSize: layout.iconSize
-		});
+		};
+		if (cells.some((cell) => occupied.has(cell))) {
+			fallbackItems.push({
+				item,
+				layout: placement
+			});
+			continue;
+		}
+		cells.forEach((cell) => occupied.add(cell));
+		placements.set(item, placement);
 	}
-	let fallbackRow = 1;
-	let fallbackColumn = maxExplicitColumn + 1;
-	for (const item of fallbackItems) {
+	for (const { item, layout } of fallbackItems) {
+		var _layout$rowSpan2, _layout$columnSpan2, _layout$showLabel2;
+		const rowSpan = (_layout$rowSpan2 = layout === null || layout === void 0 ? void 0 : layout.rowSpan) !== null && _layout$rowSpan2 !== void 0 ? _layout$rowSpan2 : 1;
+		const columnSpan = (_layout$columnSpan2 = layout === null || layout === void 0 ? void 0 : layout.columnSpan) !== null && _layout$columnSpan2 !== void 0 ? _layout$columnSpan2 : 1;
+		const { row, column, cells } = findFirstAvailableCells(occupied, rowSpan, columnSpan);
+		cells.forEach((cell) => occupied.add(cell));
 		placements.set(item, {
 			item,
-			row: fallbackRow,
-			column: fallbackColumn,
-			rowSpan: 1,
-			columnSpan: 1,
-			showLabel: false
+			row,
+			column,
+			rowSpan,
+			columnSpan,
+			showLabel: (_layout$showLabel2 = layout === null || layout === void 0 ? void 0 : layout.showLabel) !== null && _layout$showLabel2 !== void 0 ? _layout$showLabel2 : false,
+			width: layout === null || layout === void 0 ? void 0 : layout.width,
+			iconSize: layout === null || layout === void 0 ? void 0 : layout.iconSize
 		});
-		fallbackRow += 1;
-		if (fallbackRow > RIBBON_GRID_ROWS) {
-			fallbackRow = 1;
-			fallbackColumn += 1;
-		}
 	}
 	return items.map((item) => placements.get(item));
 }
+function isValidGridGeometry(layout, rowSpan, cells) {
+	return cells.length > 0 && layout.row + rowSpan - 1 <= RIBBON_GRID_ROWS && (layout.width === void 0 || Number.isFinite(layout.width) && layout.width > 0) && (layout.iconSize === void 0 || Number.isFinite(layout.iconSize) && layout.iconSize > 0);
+}
+function findFirstAvailableCells(occupied, rowSpan, columnSpan) {
+	for (let column = 1;; column++) for (let row = 1; row + rowSpan - 1 <= RIBBON_GRID_ROWS; row++) {
+		const cells = getCells(row, column, rowSpan, columnSpan);
+		if (cells.every((cell) => !occupied.has(cell))) return {
+			row,
+			column,
+			cells
+		};
+	}
+}
 function getCells(row, column, rowSpan, columnSpan) {
 	if (![
 		row,
@@ -3107,7 +3172,8 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 		return menuItems.filter((item) => {
 			var _item$key;
 			if (!item.children) return !hiddenStates[item.key];
-			return !hiddenStates[((_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.toString()) || ""];
+			const itemKey = ((_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.toString()) || "";
+			return !hiddenStates[itemKey];
 		});
 	}, [menuItems, hiddenStates]);
 	function handleVisibleChange(visible) {
@@ -3856,6 +3922,33 @@ var ThemeSwitcherService = class extends _univerjs_core.Disposable {
 	}
 };
 
+//#endregion
+//#region src/services/workbench/workbench.service.ts
+const IWorkbenchService = (0, _univerjs_core.createIdentifier)("univer.ui.workbench.service");
+var WorkbenchService = class extends _univerjs_core.Disposable {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_tokens", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_skeletonVisible$", new rxjs.BehaviorSubject(false));
+		_defineProperty(this, "skeletonVisible$", this._skeletonVisible$.asObservable());
+	}
+	acquireSkeleton() {
+		const token = Symbol("workbench-skeleton");
+		this._tokens.add(token);
+		if (this._tokens.size === 1) this._skeletonVisible$.next(true);
+		const disposable = (0, _univerjs_core.toDisposable)(() => {
+			if (!this._tokens.delete(token) || this._tokens.size > 0) return;
+			this._skeletonVisible$.next(false);
+		});
+		return this.disposeWithMe(disposable);
+	}
+	dispose() {
+		super.dispose();
+		this._tokens.clear();
+		this._skeletonVisible$.complete();
+	}
+};
+
 //#endregion
 //#region src/services/contextmenu/contextmenu.service.ts
 const IContextMenuService = (0, _univerjs_core.createIdentifier)("ui.contextmenu.service");
@@ -3966,10 +4059,10 @@ function useScrollYOverContainer(element, container) {
 	(0, react.useEffect)(() => {
 		if (!(0, _univerjs_design.isBrowser)() || !element || !container) return;
 		updater();
-		const resizeObserver = (0, _univerjs_design.resizeObserverCtor)(updater);
+		const resizeObserver = new ResizeObserver(updater);
 		resizeObserver.observe(element);
 		return () => {
-			resizeObserver.unobserve(element);
+			resizeObserver.disconnect();
 		};
 	}, [element, container]);
 }
@@ -4148,11 +4241,12 @@ function QuickTileMenuItem(props) {
 	const activated = (0, _wendellhu_redi_react_bindings.useObservable)(menuItem === null || menuItem === void 0 ? void 0 : menuItem.activated$, false);
 	if (!menuItem || hidden) return null;
 	const Icon = menuItem.icon ? iconManager.get(menuItem.icon) : null;
+	const active = resolveMenuItemActiveState(menuItem.id, activated, activeItemIds);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		type: "button",
 		className: quickTileMenuButtonVariants({
 			disabled,
-			active: resolveMenuItemActiveState(menuItem.id, activated, activeItemIds)
+			active
 		}),
 		disabled,
 		onClick: () => {
@@ -4925,9 +5019,10 @@ function ContextMenuMenuItem(props) {
 			const left = useLeft ? leftLeft : rightLeft;
 			setSubmenuPlacement(useLeft ? "left" : "right");
 			const maxTop = window.innerHeight - menuViewportPadding - submenuRect.height;
+			const top = maxTop < menuViewportPadding ? menuViewportPadding : Math.min(Math.max(menuItemRect.top, menuViewportPadding), maxTop);
 			setSubmenuPosition({
 				left,
-				top: maxTop < menuViewportPadding ? menuViewportPadding : Math.min(Math.max(menuItemRect.top, menuViewportPadding), maxTop)
+				top
 			});
 			setSubmenuPositionReady(true);
 		};
@@ -4948,7 +5043,8 @@ function ContextMenuMenuItem(props) {
 	const hiddenById = menuItem.id != null && hiddenItemIds.includes(menuItem.id) || hiddenItemIds.includes(menuKey);
 	if (hidden || hiddenById) return null;
 	const onChange = (v) => {
-		setInputValue((0, _univerjs_core.isRealNum)(v) && typeof v === "string" ? Number.parseInt(v) : v);
+		const newValue = (0, _univerjs_core.isRealNum)(v) && typeof v === "string" ? Number.parseInt(v) : v;
+		setInputValue(newValue);
 	};
 	const onSubmenuOptionSelect = (option) => {
 		onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect(option);
@@ -5508,6 +5604,95 @@ function Sidebar() {
 	});
 }
 
+//#endregion
+//#region src/views/components/workbench-skeleton/WorkbenchSkeleton.tsx
+function WorkbenchSkeleton({ darkMode, direction, overlay = false }) {
+	const shimmerClassName = `
+      univer-animate-pulse univer-bg-gray-100 motion-reduce:univer-animate-none
+      dark:!univer-bg-gray-700
+    `;
+	const shimmerStyle = { animationDuration: "1.2s" };
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"aria-busy": "true",
+		className: (0, _univerjs_design.clsx)("univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-overflow-hidden univer-bg-gray-50 dark:!univer-bg-gray-900", {
+			"univer-absolute univer-inset-0 univer-z-50": overlay,
+			"univer-dark": darkMode
+		}),
+		dir: direction,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+				"data-u-comp": "workbench-skeleton-toolbar",
+				className: "univer-flex univer-h-11 univer-shrink-0 univer-items-center univer-gap-2 univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-bg-white univer-px-4 dark:!univer-border-gray-700 dark:!univer-bg-gray-800",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-h-4 univer-w-24 univer-rounded"),
+						style: shimmerStyle
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-ml-2 univer-size-6 univer-rounded"),
+						style: shimmerStyle
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-size-6 univer-rounded"),
+						style: shimmerStyle
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("main", {
+				"data-u-comp": "workbench-skeleton-content",
+				className: "univer-flex univer-min-h-0 univer-min-w-0 univer-flex-1 univer-flex-col univer-gap-4 univer-p-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-u-comp": "workbench-skeleton-shimmer",
+					className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-h-4 univer-w-1/3 univer-rounded"),
+					style: shimmerStyle
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-u-comp": "workbench-skeleton-shimmer",
+					className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-flex-1 univer-rounded-md"),
+					style: shimmerStyle
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+				"data-u-comp": "workbench-skeleton-footer",
+				className: "univer-flex univer-h-10 univer-shrink-0 univer-items-center univer-justify-between univer-border-0 univer-border-t univer-border-solid univer-border-gray-200 univer-bg-white univer-px-4 dark:!univer-border-gray-700 dark:!univer-bg-gray-800",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-flex univer-items-center univer-gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-size-5 univer-rounded"),
+						style: shimmerStyle
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-u-comp": "workbench-skeleton-shimmer",
+						className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-h-5 univer-w-14 univer-rounded"),
+						style: shimmerStyle
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-flex univer-items-center univer-gap-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-u-comp": "workbench-skeleton-shimmer",
+							className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-size-5 univer-rounded"),
+							style: shimmerStyle
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-u-comp": "workbench-skeleton-shimmer",
+							className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-h-2 univer-w-24 univer-rounded-full"),
+							style: shimmerStyle
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-u-comp": "workbench-skeleton-shimmer",
+							className: (0, _univerjs_design.clsx)(shimmerClassName, "univer-size-5 univer-rounded"),
+							style: shimmerStyle
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/views/hooks/update-effect.ts
 /**
@@ -5714,6 +5899,8 @@ function DesktopWorkbenchContent(props) {
 	var _uiConfig$popupRootId;
 	const { header = true, toolbar = true, footer = true, headerMenu = true, contextMenu = true, ribbonType = "classic", mountContainer, onRendered } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const lifecycleService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LifecycleService);
+	const workbenchService = (0, _wendellhu_redi_react_bindings.useDependency)(IWorkbenchService);
 	const themeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService);
 	const themeSwitcherService = (0, _wendellhu_redi_react_bindings.useDependency)(ThemeSwitcherService);
 	const contentRef = (0, react.useRef)(null);
@@ -5726,6 +5913,9 @@ function DesktopWorkbenchContent(props) {
 	const leftSidebarComponents = useComponentsOfPart("left-sidebar");
 	const globalComponents = useComponentsOfPart("global");
 	const toolbarComponents = useComponentsOfPart("toolbar");
+	const lifecycleStage = (0, _wendellhu_redi_react_bindings.useObservable)(lifecycleService.lifecycle$, lifecycleService.stage);
+	const externalSkeletonVisible = (0, _wendellhu_redi_react_bindings.useObservable)(workbenchService.skeletonVisible$, void 0, true);
+	const ready = lifecycleStage >= _univerjs_core.LifecycleStages.Ready;
 	const popupRootId = (_uiConfig$popupRootId = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.popupRootId) !== null && _uiConfig$popupRootId !== void 0 ? _uiConfig$popupRootId : "univer-popup-portal";
 	(0, react.useLayoutEffect)(() => {
 		const sub = themeService.currentTheme$.subscribe((theme) => {
@@ -5741,8 +5931,8 @@ function DesktopWorkbenchContent(props) {
 		else document.documentElement.classList.remove("univer-dark");
 	}, [darkMode]);
 	(0, react.useEffect)(() => {
-		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
-	}, [onRendered]);
+		if (ready && contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
+	}, [ready, onRendered]);
 	const locale = (0, _wendellhu_redi_react_bindings.useObservable)(() => localeService.localeChanged$.pipe((0, rxjs.map)(() => localeService.getLocales())), localeService.getLocales(), false, [localeService]);
 	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$, localeService.getDirection());
 	const portalContainer = (0, react.useMemo)(() => document.createElement("div"), []);
@@ -5760,61 +5950,68 @@ function DesktopWorkbenchContent(props) {
 		direction,
 		mountContainer: portalContainer,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-u-comp": "workbench-layout",
-			className: (0, _univerjs_design.clsx)("univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
-			tabIndex: -1,
-			onBlur: (e) => e.stopPropagation(),
-			onContextMenu: (e) => e.preventDefault(),
-			dir: direction,
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-relative univer-flex univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: customHeaderComponents }, "custom-header")
-				}),
-				header && toolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-					"data-u-comp": "headerbar",
-					className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
-						components: toolbarComponents,
-						sharedProps: {
-							ribbonType,
-							headerMenuComponents,
-							headerMenu
-						}
-					}, "toolbar")
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-					className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-								"data-u-comp": "left-sidebar",
-								className: "univer-h-full",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-								className: (0, _univerjs_design.clsx)("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", { children: header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerComponents }, "header") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-									className: "univer-relative univer-overflow-hidden dark:!univer-bg-gray-900",
-									ref: contentRef,
-									"data-range-selector": true,
-									onContextMenu: (e) => e.preventDefault(),
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: contentComponents }, "content")
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-								"data-u-comp": "right-sidebar",
-								className: "univer-z-[100] univer-h-full",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {})
-							})
-						]
-					}), footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
-						components: footerComponents,
-						sharedProps: { contextMenu }
-					}, "footer") })]
-				})
-			]
+			className: "univer-relative univer-h-full univer-min-h-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-u-comp": "workbench-layout",
+				className: (0, _univerjs_design.clsx)("univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
+				tabIndex: -1,
+				onBlur: (e) => e.stopPropagation(),
+				onContextMenu: (e) => e.preventDefault(),
+				dir: direction,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-relative univer-flex univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: customHeaderComponents }, "custom-header")
+					}),
+					header && toolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+						"data-u-comp": "headerbar",
+						className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
+							components: toolbarComponents,
+							sharedProps: {
+								ribbonType,
+								headerMenuComponents,
+								headerMenu
+							}
+						}, "toolbar")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+						className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+									"data-u-comp": "left-sidebar",
+									className: "univer-h-full",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+									className: (0, _univerjs_design.clsx)("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", { children: header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerComponents }, "header") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+										className: "univer-relative univer-overflow-hidden dark:!univer-bg-gray-900",
+										ref: contentRef,
+										"data-range-selector": true,
+										onContextMenu: (e) => e.preventDefault(),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: contentComponents }, "content")
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+									"data-u-comp": "right-sidebar",
+									className: "univer-z-[100] univer-h-full",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {})
+								})
+							]
+						}), footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
+							components: footerComponents,
+							sharedProps: { contextMenu }
+						}, "footer") })]
+					})
+				]
+			}), (!ready || externalSkeletonVisible) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkbenchSkeleton, {
+				darkMode,
+				direction,
+				overlay: true
+			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			dir: direction,
 			children: [
@@ -5859,6 +6056,9 @@ var SingleUnitUIController = class extends _univerjs_core.Disposable {
 		delete this._renderManagerService;
 	}
 	_bootstrapWorkbench() {
+		var _this$_injector$get;
+		const initialSkeleton = (_this$_injector$get = this._injector.get(IWorkbenchService, _univerjs_core.Quantity.OPTIONAL)) === null || _this$_injector$get === void 0 ? void 0 : _this$_injector$get.acquireSkeleton();
+		if (initialSkeleton) this.disposeWithMe(initialSkeleton);
 		this.disposeWithMe(this.bootstrap(async (contentElement, containerElement) => {
 			if (this._layoutService) {
 				this.disposeWithMe(this._layoutService.registerRootContainerElement(containerElement));
@@ -5869,6 +6069,7 @@ var SingleUnitUIController = class extends _univerjs_core.Disposable {
 				this._renderTimeout = window.setTimeout(() => {
 					const allRenders = this._renderManagerService.getRenderAll();
 					for (const [key] of allRenders) if (this._changeRenderUnit(key, contentElement)) break;
+					requestAnimationFrame(() => requestAnimationFrame(() => initialSkeleton === null || initialSkeleton === void 0 ? void 0 : initialSkeleton.dispose()));
 					this.disposeWithMe(this._instanceService.focused$.subscribe((unit) => {
 						if (unit) this._changeRenderUnit(unit, contentElement);
 					}));
@@ -5896,9 +6097,9 @@ var SingleUnitUIController = class extends _univerjs_core.Disposable {
 		var _this$_instanceServic2;
 		if (this._currentRenderId === rendererId) return false;
 		if ((_this$_instanceServic2 = this._instanceService.getUnitCreateOptions(rendererId)) === null || _this$_instanceServic2 === void 0 ? void 0 : _this$_instanceServic2.embeddedRender) return false;
-		const renderer = this._renderManagerService.getRenderById(rendererId);
+		const renderer = this._renderManagerService.getRenderUnitById(rendererId);
 		if (!renderer || !renderer.unitId || (0, _univerjs_core.isInternalEditorID)(renderer.unitId)) return false;
-		const currentRenderer = this._currentRenderId ? this._renderManagerService.getRenderById(this._currentRenderId) : null;
+		const currentRenderer = this._currentRenderId ? this._renderManagerService.getRenderUnitById(this._currentRenderId) : null;
 		currentRenderer === null || currentRenderer === void 0 || currentRenderer.deactivate();
 		currentRenderer === null || currentRenderer === void 0 || currentRenderer.engine.unmount();
 		renderer.engine.mount(contentElement);
@@ -5970,7 +6171,7 @@ const IUIController = (0, _univerjs_core.createIdentifier)("univer.ui.ui-control
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.0.0-alpha.7";
+var version = "1.0.0-alpha.8";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -6064,7 +6265,7 @@ function ShortcutPanel() {
 			if (!shortcutGroups.has(group)) shortcutGroups.set(group, []);
 			shortcutGroups.get(group).push(shortcutItem);
 		}
-		setShortcutItems(Array.from(shortcutGroups.entries()).map(([name, items]) => {
+		const toRender = Array.from(shortcutGroups.entries()).map(([name, items]) => {
 			const groupSequence = name.split("_")[0];
 			const localeKey = groupTitles.get(name);
 			return {
@@ -6072,7 +6273,8 @@ function ShortcutPanel() {
 				name: localeService.t(localeKey),
 				items: (0, _univerjs_core.dedupeBy)(items, (item) => item.title + item.shortcut)
 			};
-		}).sort((a, b) => a.sequence - b.sequence));
+		}).sort((a, b) => a.sequence - b.sequence);
+		setShortcutItems(toRender);
 	}, [
 		shortcutService,
 		localeService,
@@ -22892,6 +23094,8 @@ function mountMobileWorkbench(injector, options, mountContainer, onRendered) {
 function MobileWorkbench(props) {
 	const { header = true, toolbar = true, footer = true, headerMenu = true, ribbonType = "classic", contextMenu = true, mountContainer, onRendered } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const lifecycleService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LifecycleService);
+	const workbenchService = (0, _wendellhu_redi_react_bindings.useDependency)(IWorkbenchService);
 	const themeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService);
 	const themeSwitcherService = (0, _wendellhu_redi_react_bindings.useDependency)(ThemeSwitcherService);
 	const contentRef = (0, react.useRef)(null);
@@ -22903,9 +23107,12 @@ function MobileWorkbench(props) {
 	const globalComponents = useComponentsOfPart("global");
 	const toolbarComponents = useComponentsOfPart("toolbar");
 	const darkMode = (0, _wendellhu_redi_react_bindings.useObservable)(themeService.darkMode$, themeService.darkMode);
+	const lifecycleStage = (0, _wendellhu_redi_react_bindings.useObservable)(lifecycleService.lifecycle$, lifecycleService.stage);
+	const externalSkeletonVisible = (0, _wendellhu_redi_react_bindings.useObservable)(workbenchService.skeletonVisible$, void 0, true);
+	const ready = lifecycleStage >= _univerjs_core.LifecycleStages.Ready;
 	(0, react.useEffect)(() => {
-		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
-	}, [onRendered]);
+		if (ready && contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
+	}, [ready, onRendered]);
 	const locale = (0, _wendellhu_redi_react_bindings.useObservable)(() => localeService.localeChanged$.pipe((0, rxjs.map)(() => localeService.getLocales())), localeService.getLocales(), false, [localeService]);
 	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$, localeService.getDirection());
 	const portalContainer = (0, react.useMemo)(() => document.createElement("div"), []);
@@ -22931,51 +23138,58 @@ function MobileWorkbench(props) {
 		direction,
 		mountContainer: portalContainer,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-u-comp": "app-layout",
-			className: (0, _univerjs_design.clsx)("univer-relative univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
-			tabIndex: -1,
-			onBlur: (e) => e.stopPropagation(),
-			onContextMenu: (e) => e.preventDefault(),
-			dir: direction,
-			children: [header && toolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-				"data-u-comp": "headerbar",
-				className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
-					components: toolbarComponents,
-					sharedProps: {
-						ribbonType,
-						headerMenuComponents,
-						headerMenu
-					}
-				}, "toolbar")
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-							className: "univer-h-full",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-							className: (0, _univerjs_design.clsx)("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName),
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-								className: "univer-w-screen",
-								children: header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerComponents }, "header")
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-								ref: contentRef,
-								className: "univer-relative univer-overflow-hidden",
-								"data-range-selector": true,
-								onContextMenu: (e) => e.preventDefault(),
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: contentComponents }, "content")
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-							className: "univer-h-full",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {})
-						})
-					]
-				}), footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: footerComponents }, "footer") })]
+			className: "univer-relative univer-h-full univer-min-h-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-u-comp": "app-layout",
+				className: (0, _univerjs_design.clsx)("univer-relative univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
+				tabIndex: -1,
+				onBlur: (e) => e.stopPropagation(),
+				onContextMenu: (e) => e.preventDefault(),
+				dir: direction,
+				children: [header && toolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+					"data-u-comp": "headerbar",
+					className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
+						components: toolbarComponents,
+						sharedProps: {
+							ribbonType,
+							headerMenuComponents,
+							headerMenu
+						}
+					}, "toolbar")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+								className: "univer-h-full",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+								className: (0, _univerjs_design.clsx)("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+									className: "univer-w-screen",
+									children: header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerComponents }, "header")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+									ref: contentRef,
+									className: "univer-relative univer-overflow-hidden",
+									"data-range-selector": true,
+									onContextMenu: (e) => e.preventDefault(),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: contentComponents }, "content")
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+								className: "univer-h-full",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {})
+							})
+						]
+					}), footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: footerComponents }, "footer") })]
+				})]
+			}), (!ready || externalSkeletonVisible) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WorkbenchSkeleton, {
+				darkMode,
+				direction,
+				overlay: true
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			dir: direction,
@@ -24189,6 +24403,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends _univerjs_core.Plu
 			[IconManager],
 			[ComponentsController],
 			[ThemeSwitcherService],
+			[IWorkbenchService, { useClass: WorkbenchService }],
 			[ZIndexManager],
 			[ShortcutPanelService],
 			[IUIPartsService, { useClass: UIPartsService }],
@@ -24294,6 +24509,7 @@ let UniverUIPlugin = class UniverUIPlugin extends _univerjs_core.Plugin {
 			[ZIndexManager],
 			[ShortcutPanelService],
 			[IUIPartsService, { useClass: UIPartsService }],
+			[IWorkbenchService, { useClass: WorkbenchService }],
 			[ILayoutService, { useClass: DesktopLayoutService }],
 			[IRibbonService, { useClass: DesktopRibbonService }],
 			[IRibbonOverrideService, { useClass: RibbonOverrideService }],
@@ -24523,8 +24739,10 @@ function handleStringToStyle($dom, cssStyle = "") {
 		else styleList.bl = 0;
 		else if (key === "font-style") if (value === "italic") styleList.it = 1;
 		else styleList.it = 0;
-		else if (key === "font-family") styleList.ff = extractFontFamily(textTrim(originStr));
-		else if (key === "font-size") {
+		else if (key === "font-family") {
+			const fontFamily = extractFontFamily(textTrim(originStr));
+			styleList.ff = fontFamily;
+		} else if (key === "font-size") {
 			let fs = Number.parseInt(value);
 			if (cssText.indexOf("vertical-align") > -1 && (cssText.indexOf("sub") > -1 || cssText.indexOf("sup") > -1)) fs *= 2;
 			if (value.indexOf("px") !== -1) fs = getPtFontSizeByPx(Number.parseInt(value, 10));
@@ -25325,6 +25543,7 @@ exports.ISidebarService = ISidebarService;
 exports.IUIController = IUIController;
 exports.IUIPartsService = IUIPartsService;
 exports.IUIRuntimeScopeService = IUIRuntimeScopeService;
+exports.IWorkbenchService = IWorkbenchService;
 Object.defineProperty(exports, 'IconManager', {
   enumerable: true,
   get: function () {
@@ -25343,6 +25562,7 @@ Object.defineProperty(exports, 'MenuManagerService', {
 exports.MetaKeys = MetaKeys;
 exports.MobileContextMenu = MobileContextMenu;
 exports.MockMessageService = MockMessageService;
+exports.NativeTextEditorShortcutBehavior = NativeTextEditorShortcutBehavior;
 exports.PLAIN_TEXT_CLIPBOARD_MIME_TYPE = PLAIN_TEXT_CLIPBOARD_MIME_TYPE;
 exports.PasteCommand = PasteCommand;
 exports.PlatformService = PlatformService;
@@ -25433,6 +25653,7 @@ Object.defineProperty(exports, 'WithDependency', {
     return _wendellhu_redi_react_bindings.WithDependency;
   }
 });
+exports.WorkbenchService = WorkbenchService;
 exports.ZIndexManager = ZIndexManager;
 exports.ZoomInput = ZoomInput;
 Object.defineProperty(exports, 'connectDependencies', {