From 00095748753dd5982ad8c442fb37e009c77904d6 Mon Sep 17 00:00:00 2001
From: Guillaume AGNIERAY <dev@agnieray.net>
Date: Wed, 22 Sep 2021 14:46:03 +0200
Subject: [PATCH 1/5] Use Summernote light editor; refs #1568

---
 galette/templates/default/common_scripts.tpl  | 57 ++++++++++++++++---
 .../templates/default/mailing_adherents.tpl   |  4 +-
 gulpfile.js                                   |  6 ++
 package-lock.json                             | 10 ++--
 package.json                                  |  4 +-
 5 files changed, 64 insertions(+), 17 deletions(-)

diff --git a/galette/templates/default/common_scripts.tpl b/galette/templates/default/common_scripts.tpl
index 11356c14..7cd4265c 100644
--- a/galette/templates/default/common_scripts.tpl
+++ b/galette/templates/default/common_scripts.tpl
@@ -37,24 +37,63 @@
         <script type="text/javascript" src="{base_url}/{$scripts_dir}mass_changes.js"></script>
     {/if}
     {if $html_editor}
-        <script type="text/javascript" src="{base_url}/{$jquery_dir}markitup-{$jquery_markitup_version}/jquery.markitup.js"></script>
-        <script type="text/javascript" src="{base_url}/{$jquery_dir}markitup-{$jquery_markitup_version}/sets/html/set-{$galette_lang}.js"></script>
+        <!--<script type="text/javascript" src="{base_url}/{$jquery_dir}markitup-{$jquery_markitup_version}/jquery.markitup.js"></script>
+        <script type="text/javascript" src="{base_url}/{$jquery_dir}markitup-{$jquery_markitup_version}/sets/html/set-{$galette_lang}.js"></script>-->
         <script language="javascript">
