diff --git a/demo/demo.css b/demo/demo.css index 341e0a067..f29d99e74 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -24,6 +24,12 @@ body { .pane { max-width: 25%; + padding: 0 1em; +} + +.pane p.desc { + height: 150px; + overflow: scroll; } .editor-pane { @@ -76,7 +82,8 @@ body { #mobiledoc-to-load { } #mobiledoc-to-load textarea { - height: 300px; + height: 500px; + width: 100%; } .code-pane:first-child { diff --git a/demo/demo.js b/demo/demo.js index 02f5c3cb0..0571d2408 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -2,6 +2,9 @@ 'use strict'; +var ContentKit = exports.ContentKit, + $ = exports.$; + var ContentKitDemo = exports.ContentKitDemo = { syncCodePane: function(editor) { var codePaneJSON = document.getElementById('serialized-mobiledoc'); @@ -40,9 +43,10 @@ var ContentKitDemo = exports.ContentKitDemo = { }; -function bootEditor(element, payload) { +function bootEditor(element, mobiledoc) { var editor = new ContentKit.Editor(element, { - mobiledoc: payload, + autofocus: false, + mobiledoc: mobiledoc, cards: { 'pick-color': function renderPickColor(payload) { return 'PICK A COLOR: '+payload.options.join(', '); @@ -55,22 +59,106 @@ function bootEditor(element, payload) { }); } -function readPayload(textarea) { - var jqueryTextarea = $(textarea); - var textPayload = jqueryTextarea.val(); - return JSON.parse(textPayload); +function readMobiledoc(string) { + return JSON.parse(string); } -$(function() { - var textarea = $('#mobiledoc-to-load textarea'); - var editor; - textarea.on('input', function() { +function isValidJSON(string) { + try { + JSON.parse(string); + return true; + } catch(e) { + return false; + } +} + +function attemptEditorReboot(editor, textarea) { + var textPayload = $(textarea).val(); + if (isValidJSON(textPayload)) { + var mobiledoc = readMobiledoc(textPayload); if (editor) { editor.destroy(); } - editor = bootEditor($('#editor')[0], readPayload(textarea)); + bootEditor($('#editor')[0], mobiledoc); + } +} + +var sampleMobiledocs = { + simpleMobiledoc: [ + [], + [ + [1, "H2", [ + [[], 0, "headline h2"] + ]], + [1, "P", [ + [[], 0, "hello world"] + ]] + ] + ], + + mobileDocWithMarker: [ + [['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."] + ]] + ] + ], + + mobileDocWithAttributeMarker: [ + [['A', ['href', 'http://github.com/bustlelabs/content-kit-editor']]], + [ + [1, "H2", [ + [[], 0, "headline h2"] + ]], + [1, "P", [ + [[], 0, "see it "], + [[0], 1, "on github."] + ]] + ] + ] +}; + + +$(function() { + var editor; + var editorEl = $('#editor')[0]; + var mobiledoc = sampleMobiledocs.simpleMobiledoc; + + var textarea = $('#mobiledoc-to-load textarea'); + textarea.val(JSON.stringify(mobiledoc, false, 2)); + + textarea.on('input', function() { + attemptEditorReboot(editor, textarea); }); - editor = bootEditor($('#editor')[0], readPayload(textarea)); + + $('#select-mobiledoc').on('change', function() { + var mobiledocName = $(this).val(); + var mobiledoc = sampleMobiledocs[mobiledocName]; + textarea.val(JSON.stringify(mobiledoc, false, 2)); + textarea.trigger('input'); + }); + + bootEditor(editorEl, mobiledoc); + $(editorEl).focus(); }); }(this, document)); diff --git a/demo/index.html b/demo/index.html index 1992c4058..a895c7415 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,5 +1,6 @@ + Content Kit Editor Demo 0.2.0 @@ -14,42 +15,58 @@ +

mobiledoc to load

+

+ This mobiledoc will be loaded into the editor. + You can change it and see the editor reload with the new contents. + (If there is a JSON syntax error it will be ignored; if there is a parser + error the editor may stop responding.) +
+ Select a preloaded mobiledoc here: + +

- +

editor

+

+ The live-editing surface. Changes here are serialized to mobiledoc + format and displayed to the right. +

serialized mobiledoc

+

+ When the editor updates, it prints its serialized mobiledoc here. +

rendered mobiledoc

+

+ This is the output of using the runtime (client-side) + mobiledoc-dom-renderer + on the serialized mobiledoc. +

diff --git a/src/js/parsers/mobiledoc.js b/src/js/parsers/mobiledoc.js index ce0e97fdc..3baeeb3aa 100644 --- a/src/js/parsers/mobiledoc.js +++ b/src/js/parsers/mobiledoc.js @@ -49,7 +49,7 @@ export default class MobiledocParser { const attributes = null; const isGenerated = false; const section = this.builder.generateSection(tagName, attributes, isGenerated); - + post.appendSection(section); this.parseMarkers(markers, section); }