search

jsdrupal / drupal-admin-ui

This is an admin UI for Drupal, built with JavaScript & React. ⬅️✌️➡️
Other
236 stars 91 forks source link

WYSIWYG Field Widget #245

Closed mattgrill closed 6 years ago

mattgrill commented 6 years ago

Some initial research around WYSIWYG solutions. There are probably others, and some I skipped over for that that did not seem feature rich enough for our needs.

Draft.js

React Draft Wysiwyg - https://github.com/jpuri/react-draft-wysiwyg

jpuri_react-draft-wysiwyg__a_wysiwyg_editor_build_on_top_of_reactjs_and_draftjs__https___jpuri_github_io_react-draft-wysiwyg

React Rich Text Editor - https://github.com/sstur/react-rte/

sstur_react-rte__pure_react_rich_text__wysisyg__editor_based_on_draft-js_

Medium Draft - https://github.com/brijeshb42/medium-draft

medium-draft

TinyMCE & CKEditor

React TinyMCE - https://github.com/instructure-react/react-tinymce

react_tinymce_component

CKEditor React - https://github.com/ckeditor/ckeditor5-react

mattgrill commented 6 years ago

Drafttail - https://github.com/springload/draftail

springload_draftail__a_configurable_rich_text_editor_based_on_draft_js__built_for_wagtail

dcorb commented 6 years ago

I worked with Draft.js for couple of months. I would make a deep research before choosing this library specially because it implements its own data structure https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2 and DraftJS doesn’t offer any “exportToHTML” serialisation. You rely on community efforts like https://github.com/hubspot/draft-convert or https://github.com/jpuri/draftjs-to-html to get your HTML out There is much more promising https://github.com/ianstormtaylor/slate but I haven’t used it personally. It’s still marked as beta @wimleers spent a lot of time researching wysiwyg editors when doing inline editing, and collaborating with CKeditor guys. Maybe he could have suggestions where to look

mglaman commented 6 years ago

I think it'd be great to use CKEditor5 and continue that collaboration. I also saw a demo of it which resembled Dropbox Paper's editor. Where you can do inline markdown editing (## then space makes h2, etc). And "Medium" like editing where select + hover allows formatting changes.

There are existing bridges with that community and technology, so there are benefits I believe.

mattgrill commented 6 years ago

@dcorb There is also, https://github.com/sstur/draft-js-utils/tree/master/packages/draft-js-export-html which appears to be pretty feature rich for exporting HTML. There is also, https://github.com/icelab/draft-js-ast-exporter for storing the state as an AST.

dcorb commented 6 years ago

@mattgrill those 2 repos don't look well maintained to me Another issue I experienced with DraftJS is the lack of Android support. FB is not interested to fix bugs in Android browsers https://github.com/facebook/draft-js/search?q=android&type=Issues The situation with Android could improve.. it seems: https://github.com/facebook/draft-js/pull/1672#issuecomment-369367386

I don't know what are the implications of choosing Draft.js for drupal-admin-ui (is this project just a demo to throw away? Or the foundation for future work?)

dawehner commented 6 years ago

Slate

A customizable framework for wysiwyg ediitor independent from react (https://github.com/ianstormtaylor/slate)

It seems to have a good amount of momentum and it is designed for more usecases, especiially embedding custom objects, see https://github.com/ianstormtaylor/slate#why

dcorb commented 6 years ago

Gutenberg from Wordpress could be used / ported to Drupal https://testgutenberg.com/ These guys ported Gutenberg to Drupal "hacking" some files and they want to talk about it in DrupalEurope https://www.drupaleurope.org/session/introducing-gutenberg-content-editor-drupal-8

Probably very few chances of happening, for multiple reasons. But just to keep in the radar