@@ -55,6 +55,7 @@ const aiIconSvg = (
55
55
const DEFAULT_STATE = {
56
56
clientId : '' ,
57
57
resizingType : null ,
58
+ isResizing : false ,
58
59
} ;
59
60
60
61
const resizeContentStore = createReduxStore ( 'resize-content-store' , {
@@ -71,6 +72,12 @@ const resizeContentStore = createReduxStore( 'resize-content-store', {
71
72
...state ,
72
73
resizingType : action . resizingType ,
73
74
} ;
75
+
76
+ case 'SET_IS_RESIZING' :
77
+ return {
78
+ ...state ,
79
+ isResizing : action . isResizing ,
80
+ } ;
74
81
}
75
82
76
83
return state ;
@@ -88,6 +95,12 @@ const resizeContentStore = createReduxStore( 'resize-content-store', {
88
95
resizingType,
89
96
} ;
90
97
} ,
98
+ setIsResizing ( isResizing ) {
99
+ return {
100
+ type : 'SET_IS_RESIZING' ,
101
+ isResizing,
102
+ } ;
103
+ } ,
91
104
} ,
92
105
selectors : {
93
106
getClientId ( state ) {
@@ -96,13 +109,14 @@ const resizeContentStore = createReduxStore( 'resize-content-store', {
96
109
getResizingType ( state ) {
97
110
return state . resizingType ;
98
111
} ,
112
+ getIsResizing ( state ) {
113
+ return state . isResizing ;
114
+ } ,
99
115
} ,
100
116
} ) ;
101
117
102
118
register ( resizeContentStore ) ;
103
119
104
- let isProcessAnimating = false ;
105
-
106
120
const ContentResizingPlugin = ( ) => {
107
121
// Holds the original text of the block being procesed.
108
122
const [ blockContentAsPlainText , setBlockContentAsPlainText ] =
@@ -114,19 +128,19 @@ const ContentResizingPlugin = () => {
114
128
// Holds the GPT response array.
115
129
const [ textArray , setTextArray ] = useState ( [ ] ) ;
116
130
117
- // Indicates if content resizing is in progress.
118
- const [ isResizing , setIsResizing ] = useState ( false ) ;
119
-
120
131
// Indicates if the modal window with the result is open/closed.
121
132
const [ isModalOpen , setIsModalOpen ] = useState ( false ) ;
122
133
123
- const { isMultiBlocksSelected, resizingType } = useSelect ( ( __select ) => {
124
- return {
125
- isMultiBlocksSelected :
126
- __select ( blockEditorStore ) . hasMultiSelection ( ) ,
127
- resizingType : __select ( resizeContentStore ) . getResizingType ( ) ,
128
- } ;
129
- } ) ;
134
+ const { isMultiBlocksSelected, resizingType, isResizing } = useSelect (
135
+ ( __select ) => {
136
+ return {
137
+ isMultiBlocksSelected :
138
+ __select ( blockEditorStore ) . hasMultiSelection ( ) ,
139
+ resizingType : __select ( resizeContentStore ) . getResizingType ( ) ,
140
+ isResizing : __select ( resizeContentStore ) . getIsResizing ( ) ,
141
+ } ;
142
+ }
143
+ ) ;
130
144
131
145
// Sets required states before resizing content.
132
146
useEffect ( ( ) => {
@@ -139,22 +153,21 @@ const ContentResizingPlugin = () => {
139
153
140
154
// Triggers AJAX request to resize the content.
141
155
useEffect ( ( ) => {
142
- if ( isResizing ) {
156
+ if ( isResizing && selectedBlock ) {
143
157
( async ( ) => {
144
158
const __textArray = await getResizedContent ( ) ;
145
159
setTextArray ( __textArray ) ;
146
160
setIsModalOpen ( true ) ;
147
161
} ) ( ) ;
148
162
}
149
- } , [ isResizing , getResizedContent ] ) ;
163
+ } , [ isResizing , selectedBlock ] ) ;
150
164
151
165
// Resets to default states.
152
166
function resetStates ( ) {
153
167
setSelectedBlock ( null ) ;
154
168
setTextArray ( [ ] ) ;
155
169
setIsModalOpen ( false ) ;
156
170
dispatch ( resizeContentStore ) . setResizingType ( null ) ;
157
- isProcessAnimating = false ;
158
171
}
159
172
160
173
/**
@@ -169,7 +182,7 @@ const ContentResizingPlugin = () => {
169
182
170
183
setSelectedBlock ( block ) ;
171
184
setBlockContentAsPlainText ( toPlainText ( blockContent ) ) ;
172
- setIsResizing ( true ) ;
185
+ dispatch ( resizeContentStore ) . setIsResizing ( true ) ;
173
186
}
174
187
175
188
/**
@@ -200,12 +213,12 @@ const ContentResizingPlugin = () => {
200
213
if ( 200 === response . status ) {
201
214
__textArray = await response . json ( ) ;
202
215
} else {
203
- setIsResizing ( false ) ;
216
+ dispatch ( resizeContentStore ) . setIsResizing ( false ) ;
204
217
dispatch ( resizeContentStore ) . setClientId ( '' ) ;
205
218
resetStates ( ) ;
206
219
}
207
220
208
- setIsResizing ( false ) ;
221
+ dispatch ( resizeContentStore ) . setIsResizing ( false ) ;
209
222
dispatch ( resizeContentStore ) . setClientId ( '' ) ;
210
223
211
224
return __textArray ;
@@ -385,8 +398,11 @@ registerPlugin( 'tenup-openai-expand-reduce-content', {
385
398
386
399
const colorsArray = [ '#8c2525' , '#ca4444' , '#303030' ] ;
387
400
401
+ let timeoutId = 0 ;
402
+
388
403
function processAnimation ( content = '' ) {
389
- if ( isProcessAnimating ) {
404
+ if ( ! select ( resizeContentStore ) . getIsResizing ( ) ) {
405
+ clearTimeout ( timeoutId ) ;
390
406
return ;
391
407
}
392
408
@@ -410,7 +426,7 @@ function processAnimation( content = '' ) {
410
426
) . innerHTML = formattedCharArray . join ( ' ' ) ;
411
427
}
412
428
413
- setTimeout ( ( ) => {
429
+ timeoutId = setTimeout ( ( ) => {
414
430
requestAnimationFrame ( ( ) => processAnimation ( content ) ) ;
415
431
} , 1000 / 1.35 ) ;
416
432
}
@@ -451,7 +467,7 @@ const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {
451
467
452
468
const __plainTextContent = toPlainText ( props . attributes . content ) ;
453
469
454
- if ( ! isProcessAnimating ) {
470
+ if ( select ( resizeContentStore ) . getIsResizing ( ) ) {
455
471
requestAnimationFrame ( ( ) =>
456
472
processAnimation ( __plainTextContent )
457
473
) ;
0 commit comments