Override textarea font settings in DialogueTextarea & MathTextarea to…

… match syntax highlighted text
chrismaltby · Jul 2, 2024 · f8fdab0 · f8fdab0
1 parent 0d8a74c
commit f8fdab0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/components/ui/form/DialogueTextarea.tsx b/src/components/ui/form/DialogueTextarea.tsx
@@ -80,7 +80,15 @@ const DialogueTextareaWrapper = styled.div<DialogueTextareaWrapperProps>`
     position: static !important;
     margin-left: -5px !important;
     border: 1px solid ${(props) => props.theme.colors.input.border};
-    font-size: ${(props) => props.theme.typography.fontSize};
+    font-size: ${(props) => props.theme.typography.fontSize} !important;
+    font-family: monospace !important;
+    font-stretch: 100% !important;
+    font-style: normal !important;
+    font-variant-caps: normal !important;
+    font-variant-east-asian: normal !important;
+    font-variant-ligatures: normal !important;
+    font-variant-numeric: normal !important;
+    font-weight: 700 !important;
     border-radius: 4px;
     box-sizing: border-box;
     width: 100%;

diff --git a/src/components/ui/form/MathTextarea.tsx b/src/components/ui/form/MathTextarea.tsx
@@ -185,7 +185,15 @@ export const MathTextareaWrapper = styled.div`
   .MentionsInput__input {
     color: transparent;
     border: 1px solid ${(props) => props.theme.colors.input.border};
-    font-size: ${(props) => props.theme.typography.fontSize};
+    font-size: ${(props) => props.theme.typography.fontSize} !important;
+    font-family: monospace !important;
+    font-stretch: 100% !important;
+    font-style: normal !important;
+    font-variant-caps: normal !important;
+    font-variant-east-asian: normal !important;
+    font-variant-ligatures: normal !important;
+    font-variant-numeric: normal !important;
+    font-weight: 700 !important;
     border-radius: 4px;
     box-sizing: border-box;
     width: 100%;