Add setting for max image width when viewing .note files

main.ts

@@ -7,6 +7,7 @@ interface SupernotePluginSettings {
 	showTOC: boolean;
 	showExportButtons: boolean;
 	collapseRecognizedText: boolean,
+	noteImageMaxDim: number;
 }
 
 const DEFAULT_SETTINGS: SupernotePluginSettings = {
@@ -15,7 +16,8 @@ const DEFAULT_SETTINGS: SupernotePluginSettings = {
 	showTOC: true,
 	showExportButtons: true,
 	collapseRecognizedText: false,
-};
+	noteImageMaxDim: 800, // Sensible default for Nomad pages to be legible but not too big. Unit: px
+}
 
 function generateTimestamp(): string {
 	const date = new Date();
@@ -163,8 +165,13 @@ export class SupernoteView extends FileView {
 		for (let i = 0; i < images.length; i++) {
 			const imageDataUrl = images[i].toDataURL();
 
+			const pageContainer = container.createEl("div", {
+				cls: 'page-container',
+			})
+			pageContainer.setAttr('style', 'max-width: ' + this.settings.noteImageMaxDim + 'px;')
+
 			if (images.length > 1 && this.settings.showTOC) {
-				const a = container.createEl("a");
+				const a = pageContainer.createEl("a");
 				a.id = `page${i + 1}`;
 				a.href = "#toc";
 				a.createEl("h3", { text: `Page ${i + 1}` });
@@ -176,30 +183,31 @@ export class SupernoteView extends FileView {
 
 				// If Collapse Text setting is enabled, place the text into an HTML `details` element
 				if (this.settings.collapseRecognizedText) {
-					text = container.createEl('details', {
+					text = pageContainer.createEl('details', {
 						text: '\n' + sn.pages[i].text,
+						cls: 'page-recognized-text',
 					});
 					text.createEl('summary', { text: `Page ${i + 1} Recognized Text` });
 				} else {
-					text = container.createEl('div', {
+					text = pageContainer.createEl('div', {
 						text: sn.pages[i].text,
+						cls: 'page-recognized-text',
 					});
 				}
-
-				text.setAttr('style', 'user-select: text; white-space: pre-line; margin-top: 1.2em;');
 			}
 
 			// Show the img of the page
-			const imgElement = container.createEl("img");
+			const imgElement = pageContainer.createEl("img");
 			imgElement.src = imageDataUrl;
 			if (this.settings.invertColorsWhenDark) {
 				imgElement.addClass("supernote-invert-dark");
 			}
+			imgElement.setAttr('style', 'max-height: ' + this.settings.noteImageMaxDim + 'px;')
 			imgElement.draggable = true;
 
 			// Create a button to save image to vault
 			if (this.settings.showExportButtons) {
-				const saveButton = container.createEl("button", {
+				const saveButton = pageContainer.createEl("button", {
 					text: "Save image to vault",
 					cls: "mod-cta",
 				});
@@ -464,5 +472,18 @@ class SupernoteSettingTab extends PluginSettingTab {
 					await this.plugin.saveSettings();
 				})
 			);
+
+		new Setting(containerEl)
+			.setName('Max image side length in .note files')
+			.setDesc('Maximum width and height (in pixels) of the note image when viewing .note files. Does not affect exported images and markdown.')
+			.addSlider(text => text
+				.setLimits(200, 1900, 100) // Resolution of an A5X/A6X2/Nomad page is 1404 x 1872 px (with no upscaling)
+				.setDynamicTooltip()
+				.setValue(this.plugin.settings.noteImageMaxDim)
+				.onChange(async (value) => {
+					this.plugin.settings.noteImageMaxDim = value;
+					await this.plugin.saveSettings();
+				})
+			);
 	}
 }

styles.css

@@ -12,4 +12,19 @@
 
 .theme-light img.supernote-invert-light {
     filter: invert(1);
+}
+
+button.mod-cta {
+    display: block;
+}
+
+.page-recognized-text {
+    user-select: text; 
+    white-space: pre-line; 
+    margin-top: 1.2em;
+}
+
+div.page-container {
+    display: inline-block; 
+    vertical-align: top;
 }