from Hacker News

Ask HN: How to write a rich text editor?

by patrick91 on 10/25/22, 12:30 AM with 4 comments

Hello there! I was looking into writing my own text editor for my personal notes and daily logging. I wanted to build something that works with markdown and supports rich widgets, for example if I use some special syntax (or "just" the link of the tween) I can render a card for a specific tweet.

I'm looking for any kind of suggestion, I'm interested in learning new things

At the moment I was thinking of using Tauri and to write my UI using some frontend framework, but delegate most of the parsing to Tauri, not sure if that makes sense.

  • by anigbrowl on 10/25/22, 1:23 AM

    It's hard to answer without more context, eg although you didn't say so, it looks like your goal is a desktop app and you want to write it in Rust - or at least so I assume after spending 5 minutes learning about Tauri.

    Maybe evcxr would give you a head start, it's a Rust-based Jupyter Kernel. Jupyter has a fairly mature ecosystem with widgets and it's easy to come up with renderers for different MIME types, so you might be able to lift some ideas or connect with other people working on similar tasks.

    https://github.com/google/evcxr

  • by Leftium on 10/25/22, 3:00 AM

    https://prosemirror.net/: A toolkit for building rich-text editors on the web

    ProseMirror was written by Marijn Haverbeke, who also wrote (and rewrote!) the much used [CodeMirror] editor. So the design of his "editor toolkits" are based on years of experience developing and maintaining text editors. Marijn is very responsive on all the respective discussion boards.

    Examples, including markdown: https://prosemirror.net/examples/

    Depending on your design, CodeMirror may be the better choice, especially if you want "parsing." The core of CodeMirror is based on [Lezer], a custom parser designed for editors. ProseMirror is meant to be the rich text editor, but I found my TaskPaper clone was more suited for CodeMirror because it was more focused on plain text. I suppose it would be possible to combine Lezer with ProseMirror, but ProseMirror already has its own [document model].

    [CodeMirror]: https://codemirror.net/

    [Lezer]: https://lezer.codemirror.net/

    [document model]: https://prosemirror.net/docs/guide/#doc

  • by Marta_B on 10/25/22, 8:31 AM

    Check out CKEditor 5, with media embed and Markdown support :)

    https://ckeditor.com/docs/ckeditor5/latest/features/media-em... Though for Twitter previews you might need to use services like Iframely but there is a ready-to-use integration guide: https://iframely.com/docs/ckeditor

    As for Markdown, you can switch the default CKEditor 5 output from HTML to Markdown: https://ckeditor.com/docs/ckeditor5/latest/features/markdown... And Markdown input is provided by a customizable autoformatting feature. It's enabled by default in all CKEditor 5 builds.

  • by eimrine on 10/25/22, 4:13 AM

    You may be interested in this book http://www.finseth.com/craft/