37 lines
1009 B
TypeScript
37 lines
1009 B
TypeScript
|
import { LeafDirective } from 'mdast-util-directive'
|
||
|
|
import { usePublisher, insertDirective$, DialogButton } from '@mdxeditor/editor'
|
||
|
|
|
||
|
|
function getId(url: string) {
|
||
|
|
const regExp =
|
||
|
|
/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/
|
||
|
|
const match = url.match(regExp)
|
||
|
|
return match && match[7].length == 11 ? match[7] : false
|
||
|
|
}
|
||
|
|
|
||
|
|
export const YouTubeButton = () => {
|
||
|
|
const insertDirective = usePublisher(insertDirective$)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<DialogButton
|
||
|
|
tooltipTitle='Insert Youtube video'
|
||
|
|
submitButtonTitle='Insert video'
|
||
|
|
dialogInputPlaceholder='Paste the youtube video URL'
|
||
|
|
buttonContent='YT'
|
||
|
|
onSubmit={(url) => {
|
||
|
|
const videoId = getId(url)
|
||
|
|
if (videoId) {
|
||
|
|
insertDirective({
|
||
|
|
name: 'youtube',
|
||
|
|
type: 'leafDirective',
|
||
|
|
|
||
|
|
attributes: { id: videoId },
|
||
|
|
children: []
|
||
|
|
} as LeafDirective)
|
||
|
|
} else {
|
||
|
|
alert('Invalid YouTube URL')
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|