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/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

packages/extension-youtube/README.md

@@ -0,0 +1,14 @@
+# @tiptap/extension-youtube
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-youtube.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-youtube)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-youtube.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-youtube.svg)](https://www.npmjs.com/package/@tiptap/extension-youtube)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Official Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

packages/extension-youtube/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@tiptap/extension-youtube",
+  "description": "a youtube embed extension for tiptap",
+  "version": "2.0.0-beta.1",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-extension-video.cjs.js",
+  "umd": "dist/tiptap-extension-video.umd.js",
+  "module": "dist/tiptap-extension-video.esm.js",
+  "types": "dist/packages/extension-video/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-beta.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-video"
+  }
+}

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,
+        ),
+      ],
+    ]
+  },
+})