Roadmap

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: https://github.com/draft-js-plugins/draft-js-plugins/issues/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 https://github.com/draft-js-plugins/draft-js-plugins/pull/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: https://github.com/draft-js-plugins/draft-js-plugins/issues/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 https://github.com/draft-js-plugins/draft-js-plugins/pull/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 https://github.com/draft-js-plugins/draft-js-plugins/issues/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 https://github.com/draft-js-plugins/draft-js-plugins/issues/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

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

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