Neolithic Prancing Minotaurs

    @alexkuz/draft-js-plugins

    0.0.0 • Public • Published

    DraftJS Plugins

    Draft JS Plugins Logo

    High quality plugins with great UX on to of DraftJS.

    Available Plugins

    • Stickers
    • Hashtags
    • Linkify
    • Mentions

    Build Status

    Live Example

    Checkout the website!

    Usage

    First, install the editor with npm:

    $ npm install draft-js-plugins-editor --save
    

    and then import it somewhere in your code and you're ready to go!

    import Editor from 'draft-js-plugins-editor';

    Documentation

    draft-js-plugins-editor

    Editor

    An editor component accepting plugins.

    Props Description Required
    editorState see here *
    onChange see here *
    plugins an array of plugins
    all other props accepted by the DraftJS Editor see here

    Usage:

    import React, { Component } from 'react';
    import Editor from 'draft-js-plugins-editor';
    import createHashtagPlugin from 'draft-js-hashtag-plugin';
    import createLinkifyPlugin from 'draft-js-linkify-plugin';
    import { EditorState } from 'draft-js';
    
    const hashtagPlugin = createHashtagPlugin();
    const linkifyPlugin = createLinkifyPlugin();
    
    const plugins = [
      hashtagPlugin,
      linkifyPlugin,
    ];
    
    export default class UnicornEditor extends Component {
    
      state = {
        editorState: EditorState.createEmpty(),
      };
    
      onChange = (editorState) => {
        this.setState({
          editorState,
        });
      };
    
      render() {
        return (
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={plugins}
            spellCheck
            readOnly={ this.state.readOnly }
            ref="editor"
          />
        );
      }
    }

    createEditorStateWithText

    Function to creates an EditorState with some text.

    Usage:

    import { createEditorStateWithText } from 'draft-js-plugins-editor';
    
    const editorState = createEditorStateWithText('Hello World!', plugins);

    Plugins

    • draft-js-sticker-plugin
    • draft-js-hastag-plugin
    • draft-js-linkify-plugin

    How to write a Plugin

    Feel free to copy any of the existing plugins as a starting point. Feel free to directly contact @nikgraf in case you need help or open a Github Issue!

    More documentation is coming soon…

    Development

    npm install
    cd site
    npm install
    npm start
    

    Discussion and Support

    Join the channel #plugin-editor after signing into the DraftJS Slack organization!

    License

    MIT

    Install

    npm i @alexkuz/draft-js-plugins

    DownloadsWeekly Downloads

    7

    Version

    0.0.0

    License

    MIT

    Last publish

    Collaborators

    • alexkuz