import { BMProps } from '@components/utils' ; import { ISharedContent , TIME_RESOLUTION_IN_MS } from '@models/ISharedContent' ; import { createContent , createContentsFromDataTransfer } from '@stores/sharedContents/SharedContentCreator' ; import { default as sharedContents } from '@stores/sharedContents/SharedContents' ; import _ from 'lodash' ; import { useObserver } from 'mobx-react-lite' ; import React , { useEffect } from 'react' ; import { MouseOrTouch , RndContent } from './RndContent' ; export const PastedContent = ( props ) => { const map = props . stores . map ; function onPaste ( evt ) { if ( sharedContents . pasteEnabled && map . keyInputUsers . size === 0 && evt . clipboardData ) { evt . preventDefault ( ) ; setContent ( evt . clipboardData ) ; } } function onDrop ( evt ) { evt . preventDefault ( ) ; evt . stopPropagation ( ) ; if ( evt . dataTransfer ) { setContent ( evt . dataTransfer ) ; } } const SHARE_DIRECT = true ; function setContent ( dataTransfer ) { createContentsFromDataTransfer ( dataTransfer , map ) . then ( cs => { for ( const c of cs ) { if ( SHARE_DIRECT ) { sharedContents . shareContent ( c ) ; } else { sharedContents . setPasted ( c ) ; } } } ) ; } function onShare ( ) { pastedContent . zorder = Math . floor ( Date . now ( ) / TIME_RESOLUTION_IN_MS ) ; pastedContent . pinned = true ; sharedContents . addLocalContent ( _ . cloneDeep ( pastedContent ) ) ; sharedContents . setPasted ( createContent ( ) ) ; } useEffect ( ( ) => { window . document . body . addEventListener ( 'paste' , ( event ) => { onPaste ( event ) ; } , { passive : false } ) ; window . document . body . addEventListener ( 'drop' , ( event ) => { onDrop ( event ) ; } , { passive : false } ) ; window . document . body . addEventListener ( 'dragover' , ( ev ) => { ev . preventDefault ( ) ; ev . stopPropagation ( ) ; if ( ev . dataTransfer ?. dropEffect ) { ev . dataTransfer . dropEffect = 'copy' ; } } , { passive : false } ) ; } , [ ] ) ; const pastedContent = useObserver ( ( ) => sharedContents . pasted ) ; return ( < RndContent { ... props } hideAll = { pastedContent . type === '' } content = { pastedContent } onShare = { ( evt ) => { onShare ( ) ; } } onClose = { ( evt ) => { sharedContents . setPasted ( createContent ( ) ) ; evt . stopPropagation ( ) ; } } updateAndSend = { ( nc ) => { sharedContents . setPasted ( nc ) ; } } updateOnly = { ( nc ) => { sharedContents . setPasted ( nc ) ; } } />); } ;