LUT-26182: insert smileys with the editor

Author: TimotheeHrl

src/sql/plugins/wiki/plugin/create_db_wiki.sql

@@ -43,7 +43,7 @@ CREATE TABLE wiki_topic_version_content (
   wiki_content LONG VARCHAR,
   html_wiki_content LONG VARCHAR NULL,
     PRIMARY KEY (id_topic_version , locale )
-);
+) CHARSET=utf8mb4 COLLATE=utf8mb4_bin;
 
 
 --

src/sql/plugins/wiki/upgrade/update_db_wiki-3.0.1-3.0.2.sql

@@ -1,2 +1,2 @@
 ALTER TABLE wiki_topic_version_content ADD html_wiki_content LONG VARCHAR NULL;
-
+ALTER TABLE wiki_topic_version_content CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_bin;

webapp/WEB-INF/templates/skin/plugins/wiki/custom_input_editor.html

@@ -135,5 +135,17 @@
         </div>
     </div>
 </div>
+<!------------------ COPY AN EMOJI -------------------------->
+<div id="selectEmojiModal" class="toastui-editor-popup" style="display: none;" >
+    <button class="btn btn-default" type="button" style="position: absolute; right: 0;" onclick="closeToastUiModal()">
+        <span class="fa fa-times"></span>
+    </button>
+    <div class="toastui-editor-popup-header">
+        <div class="toastui-editor-popup-header-title">Copy an Emoji</div>
+    </div>
+    <div class="toastui-editor-popup-content-body" style="margin: 25px;">
+        <div id="emojiList"></div>
+    </div>
+</div>
 
 <!------------------- END OF CUSTOM INPUTS -------------------------->

webapp/js/plugins/wiki/wiki_pages/defaultEditorContent.js

@@ -1,7 +1,7 @@
 let defaultEditorContent =  {
     "fr":"$$span\n" +
         "<div class='h-100 p-5 rounded-3 h-100 p-5 text-bg-dark rounded-3 bg-dark'>\n" +
-        "<h2 class='text-white'> Bienvenue dans le powered by Lutece</h2>\n" +
+        "<h2 class='text-white'> Bienvenue dans le powered by Lutece 🔥🔥🔥</h2>\n" +
         "<p class='text-light'>Cet outil se veut être un outil collaboratif très simple pour votre site Lutece</p>\n" +
         "<a href='https://lutece.paris.fr/fr/' class='btn btn-outline-light text-white' style='text-decoration: none'>Learn more</a>\n" +
         "</div>\n" +
@@ -10,7 +10,7 @@ let defaultEditorContent =  {
         "# Fonctionnalités principales\n" +
         "\n" +
         "\n" +
-        "* Utilisation de la syntaxe standard **Markdown** \n" +
+        "* Utilisation de la syntaxe standard **Markdown**  🚀 \n" +
         "\n" +
         " Possibilité de personnaliser directement en html pour obtenir des rendus spécifiques. Les éléments html autorisés sont : les classes de Lutece ou de bootstrap, des paragraphes, les Headings, les ancres, les images et les div, figure, figcaption. Toujours à l'intérieur des balises custom : \n" +
         "\n" +
@@ -96,7 +96,7 @@ let defaultEditorContent =  {
     "en":
         "$$span\n" +
         "<div class='h-100 p-5 rounded-3 h-100 p-5 text-bg-dark rounded-3 bg-dark'>\n" +
-        "<h2 class='text-white'> Welcome to the Wiki powered by Lutece</h2>\n" +
+        "<h2 class='text-white'> Welcome to the Wiki powered by Lutece 🔥🔥🔥</h2>\n" +
         "<p class='text-light'>This Wiki aims to be a very simple collaborative tool fully integrated to your Lutece site</p>\n" +
         "<a href='https://lutece.paris.fr/fr/' class='btn btn-outline-light text-white' style='text-decoration: none'>Learn more</a>\n" +
         "</div>\n" +
@@ -106,7 +106,7 @@ let defaultEditorContent =  {
         "\n" +
         "- [x] Provide a very simple and efficient Wiki editor with removable Help panel\n" +
         "- [x] Fully integrated to Lutece platform :\n" +
-        "    - [x] Use standard **Markdown** \n" +
+        "    - [x] Use standard **Markdown**  🚀 \n" +
         "- [x] Can be easily customized with the possiblity to add some html. Allowed html elements are : classes from Lutece, bootstrap or your own, paragraphs, Headings, ancres, images, div, figure, figcaption. Alway inside a custom input :\n" +
         "\n" +
         "$$span\n" +

webapp/js/plugins/wiki/wiki_pages/modify_page.js

@@ -123,6 +123,13 @@ editor.insertToolbarItem({ groupIndex: 0, itemIndex: 9 }, {
     className: 'fa fa-image editor',
     style: { backgroundImage: 'none' },
 });
+editor.insertToolbarItem({ groupIndex: 0, itemIndex: 10 }, {
+    name: 'Emoji',
+    tooltip: 'Emoji',
+    text: 'Em',
+    className: 'fa fa-smile editor',
+    style: { backgroundImage: 'none' },
+});
 
 
 document.getElementsByClassName("toastui-editor-mode-switch")[0].remove();
@@ -144,7 +151,31 @@ window.addEventListener("load", (event) => {
         document.getElementsByClassName("toastui-editor-md-container")[0].classList.add("wiki-align-content-val-"+alignmentValue);
     }
 });
+/* -------------- Emojis -------------- */
+const emojiButton = document.getElementsByClassName("fa fa-smile editor")[0];
+emojiButton.addEventListener('click', function() {
+    document.getElementById("selectEmojiModal").style.display = "block";
+});
 
+window.addEventListener("load", (event) => {
+    const emojis = ["😀", "😂", "😍", "🥰", "😎", "🤩", "😊", "🙂", "😆", "🥳", "😁", "😄", "😇", "😘", "😋", "🤗", "🙌", "👍", "🎉", "🔥", "💯", "🌟", "✨", "🌈", "🍀", "🍉", "🍕", "🎂", "🎸", "⚽️", "🚀"]
+    let emojiList = document.getElementById("emojiList");
+    emojiList.style.display = "grid";
+    emojiList.style.gridTemplateColumns = "repeat(4, 1fr)";
+    emojiList.style.gridGap = "0.5rem";
+
+    emojis.map(emoji => {
+        const emojiButton = document.createElement("button");
+        emojiButton.classList.add("btn", "btn-tertiary", "btn-xs");
+        emojiButton.innerText = emoji;
+        emojiButton.addEventListener('click', function() {
+            navigator.clipboard.writeText(emoji);
+            closeToastUiModal();
+        });
+        emojiList.appendChild(emojiButton);
+    });
+
+});
 
 /* -------------- ALERT  -------------- */
 const addAlertButton = document.getElementsByClassName("fa-solid fa-triangle-exclamation editor")[0];