Merge pull request #29 from badasswp/release-1.2.2

Release 1.2.2

Author: badasswp

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.2.2
+* Fix style issues for WP 6.6.2.
+* Fix timeout issues causing Icon not to load.
+* Fix backward compatibility issues due to WP upgrade.
+* Apply coding standards.
+* Update README notes.
+* Tested up to WP 6.7.1.
+
 ## 1.2.1
 * Fix in modal selection issue.
 * Fix missing tooltip component.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "search-and-replace",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Search and Replace text within the Block Editor.",
   "author": "badasswp",
   "license": "GPL-2.0-or-later",

readme.txt

@@ -3,7 +3,7 @@ Contributors: badasswp, anandraj
 Tags: search, replace, text, block, editor.
 Requires at least: 6.0
 Tested up to: 6.7.1
-Stable tag: 1.2.1
+Stable tag: 1.2.2
 Requires PHP: 7.4
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -24,6 +24,17 @@ This plugin brings the familiar Search and Replace functionality that PC users h
 
 Now you can easily search and replace text right in the Block Editor. Its easy and does exactly what it says. You can also match the text case using the 'Match Case | Expression' toggle.
 
+= ✔️ Features =
+
+Our plugin comes with everything you need to find and replace text quicker and more efficiently.
+
+✔️ <strong>Search & Replace</strong> text, typos, keywords faster.
+✔️ <strong>Shortcut Keys</strong> - CMD + SHIFT + F.
+✔️ <strong>Match Case</strong> Sensitivity.
+✔️ <strong>Custom Hooks</strong> to help you customize plugin behaviour.
+✔️ Available in <strong>mutiple langauges</strong> such as Arabic, Chinese, Hebrew, Hindi, Russian, German, Italian, Croatian, Spanish & French languages.
+✔️ <strong>Backward compatible</strong>, works with most WP versions.
+
 = ✨ Getting Started =
 
 Create a new Post or open an existing Post. Locate the 'Search and Replace' icon at the <strong>top left</strong> corner of the Block Editor and click on it. Proceed to type in the text you wish to replace and click on 'Replace'.
@@ -50,6 +61,14 @@ Want to add your personal touch? All of our documentation can be found [here](ht
 
 == Changelog ==
 
+= 1.2.2 =
+* Fix style issues for WP 6.6.2.
+* Fix timeout issues causing Icon not to load.
+* Fix backward compatibility issues due to WP upgrade.
+* Apply coding standards.
+* Update README notes.
+* Tested up to WP 6.7.1.
+
 = 1.2.1 =
 * Fix in modal selection issue.
 * Fix missing tooltip component.

search-replace-for-block-editor.php

@@ -3,7 +3,7 @@
  * Plugin Name: Search and Replace for Block Editor
  * Plugin URI:  https://github.com/badasswp/search-and-replace
  * Description: Search and Replace text within the Block Editor.
- * Version:     1.2.1
+ * Version:     1.2.2
  * Author:      badasswp
  * Author URI:  https://github.com/badasswp
  * License:     GPL v2 or later
@@ -25,10 +25,13 @@
  *
  * @since 1.0.0
  * @since 1.0.2 Load asset via plugin directory URL.
+ * @since 1.2.2 Localise WP version.
  *
  * @wp-hook 'enqueue_block_editor_assets'
  */
 add_action( 'enqueue_block_editor_assets', function() {
+	global $wp_version;
+
 	wp_enqueue_script(
 		'search-replace-for-block-editor',
 		trailingslashit( plugin_dir_url( __FILE__ ) ) . 'dist/app.js',
@@ -44,7 +47,7 @@
 			'wp-edit-post',
 			'wp-edit-site',
 		],
-		'1.2.1',
+		'1.2.2',
 		false,
 	);
 
@@ -53,6 +56,14 @@
 		'search-replace-for-block-editor',
 		plugin_dir_path( __FILE__ ) . 'languages'
 	);
+
+	wp_localize_script(
+		'search-replace-for-block-editor',
+		'srfbe',
+		[
+			'wpVersion' => $wp_version,
+		]
+	);
 } );
 
 /**

src/app.tsx renamed to src/core/app.tsx

@@ -4,7 +4,7 @@ import { dispatch, select } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
 import { Modal, TextControl, ToggleControl, Button, Tooltip } from '@wordpress/components';
 
-import './styles/app.scss';
+import '../styles/app.scss';
 
 import { getAllowedBlocks, getBlockEditorIframe, isCaseSensitive, inContainer } from './utils';
 import { Shortcut } from './shortcut';
@@ -19,7 +19,7 @@ import { Shortcut } from './shortcut';
  *
  * @returns {JSX.Element}
  */
