Merge pull request #8284 from 01zulfi/web/editor-line-height-setting

web: add editor 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);

apps/web/src/components/editor/common.ts

@@ -23,3 +23,9 @@ export const EDITOR_ZOOM = {
   MIN: 30,
   STEP: 10
 };
+
+export const EDITOR_LINE_HEIGHT = {
+  DEFAULT: 1.2,
+  MAX: 10,
+  MIN: 1
+};

apps/web/src/components/editor/manager.ts

@@ -24,9 +24,15 @@ import BaseStore from "../../stores";
 import type { TOCItem, ToolbarDefinition } from "@notesnook/editor";
 import Config from "../../utils/config";
 import { getCurrentPreset } from "../../common/toolbar-config";
-import { EDITOR_ZOOM } from "./common";
+import { EDITOR_LINE_HEIGHT, EDITOR_ZOOM } from "./common";
+
+type EditorConfig = {
+  fontFamily: string;
+  fontSize: number;
+  zoom: number;
+  lineHeight: number;
+};
 
-type EditorConfig = { fontFamily: string; fontSize: number; zoom: number };
 type EditorContext = {
   editor?: IEditor;
   canUndo?: boolean;
@@ -41,7 +47,8 @@ class EditorManager extends BaseStore<EditorManager> {
   editorConfig: EditorConfig = Config.get("editorConfig", {
     fontFamily: "sans-serif",
     fontSize: 14,
-    zoom: EDITOR_ZOOM.DEFAULT
+    zoom: EDITOR_ZOOM.DEFAULT,
+    lineHeight: EDITOR_LINE_HEIGHT.DEFAULT
   });
   editors: Record<string, EditorContext> = {};
 

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

@@ -624,7 +624,8 @@ function TiptapWrapper(
         ".tiptap.ProseMirror": { pb: 150 },
         ".editor-container": {
           opacity: isHydrating ? 0 : 1,
-          zoom: editorConfig.zoom + "%"
+          zoom: editorConfig.zoom + "%",
+          lineHeight: editorConfig.lineHeight
         },
         ".editor-loading-container.hidden": { display: "none" }
       }}

apps/web/src/dialogs/settings/editor-settings.ts

@@ -27,11 +27,11 @@ import { useStore as useSettingStore } from "../../stores/setting-store";
 import { getFonts } from "@notesnook/editor";
 import { useSpellChecker } from "../../hooks/use-spell-checker";
 import { SpellCheckerLanguages } from "./components/spell-checker-languages";
-
 import { CustomizeToolbar } from "./components/customize-toolbar";
 import { DictionaryWords } from "./components/dictionary-words";
 import { strings } from "@notesnook/intl";
 import { isMac } from "../../utils/platform";
+import { EDITOR_LINE_HEIGHT } from "../../components/editor/common";
 
 export const EditorSettings: SettingsGroup[] = [
   {
@@ -94,6 +94,24 @@ export const EditorSettings: SettingsGroup[] = [
           }
         ]
       },
+      {
+        key: "line-height",
+        title: strings.lineHeight(),
+        description: strings.lineHeightDesc(),
+        onStateChange: (listener) =>
+          onEditorConfigChange((c) => c.lineHeight, listener),
+        components: [
+          {
+            type: "input",
+            inputType: "number",
+            max: EDITOR_LINE_HEIGHT.MAX,
+            min: EDITOR_LINE_HEIGHT.MIN,
+            defaultValue: () => editorConfig().lineHeight,
+            onChange: (value) =>
+              useEditorManager.getState().setEditorConfig({ lineHeight: value })
+          }
+        ]
+      },
       {
         key: "double-spacing",
         title: strings.doubleSpacedLines(),

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,6 +751,10 @@ msgstr "Add your first note"
 msgid "Add your first notebook"
 msgstr "Add your first notebook"
 
+#: src/strings.ts:2616
+msgid "Adjust the line height of the editor"
+msgstr "Adjust the line height of the editor"
+
 #: src/strings.ts:2170
 msgid "Advanced"
 msgstr "Advanced"
@@ -3542,6 +3546,10 @@ msgstr "Light"
 msgid "Line {line}, Column {column}"
 msgstr "Line {line}, Column {column}"
 
+#: src/strings.ts:2615
+msgid "Line height"
+msgstr "Line height"
+
 #: src/strings.ts:1151
 msgid "Line spacing changed"
 msgstr "Line spacing changed"

packages/intl/locale/pseudo-LOCALE.po

@@ -751,6 +751,10 @@ msgstr ""
 msgid "Add your first notebook"
 msgstr ""
 
+#: src/strings.ts:2616
+msgid "Adjust the line height of the editor"
+msgstr ""
+
 #: src/strings.ts:2170
 msgid "Advanced"
 msgstr ""
@@ -3522,6 +3526,10 @@ msgstr ""
 msgid "Line {line}, Column {column}"
 msgstr ""
 
+#: src/strings.ts:2615
+msgid "Line height"
+msgstr ""
+
 #: src/strings.ts:1151
 msgid "Line spacing changed"
 msgstr ""

packages/intl/src/strings.ts

@@ -2611,5 +2611,7 @@ Use this if changes from other devices are not appearing on this device. This wi
   noPassword: () => t`No password`,
   publishToTheWeb: () => t`Publish to the web`,
   addToHome: () => t`Add to home`,
-  clickToSave: () => t`Click to save`
+  clickToSave: () => t`Click to save`,
+  lineHeight: () => t`Line height`,
+  lineHeightDesc: () => t`Adjust the line height of the editor`
 };