From 5b6c34d9aa0ee8792cbc2c453bc427f42995df95 Mon Sep 17 00:00:00 2001
From: haecheonlee <dlgocjs1@gmail.com>
Date: Sat, 13 Apr 2024 19:31:29 -0400
Subject: [PATCH] Fix button in note rendering in safari

---
 src/components/EditorCanvas/Note.jsx | 293 ++++++++++++++-------------
 1 file changed, 148 insertions(+), 145 deletions(-)

diff --git a/src/components/EditorCanvas/Note.jsx b/src/components/EditorCanvas/Note.jsx
index 13fd29de..ecd898fa 100644
--- a/src/components/EditorCanvas/Note.jsx
+++ b/src/components/EditorCanvas/Note.jsx
@@ -100,9 +100,9 @@ export default function Note({ data, onMouseDown }) {
           hovered
             ? "rgb(59 130 246)"
             : selectedElement.element === ObjectType.NOTE &&
-              selectedElement.id === data.id
-            ? "rgb(59 130 246)"
-            : "rgb(168 162 158)"
+                selectedElement.id === data.id
+              ? "rgb(59 130 246)"
+              : "rgb(168 162 158)"
         }
         strokeDasharray={hovered ? 4 : 0}
         strokeLinejoin="round"
@@ -119,9 +119,9 @@ export default function Note({ data, onMouseDown }) {
           hovered
             ? "rgb(59 130 246)"
             : selectedElement.element === ObjectType.NOTE &&
-              selectedElement.id === data.id
-            ? "rgb(59 130 246)"
-            : "rgb(168 162 158)"
+                selectedElement.id === data.id
+              ? "rgb(59 130 246)"
+              : "rgb(168 162 158)"
         }
         strokeDasharray={hovered ? 4 : 0}
         strokeLinejoin="round"
