Update manifest.json

Added checking for hc- id

LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Anastasia Fedotova
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -2,14 +2,22 @@
 
 This plugin allows you to quickly add HTML checkboxes to your notes and makes them clickable. 
 
+![image](html-check.png)
+
 ## Why use HTML checkboxes?
 
 The main reason you may want to use HTML checkboxes instead of Markdown checkboxes is that you can put them into Markdown tables. You can also place them anywhere in the note, for example add several checkboxes in the row. Also all of your Markdown stays valid, and even if you turn the plugin off, all created checkboxes would still be visible (just not clickable).
 
-## Details
+## Usage
 
-To create checkbox you should put cursor to the place you want and call the command "Add HTML checkbox". Alternatively you can select the option in the editor menu. Be aware that every created checkbox has a unic id, it is nesessary for the checkboxes to be clickable. Do not remove the id and also do not copy-paste checkboxes inside the same file, because if there are several checkboxes with the same id, they will not work. It is recommended to never edit checkboxes manually. Also checkboxes are NOT added automatically on the next line when you hit "enter".
+To create checkbox you should put cursor to the place you want and call the command "Add HTML checkbox". Alternatively you can select the option in the editor menu. Be aware that every created checkbox has a unique id, it is nesessary for the checkboxes to be clickable. Do not remove the id and make sure you don't have several checkboxes with the same id within the same file, otherwise they will not work. 
 
-When right-clicking on the checkbox you will see the menu allowing you to select between a few of alternate checkboxes (you will need the theme or special css to make alternate checkboxes look different). Note that not all of possble alternate checkboxes are supported, and I am not planning to add more. When the alternate checkboxes menu appears inside the table it will hide the default table right-click menu. I am aware that it may cause some blinking, but do not know how to fix it now. If you want to see table right-click menu, you should click on some other place in the cell.
+If you want to copy and paste checkboxes within the same file, it is important to change IDs, so they are note duplicate existing ones. This can be done in two ways:
+1. Enable option "Automatically fix duplicated IDs on pasting" in plugin settings. In this case every time you paste checkboxes, plugin would scan the file to find and fix any repeating IDs. Be aware that pasting may become slow, if you pasting many checkboxes at once or if there are already many checkboxes in the file.
+2. You can fix all checkboxes that are already in the file by chosing command "Fix HTML checkboxes" from command pallete or from editor menu.
+
+It is recommended to never edit checkboxes manually. Also checkboxes are NOT added automatically on the next line when you hit "enter".
+
+When right-clicking on the checkbox you will see the menu allowing you to select between a few of alternate checkboxes (you will need the theme or special css to make alternate checkboxes look different). Note that not all of possble alternate checkboxes are supported, and I am not planning to add more. When the alternate checkboxes menu appears inside the table it will hide the default table right-click menu. If you want to see table right-click menu, you should click on some other place in the cell.
 
 Plugin works in embedded views as well, but clicking on checkboxes may cause some blinking in canvas.

main.ts

@@ -1,11 +1,22 @@
-import { Editor, Plugin, TFile, Menu } from 'obsidian';
+import { Editor, Plugin, TFile, Menu, WorkspaceLeaf, PluginSettingTab, App, Setting} from 'obsidian';
 
 
+interface CMSettings {
+	fixOnPaste: boolean;
+}
 
-export default class MyPlugin extends Plugin {
+const DEFAULT_SETTINGS: CMSettings = {
+	fixOnPaste: true,
+};
+
+
+export default class HTMLCheckboxPlugin extends Plugin {
+	settings: CMSettings;
 
 
 	async onload() {
+		await this.loadSettings();
+		this.addSettingTab(new HCSettingTab(this.app, this));
 
 		/* Add menu item to create checkbox */
 
@@ -18,10 +29,16 @@ export default class MyPlugin extends Plugin {
 					this.addCheckbox(editor)
 				});
 			});
+			menu.addItem((item) => {
+				item
+				  .setTitle("Fix HTML checkboxes")
+				  .setIcon("wrench")
+				  .onClick(async () => {
+					this.fixCheckboxIds(editor)
+				});
+			});
 		}));
 
-
-
 		this.addCommand({
 			id: "add-html-checkbox",
 			name: "Add HTML checkbox",
@@ -30,6 +47,14 @@ export default class MyPlugin extends Plugin {
 			}
 		});
 
