This is a plugin for use with draft-js-plugins-editor
It is heavily inspired by the draft-js-image-plugin.
Please note that using this plugin requires your project has aws-amplify (not @aws-amplify/storage), draft-js, react and react-dom packages installed.
DraftJS has peer dependencies on react and react-dom. Additionally, to successfully use hooks, the react import from your application code needs to resolve to the same module as the react import from inside the react-dom package.
Since the Amplify module installed in your node_modules is correctly configured (using Amplify.configure()), this library hooks directly into that configuration via the peerDependency.
This plugin assumes you've successfully configured AWS Amplify with an awsconfig.
import { Storage } from 'aws-amplify';
import { EditorState } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createS3Plugin from 'draft-js-aws-amplify-s3-plugin';
import React from 'react';
const s3Plugin = createS3Plugin();
const plugins = [s3Plugin];
// The Editor accepts an array of plugins. In this case, only the s3Plugin
// is passed in, although it is possible to pass in multiple plugins.
const MyEditor = ({ editorState }: { editorState: EditorState }) => {
const onImageChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const { files } = e.target;
const [file] = Array.from(files);
const { key: s3Key } = (await Storage.put(file.name, file)) as {
key: string;
};
const newEditorState = s3Plugin.addS3Image(editorState, s3Key);
setEditorState(newEditorState);
};
return (
<>
<Editor editorState={editorState} onChange={onChange} plugins={plugins} />
<input type="file" onChange={onImageChange} />
</>
);
};
export default MyEditor;