Merge pull request #46 from HaecheonLee/bug/fix-button-in-notes-rendering-in-safari

Fix button in note rendering in safari

src/components/EditorCanvas/Note.jsx

@@ -135,29 +135,16 @@ 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">
+          <div className="flex justify-between">
             <label htmlFor={`note_${data.id}`} className="ms-5">
               {data.title}
             </label>
-          <textarea
-            id={`note_${data.id}`}
-            value={data.content}
-            onChange={handleChange}
-            onFocus={(e) =>
-              setEditField({
-                content: e.target.value,
-                height: data.height,
-              })
-            }
-            onBlur={handleBlur}
-            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">
+              <div>
                 <Popover
                   visible={
                     selectedElement.element === ObjectType.NOTE &&
@@ -191,7 +178,9 @@ export default function Note({ data, onMouseDown }) {
                           onChange={(value) =>
                             updateNote(data.id, { title: value })
                           }
-                        onFocus={(e) => setEditField({ title: e.target.value })}
+                          onFocus={(e) =>
+                            setEditField({ title: e.target.value })
+                          }
                           onBlur={(e) => {
                             if (e.target.value === editField.title) return;
                             setUndoStack((prev) => [
@@ -280,8 +269,7 @@ export default function Note({ data, onMouseDown }) {
                     size="small"
                     theme="solid"
                     style={{
-                    backgroundColor: "#2f68ad",
+                      backgroundColor: "#2F68ADB3",
-                    opacity: "0.7",
                     }}
                     onClick={edit}
                   />
@@ -289,6 +277,21 @@ export default function Note({ data, onMouseDown }) {
               </div>
             )}
           </div>
+          <textarea
+            id={`note_${data.id}`}
+            value={data.content}
+            onChange={handleChange}
+            onFocus={(e) =>
+              setEditField({
+                content: e.target.value,
+                height: data.height,
+              })
+            }
+            onBlur={handleBlur}
+            className="w-full resize-none outline-none overflow-y-hidden border-none select-none"
+            style={{ backgroundColor: data.color }}
+          />
+        </div>
       </foreignObject>
     </g>
   );