FEAT: add markdown editor component

apps/web/components/MdxEditor.tsx

@@ -0,0 +1,17 @@
+"use client";
+import dynamic from "next/dynamic";
+import "@repo/ui/css";
+const Mdxeditor = dynamic(
+  () => import("@repo/ui").then((mod) => mod.Mdxeditor),
+  { ssr: false }
+);
+
+function MdxeditorComponent() {
+  return (
+    <div className="">
+      <Mdxeditor markdown="" className="prose max-w-none bg-slate-200" />
+    </div>
+  );
+}
+
+export default MdxeditorComponent;

apps/web/package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@repo/database": "workspace:*",
     "@repo/ui": "workspace:*",
+    "@tailwindcss/typography": "^0.5.15",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.452.0",

apps/web/tailwind.config.js

@@ -1,61 +1,61 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    darkMode: ["class"],
-    content: [
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-  	extend: {
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		},
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		}
-  	}
-  },
-  plugins: [require("tailwindcss-animate")],
+	darkMode: ["class"],
+	content: [
+		"./app/**/*.{js,ts,jsx,tsx,mdx}",
+		"./pages/**/*.{js,ts,jsx,tsx,mdx}",
+		"./components/**/*.{js,ts,jsx,tsx,mdx}",
+	],
+	theme: {
+		extend: {
+			borderRadius: {
+				lg: 'var(--radius)',
+				md: 'calc(var(--radius) - 2px)',
+				sm: 'calc(var(--radius) - 4px)'
+			},
+			colors: {
+				background: 'hsl(var(--background))',
+				foreground: 'hsl(var(--foreground))',
+				card: {
+					DEFAULT: 'hsl(var(--card))',
+					foreground: 'hsl(var(--card-foreground))'
+				},
+				popover: {
+					DEFAULT: 'hsl(var(--popover))',
+					foreground: 'hsl(var(--popover-foreground))'
+				},
+				primary: {
+					DEFAULT: 'hsl(var(--primary))',
+					foreground: 'hsl(var(--primary-foreground))'
+				},
+				secondary: {
+					DEFAULT: 'hsl(var(--secondary))',
+					foreground: 'hsl(var(--secondary-foreground))'
+				},
+				muted: {
+					DEFAULT: 'hsl(var(--muted))',
+					foreground: 'hsl(var(--muted-foreground))'
+				},
+				accent: {
+					DEFAULT: 'hsl(var(--accent))',
+					foreground: 'hsl(var(--accent-foreground))'
+				},
+				destructive: {
+					DEFAULT: 'hsl(var(--destructive))',
+					foreground: 'hsl(var(--destructive-foreground))'
+				},
+				border: 'hsl(var(--border))',
+				input: 'hsl(var(--input))',
+				ring: 'hsl(var(--ring))',
+				chart: {
+					'1': 'hsl(var(--chart-1))',
+					'2': 'hsl(var(--chart-2))',
+					'3': 'hsl(var(--chart-3))',
+					'4': 'hsl(var(--chart-4))',
+					'5': 'hsl(var(--chart-5))'
+				}
+			}
+		}
+	},
+	plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 }

packages/ui/package.json

@@ -5,10 +5,11 @@
     "build": "tsup src/index.tsx --minify --dts --out-dir dist",
     "dev": "tsup src/index.tsx --watch --dts --out-dir dist"
   },
+  "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js"
+      "import": "./dist/index.cjs",
+      "require": "./dist/index.cjs"
     },
     "./css": {
       "import": "./dist/index.css",
@@ -27,6 +28,7 @@
     "tsup": "^8.3.0"
   },
   "dependencies": {
+    "@mdxeditor/editor": "^3.14.0",
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

packages/ui/src/components/MdxEditor/InitializedMDXEditor.tsx

@@ -0,0 +1,31 @@
+import type { ForwardedRef } from "react";
+import {
+  headingsPlugin,
+  listsPlugin,
+  quotePlugin,
+  thematicBreakPlugin,
+  markdownShortcutPlugin,
+  MDXEditor,
+  type MDXEditorMethods,
+  type MDXEditorProps,
+} from "@mdxeditor/editor";
+
+// Only import this to the next file
+export default function InitializedMDXEditor({
+  editorRef,
+  ...props
+}: { editorRef: ForwardedRef<MDXEditorMethods> | null } & MDXEditorProps) {
+  return (
+    <MDXEditor
+      plugins={[
+        headingsPlugin(),
+        listsPlugin(),
+        quotePlugin(),
+        thematicBreakPlugin(),
+        markdownShortcutPlugin(),
+      ]}
+      {...props}
+      ref={editorRef}
+    />
+  );
+}

packages/ui/src/components/MdxEditor/MdxEditor.tsx

@@ -0,0 +1,11 @@
+import { MDXEditorMethods, MDXEditorProps } from "@mdxeditor/editor";
+import { forwardRef } from "react";
+import InitializedMDXEditor from "./InitializedMDXEditor.js";
+// This is what is imported by other components. Pre-initialized with plugins, and ready
+// to accept other props, including a ref.
+export const Mdxeditor = forwardRef<MDXEditorMethods, MDXEditorProps>(
+  (props, ref) => <InitializedMDXEditor {...props} editorRef={ref} />
+);
+
+// TS complains without the following line
+Mdxeditor.displayName = "ForwardRefEditor";

packages/ui/src/global.css

@@ -1,3 +1,4 @@
+@import url("../node_modules/@mdxeditor/editor/dist/style.css");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

packages/ui/src/index.tsx

@@ -1,2 +1,3 @@
-export { Button } from "./components/ui/button";
 import "./global.css";
+export { Button } from "@/src/components/ui/button";
+export { Mdxeditor } from "@/src/components/MdxEditor/MdxEditor";

packages/ui/tailwind.config.js → packages/ui/tailwind.config.cjs

@@ -2,8 +2,7 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {

packages/ui/tsconfig.json

@@ -1,6 +1,9 @@
 {
   "extends": "@repo/typescript-config/base.json",
   "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "target": "ES6",
     "jsx": "react-jsx",
     "outDir": "dist",
     "rootDir": "src",