@majapisoftwares/ui 4.0.6 → 4.1.0

package/components/Markdown/Markdown.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-import { ConverterOptions } from "showdown";
+import React, { ComponentProps } from "react";
+import ReactMarkdown from "react-markdown";
 export type MarkdownProps = {
     children?: string;
     className?: string;
-    options?: ConverterOptions;
+    options?: ComponentProps<typeof ReactMarkdown>;
 };
 export default function Markdown({ children, className, options, }: MarkdownProps): React.JSX.Element;

package/components/Markdown/Markdown.jsx

@@ -1,13 +1,11 @@
-import React, { useMemo } from "react";
+import React from "react";
+import ReactMarkdown from "react-markdown";
 import clsx from "../../utils/clsx";
-import showdown from "showdown";
+import remarkGfm from "remark-gfm";
 export default function Markdown({ children, className, options, }) {
-    const converter = useMemo(() => new showdown.Converter(options), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(options)]);
-    return (<div className={clsx("prose prose-zinc max-w-full dark:prose-invert", className)} dangerouslySetInnerHTML={children
-            ? {
-                __html: converter.makeHtml(children),
-            }
-            : undefined}/>);
+    return (<div className={clsx("prose prose-zinc dark:prose-invert max-w-full", "[&_.contains-task-list]:list-none [&_.contains-task-list]:pl-0", "[&_.task-list-item_input[type='checkbox']]:-mt-1", className)}>
+      <ReactMarkdown remarkPlugins={[remarkGfm, ...(options?.remarkPlugins || [])]} {...options}>
+        {children}
+      </ReactMarkdown>
+    </div>);
 }

package/package.json

@@ -4,6 +4,6 @@
     "type": "git",
     "url": "https://github.com/majapisoftwares/ui.git"
   },
-  "version": "4.0.6",
+  "version": "4.1.0",
   "type": "module"
 }