Merge pull request #36 from badasswp/release-1.3.0

Release 1.3.0

Author: badasswp

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.3.0
+* Feat: Add Search count feature.
+* Tested up to WP 6.7.2.
+
 ## 1.2.3
 * Fix: Crashing Gutenberg Block Editor on Toggle Block Inserter.
 * Tested up to WP 6.7.1.

package.json

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

readme.txt

@@ -1,14 +1,14 @@
 === Search and Replace for Block Editor ===
-Contributors: badasswp, anandraj
+Contributors: badasswp, rajanand346
 Tags: search, replace, text, block, editor.
 Requires at least: 6.0
-Tested up to: 6.7.1
-Stable tag: 1.2.3
+Tested up to: 6.7.2
+Stable tag: 1.3.0
 Requires PHP: 7.4
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
-Search and Replace text within the Block Editor.
+Search and Replace text within the WordPress Block Editor just like Microsoft Word or Google Docs. It's super fast, easy & just works!
 
 == Installation ==
 
@@ -61,9 +61,13 @@ Want to add your personal touch? All of our documentation can be found [here](ht
 
 == Changelog ==
 
+= 1.3.0 =
+* Feat: Add Search count feature.
+* Tested up to WP 6.7.2.
+
 = 1.2.3 =
 * Fix: Crashing Gutenberg Block Editor on Toggle Block Inserter.
-* Tested up to WP 6.7.1.
+* Tested up to WP 6.7.2.
 
 = 1.2.2 =
 * Fix style issues for WP 6.6.2.

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.3
+ * Version:     1.3.0
  * Author:      badasswp
  * Author URI:  https://github.com/badasswp
  * License:     GPL v2 or later
@@ -46,7 +46,7 @@
 			'wp-plugins',
 			'wp-edit-post',
 		],
-		'1.2.2',
+		'1.3.0',
 		false,
 	);
 

src/core/app.tsx

