Add note about Reddit comment handling, fix deletion events not being…

… registered in the options page

README.md

@@ -1,6 +1,5 @@
 ![Chrome ChatGPT Helper Logo](./images/icon-128.png)
 
-
 # Chrome ChatGPT Helper
 
 Tired of copy pasting text into ChatGPT? Tired of switching tabs? Do you wish you could just run a prompt within Chrome with just a click? Well now you can!
@@ -27,7 +26,11 @@ Click **Add Prompt** to add a new prompt. Make sure that your prompt names are u
 
 When a prompt is run via the right-click menu, your text selection will be replaced by the prompt result, and your original selection will be copied to the clipboard, so you can press <kbd>Ctrl</kbd> + <kbd>V</kbd> to get it back. You can use _$selection_ inside your prompts to insert the selected text into the prompt, please see the built-in prompts for examples.
 
-Keep in mind that **changes won't be saved until the Save button is clicked!**
+> [!NOTE]  
+> When using this extension with Reddit, please switch to **Markdown Mode** first, as Reddit's "fancy" editor has issues with handling paste events.
+
+> [!IMPORTANT]  
+> Keep in mind that **changes won't be saved until the Save button is clicked!**
 
 ## Disclaimer
 

css/options.css

@@ -51,10 +51,23 @@ h1 {
 	font-size: 2.5em;
 }
 
-legend {
+p {
 	font-size: 1.2em;
 }
 
+input,
+textarea {
+	font-size: 1.1em;
+}
+
+legend {
+	font-size: 1.5em;
+}
+
+label {
+	font-size: 1.3em;
+}
+
 #base {
 	margin-right: auto;
 	margin-left: auto;
@@ -102,5 +115,5 @@ textarea {
 }
 
 .secondary {
-    color: var(--secondary-color);
-}
+	color: var(--secondary-color);
+}

html/options.html

@@ -106,6 +106,11 @@ <h1>Chrome ChatGPT Helper</h1>
 									<mark><i>$selection</i></mark> inside your prompts to insert
 									the selected text into the prompt.
 								</p>
+								<p>
+									When using this extension with Reddit, please switch to
+									<strong>Markdown Mode</strong> first, as Reddit's "fancy"
+									editor has issues with handling paste events.
+								</p>
 								<p>
 									Keep in mind that
 									<strong>changes won't be saved</strong> until the

manifest.json

@@ -1,7 +1,7 @@
 {
 	"manifest_version": 3,
 	"name": "Chrome ChatGPT Helper",
-	"version": "1.4",
+	"version": "1.5",
 	"description": "Create ChatGPT prompts, and execute them via the right click menu.",
 	"permissions": ["contextMenus", "storage"],
 	"icons": {

scripts/content.js

@@ -6,10 +6,10 @@ chrome.runtime.onMessage.addListener(function (request, _, _) {
 		return;
 	}
 
-	replaceSelectedText(request.replacement, request.selection);
+	replaceSelectedText(request.replacement);
 });
 
-function replaceSelectedText(toReplace, originalSelection) {
+function replaceSelectedText(toReplace) {
 	const activeElement = document.activeElement;
 
 	if (activeElement.value) {
@@ -28,22 +28,15 @@ function replaceSelectedText(toReplace, originalSelection) {
 			activeElement.value.slice(0, activeElement.selectionStart) +
 			toReplace +
 			activeElement.value.slice(activeElement.selectionEnd);
-	} else if (
-		activeElement.textContent !== undefined ||
-		activeElement.textContent !== null
-	) {
-		// Custom textbox, like Draft.js. Even though it is deprecated, we need to use execCommand here- setting the innerText manually just causes React to override the value.
-		const val = activeElement.textContent;
+	} else {
+		// A custom text input field, probably something like Draft.js.
+		// While `execCommand` is deprecated, as of writing (2024) there is still no replacement,
+		// and since there are so many apps / services that depend on it, it is unlikely to be removed anytime soon.
+		// One exception to this is Reddit; since Reddit is a horrible website that refuses to follow established standards,
+		// `execCommand` breaks backspace & deletion in their "fancy" text editor. Literally nothing works, not `execComand`,
+		// not `dispatchEvent`, nothing. The only thing that can be done is do switch to the Markdown editor, paste, and then
+		// go back.
 
-		const selection = originalSelection.trim();
-		if (selection) {
-			navigator.clipboard.writeText(selection);
-			// There is a potential problem here; since we don't have the selection indices (like we do for regular input fields), we have to do a naive string replace.
-			// This means that if the selected text is duplicated in the textContent, only the first occurance will be replaced, as we don't know which one is selected.
-			const newText = val.replace(selection, toReplace);
-			document.execCommand("insertText", false, newText);
-		} else {
-			document.execCommand("insertText", false, toReplace);
-		}
+		document.execCommand("insertText", false, toReplace);
 	}
 }

scripts/options.js

@@ -69,7 +69,6 @@ function getPromptsFromDocument() {
 
 	for (let index = 0; index < promptElems.length; index++) {
 		const element = promptElems[index];
-		console.log(element);
 		const promptName = element.querySelector("input").value;
 		const promptBody = element.querySelector("textarea").value;
 		results.push({ name: promptName, body: promptBody });
@@ -89,19 +88,23 @@ function restoreOptions() {
 				}
 				addPromptUI(prompt.name, prompt.body);
 			});
-			const deletePromptButtons = document.querySelectorAll(".deletePrompt");
-
-			deletePromptButtons.forEach((button) => {
-				button.addEventListener("click", deletePromptUI);
-			});
-
+
+			setDeleteEvents();
 			keyInput.value = items.oaiKey;
 			modelSelect.value = items.model;
 			checkKeyValidity();
 		}
 	);
 }
 
+function setDeleteEvents() {
+	const deletePromptButtons = document.querySelectorAll(".deletePrompt");
+
+	deletePromptButtons.forEach((button) => {
+		button.addEventListener("click", deletePromptUI);
+	});
+}
+
 function checkKeyValidity() {
 	const key = keyInput.value;
 	if (!key) {
@@ -163,6 +166,7 @@ function getPromptUI(name, body) {
 
 function addEmptyPromptUI() {
 	addPromptUI("", "");
+	setDeleteEvents();
 }
 
 function addPromptUI(name, body) {

scripts/service-worker.js

@@ -113,6 +113,10 @@ async function init() {
 					name: "Rewrite Casually",
 					body: "Please rewrite the following in a casual manner: $selection",
 				},
+				{
+					name: "Fix typos",
+					body: "Please rewrite the following with all the typos fixed: $selection",
+				},
 				{
 					name: "Cat Joke",
 					body: "Please give me a funny joke about cats.",