Configuring legacyImageUploadProvider

Atlassian Ecosystem Design
, ,
1

Hello! I’m trying to implement legacyImageUploadProvider Atlaskit Editor. I’ve implemented logic for drag’n drop images and for paste images, but image button in editor’s toolbar is still useless.

This is my editor defenition

 <Editor
                    css={{ maxHeight: '500px' }}
                    onChange={onChange ? onChangeHandler : undefined}
                    onSave={onSave ? onSaveHandler : undefined}
                    onCancel={onCancel}
                    primaryToolbarComponents={primaryToolbarComponents}
                    quickInsert={false}
                    allowBreakout={true}
                    allowTextColor={true}
                    allowTextAlignment={true}
                    allowIndentation={true}
                    allowTables={{
                        allowColumnSorting: true,
                        allowColumnResizing: true,
                        allowMergeCells: true,
                        allowNumberColumn: true,
                        allowBackgroundColor: true,
                        allowHeaderRow: true,
                        allowHeaderColumn: true,
                        permittedLayouts: 'all',
                        stickToolbarToBottom: true,
                    }}
                    allowJiraIssue={false}
                    allowPanel={false}
                    allowStatus={true}
                    allowExtension={{
                        allowBreakout: true,
                    }}
                    allowRule={true}
                    allowDate={true}
                    allowLayouts={true}
                    allowTemplatePlaceholders={{ allowInserting: true }}
                    media={{
                        allowMediaSingle: true,
                        waitForMediaUpload: true,
                        allowLazyLoading: false,
                        allowMediaGroup: false,
                        useMediaPickerPopup: true
                    }}
                    allowDynamicTextSizing={true}
                    placeholder="Write something..."
                    shouldFocus={false}
                    legacyImageUploadProvider={Promise.resolve(imageUploadProviderHandler(onProcessInsertDocument))}
                    defaultValue={defaultValue}
                    {...atlaskitEditorProps}
                />

And handler looks this way:

const imageUploadProviderHandler = (action: ProcessingInsertDocumentAction | undefined) => (e: Event | undefined, insertImageFn: (props: InsertedImageProperties) => void) => {        
        if (!e) {
// this will work if toolbar button will be pressed
           return;
        }
        if (e && e.type === "drop" && e instanceof DragEvent) {
                const drag = e as DragEvent;
                if (drag.dataTransfer && action) {
                    action(drag.dataTransfer, insertImageFn);
                    return;
                }
            }

            if (e && e.type === "paste" && e instanceof ClipboardEvent) {
                const paste = e as ClipboardEvent;
                if (paste.clipboardData && action) {
                    action(paste.clipboardData, insertImageFn);
                }
            }
    }

So problem is to open media-picker and send him insertImageFn to make everething work. Is some way to implement this functionallity?

Or maybe there is a way to change “Add image” button in toolbar to my custom button?

2

@IvanKozlov Did you get any solution for this? did you made it work? can you share any example if you did it…

3

The only solution I’ve found - take another component (from another toolkit, or just separate one). No way to implement it with this. If I’m not mistaken this component was for internal usage and worked “as is”, but “as is” is not perfect…

1 Like