Merge pull request #49 from HaecheonLee/enh/open-note-in-tab-after-clicking-button

Open note in tab after clicking edit button

src/components/EditorCanvas/Note.jsx

@@ -61,22 +61,18 @@ export default function Note({ data, onMouseDown }) {
   };
 
   const edit = () => {
-    if (layout.sidebar) {
+    setSelectedElement((prev) => ({
-      setSelectedElement((prev) => ({
+      ...prev,
-        ...prev,
+      ...(layout.sidebar && { currentTab: Tab.NOTES }),
-        currentTab: Tab.NOTES,
+      ...(!layout.sidebar && { element: ObjectType.NOTE }),
-      }));
+      id: data.id,
-      if (selectedElement.currentTab !== Tab.NOTES) return;
+      open: true,
+    }));
+
+    if (layout.sidebar && selectedElement.currentTab === Tab.NOTES) {
       document
         .getElementById(`scroll_note_${data.id}`)
         .scrollIntoView({ behavior: "smooth" });
-    } else {
-      setSelectedElement((prev) => ({
-        ...prev,
-        element: ObjectType.NOTE,
-        id: data.id,
-        open: true,
-      }));
     }
   };
 

src/components/EditorSidePanel/NotesTab/NotesTab.jsx

@@ -1,20 +1,26 @@
-import { useState } from "react";
 import { Row, Col, Button, Collapse } from "@douyinfe/semi-ui";
 import { IconPlus } from "@douyinfe/semi-icons";
-import { useNotes } from "../../../hooks";
+import { useNotes, useSelect } from "../../../hooks";
 import Empty from "../Empty";
 import SearchBar from "./SearchBar";
 import NoteInfo from "./NoteInfo";
 
 export default function NotesTab() {
   const { notes, addNote } = useNotes();
-  const [activeKey, setActiveKey] = useState("");
+  const { selectedElement, setSelectedElement } = useSelect();
 
   return (
     <>
       <Row gutter={6}>
         <Col span={16}>
-          <SearchBar setActiveKey={setActiveKey} />
+          <SearchBar
+            setActiveKey={(activeKey) =>
+              setSelectedElement((prev) => ({
+                ...prev,
+                id: parseInt(activeKey),
+              }))
+            }
+          />
         </Col>
         <Col span={8}>
           <Button icon={<IconPlus />} block onClick={() => addNote()}>
@@ -26,8 +32,14 @@ export default function NotesTab() {
         <Empty title="No text notes" text="Add notes cuz why not!" />
       ) : (
         <Collapse
-          activeKey={activeKey}
+          activeKey={selectedElement.open ? `${selectedElement.id}` : ""}
-          onChange={(k) => setActiveKey(k)}
+          onChange={(activeKey) => {
+            setSelectedElement((prev) => ({
+              ...prev,
+              id: parseInt(activeKey),
+              open: true,
+            }));
+          }}
           accordion
         >
           {notes.map((n, i) => (