From 38e9c89fa2221e59dc08b0d539e6aac6c877d918 Mon Sep 17 00:00:00 2001 From: beberiche Date: Sat, 17 Aug 2024 00:21:57 +0900 Subject: [PATCH 01/12] fix(yorkie_intelligence): integrate YorkieIntelligence into FormatBar --- .../components/common/TooltipToggleButton.tsx | 3 +- frontend/src/components/editor/Editor.tsx | 2 +- frontend/src/components/editor/FormatBar.tsx | 20 +++- .../components/editor/YorkieIntelligence.tsx | 94 +++++++++++-------- .../src/pages/workspace/document/Index.tsx | 8 +- 5 files changed, 77 insertions(+), 50 deletions(-) diff --git a/frontend/src/components/common/TooltipToggleButton.tsx b/frontend/src/components/common/TooltipToggleButton.tsx index 85247ce8..ba1ff90c 100644 --- a/frontend/src/components/common/TooltipToggleButton.tsx +++ b/frontend/src/components/common/TooltipToggleButton.tsx @@ -5,8 +5,7 @@ const style = { width: "25px", height: "25px", minWidth: "25px", - padding: "0", - margin: "2px", + margin: "4px", border: "none", fontWeight: "bold", }, diff --git a/frontend/src/components/editor/Editor.tsx b/frontend/src/components/editor/Editor.tsx index 12b6e92c..c1bb3f69 100644 --- a/frontend/src/components/editor/Editor.tsx +++ b/frontend/src/components/editor/Editor.tsx @@ -78,7 +78,7 @@ function Editor() { show: true, position: { top: coords.top - 8, - left: coords.left + 190, + left: coords.left + 30, }, selectedFormats: formats, })); diff --git a/frontend/src/components/editor/FormatBar.tsx b/frontend/src/components/editor/FormatBar.tsx index e58516f2..9e089814 100644 --- a/frontend/src/components/editor/FormatBar.tsx +++ b/frontend/src/components/editor/FormatBar.tsx @@ -1,6 +1,9 @@ -import { Popover, ToggleButtonGroup } from "@mui/material"; +import { useSelector } from "react-redux"; +import { ButtonGroup, Popover, ToggleButtonGroup, Box } from "@mui/material"; import TooltipToggleButton from "../common/TooltipToggleButton"; import { FormatBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils"; +import { selectSetting } from "../../store/settingSlice"; +import YorkieIntelligence from "./YorkieIntelligence"; interface FormatBarProps { formatBarState: FormatBarState; @@ -13,6 +16,8 @@ function FormatBar({ }: FormatBarProps) { const { toggleButtonChangeHandler } = useFormatUtils(); + const settingStore = useSelector(selectSetting); + return ( + {/* 가운데 정렬 */} + + {settingStore.yorkieIntelligence?.enable && } + + (null); + // const [intelligenceHeaderPivot, setIntelligenceHeaderPivot] = useState(null); const [intelligenceFooterPivot, setIntelligenceFooterPivot] = useState(null); - const [debouncedPivot, setDebouncedPivot] = useState(null); + // const [debouncedPivot, setDebouncedPivot] = useState(null); - useDebounce( - () => { - setDebouncedPivot(intelligenceHeaderPivot); - }, - 500, - [intelligenceHeaderPivot] - ); + // useDebounce( + // () => { + // setDebouncedPivot(intelligenceHeaderPivot); + // }, + // 500, + // [intelligenceHeaderPivot] + // ); useEffect(() => { document.addEventListener("selectionchange", function () { const intelligenceHeaderPivot = document.getElementById(INTELLIGENCE_HEADER_ID); const intelligenceFooterPivot = document.getElementById(INTELLIGENCE_FOOTER_ID); - setIntelligenceHeaderPivot(intelligenceHeaderPivot); + // setIntelligenceHeaderPivot(intelligenceHeaderPivot); setIntelligenceFooterPivot(intelligenceFooterPivot); if (!intelligenceHeaderPivot) { setFooterOpen(false); - setDebouncedPivot(null); + // setDebouncedPivot(null); } }); }, []); @@ -38,41 +36,55 @@ function YorkieIntelligence() { setFooterOpen((prev) => !prev); }; - if (!debouncedPivot || !intelligenceFooterPivot) return; + if (!intelligenceFooterPivot) return; return ( <> - */} + {/* {({ TransitionProps }) => ( + */} + {/* */} + {/* */} + + + + {/* */} + {/* */} + {/* + )} */} + {/* */} {footerOpen && createPortal( , diff --git a/frontend/src/pages/workspace/document/Index.tsx b/frontend/src/pages/workspace/document/Index.tsx index 2a3fa823..6a3ab7c5 100644 --- a/frontend/src/pages/workspace/document/Index.tsx +++ b/frontend/src/pages/workspace/document/Index.tsx @@ -8,15 +8,15 @@ import { useGetDocumentQuery } from "../../../hooks/api/workspaceDocument"; import { useGetWorkspaceQuery } from "../../../hooks/api/workspace"; import DocumentView from "../../../components/editor/DocumentView"; import { useYorkieDocument } from "../../../hooks/useYorkieDocument"; -import YorkieIntelligence from "../../../components/editor/YorkieIntelligence"; -import { selectSetting } from "../../../store/settingSlice"; +// import YorkieIntelligence from "../../../components/editor/YorkieIntelligence"; +// import { selectSetting } from "../../../store/settingSlice"; function DocumentIndex() { const dispatch = useDispatch(); const params = useParams(); const userStore = useSelector(selectUser); - const settingStore = useSelector(selectSetting); + // const settingStore = useSelector(selectSetting); const { data: workspace, isLoading: isWorkspaceLoading } = useGetWorkspaceQuery( params.workspaceSlug ); @@ -49,7 +49,7 @@ function DocumentIndex() { return ( - {settingStore.yorkieIntelligence?.enable && } + {/* {settingStore.yorkieIntelligence?.enable && } */} ); } From 7c9e5b1945bf1b555fe99a811022114c5c456c88 Mon Sep 17 00:00:00 2001 From: beberiche Date: Mon, 19 Aug 2024 15:32:20 +0900 Subject: [PATCH 02/12] refactor(formatBar) : change naming formatBar -> toolBar --- frontend/src/components/editor/Editor.tsx | 17 +++-- frontend/src/components/editor/FormatBar.tsx | 29 ++++----- .../components/editor/YorkieIntelligence.tsx | 62 ++++--------------- frontend/src/hooks/useFormatUtils.ts | 6 +- .../src/pages/workspace/document/Index.tsx | 1 - 5 files changed, 34 insertions(+), 81 deletions(-) diff --git a/frontend/src/components/editor/Editor.tsx b/frontend/src/components/editor/Editor.tsx index c1bb3f69..8dbc5901 100644 --- a/frontend/src/components/editor/Editor.tsx +++ b/frontend/src/components/editor/Editor.tsx @@ -14,9 +14,9 @@ import { useCreateUploadUrlMutation, useUploadFileMutation } from "../../hooks/a import { selectWorkspace } from "../../store/workspaceSlice"; import { ScrollSyncPane } from "react-scroll-sync"; import { selectSetting } from "../../store/settingSlice"; -import { FormatBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils"; +import { ToolBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils"; -import FormatBar from "./FormatBar"; +import ToolBar from "./FormatBar"; function Editor() { const dispatch = useDispatch(); @@ -28,7 +28,7 @@ function Editor() { const { mutateAsync: createUploadUrl } = useCreateUploadUrlMutation(); const { mutateAsync: uploadFile } = useUploadFileMutation(); - const [formatBarState, setFormatBarState] = useState({ + const [toolBarState, setToolBarState] = useState({ show: false, position: { top: 0, left: 0 }, selectedFormats: new Set(), @@ -73,7 +73,7 @@ function Editor() { checkAndAddFormat("`", FormatType.CODE); checkAndAddFormat("~~", FormatType.STRIKETHROUGH); - setFormatBarState((prev) => ({ + setToolBarState((prev) => ({ ...prev, show: true, position: { @@ -84,7 +84,7 @@ function Editor() { })); } } else { - setFormatBarState((prev) => ({ + setToolBarState((prev) => ({ ...prev, show: false, selectedFormats: new Set(), @@ -185,11 +185,8 @@ function Editor() { minHeight: "100%", }} /> - {Boolean(formatBarState.show && editorStore.cmView) && ( - + {Boolean(toolBarState.show && editorStore.cmView) && ( + )} diff --git a/frontend/src/components/editor/FormatBar.tsx b/frontend/src/components/editor/FormatBar.tsx index 9e089814..df87e4f6 100644 --- a/frontend/src/components/editor/FormatBar.tsx +++ b/frontend/src/components/editor/FormatBar.tsx @@ -1,23 +1,19 @@ -import { useSelector } from "react-redux"; import { ButtonGroup, Popover, ToggleButtonGroup, Box } from "@mui/material"; import TooltipToggleButton from "../common/TooltipToggleButton"; -import { FormatBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils"; -import { selectSetting } from "../../store/settingSlice"; +import { ToolBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils"; import YorkieIntelligence from "./YorkieIntelligence"; -interface FormatBarProps { - formatBarState: FormatBarState; - onChangeFormatBarState: React.Dispatch>; +interface ToolBarProps { + toolBarState: ToolBarState; + onChangeToolBarState: React.Dispatch>; } -function FormatBar({ - formatBarState: { show: showFormatBar, position: formatBarPosition, selectedFormats }, - onChangeFormatBarState, -}: FormatBarProps) { +function ToolBar({ + toolBarState: { show: showFormatBar, position: formatBarPosition, selectedFormats }, + onChangeToolBarState, +}: ToolBarProps) { const { toggleButtonChangeHandler } = useFormatUtils(); - const settingStore = useSelector(selectSetting); - return ( onChangeFormatBarState((prev) => ({ ...prev, show: false }))} + onClose={() => onChangeToolBarState((prev) => ({ ...prev, show: false }))} anchorOrigin={{ vertical: "top", horizontal: "left", @@ -43,15 +39,14 @@ function FormatBar({ }, }} > - {/* 가운데 정렬 */} - {settingStore.yorkieIntelligence?.enable && } + @@ -88,4 +83,4 @@ function FormatBar({ ); } -export default FormatBar; +export default ToolBar; diff --git a/frontend/src/components/editor/YorkieIntelligence.tsx b/frontend/src/components/editor/YorkieIntelligence.tsx index 953b2eab..91528876 100644 --- a/frontend/src/components/editor/YorkieIntelligence.tsx +++ b/frontend/src/components/editor/YorkieIntelligence.tsx @@ -1,34 +1,21 @@ import { Button, Typography } from "@mui/material"; import { useEffect, useState } from "react"; import { createPortal } from "react-dom"; -import { INTELLIGENCE_FOOTER_ID, INTELLIGENCE_HEADER_ID } from "../../constants/intelligence"; +import { INTELLIGENCE_FOOTER_ID } from "../../constants/intelligence"; import YorkieIntelligenceFooter from "./YorkieIntelligenceFooter"; +import { useSelector } from "react-redux"; +import { selectSetting } from "../../store/settingSlice"; function YorkieIntelligence() { const [footerOpen, setFooterOpen] = useState(false); - // const [intelligenceHeaderPivot, setIntelligenceHeaderPivot] = useState(null); const [intelligenceFooterPivot, setIntelligenceFooterPivot] = useState(null); - // const [debouncedPivot, setDebouncedPivot] = useState(null); - // useDebounce( - // () => { - // setDebouncedPivot(intelligenceHeaderPivot); - // }, - // 500, - // [intelligenceHeaderPivot] - // ); + const { yorkieIntelligence } = useSelector(selectSetting); useEffect(() => { document.addEventListener("selectionchange", function () { - const intelligenceHeaderPivot = document.getElementById(INTELLIGENCE_HEADER_ID); const intelligenceFooterPivot = document.getElementById(INTELLIGENCE_FOOTER_ID); - // setIntelligenceHeaderPivot(intelligenceHeaderPivot); setIntelligenceFooterPivot(intelligenceFooterPivot); - - if (!intelligenceHeaderPivot) { - setFooterOpen(false); - // setDebouncedPivot(null); - } }); }, []); @@ -36,56 +23,31 @@ function YorkieIntelligence() { setFooterOpen((prev) => !prev); }; - if (!intelligenceFooterPivot) return; + const activated = intelligenceFooterPivot && yorkieIntelligence?.enable; return ( <> - {/* */} - {/* {({ TransitionProps }) => ( - */} - {/* */} - {/* */} - - {/* */} - {/* */} - {/* - )} */} - {/* */} {footerOpen && + activated && createPortal( , intelligenceFooterPivot diff --git a/frontend/src/hooks/useFormatUtils.ts b/frontend/src/hooks/useFormatUtils.ts index 9443350d..deedf1e0 100644 --- a/frontend/src/hooks/useFormatUtils.ts +++ b/frontend/src/hooks/useFormatUtils.ts @@ -6,7 +6,7 @@ import { Dispatch, SetStateAction } from "react"; import { useSelector } from "react-redux"; import { selectEditor } from "../store/editorSlice"; -export interface FormatBarState { +export interface ToolBarState { show: boolean; position: { top: number; left: number }; selectedFormats: Set; @@ -122,7 +122,7 @@ export const useFormatUtils = () => { const toggleButtonChangeHandler = useCallback( ( selectedFormats: Set, - onChangeFormatBarState: Dispatch> + onChangeToolBarState: Dispatch> ) => { return (_event: MouseEvent, format: FormatType) => { if (!cmView) return; @@ -133,7 +133,7 @@ export const useFormatUtils = () => { } else { newSelectedFormats.add(format); } - onChangeFormatBarState((prev) => ({ + onChangeToolBarState((prev) => ({ ...prev, selectedFormats: newSelectedFormats, })); diff --git a/frontend/src/pages/workspace/document/Index.tsx b/frontend/src/pages/workspace/document/Index.tsx index 6a3ab7c5..38838d93 100644 --- a/frontend/src/pages/workspace/document/Index.tsx +++ b/frontend/src/pages/workspace/document/Index.tsx @@ -49,7 +49,6 @@ function DocumentIndex() { return ( - {/* {settingStore.yorkieIntelligence?.enable && } */} ); } From 199bb15569da143cdb450a88f8c0b85b00bb9fd4 Mon Sep 17 00:00:00 2001 From: beberiche Date: Mon, 19 Aug 2024 23:12:44 +0900 Subject: [PATCH 03/12] chore(index.tsx): remove unused code --- frontend/src/pages/workspace/document/Index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/pages/workspace/document/Index.tsx b/frontend/src/pages/workspace/document/Index.tsx index 38838d93..8ae61c30 100644 --- a/frontend/src/pages/workspace/document/Index.tsx +++ b/frontend/src/pages/workspace/document/Index.tsx @@ -8,15 +8,12 @@ import { useGetDocumentQuery } from "../../../hooks/api/workspaceDocument"; import { useGetWorkspaceQuery } from "../../../hooks/api/workspace"; import DocumentView from "../../../components/editor/DocumentView"; import { useYorkieDocument } from "../../../hooks/useYorkieDocument"; -// import YorkieIntelligence from "../../../components/editor/YorkieIntelligence"; -// import { selectSetting } from "../../../store/settingSlice"; function DocumentIndex() { const dispatch = useDispatch(); const params = useParams(); const userStore = useSelector(selectUser); - // const settingStore = useSelector(selectSetting); const { data: workspace, isLoading: isWorkspaceLoading } = useGetWorkspaceQuery( params.workspaceSlug ); From e1d0b944c20ea4fdf49d8b52021012b353bcf4a8 Mon Sep 17 00:00:00 2001 From: beberiche Date: Mon, 19 Aug 2024 23:12:57 +0900 Subject: [PATCH 04/12] chore(ToolBar): rename FormatBar to ToolBar - change Box to Divider - set up flex using stack component - remove TooltipToggleButton style margin and minWidth --- .../components/common/TooltipToggleButton.tsx | 2 - frontend/src/components/editor/FormatBar.tsx | 86 ------------------ frontend/src/components/editor/ToolBar.tsx | 89 +++++++++++++++++++ 3 files changed, 89 insertions(+), 88 deletions(-) delete mode 100644 frontend/src/components/editor/FormatBar.tsx create mode 100644 frontend/src/components/editor/ToolBar.tsx diff --git a/frontend/src/components/common/TooltipToggleButton.tsx b/frontend/src/components/common/TooltipToggleButton.tsx index ba1ff90c..26d8a1aa 100644 --- a/frontend/src/components/common/TooltipToggleButton.tsx +++ b/frontend/src/components/common/TooltipToggleButton.tsx @@ -4,8 +4,6 @@ const style = { toggleButton: { width: "25px", height: "25px", - minWidth: "25px", - margin: "4px", border: "none", fontWeight: "bold", }, diff --git a/frontend/src/components/editor/FormatBar.tsx b/frontend/src/components/editor/FormatBar.tsx deleted file mode 100644 index df87e4f6..00000000 --- a/frontend/src/components/editor/FormatBar.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { ButtonGroup, Popover, ToggleButtonGroup, Box } from "@mui/material"; -import TooltipToggleButton from "../common/TooltipToggleButton"; -import { ToolBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils"; -import YorkieIntelligence from "./YorkieIntelligence"; - -interface ToolBarProps { - toolBarState: ToolBarState; - onChangeToolBarState: React.Dispatch>; -} - -function ToolBar({ - toolBarState: { show: showFormatBar, position: formatBarPosition, selectedFormats }, - onChangeToolBarState, -}: ToolBarProps) { - const { toggleButtonChangeHandler } = useFormatUtils(); - - return ( - onChangeToolBarState((prev) => ({ ...prev, show: false }))} - anchorOrigin={{ - vertical: "top", - horizontal: "left", - }} - transformOrigin={{ - vertical: "bottom", - horizontal: "left", - }} - disableAutoFocus - sx={{ - "& .MuiPopover-paper": { - display: "flex", - alignItems: "center", - }, - }} - > - - - - - - - i - - - B - - - ~ - - - {""} - - - - ); -} - -export default ToolBar; diff --git a/frontend/src/components/editor/ToolBar.tsx b/frontend/src/components/editor/ToolBar.tsx new file mode 100644 index 00000000..2beb671c --- /dev/null +++ b/frontend/src/components/editor/ToolBar.tsx @@ -0,0 +1,89 @@ +import { Popover, ToggleButtonGroup, Divider, Stack } from "@mui/material"; +import TooltipToggleButton from "../common/TooltipToggleButton"; +import { ToolBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils"; +import YorkieIntelligence from "./YorkieIntelligence"; + +interface ToolBarProps { + toolBarState: ToolBarState; + onChangeToolBarState: React.Dispatch>; +} + +function ToolBar({ + toolBarState: { show: showFormatBar, position: formatBarPosition, selectedFormats }, + onChangeToolBarState, +}: ToolBarProps) { + const { toggleButtonChangeHandler } = useFormatUtils(); + + return ( + onChangeToolBarState((prev) => ({ ...prev, show: false }))} + anchorOrigin={{ + vertical: "top", + horizontal: "left", + }} + transformOrigin={{ + vertical: "bottom", + horizontal: "left", + }} + disableAutoFocus + > + + + + + + + i + + + B + + + ~ + + + {""} + + + + + + ); +} + +export default ToolBar; From 140119f799133a8718c314be5de47fbacdb86e22 Mon Sep 17 00:00:00 2001 From: beberiche Date: Mon, 19 Aug 2024 23:26:39 +0900 Subject: [PATCH 05/12] chore(YorkieIntelligence): change setting activated - remove style pointerEvents and, use disabled attribute - remove true check (activated) --- .../src/components/editor/YorkieIntelligence.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/editor/YorkieIntelligence.tsx b/frontend/src/components/editor/YorkieIntelligence.tsx index 91528876..2ab10fe7 100644 --- a/frontend/src/components/editor/YorkieIntelligence.tsx +++ b/frontend/src/components/editor/YorkieIntelligence.tsx @@ -35,22 +35,24 @@ function YorkieIntelligence() { "&:hover": { border: "none", }, - filter: activated ? "none" : "grayscale(100%)", - pointerEvents: activated ? "auto" : "none", - opacity: activated ? 1 : 0.7, }} + disabled={!activated} > - yorkie_img + yorkie_img Yorkie Intelligence {footerOpen && - activated && createPortal( , - intelligenceFooterPivot + intelligenceFooterPivot as Element )} ); From f10ca05c1430cfa50832ef520889271fc535be8c Mon Sep 17 00:00:00 2001 From: beberiche Date: Mon, 19 Aug 2024 23:29:13 +0900 Subject: [PATCH 06/12] chore(Editor): remove true check edtiorStore.cmView --- frontend/src/components/editor/Editor.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/editor/Editor.tsx b/frontend/src/components/editor/Editor.tsx index 8dbc5901..799d18c5 100644 --- a/frontend/src/components/editor/Editor.tsx +++ b/frontend/src/components/editor/Editor.tsx @@ -16,7 +16,7 @@ import { ScrollSyncPane } from "react-scroll-sync"; import { selectSetting } from "../../store/settingSlice"; import { ToolBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils"; -import ToolBar from "./FormatBar"; +import ToolBar from "./ToolBar"; function Editor() { const dispatch = useDispatch(); @@ -185,7 +185,7 @@ function Editor() { minHeight: "100%", }} /> - {Boolean(toolBarState.show && editorStore.cmView) && ( + {Boolean(toolBarState.show) && ( )} From 7fd6396b5c3d332237da877f44a47003fd6fe817 Mon Sep 17 00:00:00 2001 From: beberiche Date: Mon, 19 Aug 2024 23:57:52 +0900 Subject: [PATCH 07/12] chore(YorkieIntelligence): remove variable activated - change type assertion(intelligenceFooterPivot) to if conditional statement --- frontend/src/components/editor/YorkieIntelligence.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/editor/YorkieIntelligence.tsx b/frontend/src/components/editor/YorkieIntelligence.tsx index 2ab10fe7..4f7ba69b 100644 --- a/frontend/src/components/editor/YorkieIntelligence.tsx +++ b/frontend/src/components/editor/YorkieIntelligence.tsx @@ -23,7 +23,7 @@ function YorkieIntelligence() { setFooterOpen((prev) => !prev); }; - const activated = intelligenceFooterPivot && yorkieIntelligence?.enable; + if (!intelligenceFooterPivot) return; return ( <> @@ -36,13 +36,13 @@ function YorkieIntelligence() { border: "none", }, }} - disabled={!activated} + disabled={!yorkieIntelligence?.enable} > yorkie_img Yorkie Intelligence @@ -52,7 +52,7 @@ function YorkieIntelligence() { {footerOpen && createPortal( , - intelligenceFooterPivot as Element + intelligenceFooterPivot )} ); From 635c4d15e96fcaedb01c349a6514ac003c6e91e7 Mon Sep 17 00:00:00 2001 From: beberiche Date: Tue, 20 Aug 2024 00:01:21 +0900 Subject: [PATCH 08/12] refactor(YorkieIntelligence): add set up debousing for showToolBar - change naming showFormatBar -> showToolBar - add set up Transition (Effect: Fade, delay: 300ms) --- frontend/src/components/editor/ToolBar.tsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/editor/ToolBar.tsx b/frontend/src/components/editor/ToolBar.tsx index 2beb671c..d5f57e0e 100644 --- a/frontend/src/components/editor/ToolBar.tsx +++ b/frontend/src/components/editor/ToolBar.tsx @@ -1,7 +1,9 @@ -import { Popover, ToggleButtonGroup, Divider, Stack } from "@mui/material"; +import { Popover, ToggleButtonGroup, Divider, Stack, Fade } from "@mui/material"; import TooltipToggleButton from "../common/TooltipToggleButton"; import { ToolBarState, useFormatUtils, FormatType } from "../../hooks/useFormatUtils"; import YorkieIntelligence from "./YorkieIntelligence"; +import { useDebounce } from "react-use"; +import { useState } from "react"; interface ToolBarProps { toolBarState: ToolBarState; @@ -9,14 +11,25 @@ interface ToolBarProps { } function ToolBar({ - toolBarState: { show: showFormatBar, position: formatBarPosition, selectedFormats }, + toolBarState: { show: showToolBar, position: formatBarPosition, selectedFormats }, onChangeToolBarState, }: ToolBarProps) { const { toggleButtonChangeHandler } = useFormatUtils(); + const [debouncedShowToolBar, setDebouncedShowToolBar] = useState(null); + + useDebounce( + () => { + setDebouncedShowToolBar(showToolBar); + }, + 500, + [showToolBar] + ); + + if (!debouncedShowToolBar) return; return ( From cd6cc30b3b83989bcc5b96b57f2fa8a1b7ad5179 Mon Sep 17 00:00:00 2001 From: beberiche Date: Tue, 20 Aug 2024 12:15:01 +0900 Subject: [PATCH 09/12] refactor(YorkieIntelligence): remove unnecessary selectionchange event listener --- frontend/src/components/editor/YorkieIntelligence.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/editor/YorkieIntelligence.tsx b/frontend/src/components/editor/YorkieIntelligence.tsx index 4f7ba69b..15c6138e 100644 --- a/frontend/src/components/editor/YorkieIntelligence.tsx +++ b/frontend/src/components/editor/YorkieIntelligence.tsx @@ -13,10 +13,8 @@ function YorkieIntelligence() { const { yorkieIntelligence } = useSelector(selectSetting); useEffect(() => { - document.addEventListener("selectionchange", function () { - const intelligenceFooterPivot = document.getElementById(INTELLIGENCE_FOOTER_ID); - setIntelligenceFooterPivot(intelligenceFooterPivot); - }); + const intelligenceFooterPivot = document.getElementById(INTELLIGENCE_FOOTER_ID); + setIntelligenceFooterPivot(intelligenceFooterPivot); }, []); const handleFooterOpen = () => { From 97727e711024c0aa300f0cf918e07f21126d7431 Mon Sep 17 00:00:00 2001 From: beberiche Date: Tue, 20 Aug 2024 15:44:30 +0900 Subject: [PATCH 10/12] chore(Editor): adjust position of toolbar in Editor.tsx --- frontend/src/components/editor/Editor.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/editor/Editor.tsx b/frontend/src/components/editor/Editor.tsx index 799d18c5..89223e98 100644 --- a/frontend/src/components/editor/Editor.tsx +++ b/frontend/src/components/editor/Editor.tsx @@ -73,12 +73,13 @@ function Editor() { checkAndAddFormat("`", FormatType.CODE); checkAndAddFormat("~~", FormatType.STRIKETHROUGH); + // TODO: If the size of FormatBar changes, adjust the position accordingly. setToolBarState((prev) => ({ ...prev, show: true, position: { - top: coords.top - 8, - left: coords.left + 30, + top: coords.top - 5, + left: coords.left, }, selectedFormats: formats, })); From c401148e1b4fc81ac0ee3fc76d7c0fa8b40abf3e Mon Sep 17 00:00:00 2001 From: beberiche Date: Tue, 20 Aug 2024 16:20:51 +0900 Subject: [PATCH 11/12] fix(YorkieIntelligence): improve intelligence footer pivot handling - improve intelligence footer pivot error when changing selection after text formatting --- frontend/src/components/editor/YorkieIntelligence.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontend/src/components/editor/YorkieIntelligence.tsx b/frontend/src/components/editor/YorkieIntelligence.tsx index 15c6138e..26b7c335 100644 --- a/frontend/src/components/editor/YorkieIntelligence.tsx +++ b/frontend/src/components/editor/YorkieIntelligence.tsx @@ -13,8 +13,15 @@ function YorkieIntelligence() { const { yorkieIntelligence } = useSelector(selectSetting); useEffect(() => { + // initialize intelligence footer pivot const intelligenceFooterPivot = document.getElementById(INTELLIGENCE_FOOTER_ID); setIntelligenceFooterPivot(intelligenceFooterPivot); + + document.addEventListener("selectionchange", function () { + // If changed selection (ex : text formatting), update the intelligence footer pivot + const intelligenceFooterPivot = document.getElementById(INTELLIGENCE_FOOTER_ID); + setIntelligenceFooterPivot(intelligenceFooterPivot); + }); }, []); const handleFooterOpen = () => { From df14819e3e45ee951a005198265c7a3fc980aa1f Mon Sep 17 00:00:00 2001 From: devleejb Date: Tue, 20 Aug 2024 16:24:47 +0900 Subject: [PATCH 12/12] Change `TODO` comment --- frontend/src/components/editor/Editor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/editor/Editor.tsx b/frontend/src/components/editor/Editor.tsx index 89223e98..d7010279 100644 --- a/frontend/src/components/editor/Editor.tsx +++ b/frontend/src/components/editor/Editor.tsx @@ -73,7 +73,7 @@ function Editor() { checkAndAddFormat("`", FormatType.CODE); checkAndAddFormat("~~", FormatType.STRIKETHROUGH); - // TODO: If the size of FormatBar changes, adjust the position accordingly. + // TODO: Modify the rendering method so that it is not affected by the size of the Toolbar setToolBarState((prev) => ({ ...prev, show: true,