Replace EasyMDE with textarea

[silverwind]

SimpleMDE is unmaintained and in my opionion very bloated for what it does. It ships with a full version of CodeMirror (a code editor) embedded which enables markdown syntax highlight in the editor, but I think its a neglible feature that is mostly unnecessary as comments are meant to be viewed in rendered mode primarily.

I suggest we switch to a plain <textarea> like the ones Github and Gogs use. Some buttons to insert pre-generated snippets at the cursor can be provided. Emoji can be supported via :token: to Unicode replacement or directly as Unicode as always. Image-based custom emoji can not render in it, but they may in the rendered view (thought Unicode should be preferred).

[jolheiser]

I personally love this idea, I always end up turning it off immediately.
That being said, I think many users enjoy the WYSIWYG.

If we had a toolbar similar to GH that injected symbols (e.g. bold would wrap your cursor with ****) perhaps that would be a good trade-off?
I'm unsure about removing a feature unless we have a good alternative.

[silverwind]

Yes of course, formatting buttons must be provided for a viable alternative. Also, @mentions and :emoji have to work. I wonder if there is maybe a JS library around that can provide markdown-formatting functionality to a <textarea>, or if we have to code those up ourselves.

I think it may be beneficial to first do the transition to unicode emoji (which means replacing emojify.js with something that emits proper unicode instead of images, except on custom emoji).

[bobemoe]

I did a review of several WYSIWYG markdown editors over in #9619 and found Ace was beginning to look promising as it was also being considered for the code editor.

I'm afraid I didn't find time to continue with it but it may be worth checking out from #9619 (comment) onwards

I would be happy with plain <textarea> too, but also agree some of my colleagues would prefer (basic) WYSIWYG.

[silverwind]

I think WYSIWYG goes against the spirit of Markdown, which is meant to be edited in plaintext.

[bobemoe]

Yeah, you're right. Something simple like this GitHub editor would be perfect.

[silverwind]

Indeed, GH's one is quite nice. It's just a lightweight textarea with a few formatting/snippets buttons. I guess such functionality can be replicated in like 5-10kB of JS.

[guillep2k]

We need to keep in sight that many Gitea end users are not programmers (e.g. someone who reports a bug on an end-user product), so I think WYSIWYG is important as an option.

[silverwind]

I don't think Markdown is hard to learn and with the formatting buttons offered, it should become clear how it works pretty fast. GitHub never offered Markdown WYSIWYG and I think it's just silly if we would do so.

[lunny]

@silverwind We could make that as a user level options. :)

[suli3]

Most of the un-programmers are familiar with office, what they want to do is copy doc words to the issue and hope that these words could be as shown in the office.

[silverwind]

copy doc words

Markdown only supports a small subset of what is possible in such documents (colors, font face, exact font sizes, underline, background color and many more). Those users would be better off just attaching said document.

[silverwind]

https://github.com/patrickfatrick/marky-marked might be a alternative, it's 12.2kB gzipped. The only thing I don't like is that it relies on FontAwesome, but I guess we replace icons with SVG.

[SuperSandro2000]

We could make that as a user level options. :)

For me this sounds like feature creep. MD is perfectly fine for a issue board.

[lafriks]

Or this one https://github.com/nhn/tui.editor, I don't know how big this one is tho

[mrsdizzie]

https://github.com/github/markdown-toolbar-element : )

[lafriks]

While for comments I agree that we would need just toolbar but for markdown editor (wiki & markdown files) we need something better :)

[silverwind]

@toast-ui/editor is heavyweight, even more so than simplemde, but I guess for the "full" editor, it might not matter.

https://bundlephobia.com/result?p=@toast-ui/editor@2.2.0
https://bundlephobia.com/result?p=@github/markdown-toolbar-element@1.3.1
https://bundlephobia.com/result?p=marky-marked@5.0.3
https://bundlephobia.com/result?p=simplemde@1.11.2
https://bundlephobia.com/result?p=easymde@2.10.1

[igalic]

does any of these suggested editors not exhibit the same input bugs (on mobile browsers) as SimpleMDE? (#11352)

cuz my understanding (from that other bug at least) is that that's the reason to replace it

[lafriks]

Toast UI editor demo was working just fine for me on android phone

[bobemoe]

The lack of spell checker was my main issue with SimpleMDE (#9619)

[lafriks]

We could also use EasyMDE (fork of SimpleMDE) https://github.com/Ionaru/easy-markdown-editor/
Just checked it does work better on mobile but also has some issues: Ionaru/easy-markdown-editor#77
Also text selection on mobile does not seem to work

[zeripath]

We would be very happy to approve a PR which disables the easymde and monaco on mobile.

[corneliusroemer]

@zeripath: @ashimokawa wrote a patch for Codeberg that sets the default to textarea for mobile user agents. It's already in production over there.

I don't know enough about Gitea to adapt it. It shouldn't take more than a minute for someone who knows the Gitea codebase, it's just a few lines.

I copied over the content of the custom header template into the empty template here for Gitea - that's probably not how you want to do it but it would work. See #14017

See here:
https://codeberg.org/Codeberg/build-deploy-gitea/commit/840fd48cad0c72933becafbe561addc6cdfb11e2

[6543]

@silverwind did #13333 close this issue already?

[corneliusroemer]

@6543 I don't think #13333 closes this issue. EasyMDE is still not ideal (e.g. auto correct doesn't work on mobile) and @silverwind was making a proposal to move away from WYSIWYG entirely. #13333 makes this move less pressing but the fundamental points raised are still not resolved.

[silverwind]

No, EasyMDE is just a kludge until we have plain textarea (with buttons ofc).

[Reinitialized]

As a programmer, discovering there is a button on the toolbar to disable the pain to use EasyMDE by attempting to report an issue and searching to find this specific issue is terrible UX. I understand the desire to support use cases such as users filing reports to the developers hosting Gitea instances, but either doing what GitHub does for their comment/code editor or merely a link referencing how to use markdown seems much more appropriate to me. Although I will continue to use Gitea as overall I enjoy the experience with the project, this issue is rather UX breaking, and the jarring experience could lead to loss of potential users.

TLDR: please switch over to textarea. Even as a programmer myself, it was a pain figuring out how to turn it off.

[silverwind]

#15394

[BoPeng]

I share the concerns about easyMDE and was interested in the discussions here. Has anyone checkout krajee-markdown-editor and see if it fits the bill? bootstrape-markdown-editor could also work.

[silverwind]

Both of these have a lot of heavyweight dependencies, I would not consider them.

[BoPeng]

krajee-markdown-editor.min.js is 44k, bootstrape-markdown-editor.js is 16k, and easynde.min.js is 316k so I suppose your complaint was about jquery, bootstrap, fontawsome, codemirror, etc. Let me try krajee-markdown-editor since my project already uses bootstrap 5 and jquery.

[silverwind]

Yes, we can't depend on a framework like bootstrap and jQuery is also on its way out for us.

I think nothing really beats markdown-toolbar-element in terms of size, it's 3kB after gzip.

[KiaraGrouwstra]

fyi there's also ink-mde, based on prosemirror-markdown