Mobiledoc editor (or: Build a Koenig-equivalent for Android/cross-platform)

[vickychijwani]

Background

First off: What is mobiledoc and how does it relate to Ghost? 👀👇

• https://blog.ghost.org/2-0/
• https://github.com/bustle/mobiledoc-kit/blob/master/MOBILEDOC.md

Where we are today

Currently Ghost Android only supports posts with a single Markdown card. Only such posts can be previewed and edited; for all other posts, the app refuses to open them at all. When creating a new draft, the app presents a basic Markdown editor, as it was before Ghost 2.0, with no notion of "cards" or any other rich content at the moment.

What needs to get done

Full mobiledoc support (which, to be clear, is not currently planned) would involve implementing the following pieces:

• Rendering mobiledoc: Take mobiledoc as input, and render it on Android using native/Flutter/React Native widgets
• Card-based editor: Building on top of the renderer, create a card-based editor for Android, similar to the one in Ghost Admin on the web or in Medium's mobile app (note: the Medium app presents the UI differently, but the fundamental unit of editing can still be interpreted as a "card"). Naturally, the editor should store/serialize its contents in the mobiledoc format.

This work can be further broken down: once a foundation for rendering and manipulating the mobiledoc format is laid, the various card types can be implemented separately (see here for an up-to-date list of what mobiledoc cards Ghost Admin supports).

Interested in helping out? This could be an opportunity to learn Flutter or React Native! ✨

Given the nature of this project, it's going to be quite well-isolated from the rest of the Ghost Android codebase, which means it'll be a lot easier for someone new to get started 🚗💨

If you're interested in helping out (or even if you think you might be interested but would like more details first), just add a comment in this thread 💬

Why Flutter/React Native?

• This project is mostly UI so those frameworks should be a good fit; not many Android-specific APIs will be required
• Well-isolated from the rest of Ghost Android, should be easier to embed/integrate
• The editor could be reused in a future Ghost iOS app, and if things go well, it may well make sense to adopt the framework for a full-fledged cross-platform app 👻📱

One thing that is currently unclear is that although Flutter and React Native can both be embedded into existing apps, it is possible that some required APIs are missing, so some more exploration would be required before committing to one of these frameworks.

Of course, a pure native solution is also welcome.

[adaam2]

Hey, I'm on a self hosted Ghost instance, and am trying to load and edit existing posts using the Android application, and am met by this issue.

I am by no means an Android guy, but I'd be willing to have a crack at fixing this if you could provide a little more technical detail on what is necessary to get it working :)

[kocielnik]

@vickychijwani, do you see a way forward with this issue through making the current Koenig editor a PWA?

That would take care of the UI part, and the key missing piece would be to store and manage offline updates.

Steps:

1. Add manifest.webmanifest file to editor,
2. Add sw.js file to editor,
3. Add logic to manage offline/online state to sw.js.

A great example of this done right is the app at kanbanflow.com.

On Android, it can be "installed" right from the browser, and feels smooth just like a native app when used.