Introduce TinyMCE WYSIWYG Editor

[JakeHartnell]

You can try this out here: https://tinymce.dokku.hypothes.is/
An alternative approach featuring a zero-dependency Markdown editor is located here: #1479

Both editors could use a bit of polish with regard to CSS, but I (and probably the CSS master @aron) can do that once we pick an approach. Rather than the look of the editors (which can be easily be changed), there are other things I feel we should discuss: specifically, our commitment to Markdown.

Now, before we have tons of users (and lots of annotations) is probably a good time to consider this particular aspect.

TinyMCE

There are quite a few WSYIWYG editors out there, but I picked TinyMCE over the others for the following reasons:

• It is highly customizable. We can style it and configure it however we want and could potentially do so differently for different groups.
• It has a large install base, which provides a number of advantages:
  • There are a large number of plugins available.
  • Plugins that we write to support Open Annotation goals will be available to many other platforms.
  • It is well tested in browsers and on Mobile.
• It is in active development.
• LGPL license which is permissive enough to allow use in commercial software.
• If something better comes around, we can ditch TinyMCE and switch to that, but for the meantime it provides a lot of functionality we need for not a lot of developer time.
  • WYSIWIG UI that many potential users will be more familiar with.
  • Paste support (users can copy and paste existing formatted text [e.g. from Word] into the editor and it will retain that formating [to some degree, if they are using crazy fonts that won't transfer])
• It is the smallest in it's class in terms of dependency size (455 KB with plugins STILL BIG), half as large as some other more full featured editors (such as the CK Editor). It is only a bit larger than the lepture markdown editor (about 300KB), but is much more powerful. I did look into the Guardians new scribe editor and concluded that while it could be an interesting project to watch develop, it's still a bit in early stages, poorly documented (at the moment), and still fairly large (almost 400KB when you include the plugins).

User stories

(Feel free to add your own)

Joel is a history professor who has most things he's written in Microsoft word files. When preparing a long response, he still likes to write in Microsoft word. He likes that with Hypothes.is he can paste formatted text from Word into the text editor and it will retain it's formating. He has been taking excerpts from his book about the founding of the constitution and using them to correct factual errors he's encountered on the internet.

Joe is a student in a MOOC who uses Hypothes.is for class discussion. He's not extremely good with computers, but can use them. He doesn't pay much attention to the editor he's using because it operates in a way he's come to expect from engaging with other websites in the past. He appreciates not having to learn anything new aside from what he's reading about and discussing in the class.

Jane is a savy researcher and ok programmer who is using Hypothes.is as a research tool. Specifically she needs to be able to annotate with tables. When she learns of the Hypothes.is project she sees it's perfect for her needs, but the editor is missing a feature she needs. She is releaved to find that Hypothes.is uses TinyMCE and all she has to change is a configuration file.

[tilgovi]

I'm wary of LGPL. As far as I ever understood it the implications for a language like JavaScript are unclear. Everything else in our codebase is MIT/BSD compatible. This may not be.

[gergely-ujvari]

Yes the LGPL license is not the best (we've been discussing this with annotorious).

I really like the idea that it can keep the text formatting from the clipboard, that can come in handy. But on the other hand we should allow experienced users to use markdown because it is quite useful.

[aron]

Not sure I understand Janes story. What does "annotate with tables" mean? And how does changing a configuration file solve her problem?

[aron]

How come the LaTex in this branch is being rendered as images with the google charts api? What's doing that?

[JakeHartnell]

We discussed this in the design meeting and we are not going to go with this approach for now, so closing...

[blackforestboi]

@JakeHartnell @lwm @tilgovi @gergely-ujvari @aron @robertknight

Hi there, we are the WorldBrain Team, our goal is to develop a browser plugin, that allows it to see, if an article, blog post or video is trustworthy, based on how well it represents scientifically verifiable facts.
As a first step, we are working on a book webmarking tool for skeptics, science journalists, scientists and STEM-students. (www.worldbrain.io)
For this we want to fork hypothes.is, but contribute as much as possible to the hypothes.is core, so that everyone benefits from this solid foundation you built there in the last years.
Thank you so much for this. You didn't an unbelievably awesome job with it.
Looking forward collaborating with you 😄 🎉

COMING TO THE FEATURE

We are picking up this feature, because we see the value of having a slim WYSIWYG editor for the broader user base.
Many people are not really experienced in markdown and it is a new hurdle for users to conveniently use an often used software.
It is time consuming to get into this new habit, which many people are not familiar with.
Also there are other convenience problems in the current version when other files have to be somehow saved to commentary too - like charts or pictures.

We also found an alternative for the TINY MCE editor:
An open source project, licensed under MIT: https://mindmup.github.io/bootstrap-wysiwyg/

PERKS OF MINDMUP WYSIWYG

• Same slim customising feature set -> Individuality but still structured
• PLUS: Allows (drag&drop) picture upload from local file system
• Undo - Redo Buttons
• 5kb in size
• MIT license

DOWNSIDES

• currently no easy way to add images via a link, like your markdown editor allows it.

QUESTIONS

• What do you think about this idea?
• Is there an issue where you discussed about the pro's and con's of both approaches?
• Maybe there is also the possibility of merging features of both?

SCREENSHOTS

WYSIWYG:
Normal:

File Upload:

Current Toolbar:

USER STORY:

Richard a skeptic and heavy web user and has massive amounts of text, files and pictures he processes every day. He needs a quick way to save up all necessary information like pictures.
The current editor doesn't allow him to easily add his own pictures, which he saved in his extensive offline folders and files or draws from the web to his commentary. Instead he would have to upload it to a separate service like imgur.com and then attach the link in the markdown language - for every picture or chart.

Richard also saves up his research (good links, titles, notes, images, files) into large wordfiles to consolidate it. If he is not able to do this with the comments of the annotations, there is important information only saveable with inconvenience(as explained in first story), so he might rather stay with his word files.
For hypothes.is and WorldBrain to be widely adopted, there should be a way to add more than just a link-based image to comments.

[JakeHartnell]

For what it's worth, going with a full WYSIWYG editor was something I wish I pushed harder for. It's vastly superior in terms of usability.

[blackforestboi]

@JakeHartnell You mean like with even more features regarding text customisation?

And yes I agree with the usability thing. Markdown is just not sexy.
In order to reach a broad user base, even within the scientific community, using markdown is a hurdle.

Do you think it is even on the table for hypothes.is to rethink this choice?

[robertknight]

Do you think it is even on the table for hypothes.is to rethink this choice?

I wasn't around when the previous discussions happened, but I agree that the use of markdown has definitely been noted as a hurdle for some users in feedback. I've not heard of any fundamental disagreements with a WYSIWIG editor.

For the most common use case of inserting links, images from URLs and videos, we handle that automatically by recognizing links in the markdown without requiring the user to use the link syntax.

On a technical level, I'll note a few things:

• We don't have a facility to upload and store images or other attachments right now. That would be a significant new feature or integration with some existing service.
• Markdown is the format that is used for storing annotation bodies. So if a WYSIWYG editor is used, we'd need to be able to generate markdown and store that.

[blackforestboi]

Hey Robert :)
thanks for the answer.

For the most common use case of inserting links, images from URLs and videos, we handle that automatically by recognizing links in the markdown without requiring the user to use the link syntax.

I tried this out but it didn't work with a .png link.

We don't have a facility to upload and store images or other attachments right now. That would be a significant new feature or integration with some existing service.

We consider this feature as quite important, regarding our user feedback. Is there any major hurdle in the way for this feature/What has to be developed?
(to follow: @mr-mig @lwm)

Markdown is the format that is used for storing annotation bodies. So if a WYSIWYG editor is used, we'd need to be able to generate markdown and store that.

Since the editor we suggested is really slim in customisation, it shouldn't be a huge problem to convert it into markdown I assume?

[robertknight]

I tried this out but it didn't work with a .png link.

Sorry, what I wrote was incorrect. It should automatically convert HTTP URLs into links and for YouTube videos it will insert an embed. It doesn't automatically insert <img> tags however, which would be useful.

We consider this feature as quite important, regarding our user feedback.

Can you explain a bit more about who "we" is in this context and who you have feedback from already?

Since the editor we suggested is really slim in customisation,
it shouldn't be a huge problem to convert it into markdown I assume?

I wouldn't have thought so - but the best way to find out is to actually try implementing it.

[blackforestboi]

Continuing the discussion in a new feature request here:
hypothesis/vision#204