Skip to content

Commit c0199a7

Browse files
hunghg255hunghg255
committed
fix: format url iframe
1 parent 3b613e0 commit c0199a7

File tree

3 files changed

+87
-74
lines changed

3 files changed

+87
-74
lines changed

‎src/components/menus/components/BubbleMenuIframe.tsx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import { useCallback, useEffect, useState } from 'react';
22

33
import { BubbleMenu } from '@tiptap/react';
4-
import { useAttributes } from '@/hooks/useAttributes';
4+
55
import { ActionButton } from '@/components/ActionButton';
6-
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
7-
import { Button, Input } from '@/components/ui';
86
import { SizeSetter } from '@/components/SizeSetter/SizeSetter';
9-
import { useLocale } from '@/locales';
7+
import { Button, Input } from '@/components/ui';
8+
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
109
import type { IIframeAttrs } from '@/extensions/Iframe';
1110
import { Iframe } from '@/extensions/Iframe';
11+
import { getServiceSrc } from '@/extensions/Iframe/embed';
12+
import { useAttributes } from '@/hooks/useAttributes';
13+
import { useLocale } from '@/locales';
1214
import { deleteNode } from '@/utils/delete-node';
1315

1416
export function BubbleMenuIframe({ editor }: any) {
@@ -32,10 +34,12 @@ export function BubbleMenuIframe({ editor }: any) {
3234
}, [visible, url]);
3335

