fix(markdown): remove custom image component

src/app/(dashboard)/app-store/[id]/components/AppDetailsTabs/AppDetailsTabs.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useTranslations } from 'next-intl';
 import { AppInfo } from '@runtipi/shared';
-import Markdown from '@/components/Markdown/Markdown';
+import { Markdown } from '@/components/Markdown';
 import { DataGrid, DataGridItem } from '@/components/ui/DataGrid';
 
 interface IProps {

src/app/(dashboard)/settings/components/GeneralActions/GeneralActions.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import semver from 'semver';
 import { toast } from 'react-hot-toast';
-import Markdown from '@/components/Markdown/Markdown';
+import { Markdown } from '@/components/Markdown';
 import { IconStar } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
 import { useDisclosure } from '@/client/hooks/useDisclosure';

src/client/components/Markdown/Markdown.tsx

@@ -6,30 +6,8 @@ import remarkGfm from 'remark-gfm';
 import rehypeRaw from 'rehype-raw';
 import { PluggableList } from 'react-markdown/lib';
 
-const MarkdownImg = (props: Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'key' | keyof React.ImgHTMLAttributes<HTMLImageElement>>) => (
-  <div className="d-flex justify-content-center">
-    {/* eslint-disable-next-line @next/next/no-img-element */}
-    <img alt="app-demonstration" {...props} />
-  </div>
-);
-
-const Markdown: React.FC<{ children: string; className: string }> = ({ children, className }) => (
-  <ReactMarkdown
-    className={clsx('markdown', className)}
-    components={{
-      // h2: (props) => <h2 {...props} className="text-xl font-bold mb-4 text-center md:text-left" />,
-      // h3: (props) => <h3 {...props} className="text-lg font-bold mb-4 text-center md:text-left" />,
-      // ul: (props) => <ul {...props} className="list-disc pl-4 mb-4" />,
-      img: MarkdownImg,
-      // p: (props) => <p {...props} className="mb-4 text-left md:text-left" />,
-      // a: (props) => <a target="_blank" rel="noreferrer" {...props} className="text-blue-500" href={props.href} />,
-      // div: (props) => <div {...props} className="mb-4" />,
-    }}
-    remarkPlugins={[remarkBreaks, remarkGfm]}
-    rehypePlugins={[rehypeRaw] as PluggableList}
-  >
+export const Markdown: React.FC<{ children: string; className: string }> = ({ children, className }) => (
+  <ReactMarkdown className={clsx('markdown', className)} remarkPlugins={[remarkBreaks, remarkGfm]} rehypePlugins={[rehypeRaw] as PluggableList}>
     {children}
   </ReactMarkdown>
 );
-
-export default Markdown;

src/client/components/Markdown/index.ts

@@ -0,0 +1 @@
+export { Markdown } from './Markdown';