✨ [Feature] Add styling and embedding tools for FlatPages content (refs #3921, #3922, #4019)

Issues:

- [[PageStatiqueV2] Proposer des styles prédéfinis #3921](#3921)
- [[PageStatiqueV2] Alignement des images #3922](#3922)
- [Intégration composant "Suggestions" #4019](#4019)

The following styling possibilities have been added:

- a blockquote section
- an information section
- multiple heading levels (from H2 to H6)

Added embedding tools :

- decorated link with a button style (from tool "Lien Bouton")
- the "Suggestions" tool allow to embed an element referencing Geotrek objects (available categories: treks, touristic content, touristic event, outdoor site). It takes the form of an invisible DIV in the HTML content which can be retrieved through the API and displayed nicely (with cards in an article for instance).

It also removes static files from the previously used `youtube` tinymce plugin which is not compatible with TinyMCE 5.

Author: marcantoinedupre

docs/changelog.rst

@@ -8,6 +8,7 @@ CHANGELOG
 **Features**
 
 - Add new menu headers and flat pages with tree hierarchies
+- Add styling and embedding tools for FlatPages content (refs #3921, #3922, #4019)
 
 **Bug fixes**
 

docs/usage/static-pages.rst

@@ -74,18 +74,52 @@ Les champs Titre, Publiée et Contenu peuvent recevoir une valeur différente po
 
     Ces champs sont une alternative au glisser-déposer sur la liste des Pages Statiques et permettent de déplacer les pages dans l'arborescence (voir `Arborescence des pages statiques`_).
 
-**Mise en forme et médias**
+Mise en forme et médias
+-----------------------
 
 Le champ contenu expose un éditeur de texte riche (TinyMCE) permettant d'ajouter de la mise en forme et des médias dans le contenu de la page.
 
 - mise en forme du texte : titres, styles du texte, couleur du texte
 - insertion de listes
+- encart "Information"
+- lien sous forme de bouton
+- citation
 
 Médias :
 
 - insérer une image
 - insérer une vidéo YouTube
 - insérer un lien vers une autre page
+- encart de suggestion de contenu Geotrek
+
+Insérer une image
+-----------------
+
+L'outil *Insérer/modifier* une image permet d'insérer une image dans le contenu. Les champs suivants sont à renseigner :
+
+- Source
+- Description alternative : non-affichée, pour l'accessibilité et les formes de consultation alternatives du contenu
+- Largeur et Hauteur de présentation de l'image en pixels
+- checkbox Afficher le sous-titrage insère une zone de texte collée à l'image pour présenter un titre (le titre est à saisir dans le contenu une fois le formulaire validé)
+
+Insérer des suggestions de contenu Geotrek
+------------------------------------------
+
+Avec l'outil *Suggestions*, les champs suivants sont à renseigner :
+
+- le type de contenu (itinéraires, contenu touristique, événements ou site d'activités de plein nature)
+- les identifiants des contenus (séparés par des virgules. Par exemple : 12,8,73)
+- un titre pour l'encart de suggestions
+
+Après la validation du formulaire une zone récapitulant les informations saisies sous forme textuelle est placée dans le contenu de la page. Le site portail enrichira la présentation des suggestions avec les titres des contenus suggérés à la place des identifiants et les images associées.
+
+Vérifier la mise en page du contenu
+-----------------------------------
+
+Les outils suivants sont disponibles :
+
+- *Afficher les blocs* : permet de contrôler finement la séparation du contenu en blocs (pratique pour les paragraphes de texte)
+- *Code source* : affiche et permet de modifier directement le contenu au format HTML (pour les utilisateurs avertis)
 
 Publier une page
 ================

geotrek/flatpages/forms.py

@@ -1,6 +1,6 @@
 from django.conf import settings
 from django.core import validators
-from tinymce.widgets import TinyMCE
+from geotrek.flatpages.widgets import FlatPageTinyMCE
 
 from treebeard.forms import MoveNodeForm
 
@@ -26,7 +26,7 @@ def __init__(self, *args, **kwargs):
         # are passed along as they contain modeltranslation CSS classes.
         for fieldname, formfield in self.fields.items():
             if fieldname.startswith('content_'):
-                self.fields[fieldname].widget = TinyMCE(attrs=self.fields[fieldname].widget.attrs)
+                self.fields[fieldname].widget = FlatPageTinyMCE(attrs=self.fields[fieldname].widget.attrs)
 
         if self.instance.pk:
             page = Attachment.objects.filter(

geotrek/flatpages/static/flatpages/tinymce/css/flatpage_custom_formats.css

@@ -0,0 +1,51 @@
+h1, h2, h3 {
+    clear: both;
+}
+
+.align-left {
+    float: left;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+}
+
+.align-right {
+    float: right;
+    margin-left: 1rem;
+    margin-bottom: 1rem;
+}
+
+.button-link {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    border-radius: 1rem;
+    border: 1px solid;
+    text-decoration: none;
+}
+
+.information {
+    clear: both;
+    padding: 1rem;
+    background: lightgray;
+}
+
+.suggestions {
+    clear: both;
+    display: block !important;
+    background: lightgreen;
+    color: green;
+    padding: 2rem;
+    border-radius: 1rem;
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    clear: both;
+}
+
+.suggestions::before {
+    content: '' attr(data-type) ' suggestions : ' attr(data-label) '';
+    font-size: 1.2rem;
+    display: block;
+    margin-bottom: .3rem;
+}
+
+.suggestions::after {
+    content: 'Identifiants : ' attr(data-ids) '';
+}

geotrek/flatpages/static/flatpages/tinymce/js/additional_tinymce_plugins.js

@@ -0,0 +1,129 @@
+/*
+  Note: We have included the plugin in the same JavaScript file as the TinyMCE
+  instance for display purposes only. Tiny recommends not maintaining the plugin
+  with the TinyMCE instance and using the `external_plugins` option.
+*/
+
+document.addEventListener("DOMContentLoaded", function () {
+    tinymce.PluginManager.add('button-link', function (editor, url) {
+        var openDialogButtonLink = function () {
+            return editor.windowManager.open({
+                title: 'Lien bouton',
+                body: {
+                    type: 'panel',
+                    items: [
+                        {
+                            type: 'input',
+                            name: 'label',
+                            label: 'Intitulé',
+                        },
+                        {
+                            type: 'input',
+                            name: 'link',
+                            label: 'Lien',
+                        },
+                        {
+                            type: 'checkbox',
+                            name: 'target',
+                            label: 'Ouvrir dans un nouvel onglet'
+                        }
+                    ]
+                },
+                buttons: [
+                    {
+                        type: 'cancel',
+                        text: 'Close'
+                    },
+                    {
+                        type: 'submit',
+                        text: 'Save',
+                        primary: true
+                    }
+                ],
+                initialData: {
+                    label: tinymce.activeEditor.selection.getContent(),
+                },
+                onSubmit: function (api) {
+                    var data = api.getData();
+                    if (!data.link || !data.label) {
+                        return;
+                    }
+                    var target = data.target ? ' target="_blank" rel="noopener noreferrer" ' : '';
+                    editor.insertContent('<a class="button-link"' + target + 'href="' + data.link + '">' + data.label + '</a>');
+                    api.close();
+                }
+            });
+        };
+
+        var openDialogSuggestion = function () {
+            return editor.windowManager.open({
+                title: 'Suggestions',
+                body: {
+                    type: 'panel',
+                    items: [
+                        {
+                            type: 'listbox',
+                            name: 'type',
+                            label: 'Type',
+                            items: [
+                                {value: 'trek', text: 'Trek'},
+                                {value: 'touristicContent', text: 'Touristic content'},
+                                {value: 'touristicEvent', text: 'Touristic event'},
+                                {value: 'outdoorSite', text: 'Outdoor site'},
+                            ]
+                        },
+                        {
+                            type: 'input',
+                            name: 'label',
+                            label: "Intitulé de l'encart",
+                        },
+                        {
+                            type: 'input',
+                            name: 'ids',
+                            label: "Liste d'ID (séparés par des virgules)",
+                        }
+                    ]
+                },
+                buttons: [
+                    {
+                        type: 'cancel',
+                        text: 'Close'
+                    },
+                    {
+                        type: 'submit',
+                        text: 'Save',
+                        primary: true
+                    }
+                ],
+                initialData: {
+                    label: tinymce.activeEditor.selection.getContent(),
+                },
+                onSubmit: function (api) {
+                    var data = api.getData();
+                    if (!data.type || !data.ids) {
+                        return;
+                    }
+                    editor.insertContent('<div class="suggestions" data-label="' + data.label + '" data-type="' + data.type + '" data-ids="' + data.ids + '" style="display: none" contenteditable="false"></div>');
+                    api.close();
+                }
+            });
+        };
+        /* Add a button that opens a window */
+        editor.ui.registry.addButton('button-link', {
+            text: 'Lien bouton',
+            onAction: function () {
+                /* Open window */
+                openDialogButtonLink();
+            }
+        });
+        /* Add a button that opens a window */
+        editor.ui.registry.addButton('suggestions', {
+            text: 'Suggestions',
+            onAction: function () {
+                /* Open window */
+                openDialogSuggestion();
+            }
+        });
+    })
+
+}); // end of document DOMContentLoaded event handler