From 734e79604f131ffbdac556280ee652792c4830ac Mon Sep 17 00:00:00 2001 From: ammarahm-ed Date: Sun, 16 Apr 2023 01:51:49 +0500 Subject: [PATCH] mobile: use getFontById from editor --- .../screens/editor/tiptap/use-editor-events.ts | 2 +- .../app/screens/settings/font-selector.jsx | 16 ++++++++-------- .../app/screens/settings/settings-data.tsx | 2 +- packages/editor-mobile/src/components/editor.tsx | 6 +++--- packages/editor-mobile/src/components/title.tsx | 7 +++---- packages/editor-mobile/src/utils/index.ts | 2 +- 6 files changed, 17 insertions(+), 18 deletions(-) diff --git a/apps/mobile/app/screens/editor/tiptap/use-editor-events.ts b/apps/mobile/app/screens/editor/tiptap/use-editor-events.ts index f319e64fa..418028934 100644 --- a/apps/mobile/app/screens/editor/tiptap/use-editor-events.ts +++ b/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 }); }, [ diff --git a/apps/mobile/app/screens/settings/font-selector.jsx b/apps/mobile/app/screens/settings/font-selector.jsx index da6040ec1..e25697e07 100644 --- a/apps/mobile/app/screens/settings/font-selector.jsx +++ b/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 }} > - {toTitleCase(defaultFontFamily)} + {getFontById(defaultFontFamily).title} } > - {["sans-serif", "serif", "monospace"].map((item) => ( + {getFonts().map((item) => ( { - 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} ))} diff --git a/apps/mobile/app/screens/settings/settings-data.tsx b/apps/mobile/app/screens/settings/settings-data.tsx index eb2f3c381..6ba932073 100644 --- a/apps/mobile/app/screens/settings/settings-data.tsx +++ b/apps/mobile/app/screens/settings/settings-data.tsx @@ -18,6 +18,7 @@ along with this program. If not, see . */ 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", diff --git a/packages/editor-mobile/src/components/editor.tsx b/packages/editor-mobile/src/components/editor.tsx index c6717801b..e0019d221 100644 --- a/packages/editor-mobile/src/components/editor.tsx +++ b/packages/editor-mobile/src/components/editor.tsx @@ -19,7 +19,7 @@ along with this program. If not, see . 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 }} /> ); diff --git a/packages/editor-mobile/src/components/title.tsx b/packages/editor-mobile/src/components/title.tsx index eabbf4187..f1b9acd6e 100644 --- a/packages/editor-mobile/src/components/title.tsx +++ b/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 . */ -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)", diff --git a/packages/editor-mobile/src/utils/index.ts b/packages/editor-mobile/src/utils/index.ts index 2d0b10430..ddadcf98e 100644 --- a/packages/editor-mobile/src/utils/index.ts +++ b/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; };