import React , { ComponentType , ReactElement , ReactNode } from 'react' ; import { Map } from 'immutable' ; import { EditorPlugin } from '@draft-js-plugins/editor' ; import addSticker from './modifiers/addSticker' ; import removeSticker from './modifiers/removeSticker' ; import cleanupEmptyStickers from './modifiers/cleanupEmptyStickers' ; import blockRendererFn from './blockRendererFn' ; import Sticker , { StickerPubProps } from './Sticker' ; import StickerSelect , { StickerSelectPubParams } from './StickerSelect' ; import { defaultTheme , StickerPluginTheme } from './theme' ; export type ImmutableStickerPluginItem = Immutable . Map < string , Immutable . Map < string , string > > ; export type ImmutableDataStickerPluginItem = Immutable . Map < string , ImmutableStickerPluginItem > ; export interface StickerPluginConfig { attachRemoveButton ? : boolean ; theme ? : StickerPluginTheme ; stickers : ImmutableDataStickerPluginItem ; selectButtonContent ? : ReactNode ; } export default ( config ) : EditorPlugin & { add : typeof addSticker ; remove : typeof removeSticker ; StickerSelect : ComponentType < StickerSelectPubParams > ; } => { const theme = config . theme ? config . theme : defaultTheme ; const stickers = config . stickers ; const selectButtonContent = config . selectButtonContent ? config . selectButtonContent : '☺' ; const attachRemoveButton = config . attachRemoveButton !== false ; const DecoratedSticker = ( props ) : ReactElement => ( < Sticker { ... props } attachRemoveButton = { attachRemoveButton } stickers = { stickers } theme = { theme } / > ) ; const DecoratedStickerSelect = ( props ) : ReactElement => ( < StickerSelect { ... props } selectButtonContent = { selectButtonContent } stickers = { stickers } theme = { theme } / > ) ; return { blockRendererFn : blockRendererFn ( DecoratedSticker ) , onChange : cleanupEmptyStickers , add : addSticker , remove : removeSticker , blockRenderMap : Map ( { sticker : { element : 'div' } } ) , StickerSelect : DecoratedStickerSelect , } ; } ;