fix(drawing): ensure unique id for float dom element at runtime (#6235)

packages/sheets-drawing-ui/src/index.ts

@@ -33,6 +33,6 @@ export { SidebarSheetDrawingOperation } from './commands/operations/open-drawing
 export type { IUniverSheetsDrawingUIConfig } from './controllers/config.schema';
 export { SheetDrawingUpdateController } from './controllers/sheet-drawing-update.controller';
 export { UniverSheetsDrawingUIPlugin } from './plugin';
-export { calcSheetFloatDomPosition, type ICanvasFloatDom, type ICanvasFloatDomInfo, type IDOMAnchor, SheetCanvasFloatDomManagerService } from './services/canvas-float-dom-manager.service';
+export { calcSheetFloatDomPosition, type ICanvasFloatDom, type ICanvasFloatDomInfo, type IDOMAnchor, SHEET_FLOAT_DOM_PREFIX, SheetCanvasFloatDomManagerService } from './services/canvas-float-dom-manager.service';
 
 export { SHEETS_IMAGE_MENU_ID } from './views/menu/image.menu';

packages/sheets-drawing-ui/src/services/canvas-float-dom-manager.service.ts

@@ -69,6 +69,9 @@ enum ScrollDirectionResponse {
     HORIZONTAL = 'HORIZONTAL',
     VERTICAL = 'VERTICAL',
 }
+
+export const SHEET_FLOAT_DOM_PREFIX = 'univer-sheet-float-dom-';
+
 export interface ICanvasFloatDomInfo {
     position$: BehaviorSubject<IFloatDomLayout>;
     dispose: IDisposable;
@@ -79,6 +82,7 @@ export interface ICanvasFloatDomInfo {
     scrollDirectionResponse?: ScrollDirectionResponse; // update float dom pos by scrolling
     domAnchor?: IDOMAnchor;
     id: string;
+    domId?: string; // Ensure unique id for dom element at runtime
 }
 
 export interface IDOMAnchor {
@@ -427,6 +431,7 @@ export class SheetCanvasFloatDomManagerService extends Disposable {
                     const initPosition = calcSheetFloatDomPosition(rect, renderObject.renderUnit.scene, skeleton.skeleton, target.worksheet);
                     const position$ = new BehaviorSubject<IFloatDomLayout>(initPosition);
 
+                    const domId = `${SHEET_FLOAT_DOM_PREFIX}${generateRandomId(6)}`;
                     const info: ICanvasFloatDomInfo = {
                         dispose: disposableCollection,
                         rect,
@@ -434,11 +439,13 @@ export class SheetCanvasFloatDomManagerService extends Disposable {
                         unitId,
                         subUnitId,
                         id: drawingId,
+                        domId,
                     };
 
                     this._canvasFloatDomService.addFloatDom({
                         position$,
                         id: drawingId,
+                        domId,
                         componentKey: floatDomParam.componentKey,
                         onPointerDown: (evt) => {
                             canvas.dispatchEvent(new PointerEvent(evt.type, evt));

packages/ui/src/services/dom/canvas-dom-layer.service.ts

@@ -32,6 +32,7 @@ export interface IFloatDomLayout extends IPosition {
 export interface IFloatDom {
     position$: Observable<IFloatDomLayout>;
     id: string;
+    domId?: string; // Ensure unique id for dom element at runtime
     componentKey: string | React.ComponentType;
     onPointerMove: (evt: PointerEvent | MouseEvent) => void;
     onPointerDown: (evt: PointerEvent | MouseEvent) => void;

packages/ui/src/views/components/dom/FloatDom.tsx

@@ -166,7 +166,7 @@ export const FloatDom = ({ unitId }: { unitId?: string }) => {
 
     return layers?.filter((layer) => layer[1].unitId === currentUnitId)?.map((layer) => (
         <FloatDomSingle
-            id={layer[0]}
+            id={layer[1].domId ?? layer[0]}
             layer={layer[1]}
             key={layer[0]}
         />