mobile: use getFontById from editor

apps/mobile/app/screens/editor/tiptap/use-editor-events.ts

@@ -157,7 +157,7 @@ export const useEditorEvents = (
       keyboardShown: keyboardShown || false,
       doubleSpacedLines: doubleSpacedLines,
       corsProxy: corsProxy,
-      fontSize: defaultFontSize + "px",
+      fontSize: defaultFontSize,
       fontFamily: defaultFontFamily
     });
   }, [

apps/mobile/app/screens/settings/font-selector.jsx

@@ -26,8 +26,8 @@ import Paragraph from "../../components/ui/typography/paragraph";
 import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useThemeStore } from "../../stores/use-theme-store";
-import { toTitleCase } from "../../utils";
 import { SIZE } from "../../utils/size";
+import { getFontById, getFonts } from "@notesnook/editor/dist/utils/font";
 
 export const FontSelector = () => {
   const colors = useThemeStore((state) => state.colors);
@@ -79,29 +79,29 @@ export const FontSelector = () => {
               padding: 12
             }}
           >
-            <Paragraph>{toTitleCase(defaultFontFamily)}</Paragraph>
+            <Paragraph>{getFontById(defaultFontFamily).title}</Paragraph>
             <Icon color={colors.icon} name="menu-down" size={SIZE.md} />
           </PressableButton>
         }
       >
-        {["sans-serif", "serif", "monospace"].map((item) => (
+        {getFonts().map((item) => (
           <MenuItem
-            key={item.toString()}
+            key={item.id}
             onPress={async () => {
-              onChange(item);
+              onChange(item.id);
             }}
             style={{
               backgroundColor:
-                defaultFontFamily === item ? colors.nav : "transparent",
+                defaultFontFamily === item.id ? colors.nav : "transparent",
               width: "100%",
               maxWidth: width
             }}
             textStyle={{
               fontSize: SIZE.md,
-              color: defaultFontFamily === item ? colors.accent : colors.pri
+              color: defaultFontFamily === item.id ? colors.accent : colors.pri
             }}
           >
-            {toTitleCase(item)}
+            {item.title}
           </MenuItem>
         ))}
       </Menu>

apps/mobile/app/screens/settings/settings-data.tsx

@@ -18,6 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import notifee from "@notifee/react-native";
+
 import dayjs from "dayjs";
 import React from "react";
 import { Linking, Platform } from "react-native";
@@ -584,7 +585,6 @@ export const settingsGroups: SettingSection[] = [
             id: "default-font-family",
             name: "Default font family",
             description: "Set the default font family in editor",
-            options: ["serif", "sans-serif", "monospace"],
             type: "component",
             icon: "format-font",
             property: "defaultFontFamily",

packages/editor-mobile/src/components/editor.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import {
   Editor,
-  FONTS,
+  getFontById,
   PortalProvider,
   Toolbar,
   usePermissionHandler,
@@ -273,7 +273,7 @@ const Tiptap = ({
 const ContentDiv = memo(
   forwardRef<
     HTMLDivElement,
-    { padding: number; fontSize: string; fontFamily: string }
+    { padding: number; fontSize: number; fontFamily: string }
   >((props, ref) => {
     const theme = useEditorThemeStore((state) => state.colors);
     return (
@@ -286,7 +286,7 @@ const ContentDiv = memo(
           marginTop: -12,
           caretColor: theme.accent,
           fontSize: props.fontSize,
-          fontFamily: FONTS[props.fontFamily]
+          fontFamily: getFontById(props.fontFamily)?.font
         }}
       />
     );

packages/editor-mobile/src/components/title.tsx

@@ -17,11 +17,10 @@ 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 React from "react";
-import { RefObject, useEffect, useRef } from "react";
+import { getFontById } from "@notesnook/editor";
+import React, { RefObject, useEffect, useRef } from "react";
 import { EditorController } from "../hooks/useEditorController";
 import styles from "./styles.module.css";
-import { FONTS } from "@notesnook/editor";
 function Title({
   controller,
   title,
@@ -62,7 +61,7 @@ function Title({
         paddingRight: 12,
         paddingLeft: 12,
         fontWeight: 600,
-        fontFamily: FONTS[fontFamily] || "Open Sans",
+        fontFamily: getFontById(fontFamily)?.font || "Open Sans",
         backgroundColor: "transparent",
         color: "var(--nn_heading)",
         caretColor: "var(--nn_accent)",

packages/editor-mobile/src/utils/index.ts

@@ -40,7 +40,7 @@ export type Settings = {
   keyboardShown?: boolean;
   doubleSpacedLines?: boolean;
   corsProxy: string;
-  fontSize: string;
+  fontSize: number;
   fontFamily: string;
 };