draft-js-plugins / draft-js-plugins Goto Github PK

View Code? Open in Web Editor NEW

4.1K 4.1K 1.0K 24.7 MB

React Plugin Architecture for Draft.js including Slack-Like Emojis, FB-Like Mentions and Stickers

Home Page: https://www.draft-js-plugins.com/

License: MIT License

JavaScript 27.46% Shell 0.06% CSS 7.79% HTML 0.01% TypeScript 64.68%

draft-js draft-js-plugins hashtags mentions react stickers

draft-js-plugins's Introduction

DraftJS Plugins

High quality plugins with great UX on top of DraftJS.

Available Plugins (incl. Docs)

Built by the community

Live Example & Documentation

Checkout the website!

Usage

First, install the editor with npm:

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

Then import the editor 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. see source

Props	Description	Required
editorState	see here	*
onChange	see here	*
plugins	an array of plugins
decorators	an array of custom decorators
defaultKeyBindings	bool
defaultBlockRenderMap	bool
all other props accepted by the DraftJS Editor except decorator	see here

Usage:

import React, { Component } from 'react';
import Editor from '@draft-js-plugins/editor';
import createHashtagPlugin from '@draft-js-plugins/hashtag';
import createLinkifyPlugin from '@draft-js-plugins/linkify';
import { EditorState } from 'draft-js';

const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();

const plugins = [linkifyPlugin, hashtagPlugin];

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}
      />
    );
  }
}

How to write a Plugin

Feel free to copy any of the existing plugins as a starting point.In this repository you can also find a Guide on how to create a plugin, including a description of the supported features. In addition you can contact @nikgraf directly in case you need help or simply open a Github Issue!

Discussion and Support

Join the channel #draft-js-plugins after signing into the DraftJS Slack organization or check out our collection of frequently asked questions here: FAQ.

Development

Check out our Contribution Guide.

Learn about why Draft.js and how to use DraftJS Plugins

In this talk Nik Graf explained the ContentState structure of a Draft.js Editor as well as explained how to use plugins.

License

MIT

draft-js-plugins's People

Contributors

Stargazers

Watchers

Forkers

marcelometal aleksion alexkuz razh seoyoochan brandonlilly nkabir johannesnagl bodonkey langelee bradparks sachgits chrisjenglish kerekes-zz miguelramosfdz kmlsharma53 yocontra madeinfree xiongjiabin eidonjoe femotizo kevinrodbe rajaraodv browniefed jaaberg ianstormtaylor handtrix 6174 adrianmcli jl- swider ukd1 svrcekmichal coderberry andbet39 markandrewj ipaoo rkovalov mferranti paullecam eden-lane nilopc-interesting-reactjs openbizgit frenkelor spencerx schniz sugarshin fengweijp wonism stefan1968 filod movielee2020 gnagel whoisandy dex1t raohai maktouch crossman berdof dapperfox buildog michaeljohneduave bold vnovick vasyabigi happylinks victorcheng7 storyshop vinhlh chienvuhoang catwarrior khan qgerome switchboardhq makenosound houkanshan koaninc groupystinks aunswjx wkw jasonphillips lananelson theuniverse wizbii chialin nickhsine vcanales jarindr jackcallister rockingskier zetlanddk thatbraxguy lopsanamo bryanph ludwigfrank nishp1 joacle changeweb aaronvine heart2009

draft-js-plugins's Issues

Plugin System for Draft-JS

While I believe draft-js would benefit from a plugin system I think this would be quite a heavy change they do not want to focus on right now.

I was thinking if we could create a higher order component or a abstraction on top of draft-js to allow a plugin system.

Change Sticker plugin to allow passing in meta data to the StickerSelect

This is important to make sure people can build more advanced selects. I'm not sure if we should have a nesting inside stickers like

stickers: {
  stickers: {}
  meta:{}
}

or if we simply pass the whole config down and meta data should be attached to it.

