Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: OCR block stops working on WP 5.7 #275

Merged
merged 6 commits into from
Jul 13, 2021
Merged

Fix: OCR block stops working on WP 5.7 #275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
88df3c7
update ocr to v3.2
dinhtungdu Apr 20, 2021
911662d
fix: ocr block in wp 5.7
dinhtungdu Apr 20, 2021
f76dca6
insertOcrScannedText now requires scannedText
dinhtungdu Apr 20, 2021
6b40aff
Apply suggestions from code review
dinhtungdu Apr 28, 2021
6a6e1cc
Merge branch 'develop' into fix/ocr-wp-57
jeffpaul Apr 29, 2021
1a5c59f
Merge branch 'develop' into fix/ocr-wp-57
jeffpaul May 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion includes/Classifai/Providers/Azure/OCR.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ class OCR {
*
* @var string
*/
const API_PATH = 'vision/v3.1/ocr/';
const API_PATH = 'vision/v3.2/ocr/';

/**
* ComputerVision settings.
Expand Down
139 changes: 48 additions & 91 deletions src/js/editor-ocr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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

/**
Expand Down Expand Up @@ -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;
}
Expand All @@ -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 );
};

Expand All @@ -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' )}
Expand All @@ -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>
);
};
Expand Down Expand Up @@ -221,6 +174,10 @@ const modifyImageAttributes = ( settings, name ) => {
type: 'string',
default: ''
};
settings.attributes.ocrChecked = {
type: 'boolean',
default: false,
};
}
return settings;
};
Expand Down