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;

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 {

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);
 });
 
 

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>