Merge pull request #275 from 10up/fix/ocr-wp-57

Fix: OCR block stops working on WP 5.7
10up · Jul 13, 2021 · 8e2f8bd · 8e2f8bd
2 parents fad5633 + 1a5c59f
commit 8e2f8bd
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 92 deletions.
diff --git a/includes/Classifai/Providers/Azure/OCR.php b/includes/Classifai/Providers/Azure/OCR.php
@@ -29,7 +29,7 @@ class OCR {
 	 *
 	 * @var string
 	 */
-	const API_PATH = 'vision/v3.1/ocr/';
+	const API_PATH = 'vision/v3.2/ocr/';
 
 	/**
 	 * ComputerVision settings.

diff --git a/src/js/editor-ocr.js b/src/js/editor-ocr.js
@@ -1,5 +1,5 @@
 /* global lodash */
-const { select, useSelect, dispatch, subscribe } = wp.data;
+const { select, dispatch, subscribe } = wp.data;
 const { createBlock } = wp.blocks;
 const { apiFetch } = wp;
 const { find, debounce } = lodash;
@@ -8,7 +8,6 @@ const { createHigherOrderComponent } = wp.compose;
 const { BlockControls } = wp.blockEditor; // eslint-disable-line no-unused-vars
 const { Button, Modal, Flex, FlexItem, ToolbarGroup, ToolbarButton } = wp.components; // eslint-disable-line no-unused-vars
 const { __ } = wp.i18n;
-const { registerPlugin } = wp.plugins;
 const { useState, Fragment } = wp.element; // eslint-disable-line no-unused-vars
 
 /**
@@ -52,13 +51,9 @@ const getImageOcrScannedText = async ( imageId ) => {
  * @param {int} imageId - Image ID.
  * @param {string} scannedText - Text to insert to editor.
 */
-const insertOcrScannedText = async ( clientId, imageId, scannedText = '' ) => {
+const insertOcrScannedText = async ( clientId, imageId, scannedText ) => {
 	const { getBlockIndex } = select( 'core/block-editor' );
 
-	if( ! scannedText ) {
-		scannedText = await getImageOcrScannedText( imageId );
-	}
-
 	if( ! scannedText ) {
 		return;
 	}
@@ -72,7 +67,7 @@ const insertOcrScannedText = async ( clientId, imageId, scannedText = '' ) => {
 		content: scannedText,
 	} );
 
-	dispatch( 'core/block-editor' ).insertBlock( groupBlock, getBlockIndex( clientId ) + 1 );
+	await dispatch( 'core/block-editor' ).insertBlock( groupBlock, getBlockIndex( clientId ) + 1 );
 	dispatch( 'core/block-editor' ).insertBlock( textBlock, 0, groupBlock.clientId );
 };
 
@@ -90,100 +85,40 @@ const hasOcrBlock = ( imageId, blocks = [] ) => {
 	return !! find( blocks, block => block.attributes.anchor === `classifai-ocr-${imageId}` );
 };
 
-/**
- * An Modal allows user to insert scanned text to block if detected.
- */
-const imageOcrModal = () => {
-	const [ isOpen, setOpen ] = useState( false );
-	const [ imageId, setImageId ] = useState( 0 );
-	const [ clientId, setClientId ] = useState( 0 );
-	const [ ocrScannedText, setOcrScannedText ] = useState( '' );
-	const openModal = () => setOpen( true ); // eslint-disable-line require-jsdoc
-	const closeModal = () => setOpen( false ); // eslint-disable-line require-jsdoc
-	let currentBlocks;
-
-	useSelect( debounce( async ( select ) => {
-		const { getSelectedBlock, getBlocks } = select( 'core/block-editor' );
-		const { updateBlockAttributes } = dispatch( 'core/block-editor' );
-		const newBlocks = getBlocks();
-		const prevBlocks = currentBlocks;
-		currentBlocks = newBlocks;
-
-		const currentBlock = getSelectedBlock();
-
-		if ( ! currentBlock || 'core/image' !== currentBlock.name ) {
-			return;
-		}
-
-		if ( ! currentBlock.attributes.id ) {
-			return;
-		}
-
-		const prevBlock = find( prevBlocks, block => block.clientId === currentBlock.clientId );
-
-		if ( ! prevBlock || prevBlock.attributes.id === currentBlock.attributes.id ) {
-			return;
-		}
-
-		setClientId( currentBlock.clientId );
-		setImageId( currentBlock.attributes.id );
-
-		const _ocrText = await getImageOcrScannedText( currentBlock.attributes.id );
-
-		if ( ! _ocrText ) {
-			return;
-		}
-
-		setOcrScannedText( _ocrText );
-
-		updateBlockAttributes( currentBlock.clientId, {
-			ocrScannedText: _ocrText,
-		} );
-
-		if ( ! hasOcrBlock( currentBlock.attributes.id, newBlocks ) ) {
-			openModal();
-		}
-	}, 100 ) );
-
-	return isOpen && <Modal title={__( 'ClassifAI detected text in your image', 'classifai' )}>
-		<p>{__( 'Would you like you insert the scanned text under this image block? This enhances search indexing and accessibility for readers.', 'classifai' )}</p>
-		<Flex align='flex-end' justify='flex-end'>
-			<FlexItem>
-				<Button isPrimary onClick={() => {
-					insertOcrScannedText( clientId, imageId, ocrScannedText );
-					return closeModal();
-				}}>
-					{__( 'Insert text', 'classifai' )}
-				</Button>
-			</FlexItem>
-			<FlexItem>
-				<Button isSecondary onClick={ closeModal }>
-					{__( 'Dismiss', 'classifai' )}
-				</Button>
-			</FlexItem>
-		</Flex>
-	</Modal>;
-};
-
-registerPlugin( 'tenup-classifai-ocr-modal', {
-	render: imageOcrModal,
-} );
-
 /**
  * Add insert button to toolbar.
 */
 const imageOcrControl = createHigherOrderComponent( ( BlockEdit ) => { // eslint-disable-line no-unused-vars
 	return ( props ) => {
-		const { attributes, clientId, isSelected, name } = props;
+		const [ isModalOpen, setModalOpen ] = useState( false );
+		const { attributes, clientId, isSelected, name, setAttributes } = props;
 
-		if ( ! isSelected || 'core/image' != name || ! attributes.ocrScannedText ) {
+		if ( ! isSelected || 'core/image' != name ) {
 			return <BlockEdit {...props} />;
 		}
 
+		if ( ! attributes.ocrChecked && attributes.id ) {
+			getImageOcrScannedText( attributes.id )
+				.then( data => {
+					if ( data ) {
+						setAttributes( {
+							ocrScannedText: data,
+							ocrChecked: true,
+						} );
+						setModalOpen( true );
+					} else {
+						setAttributes( {
+							ocrChecked: true,
+						} );
+					}
+				} );
+		}
+
+
 		return (
 			<Fragment>
 				<BlockEdit {...props} />
-				<BlockControls>
+				{attributes.ocrScannedText && <BlockControls>
 					<ToolbarGroup>
 						<ToolbarButton
 							label={__( 'Insert scanned text into content', 'classifai' )}
@@ -192,7 +127,25 @@ const imageOcrControl = createHigherOrderComponent( ( BlockEdit ) => { // eslint
 							disabled={hasOcrBlock( attributes.id )}
 						/>
 					</ToolbarGroup>
-				</BlockControls>
+				</BlockControls>}
+				{isModalOpen && <Modal title={__( 'ClassifAI detected text in your image', 'classifai' )}>
+					<p>{__( 'Would you like you insert the scanned text under this image block? This enhances search indexing and accessibility for readers.', 'classifai' )}</p>
+					<Flex align='flex-end' justify='flex-end'>
+						<FlexItem>
+							<Button isPrimary onClick={() => {
+								insertOcrScannedText( clientId, attributes.id, attributes.ocrScannedText );
+								setModalOpen( false );
+							}}>
+								{__( 'Insert text', 'classifai' )}
+							</Button>
+						</FlexItem>
+						<FlexItem>
+							<Button isSecondary onClick={ () => setModalOpen( false ) }>
+								{__( 'Dismiss', 'classifai' )}
+							</Button>
+						</FlexItem>
+					</Flex>
+				</Modal> }
 			</Fragment>
 		);
 	};
@@ -221,6 +174,10 @@ const modifyImageAttributes = ( settings, name ) => {
 			type: 'string',
 			default: ''
 		};
+		settings.attributes.ocrChecked = {
+			type: 'boolean',
+			default: false,
+		};
 	}
 	return settings;
 };