Mobile: Resolves #10824: Allow adjusting the default note viewer font size (#11633)

packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.test.tsx

@@ -43,6 +43,7 @@ const WrappedNoteViewer: React.FC<WrapperProps> = (
 		<NoteBodyViewer
 			themeId={Setting.THEME_LIGHT}
 			style={emptyObject}
+			fontSize={12}
 			noteBody={noteBody}
 			noteMarkupLanguage={MarkupLanguage.Markdown}
 			highlightedKeywords={highlightedKeywords}

packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.tsx

@@ -19,6 +19,7 @@ import { MarkupLanguage } from '@joplin/renderer';
 interface Props {
 	themeId: number;
 	style: ViewStyle;
+	fontSize: number;
 	noteBody: string;
 	noteMarkupLanguage: MarkupLanguage;
 	highlightedKeywords: string[];
@@ -80,6 +81,7 @@ export default function NoteBodyViewer(props: Props) {
 
 	useRerenderHandler({
 		renderer,
+		fontSize: props.fontSize,
 		noteBody: props.noteBody,
 		noteMarkupLanguage: props.noteMarkupLanguage,
 		themeId: props.themeId,

packages/app-mobile/components/NoteBodyViewer/hooks/useRerenderHandler.ts

@@ -25,6 +25,7 @@ interface Props {
 	noteBody: string;
 	noteMarkupLanguage: MarkupLanguage;
 	themeId: number;
+	fontSize: number;
 
 	highlightedKeywords: string[];
 	noteResources: Record<string, ResourceInfo>;
@@ -82,7 +83,7 @@ const useRerenderHandler = (props: Props) => {
 	const effectDependencies = [
 		props.noteBody, props.noteMarkupLanguage, props.renderer, props.highlightedKeywords,
 		props.noteHash, props.noteResources, props.themeId, props.paddingBottom, lastResourceLoadCounter,
-		createEditPopupSyntax, destroyEditPopupSyntax, pluginSettingKeys,
+		createEditPopupSyntax, destroyEditPopupSyntax, pluginSettingKeys, props.fontSize,
 	];
 	const previousDeps = usePrevious(effectDependencies, []);
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
@@ -149,8 +150,9 @@ const useRerenderHandler = (props: Props) => {
 			theme: JSON.stringify({
 				bodyPaddingTop: '0.8em',
 				bodyPaddingBottom: props.paddingBottom,
-
 				...theme,
+
+				noteViewerFontSize: props.fontSize,
 			}),
 			codeTheme: theme.codeThemeCss,
 

packages/app-mobile/components/global-style.ts

@@ -9,13 +9,14 @@ const baseStyle = {
 	appearance: 'light',
 	fontSize: 16,
 	fontSizeLarge: 20,
-	noteViewerFontSize: 16,
 	margin: 15, // No text and no interactive component should be within this margin
 	itemMarginTop: 10,
 	itemMarginBottom: 10,
 	fontSizeSmaller: 14,
 	disabledOpacity: 0.2,
 	lineHeight: '1.6em',
+	// The default, may be overridden in settings:
+	noteViewerFontSize: 16,
 };
 
 export type ThemeStyle = BaseTheme & typeof baseStyle & {

packages/app-mobile/components/screens/Note/Note.tsx

@@ -82,6 +82,7 @@ interface Props extends BaseProps {
 	themeId: number;
 	editorFontSize: number;
 	editorFont: number; // e.g. Setting.FONT_MENLO
+	viewerFontSize: number;
 	showSideMenu: boolean;
 	searchQuery: string;
 	ftsEnabled: number;
@@ -1459,6 +1460,7 @@ class NoteScreenComponent extends BaseScreenComponent<ComponentProps, State> imp
 						noteResources={this.state.noteResources}
 						highlightedKeywords={keywords}
 						themeId={this.props.themeId}
+						fontSize={this.props.viewerFontSize}
 						noteHash={this.props.noteHash}
 						onCheckboxChange={this.onBodyViewerCheckboxChange}
 						onMarkForDownload={this.onMarkForDownload}
@@ -1637,6 +1639,7 @@ const NoteScreen = connect((state: AppState) => {
 		themeId: state.settings.theme,
 		editorFont: state.settings['style.editor.fontFamily'] as number,
 		editorFontSize: state.settings['style.editor.fontSize'],
+		viewerFontSize: state.settings['style.viewer.fontSize'],
 		toolbarEnabled: state.settings['editor.mobile.toolbarEnabled'],
 		ftsEnabled: state.settings['db.ftsEnabled'],
 		sharedData: state.sharedData,

packages/lib/models/settings/builtInMetadata.ts

@@ -1057,6 +1057,20 @@ const builtInMetadata = (Setting: typeof SettingType) => {
 		// Deprecated in favour of windowContentZoomFactor
 		'style.zoom': { value: 100, type: SettingItemType.Int, public: false, storage: SettingStorage.File, isGlobal: true, appTypes: [AppType.Desktop], section: 'appearance', label: () => '', minimum: 50, maximum: 500, step: 10 },
 
+		'style.viewer.fontSize': {
+			value: 16,
+			type: SettingItemType.Int,
+			public: true,
+			storage: SettingStorage.File,
+			isGlobal: true,
+			appTypes: [AppType.Mobile],
+			section: 'appearance',
+			label: () => _('Viewer font size'),
+			minimum: 4,
+			maximum: 50,
+			step: 1,
+		},
+
 		'style.editor.fontSize': {
 			value: 15,
 			type: SettingItemType.Int,