From 8ff0828c6311c5a0179415882c61264b22d76b50 Mon Sep 17 00:00:00 2001 From: Douglas Henri Date: Thu, 11 Jul 2024 11:54:23 -0300 Subject: [PATCH] AI Assistant: Add ambiguous words to proofread features list (#38292) * fix ts issues and add types * add ambiguous words feature * fix menu spacing * changelog --- .../changelog/add-proofread-weasel-words | 4 ++ .../components/breve/breve.scss | 7 +++ .../components/breve/controls.js | 20 ++++---- .../breve/dictionaries/dictionaries-config.js | 2 +- .../breve/features/_features.colors.scss | 3 +- .../breve/features/ambiguous-words/index.ts | 34 ++++++++++++++ .../ambiguous-words/words.ts} | 0 .../breve/features/complex-words/index.ts | 24 ++++++---- .../complex-words/{phrases.js => phrases.ts} | 0 .../components/breve/features/events.ts | 22 +++++---- .../components/breve/features/index.ts | 13 ++++- .../components/breve/highlight/highlight.ts | 32 +++++++++---- .../components/breve/highlight/index.tsx | 29 ++++++++---- .../components/breve/highlight/style.scss | 2 +- .../components/breve/index.ts | 9 +++- .../components/breve/store/actions.ts | 6 +-- .../components/breve/store/reducer.ts | 10 +++- .../components/breve/store/selectors.ts | 29 +++++++----- .../components/breve/types.ts | 47 +++++++++++++++++++ 19 files changed, 225 insertions(+), 68 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/add-proofread-weasel-words create mode 100644 projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/ambiguous-words/index.ts rename projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/{dictionaries/weaselWords.js => features/ambiguous-words/words.ts} (100%) rename projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/complex-words/{phrases.js => phrases.ts} (100%) create mode 100644 projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts diff --git a/projects/plugins/jetpack/changelog/add-proofread-weasel-words b/projects/plugins/jetpack/changelog/add-proofread-weasel-words new file mode 100644 index 0000000000000..2e6eb6c61641d --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-proofread-weasel-words @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +AI Assistant: Add ambiguous words to proofread features list diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss index 06879afce760f..d94add53ee4c6 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss @@ -2,6 +2,7 @@ .jetpack-ai-proofread { margin-bottom: 24px; + .components-checkbox-control { color: #757575; @@ -22,4 +23,10 @@ color: #757575; margin-left: 12px; } + + .feature-checkboxes-container { + display: flex; + flex-direction: column; + gap: 12px; + } } diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.js b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.js index addd8b104a102..3dce85adaaee1 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.js +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.js @@ -118,15 +118,17 @@ const Controls = ( { blocks, disabledFeatures } ) => { onChange={ handleAiFeedbackToggle } label={ __( 'Show suggestions', 'jetpack' ) } /> - { features.map( feature => ( - - ) ) } +
+ { features.map( feature => ( + + ) ) } +
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/dictionaries/dictionaries-config.js b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/dictionaries/dictionaries-config.js index 9c533956a31eb..23b0a1f3e5ad2 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/dictionaries/dictionaries-config.js +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/dictionaries/dictionaries-config.js @@ -1,8 +1,8 @@ import phrases from '../features/complex-words/phrases'; +import weaselWords from '../features/weasel-words/words'; import { escapeRegExp } from '../utils/escapeRegExp'; import adjectives from './adjectives'; import adverbs from './adverbs'; -import weaselWords from './weaselWords'; const config = { dictionaries: { diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/_features.colors.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/_features.colors.scss index 2777184f72968..a7e43dc64d0ca 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/_features.colors.scss +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/_features.colors.scss @@ -2,7 +2,8 @@ @use 'sass:string'; $features-colors: ( - 'complex-words': rgba( 251, 192, 45, 1 ), + 'complex-words': rgba( 240, 184, 73, 1 ), + 'ambiguous-words': rgba( 0, 175, 82, 1 ), ); @mixin properties( $feature, $color, $properties ) { diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/ambiguous-words/index.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/ambiguous-words/index.ts new file mode 100644 index 0000000000000..bf0cc8d763e48 --- /dev/null +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/ambiguous-words/index.ts @@ -0,0 +1,34 @@ +/** + * Internal dependencies + */ +import { escapeRegExp } from '../../utils/escapeRegExp'; +import weaselWords from './words'; +/** + * Types + */ +import type { BreveFeatureConfig, HighlightedWord } from '../../types'; + +export const AMBIGUOUS_WORDS: BreveFeatureConfig = { + name: 'ambiguous-words', + title: 'Ambiguous words', + tagName: 'span', + className: 'has-proofread-highlight--ambiguous-words', +}; + +const list = new RegExp( `\\b(${ weaselWords.map( escapeRegExp ).join( '|' ) })\\b`, 'gi' ); + +export default function ambiguousWords( text: string ): Array< HighlightedWord > { + const matches = text.matchAll( list ); + const highlightedWords: Array< HighlightedWord > = []; + + for ( const match of matches ) { + const word = match[ 0 ].trim(); + highlightedWords.push( { + word, + startIndex: match.index, + endIndex: match.index + word.length, + } ); + } + + return highlightedWords; +} diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/dictionaries/weaselWords.js b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/ambiguous-words/words.ts similarity index 100% rename from projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/dictionaries/weaselWords.js rename to projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/ambiguous-words/words.ts diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/complex-words/index.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/complex-words/index.ts index b6fed7ce65e15..85acfba4f0aec 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/complex-words/index.ts +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/complex-words/index.ts @@ -3,26 +3,30 @@ */ import { escapeRegExp } from '../../utils/escapeRegExp'; import phrases from './phrases'; +/** + * Types + */ +import type { BreveFeatureConfig, HighlightedWord } from '../../types'; -export const COMPLEX_WORDS = { +export const COMPLEX_WORDS: BreveFeatureConfig = { name: 'complex-words', title: 'Complex words', tagName: 'span', - className: 'has-proofread-highlight', + className: 'has-proofread-highlight--complex-words', }; -export default function complexWords( text ) { - const list = new RegExp( - `\\b(${ Object.keys( phrases ).map( escapeRegExp ).join( '|' ) })\\b`, - 'gi' - ); +const list = new RegExp( + `\\b(${ Object.keys( phrases ).map( escapeRegExp ).join( '|' ) })\\b`, + 'gi' +); +export default function complexWords( text: string ): Array< HighlightedWord > { const matches = text.matchAll( list ); - const words = []; + const highlightedWords: Array< HighlightedWord > = []; for ( const match of matches ) { const word = match[ 0 ].trim(); - words.push( { + highlightedWords.push( { word, suggestion: phrases[ word ], startIndex: match.index, @@ -30,5 +34,5 @@ export default function complexWords( text ) { } ); } - return words; + return highlightedWords; } diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/complex-words/phrases.js b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/complex-words/phrases.ts similarity index 100% rename from projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/complex-words/phrases.js rename to projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/complex-words/phrases.ts diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/events.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/events.ts index 9239f59772d39..4cd12de962c65 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/events.ts +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/events.ts @@ -7,23 +7,24 @@ import { dispatch } from '@wordpress/data'; */ import getContainer from './container'; import features from './index'; +/** + * Types + */ +import type { BreveDispatch } from '../types'; -let timeout; +let timeout: number; -function handleMouseEnter( e ) { +function handleMouseEnter( e: React.MouseEvent ) { e.stopPropagation(); clearTimeout( timeout ); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ( dispatch( 'jetpack/ai-breve' ) as any ).setHighlightHover( true ); - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ( dispatch( 'jetpack/ai-breve' ) as any ).setPopoverAnchor( e.target ); + ( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).setHighlightHover( true ); + ( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).setPopoverAnchor( e.target ); } -function handleMouseLeave( e ) { +function handleMouseLeave( e: React.MouseEvent ) { e.stopPropagation(); timeout = setTimeout( () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ( dispatch( 'jetpack/ai-breve' ) as any ).setHighlightHover( false ); + ( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).setHighlightHover( false ); }, 100 ); } @@ -33,7 +34,8 @@ export default function registerEvents( clientId: string ) { const block = container?.querySelector?.( `#${ id }` ); features.forEach( ( { config } ) => { - const items = block?.querySelectorAll?.( `[data-type='${ config.name }']` ); + const items = block?.querySelectorAll?.( `[data-type='${ config.name }']` ) || []; + if ( items?.length > 0 ) { items.forEach( highlightEl => { highlightEl?.removeEventListener?.( 'mouseenter', handleMouseEnter ); diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/index.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/index.ts index b39f8582e4013..5c14e7aa36a27 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/index.ts +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/index.ts @@ -1,12 +1,23 @@ /** * Features */ +import ambiguousWords, { AMBIGUOUS_WORDS } from './ambiguous-words'; import complexWords, { COMPLEX_WORDS } from './complex-words'; +/** + * Types + */ +import type { BreveFeature } from '../types'; // Breve Highlights Features -export default [ +const features: Array< BreveFeature > = [ { config: COMPLEX_WORDS, highlight: complexWords, }, + { + config: AMBIGUOUS_WORDS, + highlight: ambiguousWords, + }, ]; + +export default features; diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/highlight.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/highlight.ts index 1a57a16ff34d1..aa76c615fb0a4 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/highlight.ts +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/highlight.ts @@ -7,18 +7,34 @@ import { applyFormat } from '@wordpress/rich-text'; */ import type { RichTextFormat, RichTextValue } from '@wordpress/rich-text/build-types/types'; -const applyHighlightFormat = ( { content, type, indexes, attributes = {} } ): RichTextValue => { +const applyHighlightFormat = ( { + content, + type, + indexes, + attributes = {}, +}: { + content: RichTextValue; + type: string; + indexes: Array< { startIndex: number; endIndex: number } >; + attributes: { [ key: string ]: string }; +} ): RichTextValue => { let newContent = content; if ( indexes.length > 0 ) { - newContent = indexes.reduce( ( acc, { startIndex, endIndex } ) => { - const format = { - type, - attributes, - } as RichTextFormat; + newContent = indexes.reduce( + ( + acc: RichTextValue, + { startIndex, endIndex }: { startIndex: number; endIndex: number } + ) => { + const format = { + type, + attributes, + } as RichTextFormat; - return applyFormat( acc, format, startIndex, endIndex ); - }, content ); + return applyFormat( acc, format, startIndex, endIndex ); + }, + content + ); } return newContent; diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx index 8293e74bd5256..e1d7acc64118a 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx @@ -5,6 +5,7 @@ import { Button, Popover } from '@wordpress/components'; import { select as globalSelect, useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { registerFormatType, removeFormat, RichTextValue } from '@wordpress/rich-text'; +import React from 'react'; /** * Internal dependencies */ @@ -13,27 +14,30 @@ import features from '../features'; import registerEvents from '../features/events'; import highlight from './highlight'; import './style.scss'; +/** + * Types + */ +import type { BreveSelect } from '../types'; +import type { RichTextFormatList } from '@wordpress/rich-text/build-types/types'; // Setup the Breve highlights export default function Highlight() { const { setPopoverHover } = useDispatch( 'jetpack/ai-breve' ); const popoverOpen = useSelect( select => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const store = select( 'jetpack/ai-breve' ) as any; + const store = select( 'jetpack/ai-breve' ) as BreveSelect; const isPopoverHover = store.isPopoverHover(); const isHighlightHover = store.isHighlightHover(); return isHighlightHover || isPopoverHover; }, [] ); const anchor = useSelect( select => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - return ( select( 'jetpack/ai-breve' ) as any ).getPopoverAnchor(); + return ( select( 'jetpack/ai-breve' ) as BreveSelect ).getPopoverAnchor(); }, [] ); const isPopoverOpen = popoverOpen && anchor; - const selectedFeatured = anchor ? anchor?.getAttribute?.( 'data-type' ) : null; + const selectedFeatured = anchor ? ( anchor as HTMLElement )?.getAttribute?.( 'data-type' ) : null; const featureConfig = features?.find?.( feature => feature.config.name === selectedFeatured ) ?.config ?? { @@ -79,21 +83,28 @@ export default function Highlight() { } export function registerBreveHighlights() { - features.forEach( ( { config, highlight: featureHighlight } ) => { + features.forEach( feature => { + const { highlight: featureHighlight, config } = feature; const { name, ...configSettings } = config; + const settings = { ...configSettings, + __experimentalGetPropsForEditableTreePreparation() { return { - isProofreadEnabled: globalSelect( 'jetpack/ai-breve' ).isProofreadEnabled(), - isFeatureEnabled: globalSelect( 'jetpack/ai-breve' ).isFeatureEnabled( config.name ), + isProofreadEnabled: ( + globalSelect( 'jetpack/ai-breve' ) as BreveSelect + ).isProofreadEnabled(), + isFeatureEnabled: ( globalSelect( 'jetpack/ai-breve' ) as BreveSelect ).isFeatureEnabled( + config.name + ), }; }, __experimentalCreatePrepareEditableTree( { isProofreadEnabled, isFeatureEnabled }, { blockClientId } ) { - return ( formats, text ) => { + return ( formats: Array< RichTextFormatList >, text: string ) => { const record = { formats, text } as RichTextValue; const type = `jetpack/ai-proofread-${ config.name }`; diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss index be3683514b980..b0ff0f52af452 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss @@ -1,6 +1,6 @@ @import '../features/features.colors'; -.has-proofread-highlight { +[class^="has-proofread-highlight"] { border-bottom: 3px solid; @include features-colors( ( 'border-bottom-color' ) ); } diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/index.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/index.ts index d37d17781a9ce..d5e594cd72e14 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/index.ts +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/index.ts @@ -1,7 +1,14 @@ +/** + * Internal dependencies + */ import Controls from './controls'; import { store } from './store'; // Register the store +/** + * Types + */ +import { BreveControls } from './types'; -const Breve = Controls as () => React.JSX.Element; +const Breve = Controls as BreveControls; export { Breve }; export { default as Highlight, registerBreveHighlights } from './highlight'; 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 6fbb243757b3a..c03a1cf98a8d0 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 @@ -5,21 +5,21 @@ import { select } from '@wordpress/data'; // ACTIONS -export function setHighlightHover( isHover ) { +export function setHighlightHover( isHover: boolean ) { return { type: 'SET_HIGHLIGHT_HOVER', isHover, }; } -export function setPopoverHover( isHover ) { +export function setPopoverHover( isHover: boolean ) { return { type: 'SET_POPOVER_HOVER', isHover, }; } -export function setPopoverAnchor( anchor ) { +export function setPopoverAnchor( anchor: HTMLElement | EventTarget ) { return { type: 'SET_POPOVER_ANCHOR', anchor, 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 04c6443c654a5..3f94a9ecebd37 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 @@ -14,7 +14,10 @@ const initialConfiguration = { disabledFeaturesFromLocalStorage !== null ? JSON.parse( disabledFeaturesFromLocalStorage ) : [], }; -export function configuration( state = initialConfiguration, action ) { +export function configuration( + state = initialConfiguration, + action: { type: string; enabled?: boolean; feature?: string } +) { switch ( action.type ) { case 'SET_PROOFREAD_ENABLED': { const enabled = action?.enabled !== undefined ? action?.enabled : ! state?.enabled; @@ -54,7 +57,10 @@ export function configuration( state = initialConfiguration, action ) { return state; } -export function popover( state = {}, action ) { +export function popover( + state = {}, + action: { type: string; isHover?: boolean; anchor?: HTMLElement } +) { switch ( action.type ) { case 'SET_HIGHLIGHT_HOVER': return { 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 4d0df05d84242..bcdaa0f64829f 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 @@ -1,27 +1,32 @@ +/** + * Types + */ +import type { BreveState } from '../types'; + // POPOVER -export function isHighlightHover( state ) { - return state.popover.isHighlightHover; +export function isHighlightHover( state: BreveState ) { + return state.popover?.isHighlightHover; } -export function isPopoverHover( state ) { - return state.popover.isPopoverHover; +export function isPopoverHover( state: BreveState ) { + return state.popover?.isPopoverHover; } -export function getPopoverAnchor( state ) { - return state.popover.anchor; +export function getPopoverAnchor( state: BreveState ) { + return state.popover?.anchor; } // CONFIGURATION -export function isProofreadEnabled( state ) { - return state.configuration.enabled; +export function isProofreadEnabled( state: BreveState ) { + return state.configuration?.enabled; } -export function isFeatureEnabled( state, feature ) { - return ! state.configuration.disabled.includes( feature ); +export function isFeatureEnabled( state: BreveState, feature: string ) { + return ! state.configuration?.disabled?.includes( feature ); } -export function getDisabledFeatures( state ) { - return state.configuration.disabled; +export function getDisabledFeatures( state: BreveState ) { + return state.configuration?.disabled; } 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 new file mode 100644 index 0000000000000..0694823fa94ef --- /dev/null +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts @@ -0,0 +1,47 @@ +export type BreveControls = () => React.JSX.Element; + +export type BreveState = { + popover?: { + isHighlightHover?: boolean; + isPopoverHover?: boolean; + anchor?: HTMLElement | EventTarget; + }; + configuration?: { + enabled?: boolean; + disabled?: Array< string >; + }; +}; + +export type BreveSelect = { + isHighlightHover: () => boolean; + isPopoverHover: () => boolean; + getPopoverAnchor: () => HTMLElement | EventTarget; + isProofreadEnabled: () => boolean; + isFeatureEnabled: ( feature: string ) => boolean; + getDisabledFeatures: () => Array< string >; +}; + +export type BreveDispatch = { + setHighlightHover: ( isHover: boolean ) => void; + setPopoverHover: ( isHover: boolean ) => void; + setPopoverAnchor: ( anchor: HTMLElement | EventTarget ) => void; +}; + +export type BreveFeatureConfig = { + name: string; + title: string; + tagName: string; + className: string; +}; + +export type BreveFeature = { + config: BreveFeatureConfig; + highlight: ( text: string ) => Array< HighlightedWord >; +}; + +export type HighlightedWord = { + word: string; + suggestion?: string; + startIndex: number; + endIndex: number; +};