feat: provide editor font setting option

#420
mdSilo · Sep 4, 2023 · 22cfa3a · 22cfa3a
1 parent 606c05e
commit 22cfa3a
Show file tree

Hide file tree

Showing 12 changed files with 71 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     "fuse.js": "^6.6.2",
     "immer": "^9.0.19",
     "is-hotkey": "^0.2.0",
-    "mdsmirror": "0.0.27",
+    "mdsmirror": "0.0.30",
     "mdsmap": "0.0.3",
     "html2canvas": "1.4.1",
     "jspdf": "2.5.1",

diff --git a/public/index.html b/public/index.html
@@ -4,10 +4,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="mdSilo Desktop" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
     <title>mdSilo</title>
   </head>
   <body>

diff --git a/src/components/note/Note.tsx b/src/components/note/Note.tsx
@@ -52,6 +52,7 @@ function Note(props: Props) {
   useEffect(() => { getHeading(); }, [noteId]); // to trigger change on dep change
 
   const darkMode = useStore((state) => state.darkMode);
+  const font = useStore((state) => state.font);
   const rawMode = useStore((state) => state.rawMode);
   const readMode = useStore((state) => state.readMode);
   const isRTL = useStore((state) => state.isRTL);
@@ -103,15 +104,15 @@ function Note(props: Props) {
       // update TOC if any 
       getHeading();
     },
-    [notePath, rawMode]
+    [notePath]
   );
 
   const onMarkdownChange = useCallback(
     async (text: string) => {
       // console.log("on markdown content change", text);
       await writeFile(notePath, text);
     },
-    [rawMode, notePath]
+    [notePath]
   );
 
   setWindowTitle(`/ ${title} - mdSilo`, useStore((state) => state.isLoading));
@@ -299,6 +300,10 @@ function Note(props: Props) {
     (hash: string) => { copy(`${title}${hash}`); }, [title]
   );
 
+  const customTheme = {
+    fontFamily: `${font}`,
+  };
+
   const noteContainerClassName =
     'flex flex-col w-full bg-white dark:bg-black dark:text-gray-200';
   const errorContainerClassName = 
@@ -374,6 +379,7 @@ function Note(props: Props) {
                     readOnly={readMode}
                     readOnlyWriteCheckboxes={readMode}
                     dir={isRTL ? 'rtl' : 'ltr'}
+                    theme={customTheme}
                     onChange={onContentChange}
                     onSearchLink={onSearchNote}
                     onCreateLink={onCreateNote}

diff --git a/src/components/settings/SettingsModal.tsx b/src/components/settings/SettingsModal.tsx
@@ -23,6 +23,16 @@ export default function SettingsModal({ isOpen, handleClose }: Props) {
   // const readMode = useStore((state) => state.readMode);
   // const setReadMode = useStore((state) => state.setReadMode);
 
+  const font = useStore((state) => state.font);
+  const setFont = useStore((state) => state.setFont);
+  const fonts = [
+    {name: 'Default', font: ''}, 
+    {name: 'Sniglet', font: 'Sniglet'}, 
+    {name: 'RobotoMono', font: 'RobotoMono'}, 
+    {name: 'Serif', font: 'IBMPlexSerif'},
+    {name: 'SansSerif', font: 'KaTeX_SansSerif'}
+  ];
+
   return (
     <BaseModal title="Settings" isOpen={isOpen} handleClose={handleClose}>
       <div className="flex-1 p-4 bg-gray-100">
@@ -69,6 +79,29 @@ export default function SettingsModal({ isOpen, handleClose }: Props) {
           optionLeft="Left To Right" 
           optionRight="Right To Left"
         />
+        <div className="flex flex-col items-center mb-4">
+          <div className="mb-2">
+            <h1 className="text-xl font-semibold">Set Editor Font</h1>
+          </div>
+          <div className="flex flex-row items-center">
+            <select 
+              name="select-font" 
+              className="w-full p-2 rounded text-primary-500 border-none"
+              value={font || 'Default'}
+              onChange={(ev) => {
+                const ft = ev.target.value;
+                setFont(ft);
+                console.log("select font: ", ft)
+              }}
+            >
+              {fonts.map((font, index) => (
+                <option key={`font-${index}`} value={font.font}>
+                  {font.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
       </div>
     </BaseModal>
   );

diff --git a/src/lib/store.ts b/src/lib/store.ts
@@ -231,6 +231,7 @@ export const store = createVanilla<Store>(
         // user setting related
         userId: state.userId,
         darkMode: state.darkMode,
+        font: state.font,
         isRTL: state.isRTL,
         isCheckSpellOn: state.isCheckSpellOn,
         isOpenPreOn: state.isOpenPreOn,

diff --git a/src/lib/userSettings.ts b/src/lib/userSettings.ts
@@ -24,6 +24,8 @@ export type UserSettings = {
   setUserId: Setter<string>;
   darkMode: boolean;
   setDarkMode: Setter<boolean>;
+  font: string,
+  setFont: Setter<string>;
   isSidebarOpen: boolean;
   setIsSidebarOpen: Setter<boolean>;
   isSettingsOpen: boolean;
@@ -63,6 +65,8 @@ const userSettingsSlice = (
   setUserId: setter(set, 'userId'),
   darkMode: true,
   setDarkMode: setter(set, 'darkMode'),
+  font: '',
+  setFont: setter(set, 'font'),
   isSidebarOpen: true,
   setIsSidebarOpen: setter(set, 'isSidebarOpen'),
   isSettingsOpen: false,

diff --git a/src/styles/fonts/IBMPlexSerif-Regular.ttf b/src/styles/fonts/IBMPlexSerif-Regular.ttf
diff --git a/src/styles/fonts/RobotoMono-Regular.ttf b/src/styles/fonts/RobotoMono-Regular.ttf
diff --git a/src/styles/fonts/Sniglet-Regular.ttf b/src/styles/fonts/Sniglet-Regular.ttf
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -113,11 +113,28 @@
   font-style: normal;
 }
 
+/* font for editor */
+@font-face {
+  font-family: 'Sniglet';
+  src: url(fonts/Sniglet-Regular.ttf) format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'RobotoMono';
+  src: url(fonts/RobotoMono-Regular.ttf) format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'IBMPlexSerif';
+  src: url(fonts/IBMPlexSerif-Regular.ttf) format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const defaultTheme = require('tailwindcss/defaultTheme');
 const colors = require('tailwindcss/colors');
 const { gray } = require('tailwindcss/colors');
 
@@ -19,9 +18,6 @@ module.exports = {
       },
     },
     extend: {
-      fontFamily: {
-        display: ['Inter', ...defaultTheme.fontFamily.sans],
-      },
       spacing: {
         0.25: '0.0625rem',
         128: '32rem',

diff --git a/yarn.lock b/yarn.lock
@@ -7969,10 +7969,10 @@ [email protected]:
     react-dom "^17.0.2"
     remarkable "2.0.1"
 
-[email protected].27:
-  version "0.0.27"
-  resolved "https://registry.yarnpkg.com/mdsmirror/-/mdsmirror-0.0.27.tgz#ca2e01d663a0470dfac03b0871c3aa7d39a6ed5c"
-  integrity sha512-6gGUHPDR+sU/ROpDmOxyeZFPzq8RiFFtRV6ObENgfi0AYq0IUyC703wdgueCbxgK21LIVPkjH5kKbiRKIQeWYw==
+[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==
   dependencies:
     "@juggle/resize-observer" "^3.3.1"
     "@tabler/icons-react" "^2.30.0"