youtube

package-lock.json

@@ -13,6 +13,7 @@
         "@tanstack/react-query": "^5.17.8",
         "@tiptap/extension-color": "^2.12.0",
         "@tiptap/extension-image": "^2.12.0",
+        "@tiptap/extension-youtube": "^2.12.0",
         "@tiptap/pm": "^2.12.0",
         "@tiptap/react": "^2.12.0",
         "@tiptap/starter-kit": "^2.12.0",
@@ -2693,6 +2694,19 @@
         "@tiptap/core": "^2.7.0"
       }
     },
+    "node_modules/@tiptap/extension-youtube": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-youtube/-/extension-youtube-2.12.0.tgz",
+      "integrity": "sha512-3EGLBRnKZIw+IiViPeX0bgnBZ4ifIbMawTTV4fVULAteMaEfmGZ9s0ows3MY4KZjWpoxNStH6rH8DhYVn+AfuQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
     "node_modules/@tiptap/pm": {
       "version": "2.12.0",
       "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.12.0.tgz",

package.json

@@ -101,6 +101,7 @@
     "@tanstack/react-query": "^5.17.8",
     "@tiptap/extension-color": "^2.12.0",
     "@tiptap/extension-image": "^2.12.0",
+    "@tiptap/extension-youtube": "^2.12.0",
     "@tiptap/pm": "^2.12.0",
     "@tiptap/react": "^2.12.0",
     "@tiptap/starter-kit": "^2.12.0",

src/Components/Input/RichTextEditor.tsx

@@ -6,6 +6,7 @@ import { EditorProvider, useCurrentEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import { useState } from 'react'
 import { Markdown } from 'tiptap-markdown'
+import Youtube from '@tiptap/extension-youtube'
 
 import type { EditorEvents } from '@tiptap/react'
 
@@ -16,6 +17,21 @@ const MenuBar = () => {
     return null
   }
 
+  const [height, setHeight] = useState(480)
+  const [width, setWidth] = useState(640)
+
+  const addYoutubeVideo = () => {
+    const url = prompt('Enter YouTube URL')
+
+    if (url) {
+      editor.commands.setYoutubeVideo({
+        src: url,
+        width: Math.max(320, width) || 640,
+        height: Math.max(180, height) || 480,
+      })
+    }
+  }
+
   return (
     <div className='control-group tiptap-toolbar'>
       <div className='button-group'>
@@ -162,6 +178,29 @@ const MenuBar = () => {
           Purple
         </button>
       </div>
+      <div className='button-group'>
+        <input
+          id='width'
+          type='number'
+          min='320'
+          max='1024'
+          placeholder='width'
+          value={width}
+          onChange={(event) => setWidth(parseInt(event.target.value))}
+        />
+        <input
+          id='height'
+          type='number'
+          min='180'
+          max='720'
+          placeholder='height'
+          value={height}
+          onChange={(event) => setHeight(parseInt(event.target.value))}
+        />
+        <button id='add' onClick={addYoutubeVideo}>
+          Add YouTube video
+        </button>
+      </div>
     </div>
   )
 }
@@ -181,6 +220,10 @@ const extensions = [
   }),
   Markdown,
   Image,
+  Youtube.configure({
+    controls: false,
+    nocookie: true,
+  }),
 ]
 
 interface TextAreaProps {