Options for mention identifier

I think the work you're doing is great! I really hope that the plugin system you're building can become the standard way of building plugins for draftjs.

The application I'm working on is persisting data entered through Draftjs as HTML The way the mention plugin is currently working, it's removing the '@' from the content, meaning that when the content is rendered as html, there's no way of recognizing the string as a mention afterwards.

A quick fix for me would be to persist the '@' character either visible or invisibly so that I have a way of knowing that the given string is a mention

History Plugin

The editor state contains a list of the operations. Would be nice to render this a history. Probably something similar to what Google Docs History, Photoshop History or Redux Devtools.

Add an example for @ mentions including an autocomplete

I think for a first example a static list of users to auto complete should be good enough.

Since names contain of multiple parts making them segmented sounds like a good idea. That's the Facebook behaviour where it autocompletes to the full-name, but people are still able to remove parts without removing the entity.

In here you have basic implementation of @ mentions. Extending it with a autocomplete will be tricky, but definitly doable. https://github.com/facebook/draft-js/blob/master/examples/tweet/tweet.html

Add a history plugin with undo/redo steps

Clicking "Remove" deletes two unicorns

Steps to reproduce:

Add two (or more) unicorns with no text in between them
Click the uppermost "Remove" button

Video: http://cl.ly/3G2c1e2m3C0v

Collapsible state view

Create or use a component to highlight code with Prism

We should use Prism to highlight the state in on the website.

Make State Preview a plugin

Add StickerSet component

To be honest I have no idea what a good sticker set component should be like, but something nicer than just looping over the data would be cool.

Accepted custom decorators to be passed in when creating the compositeDecorators

This way people can leverage plugins in combination with their own custom decoractors.

Allow to update the plugins and set new decorators

This issue needs to be fixed first:

hellendag [12:06 PM] 
:simple_smile:

[12:07] 
The only thing to be careful of with setting a new decorator right now is that `beforeInput` allows native character insertion, so that's causing some problems

[12:07] 
I need to come up with a good solution for that

[12:07] 
So right now, if you set a new decorator in `onChange` and the new state is coming from a `beforeInput`, there can be some rendering bugs

nikgraf [12:08 PM] 
I think I had this issue

hellendag [12:08 PM] 
Double character rendering, mostly

nikgraf [12:08 PM] 
I type in character `a`and it results in 2 a `aa`

[12:08] 
exactly

hellendag [12:08 PM] 
Yeah

[12:08] 
So right now, the way around that is to propagate the new state with a `setTimeout`, to allow the native insertion

[12:08] 
It works, but it's not pretty

[12:09] 
And I need to come up with something better

Create createWithContent function

https://github.com/nikgraf/draft-js-plugin-editor/#createwithcontent-coming-soon-

At best the Unicorn Editor on the page is already filled with a funny text including 2 hashtags and 1-2 links.

[Mentions] Create a nice combobox fox the mentions

The Mentions selector should have a great UX like a typical autocomplete/combobox. @jpuri did some great work we can copy here already: https://github.com/nikgraf/belle/blob/master/src/components/ComboBox.js

Re-creating the Facebook experience is the goal I have in mind right now. Feel free to think about higher standards.

Note: We can drop the Dropdown component if it helps to build it.

Stickers [improvements]

add mutiple sets & categories to the selector
comply with aria recommendations
proper pseudoclass styles

Fix focus behaviour for the UnicornEditor

Add hover/active states to close icon

Probably best to make a button out of it

add key property to avoid warning

I somewhere forgot to add the key prop. Now there is warning.

Performance Improvements

For some reason the editor is way slower than what you can see on the original pages. Investigate the bottle neck & fix it.

First ideas:

onChange is heavy
componentWillReceiveProperties is slowing down
when plugins are initialised we can store which functions actually should be cold and don't have to loop over every plugin

Remove read only toggle

RichText Editing Plugin

