feat: set font size, line height, font wt

#420

package.json

@@ -38,7 +38,7 @@
     "fuse.js": "^6.6.2",
     "immer": "^9.0.19",
     "is-hotkey": "^0.2.0",
-    "mdsmirror": "0.0.30",
+    "mdsmirror": "0.0.31",
     "mdsmap": "0.0.3",
     "html2canvas": "1.4.1",
     "jspdf": "2.5.1",

src/components/note/Note.tsx

@@ -53,6 +53,9 @@ function Note(props: Props) {
 
   const darkMode = useStore((state) => state.darkMode);
   const font = useStore((state) => state.font);
+  const fontSize = useStore((state) => state.fontSize);
+  const fontWt = useStore((state) => state.fontWt);
+  const lineHt = useStore((state) => state.lineHeight);
   const rawMode = useStore((state) => state.rawMode);
   const readMode = useStore((state) => state.readMode);
   const isRTL = useStore((state) => state.isRTL);
@@ -302,6 +305,7 @@ function Note(props: Props) {
 
   const customTheme = {
     fontFamily: `${font}`,
+    fontScale: [fontSize / 1.1, lineHt / 1.6, fontWt / 400],
   };
 
   const noteContainerClassName =

src/components/settings/SettingsModal.tsx

@@ -18,10 +18,12 @@ export default function SettingsModal({ isOpen, handleClose }: Props) {
   const isOpenPreOn = useStore((state) => state.isOpenPreOn);
   const setIsOpenPreOn = useStore((state) => state.setIsOpenPreOn);
 
-  // const isCheckSpellOn = useStore((state) => state.isCheckSpellOn);
-  // const setIsCheckSpellOn = useStore((state) => state.setIsCheckSpellOn);
-  // const readMode = useStore((state) => state.readMode);
-  // const setReadMode = useStore((state) => state.setReadMode);
+  const fontSize = useStore((state) => state.fontSize);
+  const setSize = useStore((state) => state.setFontSize);
+  const fontWt = useStore((state) => state.fontWt);
+  const setWt = useStore((state) => state.setFontWt);
+  const lineHeight = useStore((state) => state.lineHeight);
+  const setHeight = useStore((state) => state.setLineHeight);
 
   const font = useStore((state) => state.font);
   const setFont = useStore((state) => state.setFont);
@@ -59,19 +61,6 @@ export default function SettingsModal({ isOpen, handleClose }: Props) {
           optionLeft="No" 
           optionRight="Yes"
         /> 
-        {/* <SettingsToggle
-          name="Write or Read Only" 
-          check={readMode}
-          handleCheck={setReadMode}
-          optionLeft="Write" 
-          optionRight="Read"
-        /> 
-        <SettingsToggle
-          name="Spell Check" 
-          descript="Spell checker works for English"
-          check={isCheckSpellOn}
-          handleCheck={setIsCheckSpellOn}
-        /> */}
         <SettingsToggle
           name="Text Direction" 
           check={isRTL}
@@ -102,6 +91,25 @@ export default function SettingsModal({ isOpen, handleClose }: Props) {
             </select>
           </div>
         </div>
+        <div className="flex flex-col items-center mb-4">
+          <div className="mb-2">
+            <h1 className="text-xl font-semibold">Set Font Scale</h1>
+          </div>
+          <div className="flex flex-row items-center justify-center m-1">
+            <span className="text-sm text-gray-600 mr-2">Font Size: </span>
+            <input type="number" className="p-1 border-none outline-none" style={{width: '5em'}} value={fontSize.toFixed(1)} step="0.1" onChange={e => setSize(Number(e.target.value) || 1.1)} />
+            <span className="text-sm text-gray-600">em</span>
+          </div>
+          <div className="flex flex-row items-center justify-center m-1">
+            <span className="text-sm text-gray-600 mr-2">Line Height: </span>
+            <input type="number" className="p-1 border-none outline-none" style={{width: '5em'}} value={lineHeight.toFixed(1)} step="0.1" onChange={e => setHeight(Number(e.target.value) || 1.6)} />
+            <span className="text-sm text-gray-600">em</span>
+          </div>
+          <div className="flex flex-row items-center justify-center m-1">
+            <span className="text-sm text-gray-600 mr-2">Font Weight: </span>
+            <input type="number" className="p-1 border-none outline-none" style={{width: '5em'}} value={fontWt.toFixed()} step="100" onChange={e => setWt(Number(e.target.value) || 400)} />
+          </div>
+        </div>
       </div>
     </BaseModal>
   );

src/lib/store.ts

@@ -232,6 +232,9 @@ export const store = createVanilla<Store>(
         userId: state.userId,
         darkMode: state.darkMode,
         font: state.font,
+        fontSize: state.fontSize,
+        fontWt: state.fontWt,
+        lineHeight: state.lineHeight,
         isRTL: state.isRTL,
         isCheckSpellOn: state.isCheckSpellOn,
         isOpenPreOn: state.isOpenPreOn,

src/lib/userSettings.ts

@@ -24,8 +24,14 @@ export type UserSettings = {
   setUserId: Setter<string>;
   darkMode: boolean;
   setDarkMode: Setter<boolean>;
-  font: string,
+  font: string;
   setFont: Setter<string>;
+  fontSize: number;
+  setFontSize: Setter<number>;
+  fontWt: number;
+  setFontWt: Setter<number>;
+  lineHeight: number;
+  setLineHeight: Setter<number>;
   isSidebarOpen: boolean;
   setIsSidebarOpen: Setter<boolean>;
   isSettingsOpen: boolean;
@@ -67,6 +73,12 @@ const userSettingsSlice = (
   setDarkMode: setter(set, 'darkMode'),
   font: '',
   setFont: setter(set, 'font'),
+  fontSize: 1.1,
+  setFontSize: setter(set, 'fontSize'),
+  fontWt: 400,
+  setFontWt: setter(set, 'fontWt'),
+  lineHeight: 1.6,
+  setLineHeight: setter(set, 'lineHeight'),
   isSidebarOpen: true,
   setIsSidebarOpen: setter(set, 'isSidebarOpen'),
   isSettingsOpen: false,

src/styles/index.css

@@ -135,6 +135,7 @@
 
 body {
   margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, system-ui, 'Arial', 'Helvetica Neue', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Microsoft YaHei', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

yarn.lock

@@ -7969,10 +7969,10 @@ [email protected]:
     react-dom "^17.0.2"
     remarkable "2.0.1"
 
-[email protected].30:
-  version "0.0.30"
-  resolved "https://registry.yarnpkg.com/mdsmirror/-/mdsmirror-0.0.30.tgz#baf2048cc215b95860f2614016604e402ac2a251"
-  integrity sha512-xFWSAVQyEvZcjbnWuvi3YE2LTo5/oPqH2nv4Ujh9QssLBFb+b4TVqVQFtkrI0qYKa+LIkveygfCJAd84xRwwDg==
+[email protected].31:
+  version "0.0.31"
+  resolved "https://registry.yarnpkg.com/mdsmirror/-/mdsmirror-0.0.31.tgz#a10a51b2432bde6e76aaf78b9c1e8b6b78e74caf"
+  integrity sha512-M4HbdvMth0t1nZCjUS7Drw9KW8iLG9dEGnCZDp/2r4hiYRDtxw/H1LT9CNAvrt2gcewy4X3kpxCHNl3ru0pLPA==
   dependencies:
     "@juggle/resize-observer" "^3.3.1"
     "@tabler/icons-react" "^2.30.0"