From 53e6d7b0067a93116fddd285e0d1dedaefb0761c Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Tue, 14 Jun 2022 15:45:55 +1000
Subject: [PATCH] fix markdown field styles

---
 src/components/fields/Markdown/BasicCell.tsx  |  1 +
 .../fields/Markdown/SideDrawerField.tsx       | 33 ++++++++++++++++---
 src/theme/components.tsx                      | 22 +++++++++++++
 3 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/components/fields/Markdown/BasicCell.tsx b/src/components/fields/Markdown/BasicCell.tsx
index 5ef1326f..fdef860e 100644
--- a/src/components/fields/Markdown/BasicCell.tsx
+++ b/src/components/fields/Markdown/BasicCell.tsx
@@ -6,6 +6,7 @@ import MDEditor from "@uiw/react-md-editor";
 
 export default function Code({ value }: IBasicCellProps) {
   const theme = useTheme();
+
   return (
     <div data-color-mode={theme.palette.mode}>
       <MDEditor.Markdown source={value} />
diff --git a/src/components/fields/Markdown/SideDrawerField.tsx b/src/components/fields/Markdown/SideDrawerField.tsx
index c2c28be2..a29f8517 100644
--- a/src/components/fields/Markdown/SideDrawerField.tsx
+++ b/src/components/fields/Markdown/SideDrawerField.tsx
@@ -1,24 +1,47 @@
 import { useTheme } from "@mui/material";
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
 
+import { Box } from "@mui/material";
 import MDEditor from "@uiw/react-md-editor";
 
-export default function Code({
+import { fieldSx } from "@src/components/SideDrawer/utils";
+
+export default function Markdown({
   value,
   onChange,
   onSubmit,
   disabled,
 }: ISideDrawerFieldProps) {
   const theme = useTheme();
+
+  if (disabled)
+    return (
+      <Box
+        sx={[fieldSx, { display: "block", maxHeight: 300, overflow: "auto" }]}
+        data-color-mode={theme.palette.mode}
+      >
+        <MDEditor.Markdown source={value} />
+      </Box>
+    );
+
   return (
-    <div data-color-mode={theme.palette.mode}>
+    <Box
+      sx={[
+        fieldSx,
+        {
+          display: "block",
+          padding: 0,
+          "& .wmde-markdown-var": { boxShadow: "none" },
+        },
+      ]}
+      data-color-mode={theme.palette.mode}
+    >
       <MDEditor
-        aria-disabled={disabled}
-        height={200}
+        height={300}
         value={value}
         onChange={onChange}
         onBlur={onSubmit}
       />
-    </div>
+    </Box>
   );
 }
diff --git a/src/theme/components.tsx b/src/theme/components.tsx
index 8c0d1540..4fa19e66 100644
--- a/src/theme/components.tsx
+++ b/src/theme/components.tsx
@@ -168,6 +168,28 @@ export const components = (theme: Theme): ThemeOptions => {
               caretColor: theme.palette.primary.main,
             },
           },
+
+          ".wmde-markdown.wmde-markdown, .wmde-markdown-var.wmde-markdown-var":
+            {
+              font: "inherit",
+              fontFeatureSettings: "inherit",
+              letterSpacing: "inherit",
+              backgroundColor: "transparent",
+              color: "inherit",
+
+              "--color-canvas-default": "transparent",
+              "--color-border-default": theme.palette.divider,
+              "--color-border-muted": theme.palette.divider,
+
+              "& .w-md-editor-text": { fontFeatureSettings: "inherit" },
+
+              "& .w-md-editor-text-pre > code": {
+                font: "inherit !important",
+                fontFeatureSettings: "inherit",
+                letterSpacing: "inherit",
+                background: "none",
+              },
+            },
         },
       },