@@ -20,11 +20,12 @@ import { Shortcut } from './shortcut';
  * @returns {JSX.Element}
  */
 const SearchReplaceForBlockEditor = (): JSX.Element => {
-  const [replacements, setReplacements] = useState(0);
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [searchInput, setSearchInput] = useState('');
-  const [replaceInput, setReplaceInput] = useState('');
-  const [caseSensitive, setCaseSensitive] = useState(false);
+  const [ replacements, setReplacements ] = useState( 0 );
+  const [ isModalVisible, setIsModalVisible ] = useState( false );
+  const [ searchInput, setSearchInput ] = useState( '' );
+  const [ replaceInput, setReplaceInput ] = useState( '' );
+  const [ caseSensitive, setCaseSensitive ] = useState( false );
+  const [ context, setContext ] = useState( false );
 
   /**
    * Open Modal.
@@ -34,8 +35,8 @@ const SearchReplaceForBlockEditor = (): JSX.Element => {
    * @returns {void}
    */
   const openModal = (): void => {
-    setIsModalVisible(true);
-    setReplacements(0);
+    setIsModalVisible( true );
+    setReplacements( 0 );
   }
 
   /**
@@ -46,8 +47,8 @@ const SearchReplaceForBlockEditor = (): JSX.Element => {
    * @returns {void}
    */
   const closeModal = (): void => {
-    setIsModalVisible(false);
-    setReplacements(0);
+    setIsModalVisible( false );
+    setReplacements( 0 );
   }
 
   /**
@@ -64,11 +65,25 @@ const SearchReplaceForBlockEditor = (): JSX.Element => {
     const selectedText: string = getBlockEditorIframe().getSelection().toString();
     const modalSelector: string = '.search-replace-modal';
 
-    if (selectedText && !inContainer(modalSelector)) {
-      setSearchInput(selectedText);
+    if ( selectedText && ! inContainer( modalSelector ) ) {
+      setSearchInput( selectedText );
     }
   };
 
+  /**
+   * Listen for changes in Search Input & Case Sensitivity.
+   *
+   * By passing in a FALSY context to the replace callback, we only
+   * search for matched strings, we DO NOT replace matched strings.
+   *
+   * @since 1.3.0
+   *
+   * @returns {void}
+   */
+  useEffect( () => {
+    replace();
+  }, [ searchInput, caseSensitive ] );
+
   /**
    * Handle case sensitive toggle feature
    * to enable user perform case-sensitive search
@@ -79,7 +94,7 @@ const SearchReplaceForBlockEditor = (): JSX.Element => {
    * @param {boolean} newValue
    * @returns {void}
    */
-  const handleCaseSensitive = (newValue: boolean): void => {
+  const handleCaseSensitive = ( newValue: boolean ): void => {
     setCaseSensitive( newValue );
   }
 
@@ -88,13 +103,16 @@ const SearchReplaceForBlockEditor = (): JSX.Element => {
    * clicks the 'Replace' button.
    *
    * @since 1.0.0
+   * @since 1.3.0 Pass in context param to determine if it is Search or Replace.
    *
+   * @param {boolean} context True (Replace), False (Search).
    * @returns {void}
    */
-  const replace = (): void => {
-    setReplacements(0);
+  const replace = ( context: boolean = false ): void => {
+    setContext( context );
+    setReplacements( 0 );
 
-    if (!searchInput) {
+    if ( ! searchInput ) {
       return;
     }
 
@@ -103,9 +121,9 @@ const SearchReplaceForBlockEditor = (): JSX.Element => {
       isCaseSensitive() || caseSensitive ? 'g' : 'gi'
     );
 
-    select('core/block-editor').getBlocks().forEach((element) => {
-      recursivelyReplace(element, pattern, replaceInput);
-    });
+    select( 'core/block-editor' ).getBlocks().forEach( ( element ) => {
+      recursivelyReplace( element, pattern, replaceInput, context );
+    } );
   };
 
   /**
@@ -115,37 +133,39 @@ const SearchReplaceForBlockEditor = (): JSX.Element => {
    *
    * @since 1.0.0
    * @since 1.0.1 Handle edge-cases for quote, pullquote & details block.
+   * @since 1.3.0 Pass in context param to determine if it is Search or Replace.
    *
    * @param {Object} element Gutenberg editor block.
    * @param {RegExp} pattern Search pattern.
    * @param {string} text    Replace pattern.
+   * @param {boolean} context True (Replace), False (Search).
    *
    * @returns {void}
    */
-  const recursivelyReplace = (element, pattern, text): void => {
-    if (getAllowedBlocks().indexOf(element.name) !== -1) {
-      const args = { element, pattern, text };
+  const recursivelyReplace = ( element, pattern, text, context ): void => {
+    if ( getAllowedBlocks().indexOf( element.name ) !== -1 ) {
+      const args = { element, pattern, text, context };
 
-      switch (element.name) {
+      switch( element.name ) {
         case 'core/quote':
         case 'core/pullquote':
-          replaceBlockAttribute(args, 'citation');
+          replaceBlockAttribute( args, 'citation' );
           break;
 
         case 'core/details':
-          replaceBlockAttribute(args, 'summary');
+          replaceBlockAttribute( args, 'summary' );
           break;
 
         default:
-          replaceBlockAttribute(args, 'content');
+          replaceBlockAttribute( args, 'content' );
           break;
       }
     }
 
-    if (element.innerBlocks.length) {
-      element.innerBlocks.forEach((innerElement) => {
-        recursivelyReplace(innerElement, pattern, text);
-      });
+    if ( element.innerBlocks.length ) {
+      element.innerBlocks.forEach( ( innerElement ) => {
+        recursivelyReplace( innerElement, pattern, text, context );
+      } );
     }
   }
 
@@ -161,33 +181,38 @@ const SearchReplaceForBlockEditor = (): JSX.Element => {
    *
    * @returns {void}
    */
-  const replaceBlockAttribute = (args, attribute): void => {
+  const replaceBlockAttribute = ( args, attribute ): void => {
     const { attributes, clientId } = args.element;
 
-    if (undefined === attributes || undefined === attributes[attribute]) {
+    if ( undefined === attributes || undefined === attributes[attribute] ) {
       return;
     }
 
     let oldString: string = attributes[attribute].text || attributes[attribute];
-    let newString: string = oldString.replace(args.pattern, () => {
-      setReplacements((items) => items + 1);
+    let newString: string = oldString.replace( args.pattern, () => {
+      setReplacements( ( items ) => items + 1 );
       return args.text;
-    });
+    } );
 
-    if (newString === oldString) {
+    if ( newString === oldString ) {
       return;
     }
 
     const property = {};
     property[attribute] = newString;
 
-    (dispatch('core/block-editor') as any).updateBlockAttributes(clientId, property);
+    if ( args.context ) {
+      ( dispatch( 'core/block-editor' ) as any )
+      .updateBlockAttributes( clientId, property );
+    }
 
     // Handle edge-case ('value') with Pullquotes.
-    if (attributes.value) {
-      (dispatch('core/block-editor') as any)
-        .updateBlockAttributes(clientId, { value: newString });
-      setReplacements((items) => items + 1);
+    if ( attributes.value ) {
+      if ( args.context ) {
+        ( dispatch('core/block-editor' ) as any )
+        .updateBlockAttributes( clientId, { value: newString } );
+      }
+      setReplacements( ( items ) => items + 1 );
     }
   }
 
@@ -201,7 +226,7 @@ const SearchReplaceForBlockEditor = (): JSX.Element => {
    *
    * @returns {void}
    */
-  useEffect(() => {
+  useEffect( () => {
     const editor = getBlockEditorIframe();
 
     editor.addEventListener(
@@ -213,48 +238,48 @@ const SearchReplaceForBlockEditor = (): JSX.Element => {
         'selectionchange', handleSelection
       );
     };
-  }, []);
+  }, [] );
 
   return (
     <>
-      <Shortcut onKeyDown={openModal} />
-      <Tooltip text={__('Search & Replace', 'search-replace-for-block-editor')}>
+      <Shortcut onKeyDown={ openModal } />
+      <Tooltip text={ __( 'Search & Replace', 'search-replace-for-block-editor' ) }>
         <Button
           icon={ search }
-          label={__('Search & Replace', 'search-replace-for-block-editor')}
-          onClick={openModal}
+          label={ __( 'Search & Replace', 'search-replace-for-block-editor' ) }
+          onClick={ openModal }
         />
       </Tooltip>
       {
         isModalVisible && (
           <Modal
-            title={__('Search & Replace', 'search-replace-for-block-editor')}
-            onRequestClose={closeModal}
+            title={ __( 'Search & Replace', 'search-replace-for-block-editor' ) }
+            onRequestClose={ closeModal }
             className="search-replace-modal"
           >
             <div id="search-replace-modal__text-group">
               <TextControl
                 type="text"
-                label={__('Search')}
-                value={searchInput}
-                onChange={(value) => setSearchInput(value)}
+                label={ __( 'Search' ) }
+                value={ searchInput }
+                onChange={ ( value ) => setSearchInput( value ) }
                 placeholder="Lorem ipsum..."
                 __nextHasNoMarginBottom
               />
               <TextControl
                 type="text"
-                label={__('Replace')}
-                value={replaceInput}
-                onChange={(value) => setReplaceInput(value)}
+                label={ __( 'Replace' ) }
+                value={ replaceInput }
+                onChange={ ( value ) => setReplaceInput( value ) }
                 __nextHasNoMarginBottom
               />
             </div>
 
             <div id="search-replace-modal__toggle">
               <ToggleControl
-                label={__('Match Case | Expression', 'search-replace-for-block-editor')}
-                checked={caseSensitive}
-                onChange={handleCaseSensitive}
+                label={ __( 'Match Case | Expression', 'search-replace-for-block-editor' ) }
+                checked={ caseSensitive }
+                onChange={ handleCaseSensitive }
                 __nextHasNoMarginBottom
               />
             </div>
@@ -263,7 +288,15 @@ const SearchReplaceForBlockEditor = (): JSX.Element => {
               replacements ? (
                 <div id="search-replace-modal__notification">
                   <p>
-                    <strong>{replacements}</strong> {__('item(s) replaced successfully', 'search-replace-for-block-editor')}.
+                    { context ? (
+                      <>
+                        <strong>{ replacements }</strong> { __( 'item(s) replaced successfully', 'search-replace-for-block-editor' ) }.
+                      </>
+                    ) : (
+                      <>
+                        <strong>{ replacements }</strong> { __( 'item(s) found', 'search-replace-for-block-editor' ) }.
+                      </>
+                    )}
                   </p>
                 </div>
               ) : ''
@@ -272,15 +305,15 @@ const SearchReplaceForBlockEditor = (): JSX.Element => {
             <div id="search-replace-modal__button-group">
               <Button
                 variant="primary"
-                onClick={replace}
+                onClick={ () => replace( true ) }
               >
-                {__('Replace')}
+                { __( 'Replace' ) }
               </Button>
               <Button
                 variant="secondary"
-                onClick={closeModal}
+                onClick={ closeModal }
               >
-                {__('Done')}
+                { __( 'Done' ) }
               </Button>
             </div>
           </Modal>