Show HN: Atomic Editor – Obsidian-style live preview for CodeMirror 6

https://kenforthewin.github.io/atomic-editor/

by kenforthewin • 2 months ago

67 19 2 months ago

kenforthewin.github.io

pbjerkeseth2• 2 months ago

Nice work! It seems like selection highlighting(?) doesn't work but the interaction feels good otherwise.

I'm curious when I see things more geared toward prose using CodeMirror instead of ProseMirror. Any comment on that decision?

bityard• 2 months ago

Selection worked for me on mobile, but doesn't show a highlight. Probably a simple CSS fix.

kenforthewin3• 2 months ago

Thanks for the heads up - I pushed up a fix to the hightlighting issue.

I originally went with Milkdown (Prosemirror-based) for Atomic, the knowledge base project that I built Atomic Editor for. ProseMirror doesn't provide virtualization out of the box. For shorter notes and even moderately long content it's fine - but atomic supports syncing content from a diverse set of sources and I noticed that long documents were causing delays on initial page load and some lag during edits. I didn't find anything like it with native virtualization that felt right to me so I built Atomic Editor.

pbjerkeseth2• 2 months ago

No problem, I actually went through a similar path of trying milkdown/tiptap/a few others as the core for my own editor needs but kept running into into issues where the abstractions got in the way eventually. I was thinking about using ProseMirror for a custom 'one big text file' concept so I guess Ill close the door on that idea and give this a try.

benatkin• 2 months ago

That looks pretty good, but it isn't quite there yet, for me. If you try to delete the opening fence, the closing fence turns into a closing fence, and the abstraction leaks in tables.

chaoxu2• 2 months ago

I'm testing it and seems to be very broken, typing things around and things jumps everywhere.

I was trying to create something like this too, because I need something that also work for mathematical writing. Let me push a version on github and update, it fixes a lot of issues.

Unfortunately it works on my own version of markdown, which is a subset of pandoc markdown, but I think one can get claude to update the parser to work for other things.

kenforthewin3• 2 months ago

Thanks for trying it out! would you mind giving some steps that allow me to repro the issue? It's early days so i'm sure there are some rough edges, hopefully I can fix them quickly.

chaoxu2• 2 months ago

My version of a WYSIWYG built on top of CM6.

https://github.com/chaoxu/coflat

Mine also have lot of bugs (especially reader and editor doesn't completely match yet).

repro the issue: click random places and add random texts, scroll around, and issues come up sooner or later.

readthedangcode• 2 months ago

I just clicked around a bit and randomly typed, suddenly no matter where I typed, my text was ending up at the end of the document. Found it to be pretty broken as well.

kenforthewin3• 2 months ago

I was able to repro one issue that could have been contributing to your broken experience - there's a slight delay between, for example, clicking text in a heading and having the "#" markdown decoration appear. This is to prevent the mouse location from shifting mid-click and causing text to be selected unintentionally (obsidian does this too). But there was a bug that was causing a cascading set of failures if edits happened during that delay window, which is likely what folks who are clicking around at random points in the editor and adding text are doing. I fixed it in 0.4.2, which should be live now.

segphault• 2 months ago

I've wanted to see a good, production-quality open source take on this editing paradigm for a long time and your implementation appears to get a lot of things right. I took a crack at this myself a few years ago but never got around to really getting it over the line: https://github.com/segphault/codemirror-rich-markdoc

Your wysiwyg support for tables is very nice, but I couldn't quite figure out how to delete a row. The checkboxes are also a little fiddly, it would be nice if the checkbox turned into editable text when the cursor moves next to it. Does Atomic Editor work with vim bindings via replit's CM6 vim plugin?

Props for building this and sharing it, I hope you stick with it.

bdcravens• 2 months ago

Dreamweaver lives!

alsetmusic• 2 months ago

It's pretty nice. I was impressed with the handling of tables. Good fit-and-finish kinda of project. Congrats on building a respectable, nice tool.

k43s852• 2 months ago

94439653

k43s852• 2 months ago

Ok 52itf orchid room

smartrich• 2 months ago

How difficult was it to build the live preview synchronization? Was keeping cursor position and scroll position aligned between the editor and preview the hardest part, or were there bigger technical challenges?

Alex_toani• 2 months ago

Perfect like this idea.

schonfinkel• 2 months ago

I regret to inform you that, despite your best intentions, you have built an Emacs + Orgmode.

peterm4• 2 months ago

This is awesome, and exactly what I've been looking for recently.

Noticed the demo won't let me add spaces in table cells however.

Show HN: Atomic Editor – Obsidian-style live preview for CodeMirror 6

Related Stories