codidact / qpixel

Q&A-based community knowledge-sharing software
https://codidact.com
GNU Affero General Public License v3.0
397 stars 68 forks source link

WYSIWYG editor for posts #1028

Open Taeir opened 1 year ago

Taeir commented 1 year ago

Is your feature request related to a problem? Please describe. If someone wants to use styling of any kind in their posts (or tables!), they would need to know markdown or they would use the buttons which are a bit clunky and inconvenient to use.

Describe the solution you'd like There are fancy Markdown editors available like the ToastUI Editor library (https://github.com/nhn/tui.editor) which would allow people to enter fancy text in an environment they are familiar with. It would be possible to copy paste styled text, use keyboard shortcuts for highlighting (ctrl+b for bold, ctrl+i for italic, etc.) etc. At the same time, it still allows people to switch to a markdown editor if they like to edit the markdown directly.

Now in general the styling required for questions is light. Paragraphs, some words in bold or italic and that should be enough for most posts. We should keep that in mind before thinking about adding a fancier editor like ToastUI. Still, I think it could offer a similar experience which allows for much more freedom when one wants to use tables or when someone does not know markdown.

Describe alternatives you've considered I have looked into multiple different editors for Project Forum, and we ended on ToastUI because of its wide usage, continuous development, larger suite of features and ease of integration. It would be a mainly client-side change.

I do not recall the names of all the options, but I do remember we had good reasons to end on ToastUI editor.

cellio commented 1 year ago

This sounds like a useful option, and would mitigate future requests for more buttons like "insert table". What complications does MathJax add?

Taeir commented 1 year ago

It does not interact with it, so mathjax would still need to be typed as $something$ or \( something \) and is not rendered out in the graphical version.

It looks like they also support something called KaTeX: https://ui.toast.com/posts/en_20210617#custom-markdown-syntax-support We could probably turn that into a MathJax plugin with some work and then it would work very well (i.e. skip the part where users have to type the document class or codeblock stuff).

There are some partial implementations in https://github.com/nhn/tui.editor/issues/962

MoshiKoi commented 1 year ago

Is there a way to customize Toast UI's rendering to match co-design? I haven't found anything that says how one might do that, so that is something we might want to consider.

Taeir commented 1 year ago

There is, or at least we did so for my other project

MoshiKoi commented 1 year ago

Could you share a bit on how you did that?