feat(extension/youtube): ✨ new youtube embed extension (#2814)

* feat(extension/youtube): ✨ new youtube embed extension

* fix(extension/youtube): remove wrong destroy call on undefined editor

* fix(extension/youtube): 🐛 fix youtu.be share urls not being recognized correctly

* style: remove stray console.log

* style: remove empty line

* docs(docs): update youtube docs

* Capitalize tiptap

* Capitalize Tiptap

* style(extension/youtube): ✏️ change youtube typing

Co-authored-by: Markus Krause <markus.krause@ueber.io>

packages/extension-youtube/src/index.ts

@@ -0,0 +1,5 @@
+import { Youtube } from './youtube'
+
+export * from './youtube'
+
+export default Youtube

packages/extension-youtube/src/utils.ts

@@ -0,0 +1,63 @@
+export const isValidYoutubeUrl = (url: string) => {
+  return url.match(/^(https?:\/\/)?(www\.|music\.)?(youtube\.com|youtu\.be)(.+)?$/)
+}
+
+export interface GetEmbedUrlOptions {
+  url: string;
+  controls?: boolean;
+  nocookie?: boolean;
+  startAt?: number;
+}
+
+export const getYoutubeEmbedUrl = (nocookie?: boolean) => {
+  return nocookie ? 'https://www.youtube-nocookie.com/embed/' : 'https://www.youtube.com/embed/'
+}
+
+export const getEmbedURLFromYoutubeURL = (options: GetEmbedUrlOptions) => {
+  const {
+    url,
+    controls,
+    nocookie,
+    startAt,
+  } = options
+
+  // if is already an embed url, return it
+  if (url.includes('/embed/')) {
+    return url
+  }
+
+  // if is a youtu.be url, get the id after the /
+  if (url.includes('youtu.be')) {
+    const id = url.split('/').pop()
+
+    if (!id) {
+      return null
+    }
+    return `${getYoutubeEmbedUrl(nocookie)}${id}`
+  }
+
+  const videoIdRegex = /v=([-\w]+)/gm
+  const matches = videoIdRegex.exec(url)
+
+  if (!matches || !matches[1]) {
+    return null
+  }
+
+  let outputUrl = `${getYoutubeEmbedUrl(nocookie)}${matches[1]}`
+
+  const params = []
+
+  if (!controls) {
+    params.push('controls=0')
+  }
+
+  if (startAt) {
+    params.push(`start=${startAt}`)
+  }
+
+  if (params.length) {
+    outputUrl += `?${params.join('&')}`
+  }
+
+  return outputUrl
+}

packages/extension-youtube/src/youtube.ts

@@ -0,0 +1,118 @@
+import { mergeAttributes, Node } from '@tiptap/core'
+
+import { getEmbedURLFromYoutubeURL, isValidYoutubeUrl } from './utils'
+
+export interface YoutubeOptions {
+  inline: boolean;
+  width: number;
+  height: number;
+  controls: boolean;
+  nocookie: boolean;
+  allowFullscreen: boolean;
+  HTMLAttributes: Record<string, any>,
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    youtube: {
+      /**
+       * Insert a youtube video
+       */
+      setYoutubeVideo: (options: { src: string, width?: number, height?: number, start?: number }) => ReturnType,
+    }
+  }
+}
+
+export const Youtube = Node.create<YoutubeOptions>({
+  name: 'youtube',
+
+  addOptions() {
+    return {
+      inline: false,
+      controls: true,
+      HTMLAttributes: {},
+      nocookie: false,
+      allowFullscreen: false,
+      width: 640,
+      height: 480,
+    }
+  },
+
+  inline() {
+    return this.options.inline
+  },
+
+  group() {
+    return this.options.inline ? 'inline' : 'block'
+  },
+
+  draggable: true,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      start: {
+        default: 0,
+      },
+      width: {
+        default: this.options.width,
+      },
+      height: {
+        default: this.options.height,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-youtube-video] iframe',
+      },
+    ]
+  },
+
+  addCommands() {
+    return {
+      setYoutubeVideo: options => ({ commands }) => {
+        if (!isValidYoutubeUrl(options.src)) {
+          return false
+        }
+
+        return commands.insertContent({
+          type: this.name,
+          attrs: options,
+        })
+      },
+    }
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const embedUrl = getEmbedURLFromYoutubeURL({
+      url: HTMLAttributes.src,
+      controls: this.options.controls,
+      nocookie: this.options.nocookie,
+      startAt: HTMLAttributes.start || 0,
+    })
+
+    HTMLAttributes.src = embedUrl
+
+    return [
+      'div',
+      { 'data-youtube-video': '' },
+      [
+        'iframe',
+        mergeAttributes(
+          this.options.HTMLAttributes,
+          {
+            width: this.options.width,
+            height: this.options.height,
+            allowfullscreen: this.options.allowFullscreen,
+          },
+          HTMLAttributes,
+        ),
+      ],
+    ]
+  },
+})