common: create & use FONT_SIZE_BOUNDS with min:1 max:400

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

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

@@ -32,6 +32,7 @@ import { DictionaryWords } from "./components/dictionary-words";
 import { strings } from "@notesnook/intl";
 import { isMac } from "../../utils/platform";
 import { EDITOR_LINE_HEIGHT } from "../../components/editor/common";
+import { FONT_SIZE_BOUNDS } from "@notesnook/common";
 
 export const EditorSettings: SettingsGroup[] = [
   {
@@ -86,8 +87,8 @@ export const EditorSettings: SettingsGroup[] = [
           {
             type: "input",
             inputType: "number",
-            max: 120,
-            min: 8,
+            max: FONT_SIZE_BOUNDS.MAX,
+            min: FONT_SIZE_BOUNDS.MIN,
             defaultValue: () => editorConfig().fontSize,
             onChange: (value) =>
               useEditorManager.getState().setEditorConfig({ fontSize: value })

packages/common/src/utils/font.ts

@@ -0,0 +1,23 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+export const FONT_SIZE_BOUNDS = {
+  MIN: 1,
+  MAX: 400
+};

packages/common/src/utils/index.ts

@@ -30,3 +30,4 @@ export * from "./dataurl.js";
 export * from "./tab-session-history.js";
 export * from "./keybindings.js";
 export * from "./is-feature-available.js";
+export * from "./font.js";

packages/editor/src/toolbar/tools/font.tsx

@@ -32,17 +32,13 @@ import { strings } from "@notesnook/intl";
 import { Flex, Input } from "@theme-ui/components";
 import { ToolButton } from "../components/tool-button.js";
 import { ResponsivePresenter } from "../../components/responsive/index.js";
+import { FONT_SIZE_BOUNDS } from "@notesnook/common";
 
 const FONT_SIZES = [
   8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80,
   96, 120
 ];
 
-const FONT_SIZE_BOUNDS = {
-  MIN: 8,
-  MAX: 120
-};
-
 export function FontSize(props: ToolProps) {
   const { editor } = props;
   const defaultFontSize = useToolbarStore((store) => store.fontSize);
@@ -65,6 +61,7 @@ export function FontSize(props: ToolProps) {
       inputRef.current.value = String(currentSize);
       return;
     }
+
     const clamped = Math.min(
       FONT_SIZE_BOUNDS.MAX,
       Math.max(FONT_SIZE_BOUNDS.MIN, parsedValue)