From 1673ba1763c93913a6cc9bb728882a153b943516 Mon Sep 17 00:00:00 2001 From: Douglas Henri Date: Tue, 27 Aug 2024 18:54:44 -0300 Subject: [PATCH] AI Assistant: Fix flickering when adding word to Breve dictionary (#39087) * reload the highlights without using the loading flag * changelog --- ...tpack-ai-breve-add-to-dictionary-without-flickering | 4 ++++ .../breve/features/spelling-mistakes/index.ts | 2 +- .../components/breve/store/actions.ts | 10 +++------- .../components/breve/store/reducer.ts | 7 +++++++ .../components/breve/store/selectors.ts | 4 ++++ .../ai-assistant-plugin/components/breve/types.ts | 4 +++- .../components/breve/utils/register-format.ts | 2 ++ 7 files changed, 24 insertions(+), 9 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/update-jetpack-ai-breve-add-to-dictionary-without-flickering diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-breve-add-to-dictionary-without-flickering b/projects/plugins/jetpack/changelog/update-jetpack-ai-breve-add-to-dictionary-without-flickering new file mode 100644 index 0000000000000..e6181dd6d8f45 --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-jetpack-ai-breve-add-to-dictionary-without-flickering @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +AI Assistant: Fix flickering when adding word to Breve dictionary diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/spelling-mistakes/index.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/spelling-mistakes/index.ts index cd625c81cdf18..21166597ad972 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/spelling-mistakes/index.ts +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/spelling-mistakes/index.ts @@ -143,7 +143,7 @@ export const addTextToDictionary = ( // Recompute the spell checker on the next call delete spellCheckers[ language ]; - reloadDictionary( SPELLING_MISTAKES.name ); + reloadDictionary(); debug( 'Added text to the dictionary', text ); }; diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/actions.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/actions.ts index 72ebf415c5482..9ce094a8367d4 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/actions.ts +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/actions.ts @@ -90,13 +90,9 @@ export function invalidateSingleSuggestion( feature: string, blockId: string, id }; } -export function reloadDictionary( feature: string ) { - return ( { dispatch } ) => { - dispatch( setDictionaryLoading( feature, true ) ); - - setTimeout( () => { - dispatch( setDictionaryLoading( feature, false ) ); - }, 100 ); +export function reloadDictionary() { + return { + type: 'RELOAD_DICTIONARY', }; } diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/reducer.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/reducer.ts index 1c97518ccdf51..40f90e998ae8b 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/reducer.ts +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/reducer.ts @@ -76,6 +76,13 @@ export function configuration( loading, }; } + + case 'RELOAD_DICTIONARY': { + return { + ...state, + reload: ! state.reload, + }; + } } return state; diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/selectors.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/selectors.ts index fcd481d8a3b4d..05f35ae1536ef 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/selectors.ts +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/selectors.ts @@ -39,6 +39,10 @@ export function getDisabledFeatures( state: BreveState ) { return state.configuration?.disabled; } +export function getReloadFlag( state: BreveState ) { + return state.configuration?.reload; +} + // Suggestions export function getBlockMd5( state: BreveState, blockId: string ) { diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts index bf5ac42d73fca..e2cd804d24821 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts @@ -19,6 +19,7 @@ export type BreveState = { enabled?: boolean; disabled?: Array< string >; loading?: Array< string >; + reload?: boolean; }; suggestions?: { [ key: string ]: { @@ -67,6 +68,7 @@ export type BreveSelect = { suggestion: string; }; getIgnoredSuggestions: ( { blockId }: { blockId: string } ) => Array< string >; + getReloadFlag: () => boolean; }; export type BreveDispatch = { @@ -78,7 +80,7 @@ export type BreveDispatch = { setDictionaryLoading( feature: string, loading: boolean ): void; invalidateSuggestions: ( blockId: string ) => void; invalidateSingleSuggestion: ( feature: string, blockId: string, id: string ) => void; - reloadDictionary: ( feature: string ) => void; + reloadDictionary: () => void; ignoreSuggestion: ( blockId: string, id: string ) => void; setBlockMd5: ( blockId: string, md5: string ) => void; setSuggestions: ( suggestions: { diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/utils/register-format.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/utils/register-format.ts index a36cf92a90ec4..cb219cb272cdb 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/utils/register-format.ts +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/utils/register-format.ts @@ -50,6 +50,7 @@ export function registerBreveHighlight( feature: BreveFeature ) { isFeatureEnabled, isProofreadEnabled, isFeatureDictionaryLoading, + getReloadFlag, } = select( 'jetpack/ai-breve' ) as BreveSelect; const { getAiAssistantFeature } = select( 'wordpress-com/plans' ); @@ -60,6 +61,7 @@ export function registerBreveHighlight( feature: BreveFeature ) { isFeatureEnabled: isFeatureEnabled( config.name ), ignored: getIgnoredSuggestions( { blockId: blockClientId } ), isFeatureDictionaryLoading: isFeatureDictionaryLoading( config.name ), + reloadFlag: getReloadFlag(), // Used to force a reload of the highlights }; },