Text editor enhancements

I noticed that several people have asked for improvements to the text editor, both here and on Github. Personally, I would love to see Markdown support along with a WYSIWYG toolbar. I think this site is a good example, where the GUI tools simply insert the appropriate Markdown syntax.

I would like to implement this feature, and I’m hoping to get some feedback from the Zammad team on how to proceed. This is a pretty big change—is this even something that you’d accept from a community pull request? The threads I linked to suggest that you may already have this on your roadmap, and I don’t want to duplicate any internal efforts for this. If you’re open to the contribution, do you have preferences for the direction of this feature or would you like to see a proof of concept first?

12 Likes

Welcome to the community,

in general we always try to cover 80% of the community for a core functionality.
So in general: If your implementation covers 80% and thus no edge cases, it has good chances.

We already accepted some community based pull requests:
https://github.com/zammad/zammad/pulls?q=is%3Apr+is%3Aclosed

As for the editor, the development currently is working on transition between technologies which affects the UI. This is the reason I can’t tell you “just do it” without knowing how bad your code would be affected.

I’d suggest to wait for @thorsteneckel who has a much better in depth view on “how good” that idea is.
Please don’t get me wrong, I’m just trying to save you from wasted time or frustration. :slight_smile:

2 Likes

Thanks @MrGeneration, I appreciate the feedback. I did get the impression from other posts that there are some major changes planned for the frontend. I have some experience with frontend Javascript/Coffeescript and would be happy to pitch in—feel free to contact me privately. In the meantime, I think I’ll defer any specific work on the rich text editor until the new UI stack is in place.

Hey @mr-vinn :wave: Great to hear that you want to contribute / apply some changes to the editor. It’s actually one of the most pain points and gets requested a lot. However, you’re right. We’re currently evaluating a change in our tech stack. This will also be major changes that affect the current editor. While I would love to see some improvements to the editor I think it will be much time spend on moving into the direction of a dead end. So I’d second your decision to postpone the work on the editor for now.

Thanks for the offer! I’ll definitely get in touch with you once we got some concrete information to share. Should take long though.

Looking forward! Happy hacking.

1 Like

We are also pretty stoked about the idea of Markdown support. Could you guys not do it while implementing BOTH Markdown and the more user-friendly WYSIWYG? Just have the WYSIWYG alias to Markdown in the editor, offer a quick and easy way to switch for power users, and then simply render it to HTML? Then n00bs AND power users are happy!

3 Likes

Hi! We’d like to look into and contribute to this feature too but before investing dev-times we wanted to know if there’s any update on the UI stack shift or the development of an editor by the core team itself.
Thanks!

The UI stack shift is still on going. It’s not very trivial.
We’ll share more insights when time comes.

Sorry that this takes fairly long.

4 Likes

Hi Marcel,

any plans when a WYSIWYG will be available? I think it is a quite important feature for a good user experience.

Thanks,
Avon

I’m saying it one last time:

  • new text editor is depending on UI2.0 which is WIP
  • we in general do not provide ETA

It’s there when it’s ready.

5 Likes

I concur here - there are plenty WYSIWYG Markdown Editors out there, I am pretty sure there is something readily embeddable available, some like HedgeDoc even have inbuild Vim emulation thanks to using such standard components :slight_smile: https://hedgedoc.org

Their 2.0 UI will be decoupled from the frontend, maybe an opportunity?

Hello, I made a post about this too and with suggestions for improvements, I consider Markdown support essential and fundamental and it is something relatively simple to add, it can start little by little with less resources, but it is important to have at least one parser added, it even has several in Ruby ready and good>

Here’s the post I made about it:

I favor Markdown over direct HTML, including Documentation, Knowledge Base, Blog, Ticket, Email and other use cases, due to standardization and ease of use.

I recommend Monaco as a base editor because it is rich in features and easier to add new features: Monaco Editor
"The Monaco Editor is the code editor that powers VS Code. A good page describing the code editor’s features is here. It is licensed under the MIT License and supports Edge, Chrome, Firefox, Safari and Opera. The Monaco editor is not supported in mobile browsers or mobile web frameworks.Find more information at the Monaco Editor repo.
"
It can be used with Preview, Fixed Toc, Snippets and other features, we even did that and we can release our Monaco with new features if you want to use it in Zammad or another idea is to use some simple JS, the most important being that you can see the code mode /Markdown or even ideal to have no visual mode.

This forum even has a beautiful Markdown editor with very interesting features.

4 Likes

You could take BookStack as an example.
The editor is very good and the functions are also great.
There are also keyboard shortcuts.

I don’t understand why the editor isn’t developed further.
Especially in the knowledge base area, more formatting options would be very useful.

Especially the code block function would be very good.

What exactly is the current status?

1 Like

It is actively being developed and part of the UI rewrite. That takes time if you don’t freeze development on other things entirely.

It is coming when it is ready.

Thank you very much for your answer.
I’m looking forward to the UI revision.

You can see parts of the stack in the mobile UI already.

That is looking good!

A simple color palette to add basic colors like
image
And a button to add code

like this

Would be awesome!

1 Like