feat: allow insertion of youtube url

src/Components/Inputs/TextEditor/InsertVideoModal/InsertVideoModal.tsx

@@ -10,18 +10,18 @@ interface Props extends ModalCard {
     callbackAction: PayloadAction<{ src: string, alt?: string }>
 }
 
+
 export default function InsertVideoModal({ onClose, direction, callbackAction, ...props }: Props) {
 
-    const [idInput, setIdInput] = useState("")
-    const [altInput, setAltInput] = useState("")
+    const [urlInput, setUrlInput] = useState("")
     const dispatch = useAppDispatch();
 
     const handleSubmit = (e: FormEvent) => {
         e.preventDefault()
-        if (idInput.length > 10) {
-            // onInsert({ src: idInput, alt: altInput })
+        const id = extractId(urlInput);
+        if (id) {
             const action = Object.assign({}, callbackAction);
-            action.payload = { src: idInput, alt: altInput }
+            action.payload = { src: id }
             dispatch(action)
             onClose?.();
         }
@@ -42,15 +42,15 @@ export default function InsertVideoModal({ onClose, direction, callbackAction, .
                 <div className="grid gap-16 mt-32">
                     <div className='md:col-span-2'>
                         <p className="text-body5">
-                            Video Id
+                            Video URL
                         </p>
                         <div className="input-wrapper mt-8 relative">
                             <input
                                 type='text'
                                 className="input-text"
-                                value={idInput}
-                                onChange={e => setIdInput(e.target.value)}
-                                placeholder='Zi7sRMcJT-o'
+                                value={urlInput}
+                                onChange={e => setUrlInput(e.target.value)}
+                                placeholder='https://www.youtube.com/watch?v=****'
                             />
                         </div>
                     </div>
@@ -68,3 +68,9 @@ export default function InsertVideoModal({ onClose, direction, callbackAction, .
         </motion.div>
     )
 }
+
+
+function extractId(url: string) {
+    const rgx = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
+    return url.match(rgx)?.[1]
+}

src/features/Posts/pages/CreatePostPage/Components/BountyForm/BountyForm.stories.tsx

@@ -1,4 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WithModals } from 'src/utils/storybook/decorators';
 
 import BountyForm from './BountyForm';
 
@@ -8,6 +9,7 @@ export default {
     argTypes: {
         backgroundColor: { control: 'color' },
     },
+    decorators: [WithModals]
 } as ComponentMeta<typeof BountyForm>;
 
 

src/features/Posts/pages/CreatePostPage/Components/ContentEditor/ContentEditor.tsx

@@ -19,6 +19,7 @@ import {
     NodeFormattingExtension,
     OrderedListExtension,
     PlaceholderExtension,
+    IframeExtension,
     StrikeExtension,
     TableExtension,
     TrailingNodeExtension,
@@ -74,6 +75,7 @@ export default function ContentEditor({ placeholder, initialContent, name }: Pro
                 supportedLanguages: [javascript, typescript]
             }),
             new ImageExtension(),
+            new IframeExtension(),
             // new TrailingNodeExtension(),
             // new TableExtension(),
             new MarkdownExtension({ copyAsMarkdown: false }),

src/features/Posts/pages/CreatePostPage/Components/ContentEditor/Toolbar.tsx

@@ -23,6 +23,7 @@ export default function Toolbar() {
                 <TextEditorComponents.ToolButton cmd='bulletList' />
                 <TextEditorComponents.ToolButton cmd='orderedList' />
                 <TextEditorComponents.ToolButton cmd='img' />
+                <TextEditorComponents.ToolButton cmd='youtube' />
             </div>
 
 

src/features/Posts/pages/CreatePostPage/Components/QuestionForm/QuestionForm.stories.tsx

@@ -1,4 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WithModals } from 'src/utils/storybook/decorators';
 
 import QuestionForm from './QuestionForm';
 
@@ -8,6 +9,7 @@ export default {
     argTypes: {
         backgroundColor: { control: 'color' },
     },
+    decorators: [WithModals]
 } as ComponentMeta<typeof QuestionForm>;
 
 

src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.stories.tsx

@@ -1,4 +1,5 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WithModals } from 'src/utils/storybook/decorators';
 
 import StoryForm from './StoryForm';
 
@@ -8,6 +9,7 @@ export default {
     argTypes: {
         backgroundColor: { control: 'color' },
     },
+    decorators: [WithModals]
 } as ComponentMeta<typeof StoryForm>;
 
 

src/styles/vendors.scss

@@ -19,7 +19,7 @@
 .remirror-editor-wrapper iframe,
 .remirror-theme iframe {
   width: calc(min(100%, 550px));
-  margin: 0 auto;
+  margin: 16px auto;
   aspect-ratio: 16/9;
 }