+		this.addCommand({
+			id: "fix-checkbox-ids",
+			name: "Fix HTML checkboxes",
+			editorCallback: async (editor, view) => {
+				this.fixCheckboxIds(editor)
+			}
+		});
+
 
 
 
@@ -39,63 +64,66 @@ export default class MyPlugin extends Plugin {
 		this.registerDomEvent(window, 'click', async (e: MouseEvent) => {
 			let target = e.target as HTMLElement
 
-			
-
 			if (target.localName == "input"  && 
 				(target as HTMLInputElement).type == "checkbox" &&
-				target.id
+				target.id && target.id.startsWith("hc-")
 			) {
 				
 				e.preventDefault()
-				let file = this.app.workspace.getActiveFile() as TFile
+				let file = this.app.workspace.getActiveFile()
 
 				/* Check if checkbox is inside embedded file */
 				let embedWrapper = target.closest(".internal-embed")
 
 				if (embedWrapper) {
 					let embedSrc = embedWrapper.getAttribute("src") || ""
-					file = this.app.metadataCache.getFirstLinkpathDest(embedSrc, "") as TFile
+					file = this.app.metadataCache.getFirstLinkpathDest(embedSrc, "")
 				} 
 
-				let content = await this.app.vault.cachedRead(file)
+				if (file instanceof TFile) {
 
-				let id = target.id
+					await this.app.vault.process(file, (content) => {
-				let checkboxRE = new RegExp("<input[^>]*?id=\"" + id + "\"[^>]*?>")
 
-				if (file.extension == "canvas") {
+						let id = target.id
-					checkboxRE = new RegExp("<input[^>]*?id=\\\\\"" + id + "\\\\\"[^>]*?>")
+						let checkboxRE = new RegExp("<input[^>]*?id=\"" + id + "\"[^>]*?>")
-				}
 
-				let checkboxMatch = content.match(checkboxRE)
+						if (file && file.extension == "canvas") {
-
+							checkboxRE = new RegExp("<input[^>]*?id=\\\\\"" + id + "\\\\\"[^>]*?>")
-				if (checkboxMatch) {
-					let checkboxString = checkboxMatch[0]
-					let dataTaskMatch = checkboxString.match(/data-task="."/)
-
-					let newCheckboxString = checkboxString
-
-					if ((target as HTMLInputElement).checked) {
-						newCheckboxString = newCheckboxString.replace(">", " checked>") 
-					} else {
-						newCheckboxString = newCheckboxString.replace(" checked>", ">").replace(" >", ">")
-
-						if (dataTaskMatch) {
-							newCheckboxString = newCheckboxString.replace(dataTaskMatch[0], "")
 						}
-					}
+
-					
+						let checkboxMatch = content.match(checkboxRE)
-					let newContent = content.replace(checkboxString, newCheckboxString)
+						let newContent = content
-					await this.app.vault.modify(file, newContent)
+
+						if (checkboxMatch) {
+							let checkboxString = checkboxMatch[0]
+							let dataTaskMatch = checkboxString.match(/data-task="."/)
+							let newCheckboxString = checkboxString
+
+							if (!(target as HTMLInputElement).checked) {
+								newCheckboxString = newCheckboxString.replace(">", " checked>") 
+								
+							} else {
+								newCheckboxString = newCheckboxString.replace(" checked>", ">").replace(" >", ">")
+								if (dataTaskMatch) {
+									newCheckboxString = newCheckboxString.replace(dataTaskMatch[0], "")
+								}
+							}
+							newContent = content.replace(checkboxString, newCheckboxString)							
+						}
+						return newContent
+					})
 
 					let inCanvas = target.closest(".canvas-node-content")
 
-					if (file.extension != "canvas" && inCanvas) {
-						//@ts-ignore
-						await this.app.workspace.getMostRecentLeaf().rebuildView()
-					}
-
 					
-				}
+					if (file.extension != "canvas" && inCanvas) {
+						let leaf = this.app.workspace.getMostRecentLeaf()
+						if (leaf instanceof WorkspaceLeaf) {
+							//@ts-ignore
+							await leaf.rebuildView()
+						}
+					}
+				}	
 			}
 		});
 
@@ -105,12 +133,15 @@ export default class MyPlugin extends Plugin {
 
 		/* Add menu for alternative checkboxes */
 
-		this.registerDomEvent(window, "mouseup", (e: MouseEvent) => {
+
+		this.registerDomEvent(window, "contextmenu", (e: MouseEvent) => {
+
+			
 			if (e.button == 2) {
 				let target = e.target as HTMLElement
 				if (target.localName == "input"  && 
 					(target as HTMLInputElement).type == "checkbox" && 
-					target.id
+					target.id && target.id.startsWith("hc-")
 				) {
 
 					const menu = new Menu();
@@ -162,125 +193,251 @@ export default class MyPlugin extends Plugin {
 					menu.showAtMouseEvent(e as MouseEvent);
 					//@ts-ignore
 					menu.dom.classList.add("checkbox-menu");
-
 				}
 			}
 		})
+
+
+
+
+        /* Fix checkboxes on paste */
+
+		/* No typescript error if we use window.document instead of window, but then listener don't work in canvas for some reason. Event bubbles up to the window anyway. */
+		//@ts-ignore
+		this.registerDomEvent(window, "paste", (e: ClipboardEvent) => {
+			if (this.settings.fixOnPaste) {
+				let pasteContent = e.clipboardData?.getData("text") || ""
+				let re = /(id="hc-)([^"]+)(\")/g;
+				let matchPaste = pasteContent?.match(re)
+
+				if (matchPaste) {
+					let inCanvas
+					if (e.target) {
+						let target = e.target as HTMLElement
+						inCanvas = target.closest(".mod-inside-iframe")
+					}
+					if (inCanvas) {
+						e.preventDefault()
+					}
+					let editor = this.app.workspace.activeEditor?.editor
+					if (editor) {
+						this.fixCheckboxIds(editor, inCanvas, pasteContent)
+					}
+				}
+			}
+				
+		})
 	}
 
 	onunload() {}
 
 
+	async loadSettings() {
+		this.settings = Object.assign(
+			{},
+			DEFAULT_SETTINGS,
+			await this.loadData()
+		);
+	}
 
 
+	async saveSettings() {
+		await this.saveData(this.settings);
+	}
 
 
-
+	async addCheckbox(editor: Editor) {		
-
-
-
-	async addCheckbox(editor: Editor) {
-		const generateId: any = (content: string) => {
-			let id = "hc-" + (Math.floor(Math.random() * 999) + 1);
-			let match = content.match("id=\"" + id + "\"")
-			if (match) {
-				return generateId(content)
-			} else {
-				return id
-			}
-		}
-		
 		let lastLine = editor.lastLine()
 		let lastLineLength = editor.getLine(lastLine).length
 		let editorContent = editor.getRange({line:0, ch: 0}, {line:lastLine, ch: lastLineLength})
-		let id = generateId(editorContent)
+		let id = this.generateNewId(editorContent)
 		let checkbox = '<input id="' + id + '" type="checkbox">'
 		editor.replaceSelection(checkbox)
 	}
 
 
+	generateNewId(content: string): any {
+		let id = "hc-" + (Math.floor(Math.random() * 9000) + 1000);
+		let match = content.match("id=\"" + id + "\"")
+		if (match) {
+			return this.generateNewId(content)
+		} else {
+			return id
+		}
+	}
 
 
+	generateFixedId(content: string, id: string, tryCount: number): any {
+		let re = new RegExp(id, "g")
+		let match = content.match(re)
+		let file = this.app.workspace.getActiveFile()
 
+		if (match && match.length == 1 && file?.extension != "canvas") {
+			return id
+		} else {
+			let newId = 'id="hc-' + (Math.floor(Math.random() * 9000) + 1000) + '"';
+			match = content.match(newId)
+			if (match) {
+				return this.generateFixedId(content, id, tryCount + 1)
+			} else {
+				return newId
+			}
+		}
+	}
+
+
+	async fixCheckboxIds(editor: Editor, inCanvas?: Element | null | undefined, pasteContent?: string) {
+		let lastLine = editor.lastLine()
+		let lastLineLength = editor.getLine(lastLine).length
+		let startCursor = editor.getCursor("from")
+		let endCursor = editor.getCursor("to")
+		let cursor = editor.getCursor()
+		editor.setSelection({line:0, ch: 0}, {line:lastLine, ch: lastLineLength})
+		let editorContent = editor.getSelection()
+		let re = /(id="hc-)([^"]+)(\")/g;
+		
+
+		/* In regular notes event triggers after text already pasted, but in canvas - before text pasted, so we need to process content differently. */
+		/* In the paste listener we prevented paste with preventDefault(), so we need to add pasted text to content manually. */
+		if (inCanvas && pasteContent) {
+			let startContent = editor.getRange({line:0, ch: 0}, startCursor)
+			let endContent = editor.getRange(endCursor, {line:lastLine, ch: lastLineLength})
+			editorContent = startContent + pasteContent + endContent
+			cursor.ch = cursor.ch + pasteContent.length
+		}
+
+		let matchContent
+
+		let file = this.app.workspace.getActiveFile()
+		
+		if (file && file.extension == "canvas") {
+			let fileContent = await this.app.vault.cachedRead(file)
+			re = /(id=\\"hc-)([^"]+)(\\")/g;
+			matchContent = fileContent?.match(re)
+		} else {
+			matchContent = editorContent?.match(re)
+		}
+
+		if (matchContent) {
+			for (let id of matchContent) {
+				id = id.replaceAll('\\\"', '"')
+				let newId = this.generateFixedId(editorContent, id, 0)
+				if (id != newId) {
+					editorContent = editorContent.replace(id, newId)
+				}
+			}
+		}
+
+		editor.setSelection({line:0, ch: 0}, {line:lastLine, ch: lastLineLength})
+		editor.replaceSelection(editorContent)
+
+		lastLine = editor.lastLine()
+		lastLineLength = editor.getLine(lastLine).length
+		
+		if (cursor.line >= lastLine && cursor.ch > lastLineLength) {
+			editor.setCursor({line:lastLine, ch: lastLineLength})
+		} else {
+			editor.setCursor(cursor)
+		}
+		editor.focus()	
+	}
 
 
 	async setStatus(status: string, target: HTMLElement) {
-		let file = this.app.workspace.getActiveFile() as TFile
+		let file = this.app.workspace.getActiveFile()
-
+		
 		/* Check if checkbox is inside embedded file */
 		let embedWrapper = target.closest(".internal-embed")
 
 		if (embedWrapper) {
 			let embedSrc = embedWrapper.getAttribute("src") || ""
-			file = this.app.metadataCache.getFirstLinkpathDest(embedSrc, "") as TFile
+			file = this.app.metadataCache.getFirstLinkpathDest(embedSrc, "")
 		}
 
-		let content = await this.app.vault.cachedRead(file)
+		if (file instanceof TFile) {
 
-		let id = target.id
+			await this.app.vault.process(file, (content) => {
-		let checkboxRE = new RegExp("<input[^>]*?id=\"" + id + "\"[^>]*?>")
+				let id = target.id
+				let checkboxRE = new RegExp("<input[^>]*?id=\"" + id + "\"[^>]*?>")
+
+				if (file && file.extension == "canvas") {
+					checkboxRE = new RegExp("<input[^>]*?id=\\\\\"" + id + "\\\\\"[^>]*?>")
+				}
+
+				let checkboxString = content.match(checkboxRE)![0]
+				let newCheckboxString = checkboxString
+				let statusRe = new RegExp("data-task=\"" + status + "\"")
+				let dataTaskMatch = checkboxString.match(/data-task="."/)
+
+				if (file && file.extension == "canvas") {
+					dataTaskMatch = checkboxString.match(/data-task=\\".\\"/)
+				}
+
+				let dataTaskMatchFirst = ""
+				if (dataTaskMatch) {
+					dataTaskMatchFirst = dataTaskMatch[0]
+				}
+
+				let statusMatch = checkboxString.match(statusRe)
+				let dataTaskString = "data-task=\"" + status + "\""
+
+				if (file && file.extension == "canvas") {
+					dataTaskString = 'data-task=\\\"' + status + '\\\"'
+				}
+
+				if (status == " ") {
+					newCheckboxString = newCheckboxString
+					.replace(dataTaskMatchFirst, "")
+					.replace(" checked>", ">").replace(" >", ">")
+				} else {
+
+					if (dataTaskMatch && !statusMatch) {
+						newCheckboxString = newCheckboxString.replace(dataTaskMatchFirst, dataTaskString)
+					}
+
+					if (!dataTaskMatch && (target as HTMLInputElement).checked) {
+						newCheckboxString = newCheckboxString.replace("checked", dataTaskString + " checked")
+					}
+			
+					if (!dataTaskMatch && !(target as HTMLInputElement).checked) {
+						newCheckboxString = newCheckboxString.replace(">", " " + dataTaskString + " checked>")
+					}
+				}
+
+				let newContent = content.replace(checkboxString, newCheckboxString)
+				return newContent
+			})
 
-		if (file.extension == "canvas") {
-			checkboxRE = new RegExp("<input[^>]*?id=\\\\\"" + id + "\\\\\"[^>]*?>")
 		}
+	}
+}
 
 
-		let checkboxString = content.match(checkboxRE)![0]
+class HCSettingTab extends PluginSettingTab {
-		let newCheckboxString = checkboxString
+	plugin: HTMLCheckboxPlugin;
-		let statusRe = new RegExp("data-task=\"" + status + "\"")
 
-		let dataTaskMatch = checkboxString.match(/data-task="."/)
+	constructor(app: App, plugin: HTMLCheckboxPlugin) {
-
+		super(app, plugin);
-
+		this.plugin = plugin;
-		if (file.extension == "canvas") {
-			dataTaskMatch = checkboxString.match(/data-task=\\".\\"/)
-		}
-
-
-
-
-		let dataTaskMatchFirst = ""
-		if (dataTaskMatch) {
-			dataTaskMatchFirst = dataTaskMatch[0]
-		}
-
-		let statusMatch = checkboxString.match(statusRe)
-
-
-		let dataTaskString = "data-task=\"" + status + "\""
-
-		if (file.extension == "canvas") {
-			dataTaskString = 'data-task=\\\"' + status + '\\\"'
-		}
-
-		if (status == " ") {
-			newCheckboxString = newCheckboxString
-			.replace(dataTaskMatchFirst, "")
-			.replace(" checked>", ">").replace(" >", ">")
-		} else {
-
-			if (dataTaskMatch && !statusMatch) {
-				newCheckboxString = newCheckboxString.replace(dataTaskMatchFirst, dataTaskString)
-			}
-
-			if (!dataTaskMatch && (target as HTMLInputElement).checked) {
-				newCheckboxString = newCheckboxString.replace("checked", dataTaskString + " checked")
-			}
-	
-			if (!dataTaskMatch && !(target as HTMLInputElement).checked) {
-				newCheckboxString = newCheckboxString.replace(">", " " + dataTaskString + " checked>")
-			}
-		}
-
-		let newContent = content.replace(checkboxString, newCheckboxString)
-		await this.app.vault.modify(file, newContent)
 	}
 
+	display(): void {
+		const { containerEl } = this;
 
+		containerEl.empty();
 
-	
+		new Setting(containerEl)
-
+			.setName("Automatically fix duplicated IDs on pasting")
-
+			.setDesc("If you copy and paste any HTML checkboxes, plugin will scan the file and fix any duplicated IDs. Be aware that pasting too many checkboxes at onse may be slow if this option is enabled.")
+			.addToggle((toggle) => 
+				toggle
+					.setValue(this.plugin.settings.fixOnPaste)
+					.onChange(async(value) => {
+						this.plugin.settings.fixOnPaste = value;
+						await this.plugin.saveSettings();
+					})
+		)
+	}
 }
 
 
@@ -288,4 +445,3 @@ export default class MyPlugin extends Plugin {
 
 
 
-

manifest.json

@@ -1,8 +1,8 @@
 {
 	"id": "html-checkboxes",
 	"name": "HTML checkboxes",
-	"version": "1.0.0",
+	"version": "1.1.2",
-	"minAppVersion": "0.15.0",
+	"minAppVersion": "1.1.0",
 	"description": "Allows to quickly add HTML checkboxes to your notes and makes them clickable.",
 	"author": "Anareaty",
 	"authorUrl": "https://github.com/anareaty",

styles.css

@@ -2,3 +2,14 @@
 body:has(.checkbox-menu) .menu:has([data-section='table']) {
     display: none;
 }
+
+.cm-html-embed > input[type="checkbox"] {
+    top: -0.1em;
+    vertical-align: middle;
+}
+
+.markdown-preview-sizer input[type="checkbox"][id],
+.table-cell-wrapper input[type="checkbox"][id] {
+    position: relative;
+    top: 0.2em;
+}

tsconfig.json

@@ -15,7 +15,9 @@
       "DOM",
       "ES5",
       "ES6",
-      "ES7"
+      "ES7",
+      "ES2021",
+      "ES2022"
     ]
   },
   "include": [