THIRDPARTY.md

@@ -25,7 +25,7 @@ Designers: Paul James Miller
 
 ## ICONCINO
 
-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)  
+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)  
 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:not(.full) > svg {
+.contain-svg > svg {
   height: 50%;
   width: 50%;
 }
@@ -700,17 +700,3 @@ 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

@@ -8,40 +8,14 @@
     }
   })
   
-  const inThread = () => {
-    const scheme = window.location.pathname.split("/");
-    return scheme[1] === "threads" && scheme[2] !== "create";
-  }
-  
-  ta.addEventListener("input", () => {
-    if (!inThread()) return;
-    
-    localStorage.setItem(window.location.pathname, ta.value);
-  })
-  
-  document.addEventListener("DOMContentLoaded", () => {
-    if (!inThread()) return;
-    const prevContent = localStorage.getItem(window.location.pathname);
-    if (!prevContent) return;
-    ta.value = prevContent;
-  })
-  
   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, prefill = "") {
+  function insertTag(tagStart, newline = false) {
-    const hasAttr = tagStart[tagStart.length - 1] === "=";
+    const tagEnd = tagStart;
-    let tagEnd = tagStart;
+    const tagInsertStart = `[${tagStart}]${newline ? "\n" : ""}`;
-    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;
@@ -55,24 +29,13 @@
       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);
@@ -92,26 +55,10 @@
     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,10 +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 {
@@ -707,17 +708,3 @@ 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

@@ -1,5 +0,0 @@
-<!-- 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,15 +4,11 @@
     <button type=button class="tab-button" data-target-id="tab-preview">Preview</button>
   </div>
   <div class="tab-content active" id="tab-edit">
-    <span class="babycode-button-container">
+    <span>
-      <button class="babycode-button" type=button id="post-editor-bold" title="Insert Bold"><strong>B</strong></button>
+      <button type=button id="post-editor-bold" title="Insert Bold">B</button>
-      <button class="babycode-button" type=button id="post-editor-italics" title="Insert Italics"><em>I</em></button>
+      <button type=button id="post-editor-italics" title="Insert Italics">I</button>
-      <button class="babycode-button" type=button id="post-editor-strike" title="Insert Strikethrough"><del>S</del></button>
+      <button type=button id="post-editor-strike" title="Insert Strikethrough">S</button>
-      <button class="babycode-button" type=button id="post-editor-url" title="Insert Link"><code>://</code></button>
+      <button type=button id="post-editor-code" title="Insert Code block">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>