web: fix font family not applied when set on editor

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

@@ -1,7 +1,7 @@
 /*
 This file is part of the Notesnook project (https://notesnook.com/)
 
-Copyright (C) 2022 Streetwriters (Private) Limited
+Copyright (C) 2023 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
@@ -18,9 +18,10 @@ 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 { useState } from "react";
 import { useStore as useEditorStore } from "../../stores/editor-store";
 import Config from "../../utils/config";
+import { toTitleCase } from "../../utils/string";
 import DropdownButton from "../dropdown-button";
 
 export function DefaultFont() {
@@ -28,10 +29,10 @@ export function DefaultFont() {
   const fontSize = useEditorStore((store) => store.session.fontSize);
   //const fontFamily = useEditorStore((store) => store.session.fontFamily);
 
-  const fonts = ["Sans-serif", "Serif", "Monospace"];
+  const fonts = ["sans-serif", "serif", "monospace"];
   const getOptions = () =>
-    getFonts(Config.get("fontFamily", "Sans-serif")).map((font) => ({
-      title: () => font,
+    getFonts(Config.get("fontFamily", "sans-serif")).map((font) => ({
+      title: () => toTitleCase(font),
       onClick: () => {
         const newFonts = [font];
         for (const item of fonts) {
@@ -45,12 +46,8 @@ export function DefaultFont() {
       },
       key: font
     }));
-  const [options, setOptions] = useState(getOptions());
 
-  useEffect(() => {
-    //setFontFamily(options.at(0));
-    console.log("options changed");
-  }, [options]);
+  const [options, setOptions] = useState(getOptions());
 
   return (
     <Flex sx={{ justifyContent: "space-evenly", flexWrap: "wrap" }}>
@@ -96,8 +93,8 @@ export function DefaultFont() {
 
 function getFonts(font: string) {
   const fonts = [font];
-  const deafultFonts = ["Sans-serif", "Serif", "Monospace"];
-  for (const _font of deafultFonts) {
+  const defaultFonts = ["sans-serif", "serif", "monospace"];
+  for (const _font of defaultFonts) {
     if (_font !== font) {
       fonts.push(_font);
     }

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

@@ -47,14 +47,9 @@ 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";
 import { AnimatedFlex } from "../animated";
 import { EditorLoader } from "../loaders/editor-loader";
 
-
 type PreviewSession = {
   content: { data: string; type: string };
   dateCreated: number;
@@ -262,7 +257,6 @@ export function Editor(props: EditorProps) {
   const fontFamily = useStore((store) => store.session.fontFamily);
   const [isLoading, setIsLoading] = useState(true);
 
-
   const editor = useEditorInstance();
 
   useEffect(() => {

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

@@ -34,10 +34,9 @@ import {
   getHTMLFromFragment,
   Fragment,
   type DownloadOptions,
-  ToolProps
   getTotalWords,
   countWords,
-  type DownloadOptions
+  FONTS
 } from "@notesnook/editor";
 import { Box, Flex } from "@theme-ui/components";
 import { PropsWithChildren, useEffect, useRef, useState } from "react";
@@ -56,7 +55,6 @@ import { showBuyDialog } from "../../common/dialog-controller";
 import { useStore as useSettingsStore } from "../../stores/setting-store";
 import { debounce, debounceWithId } from "../../utils/debounce";
 import { store as editorstore } from "../../stores/editor-store";
-import Config from "../../utils/config";
 
 type TipTapProps = {
   editorContainer: HTMLElement;
@@ -308,10 +306,6 @@ function TipTap(props: TipTapProps) {
     };
   }, [editor, editorContainer]);
 
-  useEffect(() => {
-    editorContainer.style.fontSize = fontSize;
-  });
-
   if (!toolbarContainerId) return null;
   return (
     <>
@@ -336,7 +330,6 @@ function TiptapWrapper(props: Omit<TipTapProps, "editorContainer" | "theme">) {
   useEffect(() => {
     setIsReady(true);
   }, []);
-
   return (
     <PortalProvider>
       <Flex sx={{ flex: 1, flexDirection: "column" }}>
@@ -354,7 +347,9 @@ function TiptapWrapper(props: Omit<TipTapProps, "editorContainer" | "theme">) {
             flex: 1,
             cursor: "text",
             color: theme.colors.text, // TODO!
-            paddingBottom: 150
+            paddingBottom: 150,
+            fontSize: props.fontSize,
+            fontFamily: FONTS[props.fontFamily]
           }}
         />
       </Flex>

apps/web/src/components/editor/title-box.tsx

@@ -23,6 +23,7 @@ import { useStore, store } from "../../stores/editor-store";
 import { debounceWithId } from "../../utils/debounce";
 import useMobile from "../../hooks/use-mobile";
 import useTablet from "../../hooks/use-tablet";
+import { FONTS } from "@notesnook/editor";
 
 type TitleBoxProps = {
   readonly: boolean;
@@ -35,6 +36,7 @@ function TitleBox(props: TitleBoxProps) {
   const id = useStore((store) => store.session.id);
   const isMobile = useMobile();
   const isTablet = useTablet();
+  const fontFamily = useStore((store) => store.session.fontFamily);
 
   const MAX_FONT_SIZE = useMemo(() => {
     return isMobile || isTablet ? 1.625 : 2.625;
@@ -66,7 +68,7 @@ function TitleBox(props: TitleBoxProps) {
       readOnly={readonly}
       sx={{
         p: 0,
-        fontFamily: "heading",
+        fontFamily: FONTS[fontFamily] || "heading",
         fontSize: ["1.625em", "1.625em", "2.625em"],
         fontWeight: "heading",
         width: "100%"

packages/editor/src/extensions/font-family/font-family.ts

@@ -39,7 +39,7 @@ declare module "@tiptap/core" {
   }
 }
 
-const FONTS: Record<string, string> = {
+export const FONTS: Record<string, string> = {
   monospace: getFontConfig().fonts.monospace,
   "sans-serif": getFontConfig().fonts.body,
   serif: `Noto Serif, Times New Roman, serif`

packages/editor/styles/styles.css

@@ -1,7 +1,13 @@
+
+
 .ProseMirror span * {
   font-family: inherit;
 }
 
+.ProseMirror {
+  font-family: inherit;
+}
+
 .ProseMirror p.is-editor-empty:first-child::before {
   color: var(--placeholder);
   content: attr(data-placeholder);
@@ -87,6 +93,7 @@
 
 .ProseMirror p {
   margin-bottom: 0px;
+  font-family: inherit;
 }
 
 .ProseMirror > p[data-spacing="double"] {