web: add editor line height setting

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

@@ -595,7 +595,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,10 +27,10 @@ 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 { EDITOR_LINE_HEIGHT } from "../../components/editor/common";
 
 export const EditorSettings: SettingsGroup[] = [
   {
@@ -93,6 +93,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/intl/locale/en.po

@@ -731,6 +731,10 @@ msgstr "Add your first note"
 msgid "Add your first notebook"
 msgstr "Add your first notebook"
 
+#: src/strings.ts:2490
+msgid "Adjust the line height of the editor"
+msgstr "Adjust the line height of the editor"
+
 #: src/strings.ts:2170
 msgid "Advanced"
 msgstr "Advanced"
@@ -3398,6 +3402,10 @@ msgstr "Light"
 msgid "Line {line}, Column {column}"
 msgstr "Line {line}, Column {column}"
 
+#: src/strings.ts:2489
+msgid "Line height"
+msgstr "Line height"
+
 #: src/strings.ts:1151
 msgid "Line spacing changed"
 msgstr "Line spacing changed"

packages/intl/locale/pseudo-LOCALE.po

@@ -731,6 +731,10 @@ msgstr ""
 msgid "Add your first notebook"
 msgstr ""
 
+#: src/strings.ts:2490
+msgid "Adjust the line height of the editor"
+msgstr ""
+
 #: src/strings.ts:2170
 msgid "Advanced"
 msgstr ""
@@ -3378,6 +3382,10 @@ msgstr ""
 msgid "Line {line}, Column {column}"
 msgstr ""
 
+#: src/strings.ts:2489
+msgid "Line height"
+msgstr ""
+
 #: src/strings.ts:1151
 msgid "Line spacing changed"
 msgstr ""

packages/intl/src/strings.ts

@@ -2488,5 +2488,7 @@ Use this if changes from other devices are not appearing on this device. This wi
     t`Select a notebook to move this notebook into, or unselect to move it to the root level.`,
   words: () => t`Words`,
   characters: () => t`Characters`,
-  paragraphs: () => t`Paragraphs`
+  paragraphs: () => t`Paragraphs`,
+  lineHeight: () => t`Line height`,
+  lineHeightDesc: () => t`Adjust the line height of the editor`
 };