mobile: configurable default line height setting

apps/mobile/app/screens/editor/tiptap/types.ts

@@ -60,6 +60,7 @@ export type Settings = {
   markdownShortcuts: boolean;
   features: Record<any, any>;
   loggedIn: boolean;
+  defaultLineHeight: number;
 };
 
 export type EditorProps = {

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

@@ -159,10 +159,13 @@ export const useEditorEvents = (
   const fullscreen = useSettingStore((state) => state.fullscreen);
   const corsProxy = useSettingStore((state) => state.settings.corsProxy);
   const loading = useSettingStore((state) => state.isAppLoading);
-  const [dateFormat, timeFormat] = useSettingStore((state) => [
-    state.dateFormat,
-    state.timeFormat
-  ]);
+  const [dateFormat, timeFormat, defaultLineHeight] = useSettingStore(
+    (state) => [
+      state.dateFormat,
+      state.timeFormat,
+      state.settings.defaultLineHeight
+    ]
+  );
   const handleBack = useRef<NativeEventSubscription>(undefined);
   const loggedIn = useUserStore((state) => !!state.user);
   const { fontScale } = useWindowDimensions();
@@ -225,7 +228,8 @@ export const useEditorEvents = (
       fontScale,
       markdownShortcuts,
       features,
-      loggedIn
+      loggedIn,
+      defaultLineHeight
     });
   }, [
     fullscreen,
@@ -244,7 +248,8 @@ export const useEditorEvents = (
     loading,
     fontScale,
     markdownShortcuts,
-    loggedIn
+    loggedIn,
+    defaultLineHeight
   ]);
 
   const onBackPress = useCallback(async () => {

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

@@ -71,6 +71,7 @@ import { verifyUser, verifyUserWithApplock } from "./functions";
 import { logoutUser } from "./logout";
 import { SettingSection } from "./types";
 import { getTimeLeft } from "./user-section";
+import { EDITOR_LINE_HEIGHT } from "../../utils/constants";
 
 export const settingsGroups: SettingSection[] = [
   {
@@ -811,10 +812,19 @@ export const settingsGroups: SettingSection[] = [
             name: strings.defaultFontFamily(),
             description: strings.defaultFontFamilyDesc(),
             type: "component",
-            icon: "format-font",
             property: "defaultFontFamily",
             component: "font-selector"
           },
+          {
+            id: "default-line-height",
+            name: strings.lineHeight(),
+            description: strings.lineHeightDesc(),
+            type: "input-selector",
+            property: "defaultLineHeight",
+            icon: "format-line-spacing",
+            minInputValue: EDITOR_LINE_HEIGHT.MIN,
+            maxInputValue: EDITOR_LINE_HEIGHT.MAX
+          },
           {
             id: "title-format",
             name: strings.titleFormat(),

apps/mobile/app/stores/use-setting-store.ts

@@ -25,6 +25,8 @@ import { FileType } from "react-native-scoped-storage";
 import { create } from "zustand";
 import { ThemeDark, ThemeLight, ThemeDefinition } from "@notesnook/theme";
 import { Reminder } from "@notesnook/core";
+import { EDITOR_LINE_HEIGHT } from "../utils/constants";
+
 export const HostIds = [
   "API_HOST",
   "AUTH_HOST",
@@ -99,6 +101,7 @@ export type Settings = {
   serverUrls?: Record<HostId, string>;
   defaultSidebarTab: number;
   checkForUpdates?: boolean;
+  defaultLineHeight: number;
 };
 
 type DimensionsType = {
@@ -199,7 +202,8 @@ export const defaultSettings: SettingStore["settings"] = {
   backupType: "partial",
   fullBackupReminder: "never",
   lastFullBackupDate: 0,
-  checkForUpdates: true
+  checkForUpdates: true,
+  defaultLineHeight: EDITOR_LINE_HEIGHT.DEFAULT
 };
 
 export const useSettingStore = create<SettingStore>((set, get) => ({

apps/mobile/app/utils/constants.ts

@@ -122,3 +122,9 @@ export const SUBSCRIPTION_PROVIDER = {
     icon: "web"
   }
 };
+
+export const EDITOR_LINE_HEIGHT = {
+  DEFAULT: 1.2,
+  MAX: 10,
+  MIN: 1
+};

apps/mobile/scripts/optimize-fonts.mjs

@@ -116,7 +116,8 @@ const EXTRA_ICON_NAMES = [
   "notebook-minus",
   "calendar-blank",
   "email-newsletter",
-  "cellphone-arrow-down"
+  "cellphone-arrow-down",
+  "format-line-spacing"
 ];
 
 const __filename = fileURLToPath(import.meta.url);

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

@@ -881,7 +881,8 @@ const Tiptap = ({
 
           <div
             style={{
-              display: tab.session?.locked ? "none" : "block"
+              display: tab.session?.locked ? "none" : "block",
+              lineHeight: settings.defaultLineHeight
             }}
             ref={contentPlaceholderRef}
             className="theme-scope-editor"

packages/editor-mobile/src/hooks/useSettings.ts

@@ -22,7 +22,7 @@ import { useState } from "react";
 import { Settings } from "../utils";
 
 const settingsJson = localStorage.getItem("editorSettings");
-const initialState = {
+const initialState: Partial<Settings> = {
   fullscreen: false,
   deviceMode: "mobile",
   premium: false,
@@ -35,7 +35,8 @@ const initialState = {
   fontSize: 16,
   timeFormat: "12-hour",
   dateFormat: "DD-MM-YYYY",
-  loggedIn: false
+  loggedIn: false,
+  defaultLineHeight: 1.2
 };
 
 global.settingsController = {

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

@@ -54,6 +54,7 @@ export type Settings = {
   markdownShortcuts: boolean;
   features: Record<any, any>;
   loggedIn: boolean;
+  defaultLineHeight: number;
 };
 
 /* eslint-disable no-var */

packages/intl/locale/en.po

@@ -751,7 +751,7 @@ msgstr "Add your first note"
 msgid "Add your first notebook"
 msgstr "Add your first notebook"
 
-#: src/strings.ts:2614
+#: src/strings.ts:2615
 msgid "Adjust the line height of the editor"
 msgstr "Adjust the line height of the editor"
 
@@ -3546,7 +3546,7 @@ msgstr "Light"
 msgid "Line {line}, Column {column}"
 msgstr "Line {line}, Column {column}"
 
-#: src/strings.ts:2613
+#: src/strings.ts:2614
 msgid "Line height"
 msgstr "Line height"
 

packages/intl/locale/pseudo-LOCALE.po

@@ -751,7 +751,7 @@ msgstr ""
 msgid "Add your first notebook"
 msgstr ""
 
-#: src/strings.ts:2614
+#: src/strings.ts:2615
 msgid "Adjust the line height of the editor"
 msgstr ""
 
@@ -3526,7 +3526,7 @@ msgstr ""
 msgid "Line {line}, Column {column}"
 msgstr ""
 
-#: src/strings.ts:2613
+#: src/strings.ts:2614
 msgid "Line height"
 msgstr ""