Skip to content

Commit 25e127e

Browse files
1ilit1ilit
authored
Merge pull request #46 from HaecheonLee/bug/fix-button-in-notes-rendering-in-safari
Fix button in note rendering in safari
2 parents 1649d07 + 5b6c34d commit 25e127e

File tree

1 file changed

+148
-145
lines changed

1 file changed

+148
-145
lines changed

‎src/components/EditorCanvas/Note.jsx

Lines changed: 148 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,9 @@ export default function Note({ data, onMouseDown }) {
100100
hovered
101101
? "rgb(59 130 246)"
102102
: selectedElement.element === ObjectType.NOTE &&
103-
selectedElement.id === data.id
104-
? "rgb(59 130 246)"
105-
: "rgb(168 162 158)"
103+
selectedElement.id === data.id
104+
? "rgb(59 130 246)"
105+
: "rgb(168 162 158)"
106106
}
107107
strokeDasharray={hovered ? 4 : 0}
108108
strokeLinejoin="round"
@@ -119,9 +119,9 @@ export default function Note({ data, onMouseDown }) {
119119
hovered
120120
? "rgb(59 130 246)"
121121
: selectedElement.element === ObjectType.NOTE &&
122-
selectedElement.id === data.id
123-
? "rgb(59 130 246)"
124-
: "rgb(168 162 158)"
122+
selectedElement.id === data.id
123+
? "rgb(59 130 246)"
124+
: "rgb(168 162 158)"
125125
}
126126
strokeDasharray={hovered ? 4 : 0}
127127
strokeLinejoin="round"
@@ -135,9 +135,148 @@ export default function Note({ data, onMouseDown }) {
135135
onMouseDown={onMouseDown}
136136
>
137137
<div className="text-gray-900 select-none w-full h-full cursor-move px-3 py-2">
138-
<label htmlFor={`note_${data.id}`} className="ms-5">
139-
{data.title}
140-
</label>
138+
<div className="flex justify-between">
139+
<label htmlFor={`note_${data.id}`} className="ms-5">
140+
{data.title}
141+
</label>
142+
{(hovered ||
143+
(selectedElement.element === ObjectType.NOTE &&
144+
selectedElement.id === data.id &&
145+
selectedElement.open &&
146+
!layout.sidebar)) && (
147+
<div>
148+
<Popover
149+
visible={
150+
selectedElement.element === ObjectType.NOTE &&
151+
selectedElement.id === data.id &&
152+
selectedElement.open &&
153+
!layout.sidebar
154+
}
155+
onClickOutSide={() => {
156+
if (selectedElement.editFromToolbar) {
157+
setSelectedElement((prev) => ({
158+
...prev,
159+
editFromToolbar: false,
160+
}));
161+
return;
162+
}
163+
setSelectedElement((prev) => ({
164+
...prev,
165+
open: false,
166+
}));
167+
setSaveState(State.SAVING);
168+
}}
169+
stopPropagation
170+
content={
171+
<div className="popover-theme">
172+
<div className="font-semibold mb-2 ms-1">Edit note</div>
173+
<div className="w-[280px] flex items-center mb-2">
174+
<Input
175+
value={data.title}
176+
placeholder="Title"
177+
className="me-2"
178+
onChange={(value) =>
179+
updateNote(data.id, { title: value })
180+
}
181+
onFocus={(e) =>
182+
setEditField({ title: e.target.value })
183+
}
184+
onBlur={(e) => {
185+
if (e.target.value === editField.title) return;
186+
setUndoStack((prev) => [
187+
...prev,
188+
{
189+
action: Action.EDIT,
190+
element: ObjectType.NOTE,
191+
nid: data.id,
192+
undo: editField,
193+
redo: { title: e.target.value },
194+
message: `Edit note title to "${e.target.value}"`,
195+
},
196+
]);
197+
setRedoStack([]);
198+
}}
199+
/>
200+
<Popover
201+
content={
202+
<div className="popover-theme">
203+
<div className="font-medium mb-1">Theme</div>
204+
<hr />
205+
<div className="py-3">
206+
{noteThemes.map((c) => (
207+
<button
208+
key={c}
209+
style={{ backgroundColor: c }}
210+
className="p-3 rounded-full mx-1"
211+
onClick={() => {
212+
setUndoStack((prev) => [
213+
...prev,
214+
{
215+
action: Action.EDIT,
216+
element: ObjectType.NOTE,
217+
nid: data.id,
218+
undo: { color: data.color },
219+
redo: { color: c },
220+
message: `Edit note color to ${c}`,
221+
},
222+
]);
223+
setRedoStack([]);
224+
updateNote(data.id, { color: c });
225+
}}
226+
>
227+
{data.color === c ? (
228+
<IconCheckboxTick
229+
style={{ color: "white" }}
230+
/>
231+
) : (
232+
<IconCheckboxTick style={{ color: c }} />
233+
)}
234+
</button>
235+
))}
236+
</div>
237+
</div>
238+
}
239+
position="rightTop"
240+
showArrow
241+
>
242+
<div
243+
className="h-[32px] w-[32px] rounded"
244+
style={{ backgroundColor: data.color }}
245+
/>
246+
</Popover>
247+
</div>
248+
<div className="flex">
249+
<Button
250+
icon={<IconDeleteStroked />}
251+
type="danger"
252+
block
253+
onClick={() => {
254+
Toast.success(`Note deleted!`);
255+
deleteNote(data.id, true);
256+
}}
257+
>
258+
Delete
259+
</Button>
260+
</div>
261+
</div>
262+
}
263+
trigger="custom"
264+
position="rightTop"
265+
showArrow
266+
>
267+
<Button
268+
icon={<IconEdit />}
269+
size="small"
270+
theme="solid"
271+
style={{
272+
backgroundColor: "#2F68ADB3",
273+
}}
274+
onClick={edit}
275+
/>
276+
</Popover>
277+
</div>
278+
)}
279+
</div>
141280
<textarea
142281
id={`note_${data.id}`}
143282
value={data.content}
@@ -152,142 +291,6 @@ export default function Note({ data, onMouseDown }) {
152291
className="w-full resize-none outline-none overflow-y-hidden border-none select-none"
153292
style={{ backgroundColor: data.color }}
154293
/>
155-
{(hovered ||
156-
(selectedElement.element === ObjectType.NOTE &&
157-
selectedElement.id === data.id &&
158-
selectedElement.open &&
159-
!layout.sidebar)) && (
160-
<div className="absolute top-2 right-3">
161-
<Popover
162-
visible={
163-
selectedElement.element === ObjectType.NOTE &&
164-
selectedElement.id === data.id &&
165-
selectedElement.open &&
166-
!layout.sidebar
167-
}
168-
onClickOutSide={() => {
169-
if (selectedElement.editFromToolbar) {
170-
setSelectedElement((prev) => ({
171-
...prev,
172-
editFromToolbar: false,
173-
}));
174-
return;
175-
}
176-
setSelectedElement((prev) => ({
177-
...prev,
178-
open: false,
179-
}));
180-
setSaveState(State.SAVING);
181-
}}
182-
stopPropagation
183-
content={
184-
<div className="popover-theme">
185-
<div className="font-semibold mb-2 ms-1">Edit note</div>
186-
<div className="w-[280px] flex items-center mb-2">
187-
<Input
188-
value={data.title}
189-
placeholder="Title"
190-
className="me-2"
191-
onChange={(value) =>
192-
updateNote(data.id, { title: value })
193-
}
194-
onFocus={(e) => setEditField({ title: e.target.value })}
195-
onBlur={(e) => {
196-
if (e.target.value === editField.title) return;
197-
setUndoStack((prev) => [
198-
...prev,
199-
{
200-
action: Action.EDIT,
201-
element: ObjectType.NOTE,
202-
nid: data.id,
203-
undo: editField,
204-
redo: { title: e.target.value },
205-
message: `Edit note title to "${e.target.value}"`,
206-
},
207-
]);
208-
setRedoStack([]);
209-
}}
210-
/>
211-
<Popover
212-
content={
213-
<div className="popover-theme">
214-
<div className="font-medium mb-1">Theme</div>
215-
<hr />
216-
<div className="py-3">
217-
{noteThemes.map((c) => (
218-
<button
219-
key={c}
220-
style={{ backgroundColor: c }}
221-
className="p-3 rounded-full mx-1"
222-
onClick={() => {
223-
setUndoStack((prev) => [
224-
...prev,
225-
{
226-
action: Action.EDIT,
227-
element: ObjectType.NOTE,
228-
nid: data.id,
229-
undo: { color: data.color },
230-
redo: { color: c },
231-
message: `Edit note color to ${c}`,
232-
},
233-
]);
234-
setRedoStack([]);
235-
updateNote(data.id, { color: c });
236-
}}
237-
>
238-
{data.color === c ? (
239-
<IconCheckboxTick
240-
style={{ color: "white" }}
241-
/>
242-
) : (
243-
<IconCheckboxTick style={{ color: c }} />
244-
)}
245-
</button>
246-
))}
247-
</div>
248-
</div>
249-
}
250-
position="rightTop"
251-
showArrow
252-
>
253-
<div
254-
className="h-[32px] w-[32px] rounded"
255-
style={{ backgroundColor: data.color }}
256-
/>
257-
</Popover>
258-
</div>
259-
<div className="flex">
260-
<Button
261-
icon={<IconDeleteStroked />}
262-
type="danger"
263-
block
264-
onClick={() => {
265-
Toast.success(`Note deleted!`);
266-
deleteNote(data.id, true);
267-
}}
268-
>
269-
Delete
270-
</Button>
271-
</div>
272-
</div>
273-
}
274-
trigger="custom"
275-
position="rightTop"
276-
showArrow
277-
>
278-
<Button
279-
icon={<IconEdit />}
280-
size="small"
281-
theme="solid"
282-
style={{
283-
backgroundColor: "#2f68ad",
284-
opacity: "0.7",
285-
}}
286-
onClick={edit}
287-
/>
288-
</Popover>
289-
</div>
290-
)}
291294
</div>
292295
</foreignObject>
293296
</g>

0 commit comments

Comments
 (0)