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",