add more tag buttons to babycode editor

THIRDPARTY.md

@@ -25,7 +25,7 @@ Designers: Paul James Miller
 
 ## ICONCINO
 
-Affected files: [`svg-icons/error.etlua`](./svg-icons/error.etlua) [`svg-icons/info.etlua`](./svg-icons/info.etlua) [`svg-icons/lock.etlua`](./svg-icons/lock.etlua) [`svg-icons/sticky.etlua`](./svg-icons/sticky.etlua) [`svg-icons/warn.etlua`](./svg-icons/warn.etlua)  
+Affected files: [`svg-icons/error.etlua`](./svg-icons/error.etlua) [`svg-icons/image.etlua`](./svg-icons/image.etlua) [`svg-icons/info.etlua`](./svg-icons/info.etlua) [`svg-icons/lock.etlua`](./svg-icons/lock.etlua) [`svg-icons/sticky.etlua`](./svg-icons/sticky.etlua) [`svg-icons/warn.etlua`](./svg-icons/warn.etlua)  
 URL: https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license  
 Copyright: Gabriele Malaspina  
 Designers: Gabriele Malaspina  

data/static/style.css

@@ -443,7 +443,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   flex-direction: column;
 }
 
-.contain-svg > svg {
+.contain-svg:not(.full) > svg {
   height: 50%;
   width: 50%;
 }
@@ -700,3 +700,17 @@ ul, ol {
 .inbox-container {
   padding: 10px;
 }
+
+.babycode-button-container {
+  display: flex;
+  gap: 10px;
+}
+
+.babycode-button {
+  padding: 5px 10px;
+  min-width: 36px;
+}
+
+.babycode-button > * {
+  font-size: 1rem;
+}

js/babycode-editor.js

@@ -11,11 +11,19 @@
   const buttonBold = document.getElementById("post-editor-bold");
   const buttonItalics = document.getElementById("post-editor-italics");
   const buttonStrike = document.getElementById("post-editor-strike");
+  const buttonUrl = document.getElementById("post-editor-url");
   const buttonCode = document.getElementById("post-editor-code");
+  const buttonImg = document.getElementById("post-editor-img");
+  const buttonOl = document.getElementById("post-editor-ol");
+  const buttonUl = document.getElementById("post-editor-ul");
 
-  function insertTag(tagStart, newline = false) {
+  function insertTag(tagStart, newline = false, prefill = "") {
-    const tagEnd = tagStart;
+    const hasAttr = tagStart[tagStart.length - 1] === "=";
-    const tagInsertStart = `[${tagStart}]${newline ? "\n" : ""}`;
+    let tagEnd = tagStart;
+    let tagInsertStart = `[${tagStart}]${newline ? "\n" : ""}`;
+    if (hasAttr) {
+      tagEnd = tagEnd.slice(0, -1);
+    }
     const tagInsertEnd = `${newline ? "\n" : ""}[/${tagEnd}]`;
     const hasSelection = ta.selectionStart !== ta.selectionEnd;
     const text = ta.value;
@@ -29,13 +37,24 @@
       const frag = `${tagInsertStart}${text.slice(realStart, realEnd)}${tagInsertEnd}`;
       const reconst = `${strStart}${frag}${strEnd}`;
       ta.value = reconst;
+      if (!hasAttr){
         ta.setSelectionRange(realStart + tagInsertStart.length, realStart + tagInsertStart.length + selectionLength);
+      } else {
+        ta.setSelectionRange(realStart + tagInsertEnd.length - 1, realStart + tagInsertEnd.length - 1); // cursor on attr
+      }
       ta.focus()
     } else {
+      if (hasAttr) {
+        tagInsertStart += prefill;
+      }
       const cursor = ta.selectionStart;
       const strStart = text.slice(0, cursor);
       const strEnd = text.substr(cursor);
-      const newCursor = strStart.length + tagInsertStart.length;
+      
+      let newCursor = strStart.length + tagInsertStart.length;
+      if (hasAttr) {
+        newCursor = cursor + tagInsertStart.length - prefill.length - 1;
+      }
       const reconst = `${strStart}${tagInsertStart}${tagInsertEnd}${strEnd}`;
       ta.value = reconst;
       ta.setSelectionRange(newCursor, newCursor);
@@ -55,10 +74,26 @@
     e.preventDefault();
     insertTag("s")
   })
+  buttonUrl.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("url=", false, "link label");
+  })
   buttonCode.addEventListener("click", (e) => {
     e.preventDefault();
     insertTag("code", true)
   })
