Add more options to the demo, clean up its style and UI

bustle · Jul 9, 2015 · 6b0c45a · 6b0c45a
1 parent a78b990
commit 6b0c45a
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 27 deletions.
diff --git 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
@@ -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
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta charset="utf-8">
   <title>Content Kit Editor Demo 0.2.0</title>
@@ -14,42 +15,58 @@
   <!-- CSS just for the demo page -->
   <link href="demo.css" rel="stylesheet">
 </head>
+
 <body>
   <div class="container">
 
     <div class="pane">
       <h2>mobiledoc to load</h2>
+      <p class='desc'>
+        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.)
+         <br>
+         Select a preloaded mobiledoc here:
+         <select id='select-mobiledoc'>
+           <option disabled>Choose a mobiledoc...</option>
+           <option value='simpleMobiledoc'>Simple mobiledoc</option>
+           <option value='mobileDocWithMarker'>mobiledoc with simple marker</option>
+           <option value='mobileDocWithMultipleMarkers'>mobiledoc with multiple markers</option>
+           <option value='mobileDocWithAttributeMarker'>mobiledoc with attributed marker</option>
+         </select>
+      </p>
       <div id="mobiledoc-to-load">
-        <textarea>
-[
-  [],
-  [
-    [1, "H2", [
-      [[], 0, "hello world"]
-    ]],
-    [1, "P", [
-      [[], 0, "hello world"]
-    ]]
-  ]
-]
-        </textarea>
+        <textarea></textarea>
       </div>
     </div>
 
     <div class="pane">
       <h2>editor</h2>
+      <p class='desc'>
+        The live-editing surface. Changes here are serialized to mobiledoc
+        format and displayed to the right.
+      </p>
       <div id="editor">
       </div>
     </div>
 
     <div class="pane">
       <h2>serialized mobiledoc</h2>
+      <p class='desc'>
+        When the editor updates, it prints its serialized mobiledoc here.
+      </p>
       <div id="serialized-mobiledoc">
       </div>
     </div>
 
     <div class="pane">
       <h2>rendered mobiledoc</h2>
+      <p class='desc'>
+        This is the output of using the runtime (client-side)
+        <a href='http://github.com/bustlelabs/mobiledoc-dom-render'>mobiledoc-dom-renderer</a>
+        on the serialized mobiledoc.
+      </p>
       <div id="rendered-mobiledoc"></div>
     </div>
 

diff --git 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);
   }