Add menu items for page zoom control by Copilot · Pull Request #42 · MarkEdit-app/MarkEdit-preview

Copilot · 2026-02-14T02:27:48Z

Adds a "Page Zoom" submenu to the View Mode menu with options to reset, increase, and decrease page zoom levels. The menu is conditionally displayed only in MarkEdit version 1.29.2 or later for backward compatibility.

Changes Made

Localizations: Added strings for pageZoom, resetZoom, increaseZoom, and decreaseZoom in all three supported locales (default, zh-CN, zh-TW) using "Zoom Level" terminology for clarity
Zoom Functions: Created resetPageZoom(), increasePageZoom(), and decreasePageZoom() functions in view.ts with shared helper savePageZoom() to persist zoom state
Menu Items: Added "Page Zoom" submenu with three child items (Reset Zoom Level, Increase Zoom Level, Decrease Zoom Level) before the Version item in the View Mode menu
Availability Control: Menu items are dynamically enabled/disabled based on viewMode and editorView.hasFocus using canHandlePageZoom() helper
Version Check: Menu only appears when MarkEdit version >= 1.29.2, using appVersionGreaterOrEqual() utility function
Code Quality: Refactored handlePageZoom to reuse the new zoom functions, eliminating code duplication. Extracted shared constants (DEFAULT_ZOOM_LEVEL, MIN_ZOOM_LEVEL, MAX_ZOOM_LEVEL) and helper functions (clampZoom, savePageZoom)
Code Organization: Placed private helper functions at the bottom of the file following project conventions
Utility Improvements: Renamed and fixed appVersionGreaterOrEqual() to correctly handle version equality and simplified its implementation

Technical Details

Menu items use state: () => ({ isEnabled: canHandlePageZoom() }) pattern for dynamic availability
Version detection uses existing appVersionGreaterOrEqual() utility that parses user agent format: "Mozilla/5.0 (...) macOS/26.3.0 MarkEdit/1.29.1"
Keyboard shortcuts (Cmd+/-, Cmd+0) continue to work via the existing handlePageZoom function
No keyboard shortcuts assigned to menu items to avoid conflicts with existing shortcuts

The implementation follows existing code patterns and maintains consistency with the codebase style.

Original prompt

This section details on the original issue you should resolve

<issue_title>Menu item for changing page zoom</issue_title>
<issue_description>## Motivation

We now already have handlePageZoom, it is triggered through keyboard events: cmd+/-, it is reasonable to have a menu item for these too.

Changes

New menu (via MarkEdit.addMainMenuItem) before the "Version" item

It provides options to: increase, decrease and reset the page zoom

Handle menu item availability based on viewMode and editorView.hasFocus

Add localizations (strings.ts)

Requirements

Code style should be consistent, refer to existing implementation, places to insert new code matter.</issue_description>

<agent_instructions>Follow the PR description closely, make no mistake.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

Fixes Menu item for changing page zoom #41

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

cyanzhong · 2026-02-14T02:46:56Z

.gitignore

@@ -1 +1,2 @@
 node_modules/
+package-lock.json


@copilot revert this, we use yarn instead of npm.

Reverted in dc77783.

cyanzhong · 2026-02-14T02:47:43Z

main.ts

+      action: increasePageZoom,
+      key: '=',
+      modifiers: ['Command'],
+      state: () => ({ available: isPageZoomAvailable() }),


@copilot it's isEnabled.

Changed to isEnabled in dc77783.

cyanzhong · 2026-02-14T02:49:09Z

main.ts

    { separator: true },
    ...createHtmlItems(),
    { separator: true },