@@ -135,9 +135,148 @@ export default function Note({ data, onMouseDown }) {
         onMouseDown={onMouseDown}
       >
         <div className="text-gray-900 select-none w-full h-full cursor-move px-3 py-2">
-          <label htmlFor={`note_${data.id}`} className="ms-5">
-            {data.title}
-          </label>
+          <div className="flex justify-between">
+            <label htmlFor={`note_${data.id}`} className="ms-5">
+              {data.title}
+            </label>
+            {(hovered ||
+              (selectedElement.element === ObjectType.NOTE &&
+                selectedElement.id === data.id &&
+                selectedElement.open &&
+                !layout.sidebar)) && (
+              <div>
+                <Popover
+                  visible={
+                    selectedElement.element === ObjectType.NOTE &&
+                    selectedElement.id === data.id &&
+                    selectedElement.open &&
+                    !layout.sidebar
+                  }
+                  onClickOutSide={() => {
+                    if (selectedElement.editFromToolbar) {
+                      setSelectedElement((prev) => ({
+                        ...prev,
+                        editFromToolbar: false,
+                      }));
+                      return;
+                    }
+                    setSelectedElement((prev) => ({
+                      ...prev,
+                      open: false,
+                    }));
+                    setSaveState(State.SAVING);
+                  }}
+                  stopPropagation
+                  content={
+                    <div className="popover-theme">
+                      <div className="font-semibold mb-2 ms-1">Edit note</div>
+                      <div className="w-[280px] flex items-center mb-2">
+                        <Input
+                          value={data.title}
+                          placeholder="Title"
+                          className="me-2"
+                          onChange={(value) =>
+                            updateNote(data.id, { title: value })
+                          }
+                          onFocus={(e) =>
+                            setEditField({ title: e.target.value })
+                          }
+                          onBlur={(e) => {
+                            if (e.target.value === editField.title) return;
+                            setUndoStack((prev) => [
+                              ...prev,
+                              {
+                                action: Action.EDIT,
+                                element: ObjectType.NOTE,
+                                nid: data.id,
+                                undo: editField,
+                                redo: { title: e.target.value },
+                                message: `Edit note title to "${e.target.value}"`,
+                              },
+                            ]);
+                            setRedoStack([]);
+                          }}
+                        />
+                        <Popover
+                          content={
+                            <div className="popover-theme">
+                              <div className="font-medium mb-1">Theme</div>
+                              <hr />
+                              <div className="py-3">
+                                {noteThemes.map((c) => (
+                                  <button
+                                    key={c}
+                                    style={{ backgroundColor: c }}
+                                    className="p-3 rounded-full mx-1"
+                                    onClick={() => {
+                                      setUndoStack((prev) => [
+                                        ...prev,
+                                        {
+                                          action: Action.EDIT,
+                                          element: ObjectType.NOTE,
+                                          nid: data.id,
+                                          undo: { color: data.color },
+                                          redo: { color: c },
+                                          message: `Edit note color to ${c}`,
+                                        },
+                                      ]);
+                                      setRedoStack([]);
+                                      updateNote(data.id, { color: c });
+                                    }}
+                                  >
+                                    {data.color === c ? (
+                                      <IconCheckboxTick
+                                        style={{ color: "white" }}
+                                      />
+                                    ) : (
+                                      <IconCheckboxTick style={{ color: c }} />
+                                    )}
+                                  </button>
+                                ))}
+                              </div>
+                            </div>
+                          }
+                          position="rightTop"
+                          showArrow
+                        >
+                          <div
+                            className="h-[32px] w-[32px] rounded"
+                            style={{ backgroundColor: data.color }}
+                          />
+                        </Popover>
+                      </div>
+                      <div className="flex">
+                        <Button
+                          icon={<IconDeleteStroked />}
+                          type="danger"
+                          block
+                          onClick={() => {
+                            Toast.success(`Note deleted!`);
+                            deleteNote(data.id, true);
+                          }}
+                        >
+                          Delete
+                        </Button>
+                      </div>
+                    </div>
+                  }
+                  trigger="custom"
+                  position="rightTop"
+                  showArrow
+                >
+                  <Button
+                    icon={<IconEdit />}
+                    size="small"
+                    theme="solid"
+                    style={{
+                      backgroundColor: "#2F68ADB3",
+                    }}
+                    onClick={edit}
+                  />
+                </Popover>
+              </div>
+            )}
+          </div>
           <textarea
             id={`note_${data.id}`}
             value={data.content}
@@ -152,142 +291,6 @@ export default function Note({ data, onMouseDown }) {
             className="w-full resize-none outline-none overflow-y-hidden border-none select-none"
             style={{ backgroundColor: data.color }}
           />
-          {(hovered ||
-            (selectedElement.element === ObjectType.NOTE &&
-              selectedElement.id === data.id &&
-              selectedElement.open &&
-              !layout.sidebar)) && (
-            <div className="absolute top-2 right-3">
-              <Popover
-                visible={
-                  selectedElement.element === ObjectType.NOTE &&
-                  selectedElement.id === data.id &&
-                  selectedElement.open &&
-                  !layout.sidebar
-                }
-                onClickOutSide={() => {
-                  if (selectedElement.editFromToolbar) {
-                    setSelectedElement((prev) => ({
-                      ...prev,
-                      editFromToolbar: false,
-                    }));
-                    return;
-                  }
-                  setSelectedElement((prev) => ({
-                    ...prev,
-                    open: false,
-                  }));
-                  setSaveState(State.SAVING);
-                }}
-                stopPropagation
-                content={
-                  <div className="popover-theme">
-                    <div className="font-semibold mb-2 ms-1">Edit note</div>
-                    <div className="w-[280px] flex items-center mb-2">
-                      <Input
-                        value={data.title}
-                        placeholder="Title"
-                        className="me-2"
-                        onChange={(value) =>
-                          updateNote(data.id, { title: value })
-                        }
-                        onFocus={(e) => setEditField({ title: e.target.value })}
-                        onBlur={(e) => {
-                          if (e.target.value === editField.title) return;
-                          setUndoStack((prev) => [
-                            ...prev,
-                            {
-                              action: Action.EDIT,
-                              element: ObjectType.NOTE,
-                              nid: data.id,
-                              undo: editField,
-                              redo: { title: e.target.value },
-                              message: `Edit note title to "${e.target.value}"`,
-                            },
-                          ]);
-                          setRedoStack([]);
-                        }}
-                      />
-                      <Popover
-                        content={
-                          <div className="popover-theme">
-                            <div className="font-medium mb-1">Theme</div>
-                            <hr />
-                            <div className="py-3">
-                              {noteThemes.map((c) => (
-                                <button
-                                  key={c}
-                                  style={{ backgroundColor: c }}
-                                  className="p-3 rounded-full mx-1"
-                                  onClick={() => {
-                                    setUndoStack((prev) => [
-                                      ...prev,
-                                      {
-                                        action: Action.EDIT,
-                                        element: ObjectType.NOTE,
-                                        nid: data.id,
-                                        undo: { color: data.color },
-                                        redo: { color: c },
-                                        message: `Edit note color to ${c}`,
-                                      },
-                                    ]);
-                                    setRedoStack([]);
-                                    updateNote(data.id, { color: c });
-                                  }}
-                                >
-                                  {data.color === c ? (
-                                    <IconCheckboxTick
-                                      style={{ color: "white" }}
-                                    />
-                                  ) : (
-                                    <IconCheckboxTick style={{ color: c }} />
-                                  )}
-                                </button>
-                              ))}
-                            </div>
-                          </div>
-                        }
-                        position="rightTop"
-                        showArrow
-                      >
-                        <div
-                          className="h-[32px] w-[32px] rounded"
-                          style={{ backgroundColor: data.color }}
-                        />
-                      </Popover>
-                    </div>
-                    <div className="flex">
-                      <Button
-                        icon={<IconDeleteStroked />}
-                        type="danger"
-                        block
-                        onClick={() => {
-                          Toast.success(`Note deleted!`);
-                          deleteNote(data.id, true);
-                        }}
-                      >
-                        Delete
-                      </Button>
-                    </div>
-                  </div>
-                }
-                trigger="custom"
-                position="rightTop"
-                showArrow
-              >
-                <Button
-                  icon={<IconEdit />}
-                  size="small"
-                  theme="solid"
-                  style={{
-                    backgroundColor: "#2f68ad",
-                    opacity: "0.7",
-                  }}
-                  onClick={edit}
-                />
-              </Popover>
-            </div>
-          )}
         </div>
       </foreignObject>
     </g>