feat: init youtube editor extension

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 <EditorContent editor={editor} />;
+  return (
+    <EditorContentWrapper>
+      <EditorContent editor={editor} />
+    </EditorContentWrapper>
+  );
 }
 
 export default Canva;

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;

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 (
     <ToolButtonsWrapper>
       <ToolBtn onClick={() => editor.chain().focus().undo().run()}>
@@ -60,6 +74,9 @@ export const ToolbarButtons = ({ editor }: any) => {
       >
         <ImagePlus size={15} />
       </ToolBtn>
+      <ToolBtn onClick={() => addYoutubeVideo()}>
+        <Youtube size={15} />
+      </ToolBtn>
     </ToolButtonsWrapper>
   );
 };

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

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