Content-Kit is now Mobiledoc Kit

Today we’re releasing Mobiledoc Kit 0.6.0.

Previously, we’ve used the name Content-Kit Editor to describe this package. As we implemented the goals laid out in the post Content-Kit: Programmatic Editing, it became clear the codebase was diverging from being an editor in the sense that most users would expect it to be. For example, it no longer sports a toolbar or much UI.

Renaming the editor project “Mobiledoc Kit” achieves two goals:

• The new name ties this package closer to the Mobiledoc format, which we think is the most significant differentiator of our efforts.
• By naming the project a “kit”, we open the door to editors being implemented on top of Mobiledoc Kit. For example, we’re also releasing Ember Mobiledoc Editor 0.2.0 today. This editor has the toolbar and UX features you would expect from something calling itself an editor.

This release also coincides with the first large-scale rollout of Mobiledoc at Bustle’s new website Romper. Over 750 articles have been published, and dozens more a day are being written with a CMS based on Ember Mobiledoc Editor.

Since 0.4.0 in August, Mobiledoc and the kit have introduced several notable improvements. Let’s take a look.

Programmatic Editing

As proposed in the last blog post on Mobiledoc, we’ve implemented several editing APIs that allow consumers to modify posts and build custom user interfaces. We’ve also dropped nearly all UI from the Mobiledoc Kit project, and re-implemented most of it in the Ember Mobiledoc Editor

Several lifecycle hooks have been added to the editor, which allows toolbars and other custom UX to be implemented.

Ember Mobiledoc Editor

The Ember Mobiledoc Editor includes components for rendering an editor and customizing the UI. For example, this template would render an editor and toolbar:

{{#mobiledoc-editor mobiledoc=someDoc cards=(myCards) as |editor|}}
  {{#mobiledoc-section-button editor=editor for="h2"}}
    Headline
  {{/mobiledoc-section-button}}
  {{#mobiledoc-markup-button editor=editor for="strong"}}
    Bold
  {{/mobiledoc-markup-button}}
{{/mobiledoc-editor}}

Additionally, the Ember editor includes support for card display and editor modes being written as Ember components. This makes building new cards trivial, requiring very little knowledge of Mobiledoc Kit and zero knowledge of its internals.

Cut, Copy, Paste

Earlier versions of Mobiledoc Kit had limited or no support for pasting content. 0.6.0 adds battle-tested support for several scenarios:

• Pasting between any two Mobiledoc Kit instances is supported for text and card content. For example given the “Selfie Card” demo at bustle.github.io/mobiledoc-kit/demo, you could snap a selfie, copy that part of the post, then paste it into any other kit instance supporting that card. The copying of a card payload is lossless, and the card is still editable.
• Using the HTML output of Google Docs as a baseline, we’ve implemented support for pasting copied webpages into Mobiledoc Kit. Among the challenges for a complete pasting solution is how to handle non-text items. We’ve added hooks to the HTML parser that allow images to be converted into cards, and will work on making a public API for parser hooks in the next release. For now you can see the cardParsers option and calling code.
• Copying from Mobiledoc Kit and pasting into any HTML parsing editor is also supported. The copied content is rendered specifically for that copy attempt, and, for example, will contain the display version of a card even if that card is in edit mode.

Better Card Cursors

In August, cursors in Mobiledoc Kit would skip over cards. Cards themselves had no before or after cursors. Amongst other limitations, this meant there was no way to have a cursor after a card that was the last section in a post.

0.6.0 improved cursor interaction with cards, making them behave much more like you would expect from any other editor. For example:

The “Image Card” demo at at bustle.github.io/mobiledoc-kit/demo is a good place to experiment with these changes.

Improved Webpack Support

We’ve seen some interest in Mobiledoc from webpack and React users. These tools expect our packaging to be slightly different than how we’ve been doing it so far.

Webpack is a build tool that supports modules imported via CommonJS. Mobiledoc Kit and the various renderers did not originally have CommonJS builds enabled, but they do now.

Webpack treats dependencies in NPM’s package.json file as dependencies for the browser. This means we cannot have any build-time dependencies listed in package.json, a strategy that is unfortunately incompatible with these packages being Ember addons. Consequently, we’ve spun out a separate addon for each of our renderers.

• mobiledoc-dom-renderer and ember-mobiledoc-dom-renderer
• mobiledoc-html-renderer and ember-mobiledoc-html-renderer
• Finally we’ve introduced the mobiledoc-text-renderer and ember-mobiledoc-text-renderer, which we’re using for creating searchable versions of Mobiledoc posts for AWS ElasticSearch

More interest from webpack users is exciting, and we’re happy to better support their tooling.

Other Changes

Options for what kinds of markup can be created have been expanded to include underline, subscript, superscript, and strikethrough. Thanks to @vitosamson for this addition!

Card payloads can now be saved without toggling the card back to display mode. See Available hooks in the card documentation for more details.

For a more detailed summary of changes in the recent few releases, see the Mobiledoc Kit CHANGELOG.md.

What’s Coming

We have several projects underway today that are expected to land soon:

• @rlivsey is working on support for “Atoms” in Mobiledoc and Mobiledoc Kit. This may be a breaking change in the Mobiledoc format, and necessitate a version bump and migration script for current Mobiledocs. You can follow his work on PR #226.
• Parsing hooks must be formalized into a public API. We’re tracking this on Issue #229.
• To mature and encourage a card ecosystem, we’ve begun an exploration of how to improve card packaging and card APIs. See Issue #228 for an in-depth discussion and some proposed changes.
• We’ve regressed on support for IE, and are tracking progress to improve it in Issue #212.

Big thanks to Bustle Labs for continued sponsorship of our work on Mobiledoc. We’re having a great time with their smart and fun team here in NYC. Bustle is looking for senior software engineers and senior UX designers to join their crew.