brrr

src/components/area.jsx

@@ -1,13 +1,33 @@
 import { React, useContext, useState } from "react";
-import { Button } from "@douyinfe/semi-ui";
+import { Button, Popover, Input, Toast } from "@douyinfe/semi-ui";
-import { IconEdit } from "@douyinfe/semi-icons";
+import {
-import { Tab } from "../data/data";
+  IconEdit,
-import { LayoutContext, TabContext } from "../pages/editor";
+  IconCheckboxTick,
+  IconDeleteStroked,
+} from "@douyinfe/semi-icons";
+import {
+  Tab,
+  Action,
+  ObjectType,
+  tableThemes,
+  defaultTableTheme,
+} from "../data/data";
+import {
+  AreaContext,
+  LayoutContext,
+  TabContext,
+  UndoRedoContext,
+} from "../pages/editor";
 
 export default function Area(props) {
   const [hovered, setHovered] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [editField, setEditField] = useState("");
   const { layout } = useContext(LayoutContext);
   const { tab, setTab } = useContext(TabContext);
+  const { updateArea, deleteArea } = useContext(AreaContext);
+  const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
 
   const handleMouseDown = (e, dir) => {
     props.setResize({ id: props.areaData.id, dir: dir });
@@ -24,7 +44,11 @@ export default function Area(props) {
   return (
     <g
       onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
+      onMouseLeave={() => {
+        setHovered(false);
+        setVisible(false);
+        setSaved(false);
+      }}
     >
       <foreignObject
         key={props.areaData.id}
@@ -51,24 +75,204 @@ export default function Area(props) {
         </div>
         {hovered && (
           <div className="absolute top-2 right-3">
-            <Button
+            <Popover
-              icon={<IconEdit />}
+              visible={visible}
-              size="small"
+              content={
-              theme="solid"
+                <div>
-              style={{
+                  <div className="font-semibold mb-2 ms-1">
-                backgroundColor: "#2f68ad",
+                    Edit subject area
-                opacity: "0.7",
+                  </div>
-              }}
+                  <div className="w-[280px] flex items-center mb-2">
-              onClick={() => {
+                    <Input
-                if (layout.sidebar) {
+                      value={props.areaData.name}
-                  setTab(Tab.subject_areas);
+                      placeholder="Name"
-                  if (tab !== Tab.subject_areas) return;
+                      className="me-2"
-                  document
+                      onChange={(value) =>
-                    .getElementById(`scroll_area_${props.areaData.id}`)
+                        updateArea(props.areaData.id, { name: value })
-                    .scrollIntoView({ behavior: "smooth" });
+                      }
-                }
+                      onFocus={(e) => setEditField({ name: e.target.value })}
-              }}
+                      onBlur={(e) => {
-            ></Button>
+                        setSaved(true);
+                        if (e.target.value === editField.name) return;
+                        setUndoStack((prev) => [
+                          ...prev,
+                          {
+                            action: Action.EDIT,
+                            element: ObjectType.AREA,
+                            aid: props.areaData.id,
+                            undo: editField,
+                            redo: { name: e.target.value },
+                          },
+                        ]);
+                        setRedoStack([]);
+                      }}
+                    />
+                    <Popover
+                      content={
+                        <div>
+                          <div className="flex justify-between items-center p-2">
+                            <div className="font-medium">Theme</div>
+                            <Button
+                              type="tertiary"
+                              size="small"
+                              onClick={() =>
+                                updateArea(props.areaData.id, {
+                                  color: defaultTableTheme,
+                                })
+                              }
+                            >
+                              Clear
+                            </Button>
+                          </div>
+                          <hr />
+                          <div className="py-3">
+                            <div>
+                              {tableThemes
+                                .slice(0, Math.ceil(tableThemes.length / 2))
+                                .map((c) => (
+                                  <button
+                                    key={c}
+                                    style={{ backgroundColor: c }}
+                                    className="p-3 rounded-full mx-1"
+                                    onClick={() => {
+                                      setUndoStack((prev) => [
+                                        ...prev,
+                                        {
+                                          action: Action.EDIT,
+                                          element: ObjectType.AREA,
+                                          aid: props.areaData.id,
+                                          undo: { color: props.areaData.color },
+                                          redo: { color: c },
+                                        },
+                                      ]);
+                                      setRedoStack([]);
+                                      updateArea(props.areaData.id, {
+                                        color: c,
+                                      });
+                                    }}
+                                  >
+                                    {props.areaData.color === c ? (
+                                      <IconCheckboxTick
+                                        style={{ color: "white" }}
+                                      />
+                                    ) : (
+                                      <IconCheckboxTick style={{ color: c }} />
+                                    )}
+                                  </button>
+                                ))}
+                            </div>
+                            <div className="mt-3">
+                              {tableThemes
+                                .slice(Math.ceil(tableThemes.length / 2))
+                                .map((c) => (
+                                  <button
+                                    key={c}
+                                    style={{ backgroundColor: c }}
+                                    className="p-3 rounded-full mx-1"
+                                    onClick={() => {
+                                      setUndoStack((prev) => [
+                                        ...prev,
+                                        {
+                                          action: Action.EDIT,
+                                          element: ObjectType.AREA,
+                                          aid: props.areaData.id,
+                                          undo: { color: props.areaData.color },
+                                          redo: { color: c },
+                                        },
+                                      ]);
+                                      setRedoStack([]);
+                                      updateArea(props.areaData.id, {
+                                        color: c,
+                                      });
+                                    }}
+                                  >
+                                    <IconCheckboxTick
+                                      style={{
+                                        color:
+                                          props.areaData.color === c
+                                            ? "white"
+                                            : c,
+                                      }}
+                                    />
+                                  </button>
+                                ))}
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      trigger="click"
+                      position="bottomLeft"
+                      showArrow
+                    >
+                      <div
+                        className="h-[32px] w-[32px] rounded"
+                        style={{ backgroundColor: props.areaData.color }}
+                      />
+                    </Popover>
+                  </div>
+                  <div className="flex">
+                    <Button
+                      icon={<IconDeleteStroked />}
+                      type="danger"
+                      block
+                      onClick={() => {
+                        Toast.success(`Area deleted!`);
+                        deleteArea(props.areaData.id, true);
+                      }}
+                    >
+                      Delete
+                    </Button>
+                    <Button
+                      block
+                      style={{ marginLeft: "8px" }}
+                      onClick={() => {
+                        if (!saved) {
+                          if (props.areaData.name === editField.name) return;
+                          setUndoStack((prev) => [
+                            ...prev,
+                            {
+                              action: Action.EDIT,
+                              element: ObjectType.AREA,
+                              aid: props.areaData.id,
+                              undo: editField,
+                              redo: { name: props.areaData.name },
+                            },
+                          ]);
+                          setRedoStack([]);
+                          setSaved(false);
+                        }
+                      }}
+                    >
+                      Save
+                    </Button>
+                  </div>
+                </div>
+              }
+              trigger="custom"
+              position="rightTop"
+              showArrow
+            >
+              <Button
+                icon={<IconEdit />}
+                size="small"
+                theme="solid"
+                style={{
+                  backgroundColor: "#2f68ad",
+                  opacity: "0.7",
+                }}
+                onClick={() => {
+                  if (layout.sidebar) {
+                    setTab(Tab.subject_areas);
+                    if (tab !== Tab.subject_areas) return;
+                    document
+                      .getElementById(`scroll_area_${props.areaData.id}`)
+                      .scrollIntoView({ behavior: "smooth" });
+                  } else {
+                    setVisible(true);
+                  }
+                }}
+              ></Button>
+            </Popover>
           </div>
         )}
       </foreignObject>

src/components/area_overview.jsx

@@ -222,8 +222,7 @@ export default function AreaOverview(props) {
                 <Button
                   icon={<IconDeleteStroked />}
                   type="danger"
-                  onClick={(e) => {
+                  onClick={() => {
-                    e.stopPropagation();
                     Toast.success(`Area deleted!`);
                     deleteArea(i, true);
                   }}

src/components/control_panel.jsx

@@ -161,14 +161,7 @@ export default function ControlPanel(props) {
       setRedoStack((prev) => [...prev, a]);
     } else if (a.action === Action.EDIT) {
       if (a.element === ObjectType.AREA) {
-        setAreas((prev) =>
+        updateArea(a.aid, a.undo);
-          prev.map((n) => {
-            if (n.id === a.aid) {
-              return { ...n, ...a.undo };
-            }
-            return n;
-          })
-        );
       } else if (a.element === ObjectType.NOTE) {
         updateNote(a.nid, a.undo);
       } else if (a.element === ObjectType.TABLE) {
@@ -293,14 +286,7 @@ export default function ControlPanel(props) {
       setUndoStack((prev) => [...prev, a]);
     } else if (a.action === Action.EDIT) {
       if (a.element === ObjectType.AREA) {
-        setAreas((prev) =>
+        updateArea(a.aid, a.redo);
-          prev.map((n) => {
-            if (n.id === a.aid) {
-              return { ...n, ...a.redo };
-            }
-            return n;
-          })
-        );
       } else if (a.element === ObjectType.NOTE) {
         updateNote(a.nid, a.redo);
       } else if (a.element === ObjectType.TABLE) {

src/components/notes_overview.jsx

@@ -102,8 +102,6 @@ export default function NotesOverview(props) {
             >
               <div className="flex justify-between align-top">
                 <TextArea
-                  field="content"
-                  label="Content"
                   placeholder="Add content"
                   value={n.content}
                   autosize

src/components/table.jsx

@@ -22,7 +22,6 @@ import {
   Input,
   TextArea,
   Card,
-  Form,
   Checkbox,
   Row,
   Col,
@@ -42,12 +41,10 @@ import {
 
 export default function Table(props) {
   const [isHovered, setIsHovered] = useState(false);
-  const [indexActiveKey, setIndexActiveKey] = useState("");
   const [hoveredField, setHoveredField] = useState(-1);
   const [visible, setVisible] = useState(false);
   const { layout } = useContext(LayoutContext);
-  const { setTables, deleteTable, updateTable, updateField } =
+  const { deleteTable, updateTable, updateField } = useContext(TableContext);
-    useContext(TableContext);
   const { tab, setTab } = useContext(TabContext);
   const { settings } = useContext(SettingsContext);
 
@@ -813,7 +810,6 @@ export default function Table(props) {
               <Button
                 block
                 onClick={() => {
-                  setIndexActiveKey("1");
                   setUndoStack((prev) => [
                     ...prev,
                     {