This isn't really WYSIWYG because it keeps the formatting symbols like * or # etc.
Still, what you see is what you get (plus some formatting symbols). It's marginally WYSIWYG.
Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
51–60 of 102 posts
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#52In Firefox on Android, the bold font is wider than the upright and italic fonts, breaking alignment. (It works fine in Chrome on the same Android phone. Android 16, Firefox 141.0.3)
In fact, depending on font-synthesis [1] and the exact choice of fonts (even when they are monospaced), the alignment can be easily off. That's why this approach only works to some extent and not universal. One possible remedy is to wrap each grapheme into a cell that contains both fonts, where the visible one is bolden and the invisible one affects the advance width. But then you lose ligatures. (Personally I don't like ligatures in coding fonts so it's plus for me, though.)
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthe...
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#53Anyone knows a good in browser coding editor widget? That supports color coding for different languages?
Codemirror is pretty decent. Last time I looked for this (6+ years ago) it's what we landed on for an internal tool. Things may have changed tho!
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#54Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#55I made something similar! https://github.com/andrewbaxter/malarkdowney - The main difference (I think) is that mine applies h* style changes and isn't visually separated from the rest of the page. I.e. it's not just syntax highlighting, it's a more fully-blown output preview.
The text overlay approach doesn't work if you want width-affecting/height style changes (I assume) since that'd cause the overlay to stop matching. The downside is contenteditable cursor movement is broken for inexplicable reasons.
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#56The scroll syncing in the demo doesn’t seem to work well on iOS Safari. I can’t scroll all the way to the bottom.
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#57Went down the rabbit hole which is the overtype.dev website (nice work btw!) and found and even nicer rabbit hole - https://hyperclay.com/ Single HTML apps :). Enjoy!
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#58Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#59Nice! Seems very useful if you can drop in and have everything work. Nitpicking a bit: it's not as much _rendering_ markdown as it's _syntax highlighting_ it. Another interesting approach there could be to use the CSS Custom Highlight API [0]. Then it wouldn't need the preview div, and perhaps it'd even be possible to have non-mono fonts and varying size text for headers. [0] https://developer.mozilla.org/en-US/docs/…
Can you use highlights on text area contents?
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#60That is not just a textarea, but it is a pattern seen in many other projects