editor: add input & menu to select different font sizes by 01zulfi · Pull Request #9788 · streetwriters/notesnook

01zulfi · 2026-05-01T10:06:04Z

Description

QA Scope

Test on web and mobile.

Type of Change

Bug fix
Feature

Visuals

Attached relevant screenshots / screen recording / GIF
N/A (not a feature or no UI changes)

Testing

Ran all E2E tests
Ran all integration tests
Added/updated tests for this change (if needed)
N/A (tests not needed — explanation provided below)

If tests were not added, explain why

Platform

Web
Mobile
Desktop

Sign-off

QA passed
UI/UX passed

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

github-actions · 2026-05-01T10:09:22Z

Cloudflare Pages Preview

https://142aef42.notesnook-app.pages.dev

Commit: 8f5e58b

github-actions · 2026-05-01T10:13:38Z

Desktop Previews

Commit: 8f5e58b

github-actions · 2026-05-01T10:26:49Z

iOS App Preview

https://appdistribution.firebase.google.com/testerapps/1:178156234792:ios:7d0d8b7b6332eb72d06d1d/releases/6aig5cv2u3v38?utm_source=firebase-tools

Commit: 3c85cdd

github-actions · 2026-05-01T10:31:27Z

Android App Preview

https://appdistribution.firebase.google.com/testerapps/1:178156234792:android:5c60019871e79043d06d1d/releases/4ck5ucmbd4h3g?utm_source=firebase-tools

Commit: 3c85cdd

thecodrr

I think we should go with the Google Docs UX i.e. an input with a dropdown menu as well:

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

thecodrr · 2026-05-06T03:34:25Z

+          const focusedItem = items[nextIndex];
+          if (focusedItem) onKeyboardFocus?.(focusedItem);


I don't fully understand what onKeyboardFocus is for.

In Google Docs, when we navigate with arrowup/arrowdown in the font sizes menu, it sets the menu item as the input value. I replicated that behavior here.

For that I needed a callback to run when a menu item is focused via a keyboard press i.e. arrowup/arrowdown

Side effect: up/down keys change the value and if you close the menu by clicking away, it applies the value to the text instead of cancelling/discarding it. The change should only be applied in 2 cases:

User presses Enter in input

User clicks/selects a menu item

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

thecodrr

Side effect: up/down keys change the value and if you close the menu by clicking away, it applies the value to the text instead of cancelling/discarding it. The change should only be applied in 2 cases:

User presses Enter in input
User clicks/selects a menu item

01zulfi · 2026-05-11T09:18:38Z

Side effect: up/down keys change the value and if you close the menu by clicking away, it applies the value to the text instead of cancelling/discarding it. The change should only be applied in 2 cases: 1. User presses Enter in input 2. User clicks/selects a menu item

Updated behavior:

∙ * if input had last interaction, on enter set input value as font size
∙ * else if menu had last interaction (arrow up/down), on enter set focused value as font size

thecodrr · 2026-05-12T04:13:14Z

Side effect: up/down keys change the value and if you close the menu by clicking away, it applies the value to the text instead of cancelling/discarding it. The change should only be applied in 2 cases: 1. User presses Enter in input 2. User clicks/selects a menu item

Updated behavior:

∙ * if input had last interaction, on enter set input value as font size ∙ * else if menu had last interaction (arrow up/down), on enter set focused value as font size

Not sure if I understand correctly but won't arrow up/down automatically change the input value? Why do we need special handling for both of these cases? Why can't we just handle the Enter as using the input value no matter what?

01zulfi · 2026-05-12T04:55:20Z

Oh my bad, looks like I misunderstood. I thought we should remove the input value changing by navigating the menu with arrow up/down.

I'll bring that back, and set the input value as font size only if the user hits Enter

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

Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>

* mobile: set default font size 1-400 Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com> * mobile: Use defined font size bounds Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com> --------- Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>

Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>

…ont-size-range Add validation in range input selectors

editor: add menu to select different font sizes

7ec6472

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

01zulfi temporarily deployed to internal May 1, 2026 10:06 — with GitHub Actions Inactive

01zulfi commented May 1, 2026

View reviewed changes

Comment thread packages/ui/src/components/menu/index.tsx

thecodrr requested changes May 2, 2026

View reviewed changes

01zulfi temporarily deployed to internal May 5, 2026 07:13 — with GitHub Actions Inactive

01zulfi changed the title ~~editor: add menu to select different font sizes~~ editor: add input & menu to select different font sizes May 5, 2026

editor: add an input field for font size

06e8daf

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

01zulfi force-pushed the editor/font-size-selector branch from b94dbc4 to 06e8daf Compare May 5, 2026 07:16

01zulfi temporarily deployed to internal May 5, 2026 07:16 — with GitHub Actions Inactive

01zulfi requested a review from thecodrr May 5, 2026 09:05

thecodrr requested changes May 6, 2026

View reviewed changes

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

10585cf

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

01zulfi temporarily deployed to internal May 6, 2026 05:45 — with GitHub Actions Inactive

01zulfi requested a review from thecodrr May 8, 2026 04:05

thecodrr requested changes May 8, 2026

View reviewed changes

01zulfi temporarily deployed to internal May 11, 2026 09:17 — with GitHub Actions Inactive

01zulfi requested a review from thecodrr May 11, 2026 09:18

editor: don't set input value as font size in onBlur

2da7828

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

01zulfi force-pushed the editor/font-size-selector branch from bfabeef to 2da7828 Compare May 12, 2026 05:41

01zulfi temporarily deployed to internal May 12, 2026 05:41 — with GitHub Actions Inactive

thecodrr approved these changes May 13, 2026

View reviewed changes

mobile: add custom toolbar popup for font-size selection

b293630

ammarahm-ed temporarily deployed to internal June 4, 2026 08:44 — with GitHub Actions Inactive

thecodrr approved these changes Jun 10, 2026

View reviewed changes

kashaf-ansari-dev added 3 commits July 3, 2026 11:51

mobile: set default font size 1-400

9ff8a64

Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>

mobile: Use defined font size bounds

0fd1912

Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>

thecodrr temporarily deployed to internal July 7, 2026 03:36 — with GitHub Actions Inactive

kashaf-ansari-dev and others added 2 commits July 11, 2026 22:48

mobile: improve validation for settings input-selectors

cd5a291

Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>

Merge pull request #10074 from kashaf-ansari-dev/fix-default-editor-f…

4b0b9b9

…ont-size-range Add validation in range input selectors

ammarahm-ed temporarily deployed to internal July 13, 2026 17:43 — with GitHub Actions Inactive

		const focusedItem = items[nextIndex];
		if (focusedItem) onKeyboardFocus?.(focusedItem);

Uh oh!

Uh oh!

Conversation

01zulfi commented May 1, 2026

Description

QA Scope

Type of Change

Visuals

Testing

If tests were not added, explain why

Platform

Sign-off

Uh oh!

Uh oh!

github-actions Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thecodrr left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

thecodrr May 6, 2026

Choose a reason for hiding this comment

Uh oh!

01zulfi May 6, 2026

Choose a reason for hiding this comment

Uh oh!

thecodrr May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thecodrr left a comment

Choose a reason for hiding this comment

Uh oh!

01zulfi commented May 11, 2026

Uh oh!

thecodrr commented May 12, 2026

Uh oh!

01zulfi commented May 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions Bot commented May 1, 2026 •

edited

Loading

github-actions Bot commented May 1, 2026 •

edited

Loading

github-actions Bot commented May 1, 2026 •

edited

Loading

github-actions Bot commented May 1, 2026 •

edited

Loading

thecodrr May 8, 2026 •

edited

Loading