diff --git a/apps/web/src/components/editor/common.ts b/apps/web/src/components/editor/common.ts index 89fbdbf29..723bbd9d0 100644 --- a/apps/web/src/components/editor/common.ts +++ b/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 +}; diff --git a/apps/web/src/components/editor/manager.ts b/apps/web/src/components/editor/manager.ts index 5b0e4bf5e..0d62e79f8 100644 --- a/apps/web/src/components/editor/manager.ts +++ b/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 { 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 = {}; diff --git a/apps/web/src/components/editor/tiptap.tsx b/apps/web/src/components/editor/tiptap.tsx index a1ee28523..28da91bce 100644 --- a/apps/web/src/components/editor/tiptap.tsx +++ b/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" } }} diff --git a/apps/web/src/dialogs/settings/editor-settings.ts b/apps/web/src/dialogs/settings/editor-settings.ts index 068a0dd83..f6b114b16 100644 --- a/apps/web/src/dialogs/settings/editor-settings.ts +++ b/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(), diff --git a/packages/intl/locale/en.po b/packages/intl/locale/en.po index 1e7d503ac..6c5e89d0e 100644 --- a/packages/intl/locale/en.po +++ b/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: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" @@ -3542,6 +3546,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" diff --git a/packages/intl/locale/pseudo-LOCALE.po b/packages/intl/locale/pseudo-LOCALE.po index e99503895..ef4cb2812 100644 --- a/packages/intl/locale/pseudo-LOCALE.po +++ b/packages/intl/locale/pseudo-LOCALE.po @@ -751,6 +751,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 "" @@ -3522,6 +3526,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 "" diff --git a/packages/intl/src/strings.ts b/packages/intl/src/strings.ts index 87fe73948..45e25df72 100644 --- a/packages/intl/src/strings.ts +++ b/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` };