* feat(NoteContent.tsx): add clsx import for conditional class names

* style(NoteContent.tsx): add different font sizes for different heading levels in Markdown * style(SparkMde.tsx): remove autoDownloadFontAwesome option and toolbar option from MdeOptions * style(sparkmde.css): update font sizes for different heading levels in EasyMDE
hereAlexT · Dec 17, 2023 · e8a50b8 · e8a50b8
1 parent 546bd02
commit e8a50b8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/frontend/src/components/Note/NoteContent.tsx b/frontend/src/components/Note/NoteContent.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React from "react";
 import Markdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
@@ -19,7 +20,15 @@ const NoteContent: React.FC<NoteContentProps> = ({ note }) => {
       <Markdown
         rehypePlugins={[rehypeKatex]}
         remarkPlugins={[remarkMath]}
-        className="prose prose-neutral  font-poppins text-sm dark:prose-invert"
+        className={clsx(
+          "prose prose-neutral font-poppins text-sm dark:prose-invert",
+          "prose-h1:text-2xl",
+          "prose-h2:text-xl",
+          "prose-h3:text-lg",
+          "prose-h4:text-base prose-h4:font-bold",
+          "prose-h5:text-base prose-h5:font-normal",
+          "prose-h6:text-base prose-h6:font-light",
+        )}
         children={note.body}
         components={{
           code(props) {

diff --git a/frontend/src/components/NoteEditor/Mde/SparkMde.tsx b/frontend/src/components/NoteEditor/Mde/SparkMde.tsx
@@ -112,17 +112,16 @@ const SparkMde = React.forwardRef((props: SparkMdeProps, ref) => {
 
   const MdeOptions = useMemo(() => {
     return {
-      autoDownloadFontAwesome: false,
       minHeight: minHeight || "100%",
-      // maxHeight: maxHeight || "100%",
       spellChecker: false,
       lineNumbers: false,
       unorderedListStyle: "-",
       uploadImage: false,
       placeholder: "You got an idea💡? What's that?",
       status: false,
-      toolbar: false,
       autofocus: true,
+      autoDownloadFontAwesome: false,
+      toolbar: false,
     } as EasyMDE.Options;
   }, []);
 

diff --git a/frontend/src/components/NoteEditor/Mde/sparkmde.css b/frontend/src/components/NoteEditor/Mde/sparkmde.css
@@ -685,22 +685,22 @@ span.CodeMirror-selectedtext {
   color: #183691;
 }
 .cm-s-easymde .cm-header-1 {
-  font-size: calc(1.375rem + 1.5vw);
+  @apply text-2xl font-bold;
 }
 .cm-s-easymde .cm-header-2 {
-  font-size: calc(1.325rem + 0.9vw);
+  @apply text-xl font-bold;
 }
 .cm-s-easymde .cm-header-3 {
-  font-size: calc(1.3rem + 0.6vw);
+  @apply text-lg font-bold;
 }
 .cm-s-easymde .cm-header-4 {
-  font-size: calc(1.275rem + 0.3vw);
+  @apply text-base font-bold;
 }
 .cm-s-easymde .cm-header-5 {
-  font-size: 1.25rem;
+  @apply text-base font-normal;
 }
 .cm-s-easymde .cm-header-6 {
-  font-size: 1rem;
+  @apply text-base font-light;
 }
 .cm-s-easymde .cm-header-1,
 .cm-s-easymde .cm-header-2,