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. already has the markdown editor for desktop and iOS. The desktop app uses 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. Inkdrop CodeMirror 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 . I tried to fix the problems of CodeMirror though, I finally gave up. Android keyboards considered harmful 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 . 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. CodeFlask.js editable — The minimal `contenteditable` wrapper component 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. editable 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.

Making Markdown Editor for Android App

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to Price Yourself as a Freelance Developer

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

10 good rules for bad App

How to Price Yourself as a Freelance Developer

Java bits: 0xFF and 0xFFL

10 Things You Didn't Know You Could Do With Google Keep

10 Things to check on Android code reviews

10 Mistakes In Mobile App Development That Make You Look Dumb

10 good rules for bad App

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps