web: added change default fontstyle feature in the settings

apps/web/src/components/default-font/index.tsx

@@ -0,0 +1,92 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2022 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { Flex, Slider, Text } from "@theme-ui/components";
+import { useEffect, useState } from "react";
+import Config from "../../utils/config";
+import DropdownButton from "../dropdown-button";
+
+export function DefaultFont() {
+  const fonts = ["sans-serif", "serif", "monoSpace"];
+  const getOptions = () =>
+    Config.get("fontFamily", fonts).map((font) => ({
+      title: () => capitalizeFirstLetter(font),
+      onClick: () => {
+        const newFonts = [font];
+        for (const item of fonts) {
+          if (item !== font) {
+            newFonts.push(item);
+          }
+        }
+        Config.set("fontFamily", newFonts);
+        setOptions(getOptions());
+      },
+      key: font
+    }));
+  const [fontSize, setFontSize] = useState(Config.get("fontSize", 16));
+  const [options, setOptions] = useState(getOptions());
+  useEffect(() => {
+    console.log("options changed");
+  }, [options]);
+
+  return (
+    <Flex sx={{ justifyContent: "space-evenly", flexWrap: "wrap" }}>
+      <Flex sx={{ flex: 3, minWidth: 100 }}>
+        <Slider
+          min={8}
+          max={120}
+          defaultValue={fontSize}
+          step={1}
+          onChange={(e) => {
+            setFontSize(parseInt(e.target.value));
+            Config.set("fontSize", parseInt(e.target.value));
+          }}
+          sx={{ width: "75%" }}
+        />
+        <Text
+          sx={{
+            width: "25%",
+            fontSize: "12px",
+            textAlign: "center"
+          }}
+        >
+          {`${fontSize}px`}
+        </Text>
+      </Flex>
+      <DropdownButton
+        options={options}
+        title="Font Family"
+        sx={{
+          flex: 1,
+          minWidth: 100
+        }}
+        buttonStyle={{
+          width: "80%"
+        }}
+        chevronStyle={{
+          width: "20%"
+        }}
+      />
+    </Flex>
+  );
+}
+
+function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}

apps/web/src/components/dropdown-button/index.js

@@ -21,14 +21,19 @@ import { Button, Flex } from "@theme-ui/components";
 import { useMenuTrigger } from "../../hooks/use-menu";
 import { ChevronDown } from "../icons";
 
-export default function DropdownButton({ title, options }) {
+export default function DropdownButton(props) {
   const { openMenu } = useMenuTrigger();
+  const { options, title, sx, buttonStyle, chevronStyle } = props;
 
   if (!options || !options.length) return null;
   return (
-    <Flex>
+    <Flex sx={sx}>
       <Button
-        sx={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
+        sx={{
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+          ...buttonStyle
+        }}
         onClick={options[0].onClick}
       >
         {options[0].title()}
@@ -38,7 +43,8 @@ export default function DropdownButton({ title, options }) {
           px={1}
           sx={{
             borderBottomLeftRadius: 0,
-            borderTopLeftRadius: 0
+            borderTopLeftRadius: 0,
+            ...chevronStyle
           }}
           onClick={() => openMenu(options.slice(1), { title })}
         >

apps/web/src/components/editor/tiptap.tsx

@@ -52,6 +52,7 @@ import { showBuyDialog } from "../../common/dialog-controller";
 import { useStore as useSettingsStore } from "../../stores/setting-store";
 import { debounceWithId } from "../../utils/debounce";
 import { store as editorstore } from "../../stores/editor-store";
+import Config from "../../utils/config";
 
 type TipTapProps = {
   editorContainer: HTMLElement;
@@ -279,6 +280,10 @@ function TipTap(props: TipTapProps) {
     };
   }, [editor, editorContainer]);
 
+  useEffect(() => {
+    editorContainer.style.fontSize = `${Config.get("fontSize", 16)}px`;
+  });
+
   if (!toolbarContainerId) return null;
 
   return (

apps/web/src/views/settings.js

@@ -74,6 +74,7 @@ import { clearLogs, downloadLogs } from "../utils/logger";
 import { exportNotes } from "../common/export";
 import { scheduleBackups } from "../common/reminders";
 import usePrivacyMode from "../hooks/use-privacy-mode";
+import { DefaultFont } from "../components/default-font";
 
 function subscriptionStatusToString(user) {
   const status = user?.subscription?.type;
@@ -542,6 +543,12 @@ function Settings() {
         />
         {groups.editor && (
           <>
+            <Tip
+              text="Customize Default Font"
+              tip="Set default font size and family"
+              sx={{ py: 2 }}
+            />
+            <DefaultFont />
             <Toggle
               title="Use double spaced lines"
               onTip="New lines will be double spaced (old ones won't be affected)."

packages/editor/src/toolbar/tools/font.tsx

@@ -24,11 +24,13 @@ import { MenuItem } from "../../components/menu/types";
 import { useCallback, useMemo } from "react";
 import { Counter } from "../components/counter";
 import { useRefValue } from "../../hooks/use-ref-value";
+import { config } from "../../utils/config";
 
 export function FontSize(props: ToolProps) {
   const { editor } = props;
   const { fontSize: _fontSize } = editor.getAttributes("textStyle");
-  const fontSize = _fontSize || "16px";
+  const defaultFontSize = `${config.get("fontSize", 16)}px`;
+  const fontSize = _fontSize || defaultFontSize;
   const fontSizeAsNumber = useRefValue(parseInt(fontSize.replace("px", "")));
 
   const decreaseFontSize = useCallback(() => {
@@ -56,7 +58,9 @@ export function FontSize(props: ToolProps) {
           .setFontSize(`${increaseFontSize()}px`)
           .run();
       }}
-      onReset={() => editor.current?.chain().focus().setFontSize("16px").run()}
+      onReset={() =>
+        editor.current?.chain().focus().setFontSize(defaultFontSize).run()
+      }
       value={fontSize}
     />
   );