Medium-draft-ts NPM

medium-draft-ts - demo

A medium like rich WYSIWYG text editor built upon draft-js with an emphasis on eliminating mouse usage by adding relevant keyboard shortcuts.

This branch supports draft-js-plugins and can accept an array of plugins to extend the functionalities.

Priorities of project

Best performance.
Minimal package size.
Typings for all.
Good looking from box.
Full customization and controllability.

Installation

npm i medium-draft-ts

Developer

Clone this repo git clone https://github.com/dumistoklus/medium-draft.git.
Install node packages yarn install or npm i.
Start local demo npm start or yarn start. This will start a local server on port 8080.

API

Look at src/demo.tsx to insert editor it in your project.

Image uploading

Create function uploadImage:

uploadImage(file: File): Promise<UploadImageData> {
    return fetch('http://www.example.net', {
        method: 'POST',
        body: file
    }).then((response) => {
        return response.json(); // if the response is a JSON object
    }).then((success) => {
        return {
            src: success.result.src,
            srcSet: success.result.srcSet,
            sizes: success.result.sizes,
            data: {
                id: success.result.id // if you parse result html you can get it as data-id attribute
            }
        };
    }).catch((error) => {
        return Promise.resolve({
            error: error.message
        });
    });
}

Then use it in imageBlockPlugin and ImageButton if need like that:

class App extends React.Component {
    private readonly plugins: DraftPlugin[] = [
        imageBlockPlugin({
            uploadImage
        }),
        ...more plugins
    ];

    private readonly sideButtons: SideButton[] = [
        {
            component: getImageButton({
                uploadImage
            }),
        },
        ...more buttons
    ];

    public render() {
        return (
            <MediumDraftEditor
                plugins={this.plugins}
                sideButtons={this.sideButtons}
                ...more options
            />
        );
    }
}