In 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)
Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
21–30 of 102 posts
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#22Looks good!
Some links I've collected in the past that describe this approach:
- https://css-tricks.com/creating-an-editable-textarea-that-su...
- https://github.com/WebCoder49/code-input
I believe https://grugnotes.com also does this for markdown.
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#23This is pretty nice, though I'd suggest you call it a transparent syntax highlighter.
For https://grack.com/demos/adventure/, I used a hidden for something similar. I wanted to take advantage of paste/selection and all the other goodies of text, but with fully-integrated styling.
Like you, I found that standard text input boxes were far more interesting than contentEditable because they're just so simple overall.
I think there's probably an interesting middle ground here where you render real markdown with the textarea effectively fully hidden (but still with focus), emulate the selection events of the rendered markup into the textarea, and basically get a beautiful editor with all the textarea solidness.
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#24This is really nice
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#25This is a nifty little project. If I wasn't already neck deep in blocknote adoption in a small experiment I'm doing, I'd be taking this for a spin.
I noticed on the site the really cool animation you got has a 1px solid border on one of the overlays in firefox. Figure you might care since it's clearly supposed to be flashy.
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#26Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#27[dead]
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#28> That's it. No npm. No build. No config. That's it, I am loving it.
If it doesn't have an NPM build, it isn't a serious project. Not using anything w/o a build.
I agree with sitkack. npm (packaged software) is really handle to bundle code and keep a repo up to date. But I guess if you just want a markdown editor on a page, this is fine.
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#29Am I doing it wrong?
The animation shows variable-pitch fonts, but the demo seems to be all the same fixed-pitch font for me. (On Firefox ESR and Chromium.)
Re: Show HN: OverType – A Markdown WYSIWYG editor that's just a textarea
#30This is actually really clever. Just don’t let it balloon out to be a 500kb full fledged WYSIWYG editor, just keep it simple like you do.