search

MauroDataMapper / mdm-ui

Web front-end for the Mauro Data Mapper
Apache License 2.0
7 stars 5 forks source link

HTML and Markdown editing experience #223

Open pjmonks opened 3 years ago

pjmonks commented 3 years ago

This issue is for a discussion on the usability of the current HTML and Markdown editors. Despite working well, there are a few issues which I think could be improved

Multiple source/preview views

If in Markdown mode, this is the source/preview view:

image

If in HTML mode, this is the normal preview (and editable) view:

image

And this is the source HTML view:

image

Effectively there are multiple ways of seeing the raw source text of the content and then multiple previews of that content, which introduces lack of consistency.

Lack of Markdown controls

The HTML editor appears to have many fine grained controls to improve the editing experience (bold, italic, lists, tables etc), whereas the Markdown editor has only a preview and "insert link" control. Markdown lends itself to being easy to type and format, however for general user experience it might be useful to include common Markdown formatting tool buttons (much like the GitHub Markdown editor).

No context for which format to use

To accommodate both HTML and Markdown, the mdm-content-editor component is a wrapper over both controls, with a button toggle to manually switch between them. This introduces two problems:

  1. Given any text, how does the component tell if it is HTML or Markdown without additional context? HTML is supported inside Markdown, but not the other way around.
  2. Shouldn't the Markdown processed output be HTML anyway?

Also, is it possible for Mauro to have a "default" format chosen to avoid these kinds of conflicts?

For discussion

  1. Is the current content editor control suitable for continued use, or does another (possibly 3rd party) control need to be considered?
  2. Are there any ways to provide more consistency between using Markdown and HTML?
jamesrwelch commented 3 years ago

This looks like a nice Markdown editor: https://github.com/inacho/bootstrap-markdown-editor

jamesrwelch commented 3 years ago

There's a third option, of course, which is 'plain text'. Do we need to treat that differently to Markdown? Maybe not

jamesrwelch commented 3 years ago

As for 'default' options - that may be something that we could have as a per-user, or per-instance option, but I think different users will have different preferences for different projects.

pjmonks commented 3 years ago

I can think of two possibilities for improving the editing experience further:

  1. Assume that all text content is in Markdown format, but provide better WYSIWYG controls for users who are not familiar with the Markdown syntax. An example I've found is a 3rd party editor called ToastUI Editor - this demonstrates this principle by allowing raw or WYSIWYG editing of Markdown content, while still allowing HTML view output.
  2. Continue to support both Markdown and HTML formats, but somehow be able to tell the difference between the content so the appropriate editor is used. Jodit is currently the HTML editor in use, perhaps an equivalent Markdown editor is also required to provide better usability.

For point 2, it is also possible we could write and extend our own Markdown editor, but if there is one already available in the ecosystem I would suggest looking at those first.