Fix replacing in content editors

assets/popup.html

@@ -163,7 +163,7 @@
 
 </div>
 
-<div class="text-center">Version 1.6.7</div>
+<div class="text-center">Version 1.6.8</div>
 </body>
 
 </html>

manifest.json

@@ -32,7 +32,7 @@
       ]
     }
   ],
-  "description": "Search for text in on a webpage and replace it with different text.",
+  "description": "Search for text on a webpage and replace it with different text.",
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCr3R0tWRUKUERxg/cghorcvKPDxba+0Ko/3Metk/0XsUTPZcU1xBQZCY441i3lK2ZkH/Td3rs/l8HvbVnkN37NiFm0QQOIJGJi7vp1GdQsrr5uZA/611TsQAWpxxHzR9N4km5wu8e/Xmw2ZG5WKfWVPtUhozEDHTk5CVgeTUOMAQIDAQAB",
   "manifest_version": 3,
   "name": "Search and Replace",
@@ -46,6 +46,6 @@
     "https://*/*"
   ],
   "update_url": "http://clients2.google.com/service/update2/crx",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "options_page": "assets/options.html"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "search_and_replace",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "resolutions": {
     "author": "Chris Taylor <[email protected]>"
   },

src/popup.ts

@@ -51,6 +51,8 @@ window.addEventListener('DOMContentLoaded', function () {
         if (recentSearch) {
             restoreSearchReplaceInstance(recentSearch)
         }
+        // Trigger a search term count if there is an existing search term
+        tabQuery('store', recentSearch, history, tabQueryCallback).then((r) => console.log(r))
     })
     ;(<HTMLButtonElement>document.querySelector('#historyHeader')).addEventListener('click', historyHeaderClickHandler)
 

src/searchreplace.ts

@@ -331,8 +331,12 @@ async function cmsEditor(
         } else {
             const editor = <HTMLElement>document.querySelector(richTextEditor.editor.value)
             const initialText = editor.textContent || ''
+            console.log('initial Text', initialText)
+            console.log('inner Text', editor.innerText)
+            console.log('inner HTML', editor.innerHTML)
             const newText = initialText.replace(searchPattern, replaceTerm)
-            await replaceInContentEditableElement(window, editor, newText)
+            console.log('newText', newText)
+            await replaceInContentEditableElement(window, editor, initialText, newText)
             replaced = initialText !== newText
         }
     } catch (err) {
@@ -347,55 +351,24 @@ async function cmsEditor(
 async function replaceInContentEditableElement(
     window: Window,
     element: HTMLElement,
+    initialText: string,
     replacementText: string
 ): Promise<boolean> {
     return new Promise((resolve) => {
-        const dataTransfer = new DataTransfer()
-
-        // this may be 'text/html' if it's required
-        dataTransfer.setData('text/plain', `${replacementText}`)
-
         // select the content editable area
         element.dispatchEvent(new FocusEvent('focus', { bubbles: true }))
+        console.log('element.textContent', element.textContent)
+        if (element.innerText === element.innerHTML) {
+            console.log('set textContent in element', element)
+            element.textContent = replacementText
+        } else {
+            console.log('replacing', initialText, 'in', element.innerHTML, 'with', replacementText)
+            element.innerHTML = element.innerHTML.replace(initialText, replacementText)
+        }
 
-        // select all the text
-        selectElementContents(window, element)
-
-        // delete any text in the content editable area
-        element.dispatchEvent(
-            new KeyboardEvent('keydown', {
-                bubbles: true,
-                cancelable: true,
-                keyCode: 46,
-                shiftKey: true,
-            })
-        )
-
-        // wait a short time for the delete to happen
-        setTimeout(() => {
-            // paste the replacement text
-            element.dispatchEvent(
-                new ClipboardEvent('paste', {
-                    clipboardData: dataTransfer,
-
-                    // need these for the event to reach Draft paste handler
-                    bubbles: true,
-                    cancelable: true,
-                })
-            )
-
-            // clear DataTransfer Data
-            dataTransfer.clearData()
+        element.dispatchEvent(new Event('input', { bubbles: true }))
 
-            if (element.textContent !== replacementText) {
-                console.log('set textContent')
-                element.textContent = replacementText
-            } else {
-                console.log("didn't need to set textContent ")
-                element.dispatchEvent(new Event('input', { bubbles: true }))
-            }
-            resolve(true)
-        }, 100)
+        resolve(element.innerText !== initialText)
     })
 }
 

tests/test.html

@@ -5,33 +5,34 @@
 <!-- An HTML page containing all kinds of input fields in which we will test replacing text -->
 <body>
 <div>
+    <h1>Tests</h1>
     <div>
-        <h1>Input Field</h1>
+        <h2>Input Field</h2>
         <form action="#" method="post">
             <input type="text" name="text" value="This is a test!!!">
             <input type="submit" value="Submit">
         </form>
     </div>
     <div>
-        <h1>Text Area</h1>
+        <h2>Text Area</h2>
         <textarea name="text" rows="10" cols="50">This is a test!!!</textarea>
     </div>
     <div>
-        <h1>Text Area with HTML</h1>
+        <h2>Text Area with HTML</h2>
         <textarea name="text" rows="10" cols="50"><p>This is a test!!!</p></textarea>
     </div>
     <div>
-        <h1>Editable div with [role="textbox"]</h1>
+        <h2>Editable div with [role="textbox"]</h2>
         <div contenteditable="true" role="textbox">This is a test!!!</div>
     </div>
     <div>
-        <h1>Hidden input</h1>
+        <h2>Hidden input</h2>
         <form action="#" method="post">
             <input type="hidden" name="hidden" value="This is a test!!!">
         </form>
     </div>
     <div>
-        <h1>Plain old div</h1>
+        <h2>Plain old div</h2>
         <div>This is a test!!!</div>
     </div>
 </div>