enhance/748: Updates to expand/condense text functionality #774
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| /* eslint-disable @wordpress/no-unsafe-wp-apis */ | ||
| /* eslint-disable no-shadow */ | ||
| import { registerPlugin } from '@wordpress/plugins'; | ||
| import { | ||
| store as blockEditorStore, | ||
|
|
@@ -20,7 +21,7 @@ | |
| count as getWordCount, | ||
| count as getCharacterCount, | ||
| } from '@wordpress/wordcount'; | ||
| import { __, sprintf } from '@wordpress/i18n'; | ||
|
|
||
| import { DisableFeatureButton } from '../components'; | ||
| import '../../scss/content-resizing-plugin.scss'; | ||
|
|
@@ -124,6 +125,9 @@ | |
| // Indicates if the modal window with the result is open/closed. | ||
| const [ isModalOpen, setIsModalOpen ] = useState( false ); | ||
|
|
||
| // Modal title depending on resizing type. | ||
| const [ modalTitle, setModalTitle ] = useState( '' ); | ||
|
|
||
| const { isMultiBlocksSelected, resizingType, isResizing } = useSelect( | ||
| ( __select ) => { | ||
| return { | ||
|
|
@@ -142,6 +146,12 @@ | |
| await resizeContent(); | ||
| } )(); | ||
| } | ||
|
|
||
| if ( 'grow' === resizingType ) { | ||
| setModalTitle( __( 'Expanded text suggestions', 'classifai' ) ); | ||
| } else { | ||
| setModalTitle( __( 'Condensed text suggestions', 'classifai' ) ); | ||
| } | ||
| }, [ resizingType ] ); | ||
|
|
||
| // Triggers AJAX request to resize the content. | ||
|
|
@@ -153,7 +163,7 @@ | |
| setIsModalOpen( true ); | ||
| } )(); | ||
| } | ||
| }, [ isResizing, selectedBlock ] ); | ||
|
|
||
| // Resets to default states. | ||
| function resetStates() { | ||
|
|
@@ -161,6 +171,23 @@ | |
| setTextArray( [] ); | ||
| setIsModalOpen( false ); | ||
| dispatch( resizeContentStore ).setResizingType( null ); | ||
| setModalTitle( '' ); | ||
| } | ||
|
|
||
| /** | ||
| * Refreshes results. | ||
| * | ||
| * @param {string} resizingType Type of resizing. grow|shrink|null | ||
| * @param {Block} selectedBlock The selected block. | ||
| */ | ||
| async function refreshResults( resizingType, selectedBlock ) { | ||
| dispatch( resizeContentStore ).setResizingType( null ); | ||
|
|
||
| await new Promise( ( resolve ) => setTimeout( resolve, 0 ) ); | ||
|
|
||
| setSelectedBlock( selectedBlock ); | ||
|
|
||
| dispatch( resizeContentStore ).setResizingType( resizingType ); | ||
| } | ||
|
|
||
| /** | ||
|
|
@@ -261,7 +288,7 @@ | |
| // Result Modal JSX. | ||
| const suggestionModal = ! isResizing && textArray.length && isModalOpen && ( | ||
| <Modal | ||
| title={ modalTitle } | ||
| isFullScreen={ false } | ||
| className="classifai-content-resize__suggestion-modal" | ||
| onRequestClose={ () => { | ||
|
|
@@ -316,7 +343,10 @@ | |
| </td> | ||
| <td> | ||
| <Button | ||
| text={ __( | ||
| 'Replace', | ||
| 'classifai' | ||
| ) } | ||
| variant="secondary" | ||
| onClick={ () => | ||
| updateContent( textItem ) | ||
|
|
@@ -330,6 +360,26 @@ | |
| </tbody> | ||
| </table> | ||
| </div> | ||
| <p> | ||
| { __( | ||
| 'None of these suggestions are ideal, please', | ||
|
There was a problem hiding this comment. I agree with your thought here: #748 (comment). To me this reads as if something went wrong and we're giving an error message. It also doesn't make sense if someone has it set to only show a single result ( I also wonder if a button makes more sense here, as that would stand out more, especially when the disable functionality is turned on, we already show a link here:
Something like this:
I also think
|
||
| 'classifai' | ||
| ) }{ ' ' } | ||
| <Button | ||
| onClick={ () => | ||
| refreshResults( resizingType, selectedBlock ) | ||
| } | ||
| variant="link" | ||
| > | ||
| { sprintf( | ||
| /* translators: %s type of resizing */ | ||
| __( 'retry %s', 'classifai' ), | ||
| 'grow' === resizingType | ||
| ? __( 'expanding the text', 'classifai' ) | ||
| : __( 'condensing the text', 'classifai' ) | ||
| ) } | ||
| </Button> | ||
| </p> | ||
| <DisableFeatureButton feature="feature_content_resizing" /> | ||
| </Modal> | ||
| ); | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This may be more complicated than what we care about but in the case where someone has it set to only display a single suggestion,
suggestionsdoesn't make sense at that point. Very minor thing so may be fine to just leaveThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added here 6e9884d