-            function toggleMailingEditor(id) {
+            function activateMailingEditor(id) {
                 if(!$('#mailing_html').attr('checked')){
                     $('#mailing_html').attr('checked', true);
                 }
 
                 $('input#html_editor_active').attr('value', '1');
-                {* While it is not possible to deactivate markItUp, we remove completly the functionnality *}
-                $('#toggle_editor').remove();
-                $('#mailing_corps').markItUp(galetteSettings);
+                $('#activate_editor').remove();
+                $('#summernote_toggler').html('<a href="javascript:deactivateMailingEditor(\'mailing_corps\');" id="deactivate_editor">{_T string="Deactivate HTML editor"}</a>');
+
+                $('#mailing_corps').summernote({
+                    height: 240,
+                    toolbar: [
+                        ['style', ['style']],
+                        ['font', ['bold', 'italic', 'strikethrough', 'clear']],
+                        ['para', ['ul', 'ol', 'paragraph']],
+                        ['insert', ['link', 'picture']],
+                        ['view', ['codeview', 'help']]
+                    ],
+                    styleTags: [
+                        'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
+                    ]
+                });
+                $('#mailing_corps').summernote({
+                    codeviewFilter: true,
+                    codeviewIframeFilter: false
+                });
+            }
+            function deactivateMailingEditor(id) {
+                $('#mailing_corps').summernote('destroy');
+                $('#deactivate_editor').remove();
+                $('#summernote_toggler').html('<a href="javascript:activateMailingEditor(\'mailing_corps\');" id="activate_editor">{_T string="Activate HTML editor"}</a>');
             }
         {if $html_editor_active eq 1}
             $(function(){
-                {* While it is not possible to deactivate markItUp, we remove completly the functionnality *}
-                $('#toggle_editor').remove();
-                $('#mailing_corps').markItUp(galetteSettings);
+                $('#activate_editor').remove();
+                $('#summernote_toggler').html('<a href="javascript:deactivateMailingEditor(\'mailing_corps\');" id="deactivate_editor">{_T string="Deactivate HTML editor"}</a>');
+
+                $('#mailing_corps').summernote({
+                    height: 240,
+                    toolbar: [
+                        ['style', ['style']],
+                        ['font', ['bold', 'italic', 'strikethrough', 'clear']],
+                        ['para', ['ul', 'ol', 'paragraph']],
+                        ['insert', ['link', 'picture']],
+                        ['view', ['codeview', 'help']]
+                    ],
+                    styleTags: [
+                        'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
+                    ]
+                });
+                $('#mailing_corps').summernote({
+                    codeviewFilter: true,
+                    codeviewIframeFilter: false
+                });
             });
         {/if}
         </script>
diff --git a/galette/templates/default/mailing_adherents.tpl b/galette/templates/default/mailing_adherents.tpl
index 05f1bba5..2118dc4d 100644
--- a/galette/templates/default/mailing_adherents.tpl
+++ b/galette/templates/default/mailing_adherents.tpl
@@ -82,7 +82,9 @@
                     <input type="text" name="mailing_objet" id="mailing_objet" value="{$mailing->subject}" size="80" required/>
                 </div>
                 <div>
-                    <span class="fright"><a href="javascript:toggleMailingEditor('mailing_corps');" id="toggle_editor">{_T string="(De)Activate HTML editor"}</a></span>
+                    <span id="summernote_toggler" class="fright">
+                        <a href="javascript:activateMailingEditor('mailing_corps');" id="activate_editor">{_T string="Activate HTML editor"}</a>
+                    </span>
                     <label for="mailing_corps" class="bline">{_T string="Message:"}</label>
                     <textarea name="mailing_corps" id="mailing_corps" cols="80" rows="15" required>{$mailing->message|escape}</textarea>
                     <input type="hidden" name="html_editor_active" id="html_editor_active" value="{if $html_editor_active}1{else}0{/if}"/>
diff --git a/gulpfile.js b/gulpfile.js
index de705e23..b6bef348 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -19,6 +19,7 @@ var main_styles = [
     './node_modules/jquery-ui-dist/jquery-ui.css',
     './galette/webroot/themes/default/jquery-ui/jquery-ui-1.12.1.custom.css',
     './node_modules/selectize/dist/css/selectize.default.css',
+    './node_modules/summernote/dist/summernote-lite.min.css',
 ];
 
 var main_scripts = [
@@ -30,6 +31,7 @@ var main_scripts = [
     './node_modules/sifter/sifter.js',
     './node_modules/selectize/dist/js/selectize.min.js',
     './galette/webroot/js/jquery/jquery.bgFade.js',
+    './node_modules/summernote/dist/summernote-lite.min.js',
     './galette/webroot/js/common.js',
 ];
 
@@ -37,6 +39,9 @@ var main_assets = [
     {
         'src': './node_modules/@fortawesome/fontawesome-free/webfonts/*',
         'dest': '/webfonts/'
+    }, {
+        'src': './node_modules/summernote/dist/font/*',
+        'dest': '/webfonts/'
     }, {
         'src': './node_modules/jquery-ui-dist/images/*',
         'dest': '/images/'
@@ -76,6 +81,7 @@ function styles() {
     .pipe(replace('jquery-ui/images/', '../images/'))
     .pipe(replace('("images/ui', '("../images/ui')) //
     .pipe(replace('url(images/', 'url(../images/'))
+    .pipe(replace('url(font/', 'url(../webfonts/'))
     .pipe(cleanCSS())
     .pipe(concat('galette-main.bundle.min.css'))
     .pipe(gulp.dest(_dir));
diff --git a/package-lock.json b/package-lock.json
index 525c4225..6944d2b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2864,11 +2864,6 @@
         "object-visit": "^1.0.0"
       }
     },
-    "markitup": {
-      "version": "3.0.0-0",
-      "resolved": "https://registry.npmjs.org/markitup/-/markitup-3.0.0-0.tgz",
-      "integrity": "sha1-0jn84Z5vuioDMIf/0bk7kOmwBX8="
-    },
     "matchdep": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
@@ -4022,6 +4017,11 @@
         "is-utf8": "^0.2.0"
       }
     },
+    "summernote": {
+      "version": "0.8.18",
+      "resolved": "https://registry.npmjs.org/summernote/-/summernote-0.8.18.tgz",
+      "integrity": "sha512-VlwBaNm9vSYMYXvO2f3UCUmY0Gm8jxLcBn+D08aX3pKs4x2vAoyQ4DcDQ6D+PchQiLrf86AGQVfVu56F4aP3ug=="
+    },
     "supports-color": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
diff --git a/package.json b/package.json
index dbe546bb..1fad3eac 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "jquery-ui-dist": "^1.12.1",
     "jquery.cookie": "^1.4.1",
     "jstree": "^3.3.9",
-    "markitup": "^3.0.0-0",
-    "selectize": "^0.12.6"
+    "selectize": "^0.12.6",
+    "summernote": "^0.8.18"
   }
 }
-- 
2.30.2

