I think it’d be good to share my idea about implementing the app with you. In this article, I’m gonna explain my thoughts how to make a markdown editor for Android app on which I’m currently working.
Inkdrop already has the markdown editor for desktop and iOS. The desktop app uses CodeMirror for the editor. It also works well on iOS with some fixes (e.g., Japanese support). But it doesn’t work well on Android. So other solution is needed.
Requirements:
- Syntax highlight
- Syntax highlight in code blocks
- Input support (e.g., Continuous list)
- License (Free and not GPL-ish)
Other possible choices:
- Ace editor
- Monaco editor
- Native implementations
They are great libraries but unfortunately don’t fulfill the requirements. As marijnh says, it seems that Android keyboards considered harmful. I tried to fix the problems of CodeMirror though, I finally gave up.
Idea: Overlap Two Divs
The editor requirements are simple. It doesn’t need auto-complete and other IDE-like features. But it’s hard to implement it using contenteditable -enabled div from scratch because of syntax highlight feature. It’s so complicated and costs too much. I need simpler solution.
I came up with an idea overlapping two divs. One is for editing and other is for syntax highlight. The result is remarkable.
The two divs has same content. The foreground one is syntax highlighted and disabled user interactions with CSS:
pointer-events: none;
user-select: none;
background: transparent;
The background div is dimmed:
color: rgba(255,255,255,0.3);
It can’t be completely transparent because the cursor color is same as the text color on Android.
With this approach, it still needs to add the input support feature.
CodeFlask.js — The simple code editor which works great on Android
I found a good library which takes same approach, is called CodeFlask.js. It proves my idea. It uses Prism.js for syntax highlighting but I prefer to use React.js and Highlight.js. It’s not possible to use as it is but I could reuse some parts of them. Cool.
editable — The minimal `contenteditable` wrapper component
editable is another library I found which is a good example implementation of editor based on contenteditable. It’s no longer maintained but still reusable codebase. It simplifies API of Range and Selection.
I would reuse them to implement the input support feature.
Conclusion
It turned out that it’s difficult to use CodeMirror for Android. I found an practical approach to implement the markdown editor. It’s to overlap two divs with contenteditable. There’re some good libraries which could combine with my idea.