Ah, the joys of contenteditable HTML elements... Such an under-specified and utterly horrible part of the web specs.
I'm sure you had a lot of fun fighting Safari in general, and also the diverging handling between Chromium and Firefox (for example when pressing the Enter key). Even just changing certain CSS properties on the root editor element will cause the resulting markup on certain key inputs to be different.
I admire that you pulled it off, and hope that you have a big collection of cross-browser integration tests for catching all the regressions that will inevitably happen :) Good luck!
> We're sorry but Vrite currently doesn't support small viewports.
> Please resize your browser window or visit Vrite from a desktop browser.
:( although I get it. In my experience Android and to a lesser degree iOS input is the hardest part of building these kinds of editors.
Nice, building with TipTap/ProseMirror is such a joy.
Not mentioned (but inferred from TipTap + HocusPocus, the guys that originally built both are awesome BTW) this is using the Yjs CRDT (conflict free replicated datatypes) library and its bindings to ProseMirror to provide the underlying realtime collaborative system. Again absolute joy to work with these tools.
This is one of my favourite stacks.
It would be great if there was a mode that allows you to see the full markdown syntax (while still applying formatting implied by the markdown). I personally find it strange to remove / add invisible characters.
A little dissapointed to see ProseMirror not mentioned.
It's an amazing rich-text editing toolkit that provides all the bits and pieces needed to write any kind of rich-text editor. Tiptap is a wrapper over ProseMirror for minimizing the vast API surface and providing simpler configurations.
The project is using TipTap and that is mentioned.
Thanks for sharing! Looks awesome!
If it’s Markdown however, in my personal opinion, it should show the Markdown syntax, too, and not hide it. E.g. the headlines should have the editable ### next to them. Too many editors that "support" Markdown get this wrong. Can’t find the link now, but John Gruber agrees.
Skimmed the comments but didn’t see mention of :
Open source — MarkText https://github.com/marktext/marktext
Not open source — Typora https://typora.io/
Open source —
I’ve used all three, the first two are are WYSIWYG. All are collaborative. HackMD has a nice two window editor that renders MD as you type.
Curious how Vrite compares with these.
I've been wanting this. Like an Etherpad that feels better and works on Markdown. I'll definitely have a look!
I've been working on content management systems for pretty much my entire career since the 90s, so I've seen my fair shares of editors. I understand the comments that markdown is incredible, as well as those that that markdown is horrid, that WYSIWYG is or is not compatible with markdown, etc.
At the end of the day, different users have different preferences and different use cases have different needs. This should not be news to anyone who works in software.
So I'd venture that this particular editor is definitely an atypical mix of possibilities, but there probably is an audience for it. And while I'm not currently in that audience, I am interested in where this goes over time as OP gets feedback and evolves the idea.
Tangent, but does anyone have any resources they link for writing something like this? I want to write (experiment, more likely) a thin layer over an editor for some basic highlighting of markdown stuff and a couple autocomplete-like features from the DB (ie link to existing records).
I hear writing these editors over a content-editable (or whatever) field is super difficult. So.. are you aware of any good sources of information to mitigate the pain?
Note that this would, i believe, be an entirely ground up write. As i'll probably experiment writing it in Rust. Rather than building on top of existing solutions like Prosemirror/etc.
I understand the motivation behind creating a local-only WYSIWYG Markdown editor, but I can't help but feel conflicted about it. Markdown was designed to prioritize simplicity and readability, allowing documents to be published as plain text without any markup clutter. Introducing a WYSIWYG editor seems to contradict the essence of Markdown itself. While I appreciate the effort and consideration for different use cases, the combination of Markdown syntax with a WYSIWYG editor strikes me as odd. However, everyone has their own preferences, so perhaps there is a balance to be found between simplicity and flexibility. Keep exploring and iterating, and who knows, you might discover the sweet spot that works for you and your users.
Is anyone else using an internal wiki engine like Outline or Wiki.js, for their company or community?
I am stuck self-hosting Outline because it has the most intuitive navigation and wysiwyg for non-IT people.
I wonder if any better alternatives appeared since then.
you say that the editor is a standalone app, but i'm not seeing a link to that anywhere, only to vrite itself. also no mention of how to get the editor separately (or that that's even a thing) on the vrite readme.
funny how many layers you can put on top of prosemirror and claiming to have implemented real time collaboration.
Neat! I write every blog post / documentation in Markdown, so I'll definitely be following your progress!
Do you accept "embed" requests? I tried embedding an Iframe but it did not work (instead displayed a code-editor view) and would happily join the list of embeds with SimplePDF
<iframe src="https://embed.simplePDF.eu/editor">
</iframe>It looks beautiful and is very user friendly. Congrats!
Congrats! Having wrestled a lot with contenteditable I realize this is no easy feat.
I'm building a similar library, but with a block-based (Notion style) approach, also on top of Prosemirror (see https://www.blocknotejs.org) - great to see more projects in this problem space! Welcome any feedback!
Congrats on the launch! Unfortunate name clashing with Vite. I'm afraid Google will autocorrect to "Did you mean Vite?" a lot. I wouldn't name something "Rhails" for the same reason. If you change the name maybe you get much better SEO so your cool project has better reach!
Looks nice! I might give it a try when I get the chance.
A few nitpicks:
- It would be nice if exports included the metadata as comments
- When I move my cursor over a code block, any key I press that isn't Enter will erase it, when really I just want to enter the code block and start writing. If I wanted to delete it, I could press del/backspace.
For those interested TipTap is doing the heavy lifting here – https://tiptap.dev/examples/default
Yesterday, someone posted a really nice editor too.
I wish one of this is available as a custom element with attributes and callbacks, and I can just use it.
Nice. I have been on the lookout for a collaboration platform to keep docs + help plan dev, will give Vrite a look as well.
I like it! I would prefer an icon bar along the top or side, rather than have to select text for the icons to show up
Looks great on Chrome. It completely hangs Safari, though. Version 16.3 (17614.4.6.11.6, 17614)
Wondering why it refuses show on an iPhone pro max? The display resolution is 2796 x 1290
I want MarkDown & CSVs to just eat Microsoft's lunch at some point
Haven’t used it yet, any support for Mermaid diagrams?
[dead]
I want MDX support instead.
Congrats on building and shipping something!
That said, from the original document about Markdown[0]:
> The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.
From my experience, the benefit of Markdown is that it eliminates the need for WYSIWYG, because WYSIWYG is awful to work with.
Put those two things together, and it's weird for me to see Markdown used like this. Not saying it's wrong or bad or whatever, just that it's weird and seems to cut against the spirit of the thing.
[0]: https://daringfireball.net/projects/markdown/