functionality & UX improvements

eatcodeplay · eatcodeplay · commit e7ea64b4234e · 2025-04-24T14:41:32.000+02:00
- some code restructuring for readability
- added context menu support for copying calculated values
- fixed css behaviour when table cells loose focus
- better css naming convention, providing more control over the appearance of calculation results and the last row containing calculations.
- added explanatory comments for example css snippet
diff --git a/README.md b/README.md
@@ -2,13 +2,13 @@
 
 A plugin for Obsidian that performs mathematical operations on Markdown tables.
 It dynamically calculates and displays results within your tables as you edit them.
-You can also copy the results to your clipboard.
+You can also copy the results to your clipboard, either via a keyboard shortcut or via the context menu.
 
 https://github.com/user-attachments/assets/af3b295f-5bbd-497f-b507-696e9fcbb690
 
 ## How to Use
 
-Simple Table Math allows you to perform calculations (sum, average, minimum, maximum, subtraction, multiplication) on columns or rows of numbers within your Markdown tables.
+The plugin allows you to perform calculations (sum, average, minimum, maximum, subtraction, multiplication) on columns or rows of numbers within your Markdown tables.
 To trigger a calculation, place a special tag within a table cell.
 
 The tag follows this format: `[operation][direction][start:end][currency]`
@@ -70,40 +70,41 @@ The tag follows this format: `[operation][direction][start:end][currency]`
 * **Optional Range Selection:** Target specific cells for your calculations.
 * **Currency Formatting:** Display results with currency symbols for better readability.
 * **Locale-Aware Formatting:** Respects your system's locale for number formatting by default, with an option to override.
-* **Copy Results:** When copying a cell containing a calculated value (using `Ctrl + C` or `⌘ + C`), the numerical result will be copied to your clipboard.
+* **Copy Results:** When copying a cell containing an operation (using `Ctrl + C` or `⌘ + C`) or the context menu, the calculated result will be copied to your clipboard.
 
 ## Settings
 
-You can configure Simple Table Math in the Obsidian settings under "Simple Table Math". 
+You can configure the plugin in the Obsidian settings under "Simple Table Math". 
 The following options are available:
 
 * **Fractions:** Set the number of decimal places to display in the calculated results.
-* **Number formatting:** Enter a locale code (e.g., `en-US`, `de-DE`) to override the default number formatting. If left blank it will use the languagae defined for Obsidian.
+* **Number formatting:** Enter a locale code (e.g., `en-US`, `de-DE`) to override the default number formatting. If left blank, it will use the language defined for Obsidian.
+* **Highlight last row calculations:** Enable or disable styling for the last row in tables that contain calculations.
 
 ## CSS Look & Feel
 
-Simple Table Math will add a CSS class `.stm-value` to every cell containing a calculated value.
+Simple Table Math adds the CSS class `.stm-value` to every cell containing a calculated value.
 You can use this class to style the cells in your tables. By default, these cells will be styled with a bolder font weight.
 
 If the last row of a table contains calculations, it will be styled with a background color to make it easier to see the results.
 You can disable this behavior in the plugin settings or write your own CSS snippet to override it.
 
