beenull/runtipi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix(markdown): remove custom image component

Browse source
This commit is contained in:
Nicolas Meienberger 2023-11-02 19:10:56 +01:00
parent a2d9610c22
commit 0eb7218063
4 changed files with 5 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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 {

2
src/app/(dashboard)/settings/components/GeneralActions/GeneralActions.tsx
View file

@ -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';

26
src/client/components/Markdown/Markdown.tsx
View file

@ -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;

1
src/client/components/Markdown/index.ts Normal file
View file

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