From 0c16b458c7a356ed5f9f0e6c1a37014e0c374767 Mon Sep 17 00:00:00 2001
From: Beatrice Mkumbo <charsbeaty@gmail.com>
Date: Wed, 8 Nov 2023 00:10:14 +0300
Subject: [PATCH] chore(web): storyblock ux update (#776)

---
 .../Block/builtin/common/Wrapper.tsx          |  9 ++++---
 .../StoryPanel/Block/builtin/common/hooks.ts  | 24 +++++++++++--------
 .../core/StoryPanel/SelectableArea/index.tsx  |  2 +-
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/common/Wrapper.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/common/Wrapper.tsx
index e1c2bd00ee..8179effe98 100644
--- a/web/src/beta/lib/core/StoryPanel/Block/builtin/common/Wrapper.tsx
+++ b/web/src/beta/lib/core/StoryPanel/Block/builtin/common/Wrapper.tsx
@@ -29,7 +29,6 @@ type Props = {
   dndEnabled?: boolean;
   settingsEnabled?: boolean;
   onClick?: () => void;
-  onClickAway?: () => void;
   onRemove?: () => void;
 };
 
@@ -44,7 +43,6 @@ const BlockWrapper: React.FC<Props> = ({
   dndEnabled = true,
   settingsEnabled = true,
   onClick,
-  onClickAway,
   onRemove,
 }) => {
   const {
@@ -81,12 +79,13 @@ const BlockWrapper: React.FC<Props> = ({
         setEditMode={setEditMode}
         onEditModeToggle={handleEditModeToggle}
         onSettingsToggle={handleSettingsToggle}
-        onRemove={onRemove}
-        onClickAway={onClickAway}>
+        onRemove={onRemove}>
         <Block
           padding={panelSettings?.padding?.value}
           isEditable={isEditable}
-          onClick={handleBlockClick}>
+          onClick={e => {
+            handleBlockClick(e);
+          }}>
           {children ?? (isEditable && <Template icon={icon} />)}
         </Block>
         {editMode && groupId && propertyId && settingsEnabled && (
diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/common/hooks.ts b/web/src/beta/lib/core/StoryPanel/Block/builtin/common/hooks.ts
index 41f606cd85..3e4f32f43e 100644
--- a/web/src/beta/lib/core/StoryPanel/Block/builtin/common/hooks.ts
+++ b/web/src/beta/lib/core/StoryPanel/Block/builtin/common/hooks.ts
@@ -1,4 +1,4 @@
-import { MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
+import { MouseEvent, useCallback, useMemo, useState } from "react";
 
 import { Spacing } from "@reearth/beta/lib/core/mantle";
 
@@ -21,22 +21,26 @@ export default ({
 }) => {
   const [editMode, setEditMode] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
-
-  useEffect(() => {
-    if (!isSelected && editMode) {
-      setEditMode(false);
-    }
-  }, [isSelected, editMode]);
-
   const title = useMemo(() => name ?? property?.title, [name, property?.title]);
+  const [clickCount, setClickCount] = useState(0);
 
   const handleBlockClick = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
       e.stopPropagation();
       if ((showSettings && isSelected) || editMode) return;
-      onClick?.();
+      if (clickCount === 0) {
+        setClickCount(1);
+        onClick?.();
+        setTimeout(() => {
+          setClickCount(0);
+        }, 300);
+      } else if (clickCount === 1) {
+        setClickCount(0);
+        setEditMode(true);
+        onClick?.();
+      }
     },
-    [onClick, showSettings, isSelected, editMode],
+    [showSettings, isSelected, editMode, clickCount, onClick],
   );
 
   const defaultSettings = useMemo(() => property?.default ?? property?.title, [property]);
diff --git a/web/src/beta/lib/core/StoryPanel/SelectableArea/index.tsx b/web/src/beta/lib/core/StoryPanel/SelectableArea/index.tsx
index 70d6086d27..99b19ff4e2 100644
--- a/web/src/beta/lib/core/StoryPanel/SelectableArea/index.tsx
+++ b/web/src/beta/lib/core/StoryPanel/SelectableArea/index.tsx
@@ -90,7 +90,7 @@ const Wrapper = styled.div<{ isSelected?: boolean; noBorder?: boolean }>`
   transition: all 0.3s;
   padding: 1px;
   position: relative;
-  overflow: hidden;
+  overflow: ${({ isSelected }) => (isSelected ? "visible" : "hidden")};
 
   :hover {
     border-color: ${({ isSelected, theme }) => !isSelected && theme.select.weaker};