From 18d69f94d2282b54fd2e01f2c6a27766eded4024 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 17 Apr 2026 06:32:49 +0300
Subject: [PATCH] feat(markdown): introduce some padding

---
 .../src/widgets/type_widgets/code/Markdown.css     | 10 ++++++++++
 .../src/widgets/type_widgets/code/Markdown.tsx     | 14 +++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 apps/client/src/widgets/type_widgets/code/Markdown.css

diff --git a/apps/client/src/widgets/type_widgets/code/Markdown.css b/apps/client/src/widgets/type_widgets/code/Markdown.css
new file mode 100644
index 0000000000..19bd140e35
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/code/Markdown.css
@@ -0,0 +1,10 @@
+.note-detail-markdown {
+    .note-detail-code-editor .cm-editor {
+        padding-block: 0.25em;
+    }
+
+    .markdown-preview {
+        padding: 0.5em;
+    }
+}
+
diff --git a/apps/client/src/widgets/type_widgets/code/Markdown.tsx b/apps/client/src/widgets/type_widgets/code/Markdown.tsx
index 3f7cf0df5f..beba918323 100644
--- a/apps/client/src/widgets/type_widgets/code/Markdown.tsx
+++ b/apps/client/src/widgets/type_widgets/code/Markdown.tsx
@@ -1,12 +1,24 @@
+import "./Markdown.css";
+
+import { Marked } from "marked";
+import { useMemo, useState } from "preact/hooks";
+
+import { SanitizedHtml } from "../../react/RawHtml";
 import SplitEditor from "../helpers/SplitEditor";
 import { TypeWidgetProps } from "../type_widget";
 
+const marked = new Marked({ breaks: true, gfm: true });
+
 export default function Markdown(props: TypeWidgetProps) {
+    const [ content, setContent ] = useState("");
+    const html = useMemo(() => marked.parse(content) as string, [ content ]);
+
     return (
         <SplitEditor
             noteType="code"
             {...props}
-            previewContent={<div>Hello World</div>}
+            onContentChanged={setContent}
+            previewContent={<SanitizedHtml className="markdown-preview" html={html} />}
         />
     );
 }