import { EditorState } from 'draft-js' ; import React , { ReactElement , ReactNode , useEffect , useLayoutEffect , useRef , } from 'react' ; import { MentionPluginStore } from '.' ; const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect ; export interface MentionSuggestionsPortalProps { offsetKey : string ; store : MentionPluginStore ; getEditorState ( ) : EditorState ; setEditorState ( state ) : void ; children : ReactNode ; } export default function MentionSuggestionsPortal ( props ) { const searchPortal = useRef < HTMLSpanElement > ( ) ; const searchPortalRef = ( element ) : void => { searchPortal . current = element ; props . store . setReferenceElement ( element ) ; } ; const updatePortalClientRect = ( currentProps ) : void => { currentProps . store . updatePortalClientRect ( currentProps . offsetKey , ( ) => searchPortal . current ! . getBoundingClientRect ( ) ) ; } ; useIsomorphicLayoutEffect ( ( ) => { props . store . register ( props . offsetKey ) ; props . store . setIsOpened ( true ) ; updatePortalClientRect ( props ) ; props . store . setEditorState ! ( props . store . getEditorState ! ( ) ) ; return ( ) => { props . store . unregister ( props . offsetKey ) ; props . store . setIsOpened ( false ) ; props . store . setReferenceElement ( null ) ; } ; } , [ ] ) ; useEffect ( ( ) => { updatePortalClientRect ( props ) ; } ) ; return < span ref = { searchPortalRef } > { props . children } < /span>; }