feat(extension/youtube): add paste handlers for youtube extension

packages/extension-youtube/src/utils.ts

@@ -1,5 +1,8 @@
+export const YOUTUBE_REGEX = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/
+export const YOUTUBE_REGEX_GLOBAL = /^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/g
+
 export const isValidYoutubeUrl = (url: string) => {
-  return url.match(/^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/)
+  return url.match(YOUTUBE_REGEX)
 }
 
 export interface GetEmbedUrlOptions {

packages/extension-youtube/src/youtube.ts

@@ -1,15 +1,16 @@
-import { mergeAttributes, Node } from '@tiptap/core'
+import { mergeAttributes, Node, PasteRule } from '@tiptap/core'
 
-import { getEmbedURLFromYoutubeURL, isValidYoutubeUrl } from './utils'
+import { getEmbedURLFromYoutubeURL, isValidYoutubeUrl, YOUTUBE_REGEX_GLOBAL } from './utils'
 
 export interface YoutubeOptions {
-  inline: boolean;
+  addPasteHandler: boolean;
-  width: number;
-  height: number;
-  controls: boolean;
-  nocookie: boolean;
   allowFullscreen: boolean;
+  controls: boolean;
+  height: number;
   HTMLAttributes: Record<string, any>,
+  inline: boolean;
+  nocookie: boolean;
+  width: number;
 }
 
 declare module '@tiptap/core' {
@@ -28,13 +29,14 @@ export const Youtube = Node.create<YoutubeOptions>({
 
   addOptions() {
     return {
-      inline: false,
+      addPasteHandler: true,
-      controls: true,
-      HTMLAttributes: {},
-      nocookie: false,
       allowFullscreen: false,
-      width: 640,
+      controls: true,
       height: 480,
+      HTMLAttributes: {},
+      inline: false,
+      nocookie: false,
+      width: 640,
     }
   },
 
@@ -88,6 +90,28 @@ export const Youtube = Node.create<YoutubeOptions>({
     }
   },
 
+  addPasteRules() {
+    if (!this.options.addPasteHandler) {
+      return []
+    }
+
+    return [
+      new PasteRule({
+        find: YOUTUBE_REGEX_GLOBAL,
+
+        handler({ match, chain, range }) {
+          if (match.input) {
+            chain()
+              .deleteRange(range)
+              .setYoutubeVideo({
+                src: match.input,
+              })
+          }
+        },
+      }),
+    ]
+  },
+
   renderHTML({ HTMLAttributes }) {
     const embedUrl = getEmbedURLFromYoutubeURL({
       url: HTMLAttributes.src,