diff --git a/THIRDPARTY.md b/THIRDPARTY.md
index 53c0a37..0ebd8a4 100644
--- 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
diff --git a/data/static/style.css b/data/static/style.css
index 77d1d34..4f97cb0 100644
--- 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;
+}
diff --git a/js/babycode-editor.js b/js/babycode-editor.js
index 5d1d113..7cffcfb 100644
--- 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 = "";
diff --git a/sass/style.scss b/sass/style.scss
index 6fbef2d..a2d8b70 100644
--- 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;
+ }
+}
diff --git a/svg-icons/image.etlua b/svg-icons/image.etlua
new file mode 100644
index 0000000..313b3e5
--- /dev/null
+++ b/svg-icons/image.etlua
@@ -0,0 +1,5 @@
+
+
+
\ No newline at end of file
diff --git a/views/common/babycode-editor-component.etlua b/views/common/babycode-editor-component.etlua
index 0413bce..ba9a596 100644
--- a/views/common/babycode-editor-component.etlua
+++ b/views/common/babycode-editor-component.etlua
@@ -4,11 +4,15 @@
-
-
-
-
-
+
+
+
+
+
+
+
+
+
" target="_blank">babycode guide