add previews to babycode editor component

apps/api.lua

@@ -1,8 +1,13 @@
 local app = require("lapis").Application()
+local json_params = require("lapis.application").json_params
+
 local sse = require("lib.sse")
 
 local db = require("lapis.db")
 
+local html_escape = require("lapis.html").escape
+local babycode = require("lib.babycode")
+
 local util = require("util")
 
 app:get("sse_thread_updates", "/thread-updates/:thread_id", function(self)
@@ -33,4 +38,20 @@ app:get("sse_thread_updates", "/thread-updates/:thread_id", function(self)
   return {skip_render = true}
 end)
 
+app:post("babycode_preview", "/babycode-preview", json_params(function(self)
+  local user = util.get_logged_in_user(self)
+  if not user then
+    return {json = {error = "not authorized"}, status = 401}
+  end
+  if not util.rate_limit_allowed(user.id, "babycode_preview", 5) then
+    return {json = {error = "too many requests"}, status = 429}
+  end
+  local markup = self.params.markup
+  if not markup or type(markup) ~= "string" then
+    return {json = {error = "markup field missing or invalid type"}, status = 400}
+  end
+  local rendered = babycode.to_html(markup, html_escape)
+  return {json = {html = rendered}}
+end))
+
 return app

data/static/style.css

@@ -26,7 +26,7 @@
   font-weight: bold;
   font-style: italic;
 }
-.currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
+.tab-button, .currentpage, .pagebutton, input[type=file]::file-selector-button, button.warn, input[type=submit].warn, .linkbutton.warn, button.critical, input[type=submit].critical, .linkbutton.critical, button, input[type=submit], .linkbutton {
   cursor: default;
   color: black;
   font-size: 0.9em;
@@ -511,6 +511,50 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
 
 .babycode-editor {
   height: 150px;
+  font-size: 1rem;
+}
+
+.babycode-editor-container {
+  width: 100%;
+}
+
+.babycode-preview-errors-container {
+  font-size: 0.8rem;
+}
+
+.tab-button {
+  background-color: rgb(177, 206, 204.5);
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: 0;
+}
+.tab-button:hover {
+  background-color: rgb(192.6, 215.8, 214.6);
+}
+.tab-button:active {
+  background-color: rgb(166.6881496063, 178.0118503937, 177.4261417323);
+}
+.tab-button:disabled {
+  background-color: rgb(209.535, 211.565, 211.46);
+}
+.tab-button.active {
+  background-color: #beb1ce;
+  padding-top: 8px;
+}
+
+.tab-content {
+  display: none;
+}
+.tab-content.active {
+  min-height: 250px;
+  display: block;
+  background-color: rgb(191.3137931034, 189.7, 193.3);
+  border: 1px solid black;
+  padding: 10px;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
 }
 
 ul, ol {

js/babycode-editor.js

@@ -59,4 +59,48 @@
     e.preventDefault();
     insertTag("code", true)
   })
+  
+  const previewEndpoint = "/api/babycode-preview";
+  let previousMarkup = "";
+  const previewTab = document.getElementById("tab-preview");
+  previewTab.addEventListener("tab-activated", async () => {
+    const previewContainer = document.getElementById("babycode-preview-container");
+    const previewErrorsContainer = document.getElementById("babycode-preview-errors-container");
+    // previewErrorsContainer.textContent = "";
+    const markup = ta.value.trim();
+    if (markup === "" || markup === previousMarkup) {
+      return;
+    }
+    previousMarkup = markup;
+      const req = await fetch(previewEndpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({markup: markup})
+      })
+      if (!req.ok) {
+        switch (req.status) {
+          case 429:
+            previewErrorsContainer.textContent = "(Old preview, try again in a few seconds.)"
+            previousMarkup = "";
+            break;
+          case 400:
+            previewErrorsContainer.textContent = "(Request got malformed.)"
+            break;
+          case 401:
+            previewErrorsContainer.textContent = "(You are not logged in.)"
+            break;
+          default:
+            previewErrorsContainer.textContent = "(Error. Check console.)"
+            console.error(req.error);
+            break;
+        }
+        return;
+      }
+      
+      const json_resp = await req.json();
+      previewContainer.innerHTML = json_resp.html;
+      previewErrorsContainer.textContent = "";
+  });
 }

js/tabs.js

@@ -0,0 +1,30 @@
+function activateSelfDeactivateSibs(button) {
+  if (button.classList.contains("active")) return;
+  
+  Array.from(button.parentNode.children).forEach(s => {
+    if (s === button){
+      button.classList.add('active');
+    } else {
+      s.classList.remove('active');
+    }
+    const targetId = s.dataset.targetId;
+    const target = document.getElementById(targetId);
+    
+    if (!target) return;
+    
+    if (s.classList.contains('active')) {
+      target.classList.add('active');
+      target.dispatchEvent(new CustomEvent("tab-activated", {bubbles: false}))
+    } else {
+      target.classList.remove('active');
+    }
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".tab-button").forEach(button => {
+    button.addEventListener("click", () => {
+      activateSelfDeactivateSibs(button);
+    });
+  });
+});

js/thread.js

@@ -5,6 +5,7 @@
     button.addEventListener("click", (e) => {
       ta.value += button.value;
       ta.scrollIntoView()
+      ta.focus();
     })
   }
   

migrations.lua

@@ -91,4 +91,15 @@ return {
     
     db.query("COMMIT")
   end,
+  
+  [12] = function ()
+    schema.create_table("api_rate_limits", {
+      {"id", types.integer{primary_key = true}},
+      {"method", types.text{null = false}},
+      {"user_id", "INTEGER REFERENCES users(id) ON DELETE CASCADE"},
+      {"logged_at", "INTEGER DEFAULT (unixepoch(CURRENT_TIMESTAMP))"},
+    })
+    
+    db.query("CREATE INDEX idx_rate_limit_user_method ON api_rate_limits (user_id, method)")
+  end,
 }

