fix babycode editor buttons not working in user settings

js/babycode-editor.js

@@ -1,5 +1,5 @@
 {
-  let ta = document.getElementById("post_content");
+  let ta = document.getElementById("babycode-content");
   const buttonBold = document.getElementById("post-editor-bold");
   const buttonItalics = document.getElementById("post-editor-italics");
   const buttonStrike = document.getElementById("post-editor-strike");

lib/babycode.lua

@@ -23,15 +23,17 @@ function babycode.to_html(s, escape_html)
     end
   end)
 
+  local url_tags = {}
   -- replace `[url=https://example.com]Example[/url] tags
   text = text:gsub("%[url=([^%]]+)%](.-)%[/url%]", function(url, label)
-    return '<a href="'..url..'">'..label..'</a>'
+    table.insert(url_tags, {url = url, label = label})
+    return "\1URL:"..#url_tags.."\1"
   end)
   
   -- replace `[url]https://example.com[/url] tags
-  text = text:gsub("%[url%]([^%]]+)%[/url%]", function(url)
-    return '<a href="'..url..'">'..url..'</a>'
-  end)
+  -- text = text:gsub("%[url%]([^%]]+)%[/url%]", function(url)
+  --   return '<a href="'..url..'">'..url..'</a>'
+  -- end)
 
   -- bold, italics, strikethrough
   text = text:gsub("%[b%](.-)%[/b%]", "<strong>%1</strong>")
@@ -48,6 +50,11 @@ function babycode.to_html(s, escape_html)
     return url
   end)
 
+  text = text:gsub("\1URL:(%d+)\1", function(n)
+    local url = url_tags[tonumber(n)]
+    return ("<a href=%s>%s</a>"):format(url.url, url.label)
+  end)
+
   -- rule
   text = text:gsub("\n+%-%-%-", "<hr>")
   

views/common/babycode-editor-component.etlua

@@ -4,5 +4,5 @@
   <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="<%= ta_id or "post_content" %>" placeholder="<%= ta_placeholder or "Post body"%>" <%= not optional and "required" or "" %>><%- prefill or "" %></textarea>
-<script src="/static/js/post-editor.js"></script>
+<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>

views/common/bbcode_help.etlua

@@ -1,11 +1,11 @@
 <details>
   <summary>babycode guide</summary>
   <ul>
+    <li>Loose links will be converted to clickable links automatically</li>
     <li>[b]<b>bold</b>[/b]</li>
     <li>[i]<i>italic</i>[/i]</li>
     <li>[s]<del>strikethrough</del>[/s]</li>
     <li>[url=https://example.com]<a href="https://example.com">labeled URL</a>[/url]</li>
-    <li>[url]<a href="https://unlabeled-url.example.com">https://unlabeled-url.example.com</a>[/url]</li>
     <li>
       [code]with<br>line breaks[/code] will produce a code block:
       <details>

views/user/settings.etlua

@@ -17,8 +17,8 @@
   <form method="post" action="">
     <label for="status">Status</label>
     <input type="text" id="status" name="status" value="<%= me.status %>" maxlength="70" placeholder="Will be shown under your username. Max 70 characters">
-    <label for="signature">Signature</label><br>
-    <% render("views.common.babycode-editor-component", {ta_name = "signature", ta_id = "signature", prefill = me.signature_original_markup, ta_placeholder = "Will be shown under each of your posts", optional = true}) %>
+    <label for="babycode-content">Signature</label><br>
+    <% render("views.common.babycode-editor-component", {ta_name = "signature", prefill = me.signature_original_markup, ta_placeholder = "Will be shown under each of your posts", optional = true}) %>
     <input type="submit" value="Save settings">
   </form>
   <div>