[demo] Add rendering playground (#792)

gpoitch · web-flow · commit 62d8fcb31400 · 2024-11-14T11:36:59.000-05:00
diff --git a/demo/demo.css b/demo/demo.css
@@ -172,3 +172,28 @@ table tr {
   background-color: #ffffff;
   border: 2px solid #cccccc;
 }
+
+#md-render-input {
+  width: 100%;
+  height: 300px;
+}
+
+#md-render-output {
+  padding: 1rem;
+  background-color: #ffffff;
+  border: 2px solid #cccccc;
+}
+
+.md-render-label {
+  margin: 0 0 0.5rem;
+  font-size: 0.8rem;
+  color: #5c5c5c;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.md-output-error {
+  color: red;
+  opacity: 0.6;
+  font-size: 0.8rem;
+}
diff --git a/demo/demo.js b/demo/demo.js
@@ -131,9 +131,31 @@ const bootstrapCardEditor = () => {
   activateButtons('#editor-card-wrapper', editor)
 }
 
+const bootstrapRenderer = () => {
+  const inputEl = document.querySelector('#md-render-input')
+  const outputEl = document.querySelector('#md-render-output')
+  const renderer = new window.MobiledocDOMRenderer()
+  inputEl.addEventListener('input', e => {
+    const text = e.target.value.trim()
+    if (!text) {
+      outputEl.innerHTML = ''
+    } else {
+      try {
+        const text = e.target.value.trim()
+        const json = JSON.parse(text)
+        outputEl.innerHTML = ''
+        outputEl.append(renderer.render(json).result)
+      } catch (e) {
+        outputEl.innerHTML = `<span class="md-output-error">${e.toString()}</span>`
+      }
+    }
+  })
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   bootstrapEditor()
   bootstrapSimpleDemo()
   bootstrapToolbarEditor()
   bootstrapCardEditor()
+  bootstrapRenderer()
 })
diff --git a/demo/index.html b/demo/index.html
@@ -9,6 +9,7 @@
   </head>
   <body>
     <script src="./vendor/mobiledoc-pretty-json-renderer.js"></script>
+    <script src="./vendor/mobiledoc-dom-renderer.js"></script>
     <script type="module" src="./demo.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
     <script>
@@ -392,5 +393,21 @@ <h2>Cards and Atoms</h2>
         </div>
       </div>
     </section>
+
+    <section>
+      <h2>Render Mobiledoc</h2>
+      <p>Enter some mobiledoc json and see it rendered to html</p>
+
+      <div class="two-column">
+        <div class="column left tall">
+          <div class="md-render-label">Input:</div>
+          <textarea id="md-render-input" class="mobiledoc-output" placeholder="Enter mobiledoc..."></textarea>
+        </div>
+        <div class="column right tall">
+          <div class="md-render-label">Output:</div>
+          <div id="md-render-output"></div>
+        </div>
+      </div>
+    </section>
   </body>
 </html>
diff --git a/demo/vendor/mobiledoc-dom-renderer.js b/demo/vendor/mobiledoc-dom-renderer.js
