editor: tests with emoji-picker-element for emoji picker

Note: we will need to self-host it if we keep it moving forward. This is
just a test, this commit should be reverted if not used in the end.

app/static/scripts/editor.js

@@ -23,7 +23,7 @@ function editor_event_source(event)
 	}
 	if(!button || !editor) return;
 
-	const ta = editor.querySelector("textarea");
+	const ta = editor.querySelector(".editor textarea");
 	return [editor, button, ta];
 }
 
@@ -283,6 +283,36 @@ function editor_separator(event) {
 	editor_insert_around(event, "", "\n---\n");
 }
 
+function editor_display_emoji_modal(event) {
+	event.currentTarget.children[1].style = {'display': 'block'};
+}
+
+/* This request the server to get a complete render of the current text in the textarea */
+function preview() {
+	const previewArea = document.querySelector("#editor_content_preview");
+
+	const textarea = document.querySelector(".editor textarea");
+	const payload = {text: ta.value};
+
+	const headers = new Headers();
+	headers.append("Content-Type", "application/json");
+
+	const params = {
+		method: "POST",
+		body: JSON.stringify(payload),
+		headers
+	};
+
+	fetch("/api/markdown", params).then(
+		(response) => {
+			response.text().then(
+			(text) => {
+				previewArea.innerHTML = text;
+			}
+		);
+	});
+}
+
 
 previewTimeout = null;
 ta = document.querySelector(".editor textarea");
@@ -325,29 +355,9 @@ ta.addEventListener('keydown', function(e) {
 	previewTimeout = setTimeout(preview, 3000);
 });
 
+document.querySelector('emoji-picker').addEventListener('emoji-click', event => {
+	editor_clear_modals(event);
+	editor_insert_around(event, "", event.detail.unicode)
 
-function preview() {
-	const previewArea = document.querySelector("#editor_content_preview");
-
-	const textarea = document.querySelector(".editor textarea");
-	const payload = {text: ta.value};
-
-	const headers = new Headers();
-	headers.append("Content-Type", "application/json");
-
-	const params = {
-		method: "POST",
-		body: JSON.stringify(payload),
-		headers
-	};
-
-	fetch("/api/markdown", params).then(
-		(response) => {
-			response.text().then(
-			(text) => {
-				previewArea.innerHTML = text;
-			}
-		);
-	});
-}
-
+	preview();
+});

app/templates/base/scripts.html

@@ -1,3 +1,4 @@
 {% for s in scripts %}
     <script type="text/javascript" src={{url_for('static', filename=s)}}></script>
 {% endfor %}
+    <script type="module" src='https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js'></script>

app/templates/widgets/editor.html

@@ -80,8 +80,7 @@
 			</button>
 
 			<span class="separator"></span>
-			<!-- Table, Separators, Images, Link, Upload -->
-			<!-- I need to find a way to replace the LF with \n -->
+			<!-- Table, Separators -->
 			<button type="button" onclick="editor_table(event)" title="Tableau">
 				<svg viewBox="0 0 24 24">
 					<path d="M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z"/>
@@ -92,13 +91,17 @@
 					<rect fill-rule="evenodd" height="2" width="16" x="4" y="11"/>
 				</svg>
 			</button>
-	<!-- This button is for an upgrade, it will be an emoji selector.
-			<button type="button" onclick="editor_btn_type()" title="Emoji">
+			<!-- Emojis -->
+			<button type="button" onclick="editor_display_emoji_modal(event)" title="Emoji">
 				<svg viewBox="0 0 24 24">
 					<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>
 				</svg>
+
+				<div class="modal" style=display:none>
+					<emoji-picker></emoji-picker>
+				</div>
 			</button>
-	-->
+			<!-- Links -->
 			<button type="button" onclick="editor_display_link_modal(event)" 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"/>
@@ -116,6 +119,7 @@
 					</div>
 				</div>
 			</button>
+			<!-- Images -->
 			<button type="button" onclick="event.currentTarget.children[1].style = {'display': 'block'}" 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"/>
@@ -142,6 +146,7 @@
 					</div>
 				</div>
 			</button>
+			<!-- Upload -->
 			<!-- Disabled because we have something similar under the form
 			<button type="button" onclick="editor_btn_type()" title="Joindre un fichier">
 				<svg viewBox="0 0 24 24">