3436
const handleOk = useCallback(() => {
37+
const urlFormat = getServiceSrc(formUrl);
38+
3539
editor
3640
.chain()
3741
.updateAttributes(Iframe.name, {
38-
url: formUrl,
42+
url: urlFormat?.src || formUrl,
3943
})
4044
.setNodeSelection(editor.state.selection.from)
4145
.focus()
@@ -80,19 +84,23 @@ export function BubbleMenuIframe({ editor }: any) {
8084
}}
8185
>
8286

83-
<div className="richtext-w-auto richtext-px-3 richtext-py-2 richtext-transition-all !richtext-border richtext-rounded-sm richtext-shadow-sm richtext-pointer-events-auto richtext-select-none richtext-border-neutral-200 dark:richtext-border-neutral-800 richtext-bg-background">
87+
<div className="richtext-pointer-events-auto richtext-w-auto richtext-select-none richtext-rounded-sm !richtext-border richtext-border-neutral-200 richtext-bg-background richtext-px-3 richtext-py-2 richtext-shadow-sm richtext-transition-all dark:richtext-border-neutral-800">
8488
<ActionButton
8589
action={visitLink}
8690
icon="Eye"
8791
tooltip="Visit Link"
8892
/>
93+
8994
<ActionButton
9095
action={openEditLinkModal}
9196
icon="Pencil"
9297
tooltip="Open Edit Link"
9398
/>
9499

95-
<SizeSetter width={width as any} height={height as any} onOk={setSize}>
100+
<SizeSetter height={height as any}
101+
onOk={setSize}
102+
width={width as any}
103+
>
96104
<ActionButton
97105
icon="Settings"
98106
tooltip={t('editor.settings')}
@@ -108,8 +116,8 @@ export function BubbleMenuIframe({ editor }: any) {
108116
</BubbleMenu>
109117

110118
<Dialog
111-
open={visible}
112119
onOpenChange={toggleVisible}
120+
open={visible}
113121
>
114122
<DialogTrigger />
115123

@@ -121,17 +129,18 @@ export function BubbleMenuIframe({ editor }: any) {
121129
</DialogHeader>
122130

123131
<Input
124-
value={formUrl}
125-
onInput={(e: any) => setFormUrl(e.target.value)}
126-
type="url"
127132
autoFocus
133+
onInput={(e: any) => setFormUrl(e.target.value)}
128134
placeholder="Enter link"
135+
type="url"
136+
value={formUrl}
129137
/>
130138

131139
<DialogFooter>
132140
<Button onClick={handleCancel}>
133141
Cancel
134142
</Button>
143+
135144
<Button onClick={handleOk}>
136145
OK
137146
</Button>

‎src/extensions/Iframe/components/IframeNodeView.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Resizable } from 're-resizable';
66

77
// import { getEditorContainerDOMSize } from '@/utils'
88
import { Button, Input } from '@/components/ui';
9+
import { getServiceSrc } from '@/extensions/Iframe/embed';
910
import { Iframe } from '@/extensions/Iframe/Iframe';
1011
import { useEditableEditor } from '@/store/editableEditor';
1112

@@ -24,10 +25,12 @@ function IframeNodeView({ editor, node, updateAttributes }: any) {
2425
return;
2526
}
2627

28+
const urlFormat = getServiceSrc(originalLink);
29+
2730
editor
2831
.chain()
2932
.updateAttributes(Iframe.name, {
30-
url: originalLink,
33+
url: urlFormat?.src || originalLink,
3134
})
3235
.setNodeSelection(editor.state.selection.from)
3336
.focus()

‎src/extensions/Iframe/embed.ts‎

Lines changed: 63 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -79,77 +79,77 @@ export const EmbedServiceLink: any = {
7979
'https://v.youku.com/v_show/id_XNDM0NDM4MTcy.html?spm=a2h0c.8166622.PhoneSokuUgc_4.dtitle',
8080
src: 'https://player.youku.com/embed/XNDM0NDM4MTcy',
8181
srcPrefix: 'https://player.youku.com/embed',
82-
linkRule: ['v.youku.com\\/v_show\\/id_\\w+\\=*'],
83-
idRule: 'id_\\w+\\=*',
82+
linkRule: [String.raw`v.youku.com\/v_show\/id_\w+\=*`],
83+
idRule: String.raw`id_\w+\=*`,
8484
},
8585
bilibili: {
8686
example: 'https://www.bilibili.com/video/BV1EJ411u7DN',
8787
src: 'https://player.bilibili.com/player.html?bvid=BV1EJ411u7DN',
8888
srcPrefix: 'https://player.bilibili.com/player.html?bvid',
89-
linkRule: ['www.bilibili.com\\/video\\/\\w+'],
89+
linkRule: [String.raw`www.bilibili.com\/video\/\w+`],
9090
},
9191
qqvideo: {
9292
example: 'https://v.qq.com/x/cover/mzc0020006aw1mn/u0033nvzb5v.html',
9393
src: 'https://v.qq.com/txp/iframe/player.html?vid=u0033nvzb5v',
9494
srcPrefix: 'https://v.qq.com/txp/iframe/player.html?vid',
95-
linkRule: ['v.qq.com\\/x\\/cover\\/\\w+\\/\\w+'],
95+
linkRule: [String.raw`v.qq.com\/x\/cover\/\w+\/\w+`],
9696
},
9797
amap: {
9898
example: 'https://ditu.amap.com/',
9999
src: 'https://www.amap.com/place/B000A45467',
100100
srcPrefix: '',
101-
linkRule: ['\\.amap\\.com'],
101+
linkRule: [String.raw`\.amap\.com`],
102102
},
103103
baidu_map: {
104104
example: 'https://j.map.baidu.com/15/fo',
105105
src: 'https://j.map.baidu.com/15/fo',
106106
srcPrefix: '',
107-
linkRule: ['map\\.baidu\\.com'],
107+
linkRule: [String.raw`map\.baidu\.com`],
108108
},
109109
modao: {
110110
example:
111111
'https://free.modao.cc/app/2cd26580a6717a147454df7470e7ec464093cba3/embed/v2#screen=sk71k6d1dfxulzx',
112112
src: 'https://free.modao.cc/app/6UkpAxcGE3nPz52GLqhnOZgC7MATBSy/embed/v2',
113113
srcPrefix: '',
114-
linkRule: ['https:\\/\\/\\w+.modao.cc\\/app\\/\\w+\\/embed\\/v2'],
114+
linkRule: [String.raw`https:\/\/\w+.modao.cc\/app\/\w+\/embed\/v2`],
115115
tips: 'Modao > More > Share > Embed > COPY',
116116
},
117117
lanhu: {
118118
example: 'https://lanhuapp.com/link/#/invite?sid=evP7L',
119119
src: 'https://lanhuapp.com/url/evP7L',
120120
srcPrefix: '',
121-
linkRule: ['https:\\/\\/lanhuapp.com\\/url\\/\\w+'],
121+
linkRule: [String.raw`https:\/\/lanhuapp.com\/url\/\w+`],
122122
tips: 'Lanhu > Project > Share > Copy Link',
123123
},
124124
figma: {
125125
example: 'https://www.figma.com/file/aS9uSgPXoNpaPkzbjNcK8v/Demo?node-id=0%3A1',
126126
src: 'https://www.figma.com/file/aS9uSgPXoNpaPkzbjNcK8v/Demo?node-id=0%3A1',
127127
srcPrefix: 'https://www.figma.com/embed?embed_host=share&url',
128-
linkRule: ['https:\\/\\/www.figma.com\\/file\\/\\w+'],
128+
linkRule: [String.raw`https:\/\/www.figma.com\/file\/\w+`],
129129
},
130130
canva: {
131131
example: 'https://www.canva.cn/design/DAD61-t29UI/view',
132132
src: 'https://www.canva.cn/design/DAD61-t29UI/view',
133133
srcPrefix: '',
134-
linkRule: ['https:\\/\\/www.canva.cn\\/design\\/.+\\/view'],
134+
linkRule: [String.raw`https:\/\/www.canva.cn\/design\/.+\/view`],
135135
},
136136
processon: {
137137
example: 'https://www.processon.com/embed/5ea99d8607912948b0e6fe78',
138138
src: 'https://www.processon.com/embed/5ea99d8607912948b0e6fe78',
139139
srcPrefix: '',
140-
linkRule: ['https:\\/\\/www.processon.com\\/embed\\/\\w+'],
140+
linkRule: [String.raw`https:\/\/www.processon.com\/embed\/\w+`],
141141
},
142142
codepen: {
143143
example: 'https://codepen.io/mekery/embed/YzyrKOJ',
144144
src: 'https://codepen.io/mekery/embed/YzyrKOJ',
145145
srcPrefix: '',
146-
linkRule: ['https:\\/\\/codepen.io\\/.+\\/embed\\/\\w+'],
146+
linkRule: [String.raw`https:\/\/codepen.io\/.+\/embed\/\w+`],
147147
},
148148
jinshuju: {
149149
example: 'https://jinshuju.net/f/q9YvVf',
150150
src: 'https://jinshuju.net/f/q9YvVf',
151151
srcPrefix: '',
152-
linkRule: ['https:\\/\\/jinshuju.net\\/f\\/\\w+'],
152+
linkRule: [String.raw`https:\/\/jinshuju.net\/f\/\w+`],
153153
},
154154
iframe: {
155155
example: 'https://v.youku.com/v_show/id_XNDM0NDM4MTcy.html',
@@ -161,7 +161,7 @@ export const EmbedServiceLink: any = {
161161
example: 'https://goo.gl/maps/8Ys8b4K1ZJY2',
162162
src: 'https://www.google.com/maps/embed?pb=https://goo.gl/maps/8Ys8b4K1ZJY2',
163163
srcPrefix: '',
164-
linkRule: ['https:\\/\\/goo.gl\\/maps\\/\\w+'],
164+
linkRule: [String.raw`https:\/\/goo.gl\/maps\/\w+`],
165165
},
166166
};
167167

@@ -182,7 +182,7 @@ function getYoutubeSrc(result: any) {
182182
}
183183

184184
function getYoukuSrc(result: any) {
185-
const link = EmbedServiceLink.youku as any;
185+
const link = EmbedServiceLink.youku;
186186
const url = result.matchedUrl;
187187

188188
const idRule = link.idRule;
@@ -436,52 +436,53 @@ export function getServiceSrc(originalLink: any) {
436436

437437
// src
438438
switch (service) {
439-
case 'youtube': {
440-
return getYoutubeSrc(result);
441-
}
442-
case 'youku': {
443-
return getYoukuSrc(result);
444-
}
445-
case 'bilibili': {
446-
return getBilibiliSrc(result);
447-
}
448-
case 'qqvideo': {
449-
return getQQVideoSrc(result);
450-
}
451-
case 'amap': {
452-
return getAMapSrc(originalLink, result);
453-
}
454-
case 'baidu_map': {
455-
return getBaiduMapSrc(originalLink, result);
456-
}
457-
case 'googlemaps': {
458-
return getGoogleMapSrc(originalLink, result);
459-
}
460-
case 'modao': {
461-
return getModaoSrc(result);
462-
}
463-
case 'lanhu': {
464-
return getLanhuSrc(result);
465-
}
466-
case 'figma': {
467-
return getFigmaSrc(result);
468-
}
469-
case 'canva': {
470-
return getCanvaSrc(originalLink, result);
471-
}
472-
case 'processon': {
473-
return getProcessonSrc(originalLink, result);
474-
}
475-
case 'codepen': {
476-
return getCodepenSrc(result);
477-
}
478-
case 'jinshuju': {
479-
return getJinshujuSrc(originalLink, result);
480-
}
481-
case 'iframe': {
482-
return getCommonSrc(originalLink, result);
483-
}
439+
case 'youtube': {
440+
return getYoutubeSrc(result);
441+
}
442+
case 'youku': {
443+
return getYoukuSrc(result);
444+
}
445+
case 'bilibili': {
446+
return getBilibiliSrc(result);
447+
}
448+
case 'qqvideo': {
449+
return getQQVideoSrc(result);
450+
}
451+
case 'amap': {
452+
return getAMapSrc(originalLink, result);
453+
}
454+
case 'baidu_map': {
455+
return getBaiduMapSrc(originalLink, result);
456+
}
457+
case 'googlemaps': {
458+
return getGoogleMapSrc(originalLink, result);
459+
}
460+
case 'modao': {
461+
return getModaoSrc(result);
462+
}
463+
case 'lanhu': {
464+
return getLanhuSrc(result);
465+
}
466+
case 'figma': {
467+
return getFigmaSrc(result);
468+
}
469+
case 'canva': {
470+
return getCanvaSrc(originalLink, result);
471+
}
472+
case 'processon': {
473+
return getProcessonSrc(originalLink, result);
474+
}
475+
case 'codepen': {
476+
return getCodepenSrc(result);
477+
}
478+
case 'jinshuju': {
479+
return getJinshujuSrc(originalLink, result);
480+
}
481+
case 'iframe': {
482+
return getCommonSrc(originalLink, result);
483+
}
484+
default: {
485+
return originalLink;
486+
}
484487
}
485-
486-
return result;
487488
}

0 commit comments

Comments
 (0)