Ghost: Feature: New Mobiledoc Editor

[ErisDS]

The Ghost editor is based on a 3 year old split-screen markdown-editing concept, which is now somewhat long-in-the-tooth. Modern WYSIWYG editors like Quip, Draft, Editorially or Dropbox's Paper have shown what can be achieved when you leave old-style WYSIWYG behind... and it's awesome 🎉

The 3 key problem areas with the current editor are:

• our markdown parser is buggy and limited (markdown itself is limited).
• split-screen doesn't provide a great UX, especially on longer documents and restricts our screen space for adding editorial tools.
• The current editor is not customisable or configurable.

These 3 issues are the fundamental problems that we are want to address by refreshing the editor. However, when we look closely at the existing editor, there's a deeper set of problems. We feel we've outground both markdown-only and the split-screen concepts. Markdown-only is limiting in terms of features and exclusive in terms of users. The split-screen is flawed and takes up insane amounts of screen real-estate that could (and should) be used for more advanced editorial features.

The future is Mobiledoc

Moving forward, we want to build ourselves an editor for the future. We want to support more advanced editorial features out-of-the-box, whilst also enabling users to customise the editor to suit their specific use cases. To do all this, we need an underlying editor technology that will support us all the way form a basic editing surface through to customisations and collaboration.

After reviewing the editor technologies that are around, we settled on experimenting with an editor based on mobiledoc kit.

Mobiledoc is not an editor itself, it is a document format for article-style content. Mobiledoc-kit solves the fundamental problem of browser editors: the fact that the HTML you interact with when editing in the browser is different to the HTML that will be output when your content is viewed.

Mobiledoc also has a built-in concept of extensible "cards" or blocks of content. Each card has 3 conceptual parts: the stored content, the interface for editing the content, and the renderer for outputting the content. This feature allows us to create a simple way to extend our editor with all manner of layout & embed features.

In addition to all this, Mobiledoc has an amazing team behind it. It's built to work for Ember, by people who are also part of the Ember core team. It's being sponsored by Bustle, who are already using it in production. We're excited to be able to get involved, and help champion this new technology as the way forward for web-based editors.

The initial plan 😁

Building a whole new editor is going to take time and patience to get perfect. That's part of the reason that we're currently shipping weekly alphas. The first iteration of the editor is coming in alpha 2, and by the time we ship Ghost 1.0, we're hoping to have the following features:

• A single-pane WYSIWYG editor space that supports all the features of mobiledoc, which will include a toolbar, unlike our existing editor. Mobiledoc covers basic text formatting like bold and italic, making them available using keyboard shortcuts, markdown syntax or the toolbar, depending on your preference. Mobiledoc should provide everything you need for long-form editorial writing.
• An HTML card, which allows for embeds and writing full-HTML to format your text when mobiledoc is not enough. This is the ultimate fall-back card, and will allow you to add anything from fancy pull-quotes to fully interactive graphs to your posts.
• An image card, for easy uploading of one or more images. This will also provide support for basic layout options, captions, and eventually more advanced features like slideshows.
• The markdown card, for those of you who still love markdown 😍 This will also be used to provide some backwards compatibility with content from the old editor.

As well as these individual cards we'll be ensuring that all the peripheral behaviours work as well as possible, including editing, undo/redo behaviour, keyboard shortcuts, the toolbar, dragging and dropping cards, adding more markdown-style formatting command, using notion-style / commands to add cards and tonnes more details that you'll only notice if they're not right 😉

The initial version of this editor will be landing in alpha, without backwards compatibility. Over the next few weeks, we will be iterating on the editor, adding more features, polishing the UI and eventually implementing basic backwards compatibility.

This first phase is largely an experiment. Attempting to lay foundations for advanced tools and customisations, setting up the building blocks that will see us long into the future. Along side this, we will be adding tooling around images for handling optimisations and serving different sizes. The possibilities for advanced tooling are pretty much endless once we've got these basic pieces in place. We're also aiming for crazy levels of customisation, with custom cards, templates and other configurable options, however we don't expect to ship these in full until after Ghost 1.0.

[nuclearpengy]

This sounds like an immense amount of work. :)

Keen to see how it all works out. I love the current editor from a simplicity perspective but can understand that it might be a bit intimidating to non-markdown fanatics and that to be future ready things need to change.

[vickychijwani]

Just curious: will Ghost 1.0 be able to deal with Markdown extras like fenced code blocks and footnotes?

[disordinary]

@vickychijwani at this stage there is no plan to upgrade markdown support beyond what's currently supported by Ghost.

[vickychijwani]

@disordinary Ghost _does_ support those features currently: https://help.ghost.org/hc/en-us/articles/224410728-Markdown-Guide. Basically I'm trying to understand if my old posts using those features will break after upgrading to 1.0.

[ErisDS]

@vickychijwani the new editor will use mobiledoc, not markdown. The plan for the markdown card is that it will match the current editor.

Obviously EVERYONE is going to need a way to migrate their content, but there will not be a normal upgrade path from LTS to v1.0. We haven't 100% decided how we're going to handle migrations at this point, but that is not a point for discussion on this issue ;) Have a read of https://dev.ghost.org/lts/ and if you have more questions please swing by slack.

[ebauger]

It's just an ideal. I just see this prototype UI from producthunt.com and look simple and effective.

https://bold.io/

[disordinary]

Thanks for the link @ebauger, it's always interesting to see new editors out there and how they've solved the various problems. They usually validate what we're trying to do.

We are definitely going for a minimalist but intuitive interface similar to bold. The idea is for the UI to get out of the way when you don't need it but always be there when you do. It's a balancing act because we're looking at a much more feature rich and extendable experience than some of the others.