sass/style.scss

@@ -45,6 +45,7 @@ $lighter: color.scale($accent_color, $lightness: 60%, $saturation: -60%);
 
 $main_bg: color.scale($accent_color, $lightness: -10%, $saturation: -40%);
 $button_color: color.adjust($accent_color, $hue: 90);
+$button_color2: color.adjust($accent_color, $hue: 180);
 
 %button-base {
   cursor: default;
@@ -524,8 +525,44 @@ input[type="text"], input[type="password"], textarea, select {
 
 .babycode-editor {
   height: 150px;
+  font-size: 1rem;
 }
 
+.babycode-editor-container {
+  width: 100%;
+}
+
+.babycode-preview-errors-container {
+  font-size: 0.8rem;
+}
+
+.tab-button {
+  @include button($button_color);
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: 0;
+  
+  &.active {
+    background-color: $button_color2;
+    padding-top: 8px;
+  }
+}
+
+.tab-content {
+  display: none;
+  
+  &.active {
+    min-height: 250px;
+    display: block;
+    background-color: color.adjust($button_color2, $saturation: -20%);
+    border: 1px solid black;
+    padding: 10px;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+}
 
 ul, ol {
   margin: 10px 0 10px 30px;

util.lua

@@ -316,4 +316,25 @@ function util.inject_warn_infobox(req, message)
   req.session.infobox = ib
 end
 
+function util.rate_limit_allowed(user_id, method, seconds)
+  local last_call = db.query([[
+    SELECT logged_at FROM api_rate_limits
+    WHERE user_id = ? AND method = ?
+    ORDER BY logged_at DESC LIMIT 1
+  ]], user_id, method)
+  if #last_call == 0 or (os.time() - last_call[1].logged_at) >= seconds then
+    db.query(
+      "DELETE FROM api_rate_limits WHERE user_id = ? AND method = ?",
+      user_id, method
+    )
+    db.query(
+      "INSERT INTO api_rate_limits (user_id, method) VALUES (?, ?)",
+      user_id, method
+    )
+    return true
+  else
+    return false
+  end
+end
+
 return util

views/base.etlua

@@ -18,5 +18,6 @@
   </footer>
   <script src="/static/js/copy-code.js"></script>
   <script src="/static/js/date-fmt.js"></script>
+  <script src="/static/js/tabs.js"></script>
 </body>
 </html>

views/common/babycode-editor-component.etlua

@@ -1,8 +1,20 @@
-<span>
-  <button type=button id="post-editor-bold" title="Insert Bold">B</button>
-  <button type=button id="post-editor-italics" title="Insert Italics">I</button>
-  <button type=button id="post-editor-strike" title="Insert Strikethrough">S</button>
-  <button type=button id="post-editor-code" title="Insert Code block">Code</button>
-</span>
-<textarea class="babycode-editor" name="<%= ta_name %>" id="babycode-content" placeholder="<%= ta_placeholder or "Post body"%>" <%= not optional and "required" or "" %>><%- prefill or "" %></textarea>
-<script src="/static/js/babycode-editor.js"></script>
+<div class="babycode-editor-container">
+  <div class="tab-buttons">
+    <button type=button class="tab-button active" data-target-id="tab-edit">Write</button>
+    <button type=button class="tab-button" data-target-id="tab-preview">Preview</button>
+  </div>
+  <div class="tab-content active" id="tab-edit">
+    <span>
+      <button type=button id="post-editor-bold" title="Insert Bold">B</button>
+      <button type=button id="post-editor-italics" title="Insert Italics">I</button>
+      <button type=button id="post-editor-strike" title="Insert Strikethrough">S</button>
+      <button type=button id="post-editor-code" title="Insert Code block">Code</button>
+    </span>
+    <textarea class="babycode-editor" name="<%= ta_name %>" id="babycode-content" placeholder="<%= ta_placeholder or "Post body"%>" <%= not optional and "required" or "" %>><%- prefill or "" %></textarea>
+  </div>
+  <div class="tab-content" id="tab-preview">
+    <div id="babycode-preview-errors-container">Type something!</div>
+    <div id="babycode-preview-container"></div>
+  </div>
+</div>
+<script src="/static/js/babycode-editor.js?v=1"></script>

views/threads/post.etlua

@@ -32,7 +32,7 @@
         local show_edit = me.id == post.user_id and not me:is_guest() and (not ntob(thread.is_locked) or me:is_mod()) and not no_reply
         if show_edit then
       %>
-          <a class="linkbutton" href="<%= url_for("edit_post", {post_id = post.id}) %>">Edit</a>
+          <a class="linkbutton" href="<%= url_for("edit_post", {post_id = post.id}) .. "#babycode-content" %>">Edit</a>
       <% end %>
       <%
         local show_reply = true
@@ -50,9 +50,9 @@
           local quote_src_text = ("[url=%s]%s said:[/url]"):format(
             post_url, post.username
           )
-          local reply_text = ("%s\n[quote]%s[/quote]\n---\n\n"):format(quote_src_text, post.original_markup)
+          local reply_text = ("%s\n[quote]%s[/quote]\n"):format(quote_src_text, post.original_markup)
         %>
-          <button value="<%= reply_text %>" class="reply-button">Reply</button>
+          <button value="<%= reply_text %>" class="reply-button">Quote</button>
       <% end %>
       <%
         local show_delete = (post.user_id == me.id and not ntob(thread.is_locked)) or me:is_mod()