diff --git a/front/components/Canva/Canva.tsx b/front/components/Canva/Canva.tsx index 49926086..97a466c1 100644 --- a/front/components/Canva/Canva.tsx +++ b/front/components/Canva/Canva.tsx @@ -5,6 +5,8 @@ import StarterKit from "@tiptap/starter-kit"; import InfoCallout from "../Editor/Extensions/Callout/Info/InfoCallout"; import WarningCallout from "../Editor/Extensions/Callout/Warning/WarningCallout"; import ImageBlock from "../Editor/Extensions/Image/ImageBlock"; +import Youtube from "@tiptap/extension-youtube"; +import { EditorContentWrapper } from "../Editor/Editor"; interface Editor { content: string; @@ -29,12 +31,20 @@ function Canva(props: Editor) { editable: isEditable, element: props.element, }), + Youtube.configure({ + controls: true, + modestBranding: true, + }), ], content: props.content, }); - return ; + return ( + + + + ); } export default Canva; diff --git a/front/components/Editor/Editor.tsx b/front/components/Editor/Editor.tsx index 5e135265..54a12543 100644 --- a/front/components/Editor/Editor.tsx +++ b/front/components/Editor/Editor.tsx @@ -16,6 +16,7 @@ import Avvvatars from "avvvatars-react"; import InfoCallout from "./Extensions/Callout/Info/InfoCallout"; import WarningCallout from "./Extensions/Callout/Warning/WarningCallout"; import ImageBlock from "./Extensions/Image/ImageBlock"; +import Youtube from "@tiptap/extension-youtube"; interface Editor { content: string; @@ -31,7 +32,7 @@ function Editor(props: Editor) { const editor: any = useEditor({ editable: true, - + extensions: [ StarterKit.configure({ // The Collaboration extension comes with its own history handling @@ -45,7 +46,11 @@ function Editor(props: Editor) { }), ImageBlock.configure({ editable: true, - element: props.element + element: props.element, + }), + Youtube.configure({ + controls: true, + modestBranding: true, }), // Register the document with Tiptap // Collaboration.configure({ @@ -238,7 +243,7 @@ const EditorInfoThumbnail = styled.img` } `; -const EditorContentWrapper = styled.div` +export const EditorContentWrapper = styled.div` margin: 40px; margin-top: 90px; background-color: white; @@ -259,6 +264,17 @@ const EditorContentWrapper = styled.div` box-shadow: none !important; } } + + iframe { + border-radius: 6px; + border: none; + min-width: 200px; + width: 100%; + height: 440px; + min-height: 200px; + display: block; + outline: 0px solid transparent; + } `; export default Editor; diff --git a/front/components/Editor/Toolbar/ToolbarButtons.tsx b/front/components/Editor/Toolbar/ToolbarButtons.tsx index d8ba94bd..e793779a 100644 --- a/front/components/Editor/Toolbar/ToolbarButtons.tsx +++ b/front/components/Editor/Toolbar/ToolbarButtons.tsx @@ -1,12 +1,26 @@ import styled from "styled-components"; import { FontBoldIcon, FontItalicIcon, StrikethroughIcon, ArrowLeftIcon, ArrowRightIcon, OpacityIcon } from "@radix-ui/react-icons"; -import { AlertCircle, AlertTriangle, ImagePlus, Info } from "lucide-react"; +import { AlertCircle, AlertTriangle, ImagePlus, Info, Youtube } from "lucide-react"; export const ToolbarButtons = ({ editor }: any) => { if (!editor) { return null; } + // YouTube extension + + const addYoutubeVideo = () => { + const url = prompt("Enter YouTube URL"); + + if (url) { + editor.commands.setYoutubeVideo({ + src: url, + width: 640, + height: 480, + }); + } + }; + return ( editor.chain().focus().undo().run()}> @@ -60,6 +74,9 @@ export const ToolbarButtons = ({ editor }: any) => { > + addYoutubeVideo()}> + + ); }; diff --git a/front/package-lock.json b/front/package-lock.json index a342a827..d73a23d4 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -12,6 +12,7 @@ "@radix-ui/react-icons": "^1.1.1", "@tiptap/extension-collaboration": "^2.0.0-beta.199", "@tiptap/extension-collaboration-cursor": "^2.0.0-beta.199", + "@tiptap/extension-youtube": "^2.0.0-beta.207", "@tiptap/html": "^2.0.0-beta.202", "@tiptap/react": "^2.0.0-beta.199", "@tiptap/starter-kit": "^2.0.0-beta.199", @@ -1297,6 +1298,18 @@ "@tiptap/core": "^2.0.0-beta.193" } }, + "node_modules/@tiptap/extension-youtube": { + "version": "2.0.0-beta.207", + "resolved": "https://registry.npmjs.org/@tiptap/extension-youtube/-/extension-youtube-2.0.0-beta.207.tgz", + "integrity": "sha512-fx3adbWZWCysl2Pbw2NNbOVJ+mZT1wJ8YImwXjlM976Z0AWlWY4+O4H2avHzIHQP+t9U/jaV4K6FdcHo6EjJuQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^2.0.0-beta.193" + } + }, "node_modules/@tiptap/html": { "version": "2.0.0-beta.202", "resolved": "https://registry.npmjs.org/@tiptap/html/-/html-2.0.0-beta.202.tgz", @@ -5971,6 +5984,12 @@ "integrity": "sha512-ntOqEhkBjDHrdzxvpPe4U1JB5GgE9/yyWqWdgzSL9lpSndRTJN1xQLOmyuv0qsLqOgBHn1YITHvaxPb3t8FrFw==", "requires": {} }, + "@tiptap/extension-youtube": { + "version": "2.0.0-beta.207", + "resolved": "https://registry.npmjs.org/@tiptap/extension-youtube/-/extension-youtube-2.0.0-beta.207.tgz", + "integrity": "sha512-fx3adbWZWCysl2Pbw2NNbOVJ+mZT1wJ8YImwXjlM976Z0AWlWY4+O4H2avHzIHQP+t9U/jaV4K6FdcHo6EjJuQ==", + "requires": {} + }, "@tiptap/html": { "version": "2.0.0-beta.202", "resolved": "https://registry.npmjs.org/@tiptap/html/-/html-2.0.0-beta.202.tgz", diff --git a/front/package.json b/front/package.json index 1f7280a8..51dd3675 100644 --- a/front/package.json +++ b/front/package.json @@ -13,6 +13,7 @@ "@radix-ui/react-icons": "^1.1.1", "@tiptap/extension-collaboration": "^2.0.0-beta.199", "@tiptap/extension-collaboration-cursor": "^2.0.0-beta.199", + "@tiptap/extension-youtube": "^2.0.0-beta.207", "@tiptap/html": "^2.0.0-beta.202", "@tiptap/react": "^2.0.0-beta.199", "@tiptap/starter-kit": "^2.0.0-beta.199",