Dante 2 - The rematch
just another medium clone built on top of DraftJs
Dante 2 is a complete rewrite of DanteEditor. This version is built on top of Facebook's Draft-Js and reaches all Dante's features with a shiny ultra mega super uber maintainable architecture.
See the demo at: https://michelson.github.io/dante2/
Why rewrite a new version of Dante?
The previous version of Dante relies a lot on DOM manipulation which causes a mix of presentation and logic. Even with their modular plugin system this condition suppose an sphagetti model to work with on every feature. The biggest problem with this approach is: if you want to make a change that affects the presentation of your users content, let's say you might want to change the default markup for paragraphs, you'll probably end updating all your content in your database, because dealing with "DOM only" suppose that you are going to save html into database, right ?
A redesign was needed!
Draft-Js handles selection, ranges and markup blocks as a data layer contained in a structure known as editorState, with a clear separation on how rendering, styling and interaction works. So you save content data, not html. That's awesome because you can change the appearance of articles (styles & markup) without database changes.
In Draft every change provided from user input is stacked in this editorState building an history of changes, out of the box. This means that pasting, undo/redo and replace/insert blocks at certain selection points are basically calls to the DraftJs API that updates the editorState without DOM manipulation. Also, all the custom blocks are composed as React components!. So, this version have some dependencies which are included in source. DraftJs, React, Immutable. no Jquery.
- Improved undo/redo.
- Save Content as a data JSON structure.
- Load Content as a data JSON structure.
- Handle image blocks on Copy/Paste and Drop.
- Global storage lock to handle file uploads.
- Image upload for paste html.
- Image upload for legacy images on existent texts.
- The medium (+) Tooltip to embed or upload media.
- Tab navigation.
- Pluggins are React components
- Image Uploader with preview and caption option with a lock system.
- Embed data for pasted link through OEmbed services.
- Embed media information for pasted links through OEmbed services.
- Add or remove tooltip buttons with ease with plugin system.
- Add custom blocks many with custom options
npm install Dante2@next or
yarn add Dante2@next
Since version 0.5.x there is only a component based way to use the editor. If you need a non component based use versions below 0.5.x
Many configuration options and plugin usage can be found on the documentation page:
git clone https://github.com/michelson/dante2
Then open http://localhost:8080
Upload test server (optional)
For development purposes we have a server, written in ruby, to handle file uploading
bundle exec rackup
and open http://localhost:9292
Open source license
The code from
tools is based on the build tools from ReactBoostrap