@bkniffler did a great job @ https://github.com/bkniffler/draft-wysiwyg

Something similar to this or Medium would be great. Double click (ideally also double tap) triggers a rich text editing tool. I suggest to visually separate text transformation from block transformation so people can get a feeling of the editing scope.

CreateFromText doesn't take plugins as a parameter

One problem i'm running into with the mentionsPlugin is that if I initialize the editor with content - that contains a @ character - it will not trigger the mentions plugin at all. Until I've deleted the character, committed the state and reinitializes it without it.

I figured that was the reason for the built in createFromText function - but it doesn't seem to do anything else than wrap the native functions of DraftJs (and doesn't even take the plugins array as specified in the documentation)

I know the documentation is far from done - I just wanted to know a bit about the thinking behind it :)

Launch/Release Plan

Fix close icon in plugin architecture

Find a good free unicorn sticker set we can use

Instead of the remove button there should be a small x at the top right

Sticker list renders empty button as first element

StickerSelector improvements

prevent scrolling the page inside the popover
add subtle white gradient/shadow at the bottom to indicate people can scroll

When initialising the Editor with content the selector should be set at the end as well

[Mentions] Improvements

Improve hashtag regex

Nik: what’s wrong with this regex?
Isacc: It's a weak regex for i18n hashtag handling, IIRC

Let's check how to improve it

Move to CSS Modules and make sure every plugin exports a bundles css file

We need this to provide pseudoClasses. The experience without them is just bad and on the other hand we don't want to ship with a specific tool like Radium or react-look.

Disabled buttons in case there is no undo or redo in the history plugin

Fancy animations for the plugins

focused option in the mentions list could be a quick fadeIn/fadeOut of the background
adding mentions should be smooth animation after the replace
fade in for stickers
emoji gets same animations as mentions

Fix eslint issues

Stranges warnings 😢 - will try to fix it today

Change PluginEditor to Editor

StickerPlugin options

allow to hide Remove icon
allow to replace the Sticker component

Webpack Config

Webpack production should extend the default configuration & overwrite only what's necessary.

https://www.npmjs.com/package/webpack-merge might help …

should <MentionSearch> be rendered outside the contentEditable editor

some weird behaviors happen when show up:

mouse click can not focus the cursor to the end of line
use cmd + → can not jump to the end of line

maybe use something like https://github.com/tajo/react-portal to solve this?

Plugin Configuration

Mention Plugin

{
  mentions: List([Map({
    link: String,
    avatarUrl: String  
  })]),
  theme: {
    search: Map(),
    mention: Map(),
   },
}

Hashtag Plugin

{
   theme: {
      hashtag: Map(),
   }
}

Undo Plugin

{
  theme: {
    undoButton: Map(),
    redoButton: Map(),
  }
}

Link Plugin

{
   theme: {
      link: Map(),
   }
}

stickerPlugin

{
   theme: {
     sticker: Map(),
     stickerSelect: Map(),
   }
}

emojiPlugin

{
   emojis: List([Map(
     url: String,
     name: String,
     key: String,
     unicodeCharacter: String, // (replaced with image, should only show image if it is in the list of emojis)
   )]),
   theme: {
     emoji: Map(),
     emojiSelect: Map(),
   }
}

add social bar to the bottom of every page before the footer - I have added this section to bottom of all pages. May be options should better be aligned in a single line - plz suggest @nikgraf.
add a section "Team" to the homepage with a picture & links (both twitter) to https://twitter.com/jyopur https://twitter.com/nikgraf https://twitter.com/mxstbr https://twitter.com/juliandoesstuff
add section "Discussion and Support" to bottom of the homepage & readme with
Join the channel #plugin-editor after signing into the DraftJS Slack organisation!
allow Code component to be collapsed or expanded. the initial state can be passed in via props, but it should be uncontrolled - this is done but atm, code clocks expand / collapse on mouse clicks this can be improved @nikgraf suggestions plz.