Update manifest.json

Added checking for hc- id

README.md

@@ -8,9 +8,15 @@ This plugin allows you to quickly add HTML checkboxes to your notes and makes th
 
 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. 
+
+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.
 

main.ts

@@ -1,11 +1,22 @@
-import { Editor, Plugin, TFile, Menu, WorkspaceLeaf } from 'obsidian';
+import { Editor, Plugin, TFile, Menu, WorkspaceLeaf, PluginSettingTab, App, Setting} from 'obsidian';
 
 
+interface CMSettings {
+	fixOnPaste: boolean;
+}
+
+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,6 +29,14 @@ export default class HTMLCheckboxPlugin extends Plugin {
 					this.addCheckbox(editor)
 				});
 			});
+			menu.addItem((item) => {
+				item
+				  .setTitle("Fix HTML checkboxes")
+				  .setIcon("wrench")
+				  .onClick(async () => {
+					this.fixCheckboxIds(editor)
+				});
+			});
 		}));
 
 		this.addCommand({
@@ -28,6 +47,14 @@ export default class HTMLCheckboxPlugin extends Plugin {
 			}
 		});
 
+		this.addCommand({
+			id: "fix-checkbox-ids",
+			name: "Fix HTML checkboxes",
+			editorCallback: async (editor, view) => {
+				this.fixCheckboxIds(editor)
+			}
+		});
+
 
 
 
@@ -39,7 +66,7 @@ export default class HTMLCheckboxPlugin extends Plugin {
 
 			if (target.localName == "input"  && 
 				(target as HTMLInputElement).type == "checkbox" &&
-				target.id
+				target.id && target.id.startsWith("hc-")
 			) {
 				
 				e.preventDefault()
@@ -54,44 +81,46 @@ export default class HTMLCheckboxPlugin extends Plugin {
 				} 
 
 				if (file instanceof TFile) {
-					let content = await this.app.vault.cachedRead(file)
 
-					let id = target.id
-					let checkboxRE = new RegExp("<input[^>]*?id=\"" + id + "\"[^>]*?>")
+					await this.app.vault.process(file, (content) => {
 
-					if (file.extension == "canvas") {
-						checkboxRE = new RegExp("<input[^>]*?id=\\\\\"" + id + "\\\\\"[^>]*?>")
-					}
+						let id = target.id
+						let checkboxRE = new RegExp("<input[^>]*?id=\"" + id + "\"[^>]*?>")
 
-					let checkboxMatch = content.match(checkboxRE)
-
-					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], "")
-							}
+						if (file && file.extension == "canvas") {
+							checkboxRE = new RegExp("<input[^>]*?id=\\\\\"" + id + "\\\\\"[^>]*?>")
 						}
-						
-						let newContent = content.replace(checkboxString, newCheckboxString)
-						await this.app.vault.modify(file, newContent)
 
-						let inCanvas = target.closest(".canvas-node-content")
+						let checkboxMatch = content.match(checkboxRE)
+						let newContent = content
 
-						if (file.extension != "canvas" && inCanvas) {
-							let leaf = this.app.workspace.getMostRecentLeaf()
-							if (leaf instanceof WorkspaceLeaf) {
-								//@ts-ignore
-								await leaf.rebuildView()
+						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) {
+						let leaf = this.app.workspace.getMostRecentLeaf()
+						if (leaf instanceof WorkspaceLeaf) {
+							//@ts-ignore
+							await leaf.rebuildView()
 						}
 					}
 				}	
@@ -104,12 +133,15 @@ export default class HTMLCheckboxPlugin extends Plugin {
 
 		/* Add menu for alternative checkboxes */
 
-		this.registerDomEvent(window, "mousedown", (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();
@@ -159,53 +191,161 @@ export default class HTMLCheckboxPlugin extends Plugin {
 					);
 
 					menu.showAtMouseEvent(e as MouseEvent);
-					console.log(menu)
 					//@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) {
-		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
-			}
-		}
-		
+	async addCheckbox(editor: Editor) {		
 		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()
-
+		
 		/* Check if checkbox is inside embedded file */
 		let embedWrapper = target.closest(".internal-embed")
 
@@ -215,63 +355,93 @@ export default class HTMLCheckboxPlugin extends Plugin {
 		}
 
 		if (file instanceof TFile) {
-			let content = await this.app.vault.cachedRead(file)
-			let id = target.id
-			let checkboxRE = new RegExp("<input[^>]*?id=\"" + id + "\"[^>]*?>")
 
-			if (file.extension == "canvas") {
-				checkboxRE = new RegExp("<input[^>]*?id=\\\\\"" + id + "\\\\\"[^>]*?>")
-			}
+			await this.app.vault.process(file, (content) => {
+				let id = target.id
+				let 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.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 (file && file.extension == "canvas") {
+					checkboxRE = new RegExp("<input[^>]*?id=\\\\\"" + id + "\\\\\"[^>]*?>")
 				}
 
-				if (!dataTaskMatch && (target as HTMLInputElement).checked) {
-					newCheckboxString = newCheckboxString.replace("checked", dataTaskString + " checked")
-				}
-		
-				if (!dataTaskMatch && !(target as HTMLInputElement).checked) {
-					newCheckboxString = newCheckboxString.replace(">", " " + dataTaskString + " checked>")
-				}
-			}
+				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
+			})
 
-			let newContent = content.replace(checkboxString, newCheckboxString)
-			await this.app.vault.modify(file, newContent)
 		}
 	}
 }
 
 
+class HCSettingTab extends PluginSettingTab {
+	plugin: HTMLCheckboxPlugin;
+
+	constructor(app: App, plugin: HTMLCheckboxPlugin) {
+		super(app, plugin);
+		this.plugin = plugin;
+	}
+
+	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();
+					})
+		)
+	}
+}
+
+
 
 
 
 
-

manifest.json

@@ -1,8 +1,8 @@
 {
 	"id": "html-checkboxes",
 	"name": "HTML checkboxes",
-	"version": "1.0.3",
-	"minAppVersion": "0.15.0",
+	"version": "1.1.2",
+	"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",

tsconfig.json

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