Demo Updates 2022 (#768)

website/demo/demo.css

@@ -1,12 +1,14 @@
-* , *:before, *:after {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
+*,
+*:before,
+*:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 body {
-  background-color: #F3F3F3;
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  background-color: #f3f3f3;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   margin: 1.5em 0 0 0;
   padding: 0;
   font-size: 1.1rem;
@@ -41,16 +43,18 @@ section {
   padding: 1rem 2rem;
 }
 
-section.libraries, section.examples, section.cards {
+section.libraries,
+section.examples,
+section.cards {
   border-top: 2px solid #ccc;
-  background-color: #FFF;
+  background-color: #fff;
 }
 
-section[role="main"] {
+section[role='main'] {
   text-align: center;
 }
 
-section[role="main"] p {
+section[role='main'] p {
   margin-left: auto;
   margin-right: auto;
   line-height: 1.6;
@@ -61,7 +65,8 @@ table {
   border-spacing: 0;
 }
 
-table th, table td {
+table th,
+table td {
   border: 1px solid #ddd;
   padding: 6px 13px;
 }
@@ -105,7 +110,8 @@ table tr {
   overflow: scroll;
 }
 
-#editor-output, #editor-wrapper {
+#editor-output,
+#editor-wrapper {
   height: 350px;
   overflow: scroll;
   text-align: left;
@@ -116,36 +122,42 @@ table tr {
   font-family: monospace;
   padding: 1rem;
   font-size: 12px;
-  background-color: #FFFFFF;
-  border: 2px solid #CCCCCC;
+  background-color: #ffffff;
+  border: 2px solid #cccccc;
 }
 
 .toolbar {
-  text-align: center;
   display: flex;
+  flex-wrap: wrap;
+  border-bottom: 1px solid #ccc;
 }
 
 .toolbar-section {
   display: flex;
-  margin: 0 12px;
+  margin: 0 12px 12px 0;
+}
+.toolbar-section:last-child {
+  margin-right: 0;
 }
-.toolbar-section:first-child { margin-left: 0; }
-.toolbar-section:last-child { margin-right: 0; }
 
 .toolbar-section button {
   display: flex;
   align-items: center;
-  margin: 0 4px;
+  margin: 0 3px;
+}
+.toolbar-section button:first-child {
+  margin-left: 0;
+}
+.toolbar-section button:last-child {
+  margin-right: 0;
 }
-.toolbar-section button:first-child { margin-left: 0; }
-.toolbar-section button:last-child { margin-right: 0; }
 
 .toolbar-section button svg {
   height: 24px;
 }
 
 #editor-wrapper {
   padding: 1rem;
-  background-color: #FFFFFF;
-  border: 2px solid #CCCCCC;
+  background-color: #ffffff;
+  border: 2px solid #cccccc;
 }

website/demo/demo.js

@@ -1,88 +1,87 @@
-import { Editor } from './mobiledoc.js';
+import { Editor, UI } from './mobiledoc.js'
 
 function bootstrapSimpleDemo() {
-  const el = document.querySelector('#editor-basic');
+  const el = document.querySelector('#editor-basic')
   const editor = new Editor({
-    placeholder: 'Welcome to Mobiledoc'
-  });
-  editor.render(el);
+    placeholder: 'Welcome to Mobiledoc',
+  })
+  editor.render(el)
 }
 
 function activateButtons(parentSelector, editor) {
   document.querySelectorAll(`${parentSelector} button`).forEach(button =>
     button.addEventListener('click', () => {
-      const action = button.getAttribute('data-action');
-      const args = button.getAttribute('data-args').split(',');
-
-      editor[action](...args);
+      const action = button.getAttribute('data-action')
+      const args = button.getAttribute('data-args').split(',')
+      args[0] === 'a' ? UI[action](editor) : editor[action](...args)
     })
-  );
+  )
 }
 
 function bootstrapEditor() {
-  const el = document.querySelector('#editor');
+  const el = document.querySelector('#editor')
   const editor = new Editor({
     placeholder: 'Type here',
-    autofocus: true
-  });
-  editor.render(el);
-  activateButtons('#editor-wrapper', editor);
+    autofocus: true,
+  })
+  editor.render(el)
+  activateButtons('#editor-wrapper', editor)
   const displayMobiledoc = () => {
-    const mobiledoc = editor.serialize();
+    const mobiledoc = editor.serialize()
     // eslint-disable-next-line no-undef
-    const html = mobiledocPrettyJSONRenderer(mobiledoc);
-    document.querySelector('#editor-output').innerHTML = html;
-  };
-  editor.postDidChange(displayMobiledoc);
-  displayMobiledoc();
+    const html = mobiledocPrettyJSONRenderer(mobiledoc)
+    document.querySelector('#editor-output').innerHTML = html
+  }
+  editor.postDidChange(displayMobiledoc)
+  displayMobiledoc()
 }
 
 const bootstrapToolbarEditor = () => {
-  const el = document.querySelector('#editor-toolbar');
+  const el = document.querySelector('#editor-toolbar')
   const editor = new Editor({
-    placeholder: 'Editor with toolbar'
-  });
-  editor.render(el);
+    placeholder: 'Editor with toolbar',
+  })
+  editor.render(el)
 
-  activateButtons('#editor-toolbar-wrapper', editor);
-};
+  activateButtons('#editor-toolbar-wrapper', editor)
+}
 
 const bootstrapCardEditor = () => {
   const card = {
     name: 'kitten',
     type: 'dom',
     render() {
-      const el = document.createElement('figure');
+      const el = document.createElement('figure')
       el.innerHTML = `
         <img src="http://placekitten.com/200/100">
         <figcaption>Image of a kitten</figcaption>
-      `;
-      return el;
-    }
-  };
+      `
+      return el
+    },
+  }
   const atom = {
     name: 'mention',
     type: 'dom',
     render() {
-      const el = document.createElement('span');
-      el.setAttribute('style', 'background-color: #CCC;');
-      el.innerText = `@hello`;
-      return el;
-    }
-  };
-  const el = document.querySelector('#editor-card');
+      const el = document.createElement('span')
+      el.setAttribute('style', 'background-color: #CCC;')
+      el.innerText = `@hello`
+      return el
+    },
+  }
+  const el = document.querySelector('#editor-card')
   const editor = new Editor({
     placeholder: 'Editor with card',
     cards: [card],
-    atoms: [atom]
-  });
-  editor.render(el);
-  activateButtons('#editor-card-wrapper', editor);
-};
+    atoms: [atom],
+  })
+  editor.render(el)
+  activateButtons('#editor-card-wrapper', editor)
+}
 
 document.addEventListener('DOMContentLoaded', () => {
-  bootstrapEditor();
-  bootstrapSimpleDemo();
-  bootstrapToolbarEditor();
-  bootstrapCardEditor();
-});
+  bootstrapEditor()
+  bootstrapSimpleDemo()
+  bootstrapToolbarEditor()
+  bootstrapCardEditor()
+})