fix(embed): keep sheet tabs switchable from child blocks

Author: DR-Univer

packages/embed-ui/src/index.ts

@@ -51,7 +51,7 @@ export {
     EmbedMountService,
 } from './services/embed-mount.service';
 export { EmbedOverlayRootService, type EmbedOverlayRootRegistration } from './services/embed-overlay-root.service';
-export { disposeEmbedReactRoot } from './services/react-root-disposal';
+export { createEmbedReactRoot, disposeEmbedReactRoot } from './services/react-root-disposal';
 export {
     createEmbedRenderChildViewContribution,
     createEmbedChildRender,

packages/embed-ui/src/services/embed-product-menu-mounting.ts

@@ -5,9 +5,8 @@ import type { EmbedProductMenuMountContext } from '../types/embed-ui';
 import { COMMAND_EXECUTION_INJECTOR_KEY, ICommandService, IConfigService, Injector, IUniverInstanceService, LocaleService, toDisposable } from '@univerjs/core';
 import { DesktopRibbonService, IMenuManagerService, IRibbonService, MenuManagerPosition, MenuManagerService, RediProvider, Ribbon } from '@univerjs/ui';
 import { createElement } from 'react';
-import { createRoot } from 'react-dom/client';
 import { map, merge, of } from 'rxjs';
-import { disposeEmbedReactRoot } from './react-root-disposal';
+import { createEmbedReactRoot, disposeEmbedReactRoot } from './react-root-disposal';
 
 export function mountEmbedProductRibbonMenu(context: EmbedProductMenuMountContext): IDisposable | undefined {
     const { container, injector, childType, childUnitId, menuSchema, menuTitlePrefix, activeRibbonTab, toolbarOnly } = context;
@@ -22,7 +21,7 @@ export function mountEmbedProductRibbonMenu(context: EmbedProductMenuMountContex
         menuTitlePrefix,
         activeRibbonTab,
     });
-    const root = createRoot(container);
+    const root = createEmbedReactRoot(container);
     root.render(createElement(
         RediProvider,
         { value: { injector: scoped.injector as Injector } },

packages/embed-ui/src/services/react-root-disposal.ts

@@ -1,7 +1,39 @@
 import type { Root } from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
+
+const rootsByContainer = new WeakMap<Element, Root>();
+const containersByRoot = new WeakMap<Root, Element>();
+const rootVersions = new WeakMap<Root, number>();
+
+export function createEmbedReactRoot(container: Element): Root {
+    const existing = rootsByContainer.get(container);
+    if (existing) {
+        rootVersions.set(existing, (rootVersions.get(existing) ?? 0) + 1);
+        return existing;
+    }
+
+    const root = createRoot(container);
+    rootsByContainer.set(container, root);
+    containersByRoot.set(root, container);
+    rootVersions.set(root, 0);
+    return root;
+}
 
 export function disposeEmbedReactRoot(root: Root): void {
+    const container = containersByRoot.get(root);
+    const version = rootVersions.get(root) ?? 0;
     const unmount = () => {
+        if (container && rootsByContainer.get(container) !== root) {
+            return;
+        }
+        if ((rootVersions.get(root) ?? 0) !== version) {
+            return;
+        }
+        if (container) {
+            rootsByContainer.delete(container);
+            containersByRoot.delete(root);
+        }
+        rootVersions.delete(root);
         root.unmount();
     };
     if (typeof queueMicrotask === 'function') {

packages/sheets-ui/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx

@@ -304,6 +304,15 @@ export function SheetBarTabs() {
         void commandService.executeCommand(SetWorksheetActiveOperation.id, {
             subUnitId,
             unitId: workbookRef.current.getUnitId(),
+        }).then((result) => {
+            if (result !== false) {
+                return;
+            }
+
+            const worksheet = workbookRef.current.getSheetBySheetId(subUnitId);
+            if (worksheet) {
+                workbookRef.current.setActiveSheet(worksheet);
+            }
         });
     }, [commandService]);