Skip to content

Commit d2deb7f

Browse files
hunghg255hunghg255
committed
fix: iframe bubble
1 parent 53d2877 commit d2deb7f

File tree

5 files changed

+78
-62
lines changed

5 files changed

+78
-62
lines changed

‎src/components/ActionButton.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,22 @@ const ActionButton = React.forwardRef<HTMLButtonElement, Partial<ActionButtonPro
7070
const Icon = icons[icon as string];
7171
const Comp = asChild ? Slot : Toggle;
7272

73+
const onClickHandler = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
74+
if (disabled) {
75+
e.preventDefault();
76+
return;
77+
}
78+
action?.(e);
79+
};
80+
7381
return (
7482
<Tooltip>
7583
<TooltipTrigger asChild>
7684
<Comp
7785
className={cn('richtext-w-[32px] richtext-h-[32px]', customClass)}
7886
data-state={dataState ? 'on' : 'off'} // active background control
7987
disabled={disabled} // disable button control
80-
onClick={action}
88+
onClick={onClickHandler}
8189
ref={ref}
8290
size="sm"
8391
{...(rest as Omit<typeof rest, 'loading'>)}
@@ -89,7 +97,7 @@ const ActionButton = React.forwardRef<HTMLButtonElement, Partial<ActionButtonPro
8997

9098
{tooltip && (
9199
<TooltipContent {...tooltipOptions}
92-
className='richtext-tooltip'
100+
className='richtext-tooltip'
93101
>
94102
<div className="richtext-flex richtext-max-w-24 richtext-flex-col richtext-items-center richtext-text-center">
95103
<div>

‎src/components/Bubble/RichTextBubbleIframe.tsx‎

Lines changed: 42 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,6 @@ export function RichTextBubbleIframe() {
6666
window.open(src, '_blank');
6767
}, [src]);
6868

69-
const openEditLinkModal = useCallback(() => {
70-
toggleVisible(true);
71-
}, [toggleVisible]);
72-
7369
const setSize = useCallback(
7470
(size: any) => {
7571
editor.chain().updateAttributes(Iframe.name, size).setNodeSelection(editor.state.selection.from).focus().run();
@@ -101,11 +97,47 @@ export function RichTextBubbleIframe() {
10197
tooltip="Visit Link"
10298
/>
10399

104-
<ActionButton
105-
action={openEditLinkModal}
106-
icon="Pencil"
107-
tooltip="Open Edit Link"
108-
/>
100+
<Dialog
101+
onOpenChange={toggleVisible}
102+
open={visible}
103+
>
104+
<DialogTrigger asChild>
105+
<ActionButton
106+
icon="Pencil"
107+
tooltip="Open Edit Link"
108+
/>
109+
</DialogTrigger>
110+
111+
<DialogContent>
112+
<DialogHeader>
113+
<DialogTitle>
114+
Edit Link Iframe
115+
</DialogTitle>
116+
</DialogHeader>
117+
118+
<Input
119+
autoFocus
120+
onInput={(e: any) => setFormUrl(e.target.value)}
121+
placeholder="Enter link"
122+
type="url"
123+
value={formUrl}
124+
/>
125+
126+
<DialogFooter>
127+
<Button onClick={handleCancel}
128+
type='button'
129+
>
130+
Cancel
131+
</Button>
132+
133+
<Button onClick={handleOk}
134+
type='button'
135+
>
136+
OK
137+
</Button>
138+
</DialogFooter>
139+
</DialogContent>
140+
</Dialog>
109141

110142
<SizeSetter height={height as any}
111143
onOk={setSize}
@@ -122,45 +154,10 @@ export function RichTextBubbleIframe() {
122154
icon="Trash2"
123155
tooltip={t('editor.delete')}
124156
/>
157+
125158
</div>
126159
</BubbleMenu>
127160

128-
<Dialog
129-
onOpenChange={toggleVisible}
130-
open={visible}
131-
>
132-
<DialogTrigger />
133-
134-
<DialogContent>
135-
<DialogHeader>
136-
<DialogTitle>
137-
Edit Link Iframe
138-
</DialogTitle>
139-
</DialogHeader>
140-
141-
<Input
142-
autoFocus
143-
onInput={(e: any) => setFormUrl(e.target.value)}
144-
placeholder="Enter link"
145-
type="url"
146-
value={formUrl}
147-
/>
148-
149-
<DialogFooter>
150-
<Button onClick={handleCancel}
151-
type='button'
152-
>
153-
Cancel
154-
</Button>
155-
156-
<Button onClick={handleOk}
157-
type='button'
158-
>
159-
OK
160-
</Button>
161-
</DialogFooter>
162-
</DialogContent>
163-
</Dialog>
164161
</>
165162
);
166163
}

‎src/components/Bubble/RichTextBubbleMenuDragHandle.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -179,9 +179,7 @@ export function RichTextBubbleMenuDragHandle() {
179179
<DropdownMenu onOpenChange={handleMenuOpenChange}
180180
open={menuOpen}
181181
>
182-
<div className="richtext-relative richtext-flex richtext-flex-col">
183-
<DropdownMenuTrigger className="richtext-absolute richtext-left-0 richtext-top-0 richtext-z-0 richtext-size-[28px]" />
184-
</div>
182+
<DropdownMenuTrigger className="richtext-pointer-events-none" />
185183

186184
<DropdownMenuContent align="start"
187185
className="richtext-w-48"

‎src/components/icons/GIfIcon.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
export function GifIcon() {
22
return (
3-
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
4-
<g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor">
5-
<path d="M14.86 22h-4.312c-3.291 0-4.937 0-6.08-.798a4.2 4.2 0 0 1-.863-.805c-.855-1.066-.855-2.6-.855-5.67v-2.545c0-2.963 0-4.445.473-5.628c.761-1.903 2.37-3.403 4.41-4.113C8.9 2 10.49 2 13.667 2c1.816 0 2.723 0 3.448.252c1.166.406 2.085 1.263 2.52 2.35c.27.676.27 1.523.27 3.216V10"></path>
6-
<path d="M2.75 12c0-1.84 1.506-3.333 3.364-3.333c.672 0 1.464.116 2.117-.057a1.67 1.67 0 0 0 1.19-1.179c.174-.647.057-1.432.057-2.098C9.478 3.493 10.984 2 12.84 2m.002 16h2.523m-4.949-4.15c-.126-.8-.281-.801-1.61-.85h-1.01c-.557 0-1.009.448-1.009 1v3c0 .552.452 1 1.01 1h1.816c.39 0 .803-.313.803-.7v-1.1c0-.11-.113-.304-.224-.304H9.068M12.842 13h1.261m0 0h1.262m-1.262 0v4.875M21.251 13h-2.523c-.557 0-1.009.448-1.009 1v1.5m0 0V18m0-2.5h2.523"></path>
7-
</g>
8-
</svg>
3+
<svg height="1em"
4+
viewBox="0 0 15 15"
5+
width="1em"
6+
xmlns="http://www.w3.org/2000/svg"
7+
>
8+
{/* Icon from Teenyicons by smhmd - https://github.com/teenyicons/teenyicons/blob/master/LICENSE */}
9+
<path d="M2.5 10.5H2v.5h.5zm2 0v.5H5v-.5zm9-7h.5v-.207l-.146-.147zm-3-3l.354-.354L10.707 0H10.5zM2 6v4.5h1V6zm.5 5h2v-1h-2zm2.5-.5v-2H4v2zM3 7h2V6H3zM2 5V1.5H1V5zm11-1.5V5h1V3.5zM2.5 1h8V0h-8zm7.646-.146l3 3l.708-.708l-3-3zM2 1.5a.5.5 0 0 1 .5-.5V0A1.5 1.5 0 0 0 1 1.5zM1 12v1.5h1V12zm1.5 3h10v-1h-10zM14 13.5V12h-1v1.5zM12.5 15a1.5 1.5 0 0 0 1.5-1.5h-1a.5.5 0 0 1-.5.5zM1 13.5A1.5 1.5 0 0 0 2.5 15v-1a.5.5 0 0 1-.5-.5zM6 7h3V6H6zm0 4h3v-1H6zm1-4.5v4h1v-4zm3.5.5H13V6h-2.5zM10 6v5h1V6zm.5 3H12V8h-1.5z"
10+
fill="currentColor"
11+
/>
12+
</svg>
913
);
1014
}

‎src/components/icons/Html.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
11
export function Html() {
22
return (
3-
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" >
4-
{/* Icon from Huge Icons by Hugeicons - undefined */}
5-
<g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5">
6-
<path d="M18 11c0-.818 0-1.57-.152-1.937s-.441-.657-1.02-1.235l-4.736-4.736c-.499-.499-.748-.748-1.058-.896a2 2 0 0 0-.197-.082C10.514 2 10.161 2 9.456 2c-3.245 0-4.868 0-5.967.886a4 4 0 0 0-.603.603C2 4.59 2 6.211 2 9.456V14c0 3.771 0 5.657 1.172 6.828S6.229 22 10 22h8M11 2.5V3c0 2.828 0 4.243.879 5.121C12.757 9 14.172 9 17 9h.5" />
7-
<path d="M5 14v2.5M5 19v-2.5M8 14v2.5M8 19v-2.5m-3 0h3m2-2.5h1.25m1.25 0h-1.25m0 0v5m3.25 0v-5l1.75 2.5L18 14v5m2-5v5h2" />
3+
<svg height="1em"
4+
viewBox="0 0 24 24"
5+
width="1em"
6+
xmlns="http://www.w3.org/2000/svg"
7+
>
8+
{/* Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE */}
9+
<g fill="none"
10+
stroke="currentColor"
11+
strokeLinecap="round"
12+
strokeLinejoin="round"
13+
strokeWidth="2"
14+
>
15+
<path d="M14 3v4a1 1 0 0 0 1 1h4" />
16+
<path d="M5 12V5a2 2 0 0 1 2-2h7l5 5v4M2 21v-6m3 0v6m-3-3h3m15-3v6h2m-9 0v-6l2 3l2-3v6m-9.5-6h3M9 15v6" />
817
</g>
9-
</svg>
18+
</svg>
1019
);
1120
}

0 commit comments

Comments
 (0)