Roadmap

[nikgraf]

2.0

In this issue we can discuss & elaborate on plans for a 2.0 release. Feel free to add your ideas here and let me know if you want to pick up one of those tasks.

Discussion

• A lot of the plugins are actually just decorators. Should we name them e.g. draft-js-dnd-plugin-decorator or draft-js-dnd-decorator-plugin? The names get quite long, but on the other hand these modules are not plugins. Thoughts?
• Create & export a compose functions (like in Redux) to combine decorators. The alternative is one decorator where you can activate/deactivate certain plugins.
• should get getEditorRef get the real DOM node or just the DraftJS Editor?

All Plugins

• Remove all <noscript /> and replace with `null
• refactor: make sure decorated blocks are never in blockRendererFn
• Add info to all changelogs that npm2 is deprecated and peerDepedencies moved to depedencies
• Investigate which dependencies are not needed
• Add npm3 as requirement to package.json
• mobile support
• aria support
• check for all todos
• move all state within the createPlugin functions

  "engines": {
    "npm": ">=3"
  },

Editor

• Investigate & fix: Cannot click Button in Block on draft-js-plugins-editor #338
• check if setReadOnly is use anywhere and even necessary

Inline Toolbar

• add advanced example with custom set of buttons

Side Toolbar

• show an example with image adding

Mentions

• Investigate if we should switch to plain JS objects instead of using Immutable.Map for the mentions list. This change would make it play nicer together with convertFromRaw. see Let mentions render with plain JS Object #326
• Revisit of mentionTrigger https://github.com/draft-js-plugins/draft-js-plugins/pull/320/files is a good idea or if we should simply recommend @mjrussell autocomplete plugin creator
• Split Themed Example into Themed Example only updating CSS and a custom components example updating the entryComponent on MentionSuggestions
• deprecate mentionPrefix since this can now be done with mentionComponent
• update docs to use none-immutable mentions
• fix this bug: Once suggestions prop contains an empty list mentions dropdown closes and doesn't reopen #633

Stickers

• Investigate if we should switch to plain JS objects instead of using Immutable.Map for the sticker list. This change would make it play nicer together with convertFromRaw. see Let mentions render with plain JS Object #326

Alignment Plugin

• create fancy icons for left, default, center & right alignment
• make sure the active alignment is selected like in the inline-toolbar plugin
• add an documentation page (use a custom block as an example)
• check that alignment doesn't work in the readOnly mode

Focus Plugin

• add hover for blocks (like medium has it for blocks)
• fix bug: make remove work once a block is removed via backspace
• fix bug: remove via click + backspace and then restore with undo (cmd + z)
• check it doesn't work if readOnly is active
• add an documentation page (use a custom block as an example)
• manage left/right arrow
• fix bug: click & then arrow down/up doesn't focus on the text

Resizable Plugin

• fix the hover position handle/dragging (could be easier with checking in mouseDown instead of the current tracking)
• fix the jumping on drag - it should match the mouse not jump once you start dragging
• show the handles if the block is focused (for mobile support)
• add an documentation page (use a custom block as an example + add steps example)

Drag'n'Drop Plugin

• Create a fancy upload placeholder (probably show the image and overlay a loading indicator)
• check it doesn't work if readOnly is active
• add an documentation page (use a custom block as an example)

Docs

• create a new cool editor example
• create new gif demoing the new features
• create a section for team v1 and team v2
• setup open collective
• update the readme & awesome-draft.js
• change title to Draft.js Plugins?
• show anchor-tags per page in the navigation
• Fix the warnings (they are hidden in production, npm start in the dev environment to see them).
  • Unknown DOM property stroke-width/fill-rule.
  • Uncaught TypeError: Cannot read property 'replaceChild' of null.
  • Unknown props onSearchChange, suggestions, ariaProps, callbacks, theme, store, entityMutability, positionSuggestions on <div> tag.

After 2.0

All Plugins

• FlowType support for the entire codebase

Discussion

• Should there be a hook onChangeComplete which doesn't care about a returned editorState and is just for easier dealing. This would be run after all onChange functions see Plugin-supplied components cannot be placed above editor #311.
• Investigate changing the plugin API to allow reloading decorators by default

File upload Drag'n'Drop Plugin

• create the actually upload and work out an API that is flexible to support S3 & normal POST request upload
• check it doesn't work if readOnly is active
• add an documentation page (use a custom block as an example)

Link Plugin

• Merge Link plugin
• Add link ability to Inline-Toolbar

Video Plugin

• Merge the Video plugin (make sure it works with decorator plugins)

Stickers

• Switch to atomic block support

Counter

• Make sure counters can be placed above the editor. see Plugin-supplied components cannot be placed above editor #311

Docs

Write a post on what makes a good plugin:

• standard notation
• block decorators
• be careful with re-rendering
• be careful with passing down props
• don't stop events if not necessary

[bkniffler]

The compose function would be super-nice.

The plugin naming has been bothering me for some time, but there is very few plugins that are only decorators, most of them still plug-in functionality (like dnd plugin). The only plugin that comes to my mind that really only has a decorator is block-alignment.
I'd say we need to give table and image plugin a rename to make clear these are only atomic block components. Also we need to extract the nested draft-js functionality out of table plugin. This would then not be a plugin but a utility that plugins like table-plugin may use. Now we end up with having decorator modules, block-component modules and utility modules :)

[mzbac]

Hi guys,
Can you provide some docs for those plugins such as toolbar, image, alignment, etc. ?

[mzbac]

@nikgraf I found out the root cause of #338
we may need revisit all our plugins to make sure we don't creating decorated component inside blockRenderFn..

[nikgraf]

yep, let's double-check. In any way I think some of the plugins need to be revisited in general before we do a 2.0 release. Some of them have been done by @bkniffler and I haven't investigate a lot yet. I probably start to write some docs for them to get a better understanding. If you want to we can sync sometime over the weekend to come up with a plan :)

[svnm]

Hi @nikgraf I am keen to help out with updating docs for version 2 and can hopefully help out with a few of the plugin fixes mentioned here down the track. I have just set up a minimal example of using draft-js-plugins last-draft It uses most of the current plugins version 2, I will be working on this example to enhance it as much as possible along with the docs.

[amannn]

I've seen there are currently two PRs for a link plugin:

• basic link-plugin #470 which adds a decorator (no button for adding links)
• Add link button to inline-toolbar/linkify #610 which adds a link button & toolbar and also a new strategy for linkify that detects links.

Which plugin is the one that is mentioned in the roadmap and will be merged eventually? As far as I understand the merge of #610 would make #470 obsolete.

Would it be possible to merge one of those before 2.0? I've seen that also the video plugin got already merged despite it being scheduled for after 2.0. If there's something missing in those PRs, maybe I can help out.

Btw. great work on the plugin architecture and the plugins! I really had fun building an editor with those recently.

[nikgraf]

@amannn my goal is to clean up the existing plugins in the next 2-3 weeks and then release 2.0
The link plugin is probably the highest priority afterwards. Merging this before might cause me more trouble 😄

Thanks for your kind words. Btw if you are interested to contribute & maintain. Let me know …

[amannn]

Ok, let's wait until the 2.0 release then before merging a link plugin 👍. If there's something left to do in regards to the link plugin PRs and the authors of those don't have time, I could help out with them.

[nikgraf]

@amannn sounds good, I just set myself a reminder to ping you in 2,5 weeks

[orporan]

quick question, why is table plugin marked as legacy? where can I read about it?

[svnm]

It is legacy because the approach of instantiating multiple draft editors is not in line with other Draft-js plugins and the architecture setup by Nik.

Currently though from my experience it is the only way to create a flexible layout of editor blocks and I have been using a similar approach to achieve this. The only other option is using block wrappers but after a lot of trial and error I can say that this doesn't work. Also the alignment plugin just positions the block on the 1 line using a percentage width so is not really helpful.

The issue is to do with the flat block structure in Draft.js which would need to change to a tree structure to accomodate this properly. The discussion on implementing this is here. So until that is merged in, if it gets merged in, the only approach is to use the slightly hacky idea of multiple editors, similar to the table plugin.

[svnm]

Just an update from my end, I have been working with Last Draft and MegaDraft which has a slightly different plugin approach. I am now pushing all of the Last Draft plugins over to draft-js-plugin format as the MegaDraft team are, and hope to have this compatible with v2 of draft-js plugins in the next few weeks. Hopefully this will align the plugin approaches and add some more plugins to the community.

[makeitrein]

@StevenIseki - thx for your work! very excited to see the convergence of plugins for a more unified ecoystem...

just started working on a draft-js project a few days ago... would you recommend I start off with Last Draft, MegaDraft, or draft-js-plugins with future compatibility in mind?

[nikgraf]

wow, didn't know MegaDraft is going to make it compatible to the plugin system. Who is doing that work?

[svnm]

The MegaDraft team mentioned that they wanted to start work on it soon over here. I have started porting over Last Draft, and this work will likely overlap due to Last Draft borrowing a lot of MegaDraft's functionality.

[svnm]

I finished migrating last draft editor over to draft-js-plugins, I am still working on tweaks to the UI.

• last-draft v2
• last-draft v3 using draft-js-plugins

I set up some plugins to acheive this over here, these can be used like any other draft-js-plugins.

A new sidebar-plugin, new toolbar-plugin, modal-plugin, embed-plugin, link-plugin, color-picker-plugin, emoji-picker-plugin and gif-picker-plugin.
I can add these to the list of community plugins.

[nikgraf]

@StevenIseki just added them to the list of community plugins and tweeted about them.

https://github.com/draft-js-plugins/draft-js-plugins#built-by-the-community
https://twitter.com/nikgraf/status/861522970874961920

Could you help me out adding descriptions here: https://github.com/nikgraf/awesome-draft-js#plugins-and-decorators-built-for-draftjs

[axbarchuk]

@nikgraf How can I add link ability to Inline-Toolbar ?

[ricobl]

@nikgraf: I'm doing the Megadraft integration with draft-js-plugins. Here is the issue:
globocom/megadraft#141

I'm using the 2.0.0-rc2 version and noticed that some methods receives both editorState and PluginFunctions while others receives PluginFunctions with getEditorState.

Will there be a common signature to follow?

[sibelius]

this has a lot of great points

I'm gonna close this for now, and we can reopen different issues if needed