app/static/css/editor.css

@@ -26,10 +26,19 @@
 .editor .btn-group .separator {
   margin: 0 8px 8px 0;
   height: 32px;
+  position: relative;
 }
 .editor .btn-group > a {
   margin: 0 0 8px 0;
 }
+.editor .btn-group .separator {
+  display: inline-block;
+  width: 0;
+  border-left: 1px solid #d9d9d9;
+  border-right: 1px solid #ffffff;
+  color: transparent;
+  text-indent: -10px;
+}
 .editor textarea {
   min-height: 15rem;
 }
@@ -38,11 +47,20 @@
   margin-top: 10px;
   border: var(--border);
 }
-.separator {
-  display: inline-block;
-  width: 0;
-  border-left: 1px solid #d9d9d9;
-  border-right: 1px solid #ffffff;
-  color: transparent;
-  text-indent: -10px;
+.editor .modal {
+  position: absolute;
+  left: 0px;
+  width: auto;
+  white-space: nowrap;
+  text-align: left;
+  right: inherit;
+  background-image: none;
+  background-color: #161819;
+  border-color: #3a3f42;
+  border-radius: .4rem;
+  padding: .2rem;
+  top: 3.2rem;
+  z-index: 100;
+  list-style-position: initial;
+  list-style-type: none;
 }

app/static/less/editor.less

@@ -32,10 +32,22 @@
 		button, .separator {
 			margin: 0 8px 8px 0;
 			height: 32px;
+
+			position: relative;
 		}
 		& > a {
 			margin: 0 0 8px 0;
 		}
+
+		// From gitea
+		.separator {
+			display: inline-block;
+			width: 0;
+			border-left: 1px solid #d9d9d9;
+			border-right: 1px solid #fff;
+			color: transparent;
+			text-indent: -10px;
+		}
 	}
 
 	textarea {
@@ -47,14 +59,24 @@
 		margin-top: 10px;
 		border: var(--border);
 	}
+
+	.modal {
+		position: absolute;
+		left: 0px;
+		width: auto;
+		white-space: nowrap;
+		text-align: left;
+		right: inherit;
+
+		background-image: none;
+		background-color: rgb(22, 24, 25);
+		border-color: rgb(58, 63, 66);
+		border-radius: .4rem;
+		padding: .2rem;
+		top: 3.2rem;
+		z-index: 100;
+		list-style-position: initial;
+		list-style-type: none;
+	}
 }
 
-// From gitea
-.separator {
-	display: inline-block;
-	width: 0;
-	border-left: 1px solid #d9d9d9;
-	border-right: 1px solid #fff;
-	color: transparent;
-	text-indent: -10px;
-}

app/static/scripts/editor.js

@@ -96,6 +96,44 @@ function editor_act_on_lines(event, fn)
 	ta.selectionEnd = end;
 }
 
+/*
+ * Create a modal used to get input from the user when generating some M⬇
+*/
+function editor_create_modal(event, content = document.createElement("div"), fn = {}) {
+	// The anchor is two levels above because the event.srcElement/event.target
+	// are the path inside the button.
+	const anchor = event.currentTarget;
+
+	const modal = document.createElement("div");
+	const contentDiv = document.createElement("div");
+	const btnDiv = document.createElement("div");
+	const validateBtn = document.createElement("button");
+	const cancelBtn = document.createElement("button");
+
+	modal.classList.add("modal");
+
+	validateBtn.onclick = function() {
+		modal.remove()
+
+		fn(event, content);
+	};
+	validateBtn.textContent = "Valider";
+	validateBtn.classList = ["bg-ok"];
+
+	cancelBtn.onclick = function() {
+		modal.remove()
+	};
+	cancelBtn.textContent = "Annuler";
+	cancelBtn.classList = ["bg-error"];
+
+	contentDiv.appendChild(content);
+	modal.appendChild(contentDiv);
+	btnDiv.appendChild(validateBtn);
+	btnDiv.appendChild(cancelBtn);
+	modal.appendChild(btnDiv);
+	anchor.appendChild(modal);
+}
+
 function editor_set_title(event, level, diff)
 {
 	editor_act_on_lines(event, function(line) {

app/templates/widgets/editor.html

@@ -103,13 +103,21 @@
 				</svg>
 			</button>
 	-->
-	<!-- These buttons are for links, pictures and files they need a modal to work properly
-			<button type="button" onclick="editor_btn_type()" title="Lien">
+			<button type="button" onclick="event.currentTarget.children[1].style = {'display': 'block'} /* toggle display on div */" title="Lien">
 				<svg viewBox="0 0 24 24">
 					<path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
 				</svg>
+				<div class="modal" style="display: none">
+					<div>
+						Content
+					</div>
+					<div>
+					<a type="button" class="button bg-ok" onclick="">Valider</a>
+					<a type="button" class="button bg-error" onclick="">Annuler</a>
+					</div>
+				</div>
 			</button>
-			<button type="button" onclick="editor_btn_type()" title="Image">
+			<button type="button" onclick="editor_create_modal(event)" title="Image">
 				<svg viewBox="0 0 24 24">
 					<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
 				</svg>
@@ -119,7 +127,6 @@
 					<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
 				</svg>
 			</button>
-	-->
 			<div class="filler"></div>
 			<a href="#">Aide</a>
 		</div>