diff options
| author | kamtschatka <simon.schatka@gmx.at> | 2024-07-15 01:11:27 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-07-15 00:11:27 +0100 |
| commit | 888dad6ec2f3c78676422ad503dcf7ff81507552 (patch) | |
| tree | 9d1ef3d32b8f7c189cf8ec0b2943e53b8cd18efd /apps/web | |
| parent | f77a41a75237b8c816e0c9ca7217dfacc32cc7d0 (diff) | |
| download | karakeep-888dad6ec2f3c78676422ad503dcf7ff81507552.tar.zst | |
feature: Add github markdown support which includes tables, checklists and auto links #300 (#302)
added the possibility to add checkboxes
Diffstat (limited to 'apps/web')
| -rw-r--r-- | apps/web/components/dashboard/bookmarks/BookmarkedTextViewer.tsx | 5 | ||||
| -rw-r--r-- | apps/web/components/ui/markdown-component.tsx | 2 | ||||
| -rw-r--r-- | apps/web/package.json | 1 |
3 files changed, 7 insertions, 1 deletions
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkedTextViewer.tsx b/apps/web/components/dashboard/bookmarks/BookmarkedTextViewer.tsx index 8a620341..88382cf7 100644 --- a/apps/web/components/dashboard/bookmarks/BookmarkedTextViewer.tsx +++ b/apps/web/components/dashboard/bookmarks/BookmarkedTextViewer.tsx @@ -1,5 +1,6 @@ import { Dialog, DialogContent } from "@/components/ui/dialog"; import Markdown from "react-markdown"; +import remarkGfm from "remark-gfm"; export function BookmarkedTextViewer({ content, @@ -13,7 +14,9 @@ export function BookmarkedTextViewer({ return ( <Dialog open={open} onOpenChange={setOpen}> <DialogContent className="max-h-[75%] overflow-auto"> - <Markdown className="prose">{content}</Markdown> + <Markdown remarkPlugins={[remarkGfm]} className="prose"> + {content} + </Markdown> </DialogContent> </Dialog> ); diff --git a/apps/web/components/ui/markdown-component.tsx b/apps/web/components/ui/markdown-component.tsx index f92cb3a3..d567ddb3 100644 --- a/apps/web/components/ui/markdown-component.tsx +++ b/apps/web/components/ui/markdown-component.tsx @@ -4,6 +4,7 @@ import { cn } from "@/lib/utils"; import Markdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";
+import remarkGfm from "remark-gfm";
function PreWithCopyBtn({ className, ...props }: React.ComponentProps<"pre">) {
const ref = React.useRef<HTMLPreElement>(null);
@@ -27,6 +28,7 @@ export function MarkdownComponent({ }) {
return (
<Markdown
+ remarkPlugins={[remarkGfm]}
className="prose dark:prose-invert"
components={{
pre({ ...props }) {
diff --git a/apps/web/package.json b/apps/web/package.json index 91743602..ade09a83 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -63,6 +63,7 @@ "react-masonry-css": "^1.0.16", "react-select": "^5.8.0", "react-syntax-highlighter": "^15.5.0", + "remark-gfm": "^4.0.0", "sharp": "^0.33.3", "superjson": "^2.2.1", "tailwind-merge": "^2.2.1", |