From 6da71e664f4860ef1afc7f2733f3d8146830c239 Mon Sep 17 00:00:00 2001 From: Chris Date: Fri, 3 Nov 2023 10:33:11 +0000 Subject: [PATCH] Fix for gutenberg wordpress editor (#86) --- manifest.json | 2 +- package.json | 2 +- src/constants.ts | 13 +++++++++++-- src/searchreplace.ts | 23 ++++++++--------------- src/util.ts | 1 - 5 files changed, 21 insertions(+), 20 deletions(-) diff --git a/manifest.json b/manifest.json index 0cce9d4..9565161 100644 --- a/manifest.json +++ b/manifest.json @@ -31,7 +31,7 @@ "permissions": ["activeTab", "storage", "notifications"], "host_permissions": ["http://*/*", "https://*/*"], "update_url": "http://clients2.google.com/service/update2/crx", - "version": "1.7.2", + "version": "1.7.3", "options_page": "assets/options.html", "icons": { "16": "assets/icon-16.png", diff --git a/package.json b/package.json index bac32a4..80e78ed 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "search_and_replace", - "version": "1.7.2", + "version": "1.7.3", "resolutions": { "author": "Chris Taylor " }, diff --git a/src/constants.ts b/src/constants.ts index 0911078..bcf4254 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -9,10 +9,19 @@ export const RICH_TEXT_EDITOR_TINY_MCE: RichTextEditor = { editor: { type: SelectorType.id, value: '#tinymce', iframe: false }, container: { type: SelectorType.class, value: '.mce-edit-area', iframe: true }, } -export const RICH_TEXT_EDITOR_GENERIC: RichTextEditor = { +export const RICH_TEXT_EDITOR_GUTENBERG_TITLE: RichTextEditor = { + container: { type: SelectorType.attribute, value: '[name="editor-canvas"]', iframe: true }, editor: { type: SelectorType.attribute, value: '[role="textbox"]', iframe: false }, } -export const RICH_TEXT_EDITORS: RichTextEditor[] = [RICH_TEXT_EDITOR_TINY_MCE, RICH_TEXT_EDITOR_GENERIC] +export const RICH_TEXT_EDITOR_GUTENBERG_DOCUMENT: RichTextEditor = { + container: { type: SelectorType.attribute, value: '[name="editor-canvas"]', iframe: true }, + editor: { type: SelectorType.attribute, value: '[role="document"]', iframe: false }, +} +export const RICH_TEXT_EDITORS: RichTextEditor[] = [ + RICH_TEXT_EDITOR_TINY_MCE, + RICH_TEXT_EDITOR_GUTENBERG_TITLE, + RICH_TEXT_EDITOR_GUTENBERG_DOCUMENT, +] export const HINTS = { wordpress6: 'Hint: WordPress 6+ detected. Check "Visible content only?" when editing posts.', diff --git a/src/searchreplace.ts b/src/searchreplace.ts index 4ef77b7..9d0c2e0 100644 --- a/src/searchreplace.ts +++ b/src/searchreplace.ts @@ -8,10 +8,11 @@ import { getFlags, getSearchPattern } from './regex' function replaceInInnerHTML(element: HTMLElement, searchPattern: RegExp, replaceTerm: string) { const searchStr = element.innerHTML element.innerHTML = searchStr.replace(searchPattern, replaceTerm) + element.dispatchEvent(new Event('input', { bubbles: true })) return !(element.innerHTML === searchStr) } -function setNativeValue(element, value) { +function setNativeValue(element: HTMLInputElement | HTMLTextAreaElement, value: string) { const valueFn = Object.getOwnPropertyDescriptor(element, 'value') let valueSetter: ((v: any) => void) | undefined let prototypeValueSetter: ((v: any) => void) | undefined @@ -233,7 +234,6 @@ function replaceHTMLInIframes( if (iframe.src.match('^http://' + window.location.host) || !iframe.src.match('^https?')) { try { const content = iframe.contentDocument?.body as HTMLBodyElement - console.log('iframe.body', content) if (visibleOnly) { replaced = replaceVisibleOnly(document, [content], searchPattern, replaceTerm, flags) } else { @@ -307,9 +307,12 @@ async function cmsEditor( let replaced = false try { if (richTextEditor.container && richTextEditor.container.iframe) { - const container = ( - document.querySelector(richTextEditor.container.value)?.querySelector('iframe') - ) + const containerOuter = document.querySelector(richTextEditor.container.value) + // if container is an iframe use it, otherwise search inside for an iframe + const container: HTMLIFrameElement | null | undefined = + containerOuter && containerOuter?.tagName === 'IFRAME' + ? containerOuter + : containerOuter?.querySelector('iframe') const editor: HTMLElement | null | undefined = container?.contentDocument?.querySelector( richTextEditor.editor.value ) @@ -319,11 +322,7 @@ async function cmsEditor( } else { const editor = 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) - console.log('newText', newText) await replaceInContentEditableElement(editor, initialText, newText) replaced = initialText !== newText } @@ -344,12 +343,9 @@ async function replaceInContentEditableElement( return new Promise((resolve) => { // 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) } @@ -381,12 +377,10 @@ async function replaceInCMSEditors( for (const richTextEditor of RICH_TEXT_EDITORS) { if (richTextEditor.container) { if (document.querySelectorAll(richTextEditor.container.value).length) { - console.log('Replacing in rich text editor') replaced = await cmsEditor(document, searchPattern, replaceTerm, flags, richTextEditor) } } else { if (document.querySelectorAll(richTextEditor.editor.value).length) { - console.log('Replacing in rich text editor') replaced = await cmsEditor(document, searchPattern, replaceTerm, flags, richTextEditor) } } @@ -463,7 +457,6 @@ if (chrome && chrome.runtime && chrome.runtime.onMessage) { globalFlags, instance.options.wholeWord ) - console.log(`instance ${JSON.stringify(instance, null, 4)}`) if (action === 'searchReplace') { sessionStorage.setItem('searchTerm', instance.searchTerm) sessionStorage.setItem('replaceTerm', instance.replaceTerm) diff --git a/src/util.ts b/src/util.ts index a5aaf28..49c2929 100644 --- a/src/util.ts +++ b/src/util.ts @@ -158,7 +158,6 @@ export function getAvailableLanguages(): Promise { // Function to create a translation proxy export function createTranslationProxy(translationData: LangFile): TranslationProxy { return (key: string) => { - console.log(`Translating key ${key}`) if (translationData.data[key]) { // Use the selected language translation return translationData.data[key].message