From 4eac09f3045dc49703097de8df546345febd592b Mon Sep 17 00:00:00 2001
From: Lephe <sebastien.michelland@protonmail.com>
Date: Wed, 27 Apr 2022 11:43:35 +0100
Subject: [PATCH] editor: basic markup insertion around selection

---
 app/static/scripts/editor.js      | 45 +++++++++++++++++++++++++++----
 app/templates/widgets/editor.html |  8 +++---
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/app/static/scripts/editor.js b/app/static/scripts/editor.js
index 4304b4f..df09d14 100644
--- a/app/static/scripts/editor.js
+++ b/app/static/scripts/editor.js
@@ -1,13 +1,48 @@
 /* Add callbacks on text formatting buttons */
 
-function editor_bold(e) {
-    let ta = document.querySelector(".editor textarea");
+function editor_insert_around(e) {
+    let button = undefined;
+    let editor = undefined;
+
+    /* Grab the button and the parent editor block. The onclick event itself
+       usually reports the SVG in the button as the source */
+    let node = e.target || e.srcElement;
+    while(node != document.body) {
+        if(node.tagName == "BUTTON" && !button)
+            button = node;
+        if(node.classList.contains("editor") && !editor) {
+            editor = node;
+            break;
+        }
+        node = node.parentNode;
+    }
+    if(!button || !editor) return;
+
+    /* Find the textarea */
+    const ta = editor.querySelector("textarea");
+    ta.focus();
     let indexStart = ta.selectionStart;
     let indexEnd = ta.selectionEnd;
-    let txt = ta.value.substring(indexStart, indexEnd);
-    ta.value += '\n' + 'bold';
-}
 
+    const before = button.dataset.before || "";
+    const after  = button.dataset.after  || "";
+
+    ta.value = ta.value.substring(0, indexStart)
+             + before
+             + ta.value.substring(indexStart, indexEnd)
+             + after
+             + ta.value.substring(indexEnd);
+
+    /* Restore selection */
+    if(indexStart != indexEnd) {
+        ta.selectionStart = indexStart;
+        ta.selectionEnd = indexEnd + before.length + after.length;
+    }
+    else {
+        ta.selectionStart = indexStart + before.length;
+        ta.selectionEnd = ta.selectionStart;
+    }
+}
 
 // Tab insert some spaces
 // Ctrl+Enter send the form
diff --git a/app/templates/widgets/editor.html b/app/templates/widgets/editor.html
index a0363cf..363ced9 100644
--- a/app/templates/widgets/editor.html
+++ b/app/templates/widgets/editor.html
@@ -3,22 +3,22 @@
 		<!-- Buttons for the text editor -->
 		<div class="btn-group">
 			<!-- Underline, Bold, Italic, Strikethrough -->
-			<button type="button" onclick="editor_btn_type()">
+			<button type="button" onclick="editor_insert_around(event)" data-before="__" data-after="__">
 				<svg viewBox="0 0 24 24">
 					<path d="M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z"/>
 				</svg>
 			</button>
-			<button type="button" onclick="editor_bold()">
+			<button type="button" onclick="editor_insert_around(event)" data-before="**" data-after="**">
 				<svg viewBox="0 0 24 24">
 					<path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/>
 				</svg>
 			</button>
-			<button type="button" onclick="editor_btn_type()">
+			<button type="button" onclick="editor_insert_around(event)" data-before="*" data-after="*">
 				<svg viewBox="0 0 24 24">
 					<path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/>
 				</svg>
 			</button>
-			<button type="button" onclick="editor_btn_type()">
+			<button type="button" onclick="editor_insert_around(event)" data-before="~~" data-after="~~">
 				<svg viewBox="0 0 24 24">
 					<path d="M6.85,7.08C6.85,4.37,9.45,3,12.24,3c1.64,0,3,0.49,3.9,1.28c0.77,0.65,1.46,1.73,1.46,3.24h-3.01 c0-0.31-0.05-0.59-0.15-0.85c-0.29-0.86-1.2-1.28-2.25-1.28c-1.86,0-2.34,1.02-2.34,1.7c0,0.48,0.25,0.88,0.74,1.21 C10.97,8.55,11.36,8.78,12,9H7.39C7.18,8.66,6.85,8.11,6.85,7.08z M21,12v-2H3v2h9.62c1.15,0.45,1.96,0.75,1.96,1.97 c0,1-0.81,1.67-2.28,1.67c-1.54,0-2.93-0.54-2.93-2.51H6.4c0,0.55,0.08,1.13,0.24,1.58c0.81,2.29,3.29,3.3,5.67,3.3 c2.27,0,5.3-0.89,5.3-4.05c0-0.3-0.01-1.16-0.48-1.94H21V12z"/>
 				</svg>