web: add editor line height setting

Signed-off-by: 01zulfi <[email protected]>

Author: 01zulfi

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

@@ -623,7 +623,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/intl/locale/en.po

@@ -747,6 +747,10 @@ msgstr "Add your first note"
 msgid "Add your first notebook"
 msgstr "Add your first notebook"
 
+#: src/strings.ts:2614
+msgid "Adjust the line height of the editor"
+msgstr "Adjust the line height of the editor"
+
 #: src/strings.ts:2170
 msgid "Advanced"
 msgstr "Advanced"
@@ -3534,6 +3538,10 @@ msgstr "Light"
 msgid "Line {line}, Column {column}"
 msgstr "Line {line}, Column {column}"
 
+#: src/strings.ts:2613
+msgid "Line height"
+msgstr "Line height"
+
 #: src/strings.ts:1151
 msgid "Line spacing changed"
 msgstr "Line spacing changed"

packages/intl/locale/pseudo-LOCALE.po

@@ -747,6 +747,10 @@ msgstr ""
 msgid "Add your first notebook"
 msgstr ""
 
+#: src/strings.ts:2614
+msgid "Adjust the line height of the editor"
+msgstr ""
+
 #: src/strings.ts:2170
 msgid "Advanced"
 msgstr ""
@@ -3514,6 +3518,10 @@ msgstr ""
 msgid "Line {line}, Column {column}"
 msgstr ""
 
+#: src/strings.ts:2613
+msgid "Line height"
+msgstr ""
+
 #: src/strings.ts:1151
 msgid "Line spacing changed"
 msgstr ""

packages/intl/src/strings.ts

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