From 546b32c22b016f48157d6f6d85013597b3b35b54 Mon Sep 17 00:00:00 2001
From: Eragon <eragon@eragon.re>
Date: Thu, 15 Dec 2022 12:05:58 +0100
Subject: [PATCH] editor: Multiples bugfixes from Lephe's review

Refresh preview 3 sec after last keypress
Refresh preview on button usage
Move cursor after the --- line when using the button
Replace margin for padding in the preview css
Add a slight background shade on the preview
---
 app/static/css/editor.css         | 3 ++-
 app/static/less/editor.less       | 3 ++-
 app/static/scripts/editor.js      | 8 +++++++-
 app/templates/widgets/editor.html | 5 +++--
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/static/css/editor.css b/app/static/css/editor.css
index 17a2f8e..9f48062 100644
--- a/app/static/css/editor.css
+++ b/app/static/css/editor.css
@@ -43,9 +43,10 @@
   min-height: 15rem;
 }
 .editor #editor_content_preview {
-  margin: 5px;
+  padding: 5px;
   margin-top: 10px;
   border: var(--border);
+  background-color: rgba(0,0,0,0.2);
 }
 .editor .modal {
   position: absolute;
diff --git a/app/static/less/editor.less b/app/static/less/editor.less
index 8ef98f5..774b91b 100644
--- a/app/static/less/editor.less
+++ b/app/static/less/editor.less
@@ -55,9 +55,10 @@
 	}
 
 	#editor_content_preview {
-		margin: 5px;
+		padding: 5px;
 		margin-top: 10px;
 		border: var(--border);
+		background-color: rgba(0, 0, 0, 0.2);
 	}
 
 	.modal {
diff --git a/app/static/scripts/editor.js b/app/static/scripts/editor.js
index 6ad3524..caaddd3 100644
--- a/app/static/scripts/editor.js
+++ b/app/static/scripts/editor.js
@@ -61,6 +61,8 @@ function editor_insert_around(event)
 	else {
 		ta.selectionStart = ta.selectionEnd = start + before.length;
 	}
+
+	preview();
 }
 
 /* Event handler that modifies each line within the selection through a
@@ -94,6 +96,8 @@ function editor_act_on_lines(event, fn)
 
 	ta.selectionStart = start;
 	ta.selectionEnd = end;
+
+	preview();
 }
 
 function editor_clear_modals(event, close = true) {
@@ -135,6 +139,8 @@ function editor_insert_link(event, link_id, text_id, image = false)
 	else {
 		ta.selectionStart = ta.selectionEnd = start + 1;
 	}
+
+	preview();
 }
 
 function editor_set_title(event, level, diff)
@@ -241,7 +247,7 @@ ta.addEventListener('keydown', function(e) {
 	if (previewTimeout != null) {
 		clearTimeout(previewTimeout);
 	}
-	previewTimeout = setTimeout(preview, 1000);
+	previewTimeout = setTimeout(preview, 3000);
 });
 
 
diff --git a/app/templates/widgets/editor.html b/app/templates/widgets/editor.html
index 010e4ba..2f25b94 100644
--- a/app/templates/widgets/editor.html
+++ b/app/templates/widgets/editor.html
@@ -90,8 +90,9 @@
 					<path d="M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z"/>
 				</svg>
 			</button>
-			<button type="button" onclick="editor_insert_around(event)" data-after="
----" title="Séparateur">
+			<button type="button" onclick="editor_insert_around(event)" data-before="
+---
+" title="Séparateur">
 				<svg viewBox="0 0 24 24">
 					<rect fill-rule="evenodd" height="2" width="16" x="4" y="11"/>
 				</svg>