+  buttonImg.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("img=", false, "alt text");
+  })
+  buttonOl.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("ol", true);
+  })
+  buttonUl.addEventListener("click", (e) => {
+    e.preventDefault();
+    insertTag("ul", true);
+  })
   
   const previewEndpoint = "/api/babycode-preview";
   let previousMarkup = "";

sass/style.scss

@@ -451,12 +451,11 @@ input[type="text"], input[type="password"], textarea, select {
   align-items: center;
   justify-content: center;
   flex-direction: column;
-}
+  &:not(.full) > svg {
-
-.contain-svg > svg {
     height: 50%;
     width: 50%;
   }
+}
 
 .block-img {
   object-fit: contain;
@@ -708,3 +707,17 @@ ul, ol {
 .inbox-container {
   padding: 10px;
 }
+
+.babycode-button-container {
+  display: flex;
+  gap: 10px;
+}
+
+.babycode-button {
+  padding: 5px 10px;
+  min-width: 36px;
+  
+  &> * {
+    font-size: 1rem;
+  }
+}

svg-icons/image.etlua

@@ -0,0 +1,5 @@
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 17L7.58959 13.7694C8.38025 13.0578 9.58958 13.0896 10.3417 13.8417L11.5 15L15.0858 11.4142C15.8668 10.6332 17.1332 10.6332 17.9142 11.4142L20 13.5M11 9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9C9 8.44772 9.44772 8 10 8C10.5523 8 11 8.44772 11 9ZM6 20H18C19.1046 20 20 19.1046 20 18V6C20 4.89543 19.1046 4 18 4H6C4.89543 4 4 4.89543 4 6V18C4 19.1046 4.89543 20 6 20Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

views/common/babycode-editor-component.etlua

@@ -4,11 +4,15 @@
     <button type=button class="tab-button" data-target-id="tab-preview">Preview</button>
   </div>
   <div class="tab-content active" id="tab-edit">
-    <span>
+    <span class="babycode-button-container">
-      <button type=button id="post-editor-bold" title="Insert Bold">B</button>
+      <button class="babycode-button" type=button id="post-editor-bold" title="Insert Bold"><strong>B</strong></button>
-      <button type=button id="post-editor-italics" title="Insert Italics">I</button>
+      <button class="babycode-button" type=button id="post-editor-italics" title="Insert Italics"><em>I</em></button>
-      <button type=button id="post-editor-strike" title="Insert Strikethrough">S</button>
+      <button class="babycode-button" type=button id="post-editor-strike" title="Insert Strikethrough"><del>S</del></button>
-      <button type=button id="post-editor-code" title="Insert Code block">Code</button>
+      <button class="babycode-button" type=button id="post-editor-url" title="Insert Link"><code>://</code></button>
+      <button class="babycode-button" type=button id="post-editor-code" title="Insert Code block"><code>&lt;/&gt;</code></button>
+      <button class="babycode-button contain-svg full" type=button id="post-editor-img" title="Insert Image"><% render("svg-icons.image") %></button>
+      <button class="babycode-button" type=button id="post-editor-ol" title="Insert Ordered list">1.</button>
+      <button class="babycode-button" type=button id="post-editor-ul" title="Insert Unordered list">&bullet;</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>
     <a href="<%= url_for("babycode_guide") %>" target="_blank">babycode guide</a>