dotkom / design-system

Component library, maybe
https://design.online.ntnu.no
MIT License
4 stars 4 forks source link

Add a rich text editor #152

Open oleast opened 4 years ago

oleast commented 4 years ago

Is your feature request related to a problem? Please describe. We often let your staff create large bodies of text, and usually do this with pure markdown. This can lead to large texts being like walls of unstyled text, and the writers will not see what the product looks like before it is live.

Describe the solution you'd like I would like to have a WYSIWYG editor or something similar to make it easier to with rich text.

The best version of something like this is an editor that is styled with our own set of 'typeography', and works with markdown as its raw format. Examples of this can be seen in the Slate, which is an extensible framework for creating your own rich text editor.

There is also Rich Markdown Editor, which is an implementation of the Slate editor specifically using markdown. Something similar to that with our typography would be perfect in my opinion.

Describe alternatives you've considered Preview windows of the text?

Additional context Rich markdown editor is primarily used by the Outline Wiki _(very fitting name) :stuck_outtongue:, and can be used there to test it out.

This would also work very well with our proposed typography system #149

Example of the Rich Markdown Editor:

rich-markdown-editor

niklasmh commented 4 years ago

I vote for having a plain text field and a preview field, just like here at GitHub. Reasons:

  1. It is easy to store markdown, both in a database and locally on your machine. As a developer that feels safer as you get full control over the text and you know that copy/paste will work everywhere.
  2. You also make it less possible to mess up formatting.
  3. A preview field solves the use case of not seeing the result immediately. You also get the final result with no rich text WYSIWYG hacks.

If it is possible, I would extend the preview to also be editable such that you magically can change the markdown at the same time. Having both options are even greater, but it is tricky trying to convert rich text WYSIWYG to markdown as WYSIWYG is often more flexible than markdown. I found that slate has attempted to do this on their markdown-shortcuts example.

Another thing I want to add to my wishlist is the option to paste/drag images into the editor. GitHub does it, Strapi CMS does it. We can do it as well! Though, this is below low priority atm.

To summarize: I would first of all keep the plain text editor, just as a safty net. Then add a preview, to solve the main use case. This should be fairly simple to implement. At last, I would prioritize having an editable preview that binds with the plain text editor such that You Get What You See While Keeping The Markdown Intact (this is not as easy as it may sound).