markdown preview

schn4ck · Oct 11, 2017 · d53bcb5 · d53bcb5
1 parent 4dab6d2
commit d53bcb5
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 17 deletions.
diff --git a/build/embed.js b/build/embed.js
diff --git a/src/embed/comments.jst.html b/src/embed/comments.jst.html
@@ -1,7 +1,10 @@
 <% if (data.user) { %>
 <div class="schnack-form">
     <textarea class="schnack-body" placeholder="Post a comment. Markdown is supported!"></textarea><br>
-    <button class="schnack-button">Send comment</button>
+    <blockquote class="schnack-body" style="display:none"></blockquote>
+    <button class="schnack-preview">Preview</button>
+    <button style="display:none" class="schnack-write">Edit</button>&nbsp;
+    <button class="schnack-button">Send comment</button><br>
     (signed in as <span class="schnack-user">@<%= data.user.name %></span> :: <a class="schnack-signout" href="#">sign out</a>)
 </div>
 <% } else { %>
@@ -22,7 +25,7 @@
                 <% }); } %>
             </div>
             <blockquote class="schnack-body">
-                <p><%= comment.comment %></p>
+                <%= comment.comment %>
             </blockquote>
             <% if (!comment.approved && !comment.trusted) { %>
             <div class="schnack-awaiting-approval">

diff --git a/src/embed/index.js b/src/embed/index.js
@@ -17,6 +17,7 @@ import comments_tpl from './comments.jst.html';
     document.domain = url.host.split('.').slice(1).join('.');
 
     function refresh() {
+
         fetch(endpoint, {
             credentials: 'include',
             headers: { 'Content-Type': 'application/json' }
@@ -25,24 +26,56 @@ import comments_tpl from './comments.jst.html';
         .then((data) => {
             $(target).innerHTML = comments_tpl(data);
 
+            const textarea = $(`${target} textarea.schnack-body`);
+            const preview = $(`${target} .schnack-form blockquote.schnack-body`);
+
             const postBtn = $(target + ' .schnack-button');
+            const previewBtn = $(target + ' .schnack-preview');
+            const writeBtn = $(target + ' .schnack-write');
 
-            if (postBtn) postBtn.addEventListener('click', (d) => {
-                const body = $(`${target} .schnack-body`).value;
-                const data = { comment: body };
-                fetch(endpoint, {
-                    credentials: 'include',
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(data)
-                })
-                .then( r => r.json() )
-                .then((res) => {
-                    console.log(res);
-                    refresh();
+            if (postBtn) {
+                postBtn.addEventListener('click', (d) => {
+                    const body = textarea.value;
+                    fetch(endpoint, {
+                        credentials: 'include',
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ comment: body })
+                    })
+                    .then( r => r.json() )
+                    .then((res) => {
+                        console.log(res);
+                        refresh();
+                    });
                 });
-            });
 
+                previewBtn.addEventListener('click', (d) => {
+                    const body = textarea.value;
+                    textarea.style.display = 'none';
+                    previewBtn.style.display = 'none';
+                    preview.style.display = 'block';
+                    writeBtn.style.display = 'inline';
+                    fetch(`${host}/markdown`, {
+                        credentials: 'include',
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ comment: body })
+                    })
+                    .then( r => r.json() )
+                    .then((res) => {
+                        console.log(res);
+                        preview.innerHTML = res.html;
+                        // refresh();
+                    });
+                });
+
+                writeBtn.addEventListener('click', (d) => {
+                    textarea.style.display = 'block';
+                    previewBtn.style.display = 'inline';
+                    preview.style.display = 'none';
+                    writeBtn.style.display = 'none';
+                });
+            }
             if (data.user) {
                 const signout = $('a.schnack-signout');
                 if (signout) signout.addEventListener('click', (e) => {

diff --git a/src/server.js b/src/server.js
@@ -140,6 +140,12 @@ function run(db) {
         });
     });
 
+    // for markdown preview
+    app.post('/markdown', (request, reply) => {
+        const { comment } = request.body;
+        reply.send({ html: marked(comment.trim()) });
+    });
+
     // push notification apps
     const notifier = [];