Passe à zmarkdown 11 (#6276)

* Passe à zmarkdown 11

* Prend en compte la structure des nouveaux blocs Spoiler

* Ajoute une icône, un curseur spécifique et un changement de couleur au survol

assets/js/spoiler.js

@@ -7,7 +7,7 @@
 (function($) {
   'use strict'
 
-  function buildSpoilers($elem) {
+  function buildOldSpoilers($elem) {
     $elem.each(function() {
       const $this = $(this)
       if (!$this.hasClass('spoiler-build')) {
@@ -31,13 +31,31 @@
     })
   }
 
+  function buildNewSpoilers() {
+    for (const spoiler of document.querySelectorAll('details.custom-block-spoiler')) {
+      let summary = spoiler.querySelector('summary')
+      if (summary === null) {
+        summary = document.createElement('summary')
+        summary.classList.add('custom-block-heading')
+        summary.textContent = 'Afficher/Masquer le contenu masqué'
+        const body = spoiler.querySelector('.custom-block-body')
+        spoiler.insertBefore(summary, body)
+      }
+      if (!summary.classList.contains('ico-after')) {
+        summary.classList.add('ico-after', 'view', 'light')
+      }
+    }
+  }
+
   $(document).ready(function() {
     const $content = $('#content')
     $('div.spoiler').addClass('custom-block-spoiler') /* for compatibility */
-    buildSpoilers($content.find('.custom-block-spoiler'))
+    buildOldSpoilers($content.find('div.custom-block-spoiler'))
+    buildNewSpoilers()
     $content.on('DOMNodeInserted', function(e) {
-      const $spoilers = $(e.target).find('.custom-block-spoiler')
-      return buildSpoilers($spoilers)
+      const $spoilers = $(e.target).find('div.custom-block-spoiler')
+      buildOldSpoilers($spoilers)
+      return buildNewSpoilers()
     })
   })
 })(jQuery)

assets/scss/base/_content.scss

@@ -241,7 +241,24 @@ h6 {
     }
 }
 
-.js .spoiler, .custom-block-spoiler {
+/* CSS specific for new spoilers using <details> and <summary> */
+.custom-block-spoiler summary.custom-block-heading {
+    cursor: pointer;
+
+    &.ico-after {
+        padding-left: $length-32;
+
+        &:after {
+            margin: $length-8 0 0 $length-10;
+        }
+    }
+
+    &:hover {
+        background-color: $grey-800;
+    }
+}
+
+.js .spoiler, div.custom-block-spoiler {
     display: none;
 }
 

zmd/package.json

@@ -9,9 +9,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "zmarkdown": "10.1.3"
+    "zmarkdown": "11.0.2"
   },
   "engines": {
-    "node": ">=8.0.0"
+    "node": ">=12.0.0"
   }
 }