-const SearchReplaceForBlockEditor = () => {
+const SearchReplaceForBlockEditor = (): JSX.Element => {
   const [replacements, setReplacements] = useState(0);
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [searchInput, setSearchInput] = useState('');
@@ -60,9 +60,9 @@ const SearchReplaceForBlockEditor = () => {
    *
    * @returns {void}
    */
-  const handleSelection = () => {
-    const selectedText = getBlockEditorIframe().getSelection().toString();
-    const modalSelector = '.search-replace-modal';
+  const handleSelection = (): void => {
+    const selectedText: string = getBlockEditorIframe().getSelection().toString();
+    const modalSelector: string = '.search-replace-modal';
 
     if (selectedText && !inContainer(modalSelector)) {
       setSearchInput(selectedText);
@@ -77,6 +77,7 @@ const SearchReplaceForBlockEditor = () => {
    * @since 1.1.0
    *
    * @param {boolean} newValue
+   * @returns {void}
    */
   const handleCaseSensitive = (newValue: boolean): void => {
     setCaseSensitive( newValue );
@@ -97,7 +98,7 @@ const SearchReplaceForBlockEditor = () => {
       return;
     }
 
-    const pattern = new RegExp(
+    const pattern: RegExp = new RegExp(
       `(?<!<[^>]*)${searchInput}(?<![^>]*<)`,
       isCaseSensitive() || caseSensitive ? 'g' : 'gi'
     );
@@ -116,12 +117,12 @@ const SearchReplaceForBlockEditor = () => {
    * @since 1.0.1 Handle edge-cases for quote, pullquote & details block.
    *
    * @param {Object} element Gutenberg editor block.
-   * @param {string} pattern Search pattern.
+   * @param {RegExp} pattern Search pattern.
    * @param {string} text    Replace pattern.
    *
    * @returns {void}
    */
-  const recursivelyReplace = (element, pattern, text) => {
+  const recursivelyReplace = (element, pattern, text): void => {
     if (getAllowedBlocks().indexOf(element.name) !== -1) {
       const args = { element, pattern, text };
 
@@ -160,7 +161,7 @@ const SearchReplaceForBlockEditor = () => {
    *
    * @returns {void}
    */
-  const replaceBlockAttribute = (args, attribute) => {
+  const replaceBlockAttribute = (args, attribute): void => {
     const { attributes, clientId } = args.element;
 
     if (undefined === attributes || undefined === attributes[attribute]) {

src/shortcut.tsx renamed to src/core/shortcut.tsx

@@ -2,7 +2,7 @@ import { useDispatch } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 
-import { getShortcut } from './utils';
+import { getShortcut, isWpVersion } from './utils';
 
 /**
  * Shortcut for Block Editor.
@@ -17,7 +17,11 @@ import { getShortcut } from './utils';
  *
  * @returns {JSX.Element|null}
  */
-export const Shortcut = ({ onKeyDown }) => {
+export const Shortcut = ({ onKeyDown }): JSX.Element | null => {
+  if (!isWpVersion('6.4.0')) {
+    return null;
+  }
+
   const dispatch = useDispatch();
 
   dispatch( 'core/keyboard-shortcuts' ).registerShortcut( {

src/utils.tsx renamed to src/core/utils.tsx

@@ -114,23 +114,27 @@ export const isCaseSensitive = (): boolean => {
  *
  * @since 1.2.0
  *
- * @returns Promise<HTMLElement>
+ * @returns Promise<HTMLElement | Error>
  */
-export const getEditorRoot = () => {
-  let elapsedTime = 0;
-  const interval = 100;
+export const getEditorRoot = (): Promise<HTMLElement | Error> => {
+  let elapsedTime: number = 0;
+  const interval: number = 100;
+
+  const selector: string = isWpVersion('6.6.0')
+    ? '.editor-header__toolbar'
+    : '.edit-post-header__toolbar';
 
   return new Promise((resolve, reject) => {
     const intervalId = setInterval(() => {
       elapsedTime += interval;
-      const root = document.getElementById('editor').querySelector('.editor-header__toolbar');
+      const root = document.querySelector(selector) as HTMLElement | null;
 
       if (root) {
         clearInterval(intervalId);
         resolve(root);
       }
 
-      if (elapsedTime > (10 * interval)) {
+      if (elapsedTime > (600 * interval)) {
         clearInterval(intervalId);
         reject(new Error('Unable to get Editor root container...'));
       }
@@ -149,8 +153,8 @@ export const getEditorRoot = () => {
  * @param {HTMLElement} parent - The Parent DOM element.
  * @returns {HTMLDivElement}
  */
-export const getAppRoot = (parent) => {
-  const container = document.createElement('div');
+export const getAppRoot = (parent: HTMLElement): HTMLDivElement => {
+  const container: HTMLDivElement = document.createElement('div');
   container.id = 'search-replace';
   parent.appendChild(container);
 
@@ -167,7 +171,7 @@ export const getAppRoot = (parent) => {
  *
  * @returns {Document}
  */
-export const getBlockEditorIframe = () => {
+export const getBlockEditorIframe = (): Document => {
   const editor = document.querySelector('iframe[name="editor-canvas"]');
 
   return editor && editor instanceof HTMLIFrameElement
@@ -182,18 +186,57 @@ export const getBlockEditorIframe = () => {
  * @since 1.2.1
  *
  * @param {string} selector Target selector.
- *
  * @returns {boolean}
  */
-export const inContainer = (selector) => {
-  const selection = window.getSelection();
-  const targetDiv = document.querySelector(selector);
+export const inContainer = (selector: string): boolean => {
+  const selection = window.getSelection() as Selection | null;
+  const targetDiv = document.querySelector(selector) as HTMLElement | null;
 
-  if (!selection.rangeCount || !targetDiv) {
+  if (!selection?.rangeCount || !targetDiv) {
     return false;
   }
 
-  const range = selection.getRangeAt(0);
+  const range: Range = selection.getRangeAt(0);
 
   return targetDiv.contains(range.startContainer) && targetDiv.contains(range.endContainer);
 }
+
+/**
+ * Check if it's up to WP version.
+ *
+ * @since 1.2.2
+ *
+ * @param {string} version WP Version.
+ * @returns {boolean}
+ */
+export const isWpVersion = (version: string) => {
+  const { wpVersion } = srfbe as { wpVersion: string };
+
+  const argVersion: number = getNumberToBase10(
+    version.split('.').map(Number)
+  );
+
+  const sysVersion: number = getNumberToBase10(
+    wpVersion.split('.').map(Number)
+  );
+
+  return ! (sysVersion < argVersion);
+}
+
+/**
+ * Given an array of numbers, get the Radix
+ * (converted to base 10). For e.g. [5, 6, 1] becomes
+ * 561 or [2, 7, 4] becomes 274.
+ *
+ * @since 1.2.2
+ *
+ * @param {number[]} values Array of positive numbers.
+ * @returns {number}
+ */
+export const getNumberToBase10 = (values: number[]): number => {
+  const radix: number = values.reduce((sum: number, value: number, index: number) => {
+    return sum + (value * Math.pow(10, ((values.length - 1) - index)));
+  }, 0);
+
+  return radix;
+}

src/index.tsx

@@ -1,13 +1,17 @@
+import ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 
-import SearchReplaceForBlockEditor from './app';
-import { getAppRoot, getEditorRoot } from './utils'
+import SearchReplaceForBlockEditor from './core/app';
+import { getAppRoot, getEditorRoot, isWpVersion } from './core/utils'
 
 (async () => {
   try {
-    const container = await getEditorRoot();
-    const app = getAppRoot(container);
-    createRoot(app).render(<SearchReplaceForBlockEditor />);
+    const app = getAppRoot(await getEditorRoot() as HTMLElement);
+    if (!isWpVersion('6.2.0')) {
+      ReactDOM.render(<SearchReplaceForBlockEditor />, app);
+    } else {
+      createRoot(app).render(<SearchReplaceForBlockEditor />);
+    }
   } catch (e) {
     console.error(e);
   }