markdown editor first attempt

package.json

@@ -26,8 +26,10 @@
 		"gray-matter": "^4.0.3",
 		"itty-router": "^5.0.17",
 		"lodash.throttle": "^4.1.1",
+		"markdown-it": "^14.1.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-markdown-editor-lite": "^1.3.4",
 		"react-router-dom": "^7.0.2",
 		"tldraw": "^3.6.0",
 		"vercel": "^39.1.1"

src/css/style.css

@@ -324,4 +324,13 @@ p:has(+ ol) {
   box-shadow: 0 0px 16px rgba(0, 0, 0, 0.15);
   overflow: hidden;
   background-color: white;
+}
+
+.rc-md-editor {
+  border: none !important;
+  font-family: inherit;
+}
+
+.rc-md-editor .editor-container {
+  border-radius: 4px;
 }

src/shapes/MarkdownShapeUtil.tsx

@@ -1,11 +1,18 @@
 /** TODO: build this */
 
 import { BaseBoxShapeUtil, TLBaseBoxShape, TLBaseShape } from "tldraw"
+import MdEditor from "react-markdown-editor-lite"
+import MarkdownIt from "markdown-it"
+import "react-markdown-editor-lite/lib/index.css"
+
+// Initialize markdown parser
+const mdParser = new MarkdownIt()
 
 export type IMarkdownShape = TLBaseShape<
   "MarkdownTool",
   {
     content: string
+    html: string
   }
 >
 
@@ -20,13 +27,58 @@ export class MarkdownShape extends BaseBoxShapeUtil<
 
   getDefaultProps(): IMarkdownShape["props"] & { w: number; h: number } {
     return {
-      content: "",
-      w: 100,
-      h: 100,
+      content: "# New Note",
+      html: "<h1>New Note</h1>",
+      w: 400,
+      h: 300,
     }
   }
 
-  component(shape: IMarkdownShape) {
-    return <div>{shape.props.content}</div>
+  component(shape: IMarkdownShape & TLBaseBoxShape) {
+    const handleEditorChange = ({
+      text,
+      html,
+    }: {
+      text: string
+      html: string
+    }) => {
+      // Update the shape's content
+      this.editor?.updateShape({
+        id: shape.id,
+        type: "MarkdownTool",
+        props: {
+          ...shape.props,
+          content: text,
+          html: html,
+        },
+      })
+    }
+
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          background: "white",
+          borderRadius: "4px",
+        }}
+      >
+        <MdEditor
+          style={{ height: "100%" }}
+          renderHTML={(text) => mdParser.render(text)}
+          value={shape.props.content}
+          onChange={handleEditorChange}
+          view={{ menu: true, md: true, html: false }}
+          canView={{
+            menu: true,
+            md: true,
+            html: false,
+            both: false,
+            fullScreen: false,
+            hideMenu: false,
+          }}
+        />
+      </div>
+    )
   }
 }