Merge pull request #46 from HaecheonLee/bug/fix-button-in-notes-rendering-in-safari
Fix button in note rendering in safari
This commit is contained in:
1ilit
GitHub
commit
25e127ed8a
@ -100,9 +100,9 @@ export default function Note({ data, onMouseDown }) {
|
|||||||
hovered
|
hovered
|
||||||
? "rgb(59 130 246)"
|
? "rgb(59 130 246)"
|
||||||
: selectedElement.element === ObjectType.NOTE &&
|
: selectedElement.element === ObjectType.NOTE &&
|
||||||
selectedElement.id === data.id
|
selectedElement.id === data.id
|
||||||
? "rgb(59 130 246)"
|
? "rgb(59 130 246)"
|
||||||
: "rgb(168 162 158)"
|
: "rgb(168 162 158)"
|
||||||
}
|
}
|
||||||
strokeDasharray={hovered ? 4 : 0}
|
strokeDasharray={hovered ? 4 : 0}
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
@ -119,9 +119,9 @@ export default function Note({ data, onMouseDown }) {
|
|||||||
hovered
|
hovered
|
||||||
? "rgb(59 130 246)"
|
? "rgb(59 130 246)"
|
||||||
: selectedElement.element === ObjectType.NOTE &&
|
: selectedElement.element === ObjectType.NOTE &&
|
||||||
selectedElement.id === data.id
|
selectedElement.id === data.id
|
||||||
? "rgb(59 130 246)"
|
? "rgb(59 130 246)"
|
||||||
: "rgb(168 162 158)"
|
: "rgb(168 162 158)"
|
||||||
}
|
}
|
||||||
strokeDasharray={hovered ? 4 : 0}
|
strokeDasharray={hovered ? 4 : 0}
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
@ -135,9 +135,148 @@ export default function Note({ data, onMouseDown }) {
|
|||||||
onMouseDown={onMouseDown}
|
onMouseDown={onMouseDown}
|
||||||
>
|
>
|
||||||
<div className="text-gray-900 select-none w-full h-full cursor-move px-3 py-2">
|
<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">
|
<div className="flex justify-between">
|
||||||
{data.title}
|
<label htmlFor={`note_${data.id}`} className="ms-5">
|
||||||
</label>
|
{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
|
<textarea
|
||||||
id={`note_${data.id}`}
|
id={`note_${data.id}`}
|
||||||
value={data.content}
|
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"
|
className="w-full resize-none outline-none overflow-y-hidden border-none select-none"
|
||||||
style={{ backgroundColor: data.color }}
|
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>
|
</div>
|
||||||
</foreignObject>
|
</foreignObject>
|
||||||
</g>
|
</g>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user