https://github.com/aryanj-nyc/draft-js-aws-amplify-s3-plugin

A plugin for use with draft-js-plugins-editor and aws-amplify.
https://github.com/aryanj-nyc/draft-js-aws-amplify-s3-plugin

amplify-js aws aws-amplify aws-s3 draft-js draft-js-plugins draftjs s3

Last synced: about 7 hours ago
JSON representation

A plugin for use with draft-js-plugins-editor and aws-amplify.

• Host: GitHub
• URL: https://github.com/aryanj-nyc/draft-js-aws-amplify-s3-plugin
• Owner: AryanJ-NYC
• License: mit
• Created: 2019-12-25T07:35:49.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T03:38:42.000Z (almost 2 years ago)
• Last Synced: 2024-08-09T21:27:32.692Z (3 months ago)
• Topics: amplify-js, aws, aws-amplify, aws-s3, draft-js, draft-js-plugins, draftjs, s3
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/draft-js-aws-amplify-s3-plugin
• Size: 1.66 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# DraftJS AWS Amplify S3 Plugin

This is a plugin for use with [draft-js-plugins-editor](https://github.com/draft-js-plugins/draft-js-plugins)

It is heavily inspired by the [draft-js-image-plugin](https://www.draft-js-plugins.com/plugin/image).

## Assumptions

### Peer Dependencies

Please note that using this plugin requires your project has `aws-amplify` (not `@aws-amplify/storage`), `draft-js`, `react` and `react-dom` packages installed.

#### Peer Dependencies Motivation

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](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react).

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`.

### Amplify Configuration

This plugin assumes you've successfully [configured AWS `Amplify`](https://aws-amplify.github.io/amplify-js/api/#configuration) with an `awsconfig`.

## Example Usage

```typescript

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) => {

    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 (

    <>

      

      

    >

  );

};

export default MyEditor;

```