diff --git a/package-lock.json b/package-lock.json index bb2cc7df..b25ee2c1 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index dbc533db..61d46b82 100644 --- a/package.json +++ b/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", diff --git a/src/Components/Input/RichTextEditor.tsx b/src/Components/Input/RichTextEditor.tsx index bbd8dbb6..a6b6d725 100644 --- a/src/Components/Input/RichTextEditor.tsx +++ b/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 (