@univerjs/ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/lib/es/index.js

@@ -306,11 +306,11 @@ function getHeaderFooterMenuHiddenObservable(accessor) {
 	return new Observable((subscriber) => {
 		const subscription = univerInstanceService.focused$.subscribe((unitId) => {
 			if (unitId == null) return subscriber.next(true);
-			const docDataModel = univerInstanceService.getUniverDocInstance(unitId);
+			const docDataModel = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
 			const documentFlavor = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle.documentFlavor;
 			subscriber.next(documentFlavor !== DocumentFlavor.TRADITIONAL);
 		});
-		const docDataModel = univerInstanceService.getCurrentUniverDocInstance();
+		const docDataModel = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
 		if (docDataModel == null) subscriber.next(true);
 		else {
 			const documentFlavor = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle.documentFlavor;
@@ -624,6 +624,47 @@ function fromGlobalEvent(type, listener, options) {
 	return toDisposable(() => window.removeEventListener(type, listener, options));
 }
 
+//#endregion
+//#region src/utils/embed-boundary.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE = "data-embed-interaction-boundary-owner";
+function getEmbedBoundaryOwner(target) {
+	var _ref, _getAttributeValue;
+	if (!hasClosest(target)) return;
+	const ownerElement = target.closest(`[${EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE}]`);
+	return (_ref = (_getAttributeValue = getAttributeValue(target, "data-embed-interaction-boundary-owner")) !== null && _getAttributeValue !== void 0 ? _getAttributeValue : getAttributeValue(ownerElement, "data-embed-interaction-boundary-owner")) !== null && _ref !== void 0 ? _ref : void 0;
+}
+function isEmbedBoundaryTarget(target) {
+	return hasClosest(target) && target.closest(`[${"data-embed-interaction-boundary-owner"}]`) != null;
+}
+function keepInteractionInsideSameEmbedBoundary(event) {
+	const owner = getEmbedBoundaryOwner(event.currentTarget);
+	if (!owner) return;
+	if (getEmbedBoundaryOwner(event.target) === owner) event.preventDefault();
+}
+function hasClosest(target) {
+	return !!target && typeof target.closest === "function";
+}
+function getAttributeValue(target, name) {
+	var _getAttribute$call;
+	const getAttribute = target === null || target === void 0 ? void 0 : target.getAttribute;
+	return typeof getAttribute === "function" ? (_getAttribute$call = getAttribute.call(target, name)) !== null && _getAttribute$call !== void 0 ? _getAttribute$call : void 0 : void 0;
+}
+
 //#endregion
 //#region src/services/layout/layout.service.ts
 const FOCUSING_UNIVER = "FOCUSING_UNIVER";
@@ -704,8 +745,15 @@ let DesktopLayoutService = class DesktopLayoutService extends Disposable {
 		this.disposeWithMe(fromEvent(window, "focusin").subscribe((event) => {
 			var _this$_rootContainerE;
 			const target = event.target;
-			if (((_this$_rootContainerE = this._rootContainerElement) === null || _this$_rootContainerE === void 0 ? void 0 : _this$_rootContainerE.contains(target)) && givingBackFocusElements.some((item) => target.dataset.uComp === item)) {
-				queueMicrotask(() => this.focus());
+			if (((_this$_rootContainerE = this._rootContainerElement) === null || _this$_rootContainerE === void 0 ? void 0 : _this$_rootContainerE.contains(target)) && givingBackFocusElements.some((item) => target.dataset.uComp === item) && !isEmbedBoundaryTarget(target)) {
+				queueMicrotask(() => {
+					const targetUnitId = getFocusUnitIdFromElement(target);
+					if (targetUnitId && this._univerInstanceService.getUnit(targetUnitId)) this._univerInstanceService.focusUnit(targetUnitId);
+					this.focus();
+					this._isFocused = true;
+					this._contextService.setContextValue(FOCUSING_UNIVER, this._isFocused);
+					this._contextService.setContextValue(FOCUSING_UNIVER_EDITOR, getFocusingUniverEditorStatus());
+				});
 				return;
 			}
 			if (target && this.checkElementInCurrentContainers(target)) this._isFocused = true;
@@ -723,6 +771,9 @@ function getFocusingUniverEditorStatus() {
 	var _document$activeEleme;
 	return ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.dataset.uComp) === "editor";
 }
+function getFocusUnitIdFromElement(target) {
+	return target.dataset.uUnitId;
+}
 
 //#endregion
 //#region src/services/platform/platform.service.ts
@@ -844,6 +895,7 @@ let ShortcutService = class ShortcutService extends 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;
 		return Array.from(shortcuts).sort((s1, s2) => {
@@ -869,6 +921,12 @@ let ShortcutService = class ShortcutService extends Disposable {
 		if (this._platformService.isMac && e.ctrlKey) binding |= 8192;
 		return binding;
 	}
+	_shouldLetEmbedTextEditorHandleNativeShortcut(e, binding) {
+		if (binding !== (65 | 4096)) return false;
+		const target = e.target;
+		if (!(target instanceof HTMLElement)) return false;
+		return (target.isContentEditable || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) && isEmbedBoundaryTarget(target);
+	}
 };
 ShortcutService = __decorate([
 	__decorateParam(0, ICommandService),
@@ -1050,8 +1108,9 @@ let ContextMenuGroup = /* @__PURE__ */ function(ContextMenuGroup) {
 
 //#endregion
 //#region src/services/menu/menu-manager.service.ts
+var _MenuManagerService;
 const IMenuManagerService = createIdentifier("univer.menu-manager-service");
-let MenuManagerService = class MenuManagerService extends Disposable {
+let MenuManagerService = _MenuManagerService = class MenuManagerService extends Disposable {
 	constructor(_injector, _configService) {
 		super();
 		this._injector = _injector;
@@ -1185,6 +1244,21 @@ let MenuManagerService = class MenuManagerService extends Disposable {
 		this._menu = merge({}, this._menu, source);
 		this.menuChanged$.next();
 	}
+	createScoped(injector) {
+		const root = this;
+		const createScopedBuilder = () => {
+			const service = new _MenuManagerService(injector, root._configService);
+			service._menu = root._menu;
+			return service;
+		};
+		return {
+			menuChanged$: root.menuChanged$,
+			mergeMenu: (source, target) => root.mergeMenu(source, target),
+			appendRootMenu: (source) => root.appendRootMenu(source),
+			getMenuByPositionKey: (position) => createScopedBuilder().getMenuByPositionKey(position),
+			getFlatMenuByPositionKey: (position) => createScopedBuilder().getFlatMenuByPositionKey(position)
+		};
+	}
 	_buildMenuSchema(data) {
 		const result = [];
 		for (const [key, value] of Object.entries(data)) {
@@ -1224,6 +1298,7 @@ let MenuManagerService = class MenuManagerService extends Disposable {
 	* @returns Menu schema array or empty array if not found
 	*/
 	getMenuByPositionKey(key) {
+		var _findKey;
 		const findKey = (obj) => {
 			if (key in obj) return this._buildMenuSchema(obj[key]);
 			for (const k in obj) {
@@ -1234,7 +1309,7 @@ let MenuManagerService = class MenuManagerService extends Disposable {
 				}
 			}
 		};
-		return findKey(this._menu);
+		return (_findKey = findKey(this._menu)) !== null && _findKey !== void 0 ? _findKey : [];
 	}
 	/**
 	* Get flat menu schema by position key
@@ -1256,7 +1331,7 @@ let MenuManagerService = class MenuManagerService extends Disposable {
 		return flatMenuItems(menu);
 	}
 };
-MenuManagerService = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, IConfigService)], MenuManagerService);
+MenuManagerService = _MenuManagerService = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, IConfigService)], MenuManagerService);
 function normalizeMenuOrder(order) {
 	return order !== null && order !== void 0 ? order : 0;
 }
@@ -1333,11 +1408,14 @@ const undoRedoDisableFactory$ = (accessor, isUndo) => {
 		return undoDisable || contextService.getContextValue(EDITOR_ACTIVATED) || contextService.getContextValue(FOCUSING_FX_BAR_EDITOR);
 	}));
 };
+const rtlIconFactory$ = (accessor, ltrIcon, rtlIcon) => {
+	return accessor.get(LocaleService).direction$.pipe(map$1((direction) => direction === "rtl" ? rtlIcon : ltrIcon));
+};
 function UndoMenuItemFactory(accessor) {
 	return {
 		id: UndoCommand.id,
 		type: 0,
-		icon: "UndoIcon",
+		icon: rtlIconFactory$(accessor, "UndoIcon", "RedoIcon"),
 		title: "ui.shortcut.undo",
 		tooltip: "ui.shortcut.undo",
 		disabled$: undoRedoDisableFactory$(accessor, true)
@@ -1347,7 +1425,7 @@ function RedoMenuItemFactory(accessor) {
 	return {
 		id: RedoCommand.id,
 		type: 0,
-		icon: "RedoIcon",
+		icon: rtlIconFactory$(accessor, "RedoIcon", "UndoIcon"),
 		title: "ui.shortcut.redo",
 		tooltip: "ui.shortcut.redo",
 		disabled$: undoRedoDisableFactory$(accessor, false)
@@ -1468,8 +1546,15 @@ function useObservableRef(observable, defaultValue) {
 
 //#endregion
 //#region src/services/dom/canvas-dom-layer.service.ts
-var CanvasFloatDomService = class {
-	constructor() {
+function shouldForwardFloatDomEvents(layer) {
+	return layer.eventPassThrough !== false;
+}
+function shouldRenderFloatDomLayer(layer, currentUnitId) {
+	return layer.unitId === currentUnitId || layer.preserveOnFocusChange === true;
+}
+var CanvasFloatDomService = class extends Disposable {
+	constructor(..._args) {
+		super(..._args);
 		_defineProperty(this, "_domLayerMap", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_domLayers$", new BehaviorSubject([]));
 		_defineProperty(this, "domLayers$", this._domLayers$.asObservable());
@@ -1500,68 +1585,131 @@ var CanvasFloatDomService = class {
 		this._domLayerMap.clear();
 		this._notice();
 	}
+	dispose() {
+		this._domLayerMap.clear();
+		this._domLayers$.next([]);
+		this._domLayers$.complete();
+		super.dispose();
+	}
 };
+var CanvasFloatDomPreviewService = class extends Disposable {
+	constructor(..._args2) {
+		super(..._args2);
+		_defineProperty(this, "previewUpdated$", new Subject());
+		_defineProperty(this, "previewRequested$", new Subject());
+		_defineProperty(this, "_previewMap", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_requestMap", /* @__PURE__ */ new Map());
+	}
+	getPreview(id) {
+		return this._previewMap.get(id);
+	}
+	getPendingRequests() {
+		return Array.from(this._requestMap.values());
+	}
+	setPreview(preview) {
+		this._previewMap.set(preview.id, preview);
+		this._requestMap.delete(preview.id);
+		this.previewUpdated$.next(preview);
+	}
+	removePreview(id) {
+		this._previewMap.delete(id);
+		this._requestMap.delete(id);
+	}
+	requestPreview(request) {
+		this._requestMap.set(request.id, request);
+		this.previewRequested$.next(request);
+	}
+	dispose() {
+		this._previewMap.clear();
+		this._requestMap.clear();
+		this.previewUpdated$.complete();
+		this.previewRequested$.complete();
+		super.dispose();
+	}
+};
+
+//#endregion
+//#region src/views/components/dom/float-dom-layout.ts
+const LEGACY_WRAPPER_INSET = 2;
+const LEGACY_CONTENT_INSET = 4;
+function resolveFloatDomLayout(position, contentBox) {
+	var _contentBox$wrapperIn, _contentBox$contentIn, _position$opacity;
+	const wrapperInset = (_contentBox$wrapperIn = contentBox === null || contentBox === void 0 ? void 0 : contentBox.wrapperInset) !== null && _contentBox$wrapperIn !== void 0 ? _contentBox$wrapperIn : LEGACY_WRAPPER_INSET;
+	const contentInset = (_contentBox$contentIn = contentBox === null || contentBox === void 0 ? void 0 : contentBox.contentInset) !== null && _contentBox$contentIn !== void 0 ? _contentBox$contentIn : LEGACY_CONTENT_INSET;
+	return {
+		wrapper: {
+			top: position.startY,
+			left: position.startX,
+			width: Math.max(position.endX - position.startX - wrapperInset, 0),
+			height: Math.max(position.endY - position.startY - wrapperInset, 0),
+			transform: `rotate(${position.rotate}deg)`,
+			opacity: (_position$opacity = position.opacity) !== null && _position$opacity !== void 0 ? _position$opacity : 1
+		},
+		inner: {
+			width: position.width - contentInset,
+			height: position.height - contentInset,
+			left: position.absolute.left ? 0 : "auto",
+			top: position.absolute.top ? 0 : "auto",
+			right: position.absolute.left ? "auto" : 0,
+			bottom: position.absolute.top ? "auto" : 0
+		}
+	};
+}
 
 //#endregion
 //#region src/views/components/dom/FloatDom.tsx
+function applyFloatDomLayout(wrapper, inner, layout) {
+	const { wrapper: wrapperLayout, inner: innerLayout } = layout;
+	const wrapperStyle = wrapper.style;
+	wrapperStyle.top = `${wrapperLayout.top}px`;
+	wrapperStyle.left = `${wrapperLayout.left}px`;
+	wrapperStyle.width = `${wrapperLayout.width}px`;
+	wrapperStyle.height = `${wrapperLayout.height}px`;
+	wrapperStyle.transform = wrapperLayout.transform;
+	wrapperStyle.opacity = `${wrapperLayout.opacity}`;
+	const innerStyle = inner.style;
+	innerStyle.width = `${innerLayout.width}px`;
+	innerStyle.height = `${innerLayout.height}px`;
+	innerStyle.left = innerLayout.left === "auto" ? "auto" : `${innerLayout.left}px`;
+	innerStyle.top = innerLayout.top === "auto" ? "auto" : `${innerLayout.top}px`;
+	innerStyle.right = innerLayout.right === "auto" ? "auto" : `${innerLayout.right}px`;
+	innerStyle.bottom = innerLayout.bottom === "auto" ? "auto" : `${innerLayout.bottom}px`;
+}
 const FloatDomSingle = memo((props) => {
-	var _position$startY, _position$startX;
+	var _layer$contentBox, _layer$contentBox2;
 	const { layer, id } = props;
-	const size$ = useMemo(() => layer.position$.pipe(distinctUntilChanged((prev, curr) => prev.absolute.left === curr.absolute.left && prev.absolute.top === curr.absolute.top && prev.endX - prev.startX === curr.endX - curr.startX && prev.endY - prev.startY === curr.endY - curr.startY)), [layer.position$]);
 	const univerInstanceService = useDependency(IUniverInstanceService);
 	const position = useObservable(useMemo(() => layer.position$.pipe(first()), [layer.position$]));
 	const domRef = useRef(null);
 	const innerDomRef = useRef(null);
-	const transformRef = useRef(`transform: rotate(${position === null || position === void 0 ? void 0 : position.rotate}deg) translate(${position === null || position === void 0 ? void 0 : position.startX}px, ${position === null || position === void 0 ? void 0 : position.startY}px)`);
-	const topRef = useRef((_position$startY = position === null || position === void 0 ? void 0 : position.startY) !== null && _position$startY !== void 0 ? _position$startY : 0);
-	const leftRef = useRef((_position$startX = position === null || position === void 0 ? void 0 : position.startX) !== null && _position$startX !== void 0 ? _position$startX : 0);
-	const innerStyle = useRef({});
 	const Component = typeof layer.componentKey === "string" ? useDependency(ComponentManager).get(layer.componentKey) : layer.componentKey;
 	const layerProps = useMemo(() => ({
 		data: layer.data,
-		...layer.props
-	}), [layer.data, layer.props]);
+		...layer.props,
+		hostFloatDomLayout$: layer.position$
+	}), [
+		layer.data,
+		layer.position$,
+		layer.props
+	]);
+	const floatDomOverflow = resolveFloatDomOverflow(layerProps);
+	const wrapperInset = (_layer$contentBox = layer.contentBox) === null || _layer$contentBox === void 0 ? void 0 : _layer$contentBox.wrapperInset;
+	const contentInset = (_layer$contentBox2 = layer.contentBox) === null || _layer$contentBox2 === void 0 ? void 0 : _layer$contentBox2.contentInset;
 	useEffect(() => {
 		const subscription = layer.position$.subscribe((position) => {
-			transformRef.current = `rotate(${position.rotate}deg)`;
-			topRef.current = position.startY;
-			leftRef.current = position.startX;
-			if (domRef.current) {
-				var _position$opacity;
-				domRef.current.style.transform = transformRef.current;
-				domRef.current.style.top = `${topRef.current}px`;
-				domRef.current.style.left = `${leftRef.current}px`;
-				domRef.current.style.opacity = `${(_position$opacity = position.opacity) !== null && _position$opacity !== void 0 ? _position$opacity : 1}`;
-			}
-		});
-		const sizeSubscription = size$.subscribe((size) => {
-			if (domRef.current) {
-				domRef.current.style.width = `${Math.max(size.endX - size.startX - 2, 0)}px`;
-				domRef.current.style.height = `${Math.max(size.endY - size.startY - 2, 0)}px`;
-			}
-			if (innerDomRef.current) {
-				const style = {
-					width: `${size.width - 4}px`,
-					height: `${size.height - 4}px`,
-					left: `${size.absolute.left ? 0 : "auto"}`,
-					top: `${size.absolute.top ? 0 : "auto"}`,
-					right: `${size.absolute.left ? "auto" : 0}`,
-					bottom: `${size.absolute.top ? "auto" : 0}`
-				};
-				innerDomRef.current.style.width = style.width;
-				innerDomRef.current.style.height = style.height;
-				innerDomRef.current.style.left = style.left;
-				innerDomRef.current.style.top = style.top;
-				innerDomRef.current.style.right = style.right;
-				innerDomRef.current.style.bottom = style.bottom;
-				innerStyle.current = style;
-			}
+			if (domRef.current && innerDomRef.current) applyFloatDomLayout(domRef.current, innerDomRef.current, resolveFloatDomLayout(position, {
+				wrapperInset,
+				contentInset
+			}));
 		});
 		return () => {
 			subscription.unsubscribe();
-			sizeSubscription.unsubscribe();
 		};
-	}, [layer.position$, size$]);
+	}, [
+		contentInset,
+		layer.position$,
+		wrapperInset
+	]);
 	const instance = univerInstanceService.getUnit(layer.unitId);
 	const docDisabled = instance instanceof DocumentDataModel ? instance.getDisabled() : void 0;
 	const component = useMemo(() => Component ? /* @__PURE__ */ jsx(Component, {
@@ -1575,36 +1723,34 @@ const FloatDomSingle = memo((props) => {
 		}
 	}) : null, [Component, layerProps]);
 	if (!position) return null;
+	const layout = resolveFloatDomLayout(position, layer.contentBox);
 	return /* @__PURE__ */ jsx("div", {
 		ref: domRef,
-		className: "univer-z-10",
+		className: "univer-absolute univer-z-10 univer-origin-center",
 		style: {
-			position: "absolute",
-			top: topRef.current,
-			left: leftRef.current,
-			width: Math.max(position.endX - position.startX - 2, 0),
-			height: Math.max(position.endY - position.startY - 2, 0),
-			transform: transformRef.current,
-			overflow: "hidden",
-			transformOrigin: "center center"
+			...layout.wrapper,
+			overflow: floatDomOverflow.outerOverflow
 		},
 		onPointerMove: (e) => {
-			layer.onPointerMove(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onPointerMove(e.nativeEvent);
 		},
 		onPointerDown: (e) => {
-			layer.onPointerDown(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onPointerDown(e.nativeEvent);
 		},
 		onPointerUp: (e) => {
-			layer.onPointerUp(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onPointerUp(e.nativeEvent);
 		},
 		onWheel: (e) => {
-			layer.onWheel(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onWheel(e.nativeEvent);
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			id,
 			ref: innerDomRef,
 			className: "univer-absolute univer-overflow-hidden",
-			style: { ...innerStyle.current },
+			style: {
+				...layout.inner,
+				overflow: floatDomOverflow.innerOverflow
+			},
 			children: component
 		})
 	});
@@ -1613,9 +1759,8 @@ const FloatDom = ({ unitId }) => {
 	var _layers$filter;
 	const instanceService = useDependency(IUniverInstanceService);
 	const layers = useObservable(useDependency(CanvasFloatDomService).domLayers$);
-	const focusUnit = useObservable(instanceService.focused$);
-	const currentUnitId = unitId || focusUnit;
-	return layers === null || layers === void 0 || (_layers$filter = layers.filter((layer) => layer[1].unitId === currentUnitId)) === null || _layers$filter === void 0 ? void 0 : _layers$filter.map((layer) => {
+	const currentUnitId = resolveFloatDomCurrentUnitId(unitId, useObservable(instanceService.focused$));
+	return layers === null || layers === void 0 || (_layers$filter = layers.filter((layer) => shouldRenderFloatDomLayer(layer[1], currentUnitId))) === null || _layers$filter === void 0 ? void 0 : _layers$filter.map((layer) => {
 		var _layer$1$domId;
 		return /* @__PURE__ */ jsx(FloatDomSingle, {
 			id: (_layer$1$domId = layer[1].domId) !== null && _layer$1$domId !== void 0 ? _layer$1$domId : layer[0],
@@ -1623,6 +1768,27 @@ const FloatDom = ({ unitId }) => {
 		}, layer[0]);
 	});
 };
+function resolveFloatDomCurrentUnitId(unitId, focusedUnit) {
+	if (typeof unitId === "string") return unitId;
+	if (typeof focusedUnit === "string") return focusedUnit;
+	if (focusedUnit != null && typeof focusedUnit === "object" && "getUnitId" in focusedUnit && typeof focusedUnit.getUnitId === "function") {
+		const focusedUnitId = focusedUnit.getUnitId();
+		return typeof focusedUnitId === "string" ? focusedUnitId : null;
+	}
+	return null;
+}
+function resolveFloatDomOverflow(props) {
+	var _viewport$bleedWidth;
+	const viewport = props.customBlockRenderViewport;
+	if (!(Number.isFinite(viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth) && ((_viewport$bleedWidth = viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth) !== null && _viewport$bleedWidth !== void 0 ? _viewport$bleedWidth : 0) > 0)) return {
+		outerOverflow: "hidden",
+		innerOverflow: "hidden"
+	};
+	return {
+		outerOverflow: "visible",
+		innerOverflow: "visible"
+	};
+}
 
 //#endregion
 //#region src/services/popup/canvas-popup.service.ts
@@ -1929,13 +2095,41 @@ function CanvasPopup() {
 	return useObservable(popupService.popups$, void 0, true).map((item) => {
 		const [key, popup] = item;
 		const Component = componentManager.get(popup.componentKey);
+		const PopupComponent = Component && popup.connectorInjector ? connectInjector(Component, popup.connectorInjector) : Component;
 		return /* @__PURE__ */ jsx(SingleCanvasPopup, {
 			popup,
-			children: Component ? /* @__PURE__ */ jsx(Component, { popup }) : null
+			children: PopupComponent && /* @__PURE__ */ jsx(PopupComponent, { popup })
 		}, key);
 	});
 }
 
+//#endregion
+//#region src/services/ribbon/ribbon-override.service.ts
+const IRibbonOverrideService = createIdentifier("univer.ribbon-override-service");
+var RibbonOverrideService = class extends Disposable {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_override$", new BehaviorSubject(null));
+		_defineProperty(this, "override$", this._override$.asObservable());
+	}
+	getOverride() {
+		return this._override$.getValue();
+	}
+	activate(override) {
+		this._override$.next(override);
+	}
+	clear(id) {
+		const current = this.getOverride();
+		if (!current) return;
+		if (!id || current.id === id) this._override$.next(null);
+	}
+	dispose() {
+		this._override$.next(null);
+		this._override$.complete();
+		super.dispose();
+	}
+};
+
 //#endregion
 //#region src/services/ribbon/ribbon.service.ts
 const IRibbonService = createIdentifier("univer.ribbon-service");
@@ -2418,39 +2612,52 @@ const TooltipWrapperContext = createContext({
 	dropdownVisible: false,
 	setDropdownVisible: (_visible) => {}
 });
+const ToolbarDropdownContext = createContext(null);
+function ToolbarDropdownProvider(props) {
+	const [openDropdownKey, setOpenDropdownKey] = useState(null);
+	const contextValue = useMemo(() => ({
+		openDropdownKey,
+		setOpenDropdownKey
+	}), [openDropdownKey]);
+	return /* @__PURE__ */ jsx(ToolbarDropdownContext.Provider, {
+		value: contextValue,
+		children: props.children
+	});
+}
 const TooltipWrapper = forwardRef((props, ref) => {
-	const { children, ...tooltipProps } = props;
+	const { children, dropdownKey, ...tooltipProps } = props;
 	const spanRef = useRef(null);
 	const [tooltipVisible, setTooltipVisible] = useState(false);
-	const [dropdownVisible, setDropdownVisible] = useState(false);
+	const [localDropdownVisible, setLocalDropdownVisible] = useState(false);
+	const toolbarDropdownContext = useContext(ToolbarDropdownContext);
+	const dropdownVisible = dropdownKey && toolbarDropdownContext ? toolbarDropdownContext.openDropdownKey === dropdownKey : localDropdownVisible;
 	function handleChangeTooltipVisible(visible) {
 		if (dropdownVisible) setTooltipVisible(false);
 		else setTooltipVisible(visible);
 	}
-	function handleChangeDropdownVisible(visible) {
-		setDropdownVisible(visible);
+	const handleChangeDropdownVisible = useCallback((visible) => {
+		if (dropdownKey && toolbarDropdownContext) toolbarDropdownContext.setOpenDropdownKey(visible ? dropdownKey : null);
+		else setLocalDropdownVisible(visible);
 		setTooltipVisible(false);
-	}
+	}, [dropdownKey, toolbarDropdownContext]);
 	const contextValue = useMemo(() => ({
 		dropdownVisible,
 		setDropdownVisible: handleChangeDropdownVisible
-	}), [dropdownVisible]);
+	}), [dropdownVisible, handleChangeDropdownVisible]);
 	useImperativeHandle(ref, () => ({ el: spanRef.current }));
+	const content = /* @__PURE__ */ jsx("span", {
+		ref: spanRef,
+		children: /* @__PURE__ */ jsx(TooltipWrapperContext.Provider, {
+			value: contextValue,
+			children
+		})
+	});
 	return tooltipProps.title ? /* @__PURE__ */ jsx(Tooltip, {
 		visible: tooltipVisible,
 		onVisibleChange: handleChangeTooltipVisible,
 		...tooltipProps,
-		children: /* @__PURE__ */ jsx("span", {
-			ref: spanRef,
-			children: /* @__PURE__ */ jsx(TooltipWrapperContext.Provider, {
-				value: contextValue,
-				children
-			})
-		})
-	}) : /* @__PURE__ */ jsx("span", {
-		ref: spanRef,
-		children
-	});
+		children: content
+	}) : content;
 });
 function DropdownWrapper(props) {
 	const { children, overlay, disabled, align = "start" } = props;
@@ -2503,6 +2710,10 @@ function DropdownMenuLabel({ icon, value, option, onOptionSelect }) {
 		})]
 	});
 }
+function getOptionKey(option) {
+	var _ref, _ref2, _option$id, _option$label2;
+	return String((_ref = (_ref2 = (_option$id = option.id) !== null && _option$id !== void 0 ? _option$id : option.commandId) !== null && _ref2 !== void 0 ? _ref2 : option.value) !== null && _ref !== void 0 ? _ref : typeof option.label === "string" ? option.label : (_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.name);
+}
 function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled, onOptionSelect }) {
 	const { dropdownVisible, setDropdownVisible } = useContext(TooltipWrapperContext);
 	const menuManagerService = useDependency(IMenuManagerService);
@@ -2531,6 +2742,9 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 	function handleVisibleChange(visible) {
 		setDropdownVisible(visible);
 	}
+	function handleEmbedBoundaryFocusOutside(event) {
+		keepInteractionInsideSameEmbedBoundary(event);
+	}
 	function handleOptionSelect(option) {
 		onOptionSelect(option);
 		setDropdownVisible(false);
@@ -2570,19 +2784,19 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 	}, [menuItems]);
 	if (slot) return /* @__PURE__ */ jsx(DropdownWrapper, {
 		disabled,
-		overlay: options.map((option, index) => /* @__PURE__ */ jsx(DropdownMenuLabel, {
+		overlay: options.map((option) => /* @__PURE__ */ jsx(DropdownMenuLabel, {
 			value,
 			option,
 			onOptionSelect: handleOptionSelect
-		}, index)),
+		}, getOptionKey(option))),
 		children
 	});
 	if (options === null || options === void 0 ? void 0 : options.length) {
 		const items = options.map((option) => {
-			var _option$label2;
+			var _option$label3;
 			return {
 				type: "item",
-				className: clsx({ "focus:univer-bg-white": typeof option.label !== "string" && ((_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.hoverable) === false }),
+				className: clsx({ "focus:univer-bg-white": typeof option.label !== "string" && ((_option$label3 = option.label) === null || _option$label3 === void 0 ? void 0 : _option$label3.hoverable) === false }),
 				children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
 					icon: option.icon,
 					value,
@@ -2625,6 +2839,8 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 			disabled,
 			open: dropdownVisible,
 			onOpenChange: handleVisibleChange,
+			onFocusOutside: handleEmbedBoundaryFocusOutside,
+			onInteractOutside: handleEmbedBoundaryFocusOutside,
 			children
 		});
 	} else {
@@ -2659,6 +2875,8 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 			disabled,
 			open: dropdownVisible,
 			onOpenChange: handleVisibleChange,
+			onFocusOutside: handleEmbedBoundaryFocusOutside,
+			onInteractOutside: handleEmbedBoundaryFocusOutside,
 			children
 		});
 	}
@@ -2667,14 +2885,14 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 //#endregion
 //#region src/views/components/ribbon/ToolbarItem.tsx
 const toolbarDisabledClassName = "univer-pointer-events-none univer-cursor-not-allowed univer-text-gray-300 dark:!univer-text-gray-600";
-const toolbarButtonSelectorRootVariants = cva("univer-toolbar-button-selector-root univer-animate-in univer-fade-in univer-group univer-relative univer-flex univer-h-6 univer-cursor-pointer univer-items-center univer-rounded univer-pr-5 univer-text-sm univer-transition-colors hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700", {
+const toolbarButtonSelectorRootVariants = cva("univer-toolbar-button-selector-root univer-animate-in univer-fade-in univer-group univer-relative univer-flex univer-h-6 univer-cursor-pointer univer-items-center univer-rounded univer-pr-5 univer-text-sm univer-transition-colors hover:univer-bg-gray-100 rtl:univer-pl-5 rtl:univer-pr-0 dark:hover:!univer-bg-gray-700", {
 	variants: { disabled: {
 		true: toolbarDisabledClassName,
 		false: "univer-text-gray-900 dark:!univer-text-white"
 	} },
 	defaultVariants: { disabled: false }
 });
-const toolbarButtonSelectorMainVariants = cva("univer-toolbar-button-selector-main univer-relative univer-z-[1] univer-flex univer-h-full univer-items-center univer-rounded-l univer-px-1 univer-transition-colors hover:univer-bg-gray-200 dark:hover:!univer-bg-gray-600", {
+const toolbarButtonSelectorMainVariants = cva("univer-toolbar-button-selector-main univer-relative univer-z-[1] univer-flex univer-h-full univer-items-center univer-rounded-l univer-px-1 univer-transition-colors hover:univer-bg-gray-200 rtl:univer-rounded-l-none rtl:univer-rounded-r dark:hover:!univer-bg-gray-600", {
 	variants: {
 		active: {
 			true: "univer-bg-gray-200 dark:!univer-bg-gray-500",
@@ -2695,7 +2913,7 @@ const toolbarButtonSelectorMainVariants = cva("univer-toolbar-button-selector-ma
 		disabled: false
 	}
 });
-const toolbarButtonSelectorTriggerVariants = cva("univer-toolbar-button-selector-trigger univer-absolute univer-right-0 univer-top-0 univer-box-border univer-flex univer-h-6 univer-w-5 univer-items-center univer-justify-center univer-rounded-r univer-transition-colors hover:univer-bg-gray-200 dark:hover:!univer-bg-gray-600", {
+const toolbarButtonSelectorTriggerVariants = cva("univer-toolbar-button-selector-trigger univer-absolute univer-right-0 univer-top-0 univer-box-border univer-flex univer-h-6 univer-w-5 univer-items-center univer-justify-center univer-rounded-r univer-transition-colors hover:univer-bg-gray-200 rtl:univer-left-0 rtl:univer-right-auto rtl:univer-rounded-l rtl:univer-rounded-r-none dark:hover:!univer-bg-gray-600", {
 	variants: {
 		disabled: {
 			true: toolbarDisabledClassName,
@@ -2895,6 +3113,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 		ref,
 		title: tooltipTitle,
 		placement: "bottom",
+		dropdownKey: id,
 		children: renderItem()
 	});
 });
@@ -2902,15 +3121,20 @@ const ToolbarItem = forwardRef((props, ref) => {
 //#endregion
 //#region src/views/components/ribbon/Ribbon.tsx
 function Ribbon(props) {
-	const { ribbonType, headerMenuComponents, headerMenu = true } = props;
-	const ribbonService = useDependency(IRibbonService);
+	var _ribbonOverride$ribbo;
+	const { ribbonType, headerMenuComponents, headerMenu = true, toolbarOnly = false, headerClassName } = props;
+	const defaultRibbonService = useDependency(IRibbonService);
+	const ribbonOverrideService = useDependency(IRibbonOverrideService);
 	const localeService = useDependency(LocaleService);
+	const ribbonOverride = useObservable(ribbonOverrideService.override$, ribbonOverrideService.getOverride());
+	const ribbonService = (_ribbonOverride$ribbo = ribbonOverride === null || ribbonOverride === void 0 ? void 0 : ribbonOverride.ribbonService) !== null && _ribbonOverride$ribbo !== void 0 ? _ribbonOverride$ribbo : defaultRibbonService;
 	const containerRef = useRef(null);
 	const toolbarItemRefs = useRef({});
 	const ribbonData = useObservable(ribbonService.ribbon$, []);
 	const activatedTab = useObservable(ribbonService.activatedTab$, "ribbon.start");
 	const collapsedIds = useObservable(ribbonService.collapsedIds$, []);
 	const fakeToolbarVisible = useObservable(ribbonService.fakeToolbarVisible$, false);
+	const hideToolbar = (ribbonOverride === null || ribbonOverride === void 0 ? void 0 : ribbonOverride.hideToolbar) === true;
 	const ribbon = useMemo(() => {
 		if (ribbonType === "simple") {
 			const simpleRibbon = [{
@@ -2936,7 +3160,7 @@ function Ribbon(props) {
 	const handleSelectTab = useCallback((group) => {
 		toolbarItemRefs.current = {};
 		ribbonService.setActivatedTab(group.key);
-	}, []);
+	}, [ribbonService]);
 	const activeGroup = useMemo(() => {
 		var _ribbon$find$children, _ribbon$find2;
 		const allGroups = (_ribbon$find$children = (_ribbon$find2 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find2 === void 0 ? void 0 : _ribbon$find2.children) !== null && _ribbon$find$children !== void 0 ? _ribbon$find$children : [];
@@ -2964,6 +3188,13 @@ function Ribbon(props) {
 		activatedTab
 	]);
 	useEffect(() => {
+		if (hideToolbar) {
+			toolbarItemRefs.current = {};
+			ribbonService.setCollapsedIds([]);
+			ribbonService.setFakeToolbarVisible(false);
+			return;
+		}
+		if (!containerRef.current) return;
 		let timer = null;
 		const observer = new ResizeObserver(throttle((entries) => {
 			for (const entry of entries) {
@@ -2993,7 +3224,12 @@ function Ribbon(props) {
 			timer && cancelAnimationFrame(timer);
 			observer.disconnect();
 		};
-	}, [ribbon, activatedTab]);
+	}, [
+		hideToolbar,
+		ribbon,
+		activatedTab,
+		ribbonService
+	]);
 	const fakeToolbar = useMemo(() => {
 		return /* @__PURE__ */ jsx("div", {
 			"aria-hidden": "true",
@@ -3018,75 +3254,117 @@ function Ribbon(props) {
 			})
 		});
 	}, [activeGroup.allGroups, fakeToolbarVisible]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsxs("div", {
-			"data-u-comp": "ribbon-header-menu",
-			className: clsx("univer-relative univer-select-none", { "univer-h-9": ribbonType === "classic" || headerMenuComponents && headerMenuComponents.size > 0 }),
-			children: [ribbonType === "classic" && ribbon.length >= 1 && /* @__PURE__ */ jsx(ClassicMenu, {
-				ribbon,
-				activatedTab,
-				onSelectTab: handleSelectTab
-			}), headerMenu && headerMenuComponents && headerMenuComponents.size > 0 && /* @__PURE__ */ jsx("div", {
-				className: "univer-absolute univer-right-2 univer-top-0 univer-flex univer-h-full univer-items-center univer-gap-2 [&>*]:univer-inline-flex [&>*]:univer-h-6 [&>*]:univer-items-center [&>*]:univer-rounded [&>*]:univer-px-1 [&>*]:univer-transition-colors hover:[&>*]:univer-bg-gray-100",
-				children: /* @__PURE__ */ jsx(ComponentContainer, { components: headerMenuComponents })
-			})]
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: clsx("univer-box-border univer-grid univer-h-10 univer-grid-flow-col univer-items-center univer-px-3 univer-text-sm", {
-				"univer-grid-cols-[1fr] univer-justify-center": ribbonType === "classic" || ribbon.length === 1,
-				"univer-grid-cols-[auto,1fr]": ribbon.length > 1 && ribbonType !== "classic"
-			}, borderBottomClassName),
-			children: [ribbonType === "collapsed" && ribbon.length >= 1 && /* @__PURE__ */ jsx(DefaultMenu, {
-				ribbon,
-				activatedTab,
-				onSelectTab: handleSelectTab
-			}), /* @__PURE__ */ jsxs("div", {
-				"data-u-comp": "ribbon-toolbar",
-				ref: containerRef,
-				className: clsx("univer-flex univer-overflow-hidden", divideXClassName, { "univer-justify-center": ribbonType === "classic" }),
-				role: "toolbar",
-				"aria-label": localeService.t(activatedTabTitle),
-				children: [activeGroup.visibleGroups.map((groupItem) => {
-					var _groupItem$children3, _groupItem$children4;
-					return (((_groupItem$children3 = groupItem.children) === null || _groupItem$children3 === void 0 ? void 0 : _groupItem$children3.length) || groupItem.item) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
-						className: "univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2 empty:univer-hidden",
-						children: groupItem.children && ((_groupItem$children4 = groupItem.children) === null || _groupItem$children4 === void 0 ? void 0 : _groupItem$children4.map((child) => child.item && /* @__PURE__ */ jsx(ToolbarItem, { ...child.item }, child.key)))
-					}) }, groupItem.key);
-				}), collapsedIds.length > 0 && /* @__PURE__ */ jsx("div", {
-					"data-u-comp": "ribbon-toolbar-more",
-					className: "univer-pl-2 rtl:univer-pr-2",
-					children: /* @__PURE__ */ jsx(Dropdown, {
-						collisionPadding: {
-							right: 12,
-							left: 12
-						},
-						onOpenAutoFocus: (e) => e.preventDefault(),
-						overlay: /* @__PURE__ */ jsx("div", {
-							className: "univer-box-border univer-grid univer-max-w-[--radix-popper-available-width] univer-gap-2 univer-p-2",
-							children: activeGroup.hiddenGroups.map((groupItem) => {
-								var _groupItem$children5;
-								return /* @__PURE__ */ jsx("div", {
-									className: "univer-flex univer-items-center univer-gap-2",
-									children: /* @__PURE__ */ jsx("div", {
-										className: "univer-flex univer-flex-wrap univer-gap-2",
-										children: groupItem.children ? (_groupItem$children5 = groupItem.children) === null || _groupItem$children5 === void 0 ? void 0 : _groupItem$children5.map((child) => child.item && /* @__PURE__ */ jsx(ToolbarItem, { ...child.item }, child.key)) : groupItem.item && /* @__PURE__ */ jsx(ToolbarItem, { ...groupItem.item }, groupItem.key)
-									})
-								}, groupItem.key);
-							})
-						}),
-						children: /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: toolbarButtonClassName,
-							"aria-label": localeService.t("ui.ribbon.more"),
-							"aria-haspopup": "true",
-							children: /* @__PURE__ */ jsx(MoreVerticalIcon, {})
+	const embedRibbonOverrideAttributes = ribbonOverride ? {
+		"data-embed-ribbon-override": "true",
+		"data-embed-id": ribbonOverride.id
+	} : {};
+	return /* @__PURE__ */ jsx(RibbonOverrideRuntimeProvider, {
+		override: ribbonOverride,
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-u-comp": "ribbon-header-menu",
+				...embedRibbonOverrideAttributes,
+				className: clsx("univer-relative univer-select-none", headerClassName, {
+					"univer-hidden": toolbarOnly,
+					"univer-h-9": !toolbarOnly && (ribbonType === "classic" || headerMenuComponents && headerMenuComponents.size > 0)
+				}),
+				children: [
+					!toolbarOnly && (ribbonOverride === null || ribbonOverride === void 0 ? void 0 : ribbonOverride.placeholderTitle) && ribbon.length === 0 && /* @__PURE__ */ jsx("div", {
+						className: clsx("univer-flex univer-h-9 univer-items-end univer-px-3", { "univer-justify-center": hideToolbar }),
+						children: /* @__PURE__ */ jsx("span", {
+							className: "univer-relative univer-inline-flex univer-h-8 univer-items-center univer-justify-center univer-rounded-t univer-bg-primary-50 univer-px-3 univer-text-sm univer-font-medium univer-text-primary-600",
+							children: ribbonOverride.placeholderTitle
 						})
+					}),
+					!toolbarOnly && ribbonType === "classic" && ribbon.length >= 1 && /* @__PURE__ */ jsx(ClassicMenu, {
+						ribbon,
+						activatedTab,
+						onSelectTab: handleSelectTab
+					}),
+					headerMenu && headerMenuComponents && headerMenuComponents.size > 0 && /* @__PURE__ */ jsx("div", {
+						className: "univer-absolute univer-right-2 univer-top-0 univer-flex univer-h-full univer-flex-row univer-items-center univer-gap-2 rtl:univer-left-2 rtl:univer-right-auto [&>*]:univer-inline-flex [&>*]:univer-h-6 [&>*]:univer-items-center [&>*]:univer-rounded [&>*]:univer-px-1 [&>*]:univer-transition-colors hover:[&>*]:univer-bg-gray-100",
+						children: /* @__PURE__ */ jsx(ComponentContainer, { components: headerMenuComponents })
 					})
+				]
+			}),
+			!hideToolbar && /* @__PURE__ */ jsxs("div", {
+				...embedRibbonOverrideAttributes,
+				className: clsx("univer-box-border univer-grid univer-h-10 univer-grid-flow-col univer-items-center univer-px-3 univer-text-sm", {
+					"univer-grid-cols-[1fr] univer-justify-center": ribbonType === "classic" || ribbon.length === 1,
+					"univer-grid-cols-[auto,1fr]": ribbon.length > 1 && ribbonType !== "classic"
+				}, borderBottomClassName),
+				children: [ribbonType === "collapsed" && ribbon.length >= 1 && /* @__PURE__ */ jsx(DefaultMenu, {
+					ribbon,
+					activatedTab,
+					onSelectTab: handleSelectTab
+				}), /* @__PURE__ */ jsx("div", {
+					"data-u-comp": "ribbon-toolbar",
+					ref: containerRef,
+					className: clsx("univer-flex univer-overflow-hidden", divideXClassName, { "univer-justify-center": ribbonType === "classic" }),
+					role: "toolbar",
+					"aria-label": localeService.t(activatedTabTitle),
+					children: /* @__PURE__ */ jsxs(ToolbarDropdownProvider, { children: [activeGroup.visibleGroups.map((groupItem) => {
+						var _groupItem$children3, _groupItem$children4;
+						return (((_groupItem$children3 = groupItem.children) === null || _groupItem$children3 === void 0 ? void 0 : _groupItem$children3.length) || groupItem.item) && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
+							className: "univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2 empty:univer-hidden",
+							children: groupItem.children && ((_groupItem$children4 = groupItem.children) === null || _groupItem$children4 === void 0 ? void 0 : _groupItem$children4.map((child) => child.item && /* @__PURE__ */ jsx(ToolbarItem, { ...child.item }, child.key)))
+						}) }, groupItem.key);
+					}), collapsedIds.length > 0 && /* @__PURE__ */ jsx("div", {
+						className: "univer-pl-2 rtl:univer-pr-2",
+						children: /* @__PURE__ */ jsx(Dropdown, {
+							collisionPadding: {
+								right: 12,
+								left: 12
+							},
+							onOpenAutoFocus: (e) => e.preventDefault(),
+							overlay: /* @__PURE__ */ jsx("div", {
+								className: "univer-box-border univer-grid univer-max-w-[--radix-popper-available-width] univer-gap-2 univer-p-2",
+								children: activeGroup.hiddenGroups.map((groupItem) => {
+									var _groupItem$children5;
+									return /* @__PURE__ */ jsx("div", {
+										className: "univer-flex univer-items-center univer-gap-2",
+										children: /* @__PURE__ */ jsx("div", {
+											className: "univer-flex univer-flex-wrap univer-gap-2",
+											children: groupItem.children ? (_groupItem$children5 = groupItem.children) === null || _groupItem$children5 === void 0 ? void 0 : _groupItem$children5.map((child) => child.item && /* @__PURE__ */ jsx(ToolbarItem, { ...child.item }, child.key)) : groupItem.item && /* @__PURE__ */ jsx(ToolbarItem, { ...groupItem.item }, groupItem.key)
+										})
+									}, groupItem.key);
+								})
+							}),
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: toolbarButtonClassName,
+								children: /* @__PURE__ */ jsx(MoreVerticalIcon, {})
+							})
+						})
+					})] }, activatedTab)
 				})]
-			})]
-		}),
-		fakeToolbar
-	] });
+			}),
+			fakeToolbar
+		] })
+	});
+}
+function RibbonOverrideRuntimeProvider(props) {
+	var _override$portalConta;
+	const { override, children } = props;
+	const config = useContext(ConfigContext);
+	const injector = override === null || override === void 0 ? void 0 : override.injector;
+	const ConnectedRibbonOverrideConfigProvider = useMemo(() => injector ? connectInjector(RibbonOverrideConfigProvider, injector) : null, [injector]);
+	if (!override || !ConnectedRibbonOverrideConfigProvider) return children;
+	return /* @__PURE__ */ jsx(ConnectedRibbonOverrideConfigProvider, {
+		locale: config.locale,
+		direction: config.direction,
+		mountContainer: (_override$portalConta = override.portalContainer) !== null && _override$portalConta !== void 0 ? _override$portalConta : config.mountContainer,
+		children
+	});
+}
+function RibbonOverrideConfigProvider(props) {
+	const { children, locale, direction, mountContainer } = props;
+	return /* @__PURE__ */ jsx(ConfigProvider, {
+		locale,
+		direction,
+		mountContainer,
+		children
+	});
 }
 
 //#endregion
@@ -3142,11 +3420,11 @@ var ContextMenuService = class extends Disposable {
 	enable() {
 		this.disabled = false;
 	}
-	triggerContextMenu(event, menuType) {
+	triggerContextMenu(event, menuType, context) {
 		var _this$_currentHandler3;
 		event.stopPropagation();
 		if (this.disabled) return;
-		(_this$_currentHandler3 = this._currentHandler) === null || _this$_currentHandler3 === void 0 || _this$_currentHandler3.handleContextMenu(event, menuType);
+		(_this$_currentHandler3 = this._currentHandler) === null || _this$_currentHandler3 === void 0 || _this$_currentHandler3.handleContextMenu(event, menuType, context);
 	}
 	hideContextMenu() {
 		var _this$_currentHandler4;
@@ -3159,6 +3437,25 @@ var ContextMenuService = class extends Disposable {
 	}
 };
 
+//#endregion
+//#region src/services/runtime-scope/ui-runtime-scope.service.ts
+const IUIRuntimeScopeService = createIdentifier("ui.runtime-scope.service");
+var UIRuntimeScopeService = class extends Disposable {
+	constructor(..._args) {
+		super(..._args);
+		_defineProperty(this, "_scopes", /* @__PURE__ */ new Map());
+	}
+	register(scope) {
+		this._scopes.set(scope.unitId, scope);
+		return toDisposable(() => {
+			if (this._scopes.get(scope.unitId) === scope) this._scopes.delete(scope.unitId);
+		});
+	}
+	get(unitId) {
+		return unitId ? this._scopes.get(unitId) : void 0;
+	}
+};
+
 //#endregion
 //#region src/services/contextmenu/contextmenu-host.service.ts
 const IContextMenuHostService = createIdentifier("ui.contextmenu.host.service");
@@ -3863,9 +4160,11 @@ function getContextMenuSubmenuPanelClassName(sizeVariant) {
 }
 function ContextMenuPanel(props) {
 	var _layoutService$rootCo, _layoutService$rootCo2;
-	const { menuType, menuSessionVersion = 0, className, activeItemIds, hiddenItemIds, sizeVariant = "default", autoFocus, autoFocusTarget = "first-item", suppressHoverUntilPointerMove = false, onCancel, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect } = props;
-	const menuManagerService = useDependency(IMenuManagerService);
-	const layoutService = useDependency(ILayoutService);
+	const { menuType, menuManagerService: providedMenuManagerService, layoutService: providedLayoutService, menuSessionVersion = 0, className, activeItemIds, hiddenItemIds, sizeVariant = "default", autoFocus, autoFocusTarget = "first-item", suppressHoverUntilPointerMove = false, onCancel, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect } = props;
+	const rootMenuManagerService = useDependency(IMenuManagerService);
+	const rootLayoutService = useDependency(ILayoutService);
+	const menuManagerService = providedMenuManagerService !== null && providedMenuManagerService !== void 0 ? providedMenuManagerService : rootMenuManagerService;
+	const layoutService = providedLayoutService !== null && providedLayoutService !== void 0 ? providedLayoutService : rootLayoutService;
 	const [menuElement, setMenuElement] = useState(null);
 	const [maxMenuHeight, setMaxMenuHeight] = useState(() => {
 		if (typeof window === "undefined") return 240;
@@ -3968,6 +4267,7 @@ function ContextMenuPanel(props) {
 		onWheel: (event) => event.stopPropagation(),
 		children: /* @__PURE__ */ jsx(ContextMenuMenu, {
 			menuSchemas: menuItems,
+			menuManagerService,
 			menuSessionVersion,
 			submenuPortalContainer,
 			rootMenuElement: menuElement,
@@ -3983,7 +4283,7 @@ function ContextMenuPanel(props) {
 	});
 }
 function ContextMenuMenu(props) {
-	const { menuSchemas, menuSessionVersion, submenuPortalContainer, rootMenuElement, activeItemIds, hiddenItemIds, hoverSuppressed, sizeVariant, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect, maxMenuHeight } = props;
+	const { menuSchemas, menuManagerService, menuSessionVersion, submenuPortalContainer, rootMenuElement, activeItemIds, hiddenItemIds, hoverSuppressed, sizeVariant, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect, maxMenuHeight } = props;
 	const localeService = useDependency(LocaleService);
 	const hiddenGroupStates = useContextGroupHiddenStates$1(menuSchemas);
 	const [activeSubmenuKey, setActiveSubmenuKey] = useState(null);
@@ -4029,6 +4329,7 @@ function ContextMenuMenu(props) {
 		if (menuSchema.item) return /* @__PURE__ */ jsx(ContextMenuMenuItem, {
 			menuKey: menuSchema.key,
 			menuItem: menuSchema.item,
+			menuManagerService,
 			menuSessionVersion,
 			submenuPortalContainer,
 			rootMenuElement,
@@ -4049,6 +4350,7 @@ function ContextMenuMenu(props) {
 			children: menuSchema.children.map((childSchema) => childSchema.item && /* @__PURE__ */ jsx(ContextMenuMenuItem, {
 				menuKey: childSchema.key,
 				menuItem: childSchema.item,
+				menuManagerService,
 				menuSessionVersion,
 				submenuPortalContainer,
 				rootMenuElement,
@@ -4070,6 +4372,7 @@ function ContextMenuMenu(props) {
 			children: [titleNode, menuSchema.children.map((childSchema) => childSchema.item && /* @__PURE__ */ jsx(ContextMenuMenuItem, {
 				menuKey: childSchema.key,
 				menuItem: childSchema.item,
+				menuManagerService,
 				menuSessionVersion,
 				submenuPortalContainer,
 				rootMenuElement,
@@ -4098,6 +4401,7 @@ function ContextMenuMenu(props) {
 			children: [titleContent, /* @__PURE__ */ jsx(ContextMenuMenuItem, {
 				menuKey: `${menuSchema.key}-header-action`,
 				menuItem: menuSchema.headerActionItem,
+				menuManagerService,
 				menuSessionVersion,
 				submenuPortalContainer,
 				rootMenuElement,
@@ -4118,10 +4422,9 @@ function ContextMenuMenu(props) {
 	}
 }
 function ContextMenuMenuItem(props) {
-	const { menuKey, menuItem, menuSessionVersion, submenuPortalContainer, rootMenuElement, maxMenuHeight, activeSubmenuKey, setActiveSubmenuKey, activeItemIds, hiddenItemIds = [], hoverSuppressed = false, compact = false, headerAction = false, sizeVariant, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect } = props;
+	const { menuKey, menuItem, menuManagerService, menuSessionVersion, submenuPortalContainer, rootMenuElement, maxMenuHeight, activeSubmenuKey, setActiveSubmenuKey, activeItemIds, hiddenItemIds = [], hoverSuppressed = false, compact = false, headerAction = false, sizeVariant, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect } = props;
 	const localeService = useDependency(LocaleService);
 	const direction = useObservable(localeService.direction$);
-	const menuManagerService = useDependency(IMenuManagerService);
 	const disabled = useObservable(menuItem.disabled$, false);
 	const activated = useObservable(menuItem.activated$, false);
 	const hidden = useObservable(menuItem.hidden$, false);
@@ -4198,7 +4501,9 @@ function ContextMenuMenuItem(props) {
 			const submenuRect = submenuElement.getBoundingClientRect();
 			const rightLeft = menuItemRect.right - submenuOverlapOffset;
 			const leftLeft = menuItemRect.left - submenuRect.width + submenuOverlapOffset;
-			const useLeft = rightLeft + submenuRect.width + menuViewportPadding > window.innerWidth && leftLeft >= menuViewportPadding;
+			const hasLeftSpace = leftLeft >= menuViewportPadding;
+			const hasRightSpace = rightLeft + submenuRect.width + menuViewportPadding <= window.innerWidth;
+			const useLeft = direction === "rtl" ? hasLeftSpace || !hasRightSpace : !hasRightSpace && hasLeftSpace;
 			const left = useLeft ? leftLeft : rightLeft;
 			setSubmenuPlacement(useLeft ? "left" : "right");
 			const maxTop = window.innerHeight - menuViewportPadding - submenuRect.height;
@@ -4217,6 +4522,7 @@ function ContextMenuMenuItem(props) {
 			window.removeEventListener("scroll", updateSubmenuPosition, true);
 		};
 	}, [
+		direction,
 		submenuVisible,
 		hasSelectionSubmenu,
 		hasSubItemSubmenu
@@ -4250,6 +4556,7 @@ function ContextMenuMenuItem(props) {
 	});
 	const canExecuteItem = menuItem.type === 0 || menuItem.type === 2;
 	const renderAsContainer = isNonSelectableLabel(menuItem.label);
+	const SubmenuAffordanceIcon = direction === "rtl" ? MoreLeftIcon : MoreRightIcon;
 	const interactiveItemClassName = clsx(itemClassName, isNonHoverableLabel(menuItem.label) && "hover:univer-bg-transparent dark:hover:!univer-bg-transparent");
 	return /* @__PURE__ */ jsxs("div", {
 		ref: menuItemElementRef,
@@ -4278,7 +4585,7 @@ function ContextMenuMenuItem(props) {
 		children: [renderAsContainer ? /* @__PURE__ */ jsxs("div", {
 			className: interactiveItemClassName,
 			"aria-disabled": disabled,
-			children: [contentNode, hasSubmenu && /* @__PURE__ */ jsx(MoreRightIcon, { className: `
+			children: [contentNode, hasSubmenu && /* @__PURE__ */ jsx(SubmenuAffordanceIcon, { className: `
                                   ${sizeVariant === "paragraph-t" ? "univer-size-4" : "univer-size-3.5"}
                                   univer-text-gray-400
                                   dark:!univer-text-gray-200
@@ -4321,7 +4628,7 @@ function ContextMenuMenuItem(props) {
 					label: menuKey
 				});
 			},
-			children: [contentNode, hasSubmenu && !compact && /* @__PURE__ */ jsx(MoreRightIcon, { className: `
+			children: [contentNode, hasSubmenu && !compact && /* @__PURE__ */ jsx(SubmenuAffordanceIcon, { className: `
                                   ${sizeVariant === "paragraph-t" ? "univer-size-4" : "univer-size-3.5"}
                                   univer-text-gray-400
                                   dark:!univer-text-gray-200
@@ -4368,7 +4675,7 @@ function ContextMenuMenuItem(props) {
 						const optionSelected = typeof inputValue !== "undefined" && String(inputValue) === String(option.value);
 						const optionSelectable = !isNonSelectableLabel(option.label);
 						const optionHoverable = !isNonHoverableLabel(option.label);
-						const optionClassName = clsx(sizeVariant === "paragraph-t" ? "univer-relative univer-box-border univer-flex univer-min-h-10 univer-w-full univer-items-center univer-rounded-lg univer-border-none univer-bg-transparent univer-px-3 univer-text-left univer-text-base dark:!univer-text-white" : "univer-relative univer-box-border univer-flex univer-min-h-8 univer-w-full univer-items-center univer-rounded-md univer-border-none univer-bg-transparent univer-px-2 univer-text-left univer-text-sm dark:!univer-text-white", option.disabled ? "univer-cursor-not-allowed univer-opacity-60" : optionHoverable && "univer-cursor-pointer hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600");
+						const optionClassName = clsx(optionSelectable ? sizeVariant === "paragraph-t" ? "univer-relative univer-box-border univer-flex univer-min-h-10 univer-w-full univer-items-center univer-rounded-lg univer-border-none univer-bg-transparent univer-px-3 univer-text-left univer-text-base dark:!univer-text-white" : "univer-relative univer-box-border univer-flex univer-min-h-8 univer-w-full univer-items-center univer-rounded-md univer-border-none univer-bg-transparent univer-px-2 univer-text-left univer-text-sm dark:!univer-text-white" : "univer-relative univer-box-border univer-block univer-w-full univer-border-none univer-bg-transparent univer-p-0", option.disabled ? "univer-cursor-not-allowed univer-opacity-60" : optionHoverable && "univer-cursor-pointer hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-600");
 						const optionContentNode = /* @__PURE__ */ jsxs(Fragment$1, { children: [optionSelectable && optionSelected && /* @__PURE__ */ jsx(CheckMarkIcon, { className: clsx("univer-absolute univer-left-0 univer-text-primary-600", sizeVariant === "paragraph-t" ? "univer-size-5" : "univer-size-4") }), /* @__PURE__ */ jsx("span", {
 							className: clsx(getContextMenuContentClassName(sizeVariant), optionSelectable && optionSelected && "univer-pl-4"),
 							children: /* @__PURE__ */ jsx(CustomLabel, {
@@ -4410,6 +4717,7 @@ function ContextMenuMenuItem(props) {
 					})
 				}), hasSubItemSubmenu && /* @__PURE__ */ jsx(ContextMenuMenu, {
 					menuSchemas: subMenuItems,
+					menuManagerService,
 					menuSessionVersion,
 					submenuPortalContainer,
 					rootMenuElement,
@@ -4454,7 +4762,7 @@ function useContextGroupHiddenStates$1(menuSchemas) {
 //#endregion
 //#region src/views/components/context-menu/AnchoredContextMenu.tsx
 function AnchoredContextMenu(props) {
-	const { hostId, visible, anchorRect, menuType, anchorVertical = "bottom", menuOffset = 0, onRequestClose, onOptionSelect } = props;
+	const { hostId, visible, anchorRect, menuType, anchorVertical = "bottom", menuOffset = 0, menuManagerService, layoutService, onRequestClose, onOptionSelect } = props;
 	const contentRef = useRef(null);
 	const contextMenuHostService = useDependency(IContextMenuHostService);
 	const onRequestCloseRef = useRef(onRequestClose);
@@ -4543,6 +4851,8 @@ function AnchoredContextMenu(props) {
 			ref: contentRef,
 			children: menuType && /* @__PURE__ */ jsx(ContextMenuPanel, {
 				menuType,
+				menuManagerService,
+				layoutService,
 				menuSessionVersion: menuSessionVersionRef.current,
 				onOptionSelect
 			})
@@ -4557,10 +4867,13 @@ function DesktopContextMenu() {
 	const [visible, setVisible] = useState(false);
 	const [menuType, setMenuType] = useState("");
 	const [anchorRect, setAnchorRect] = useState(null);
+	const [menuContext, setMenuContext] = useState();
 	const visibleRef = useRef(visible);
 	const contextMenuService = useDependency(IContextMenuService);
 	const commandService = useDependency(ICommandService);
-	const injector = useInjector();
+	const layoutService = useDependency(ILayoutService);
+	const menuManagerService = useDependency(IMenuManagerService);
+	const runtimeScopeService = useDependency(IUIRuntimeScopeService);
 	visibleRef.current = visible;
 	useEffect(() => {
 		const disposables = contextMenuService.registerContextMenuHandler({
@@ -4577,10 +4890,11 @@ function DesktopContextMenu() {
 		};
 	}, [contextMenuService]);
 	/** A function to open context menu with given position and menu type. */
-	function handleContextMenu(event, menuType) {
+	function handleContextMenu(event, menuType, context) {
 		setVisible(false);
 		requestAnimationFrame(() => {
 			setMenuType(menuType);
+			setMenuContext(context);
 			setAnchorRect({
 				left: event.clientX,
 				top: event.clientY,
@@ -4592,18 +4906,24 @@ function DesktopContextMenu() {
 	function handleClose() {
 		setVisible(false);
 	}
+	const activeScope = runtimeScopeService.get(menuContext === null || menuContext === void 0 ? void 0 : menuContext.unitId);
+	const activeMenuManagerService = (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(IMenuManagerService)) ? activeScope.get(IMenuManagerService) : menuManagerService;
+	const activeCommandService = (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(ICommandService)) ? activeScope.get(ICommandService) : commandService;
+	const activeLayoutService = (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(ILayoutService)) ? activeScope.get(ILayoutService) : layoutService;
 	return /* @__PURE__ */ jsx(AnchoredContextMenu, {
 		hostId: DESKTOP_CONTEXT_MENU_HOST_ID,
 		visible,
 		anchorRect,
 		menuType,
+		menuManagerService: activeMenuManagerService,
+		layoutService: activeLayoutService,
 		onRequestClose: handleClose,
 		onOptionSelect: (params) => {
 			const { label: id, commandId, value } = params;
 			const rawParams = typeof params.params === "function" ? params.params() : params.params;
 			const commandParams = typeof rawParams === "undefined" ? { value } : rawParams;
-			if (commandService) commandService.executeCommand(commandId !== null && commandId !== void 0 ? commandId : id, commandParams);
-			injector.get(ILayoutService).focus();
+			if (activeCommandService) activeCommandService.executeCommand(commandId !== null && commandId !== void 0 ? commandId : id, commandParams);
+			activeLayoutService.focus();
 			handleClose();
 		}
 	});
@@ -5179,7 +5499,9 @@ var SingleUnitUIController = class extends Disposable {
 		}));
 	}
 	_changeRenderUnit(rendererId, contentElement) {
+		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);
 		if (!renderer || !renderer.unitId || isInternalEditorID(renderer.unitId)) return false;
 		const currentRenderer = this._currentRenderId ? this._renderManagerService.getRenderById(this._currentRenderId) : null;
@@ -5257,7 +5579,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.0.0-alpha.1";
+var version = "1.0.0-alpha.3";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -20287,15 +20609,13 @@ function EmojiPicker(props) {
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "univer-flex univer-items-center univer-gap-1 univer-px-3 univer-pb-2 univer-pt-3",
-				children: [/* @__PURE__ */ jsxs("label", {
-					className: "univer-flex univer-h-8 univer-flex-1 univer-items-center univer-gap-1 univer-rounded-lg univer-border univer-border-solid univer-border-primary-500 univer-px-2 univer-text-gray-500 dark:!univer-border-primary-600 dark:!univer-text-gray-400",
-					children: [/* @__PURE__ */ jsx(SearchIcon, {}), /* @__PURE__ */ jsx(Input, {
-						"aria-label": localeService.t("ui.emojiPicker.search"),
-						placeholder: localeService.t("ui.emojiPicker.search"),
-						className: "univer-min-w-0 univer-flex-1",
-						value: query,
-						onChange: setQuery
-					})]
+				children: [/* @__PURE__ */ jsx(Input, {
+					"aria-label": localeService.t("ui.emojiPicker.search"),
+					placeholder: localeService.t("ui.emojiPicker.search"),
+					className: "univer-min-w-0 univer-flex-1",
+					value: query,
+					onChange: setQuery,
+					slot: /* @__PURE__ */ jsx(SearchIcon, { className: "univer-size-4 univer-text-gray-500 dark:!univer-text-gray-400" })
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
 					"aria-label": localeService.t("ui.emojiPicker.random"),
@@ -20329,12 +20649,12 @@ function EmojiPicker(props) {
 				className: clsx("univer-flex univer-h-10 univer-shrink-0 univer-items-center univer-border-gray-200 univer-px-2.5 dark:!univer-border-gray-600 [&_svg]:univer-size-5", borderTopClassName),
 				children: [/* @__PURE__ */ jsx(CategoryButton, {
 					selected: !isSearching && activeTab === "recent",
-					title: localeService.t("ui.emojiPicker.recents"),
+					titleKey: "ui.emojiPicker.recents",
 					onClick: () => scrollToSection("recent"),
 					children: /* @__PURE__ */ jsx(RecentIcon, {})
 				}), EMOJI_CATEGORIES.map((category) => /* @__PURE__ */ jsx(CategoryButton, {
 					selected: !isSearching && activeTab === category.key,
-					title: localeService.t(category.titleKey),
+					titleKey: category.titleKey,
 					onClick: () => scrollToSection(category.key),
 					children: /* @__PURE__ */ jsx(CategoryIcon, { category: category.key })
 				}, category.key))]
@@ -20375,11 +20695,12 @@ function EmojiGrid(props) {
 	});
 }
 function CategoryButton(props) {
+	const localeService = useDependency(LocaleService);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		"aria-label": props.title,
+		"aria-label": localeService.t(props.titleKey),
 		"aria-selected": props.selected,
-		title: props.title,
+		title: localeService.t(props.titleKey),
 		className: clsx("univer-flex univer-h-[30px] univer-flex-1 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-lg univer-border-0 univer-bg-transparent univer-p-0 univer-text-gray-500 dark:!univer-text-gray-400", props.selected ? "univer-bg-primary-50 univer-text-primary-500 dark:!univer-bg-gray-800 dark:!univer-text-primary-400" : "hover:univer-bg-gray-50 hover:univer-text-gray-700 dark:hover:!univer-bg-gray-800 dark:hover:!univer-text-gray-300"),
 		onClick: props.onClick,
 		children: props.children
@@ -20557,14 +20878,10 @@ let FontService = class FontService {
 FontService = __decorate([__decorateParam(0, IConfigService)], FontService);
 
 //#endregion
-//#region src/views/font-family/FontFamily.tsx
-const FontFamily = ({ id, value, disabled$ }) => {
-	const disabled = useObservable(disabled$);
-	const commandService = useDependency(ICommandService);
-	const localeService = useDependency(LocaleService);
+//#region src/views/font-family/use-font-list.ts
+function useFontList() {
 	const fontService = useDependency(IFontService);
-	const [inputValue, setInputValue] = useState("");
-	const [fonts, setFonts] = useState([]);
+	const [fonts, setFonts] = useState(() => fontService.getFonts());
 	useEffect(() => {
 		const subscription = fontService.fonts$.subscribe((fonts) => {
 			setFonts(fonts);
@@ -20572,7 +20889,22 @@ const FontFamily = ({ id, value, disabled$ }) => {
 		return () => {
 			subscription.unsubscribe();
 		};
-	}, []);
+	}, [fontService]);
+	return {
+		fonts,
+		fontService
+	};
+}
+
+//#endregion
+//#region src/views/font-family/FontFamily.tsx
+const FONT_FAMILY_COMPONENT = "UI_FONT_FAMILY_COMPONENT";
+const FontFamily = ({ className, disabled: disabledProp, value, disabled$, onChange }) => {
+	const disabledObservableValue = useObservable(disabled$);
+	const disabled = Boolean(disabledProp || disabledObservableValue);
+	const localeService = useDependency(LocaleService);
+	const { fonts } = useFontList();
+	const [draftValue, setDraftValue] = useState(null);
 	const viewValue = useMemo(() => {
 		if (value == null) return "";
 		const font = fonts.find((font) => {
@@ -20585,14 +20917,12 @@ const FontFamily = ({ id, value, disabled$ }) => {
 		fonts,
 		localeService
 	]);
-	useMemo(() => {
-		setInputValue(viewValue);
-	}, [value]);
+	const inputValue = draftValue !== null && draftValue !== void 0 ? draftValue : viewValue;
 	function resetValue() {
-		setInputValue(viewValue);
+		setDraftValue(null);
 	}
 	function handleChangeSelection(e) {
-		setInputValue(e.target.value);
+		setDraftValue(e.target.value);
 	}
 	function handleKeyDown(e) {
 		e.stopPropagation();
@@ -20604,7 +20934,7 @@ const FontFamily = ({ id, value, disabled$ }) => {
 		}
 	}
 	function handleBlur() {
-		if (inputValue !== value) resetValue();
+		if (draftValue !== null && inputValue !== viewValue) resetValue();
 	}
 	function confirm() {
 		const font = fonts.find((item) => {
@@ -20616,11 +20946,12 @@ const FontFamily = ({ id, value, disabled$ }) => {
 		}
 		handleSelectFont(font.value);
 	}
-	function handleSelectFont(value) {
-		commandService.executeCommand(id, { value });
+	function handleSelectFont(nextValue) {
+		resetValue();
+		onChange(nextValue);
 	}
 	return /* @__PURE__ */ jsx("div", {
-		className: "univer-w-32 univer-truncate univer-text-sm",
+		className: clsx("univer-w-32 univer-truncate univer-text-sm", className),
 		style: { fontFamily: value },
 		children: /* @__PURE__ */ jsx("input", {
 			className: "univer-block univer-h-6 univer-border-none univer-bg-transparent univer-leading-6 focus:univer-outline-none dark:!univer-text-white [&_input:focus]:!univer-ring-0 [&_input]:univer-h-6 [&_input]:univer-w-7 [&_input]:univer-border-none [&_input]:!univer-bg-transparent [&_input]:univer-p-0 [&_input]:univer-text-sm",
@@ -20636,25 +20967,16 @@ const FontFamily = ({ id, value, disabled$ }) => {
 
 //#endregion
 //#region src/views/font-family/FontFamilyItem.tsx
-const FontFamilyItem = ({ id, value }) => {
-	const commandService = useDependency(ICommandService);
-	const fontService = useDependency(IFontService);
-	const layoutService = useDependency(ILayoutService);
-	const [fonts, setFonts] = useState([]);
-	useEffect(() => {
-		const subscription = fontService.fonts$.subscribe((fonts) => {
-			setFonts(fonts);
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, []);
+const FONT_FAMILY_ITEM_COMPONENT = "UI_FONT_FAMILY_ITEM_COMPONENT";
+const FontFamilyItem = ({ value, onChange }) => {
 	const localeService = useDependency(LocaleService);
-	function handleSelectFont(value) {
-		layoutService.focus();
-		commandService.executeCommand(id, { value });
+	const direction = useObservable(localeService.direction$, localeService.getDirection());
+	const { fonts, fontService } = useFontList();
+	function handleSelectFont(nextValue) {
+		onChange(nextValue);
 	}
 	return /* @__PURE__ */ jsx("ul", {
+		dir: direction,
 		className: "univer-m-0 univer-list-none univer-p-0 univer-text-sm",
 		style: { fontFamily: value },
 		children: fonts.map((font) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
@@ -20671,9 +20993,52 @@ const FontFamilyItem = ({ id, value }) => {
 };
 
 //#endregion
-//#region src/views/font-family/interface.ts
-const FONT_FAMILY_COMPONENT = "UI_FONT_FAMILY_COMPONENT";
-const FONT_FAMILY_ITEM_COMPONENT = "UI_FONT_FAMILY_ITEM_COMPONENT";
+//#region src/views/font-family/FontFamilyDropdown.tsx
+function FontFamilyDropdown(props) {
+	const { value, onChange, ariaLabel, className, disabled: disabledProp, disabled$, inputClassName, popupClassName, popupDataComponent, title, onMouseDown, onPointerDown } = props;
+	const localeService = useDependency(LocaleService);
+	const direction = useObservable(localeService.direction$, localeService.getDirection());
+	const disabledObservableValue = useObservable(disabled$);
+	const disabled = Boolean(disabledProp || disabledObservableValue);
+	const [open, setOpen] = useState(false);
+	const popupDataAttributes = popupDataComponent ? { "data-u-comp": popupDataComponent } : void 0;
+	function handleChange(nextValue) {
+		setOpen(false);
+		onChange(nextValue);
+	}
+	return /* @__PURE__ */ jsx(Dropdown, {
+		disabled,
+		open,
+		onOpenChange: setOpen,
+		overlay: /* @__PURE__ */ jsx("div", {
+			dir: direction,
+			className: clsx("univer-max-h-72 univer-min-w-44 univer-overflow-y-auto univer-rounded-lg univer-border univer-border-solid univer-border-gray-200 univer-bg-white univer-p-1 univer-shadow-lg dark:!univer-border-gray-700 dark:!univer-bg-gray-900", popupClassName),
+			...popupDataAttributes,
+			children: /* @__PURE__ */ jsx(FontFamilyItem, {
+				value,
+				onChange: handleChange
+			})
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			"aria-disabled": disabled,
+			"aria-expanded": open,
+			"aria-label": ariaLabel,
+			dir: direction,
+			className: clsx("univer-flex univer-h-6 univer-min-w-0 univer-cursor-default univer-items-center univer-justify-between univer-gap-1 univer-rounded-md univer-px-1.5 univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 dark:!univer-text-gray-100 dark:hover:!univer-bg-gray-700", { "univer-cursor-not-allowed univer-opacity-60": disabled }, className),
+			role: "combobox",
+			tabIndex: disabled ? -1 : 0,
+			title: typeof title === "string" ? title : void 0,
+			onMouseDown,
+			onPointerDown,
+			children: [/* @__PURE__ */ jsx(FontFamily, {
+				className: clsx("univer-min-w-0 univer-flex-1", inputClassName),
+				value,
+				disabled,
+				onChange: handleChange
+			}), /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-flex-shrink-0 univer-text-xs univer-text-gray-500" })]
+		})
+	});
+}
 
 //#endregion
 //#region src/views/font-size/FontSize.tsx
@@ -20833,7 +21198,9 @@ const DRAG_COMMIT_INTERVAL = 50;
 function Slider(props) {
 	var _getSliderOffset;
 	const iconManager = useDependency(IconManager);
+	const localeService = useDependency(LocaleService);
 	const { value, min = 0, max = 400, disabled = false, resetPoint = 100, shortcuts, onChange } = props;
+	const isRtl = useObservable(localeService.direction$, localeService.getDirection()) === "rtl";
 	const sliderInnerRailRef = useRef(null);
 	const isEditingZoomRef = useRef(false);
 	const dragValueRef = useRef(value);
@@ -20877,6 +21244,7 @@ function Slider(props) {
 		let offsetX = clientX - railRect.x;
 		if (offsetX <= 0) offsetX = 0;
 		else if (offsetX >= railWidth) offsetX = railWidth;
+		if (isRtl) offsetX = railWidth - offsetX;
 		const ratio = offsetX / railWidth;
 		if (ratio <= .5) return min + ratio * (resetPoint - min) * 2;
 		return resetPoint + (ratio - .5) * (max - resetPoint) * 2;
@@ -20995,6 +21363,7 @@ function Slider(props) {
 	}];
 	const visualValue = isDragging ? dragValue : value;
 	const sliderOffset = Math.min(Math.max((_getSliderOffset = getSliderOffset(visualValue)) !== null && _getSliderOffset !== void 0 ? _getSliderOffset : 0, 0), 100);
+	const handleOffset = isRtl ? 100 - sliderOffset : sliderOffset;
 	const ReduceIcon = iconManager.get("ReduceIcon");
 	const IncreaseIcon = iconManager.get("IncreaseIcon");
 	const MoreDownIcon = iconManager.get("MoreDownIcon");
@@ -21021,7 +21390,7 @@ function Slider(props) {
 						onPointerDown: handlePointerDown,
 						children: [
 							/* @__PURE__ */ jsx("div", {
-								className: "univer-bg-primary-500/60 univer-absolute univer-left-0 univer-top-0 univer-h-full univer-rounded-full",
+								className: clsx("univer-bg-primary-500/60 univer-absolute univer-top-0 univer-h-full univer-rounded-full", isRtl ? "univer-right-0" : "univer-left-0"),
 								style: { width: `${sliderOffset}%` }
 							}),
 							/* @__PURE__ */ jsx("a", {
@@ -21040,7 +21409,7 @@ function Slider(props) {
 								"aria-valuemax": max,
 								"aria-valuenow": visualValue,
 								type: "button",
-								style: { left: `${sliderOffset}%` },
+								style: { left: `${handleOffset}%` },
 								onPointerDown: handlePointerDown
 							})
 						]
@@ -21142,14 +21511,6 @@ ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)),
 //#endregion
 //#region src/views/components/ribbon/MobileRibbon.tsx
 const toolbarScrollOffset = 168;
-const nestedControlResetClassName = `
-[&_button]:!univer-m-0 [&_button]:!univer-appearance-none [&_button]:!univer-border-0
-[&_button]:!univer-bg-transparent [&_button]:!univer-p-0 [&_button]:!univer-leading-none
-[&_button]:!univer-outline-none
-[&_input]:!univer-m-0 [&_input]:!univer-appearance-none [&_input]:!univer-border-0
-[&_input]:!univer-bg-transparent [&_input]:!univer-p-0 [&_input]:!univer-leading-none
-[&_input]:!univer-outline-none
-`;
 function MobileRibbon(props) {
 	var _activeGroup$children;
 	const { headerMenuComponents, headerMenu = true } = props;
@@ -21289,7 +21650,7 @@ function MobileRibbon(props) {
 						return /* @__PURE__ */ jsx("div", {
 							className: clsx("univer-flex univer-shrink-0 univer-items-center univer-gap-0.5 univer-pr-1.5 rtl:univer-pl-1.5 rtl:univer-pr-0", { [borderRightClassName]: groupIndex !== activeGroups.length - 1 }),
 							children: groupItems.map((child) => child.item && /* @__PURE__ */ jsx("div", {
-								className: clsx("[&_button]:!univer-font-inherit univer-flex univer-h-8 univer-shrink-0 univer-items-center univer-rounded-md [&_*]:univer-box-border [&_.univer-custom-label]:univer-text-sm [&_.univer-custom-label]:univer-leading-none [&_.univer-toolbar-button-selector-main]:!univer-h-8 [&_.univer-toolbar-button-selector-main]:!univer-rounded-none [&_.univer-toolbar-button-selector-main]:!univer-rounded-l-md [&_.univer-toolbar-button-selector-main]:!univer-px-1.5 [&_.univer-toolbar-button-selector-root]:!univer-h-8 [&_.univer-toolbar-button-selector-root]:univer-overflow-hidden [&_.univer-toolbar-button-selector-root]:!univer-rounded-md [&_.univer-toolbar-button-selector-root]:!univer-pr-0 [&_.univer-toolbar-button-selector-trigger]:!univer-static [&_.univer-toolbar-button-selector-trigger]:!univer-h-8 [&_.univer-toolbar-button-selector-trigger]:!univer-w-6 [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-none [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-r-md [&_.univer-toolbar-selector-root]:!univer-h-8 [&_.univer-toolbar-selector-root]:!univer-gap-1 [&_.univer-toolbar-selector-root]:!univer-rounded-md [&_.univer-toolbar-selector-root]:!univer-px-1.5 [&_.univer-toolbar-selector-trigger]:!univer-pl-0.5 [&_.univer-tooltip]:univer-inline-flex [&_.univer-tooltip]:univer-h-full [&_.univer-tooltip]:univer-items-center [&_[data-u-command]]:!univer-h-8 [&_[data-u-command]]:!univer-min-h-8 [&_[data-u-command]]:!univer-rounded-md [&_[data-u-command]]:!univer-px-1.5 [&_button]:!univer-h-8 [&_button]:!univer-min-w-8 [&_button]:!univer-rounded-md [&_button]:!univer-px-1.5", nestedControlResetClassName),
+								className: clsx("[&_button]:!univer-font-inherit univer-flex univer-h-8 univer-shrink-0 univer-items-center univer-rounded-md [&_*]:univer-box-border [&_.univer-custom-label]:univer-text-sm [&_.univer-custom-label]:univer-leading-none [&_.univer-toolbar-button-selector-main]:!univer-h-8 [&_.univer-toolbar-button-selector-main]:!univer-rounded-none [&_.univer-toolbar-button-selector-main]:!univer-rounded-l-md [&_.univer-toolbar-button-selector-main]:!univer-px-1.5 [&_.univer-toolbar-button-selector-root]:!univer-h-8 [&_.univer-toolbar-button-selector-root]:univer-overflow-hidden [&_.univer-toolbar-button-selector-root]:!univer-rounded-md [&_.univer-toolbar-button-selector-root]:!univer-pr-0 [&_.univer-toolbar-button-selector-trigger]:!univer-static [&_.univer-toolbar-button-selector-trigger]:!univer-h-8 [&_.univer-toolbar-button-selector-trigger]:!univer-w-6 [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-none [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-r-md [&_.univer-toolbar-selector-root]:!univer-h-8 [&_.univer-toolbar-selector-root]:!univer-gap-1 [&_.univer-toolbar-selector-root]:!univer-rounded-md [&_.univer-toolbar-selector-root]:!univer-px-1.5 [&_.univer-toolbar-selector-trigger]:!univer-pl-0.5 [&_.univer-tooltip]:univer-inline-flex [&_.univer-tooltip]:univer-h-full [&_.univer-tooltip]:univer-items-center [&_[data-u-command]]:!univer-h-8 [&_[data-u-command]]:!univer-min-h-8 [&_[data-u-command]]:!univer-rounded-md [&_[data-u-command]]:!univer-px-1.5 [&_button]:!univer-m-0 [&_button]:!univer-h-8 [&_button]:!univer-min-w-8 [&_button]:!univer-appearance-none [&_button]:!univer-rounded-md [&_button]:!univer-border-0 [&_button]:!univer-bg-transparent [&_button]:!univer-p-0 [&_button]:!univer-px-1.5 [&_button]:!univer-leading-none [&_button]:!univer-outline-none [&_input]:!univer-m-0 [&_input]:!univer-appearance-none [&_input]:!univer-border-0 [&_input]:!univer-bg-transparent [&_input]:!univer-p-0 [&_input]:!univer-leading-none [&_input]:!univer-outline-none"),
 								children: /* @__PURE__ */ jsx(ToolbarItem, { ...child.item })
 							}, child.key))
 						}, groupItem.key);
@@ -21316,8 +21677,9 @@ function MobileRibbon(props) {
 //#region src/views/menu/mobile/MobileMenu.tsx
 function MobileMenu(props) {
 	var _viewStack;
-	const { menuType, onOptionSelect, schemas: providedSchemas } = props;
-	const menuManagerService = useDependency(IMenuManagerService);
+	const { menuType, onOptionSelect, schemas: providedSchemas, menuManagerService: providedMenuManagerService } = props;
+	const rootMenuManagerService = useDependency(IMenuManagerService);
+	const menuManagerService = providedMenuManagerService !== null && providedMenuManagerService !== void 0 ? providedMenuManagerService : rootMenuManagerService;
 	const [viewStack, setViewStack] = useState([]);
 	const menuSchemas = useMemo(() => {
 		if (providedSchemas) return providedSchemas;
@@ -21365,6 +21727,7 @@ function MobileMenu(props) {
 				className: "univer-overflow-hidden univer-rounded-2xl univer-bg-white",
 				children: /* @__PURE__ */ jsx(MobileSchemaList, {
 					schemas: (currentView === null || currentView === void 0 ? void 0 : currentView.kind) === "schema" ? currentView.schemas : menuSchemas,
+					menuManagerService,
 					menuType,
 					onExecute: onOptionSelect,
 					onOpenView: openView
@@ -21383,7 +21746,7 @@ function MobileMenu(props) {
 	});
 }
 function MobileSchemaList(props) {
-	const { schemas, menuType, onExecute, onOpenView } = props;
+	const { schemas, menuManagerService, menuType, onExecute, onOpenView } = props;
 	const localeService = useDependency(LocaleService);
 	const hiddenGroupStates = useContextGroupHiddenStates(schemas);
 	const visibleSchemas = useMemo(() => {
@@ -21397,6 +21760,7 @@ function MobileSchemaList(props) {
 		var _schema$children2;
 		if (schema.item) return /* @__PURE__ */ jsx(MobileSchemaRow, {
 			schema,
+			menuManagerService,
 			menuType,
 			onExecute,
 			onOpenView,
@@ -21410,6 +21774,7 @@ function MobileSchemaList(props) {
 				children: localeService.t(schema.title)
 			}), schema.children.map((childSchema, childIndex) => /* @__PURE__ */ jsx(MobileSchemaRow, {
 				schema: childSchema,
+				menuManagerService,
 				menuType,
 				onExecute,
 				onOpenView,
@@ -21419,9 +21784,10 @@ function MobileSchemaList(props) {
 	}) });
 }
 function MobileSchemaRow(props) {
-	const { schema, menuType, onExecute, onOpenView, bordered } = props;
+	const { schema, menuManagerService, menuType, onExecute, onOpenView, bordered } = props;
 	const interaction = useMobileSchemaInteraction({
 		schema,
+		menuManagerService,
 		menuType,
 		onOpenView
 	});
@@ -21496,8 +21862,7 @@ function MobileSelectionOptionRow(props) {
 }
 function useMobileSchemaInteraction(props) {
 	var _schema$children3;
-	const { schema, menuType, onOpenView } = props;
-	const menuManagerService = useDependency(IMenuManagerService);
+	const { schema, menuManagerService, menuType, onOpenView } = props;
 	const localeService = useDependency(LocaleService);
 	const menuItem = schema.item;
 	const selectorItem = menuItem;
@@ -21618,11 +21983,14 @@ const MOBILE_CONTEXT_MENU_HOST_ID = "mobile-context-menu";
 function MobileContextMenu() {
 	const [visible, setVisible] = useState(false);
 	const [menuType, setMenuType] = useState("");
+	const [menuContext, setMenuContext] = useState();
 	const visibleRef = useRef(visible);
 	const contextMenuHostService = useDependency(IContextMenuHostService);
 	const contextMenuService = useDependency(IContextMenuService);
 	const commandService = useDependency(ICommandService);
 	const layoutService = useDependency(ILayoutService);
+	const menuManagerService = useDependency(IMenuManagerService);
+	const runtimeScopeService = useDependency(IUIRuntimeScopeService);
 	const localeService = useDependency(LocaleService);
 	const direction = useObservable(localeService.direction$);
 	const { mountContainer } = useContext(ConfigContext);
@@ -21646,9 +22014,10 @@ function MobileContextMenu() {
 			contextMenuHostService.deactivateMenu(MOBILE_CONTEXT_MENU_HOST_ID);
 		};
 	}, [contextMenuHostService, contextMenuService]);
-	function handleContextMenu(_event, nextMenuType) {
+	function handleContextMenu(_event, nextMenuType, context) {
 		contextMenuHostService.activateMenu(MOBILE_CONTEXT_MENU_HOST_ID);
 		setMenuType(nextMenuType);
+		setMenuContext(context);
 		setVisible(true);
 	}
 	function handleClose() {
@@ -21663,6 +22032,23 @@ function MobileContextMenu() {
 		}
 	}, [localeService, menuType]);
 	if (!mountContainer || !visible) return null;
+	const activeScope = runtimeScopeService.get(menuContext === null || menuContext === void 0 ? void 0 : menuContext.unitId);
+	const activeCommandService = (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(ICommandService)) ? activeScope.get(ICommandService) : commandService;
+	const activeLayoutService = (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(ILayoutService)) ? activeScope.get(ILayoutService) : layoutService;
+	const menu = /* @__PURE__ */ jsx(MobileMenu, {
+		menuType,
+		menuManagerService: (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(IMenuManagerService)) ? activeScope.get(IMenuManagerService) : menuManagerService,
+		onOptionSelect: (params) => {
+			var _ref, _params$commandId;
+			const commandId = (_ref = (_params$commandId = params.commandId) !== null && _params$commandId !== void 0 ? _params$commandId : params.id) !== null && _ref !== void 0 ? _ref : params.label;
+			const fallbackParams = typeof params.params === "function" ? params.params() : params.params;
+			const commandParams = typeof params.value === "undefined" ? fallbackParams : { value: params.value };
+			if (!commandId) return;
+			activeLayoutService.focus();
+			activeCommandService.executeCommand(commandId, commandParams);
+			handleClose();
+		}
+	});
 	return createPortal(/* @__PURE__ */ jsxs("div", {
 		dir: direction,
 		className: "univer-fixed univer-inset-0 univer-z-[1080] univer-flex univer-items-end",
@@ -21696,19 +22082,7 @@ function MobileContextMenu() {
 						children: /* @__PURE__ */ jsx(CloseIcon, { className: "univer-size-4 univer-text-current" })
 					})]
 				})]
-			}), menuType && /* @__PURE__ */ jsx(MobileMenu, {
-				menuType,
-				onOptionSelect: (params) => {
-					var _ref, _params$commandId;
-					const commandId = (_ref = (_params$commandId = params.commandId) !== null && _params$commandId !== void 0 ? _params$commandId : params.id) !== null && _ref !== void 0 ? _ref : params.label;
-					const fallbackParams = typeof params.params === "function" ? params.params() : params.params;
-					const commandParams = typeof params.value === "undefined" ? fallbackParams : { value: params.value };
-					if (!commandId) return;
-					layoutService.focus();
-					commandService.executeCommand(commandId, commandParams);
-					handleClose();
-				}
-			})]
+			}), menuType && menu]
 		})]
 	}), mountContainer);
 }
@@ -23073,6 +23447,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends Plugin {
 			[IMenuManagerService, { useClass: MenuManagerService }],
 			[IContextMenuHostService, { useClass: ContextMenuHostService }],
 			[IContextMenuService, { useClass: ContextMenuService }],
+			[IUIRuntimeScopeService, { useClass: UIRuntimeScopeService }],
 			[IClipboardInterfaceService, {
 				useClass: BrowserClipboardService,
 				lazy: true
@@ -23110,6 +23485,7 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends Plugin {
 			[ICanvasPopupService, { useClass: CanvasPopupService }],
 			[IFontService, { useClass: FontService }],
 			[CanvasFloatDomService],
+			[CanvasFloatDomPreviewService],
 			[IUIController, {
 				useFactory: (injector) => injector.createInstance(MobileUIController, this._config),
 				deps: [Injector]
@@ -23167,11 +23543,13 @@ let UniverUIPlugin = class UniverUIPlugin extends Plugin {
 			[IUIPartsService, { useClass: UIPartsService }],
 			[ILayoutService, { useClass: DesktopLayoutService }],
 			[IRibbonService, { useClass: DesktopRibbonService }],
+			[IRibbonOverrideService, { useClass: RibbonOverrideService }],
 			[IShortcutService, { useClass: ShortcutService }],
 			[IPlatformService, { useClass: PlatformService }],
 			[IMenuManagerService, { useClass: MenuManagerService }],
 			[IContextMenuHostService, { useClass: ContextMenuHostService }],
 			[IContextMenuService, { useClass: ContextMenuService }],
+			[IUIRuntimeScopeService, { useClass: UIRuntimeScopeService }],
 			[IClipboardInterfaceService, {
 				useClass: BrowserClipboardService,
 				lazy: true
@@ -23209,6 +23587,7 @@ let UniverUIPlugin = class UniverUIPlugin extends Plugin {
 			[ICanvasPopupService, { useClass: CanvasPopupService }],
 			[IFontService, { useClass: FontService }],
 			[CanvasFloatDomService],
+			[CanvasFloatDomPreviewService],
 			[IUIController, {
 				useFactory: (injector) => injector.createInstance(DesktopUIController, this._config),
 				deps: [Injector]
@@ -23922,16 +24301,16 @@ const PrintFloatDomSingle = memo((props) => {
 			transform: transformRef.current
 		},
 		onPointerMove: (e) => {
-			layer.onPointerMove(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onPointerMove(e.nativeEvent);
 		},
 		onPointerDown: (e) => {
-			layer.onPointerDown(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onPointerDown(e.nativeEvent);
 		},
 		onPointerUp: (e) => {
-			layer.onPointerUp(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onPointerUp(e.nativeEvent);
 		},
 		onWheel: (e) => {
-			layer.onWheel(e.nativeEvent);
+			if (shouldForwardFloatDomEvents(layer)) layer.onWheel(e.nativeEvent);
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			ref: innerDomRef,
@@ -24026,4 +24405,4 @@ function ProgressBar(props) {
 }
 
 //#endregion
-export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, EMOJI_CATEGORIES, EMOJI_PICKER_COMPONENT, EMOJI_RECENT_LIMIT, EmojiPicker, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FontFamily, FontFamilyItem, FontService, FontSize, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IconManager, KeyCode, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileContextMenu, MockMessageService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, ThemeSwitcherService, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoShortcutItem, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, ZIndexManager, connectDependencies, connectInjector, getAllEmojis, getDefaultRecentEmojis, getEmojiLocaleData, getHeaderFooterMenuHiddenObservable, getLocalizedEmojiTitle, getMenuHiddenObservable, getRandomEmoji, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, mergeMenuConfigs, parseHtmlDocument, parseHtmlFragment, parseStoredRecentEmojis, promoteRecentEmoji, sanitizeParsedHtml, searchEmojis, splitSpanText, supportClipboardAPI, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };
+export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomPreviewService, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE, EMOJI_CATEGORIES, EMOJI_PICKER_COMPONENT, EMOJI_RECENT_LIMIT, EmojiPicker, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FontFamily, FontFamilyDropdown, FontFamilyItem, FontService, FontSize, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonOverrideService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IUIRuntimeScopeService, IconManager, KeyCode, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileContextMenu, MockMessageService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonOverrideService, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, ThemeSwitcherService, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UIRuntimeScopeService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoShortcutItem, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, ZIndexManager, connectDependencies, connectInjector, getAllEmojis, getDefaultRecentEmojis, getEmbedBoundaryOwner, getEmojiLocaleData, getHeaderFooterMenuHiddenObservable, getLocalizedEmojiTitle, getMenuHiddenObservable, getRandomEmoji, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, isEmbedBoundaryTarget, keepInteractionInsideSameEmbedBoundary, mergeMenuConfigs, parseHtmlDocument, parseHtmlFragment, parseStoredRecentEmojis, promoteRecentEmoji, sanitizeParsedHtml, searchEmojis, splitSpanText, supportClipboardAPI, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };