Mobiledoc format 0.3.1, new section and markup tags

* Adds support for section tag names: `h4`, `h5`, `h6`, `aside` * Add markup tag name: `code` * Tweak yarn setup/versions for new renderers
bustle · Nov 16, 2016 · 57670bb · 57670bb
1 parent 0eada43
commit 57670bb
Show file tree

Hide file tree

Showing 28 changed files with 510 additions and 55 deletions.
diff --git a/MOBILEDOC.md b/MOBILEDOC.md
@@ -36,7 +36,7 @@ The wrapper signature:
 
 ```
 {
-  version: "0.3.0",                         ──── Versioning information
+  version: "0.3.1",                         ──── Versioning information
   markups: [                              ──── Ordered list of markup types
     markup,
     markup
@@ -63,7 +63,7 @@ Markups have a tagName and an optional array of attributes. Not all markups can
 
 ```
 {
-  version: "0.3.0",
+  version: "0.3.1",
   markups: [
     [tagName, optionalAttributesArray],   ──── Markup
     ["em"],                               ──── Example simple markup with no attributes
@@ -78,7 +78,7 @@ Atoms have a name, text value and arbitrary payload.
 
 ```
 {
-  version: "0.3.0",
+  version: "0.3.1",
   atoms: [
     [atomName, atomText, atomPayload],    ──── Atom
     ['mention', '@bob', { id: 42 }]       ──── Example 'mention' atom
@@ -92,7 +92,7 @@ Cards have a name and arbitrary payload.
 
 ```
 {
-  version: "0.3.0",
+  version: "0.3.1",
   cards: [
     [cardName, cardPayload],            ──── Card
     ['image', {                         ──── Example 'image' card
@@ -108,7 +108,7 @@ Markup sections, in addition to plain text, can include markups and atoms.
 
 ```
 {
-  version: "0.3.0",
+  version: "0.3.1",
   markups: [
     ["b"],                                ──── Markup at index 0
     ["i"]                                 ──── Markup at index 1
@@ -140,6 +140,18 @@ Markup sections, in addition to plain text, can include markups and atoms.
 }
 ```
 
+A section `tagName` must be one of:
+
+* `aside`
+* `blockquote`
+* `h1`
+* `h2`
+* `h3`
+* `h4`
+* `h5`
+* `h6`
+* `p`
+
 The index in `openMarkupsIndex` specifies which markups should be opened at
 the start of the `value` text. As these tags are opened, then create a stack
 of opened markups. The `numberOfClosedMarkups` says how many of those opened markup tags should
@@ -149,14 +161,27 @@ In addition to markers, markup sections may contain [ATOMS](ATOMS.md).
 Atoms in a markup section have a `textTypeIdentifier` of 1 and contain an `atomTypeIndex`.
 They also contain the same `openMarkupsIndex` and `numberOfClosedMarkups` values that other markers have, so that markup can flow across them.
 
+A markup definition array's first item (the markup `tagName`) must be one of:
+
+* `a` - Hypertext link
+* `b` - Bold
+* `code` - Code
+* `em` - Emphasis
+* `i` - Italic
+* `s` - Strike-through
+* `strong` - Strong
+* `sub` - Subscript
+* `sup` - Superscript
+* `u` - Underline
+
 If an atom is present in Mobiledoc but no atom implementation is registered, the text
 value of the atom will be rendered as plain text as a fallback.
 
 **Card Section**
 
 ```
 {
-  version: "0.3.0",
+  version: "0.3.1",
   cards: [
     ["card-name", { cardPayload }]
   ],

diff --git a/README.md b/README.md
@@ -74,7 +74,7 @@ optionally a Mobiledoc to load. For example:
 
 ```js
 var simpleMobiledoc = {
-  version: "0.3.0",
+  version: "0.3.1",
   markups: [],
   atoms: [],
   cards: [],
@@ -117,7 +117,7 @@ document's `<head>`:
 
 ### Editor API
 
-* `editor.serialize(version="0.3.0")` - serialize the current post for persistence. Returns
+* `editor.serialize(version="0.3.1")` - serialize the current post for persistence. Returns
   Mobiledoc.
 * `editor.destroy()` - teardown the editor event listeners, free memory etc.
 * `editor.disableEditing()` - stop the user from being able to edit the

diff --git a/assets/demo/vendor/mobiledoc-pretty-json-renderer.js b/assets/demo/vendor/mobiledoc-pretty-json-renderer.js
@@ -52,7 +52,7 @@ var mobiledocPrettyJSONRenderer =
 	  if (doc == null || typeof doc === 'string') {
 	    return JSON.stringify(doc);
 	  }
-	  if (doc.version !== '0.3.0') {
+	  if (doc.version && doc.version.indexOf('0.3') === 0) {
 	    return JSON.stringify(doc, null, 2);
 	  }
 	  var lists = [
@@ -208,4 +208,4 @@ var mobiledocPrettyJSONRenderer =
 
 
 /***/ }
-/******/ ]);
+/******/ ]);
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "repository": "https://github.com/bustlelabs/mobiledoc-kit",
   "scripts": {
     "start": "broccoli serve --host 0.0.0.0",
-    "test:ci": "npm run build:docs && npm run build && testem ci -f testem-ci.json",
+    "test:ci": "PATH=node_modules/phantomjs-prebuilt/bin/:$PATH npm run build:docs && npm run build && testem ci -f testem-ci.json",
     "test": "PATH=node_modules/phantomjs-prebuilt/bin/:$PATH npm run build:docs && npm run build && testem ci -f testem.json",
     "build": "rm -rf dist && broccoli build dist",
     "build:docs": "jsdoc -c ./.jsdoc",
@@ -37,13 +37,13 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "mobiledoc-html-renderer": "^0.3.0",
-    "mobiledoc-text-renderer": "^0.3.0"
+    "mobiledoc-html-renderer": "0.3.1",
+    "mobiledoc-text-renderer": "0.3.1"
   },
   "devDependencies": {
     "broccoli": "^0.16.9",
-    "broccoli-cli": "^1.0.0",
     "broccoli-babel-transpiler": "^5.6.1",
+    "broccoli-cli": "^1.0.0",
     "broccoli-funnel": "^1.0.1",
     "broccoli-inject-livereload": "^0.2.0",
     "broccoli-less-single": "^0.6.2",

diff --git a/src/js/editor/text-input-handlers.js b/src/js/editor/text-input-handlers.js
@@ -33,7 +33,7 @@ export function replaceWithListSection(editor, listTagName) {
  * Does nothing if the cursor position is not at the start of the section.
  *
  * @param {Editor} editor
- * @param {String} headingTagName ("h1","h2","h3")
+ * @param {String} headingTagName ('h1', 'h2', 'h3', 'h4', 'h5', 'h6')
  * @public
  */
 export function replaceWithHeaderSection(editor, headingTagName) {
@@ -70,8 +70,15 @@ export const DEFAULT_TEXT_INPUT_HANDLERS = [
   },
   {
     name: 'heading',
-    // "# " -> h1, "## " -> h2, "### " -> h3
-    match: /^(#{1,3}) $/,
+    /*
+     * "# " -> h1
+     * "## " -> h2
+     * "### " -> h3
+     * "#### " -> h4
+     * "##### " -> h5
+     * "###### " -> h6
+     */
+    match: /^(#{1,6}) $/,
     run(editor, matches) {
       let capture = matches[1];
       let headingTag = 'h' + capture.length;

diff --git a/src/js/models/markup-section.js b/src/js/models/markup-section.js
@@ -5,16 +5,32 @@ import { MARKUP_SECTION_TYPE } from './types';
 
 // valid values of `tagName` for a MarkupSection
 export const VALID_MARKUP_SECTION_TAGNAMES = [
-  'p', 'h3', 'h2', 'h1', 'blockquote', 'pull-quote'
+  'aside',
+  'blockquote',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'p'
 ].map(normalizeTagName);
 
 // valid element names for a MarkupSection. A MarkupSection with a tagName
 // not in this will be rendered as a div with a className matching the
 // tagName
 export const MARKUP_SECTION_ELEMENT_NAMES = [
-  'p', 'h3', 'h2', 'h1', 'blockquote'
+  'aside',
+  'blockquote',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'p'
 ].map(normalizeTagName);
-export const DEFAULT_TAG_NAME = VALID_MARKUP_SECTION_TAGNAMES[0];
+export const DEFAULT_TAG_NAME = VALID_MARKUP_SECTION_TAGNAMES[8];
 
 const MarkupSection = class MarkupSection extends Markerable {
   constructor(tagName=DEFAULT_TAG_NAME, markers=[]) {

diff --git a/src/js/models/markup.js b/src/js/models/markup.js
@@ -4,15 +4,16 @@ import { MARKUP_TYPE } from './types';
 import assert from '../utils/assert';
 
 export const VALID_MARKUP_TAGNAMES = [
+  'a',
   'b',
+  'code',
+  'em',
   'i',
+  's',   // strikethrough
   'strong',
-  'em',
-  'a',
-  'u',
   'sub', // subscript
   'sup', // superscript
-  's'    // strikethrough
+  'u'
 ].map(normalizeTagName);
 
 export const VALID_ATTRIBUTES = [

diff --git a/src/js/parsers/mobiledoc/0-2.js b/src/js/parsers/mobiledoc/0-2.js
@@ -80,7 +80,7 @@ export default class MobiledocParser {
   }
 
   parseMarkupSection([type, tagName, markers], post) {
-    const section = this.builder.createMarkupSection(tagName);
+    const section = this.builder.createMarkupSection(tagName.toLowerCase() === 'pull-quote' ? 'aside' : tagName);
     post.sections.append(section);
     this.parseMarkers(markers, section);
     // Strip blank markers after they have been created. This ensures any