feat: add pinch-to-zoom support to editor

src/cm/commandRegistry.js

@@ -108,6 +108,10 @@ import keyBindings, {
 } from "lib/keyBindings";
 import settings from "lib/settings";
 import Url from "utils/Url";
+import {
+	clampEditorFontSize,
+	DEFAULT_EDITOR_FONT_SIZE,
+} from "./editorFontSize";
 
 const commandKeymapCompartment = new Compartment();
 
@@ -1457,11 +1461,13 @@ async function openInAppBrowserCommand() {
 }
 
 function adjustFontSize(delta) {
-	const current = settings?.value?.fontSize || "12px";
-	const numeric = Number.parseInt(current, 10) || 12;
-	const next = Math.min(72, Math.max(6, numeric + delta));
+	const current = settings?.value?.fontSize || `${DEFAULT_EDITOR_FONT_SIZE}px`;
+	const numeric = Number.parseInt(current, 10) || DEFAULT_EDITOR_FONT_SIZE;
+	const next = clampEditorFontSize(numeric + delta);
+
 	settings.value.fontSize = `${next}px`;
 	settings.update(false);
+
 	return true;
 }
 

src/cm/editorFontSize.js

@@ -0,0 +1,24 @@
+/**
+ * Shared font-size rules for the editor.
+ * Keeping these values consistent across editor commands and pinch-to-zoom.
+ */
+
+export const DEFAULT_EDITOR_FONT_SIZE = 12;
+export const MIN_EDITOR_FONT_SIZE = 6;
+export const MAX_EDITOR_FONT_SIZE = 72;
+
+/**
+ * Keeps the editor font size within the supported range.
+ * @param {number} px
+ * @returns {number}
+ */
+export function clampEditorFontSize(px) {
+	if (!Number.isFinite(px)) {
+		return DEFAULT_EDITOR_FONT_SIZE;
+	}
+
+	return Math.min(
+		MAX_EDITOR_FONT_SIZE,
+		Math.max(MIN_EDITOR_FONT_SIZE, Math.round(px)),
+	);
+}

src/cm/mainEditorExtensions.ts

@@ -1,6 +1,7 @@
 import type { Extension } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import searchMatchHighlighter from "./searchMatchHighlighter";
+import pinchZoom from "./pinchZoom";
 
 interface MainEditorExtensionOptions {
 	emmetExtensions?: Extension[];
@@ -47,6 +48,7 @@ export function createMainEditorExtensions(
 	pushExtension(extensions, options.commandKeymapExtension);
 	pushExtension(extensions, options.themeExtension);
 	extensions.push(fixedHeightTheme);
+	extensions.push(pinchZoom);
 	pushExtension(extensions, options.pointerCursorVisibilityExtension);
 	pushExtension(extensions, options.shiftClickSelectionExtension);
 	pushExtension(extensions, options.multiCursorSelectionExtension);