feat: add YouTube video embed support for TipTap editor (#294)

* feat: add YouTube video embed support for TipTap editor

- Paste YouTube URLs to auto-embed videos with metadata
- Edit video title and URL through dropdown menu
- Convert embed back to plain URL link
- Fetch video titles automatically via YouTube oEmbed API

* fix:
- reverted NewCardForm CSS properties back to max-h-48.
- Added boolean prop to TipTap Edtior for YouTube embed.
- Disabled YouTube embed feature for NewCardForm Editor

* chore: lint

* chore: translations

* chore: update translations

---------

Co-authored-by: Henry <henry_ball@hotmail.co.uk>

apps/web/src/views/board/components/NewCardForm.tsx

@@ -327,7 +327,7 @@ export function NewCardForm({
           />
         </div>
         <div className="mt-2">
-          <div className="block max-h-48 min-h-24 w-full overflow-y-auto rounded-md border-0 bg-dark-300 bg-white/5 px-3 py-2 text-sm shadow-sm ring-1 ring-inset ring-light-600 focus-within:ring-2 focus-within:ring-inset focus-within:ring-light-700 dark:ring-dark-700 dark:focus-within:ring-dark-700 sm:leading-6">
+          <div className="block max-h-48 w-full overflow-y-auto rounded-md border-0 bg-dark-300 bg-white/5 px-3 py-2 text-sm shadow-sm ring-1 ring-inset ring-light-600 focus-within:ring-2 focus-within:ring-inset focus-within:ring-light-700 dark:ring-dark-700 dark:focus-within:ring-dark-700 sm:leading-6">
             <Editor
               content={description}
               onChange={(value) => {
@@ -335,7 +335,7 @@ export function NewCardForm({
                 saveFormState({ ...formState, description: value });
               }}
               workspaceMembers={
-                boardData?.workspace.members?.map(
+                boardData?.workspace.members.map(
                   (member): WorkspaceMember => ({
                     publicId: member.publicId,
                     email: member.email,
@@ -349,6 +349,7 @@ export function NewCardForm({
                   }),
                 ) ?? []
               }
+              enableYouTubeEmbed={false}
             />
           </div>
         </div>

apps/web/src/views/board/index.tsx

@@ -24,6 +24,7 @@ import { PageHead } from "~/components/PageHead";
 import PatternedBackground from "~/components/PatternedBackground";
 import { StrictModeDroppable as Droppable } from "~/components/StrictModeDroppable";
 import { Tooltip } from "~/components/Tooltip";
+import { EditYouTubeModal } from "~/components/YouTubeEmbed/EditYouTubeModal";
 import { useKeyboardShortcut } from "~/providers/keyboard-shortcuts";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
@@ -372,6 +373,13 @@ export default function BoardPage({ isTemplate }: { isTemplate?: boolean }) {
             sourceBoardName={boardData?.name ?? ""}
           />
         </Modal>
+
+        <Modal
+          modalSize="sm"
+          isVisible={isOpen && modalContentType === "EDIT_YOUTUBE"}
+        >
+          <EditYouTubeModal />
+        </Modal>
       </>
     );
   };

apps/web/src/views/card/index.tsx

@@ -13,6 +13,7 @@ import LabelIcon from "~/components/LabelIcon";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
+import { EditYouTubeModal } from "~/components/YouTubeEmbed/EditYouTubeModal";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { useWorkspace } from "~/providers/workspace";
@@ -483,6 +484,13 @@ export default function CardPage({ isTemplate }: { isTemplate?: boolean }) {
               checklistPublicId={entityId}
             />
           </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "EDIT_YOUTUBE"}
+          >
+            <EditYouTubeModal />
+          </Modal>
         </>
       </div>
     </>