fix fonts

Author: renardeinside

package.json

@@ -15,7 +15,7 @@
     "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@fontsource-variable/fira-code": "^5.1.0",
+    "@fontsource-variable/jetbrains-mono": "^5.1.1",
     "@fontsource/space-mono": "^5.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
@@ -82,4 +82,4 @@
     "vite-bundle-visualizer": "^1.2.1",
     "vite-plugin-static-copy": "^2.1.0"
   }
-}
+}

src/components/Editor.tsx

@@ -25,7 +25,7 @@ const EditorView = ({ doc, firstLoad }: { doc: Y.Doc; firstLoad: boolean }) => {
       editorProps: {
         attributes: {
           class:
-            "!w-full prose !max-w-none dark:prose-invert prose-md leading-tight focus:outline-none min-h-[60vh]",
+            "!w-full prose !max-w-none dark:prose-invert prose-md leading-tight focus:outline-none min-h-[80vh]",
         },
       },
     });

src/main.tsx

@@ -1,11 +1,11 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
-import './tailwind.css'
 
-// @ts-expect-error - for some reason this doesn't work in terms of importing the font
-// however, it works in the browser
-import '@fontsource-variable/fira-code';
+import '@fontsource-variable/jetbrains-mono/index.css';
+
+import './tailwind.css';
+
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

src/tailwind.css

@@ -1,3 +1,8 @@
+:root {
+  /* Please note font is imported in ./main.tsx */
+  --font-mono: 'JetBrains Mono Variable', monospace;
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -25,6 +30,7 @@
     --ring: 307 23.3% 14.3%;
     --radius: 0.5rem;
   }
+
   .dark {
     --background: 307 40% 9%;
     --foreground: 307 5% 100%;
@@ -59,15 +65,16 @@
   }
 }
 
-.prose p {
-  @apply my-4 leading-tight; /* Tailwind utilities */
+.ProseMirror p {
+  @apply my-4;
+  /* Tailwind utilities */
 }
 
 /* Basic editor styles */
 .tiptap {
 
   /* disable margin-bottom for paragraph elements under li */
-  li > p {
+  li>p {
     margin-bottom: 0;
   }
 
@@ -156,16 +163,16 @@
       display: flex;
       margin-bottom: 0;
 
-      > label {
+      >label {
         flex: 0 0 auto;
         margin-right: 0.5rem;
         user-select: none;
       }
 
-      > div {
+      >div {
         flex: 1 1 auto;
 
-        > p {
+        >p {
           margin: 0;
         }
       }
@@ -179,4 +186,4 @@
       margin: 0;
     }
   }
-}
+}

tailwind.config.js

@@ -7,7 +7,7 @@ export default {
   theme: {
   	extend: {
       fontFamily: {
-        mono: ['"Fira Code"', 'monospace'],
+		mono: 'var(--font-mono)',
       },
   		borderRadius: {
   			lg: 'var(--radius)',

yarn.lock

@@ -368,10 +368,10 @@
   resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz"
   integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
 
-"@fontsource-variable/fira-code@^5.1.0":
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/@fontsource-variable/fira-code/-/fira-code-5.1.0.tgz"
-  integrity sha512-fwJbJLvyZ2BhgBSPYCNsrQ6IFQTpRu9GWXY8N20wHTpbhV0Ro5QJihiZV060Ay3kVR6IVH/oSVe/cr7Ube28gg==
+"@fontsource-variable/jetbrains-mono@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.1.1.tgz#d45ecec375900a89b64b8c3e260b51ad848ef11c"
+  integrity sha512-V+1aRFRvuZ66PpO30s8l/2aADKzpV9VRsO3kSZE+rTMvi4vab3cUcPHMN2z+wAvjkYJO71Yf+g3/Y6pSMmQpVQ==
 
 "@fontsource/space-mono@^5.1.1":
   version "5.1.1"