fix(whiteboard): select text in whiteboard

libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx

@@ -21,9 +21,7 @@ export const ZoomBar: FC = () => {
     const zoom = app.useStore(zoomSelector);
 
     return (
-        <div
-            style={{ position: 'absolute', right: 10, bottom: 10, zIndex: 200 }}
-        >
+        <ZoomBarContainer>
             <MiniMapContainer>
                 <MiniMap />
             </MiniMapContainer>
@@ -52,10 +50,18 @@ export const ZoomBar: FC = () => {
                     <UnfoldMoreIcon style={{ transform: 'rotateZ(90deg)' }} />
                 </IconButton>
             </div>
-        </div>
+        </ZoomBarContainer>
     );
 };
 
+const ZoomBarContainer = styled('div')({
+    position: 'absolute',
+    right: 10,
+    bottom: 10,
+    zIndex: 200,
+    userSelect: 'none',
+});
+
 const MiniMapContainer = styled('div')({
     display: 'flex',
     justifyContent: 'flex-end',

libs/components/board-shapes/src/editor-util/EditorUtil.tsx

@@ -133,6 +133,7 @@ export class EditorUtil extends TDShapeUtil<T, E> {
                 <HTMLContainer ref={ref} {...events}>
                     <Container
                         ref={containerRef}
+                        editing={isEditing}
                         onPointerDown={stopPropagation}
                         onMouseEnter={activateIfEditing}
                         onDragEnter={activateIfEditing}
@@ -248,15 +249,15 @@ export class EditorUtil extends TDShapeUtil<T, E> {
 const PADDING = 16;
 // const MIN_CONTAINER_HEIGHT = 200;
 
-const Container = styled('div')({
+const Container = styled('div')<{ editing: boolean }>(({ editing }) => ({
     pointerEvents: 'all',
     position: 'relative',
     width: '100%',
-});
+    userSelect: editing ? 'unset' : 'none',
+}));
 
 const Mask = styled('div')({
     position: 'absolute',
-    userSelect: 'none',
     top: 0,
     left: 0,
     bottom: 0,