From 4f0232cbbf4668cef1ff5b5e3f662577045fd5a7 Mon Sep 17 00:00:00 2001
From: austaras <austaras@outlook.com>
Date: Mon, 8 Aug 2022 17:22:43 +0800
Subject: [PATCH] fix(whiteboard): select text in whiteboard

---
 .../board-draw/src/components/zoom-bar/ZoomBar.tsx | 14 ++++++++++----
 .../board-shapes/src/editor-util/EditorUtil.tsx    |  7 ++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx b/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx
index 97a82f3825..9a1693031d 100644
--- a/libs/components/board-draw/src/components/zoom-bar/ZoomBar.tsx
+++ b/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',
diff --git a/libs/components/board-shapes/src/editor-util/EditorUtil.tsx b/libs/components/board-shapes/src/editor-util/EditorUtil.tsx
index 430a3069f2..a7c56ebce1 100644
--- a/libs/components/board-shapes/src/editor-util/EditorUtil.tsx
+++ b/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,