diff --git a/demo/demo.js b/demo/demo.js index baabc7790..de8b97c9b 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -289,99 +289,140 @@ function attemptEditorReboot(editor, textarea) { } } +var MOBILEDOC_VERSION = "0.1"; var sampleMobiledocs = { - simpleMobiledoc: [ - [], - [ - [1, "H2", [ - [[], 0, "headline h2"] - ]], - [1, "P", [ - [[], 0, "hello world"] - ]] + simpleMobiledoc: { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [1, "H2", [ + [[], 0, "headline h2"] + ]], + [1, "P", [ + [[], 0, "hello world"] + ]] + ] ] - ], - - mobileDocWithMarker: [ - [['B']], - [ - [1, "H2", [ - [[], 0, "headline h2"] - ]], - [1, "P", [ - [[0], 1, "bold world"] - ]] + }, + + mobileDocWithMarker: { + version: MOBILEDOC_VERSION, + sections: [ + [['B']], + [ + [1, "H2", [ + [[], 0, "headline h2"] + ]], + [1, "P", [ + [[0], 1, "bold world"] + ]] + ] ] - ], - - mobileDocWithMultipleMarkers: [ - [['B'], ['I']], - [ - [1, "H2", [ - [[], 0, "headline h2"] - ]], - [1, "P", [ - [[], 0, "hello "], - [[0], 1, "bold, "], - [[1], 1, "italic "], - [[], 0, "world."] - ]] + }, + + mobileDocWithMultipleMarkers: { + version: MOBILEDOC_VERSION, + sections: [ + [['B'], ['I']], + [ + [1, "H2", [ + [[], 0, "headline h2"] + ]], + [1, "P", [ + [[], 0, "hello "], + [[0], 1, "bold, "], + [[1], 1, "italic "], + [[], 0, "world."] + ]] + ] ] - ], - - mobileDocWithAttributeMarker: [ - [['A', ['href', 'http://github.com/bustlelabs/content-kit-editor']]], - [ - [1, "H2", [ - [[], 0, "headline h2"] - ]], - [1, "P", [ - [[], 0, "see it "], - [[0], 1, "on github"], - [[], 0, "."] - ]] + }, + + mobileDocWithAttributeMarker: { + version: MOBILEDOC_VERSION, + sections: [ + [['A', ['href', 'http://github.com/bustlelabs/content-kit-editor']]], + [ + [1, "H2", [ + [[], 0, "headline h2"] + ]], + [1, "P", [ + [[], 0, "see it "], + [[0], 1, "on github"], + [[], 0, "."] + ]] + ] + ] + }, + + mobileDocWithAttributeMarker: { + version: MOBILEDOC_VERSION, + sections: [ + [['A', ['href', 'http://github.com/bustlelabs/content-kit-editor']]], + [ + [1, "H2", [ + [[], 0, "headline h2"] + ]], + [1, "P", [ + [[], 0, "see it "], + [[0], 1, "on github."] + ]] + ] ] - ], - - mobileDocWithSimpleCard: [ - [], - [ - [1, "H2", [ - [[], 0, "Simple Card"] - ]], - [10, "simple-card"] + }, + + mobileDocWithSimpleCard: { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [1, "H2", [ + [[], 0, "Simple Card"] + ]], + [10, "simple-card"] + ] ] - ], - - mobileDocWithEditCard: [ - [], - [ - [1, "H2", [ - [[], 0, "Edit Card"] - ]], - [10, "edit-card"] + }, + + mobileDocWithEditCard: { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [1, "H2", [ + [[], 0, "Edit Card"] + ]], + [10, "edit-card"] + ] ] - ], - - mobileDocWithInputCard: [ - [], - [ - [1, "H2", [ - [[], 0, "Input Card"] - ]], - [10, "input-card"] + }, + + mobileDocWithInputCard: { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [1, "H2", [ + [[], 0, "Input Card"] + ]], + [10, "input-card"] + ] ] - ], - - mobileDocWithSelfieCard: [ - [], - [ - [1, "H2", [ - [[], 0, "SelfieCard"] - ]], - [10, "selfie-card"] + }, + + mobileDocWithSelfieCard: { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [1, "H2", [ + [[], 0, "SelfieCard"] + ]], + [10, "selfie-card"] + ] ] - ] + } }; diff --git a/src/js/parsers/mobiledoc.js b/src/js/parsers/mobiledoc.js index 345b66dc7..00f3e4adf 100644 --- a/src/js/parsers/mobiledoc.js +++ b/src/js/parsers/mobiledoc.js @@ -12,9 +12,9 @@ export default class MobiledocParser { this.builder = generateBuilder(); } - parse(mobiledoc) { - const markerTypes = mobiledoc[0]; - const sections = mobiledoc[1]; + parse({version, sections: sectionData}) { + const markerTypes = sectionData[0]; + const sections = sectionData[1]; const post = this.builder.generatePost(); diff --git a/src/js/renderers/mobiledoc.js b/src/js/renderers/mobiledoc.js index 259e43d38..85580d24c 100644 --- a/src/js/renderers/mobiledoc.js +++ b/src/js/renderers/mobiledoc.js @@ -5,6 +5,8 @@ import { IMAGE_SECTION_TYPE } from "../models/image"; import { MARKER_TYPE } from "../models/marker"; import { MARKUP_TYPE } from "../models/markup"; +export const MOBILEDOC_VERSION = '0.1'; + let visitor = { [POST_TYPE](node, opcodes) { opcodes.push(['openPost']); @@ -51,7 +53,10 @@ let postOpcodeCompiler = { openPost() { this.markerTypes = []; this.sections = []; - this.result = [this.markerTypes, this.sections]; + this.result = { + version: MOBILEDOC_VERSION, + sections: [this.markerTypes, this.sections] + }; }, openMarkup(tagName, attributes) { if (!this._seenMarkerTypes) { diff --git a/tests/acceptance/editor-sections-test.js b/tests/acceptance/editor-sections-test.js index 172ecd0e4..7bbac8a0f 100644 --- a/tests/acceptance/editor-sections-test.js +++ b/tests/acceptance/editor-sections-test.js @@ -1,44 +1,54 @@ import { Editor } from 'content-kit-editor'; import Helpers from '../test-helpers'; +import { MOBILEDOC_VERSION } from 'content-kit-editor/renderers/mobiledoc'; const { test, module } = QUnit; const newline = '\r\n'; let fixture, editor, editorElement; -const mobileDocWith1Section = [ - [], - [ - [1, "P", [ - [[], 0, "only section"] - ]] +const mobileDocWith1Section = { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [1, "P", [ + [[], 0, "only section"] + ]] + ] ] -]; -const mobileDocWith2Sections = [ - [], - [ - [1, "P", [ - [[], 0, "first section"] - ]], - [1, "P", [ - [[], 0, "second section"] - ]] +}; +const mobileDocWith2Sections = { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [1, "P", [ + [[], 0, "first section"] + ]], + [1, "P", [ + [[], 0, "second section"] + ]] + ] ] -]; -const mobileDocWith3Sections = [ - [], - [ - [1, "P", [ - [[], 0, "first section"] - ]], - [1, "P", [ - [[], 0, "second section"] - ]], - [1, "P", [ - [[], 0, "third section"] - ]] +}; +const mobileDocWith3Sections = { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [1, "P", [ + [[], 0, "first section"] + ]], + [1, "P", [ + [[], 0, "second section"] + ]], + [1, "P", [ + [[], 0, "third section"] + ]] + ] ] -]; +}; module('Acceptance: Editor sections', { beforeEach() { diff --git a/tests/unit/editor/card-lifecycle-test.js b/tests/unit/editor/card-lifecycle-test.js index 087a45d87..2a3174629 100644 --- a/tests/unit/editor/card-lifecycle-test.js +++ b/tests/unit/editor/card-lifecycle-test.js @@ -3,6 +3,7 @@ const { module, test } = QUnit; import Helpers from '../../test-helpers'; import { Editor } from 'content-kit-editor'; import { containsNode } from 'content-kit-editor/utils/dom-utils'; +import { MOBILEDOC_VERSION } from 'content-kit-editor/renderers/mobiledoc'; let editorElement, editor; module('Unit: Editor: Card Lifecycle', { @@ -42,12 +43,15 @@ test('rendering a mobiledoc for editing calls card#setup', (assert) => { } }; - const mobiledoc = [ - [], - [ - [10, 'test-card', payload] + const mobiledoc = { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [10, 'test-card', payload] + ] ] - ]; + }; editor = new Editor(editorElement, { mobiledoc, cards: [card], @@ -64,12 +68,15 @@ test('rendering a mobiledoc for editing calls #unknownCardHandler when it encoun assert.equal(env.name, cardName, 'includes card name in env'); }; - const mobiledoc = [ - [], - [ - [10, cardName, {}] + const mobiledoc = { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [10, cardName, {}] + ] ] - ]; + }; editor = new Editor(editorElement, {mobiledoc, unknownCardHandler}); }); @@ -113,12 +120,15 @@ test('rendered card can fire edit hook to enter editing mode', (assert) => { } }; - const mobiledoc = [ - [], - [ - [10, 'test-card', payload] + const mobiledoc = { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [10, 'test-card', payload] + ] ] - ]; + }; editor = new Editor(editorElement, { mobiledoc, cards: [card], @@ -156,12 +166,15 @@ test('rendered card can fire edit hook to enter editing mode, then save', (asser }; const payload = { foo: 'bar' }; - const mobiledoc = [ - [], - [ - [10, 'test-card', payload] + const mobiledoc = { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [10, 'test-card', payload] + ] ] - ]; + }; editor = new Editor(editorElement, { mobiledoc, cards: [card] @@ -200,12 +213,15 @@ test('rendered card can fire edit hook to enter editing mode, then cancel', (ass }; const payload = { foo: 'bar' }; - const mobiledoc = [ - [], - [ - [10, 'test-card', payload] + const mobiledoc = { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [10, 'test-card', payload] + ] ] - ]; + }; editor = new Editor(editorElement, { mobiledoc, cards: [card] diff --git a/tests/unit/editor/editor-test.js b/tests/unit/editor/editor-test.js index b6dca0375..d6c6466cd 100644 --- a/tests/unit/editor/editor-test.js +++ b/tests/unit/editor/editor-test.js @@ -1,13 +1,14 @@ +import { MOBILEDOC_VERSION } from 'content-kit-editor/renderers/mobiledoc'; +import Editor from 'content-kit-editor/editor/editor'; + +const { module, test } = window.QUnit; + let fixture = document.getElementById('qunit-fixture'); let editorElement = document.createElement('div'); let editor; editorElement.id = 'editor1'; editorElement.className = 'editor'; -import Editor from 'content-kit-editor/editor/editor'; - -const { module, test } = window.QUnit; - module('Unit: Editor', { beforeEach: function() { fixture.appendChild(editorElement); @@ -51,14 +52,17 @@ test('editor fires update event', (assert) => { }); test('editor parses and renders mobiledoc format', (assert) => { - const mobiledoc = [ - [], - [ - [1, 'P', [ - [[], 0, 'hello world'] - ]] + const mobiledoc = { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [1, 'P', [ + [[], 0, 'hello world'] + ]] + ] ] - ]; + }; editorElement.innerHTML = '

something here

'; let editor = new Editor(editorElement, {mobiledoc}); diff --git a/tests/unit/parsers/mobiledoc-test.js b/tests/unit/parsers/mobiledoc-test.js index b19547f2c..1f154c3ed 100644 --- a/tests/unit/parsers/mobiledoc-test.js +++ b/tests/unit/parsers/mobiledoc-test.js @@ -1,5 +1,6 @@ import MobiledocParser from 'content-kit-editor/parsers/mobiledoc'; import { generateBuilder } from 'content-kit-editor/utils/post-builder'; +import { MOBILEDOC_VERSION } from 'content-kit-editor/renderers/mobiledoc'; const DATA_URL = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs="; const { module, test } = window.QUnit; @@ -20,17 +21,24 @@ module('Unit: Parsers: Mobiledoc', { }); test('#parse empty doc returns an empty post', (assert) => { - assert.deepEqual(parser.parse([[], []]), + let mobiledoc = { + version: MOBILEDOC_VERSION, + sections: [[], []] + }; + assert.deepEqual(parser.parse(mobiledoc), post); }); test('#parse doc without marker types', (assert) => { - const mobiledoc = [ - [], - [[ - 1,'P', [[[], 0, 'hello world']] - ]] - ]; + const mobiledoc = { + version: MOBILEDOC_VERSION, + sections: [ + [], + [[ + 1,'P', [[[], 0, 'hello world']] + ]] + ] + }; const parsed = parser.parse(mobiledoc); let section = builder.generateMarkupSection('P', [], false); @@ -45,19 +53,22 @@ test('#parse doc without marker types', (assert) => { }); test('#parse doc with marker type', (assert) => { - const mobiledoc = [ - [ - ['B'], - ['A', ['href', 'google.com']] - ], - [[ - 1,'P', [ - [[1], 0, 'hello'], // a tag open - [[0], 1, 'brave new'], // b tag open/close - [[], 1, 'world'] // a tag close - ] - ]] - ]; + const mobiledoc = { + version: MOBILEDOC_VERSION, + sections: [ + [ + ['B'], + ['A', ['href', 'google.com']] + ], + [[ + 1,'P', [ + [[1], 0, 'hello'], // a tag open + [[0], 1, 'brave new'], // b tag open/close + [[], 1, 'world'] // a tag close + ] + ]] + ] + }; const parsed = parser.parse(mobiledoc); let section = builder.generateMarkupSection('P', [], false); @@ -79,12 +90,15 @@ test('#parse doc with marker type', (assert) => { }); test('#parse doc with image section', (assert) => { - const mobiledoc = [ - [], - [ - [2, DATA_URL] + const mobiledoc = { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [2, DATA_URL] + ] ] - ]; + }; const parsed = parser.parse(mobiledoc); @@ -97,12 +111,15 @@ test('#parse doc with image section', (assert) => { }); test('#parse doc with custom card type', (assert) => { - const mobiledoc = [ - [], - [ - [10, 'custom-card', {}] + const mobiledoc = { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [10, 'custom-card', {}] + ] ] - ]; + }; const parsed = parser.parse(mobiledoc); diff --git a/tests/unit/renderers/mobiledoc-test.js b/tests/unit/renderers/mobiledoc-test.js index f95bb70b8..ab18b1abf 100644 --- a/tests/unit/renderers/mobiledoc-test.js +++ b/tests/unit/renderers/mobiledoc-test.js @@ -1,11 +1,10 @@ -import MobiledocRenderer from 'content-kit-editor/renderers/mobiledoc'; +import MobiledocRenderer, { MOBILEDOC_VERSION } from 'content-kit-editor/renderers/mobiledoc'; import { generateBuilder } from 'content-kit-editor/utils/post-builder'; const { module, test } = window.QUnit; const render = MobiledocRenderer.render; let builder; - module('Unit: Mobiledoc Renderer', { beforeEach() { builder = generateBuilder(); @@ -15,7 +14,10 @@ module('Unit: Mobiledoc Renderer', { test('renders a blank post', (assert) => { let post = builder.generatePost(); let mobiledoc = render(post); - assert.deepEqual(mobiledoc, [[], []]); + assert.deepEqual(mobiledoc, { + version: MOBILEDOC_VERSION, + sections: [[], []] + }); }); test('renders a post with marker', (assert) => { @@ -28,16 +30,19 @@ test('renders a post with marker', (assert) => { ], 'Hi') ); let mobiledoc = render(post); - assert.deepEqual(mobiledoc, [ - [ - ['strong'] - ], - [ - [1, 'P', [ - [[0], 1, 'Hi'] - ]] + assert.deepEqual(mobiledoc, { + version: MOBILEDOC_VERSION, + sections: [ + [ + ['strong'] + ], + [ + [1, 'P', [ + [[0], 1, 'Hi'] + ]] + ] ] - ]); + }); }); test('renders a post section with markers sharing a markup', (assert) => { @@ -56,17 +61,20 @@ test('renders a post section with markers sharing a markup', (assert) => { ], ' Guy') ); let mobiledoc = render(post); - assert.deepEqual(mobiledoc, [ - [ - ['strong'] - ], - [ - [1, 'P', [ - [[0], 0, 'Hi'], - [[], 1, ' Guy'] - ]] + assert.deepEqual(mobiledoc, { + version: MOBILEDOC_VERSION, + sections: [ + [ + ['strong'] + ], + [ + [1, 'P', [ + [[0], 0, 'Hi'], + [[], 1, ' Guy'] + ]] + ] ] - ]); + }); }); test('renders a post with image', (assert) => { @@ -76,12 +84,15 @@ test('renders a post with image', (assert) => { post.appendSection(section); let mobiledoc = render(post); - assert.deepEqual(mobiledoc, [ - [], - [ - [2, url] + assert.deepEqual(mobiledoc, { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [2, url] + ] ] - ]); + }); }); test('renders a post with image and null src', (assert) => { @@ -90,12 +101,15 @@ test('renders a post with image and null src', (assert) => { post.appendSection(section); let mobiledoc = render(post); - assert.deepEqual(mobiledoc, [ - [], - [ - [2, null] + assert.deepEqual(mobiledoc, { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [2, null] + ] ] - ]); + }); }); test('renders a post with card', (assert) => { @@ -106,10 +120,13 @@ test('renders a post with card', (assert) => { post.appendSection(section); let mobiledoc = render(post); - assert.deepEqual(mobiledoc, [ - [], - [ - [10, cardName, payload] + assert.deepEqual(mobiledoc, { + version: MOBILEDOC_VERSION, + sections: [ + [], + [ + [10, cardName, payload] + ] ] - ]); + }); });