For my Catenary project, I would like to be able to create and edit Markdown text files with some level of WYSIWYG text formatting. In my web editor, I use the vditor library - it is a pretty comprehensive Markdown editor from a Chinese developer, that supports WYSIWYG and split-view editing and is quite configurable. It was the best I found at the time (for free, anyway), though hasn't been updated in several years, which is always a concern.
I have been looking for a Jetpack Compose Multiplatform library that can fulfil a similar function on Desktop and Android, and unfortunately the pickings are slim.
But first, I need to consider my actual needs:
- On Desktop, I would like as powerful a solution as I can find, that will allow me to write plain Markdown, or to write with the support of tools (such as buttons for bold and headlines), or to write in a WYSIWYG way similar to vditor. A split-screen view may also be nice.
- On the Android mobile phone app, I will be more constrained for space. I will, for now, accept a plain text editor, and a Markdown-to-formatted text render. My investigations have shown that a WYSIWYG editor on Android is not plausible, for now.
- I am going to ignore images entirely for now.
Options appraisal
- GitHub - MohamedRejeb/compose-rich-editor
- This is probably the most comprehensive Markdown and rich text editor component available. It's actively maintained and supports both Markdown and HTML editing. There is an online demo. I haven't quite got the rich text editing working yet. A cruicial gap for me, however, is that it does not support multi-line code blocks (triple backticks). There are also a lot of open issues on the Github project.
- GitHub - mikepenz/multiplatform-markdown-renderer
- Looks to be the best Markdown rendering library, with comprehensive support for the Markdown I will need, including code blocks. It even supports syntax highlighting for code blocks. It is not an editor, however.
- GitHub - halilozercan/compose-richtext
- A collection of libraries rather than a fully featured component, this project shows promise but isn't an editor and is still alpha-level software
- GitHub - Wavesonics/ComposeTextEditorLibrary
- An impressive attempt to build a Compose rich text editor from scratch (not dependent on the
BasicTextField
component from Compose). It should support similar functionality to MohamedRejeb's project above, but unfortunately it crashed for me.
- An impressive attempt to build a Compose rich text editor from scratch (not dependent on the
- GitHub - Qawaz/compose-code-editor
- A more general code text editing component with some syntax highlighting. It's Markdown support is superficial and it's an old library, not updated recently.
- GitHub - colintheshots/MarkdownTwain
- Another renderer-only, but it's a Compose wrapper around an old Android Views component, so Android only.
I will be trialling compose-rich-editor and multiplatform-markdown-renderer . I haven't managed to get Markdown editing working with MohamedRejeb's component yet, and it's lack of support of triple-backtick code blocks is a significant limitation. MikePenz's renderer may be the best option for the Android application. I may even combine both of these - Rejeb for editing, Penz for rendering.
Further notes
compose-rich-editor:
- doesn't allow me to manually type markdown formatting within the wysiwyg-ish editor field. This would be really annoying to use. You'd have to click a B button to add bold text, and the library doesn't provide any such buttons. In the limited space of a phone screen, that's starting to to feel like a blocker.
- doesn't support triple backtick code blocks, as mentioned above. It doesn't render single backtick code elements correctly either; there's no switch to a fixed-width font.
- haven't worked out how to manage the scroll state; when rendering long Markdown content it always jumps to the end of the content. I'd rather it rendered the content from top and I'd be responsible for scrolling.
multiplatform-markdown-renderer:
- It's a proper Markdown AST (abstract syntax tree) renderer, though I have found various quirks where it doesn't render quite as I would expect.
- Wouldn't compile in IntelliJ for me; I had to use Android Studio (incompatible versions of AGP, despite being on the latest releases of both applications).
The issues with compose-rich-editor are turning me against it as a solution. For now, I will probably just present a simple BasicTextField
to contain and edit the raw Markdown text, and try the multiplatform-markdown-renderer to render the text correctly.
I may be able to add a few buttons (bold, italic, etc) and manipulate the content of that with TextFieldState.edit
. Very basic editing, enough for the phone app at least.