web: added state base to default font-family and size

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

@@ -19,14 +19,19 @@ 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 { useStore as useEditorStore } from "../../stores/editor-store";
 import Config from "../../utils/config";
 import DropdownButton from "../dropdown-button";
 
 export function DefaultFont() {
-  const fonts = ["sans-serif", "serif", "monoSpace"];
+  const { setFontSize, setFontFamily } = useEditorStore((store) => store);
+  const fontSize = useEditorStore((store) => store.session.fontSize);
+  //const fontFamily = useEditorStore((store) => store.session.fontFamily);
+
+  const fonts = ["Sans-serif", "Serif", "Monospace"];
   const getOptions = () =>
-    Config.get("fontFamily", fonts).map((font) => ({
-      title: () => capitalizeFirstLetter(font),
+    getFonts(Config.get("fontFamily", "Sans-serif")).map((font) => ({
+      title: () => font,
       onClick: () => {
         const newFonts = [font];
         for (const item of fonts) {
@@ -34,14 +39,16 @@ export function DefaultFont() {
             newFonts.push(item);
           }
         }
-        Config.set("fontFamily", newFonts);
+        Config.set("fontFamily", font);
+        setFontFamily(font);
         setOptions(getOptions());
       },
       key: font
     }));
-  const [fontSize, setFontSize] = useState(Config.get("fontSize", 16));
   const [options, setOptions] = useState(getOptions());
+
   useEffect(() => {
+    //setFontFamily(options.at(0));
     console.log("options changed");
   }, [options]);
 
@@ -51,11 +58,11 @@ export function DefaultFont() {
         <Slider
           min={8}
           max={120}
-          defaultValue={fontSize}
+          defaultValue={parseInt(fontSize.replace("px", ""))}
           step={1}
           onChange={(e) => {
-            setFontSize(parseInt(e.target.value));
-            Config.set("fontSize", parseInt(e.target.value));
+            setFontSize(`${parseInt(e.target.value)}px`);
+            Config.set("fontSize", `${e.target.value}px`);
           }}
           sx={{ width: "75%" }}
         />
@@ -66,7 +73,7 @@ export function DefaultFont() {
             textAlign: "center"
           }}
         >
-          {`${fontSize}px`}
+          {fontSize}
         </Text>
       </Flex>
       <DropdownButton
@@ -87,6 +94,13 @@ export function DefaultFont() {
   );
 }
 
-function capitalizeFirstLetter(string: string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
+function getFonts(font: string) {
+  const fonts = [font];
+  const deafultFonts = ["Sans-serif", "Serif", "Monospace"];
+  for (const _font of deafultFonts) {
+    if (_font !== font) {
+      fonts.push(_font);
+    }
+  }
+  return fonts;
 }

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

@@ -47,6 +47,10 @@ import useMobile from "../../hooks/use-mobile";
 import Titlebox from "./title-box";
 import useTablet from "../../hooks/use-tablet";
 import Config from "../../utils/config";
+import {
+  FontFamily,
+  FontSize
+} from "@notesnook/editor/dist/toolbar/tools/font";
 
 type PreviewSession = {
   content: { data: string; type: string };
@@ -241,6 +245,8 @@ export function Editor(props: EditorProps) {
     focusMode: false,
     isMobile: false
   };
+  const fontSize = useStore((store) => store.session.fontSize);
+  const fontFamily = useStore((store) => store.session.fontFamily);
 
   const editor = useEditorInstance();
 
@@ -287,6 +293,8 @@ export function Editor(props: EditorProps) {
   return (
     <EditorChrome {...props}>
       <Tiptap
+        fontSize={fontSize}
+        fontFamily={fontFamily}
         isMobile={isMobile}
         nonce={nonce}
         readonly={readonly}

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

@@ -33,7 +33,8 @@ import {
   usePermissionHandler,
   getHTMLFromFragment,
   Fragment,
-  type DownloadOptions
+  type DownloadOptions,
+  ToolProps
 } from "@notesnook/editor";
 import { Box, Flex } from "@theme-ui/components";
 import { PropsWithChildren, useEffect, useRef, useState } from "react";
@@ -70,6 +71,8 @@ type TipTapProps = {
   theme: Theme;
   isMobile?: boolean;
   downloadOptions?: DownloadOptions;
+  fontSize: string;
+  fontFamily: string;
 };
 
 const SAVE_INTERVAL = process.env.REACT_APP_TEST ? 100 : 300;
@@ -114,7 +117,9 @@ function TipTap(props: TipTapProps) {
     nonce,
     theme,
     isMobile,
-    downloadOptions
+    downloadOptions,
+    fontSize,
+    fontFamily
   } = props;
 
   const isUserPremium = useIsUserPremium();
@@ -281,11 +286,10 @@ function TipTap(props: TipTapProps) {
   }, [editor, editorContainer]);
 
   useEffect(() => {
-    editorContainer.style.fontSize = `${Config.get("fontSize", 16)}px`;
+    editorContainer.style.fontSize = fontSize;
   });
 
   if (!toolbarContainerId) return null;
-
   return (
     <>
       <Portal containerId={toolbarContainerId}>
@@ -294,6 +298,8 @@ function TipTap(props: TipTapProps) {
           theme={theme}
           location={isMobile ? "bottom" : "top"}
           tools={toolbarConfig}
+          defaultFontFamily={fontFamily}
+          defaultFontSize={fontSize}
         />
       </Portal>
     </>

apps/web/src/stores/editor-store.js

@@ -27,6 +27,7 @@ import BaseStore from ".";
 import { EV, EVENTS } from "@notesnook/core/common";
 import { hashNavigate } from "../navigation";
 import { logger } from "../utils/logger";
+import Config from "../utils/config";
 
 const SESSION_STATES = {
   stale: "stale",
@@ -56,7 +57,9 @@ export const getDefaultSession = (sessionId = Date.now()) => {
     color: undefined,
     dateEdited: 0,
     attachmentsLength: 0,
-    isDeleted: false
+    isDeleted: false,
+    fontFamily: Config.get("fontFamily", "Sans-serif"),
+    fontSize: Config.get("fontSize", "16px")
   };
 };
 
@@ -280,6 +283,18 @@ class EditorStore extends BaseStore {
     return this._setTag(tag);
   };
 
+  setFontSize = (fontSize) => {
+    this.set((state) => {
+      state.session.fontSize = fontSize;
+    });
+  };
+
+  setFontFamily = (fontFamily) => {
+    this.set((state) => {
+      state.session.fontFamily = fontFamily;
+    });
+  };
+
   setSaveState = (saveState) => {
     this.set((state) => {
       state.session.saveState = saveState;

packages/editor/src/toolbar/stores/toolbar-store.ts

@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Theme } from "@notesnook/theme";
 import create from "zustand";
 import { DownloadOptions } from "../../utils/downloader";
+import { FontFamily } from "../tools/font";
 
 export type ToolbarLocation = "top" | "bottom";
 
@@ -41,6 +42,10 @@ interface ToolbarState {
   closePopup: (popupId: string) => void;
   closePopupGroup: (groupId: string, excluded: string[]) => void;
   closeAllPopups: () => void;
+  fontFamily: string;
+  setFontFamily: (fontFamily: string) => void;
+  fontSize: string;
+  setFontSize: (fontSize: string) => void;
 }
 
 export const useToolbarStore = create<ToolbarState>((set, get) => ({
@@ -99,6 +104,16 @@ export const useToolbarStore = create<ToolbarState>((set, get) => ({
       for (const key in state.openedPopups) {
         state.openedPopups[key] = false;
       }
+    }),
+  fontFamily: "",
+  setFontFamily: (fontFamily) =>
+    set((state) => {
+      state.fontFamily = fontFamily;
+    }),
+  fontSize: "",
+  setFontSize: (fontSize) =>
+    set((state) => {
+      state.fontSize = fontSize;
     })
 }));
 

packages/editor/src/toolbar/toolbar.tsx

@@ -41,6 +41,8 @@ type ToolbarProps = FlexProps & {
   editor: Editor | null;
   location: ToolbarLocation;
   tools?: ToolbarDefinition;
+  defaultFontFamily: string;
+  defaultFontSize: string;
 };
 
 export function Toolbar(props: ToolbarProps) {
@@ -49,10 +51,11 @@ export function Toolbar(props: ToolbarProps) {
     theme,
     location,
     tools = getDefaultPresets().default,
+    defaultFontFamily,
+    defaultFontSize,
     sx,
     ...flexProps
   } = props;
-
   const toolbarTools = useMemo(
     () => [...STATIC_TOOLBAR_GROUPS, ...tools],
     [tools]
@@ -63,11 +66,23 @@ export function Toolbar(props: ToolbarProps) {
   const setToolbarLocation = useToolbarStore(
     (store) => store.setToolbarLocation
   );
+  const setDefaultFontFamily = useToolbarStore((store) => store.setFontFamily);
+  const setDefaultFontSize = useToolbarStore((store) => store.setFontSize);
 
   useEffect(() => {
     setToolbarLocation(location);
   }, [location, setToolbarLocation]);
 
+  useEffect(() => {
+    setDefaultFontFamily(defaultFontFamily);
+    setDefaultFontSize(defaultFontSize);
+  }, [
+    defaultFontFamily,
+    defaultFontSize,
+    setDefaultFontFamily,
+    setDefaultFontSize
+  ]);
+
   if (!editor) return null;
   return (
     <ThemeProvider theme={theme}>

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

@@ -21,15 +21,15 @@ import { ToolProps } from "../types";
 import { Editor } from "../../types";
 import { Dropdown } from "../components/dropdown";
 import { MenuItem } from "../../components/menu/types";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { Counter } from "../components/counter";
 import { useRefValue } from "../../hooks/use-ref-value";
-import { config } from "../../utils/config";
+import { useToolbarStore } from "../stores/toolbar-store";
 
 export function FontSize(props: ToolProps) {
   const { editor } = props;
+  const defaultFontSize = useToolbarStore((store) => store.fontSize);
   const { fontSize: _fontSize } = editor.getAttributes("textStyle");
-  const defaultFontSize = `${config.get("fontSize", 16)}px`;
   const fontSize = _fontSize || defaultFontSize;
   const fontSizeAsNumber = useRefValue(parseInt(fontSize.replace("px", "")));
 
@@ -66,23 +66,39 @@ export function FontSize(props: ToolProps) {
   );
 }
 
-const fontFamilies = {
-  "Sans-serif": "Open Sans",
-  Serif: "serif",
-  Monospace: "monospace"
-};
+interface CustomFonts {
+  [key: string]: string;
+}
+function fontFamilies(defaultFontFamily: string) {
+  const fonts: { [key: string]: string } = {
+    "Sans-serif": "Open Sans",
+    Serif: "serif",
+    Monospace: "monospace"
+  };
+
+  const customFonts: CustomFonts = {};
+  customFonts[defaultFontFamily] = fonts[defaultFontFamily];
+
+  Object.entries(fonts).map(([key, value]) => {
+    if (key !== defaultFontFamily) customFonts[key] = value;
+  });
+  return customFonts;
+}
+
 export function FontFamily(props: ToolProps) {
   const { editor } = props;
-
+  const defaultFontFamily = useToolbarStore((store) => store.fontFamily);
+  const customFonts = fontFamilies(defaultFontFamily);
   const currentFontFamily =
-    Object.entries(fontFamilies)
+    Object.entries(customFonts)
       .find(([_key, value]) =>
         editor.isActive("textStyle", { fontFamily: value })
       )
       ?.map((a) => a)
-      ?.at(0) || "Sans-serif";
+      ?.at(0) || defaultFontFamily;
+
   const items = useMemo(
-    () => toMenuItems(editor, currentFontFamily),
+    () => toMenuItems(editor, currentFontFamily, customFonts),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [currentFontFamily]
   );
@@ -98,10 +114,14 @@ export function FontFamily(props: ToolProps) {
   );
 }
 
-function toMenuItems(editor: Editor, currentFontFamily: string): MenuItem[] {
+function toMenuItems(
+  editor: Editor,
+  currentFontFamily: string,
+  customFonts: CustomFonts
+): MenuItem[] {
   const menuItems: MenuItem[] = [];
-  for (const key in fontFamilies) {
-    const value = fontFamilies[key as keyof typeof fontFamilies];
+  for (const key in customFonts) {
+    const value = customFonts[key as keyof typeof customFonts];
     menuItems.push({
       key,
       type: "button",

packages/editor/src/toolbar/types.ts

@@ -28,6 +28,8 @@ export type ToolProps = ToolDefinition & {
   variant?: ToolButtonVariant;
   force?: boolean;
   selectedNode?: NodeWithOffset;
+  defaultFontFamily?: string;
+  defaultFontSize?: string;
 };
 
 export type ToolDefinition = {