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;