+    {


@copilot put these 3 under a submenu (using children).

Added submenu "Page Zoom" with the 3 items as children in dc77783.

…ubmenu Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

cyanzhong · 2026-02-14T05:20:08Z

main.ts

+          state: () => ({ isEnabled: isPageZoomAvailable() }),
+        },
+        {
+          title: localized('resetZoom'),


@copilot make this the first item (don't forget the change the order of code used in other places)

Reordered in 3bed8d8. Reset Zoom is now the first menu item, and the order has been updated consistently in:

Menu items (main.ts)

Function definitions (src/view.ts)

Import statements (main.ts)

Localization keys (src/strings.ts for all 3 locales)

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

cyanzhong · 2026-02-14T05:30:03Z

src/view.ts

+const MIN_ZOOM_LEVEL = 0.5;
+const MAX_ZOOM_LEVEL = 3.0;
+
+function clampZoom(value: number): string {


@copilot Private should be the bottom, move this after updateGutterStyle.

Moved in b6cbfdb. The clampZoom function and zoom constants (DEFAULT_ZOOM_LEVEL, MIN_ZOOM_LEVEL, MAX_ZOOM_LEVEL) are now positioned after updateGutterStyle, placing private functions at the bottom of the file as requested.

cyanzhong · 2026-02-14T05:30:17Z

src/view.ts

-    case '-': previewPane.style.zoom = clamp(zoom - 0.1); break;
-    case '=': previewPane.style.zoom = clamp(zoom + 0.1); break;
-    case '0': previewPane.style.zoom = '1'; break;
+    case '-': previewPane.style.zoom = clampZoom(zoom - 0.1); break;


@copilot think about, can we leverage the newly added functions?

Refactored in abd0c5b. handlePageZoom now calls resetPageZoom(), increasePageZoom(), and decreasePageZoom() directly instead of duplicating the zoom logic.

cyanzhong · 2026-02-14T05:31:02Z

src/view.ts


+export function resetPageZoom() {
+  previewPane.style.zoom = String(DEFAULT_ZOOM_LEVEL);
+  localStorage.setItem(


@copilot can we wrap this a function to avoid duplicate code?

Fixed in abd0c5b. Extracted savePageZoom() helper function to eliminate the duplicated localStorage.setItem code.

cyanzhong

@copilot I see some code smell, try fixing them.

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

cyanzhong · 2026-02-14T05:59:01Z

@copilot In this PR, you should never run npm install or yarn install, revert changes in yarn.lock too.

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

Copilot · 2026-02-14T06:00:33Z

@copilot In this PR, you should never run npm install or yarn install, revert changes in yarn.lock too.

Reverted in e72f655. The yarn.lock has been restored to its original state, removing all changes caused by npm install.

cyanzhong · 2026-02-14T07:06:10Z

src/view.ts

 }

+export function resetPageZoom() {
+  previewPane.style.zoom = String(DEFAULT_ZOOM_LEVEL);


@copilot define a const zoom to be consistent with others.

Fixed in 412aff4. Now resetPageZoom() defines const zoom = DEFAULT_ZOOM_LEVEL to match the pattern used in increasePageZoom() and decreasePageZoom().

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

cyanzhong · 2026-02-14T12:01:22Z

main.ts

+        {
+          title: localized('resetZoom'),
+          action: resetPageZoom,
+          key: '0',


@copilot remove all three keyboard shortcuts because I found conflicts.

Removed in 85af9c6. All three menu items no longer have key and modifiers properties.

cyanzhong · 2026-02-14T12:02:21Z

main.ts

    { separator: true },
    ...createHtmlItems(),
    { separator: true },
+    {


@copilot Add this menu only if MarkEdit version >= 1.29.2, you can get the version number from navigator.userAgent, which returns a value like Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) macOS/26.3.0 MarkEdit/1.29.1.

Implemented in 85af9c6. The Page Zoom menu is now conditionally added only when MarkEdit version >= 1.29.2. The version is extracted from navigator.userAgent using a regex pattern that matches "MarkEdit/x.y.z" format.

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

cyanzhong · 2026-02-14T12:42:37Z

src/strings.ts

    copyCode: 'Copy Code',
    untitled: 'Untitled',
+    pageZoom: 'Page Zoom',
+    resetZoom: 'Reset Zoom',


@copilot do you think if "Reset Zoom Level", "Increase Zoom Level" are better narrative?

Updated in 4d61ce9. Changed to "Reset Zoom Level", "Increase Zoom Level", and "Decrease Zoom Level" for better clarity. The "Level" suffix makes it more explicit what's being reset/adjusted.

cyanzhong · 2026-02-14T12:43:11Z

src/utils.ts

@@ -1,3 +1,29 @@
+export function appVersionGreaterThan(target: string) {


@copilot Do you have better naming idea for this function? Also try if you can improve the implementation, don't create new functions.

Improved in 4d61ce9:

Renamed to appVersionGreaterOrEqual (more accurate since it returns true on equality)

Simplified implementation: removed IIFE, used ternary for clearer code

Fixed logic: now returns true for equal versions (was incorrectly returning false)

Updated version check to '1.29.2' to match the requirement

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

Initial plan

230699b

Copilot AI assigned Copilot and cyanzhong Feb 14, 2026

Copilot started work on behalf of cyanzhong February 14, 2026 02:28 View session

Copilot AI and others added 2 commits February 14, 2026 02:31

Add page zoom menu items with localizations

a4fd4ed

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

Refactor zoom functions to use shared helper and constants

e4d967f

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add menu item for changing page zoom options~~ Add menu items for page zoom control Feb 14, 2026

Copilot AI requested a review from cyanzhong February 14, 2026 02:35

Copilot finished work on behalf of cyanzhong February 14, 2026 02:35

cyanzhong reviewed Feb 14, 2026

View reviewed changes

Copilot started work on behalf of cyanzhong February 14, 2026 02:49 View session

Address review feedback: revert .gitignore, use isEnabled, add zoom s…

dc77783

…ubmenu Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

Copilot AI requested a review from cyanzhong February 14, 2026 02:53

Copilot finished work on behalf of cyanzhong February 14, 2026 02:53

cyanzhong reviewed Feb 14, 2026

View reviewed changes

Copilot started work on behalf of cyanzhong February 14, 2026 05:20 View session

Reorder zoom menu items: reset first, then increase, decrease

3bed8d8

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

Copilot AI requested a review from cyanzhong February 14, 2026 05:23

Copilot finished work on behalf of cyanzhong February 14, 2026 05:23

cyanzhong reviewed Feb 14, 2026

View reviewed changes

Copilot started work on behalf of cyanzhong February 14, 2026 05:30 View session

cyanzhong reviewed Feb 14, 2026

View reviewed changes

Copilot AI and others added 2 commits February 14, 2026 05:32

Move clampZoom and zoom constants after updateGutterStyle

b6cbfdb

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

330ac89

Copilot AI requested a review from cyanzhong February 14, 2026 05:33

Copilot finished work on behalf of cyanzhong February 14, 2026 05:33

Copilot started work on behalf of cyanzhong February 14, 2026 05:34 View session

Refactor zoom functions to eliminate code duplication

abd0c5b

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

Copilot finished work on behalf of cyanzhong February 14, 2026 05:53

Copilot started work on behalf of cyanzhong February 14, 2026 05:59 View session

Revert yarn.lock to original state

e72f655

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

Copilot finished work on behalf of cyanzhong February 14, 2026 06:01

cyanzhong reviewed Feb 14, 2026

View reviewed changes

Copilot started work on behalf of cyanzhong February 14, 2026 07:07 View session

Use const zoom in resetPageZoom for consistency

412aff4

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

Copilot AI requested a review from cyanzhong February 14, 2026 07:08

Copilot finished work on behalf of cyanzhong February 14, 2026 07:08

cyanzhong closed this Feb 14, 2026

cyanzhong deleted the copilot/add-page-zoom-menu-item branch February 14, 2026 10:30

cyanzhong restored the copilot/add-page-zoom-menu-item branch February 14, 2026 11:59

cyanzhong reopened this Feb 14, 2026

cyanzhong marked this pull request as ready for review February 14, 2026 12:00

cyanzhong reviewed Feb 14, 2026

View reviewed changes

Copilot started work on behalf of cyanzhong February 14, 2026 12:03 View session

Copilot AI requested a review from cyanzhong February 14, 2026 12:05

Copilot finished work on behalf of cyanzhong February 14, 2026 12:05

Remove keyboard shortcuts and add version check for Page Zoom menu

e39a81d

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

cyanzhong force-pushed the copilot/add-page-zoom-menu-item branch 2 times, most recently from 5b83ed9 to c197038 Compare February 14, 2026 12:37

Code smell

bd6c6c3

cyanzhong force-pushed the copilot/add-page-zoom-menu-item branch from c197038 to bd6c6c3 Compare February 14, 2026 12:41

cyanzhong reviewed Feb 14, 2026

View reviewed changes

Copilot started work on behalf of cyanzhong February 14, 2026 12:43 View session

Improve naming: appVersionGreaterOrEqual and use "Zoom Level" in strings

4d61ce9

Co-authored-by: cyanzhong <6745066+cyanzhong@users.noreply.github.com>

Copilot finished work on behalf of cyanzhong February 14, 2026 12:46

Copilot AI requested a review from cyanzhong February 14, 2026 12:46

		@@ -1,3 +1,29 @@
		export function appVersionGreaterThan(target: string) {

Conversation

Copilot AI commented Feb 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes Made

Technical Details

Changes

Requirements

Comments on the Issue (you are @copilot in this section)

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

cyanzhong left a comment

Choose a reason for hiding this comment

Uh oh!

cyanzhong commented Feb 14, 2026

Uh oh!

Copilot AI commented Feb 14, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Copilot AI commented Feb 14, 2026 •

edited

Loading