Version 1.0.8

1. Add zoom-in and zoom-out feature. ([#8])
2. Add search feature. ([#9])

README.md

@@ -6,7 +6,9 @@ This is a plugin for Obsidian (https://obsidian.md). Can open document with `.ht
 - [Install this plugin from Obsidian](#install-this-plugin-from-obsidian)
 - [Manually installing the plugin](#manually-installing-the-plugin)
 - [HTML Reader Settings](#html-reader-settings)
-  - [Operating Mode](#operating-mode)
+  - [General Settings](#general-settings)
+  - [Hotkeys and Touch Gestures Settings](#hotkeys-and-touch-gestures-settings)
+- [More Options](#more-options)
 - [How to build this plugin from source code](#how-to-build-this-plugin-from-source-code)
 - [Known issues](#known-issues)
 
@@ -36,12 +38,13 @@ This is a plugin for Obsidian (https://obsidian.md). Can open document with `.ht
 1. Head to ⚙"Settings" ⇨ "Community plugins" options page, find the settings icon ⚙ of "**HTML Reader**" item, then click it.
 2. Or, Head to ⚙"Settings" ⇨ click "**HTML Reader**" item on the bottom of left panel under the "Community plugins" group after enabled it.
 
+![HtmlReadedSettings1.jpg](./assets/images/screenshots/HtmlReadedSettings1.jpg "HTML Reader Setting part1") 
 
-### Operating Mode
+### General Settings
 
-![OperatingModeSettings1.jpg](./assets/images/screenshots/OperatingModeSettings1.jpg "HTML Reader Setting part1") 
+#### Operating Mode
 
-Set Operating Mode (a.k.a **OpMode**) for this plugin to protect user and app.
+Set Operating Mode for this plugin to protect user and app.
 
 #### Comparsion
 
@@ -95,6 +98,36 @@ This section would try to explain some terms used by Operating Mode more detail.
 
 <br />
 
+### Hotkeys and touch gestures settings
+Almost all keyboard hotkeys are taken from Obsidian's global hotkey settings, so you shall modify them via Settings → Options → Hotkeys. <br>
+That means this plugin does not design any new configuration interface for keyboard hotkeys. And it just show the first two settings of corresponding hotkeys with readonly mode.
+
+#### Search document text
+Search current file.
+#### Zoom in document
+Zoom in current file.
+#### Zoom out document
+Zoom out current file.
+#### Reset document zoom
+Reset current file zoom.
+#### Quick document zoom in and out
+Zoom the document using Ctrl + Wheel (zoom in: ↑, zoom out: ↓), or using the trackpad/touch screen/touch panel two-finger pinch-zoom gesture (zoom in: ← →, zoom out: → ←).
+
+
+## More options
+After opening HTML files, the three dots "more options" menu icon on right-upper corner of tab would add some menu items.
+
+![MoreOptions1.jpg](./assets/images/screenshots/MoreOptions1.jpg "More Options part1")
+
+### Find...
+Open search bar.
+### Zoom in
+Zoom in current file.
+### Zoom out
+Zoom out current file.
+### Reset zoom
+Reset current file zoom.
+
 
 ## How to build this plugin from source code
 
@@ -130,5 +163,15 @@ This section would try to explain some terms used by Operating Mode more detail.
     2. Removed by HTML Sanitization mechanism
   - Obsidian's developer team is very concern about XSS attacks, so they want plugin developers follow this [tip](https://github.com/obsidianmd/obsidian-releases/blob/master/plugin-review.md#avoid-innerhtml-outerhtml-and-insertadjacenthtml) to prevent XSS attacks. Therefore, almost all script codes resident inside `<script>` in the HTML file would be blocked, and the external script files are the same.
   - Meanwhile, HTML Sanitization mechanism would sanitize potential XSS code more deeper. So, the code such as `<... onload="alert(1)">` would be removed.
-  - Therefore, you can switch to [less restricted modes](#operating-mode) to see if they work or not.
+  - Therefore, you could switch to [less restricted modes](#operating-mode) to see if they work or not.
+
+- Cannot zoom in or out by mouse wheel on mobile platforms
+  - It seems the Obsidian app block something on mobile platforms, so these actions would not work normally.
+  - You could use two-finger pinch-zoom gesture on the touch screen to zoom in or out.
+  - You could use the "[more options](#more-options)" menu items to zoom in or out.
 
+- The zoom related hotkey settings are disappeared on mobile platforms
+  - The mobile version of Obsidian does not provide these settings, so this plugin also not provide them.
+
+- The presentation style of search results is different with Markdown documents
+  - There are lots tags/elements inside HTML files, and some search results would across tags and overlap with each others. Therefore, this plugin use the block mark style (highlight with background color) instead outline style.

manifest.json

@@ -1,8 +1,8 @@
 {
 	"id": "obsidian-html-plugin",
 	"name": "HTML Reader",
-	"version": "1.0.7",
-	"minAppVersion": "0.15.0",
+	"version": "1.0.8",
+	"minAppVersion": "0.15.3",
 	"description": "This is a HTML file reader plugin for Obsidian. Can open document with \".html\" and \".htm\" file extensions.",
 	"author": "Nuthrash",
 	"authorUrl": "https://github.com/nuthrash/obsidian-html-plugin",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-html-plugin",
-	"version": "1.0.7",
+	"version": "1.0.8",
 	"description": "This is a HTML file reader plugin for Obsidian. Can open document with \".html\" and \".htm\" file extensions.",
 	"main": "main.js",
 	"scripts": {
@@ -28,6 +28,8 @@
 	},
 	"dependencies": {
 		"@zip.js/zip.js": "^2.6.52",
+		"mark.js": "^8.11.1",
+		"number-precision": "^1.6.0",
 		"single-filez-core": "^1.0.26"
 	}
 }

src/HtmlPluginOpMode.ts

@@ -16,7 +16,6 @@ export const OP_MODE_INFO_DATA: Record<string, string> = {
 }
 
 export const OP_MODE_INFO_HTML: string = `
-<pre><b>※ Remember to reload the file after change the mode.</b></pre>
 <style>
   #ophCompTable {
     border: 1px solid var(--table-border-color);
@@ -48,8 +47,10 @@ export const OP_MODE_INFO_HTML: string = `
     font-family: -apple-system, BlinkMacSystemFont, var(--font-monospace);
   }  
 </style>
+
+<details>
+<summary>Comparison</summary>
 <table id="ophCompTable">
-  <caption>Comparison<br></caption>
   <thead>
   <tr>
 	<th> </th>
@@ -121,8 +122,9 @@ export const OP_MODE_INFO_HTML: string = `
 <div>[1]: The external image sources would be blocked by CSP.</div>
 <div>[2]: The script codes inside <code>&lt;script&gt;</code> and external script files are still not executable.</div>
 <div>[3]: The external script files may not executable due to Obsidian's limitation.</div>
-
 <br />
+</details>
+
 <details>
 <summary>Detail Explanation</summary>
 <ol>

src/HtmlPluginSettings.ts

@@ -4,25 +4,36 @@ import { HtmlPluginOpMode, OP_MODE_INFO_DATA, OP_MODE_INFO_HTML } from "./HtmlPl
 
 export interface HtmlPluginSettings {
 	opMode: HtmlPluginOpMode;
+	zoomByWheelAndGesture: boolean;
+	zoomValue: number;
 }
 
 export const DEFAULT_SETTINGS: HtmlPluginSettings = {
 	opMode: HtmlPluginOpMode.Balance,
+	zoomByWheelAndGesture: true,
+	zoomValue: 1.0,
 }
 
 export class HtmlSettingTab extends PluginSettingTab {
+	app: App;
 	plugin: HtmlPlugin;
 	opModeInfoFrag: DocumentFragment;
 
 	constructor(app: App, plugin: HtmlPlugin) {
 		super(app, plugin);
+		this.app = app;
 		this.plugin = plugin;
 	}
 
 	display(): void {
 		const { containerEl } = this;
 		containerEl.empty();
-		containerEl.createEl('h2', { text: 'HTML Reader Settings' });
+		containerEl.createEl('h1', { text: 'HTML Reader Settings' });
+		containerEl.createEl('pre', { text: '※ Remember to reload the file after changing any setting.'})
+						.setAttribute('style', 'color:red');
+
+		// ----- General Settings ----
+		containerEl.createEl('h2', { text: 'General Settings' });
 
 		const opModeSetting = new Setting(containerEl);
 		opModeSetting
@@ -43,7 +54,116 @@ export class HtmlSettingTab extends PluginSettingTab {
 		}
 
 		opModeSetting.infoEl.appendChild( this.opModeInfoFrag.cloneNode(true) );
+
+		// ----- HotKeys and Touch Gestures Settings ----
+		containerEl.createEl('h2', { text: 'HotKeys and Touch Gestures Settings' });
+		containerEl.createEl('small', { text: `Almost all keyboard hotkeys are taken from Obsidian's global hotkey settings, so you shall modify them via Settings → Options → Hotkeys` });
+
+		this.buildHotkeySettings();
+
+		new Setting(containerEl)
+			.setName( 'Quick document zoom in and out' )
+			.setDesc( 'Zoom the document using Ctrl + Wheel (zoom in: ↑, zoom out: ↓), or using the trackpad/touch screen/touch panel two-finger pinch-zoom gesture (zoom in: ← →, zoom out: → ←).' )
+			.addToggle( (toggle) => {
+				toggle
+					.setValue(this.plugin.settings.zoomByWheelAndGesture)
+					.onChange( async (enabled) => {
+						this.plugin.settings.zoomByWheelAndGesture = enabled;
+						await this.plugin.saveSettings();
+					});
+			});
+
+	}
+
+	buildHotkeySettings(): void {
+		const { containerEl } = this;
+
+		// default hotkeys: app.commands.commands app.hotkeyManager.defaultKeys
+		// custom hotkeys: app.hotkeyManager.customKeys
+
+		let gSearch = this.app.hotkeyManager.getHotkeys('editor:open-search') || this.app.hotkeyManager.getDefaultHotkeys('editor:open-search');
+		const hkSearch = new Setting(containerEl);
+		hkSearch
+			.setName( "Search document text" )
+			// .setDesc( `${this.app.commands.findCommand("editor:open-search").name}` )
+			.setDesc( `Search current file.` );
+
+		let hotkeyPairs = [
+			{ elm: hkSearch, settings: gSearch } 
+		];
+
+		if( !this.app.isMobile ) {
+			// following Hotkey settings would not appear on Mobile platforms!!
+
+			let gZoomIn = this.app.hotkeyManager.getHotkeys('window:zoom-in') || this.app.hotkeyManager.getDefaultHotkeys('window:zoom-in');
+			const hkZoomIn = new Setting(containerEl)
+								.setName( "Zoom in document" )
+								.setDesc( `Zoom in current file.` );
+			hotkeyPairs.push( { elm: hkZoomIn, settings: gZoomIn } );
+
+			let gZoomOut = this.app.hotkeyManager.getHotkeys('window:zoom-out') || this.app.hotkeyManager.getDefaultHotkeys('window:zoom-out');
+			const hkZoomOut = new Setting(containerEl)
+								.setName( "Zoom out document" )
+								.setDesc( `Zoom out current file.` );
+			hotkeyPairs.push( { elm: hkZoomOut, settings: gZoomOut } );
+
+			let gZoomReset = this.app.hotkeyManager.getHotkeys('window:reset-zoom') || this.app.hotkeyManager.getDefaultHotkeys('window:reset-zoom');
+			const hkZoomReset = new Setting(containerEl)
+								.setName( "Reset document zoom" )
+								.setDesc( `Reset current file zoom.` );
+			hotkeyPairs.push( { elm: hkZoomReset, settings: gZoomReset } );
+		}
+
+		for( let pair of hotkeyPairs ) {
+			if( pair.settings && pair.settings.length > 0 ) {
+				for( let i = 0; i < pair.settings.length; ++i ) {
+					if( i >= 2 ) {
+						// only show first two hotkeys
+						let eps = pair.elm.controlEl.createEl('span');
+						eps.textContent = '...';
+						break;
+					}
+
+					let hk = pair.settings[i];
+					pair.elm.addButton( (btn) => {
+						if( hk.modifiers && hk.modifiers.length > 0 )
+							btn.setButtonText( `${this.toNativeModifierString(hk.modifiers, hk.key)}` );
+						else
+							btn.setButtonText( `${hk.key}` );
+						btn.setDisabled( true );
+					});
+				}
+			} else {
+				pair.elm.addButton( (btn) => {
+					btn.setButtonText( `Blank` );
+					// btn.setButtonText( `${i18next.t("setting.hotkeys.label-blank-hotkey")}` );
+					btn.setDisabled( true );
+				});
+			}
+		}
+
+	}
+
+	toNativeModifierString( modifiers: Modifier[], key: string ): string {
+		const isMacPlat = isMacPlatform();
+		let str = modifiers.join( isMacPlat ? '' : ' + ' );
+		if( isMacPlat ) {
+			str = str
+					.replace( 'Mod', '⌘' ).replace( 'Meta', '⌘' )
+					.replace( 'Shift', '⇧' ).replace( 'Alt', '⌥' )
+					.replace( 'Ctrl', '^' ).concat( key );
+		} else {
+			str = str.replace( 'Mod', 'Ctrl' ).replace( 'Meta', 'Win' ).concat( ` + ${key}` );
+		}
+		return str;
 	}
 }
 
+// https://forum.obsidian.md/t/identify-platform-operating-system/27878/3
+export function isMacPlatform(): boolean {
+	const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'];
+	if( macosPlatforms.indexOf(window.navigator.platform) !== -1 )
+		return true;
+	return false;
+}