New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve rich text editor UI #288

Closed
erquhart opened this Issue Mar 16, 2017 · 7 comments

Comments

Projects
4 participants
@erquhart
Member

erquhart commented Mar 16, 2017

The rich text editor is pretty quirky at the moment, and carries a learning curve for new users. This ticket aims to simplify the interface so that functionality is familiar and self-evident.

Requirements

  • Move the floating/hidden formatting bar to the top of the input
  • Make the formatting bar always visible
  • The floating formatting bar behavior is not reliable, so we'll remove it for now and revisit later
  • Move the image/video insertion functionality to static buttons, also in the formatting bar
  • Make image/video insertion buttons always visible
  • Allow image/video plugin form to display as an absolutely position overlay, separate from the buttons
  • Make formatting bar sticky within the input, so that it doesn't leave the viewport unless the entire input does
  • Ensure a consistent UI between visual and raw editors

@erquhart erquhart self-assigned this Mar 16, 2017

@biilmann

This comment has been minimized.

Member

biilmann commented Mar 16, 2017

Note - the "Image/video" buttons are block level editor components that will vary from site to site.

My ideal UI for the richtext widget would be like Dropbox Paper or Medium, and I think that's starting to be the expected standard more and more. That said, it's a harder design to pull off, so I'm fine with an initial toolbar based version, but the image/video buttons are NOT build into the editor, and it's a really important concept that you'll be able to define different block level components (figure, pull-quote, embed, code example, all kinds of shortcodes, etc) that can be inserted as block level elements. So I still think a button in the marging when at an empty block makes most sense for these (again, see Medium or Dropbox Paper for really good executions of this).

@erquhart

This comment has been minimized.

Member

erquhart commented Mar 16, 2017

@biilmann this is not final at all, but I'm thinking something like this for now, and we can spend the necessary time on a solid Paper-like interface in the near future:

screen shot 2017-03-16 at 2 07 13 pm

It's just as extensible as the current setup, making use of the icon parameter for editor plugins.

@erquhart erquhart added this to Beta Release - 3/16 in Planning Mar 16, 2017

@Spone

This comment has been minimized.

Spone commented Mar 18, 2017

You may be interested in checking https://github.com/liferay/alloy-editor for this purpose. It works quite similarly to what you currently have, and uses React as well.

@biilmann

This comment has been minimized.

Member

biilmann commented Mar 20, 2017

The editor components still need something that's not icon base. For example, here's the components we want to use for Smashing Magazine:

  • Figure
  • Pull Quote
  • Signature
  • Newsletter callout,
  • Jobs callout
  • A row of ads in the content
  • Product ad banner

Would be really hard to come up with icons for those...

@erquhart

This comment has been minimized.

Member

erquhart commented Apr 18, 2017

If no icon is selected, the component name will be displayed in text. Still not super scalable...maybe we'll need to reintroduce the dropdown menu (still in the static toolbar, though).

@erquhart

This comment has been minimized.

Member

erquhart commented Apr 19, 2017

@Spone I just noticed your comment - alloy editor does look like a potential option, and it appears to support custom editor components written in React. Thanks for pointing it out! Using dedicated libraries for this stuff is definitely preferred.

@erquhart erquhart moved this from In Progress to Recently Completed in Planning May 8, 2017

@erquhart erquhart closed this May 8, 2017

@client9

This comment has been minimized.

client9 commented Jun 17, 2017

FYI / FWIW quilljs.com has a number of react wrappers as well. quilljs is sweet but have no experience with the react wrappers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment