add more tag buttons to babycode editor

2025-06-06 18:22:53 +03:00
parent 0c820183a6
commit 502f1c59de
6 changed files with 88 additions and 17 deletions
--- a/THIRDPARTY.md
+++ b/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  
--- a/data/static/style.css
+++ b/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;
+}
--- a/js/babycode-editor.js
+++ b/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) {
-    const tagEnd = tagStart;
-    const tagInsertStart = `[${tagStart}]${newline ? "\n" : ""}`;
+  function insertTag(tagStart, newline = false, prefill = "") {
+    const hasAttr = tagStart[tagStart.length - 1] === "=";
+    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;
-      ta.setSelectionRange(realStart + tagInsertStart.length, realStart + tagInsertStart.length + selectionLength);
+      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 = "";
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -451,11 +451,10 @@ input[type="text"], input[type="password"], textarea, select {
  align-items: center;
  justify-content: center;
  flex-direction: column;
-}
-
-.contain-svg > svg {
-  height: 50%;
-  width: 50%;
+  &:not(.full) > svg {
+    height: 50%;
+    width: 50%;
+  }
 }

 .block-img {
@@ -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;
+  }
+}
--- a/svg-icons/image.etlua
+++ b/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>
--- a/views/common/babycode-editor-component.etlua
+++ b/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>
-      <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 class="babycode-button-container">
+      <button class="babycode-button" type=button id="post-editor-bold" title="Insert Bold"><strong>B</strong></button>
+      <button class="babycode-button" type=button id="post-editor-italics" title="Insert Italics"><em>I</em></button>
+      <button class="babycode-button" type=button id="post-editor-strike" title="Insert Strikethrough"><del>S</del></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>