feat(post): add embed button and media to links in post content detected as valid embed links

src/components/markdown/markdown.module.css

@@ -19,3 +19,13 @@
 .hrWrapper hr {
   margin: 0;
 }
+
+.embedButton {
+  color: var(--button-desktop-text-color);
+  text-transform: capitalize;
+}
+
+.embedButton:hover {
+  cursor: pointer;
+  color: var(--button-desktop-text-color-hover);
+}

src/components/markdown/markdown.tsx

@@ -1,9 +1,12 @@
-import React, { useMemo } from 'react';
-import styles from './markdown.module.css';
+import React, { useMemo, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
-import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import remarkGfm from 'remark-gfm';
 import supersub from 'remark-supersub';
+import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
+import styles from './markdown.module.css';
+import { useTranslation } from 'react-i18next';
+import { getLinkMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
+import CommentMedia from '../comment-media';
 
 interface MarkdownProps {
   content: string;
@@ -55,6 +58,9 @@ const Markdown = ({ content }: MarkdownProps) => {
 
   remarkPlugins.push([blockquoteToGreentext]);
 
+  const { t } = useTranslation();
+  const [showMedia, setShowMedia] = useState(false);
+
   return (
     <span className={styles.markdown}>
       <ReactMarkdown
@@ -71,6 +77,37 @@ const Markdown = ({ content }: MarkdownProps) => {
               <hr />
             </div>
           ),
+          a: ({ href, children }) => {
+            if (href) {
+              const linkMediaInfo = getLinkMediaInfo(href);
+              if (getHasThumbnail(linkMediaInfo, href)) {
+                return (
+                  <>
+                    <a href={href} target='_blank' rel='noopener noreferrer'>
+                      {children}
+                    </a>{' '}
+                    [
+                    <span className={styles.embedButton} onClick={() => setShowMedia(!showMedia)}>
+                      {showMedia ? t('remove') : t('embed')}
+                    </span>
+                    ]
+                    {showMedia && (
+                      <>
+                        <br />
+                        <CommentMedia isReply={false} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={false} />
+                      </>
+                    )}
+                  </>
+                );
+              } else {
+                return (
+                  <a href={href} target='_blank' rel='noopener noreferrer'>
+                    {children}
+                  </a>
+                );
+              }
+            }
+          },
         }}
       />
     </span>