import { IMAGE , PARAGRAPH } from 'editure-constants' ; import { Editor , Transforms , getBeforeText } from 'editure' ; import { IEditor } from './editor' ; export const IMAGE_HOSTING_URL = 'https://fc.tuture.co/upload' ; export const insertImage = ( editor , files ) => { for ( const file of files ) { const reader = new FileReader ( ) ; const [ mime ] = file . type . split ( '/' ) ; if ( mime === 'image' ) { reader . addEventListener ( 'load' , ( ) => { const url = reader . result ; if ( url ) { editor . insertVoid ( IMAGE , { url : url . toString ( ) , file } ) ; } } ) ; reader . readAsDataURL ( file ) ; } } } ; export const uploadImage = ( file , callback ) => { const data = new FormData ( ) ; data . append ( 'file' , file ) ; fetch ( IMAGE_HOSTING_URL , { method : 'POST' , body : data , } ) . then ( ( res ) => { if ( res . status !== 200 ) { throw new Error ( res . statusText ) ; } return res . json ( ) ; } ) . then ( ( data ) => { callback ( null , data . url ) ; } ) . catch ( ( err ) => callback ( err ) ) ; } ; export const createDropListener = ( editor ) => ( e ) => { e . preventDefault ( ) ; e . persist ( ) ; const { files } = e . dataTransfer ; if ( files . length === 0 || ! /\.(png|jpe?g|bmp|gif)$/ . test ( files [ 0 ] . name ) ) { return ; } insertImage ( editor , files ) ; } ; export const withImages = ( editor ) => { const { insertData , deleteBackward , isVoid } = editor ; editor . isVoid = ( element ) => element . type === IMAGE ? true : isVoid ( element ) ; editor . insertData = ( data ) => { const { files } = data ; if ( files && files . length > 0 ) { insertImage ( editor , files ) ; } else { insertData ( data ) ; } } ; editor . deleteBackward = ( unit ) => { const [ node ] = Editor . nodes ( editor , { match : ( n ) => n . type === IMAGE } ) ; if ( node ) { Transforms . setNodes ( editor , { type : PARAGRAPH } ) ; Transforms . unsetNodes ( editor , [ 'url' ] ) ; return ; } const { beforeText } = getBeforeText ( editor ) ; const previous = Editor . previous ( editor ) ; if ( previous && previous [ 0 ] . type === IMAGE && ! beforeText ) { Transforms . deselect ( editor ) ; return Transforms . select ( editor , previous [ 1 ] ) ; } deleteBackward ( unit ) ; } ; return editor ; } ;