Rich text editing is probably not possible or not worth it.
However, most people who disable JS are probably fine with not using rich text and definitely shouldn’t expect it. Just add a CSS stylesheet which turns <textarea> into something half-decent, put a note that markdown is supported, and make a plain text editor.
> Just add a CSS stylesheet which turns <textarea> into something half-decent, put a note that markdown is supported, and make a plain text editor.
Any examples that you can think of which make a plain text area half-decent? So many sites go with heavy-JS options that i'm not sure what is possible for a good (half decent) visual editing experience in just CSS
It's bit harder to do correctly manually just because of cross-platform browser quirks, you'll probably at least want normalize.css or CSS Reset. Even MDN docs has a half-decent textarea in 20 lines of CSS: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/te... (it looks ugly with monospace but change the font and I think it looks great)
As much as possible, the specifics matter i think, so i'll weigh what script(s) offer in terms of UX compared to load time/bandwidth/etc. In general i'm just trying to stay super lightweight, only giving in when necessary.
Also, focusing on CSS first means - hopefully - that the UX is "as good as it gets" for JS-less individuals. If i add a small JS framework on-top of that it's likely fine.
edit: I'm sort of experimenting with how good i can make modern websites. Both on UX, accessibility, low bandwidth (folks on satellite connections appreciate this), etc. I'd like the site to "look like any modern site" (minus obtrusive crap), but suffer as few flaws as possible.
> Just add a CSS stylesheet which turns <textarea> into something half-decent, put a note that markdown is supported, and make a plain text editor.
If you're not going with prosemirror or similar off-the-shelf component, then this is the only way to not annoy your users. Augment it with a side-b-y-side RO view of the rendered markdown.
I mean, even the linked page is a confusing UI: you enter `**` for a bold sentence, and then when you arrow-left to the beginning of the sentence you cannot delete just the `*` you typed in.[1]
[1] I feel a better way to do this would be to not allow markdown to actually be typed in, so that the user never sees it. This sidesteps the confusion when trying to remove just the markdown. Let the user use shortcut keys and/or buttons on selections, because to remove a formatting rule they simply repeat what they did to create that rule.
This. I wish websites had this as a fallback mode, when I do not allow their 5 third party script sources. I also wish this was done in products like Jira (basically anything out of Atlassian), which have very bad WYSIWYG kind of editors.
However, most people who disable JS are probably fine with not using rich text and definitely shouldn’t expect it. Just add a CSS stylesheet which turns <textarea> into something half-decent, put a note that markdown is supported, and make a plain text editor.