[DNM] use uiw editor

next.config.mjs

@@ -3,6 +3,7 @@
  * for Docker builds.
  */
 await import("./src/env.mjs");
+import removeImports from 'next-remove-imports';
 
 /** @type {import("next").NextConfig} */
 const config = {
@@ -19,4 +20,4 @@ const config = {
   },
 };
 
-export default config;
+export default removeImports({})(config);

package.json

@@ -23,6 +23,7 @@
     "@trpc/next": "^10.37.1",
     "@trpc/react-query": "^10.37.1",
     "@trpc/server": "^10.37.1",
+    "@uiw/react-md-editor": "^4.0.1",
     "async-mutex": "^0.4.0",
     "flowbite": "^2.1.1",
     "flowbite-react": "^0.6.4",

src/components/MarkdownEditor.tsx

@@ -1,14 +1,29 @@
 import React, { type FC } from "react";
-import { MdEditor } from "md-editor-rt";
-import "md-editor-rt/lib/style.css";
+import "@uiw/react-md-editor/markdown-editor.css";
+import "@uiw/react-markdown-preview/markdown.css";
+import dynamic from "next/dynamic";
+import * as commands from "@uiw/react-md-editor/commands"
 
 type MarkdownEditorProps = {
   text: string;
   setText: (text: string) => void;
 };
 
+const MDEditor = dynamic(
+  () => import("@uiw/react-md-editor"),
+  { ssr: false }
+);
+
 const MarkdownEditor: FC<MarkdownEditorProps> = ({ text, setText }) => {
-  return <MdEditor modelValue={text} onChange={setText} language="en-US" />;
+  const handleOnChange = (e?: string) => {
+    setText(e ?? "");
+  }
+  return (
+  <div className="container">
+    <MDEditor value={text} onChange={handleOnChange} commands={[
+      commands.codeEdit, commands.codePreview
+    ]} />
+  </div>);
 };
 
 export default MarkdownEditor;