-You can find an example CSS snippet in the [snippet.css](https://github.com/eatcodeplay/obsidian-simple-table-math/blob/0.1.0/assets/snippet.css) file.
+For the adventurous: any row that contains calculations will also get a `.stm-row` class.
+
+You can find an example CSS snippet in the [snippet.css](https://github.com/eatcodeplay/obsidian-simple-table-math/blob/main/assets/snippet.css) file.
 
 ## Gotchas & Known Issues
 
-* **Any column found it the calculation path, will be included in the result.**
+* **Any column found in the calculation path will be included in the result.**
   * If your headers contain numbers, make sure exclude them from calculations by using range selection.
-* **MOBILE:** Switching between Reading-Mode and Editing-Mode can result in the column not rerendering correctly.
-  * Touching/Clicking inside the table or outside should solve that.
 
 ## Installation
 
-This Plugin is currently not available in the Obsidian Community Plugins.
-You can install it manually by following the instructions below:
+This plugin is currently not available in the Obsidian Community Plugins.
+You can install it either by using [BRAT](https://obsidian.md/plugins?id=obsidian42-brat) or manually by following the instructions below:
 
 1.  Download the latest release from the [Releases](https://github.com/eatcodeplay/obsidian-simple-table-math/releases) page.
-2.  Extract the downloaded ZIP file into your Obsidian vault's plugins folder (e.g., `<your_vault>/.obsidian/plugins/obsidian-simple-table-math`).
+2.  Extract the downloaded ZIP content into a new folder in your Obsidian vault's plugins folder (e.g., `<your_vault>/.obsidian/plugins/obsidian-simple-table-math`).
 3.  **Note:** On some operating systems, the `.obsidian` folder might be hidden. Make sure to show hidden files in your file explorer.
 4.  Open Obsidian.
 5.  Go to `Settings` -> `Community plugins`.
diff --git a/assets/snippet.css b/assets/snippet.css
@@ -1,22 +1,30 @@
-div.markdown-rendered table.table-editor tr.stm > td.stm-value,
-div.markdown-rendered table.table-editor tr.stm > td > .stm-value {
+/* -------------------------------
+  Source / Live View Styles
+------------------------------- */
+
+/* Styles the value cells of a table with calculated values */
+div.markdown-rendered table.table-editor tr > td.stm-cell.stm-value,
+div.markdown-rendered table.table-editor tr > td.stm-cell > .stm-value {
 	padding: 4px 12px;
 	font-weight: calc(var(--font-weight) + var(--bold-modifier));
 }
-div.markdown-rendered table.table-editor tr.stm > td.stm-value + .table-cell-wrapper,
-div.markdown-rendered table.table-editor tr.stm > td > .stm-value + .table-cell-wrapper {
-	display: none;
-}
-div.markdown-rendered table.table-editor tr.stm > td:focus-within > .stm-value {
-	display: none;
-}
-div.markdown-rendered table.table-editor tr.stm:last-of-type:not(.off) {
+
+/* Styles the last row of a table with calculated values */
+div.markdown-rendered table.table-editor tr.stm-row:last-of-type:not(.off) {
 	background-color: var(--background-secondary);
 }
-div.el-table > table tr.stm > td.stm-value,
-div.el-table > table tr.stm > td > .stm-value {
+
+/* -------------------------------
+  Reading View Styles
+------------------------------- */
+
+/* Styles the value cells of a table with calculated values */
+div.el-table > table tr.stm-row > td.stm-cell.stm-value,
+div.el-table > table tr.stm-row > td.stm-cell > .stm-value {
 	font-weight: calc(var(--font-weight) + var(--bold-modifier));
 }
-div.el-table > table tr.stm:last-of-type:not(.off) {
+
+/* Styles the last row of a table with calculated values */
+div.el-table > table tr.stm-row:last-of-type:not(.off) {
 	background-color: var(--background-secondary);
 }
diff --git a/src/main.ts b/src/main.ts
@@ -5,6 +5,8 @@ import {
 	getIcon,
 	getLanguage,
 	MarkdownView,
+	Menu,
+	MenuItem,
 	Notice,
 	Plugin,
 	PluginSettingTab,
@@ -41,20 +43,25 @@ const createFragment = (htmlstr: string) => {
  * The plugin actively listens to user interactions and processes table data accordingly.
  */
 export default class SimpleTableMath extends Plugin {
-	//----------------------------------
-	// Variables
-	//----------------------------------
+	//---------------------------------------------------
+	//
+	//  Variables
+	//
+	//---------------------------------------------------
 	workspace: Workspace;
 	layoutChangeEventRef: EventRef;
 	editorChangeEventRef: EventRef;
+	editorMenuEventRef: EventRef;
 	debouncedProcessing: () => void;
 	settings: SimpleTableMathSettings;
 	preventProcessing: boolean = false;
 	forceProcessing: boolean = false;
 
-	//----------------------------------
-	// Plugin Lifecycle Methods
-	//----------------------------------
+	//---------------------------------------------------
+	//
+	//  Plugin Lifecycle
+	//
+	//---------------------------------------------------
 	async onload() {
 		await this.loadSettings();
 		this.addSettingTab(new SettingTab(this.app, this));
@@ -65,6 +72,7 @@ export default class SimpleTableMath extends Plugin {
 
 		this.editorChangeEventRef = this.workspace.on('layout-change', this.debouncedProcessing);
 		this.layoutChangeEventRef = this.workspace.on('editor-change', this.debouncedProcessing);
+		this.editorMenuEventRef = this.workspace.on('editor-menu', this.handleEditorMenuEvent.bind(this));
 
 		app.scope.register(null, 'Tab', this.debouncedProcessing);
 		app.scope.register(null, 'ArrowLeft', this.debouncedProcessing);
@@ -73,43 +81,28 @@ export default class SimpleTableMath extends Plugin {
 		app.scope.register(null, 'ArrowDown', this.debouncedProcessing);
 
 		this.registerDomEvent(document, 'click', this.debouncedProcessing);
-		this.registerDomEvent(document, 'keydown', (evt) => {
-			const isCopy = (evt.ctrlKey || evt.metaKey) && evt.key === 'c';
-			if (isCopy) {
-				this.process();
-				this.copyResult();
-			}
-		});
+		this.registerDomEvent(document, 'keydown', this.handleKeyDownEvent.bind(this));
 
 		this.workspace.on('file-open', () => {
 			this.forceProcessing = true;
-			this.process();
+			this.debouncedProcessing();
 		});
 	}
 
 	onunload() {
 		this.workspace.offref(this.layoutChangeEventRef);
 		this.workspace.offref(this.editorChangeEventRef);
+		this.workspace.offref(this.editorMenuEventRef);
 	}
 
-	async loadSettings() {
-		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
-	}
-
-	async saveSettings() {
-		await this.saveData(this.settings);
-		const trs = document.querySelectorAll('tr.stm');
-		trs.forEach((tr) => {
-			if (this.settings.styleLastRow) {
-				tr.classList.remove('off');
-			} else {
-				tr.classList.add('off');
-			}
-		})
-	}
+	//---------------------------------------------------
+	//
+	//  Methods
+	//
+	//---------------------------------------------------
 
 	//----------------------------------
-	// Table Processing Method
+	// Table Processing
 	//----------------------------------
 	process() {
 		if (!this.preventProcessing) {
@@ -132,7 +125,7 @@ export default class SimpleTableMath extends Plugin {
 			}
 
 			const rowClasses = [
-				'stm',
+				'stm-row',
 				...(this.settings.styleLastRow ? [] :  ['off']),
 			];
 
@@ -227,7 +220,8 @@ export default class SimpleTableMath extends Plugin {
 								}
 
 								if (vElement) {
-									cell.classList.add('stm');
+									cell.classList.add('stm-cell');
+									cell.tabIndex = -1;
 									cell.closest('tr')?.classList.add(...rowClasses);
 									const defaultLocale = getLanguage();
 									vElement.innerText = result.toLocaleString(this.settings.locale || defaultLocale, {
@@ -238,7 +232,7 @@ export default class SimpleTableMath extends Plugin {
 									});
 								}
 							}
-						} else if (!isActiveElement && cell.classList.contains('stm')) {
+						} else if (!isActiveElement && cell.classList.contains('stm-cell')) {
 							let vElement = cell.querySelector('div.stm-value') as HTMLElement | null;
 							if (vElement) {
 								cell.removeChild(vElement);
@@ -258,22 +252,74 @@ export default class SimpleTableMath extends Plugin {
 		this.preventProcessing = false;
 	}
 
-	copyResult() {
-		const column = document.activeElement?.closest('td, th');
-		if (column) {
-			const value = column.querySelector('.stm-value') as HTMLElement | null;
-			if (value) {
-				setTimeout(() => {
-					let html = '';
-
-					const icon = getIcon('copy-check');
-					if (icon) {
-						html += icon.outerHTML;
-					}
-					const fragment = createFragment(`${html}<span class="stm-copy-success">Copied!</span>`);
-					new Notice(fragment, 1000);
-					navigator.clipboard.writeText(value.textContent || '');
-				}, 25);
+	//----------------------------------
+	// Settings Methods
+	//----------------------------------
+	async loadSettings() {
+		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
+	}
+
+	async saveSettings() {
+		await this.saveData(this.settings);
+		const trs = document.querySelectorAll('tr.stm-row');
+		trs.forEach((tr) => {
+			if (this.settings.styleLastRow) {
+				tr.classList.remove('off');
+			} else {
+				tr.classList.add('off');
+			}
+		})
+	}
+
+	//----------------------------------
+	// UI Methods
+	//----------------------------------
+	showNotice(message: string, icon: string | null = null, duration: number = 1000) {
+		let svg = '';
+		if (icon) {
+			const svgEl = getIcon(icon);
+			if (svgEl) {
+				svg = svgEl.outerHTML;
+			}
+		}
+		new Notice(
+			createFragment(`${svg}<span class="stm-notice">${message}</span>`),
+			duration,
+		);
+	}
+
+	//----------------------------------
+	// Event Handlers
+	//----------------------------------
+	handleEditorMenuEvent(menu: Menu) {
+		const cell = document.activeElement?.closest('td.stm-cell');
+		const value = cell?.querySelector('.stm-value') as HTMLElement | null;
+		if (value) {
+			menu.addItem((item: MenuItem) => {
+				item
+					.setTitle('Copy calculated value')
+					.setIcon('square-equal')
+					.onClick(async () => {
+						navigator.clipboard.writeText(value.textContent || '');
+						this.showNotice('Copied!', 'copy-check');
+					});
+			});
+		}
+	}
+
+	handleKeyDownEvent(evt: KeyboardEvent) {
+		const isCopy = (evt.ctrlKey || evt.metaKey) && evt.key === 'c';
+		if (isCopy) {
+			this.process();
+			const cell = document.activeElement?.closest('td.stm-cell, th.stm-cell');
+			if (cell) {
+				const value = cell.querySelector('.stm-value') as HTMLElement | null;
+				if (value) {
+					setTimeout(() => {
+						navigator.clipboard.writeText(value.textContent || '');
+						this.showNotice('Copied!', 'copy-check');
+					}, 25);
+				}
 			}
 		}
 	}
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,10 +1,10 @@
 div.markdown-rendered table.table-editor {
-	tr.stm > td {
+	tr > td.stm-cell {
 		&.stm-value, & > .stm-value {
 			padding: 4px 12px;
 			font-weight: calc(var(--font-weight) + var(--bold-modifier));
 
-			& + .table-cell-wrapper	 {
+			& + .table-cell-wrapper	{
 				display: none;
 			}
 		}
@@ -13,24 +13,33 @@ div.markdown-rendered table.table-editor {
 				display: none;
 			}
 		}
+		&:not(:focus-within) {
+			& > .stm-value ~ .table-cell-wrapper {
+				padding: 0;
+				opacity: 0;
+				max-width: 0;
+				max-height: 0;
+				overflow: hidden;
+			}
+		}
 	}
-	tr.stm:last-of-type:not(.off) {
+	tr.stm-row:last-of-type:not(.off) {
 		background-color: var(--background-secondary);
 	}
 }
 
 div.el-table > table {
-	tr.stm > td {
+	tr.stm-row > td.stm-cell {
 		&.stm-value, & > .stm-value {
 			font-weight: calc(var(--font-weight) + var(--bold-modifier));
 		}
 	}
-	tr.stm:last-of-type:not(.off) {
+	tr.stm-row:last-of-type:not(.off) {
 		background-color: var(--background-secondary);
 	}
 }
 
-.stm-copy-success {
+.notice > .notice-message > svg + .stm-notice {
 	position: relative;
 	top: -3px;
 	margin-left: 8px;

Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,10 @@`
`1`	`1`	`div.markdown-rendered table.table-editor {`
`2`		`- tr.stm > td {`
	`2`	`+ tr > td.stm-cell {`
`3`	`3`	`&.stm-value, & > .stm-value {`
`4`	`4`	`padding: 4px 12px;`
`5`	`5`	`font-weight: calc(var(--font-weight) + var(--bold-modifier));`
`6`	`6`
`7`		`- & + .table-cell-wrapper {`
	`7`	`+ & + .table-cell-wrapper {`
`8`	`8`	`display: none;`
`9`	`9`	`}`
`10`	`10`	`}`
`@@ -13,24 +13,33 @@ div.markdown-rendered table.table-editor {`
`13`	`13`	`display: none;`
`14`	`14`	`}`
`15`	`15`	`}`
	`16`	`+ &:not(:focus-within) {`
	`17`	`+ & > .stm-value ~ .table-cell-wrapper {`
	`18`	`+ padding: 0;`
	`19`	`+ opacity: 0;`
	`20`	`+ max-width: 0;`
	`21`	`+ max-height: 0;`
	`22`	`+ overflow: hidden;`
	`23`	`+ }`
	`24`	`+ }`
`16`	`25`	`}`
`17`		`- tr.stm:last-of-type:not(.off) {`
	`26`	`+ tr.stm-row:last-of-type:not(.off) {`
`18`	`27`	`background-color: var(--background-secondary);`
`19`	`28`	`}`
`20`	`29`	`}`
`21`	`30`
`22`	`31`	`div.el-table > table {`
`23`		`- tr.stm > td {`
	`32`	`+ tr.stm-row > td.stm-cell {`
`24`	`33`	`&.stm-value, & > .stm-value {`
`25`	`34`	`font-weight: calc(var(--font-weight) + var(--bold-modifier));`
`26`	`35`	`}`
`27`	`36`	`}`
`28`		`- tr.stm:last-of-type:not(.off) {`
	`37`	`+ tr.stm-row:last-of-type:not(.off) {`
`29`	`38`	`background-color: var(--background-secondary);`
`30`	`39`	`}`
`31`	`40`	`}`
`32`	`41`
`33`		`-.stm-copy-success {`
	`42`	`+.notice > .notice-message > svg + .stm-notice {`
`34`	`43`	`position: relative;`
`35`	`44`	`top: -3px;`
`36`	`45`	`margin-left: 8px;`