added icons to media types in link dropdown menu

seed-hypermedia · Dec 17, 2024 · eac7feb · eac7feb
1 parent f8724c3
commit eac7feb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/frontend/apps/desktop/src/editor/blocknote/core/extensions/LinkMenu/defaultLinkMenuItems.tsx b/frontend/apps/desktop/src/editor/blocknote/core/extensions/LinkMenu/defaultLinkMenuItems.tsx
@@ -8,7 +8,14 @@ import {
   isPublicGatewayLink,
   normalizeHmId,
 } from '@shm/shared'
-import {Link, Spinner, TwitterXIcon} from '@shm/ui'
+import {
+  File as FileIcon,
+  ImageIcon,
+  Link,
+  Spinner,
+  TwitterXIcon,
+  VideoIcon,
+} from '@shm/ui'
 import {CircleDot, PanelBottom, Quote} from '@tamagui/lucide-icons'
 import {Fragment, Node} from '@tiptap/pm/model'
 import {BlockNoteEditor} from '../../BlockNoteEditor'
@@ -210,21 +217,33 @@ export function getLinkMenuItems({
         ]
       }
     } else if (media) {
+      let mediaIcon
+      switch (media) {
+        case 'twitter':
+          mediaIcon = <TwitterXIcon width={18} height={18} />
+          break
+        case 'video':
+          mediaIcon = <VideoIcon width={18} height={18} />
+          break
+        case 'image':
+          mediaIcon = <ImageIcon width={18} height={18} />
+          break
+        default:
+          mediaIcon = <FileIcon width={18} height={18} />
+          break
+      }
       const mediaItem = {
         name:
           media === 'twitter'
             ? 'X Post embed'
             : media.charAt(0).toUpperCase() + media.slice(1),
         disabled: false,
-        icon:
-          media === 'twitter' ? (
-            <TwitterXIcon width={18} height={18} />
-          ) : undefined,
+        icon: mediaIcon,
         execute: (editor: BlockNoteEditor<HMBlockSchema>, link: string) => {
           const {state, schema} = editor._tiptapEditor
           const {selection} = state
           if (!selection.empty) return
-          let embedUrl = ''
+          let embedUrl = link ? link : sourceUrl ? sourceUrl : ''
           if (media === 'video') {
             let videoUrl = link ? link : sourceUrl ? sourceUrl : ''
             if (videoUrl.includes('youtu.be') || videoUrl.includes('youtube')) {

diff --git a/frontend/packages/ui/src/icons.tsx b/frontend/packages/ui/src/icons.tsx
@@ -11,9 +11,9 @@ export {
   Book,
   Camera,
   ChevronDown,
-  ChevronUp,
   ChevronsDownUp,
   ChevronsUpDown,
+  ChevronUp,
   Clock,
   X as Close,
   XSquare as CloseAll,
@@ -77,6 +77,7 @@ export {
   Unlink,
   List as UnorderedList,
   User,
+  Video as VideoIcon,
   XCircle,
 } from "@tamagui/lucide-icons";