better capsule (aka footnotes)

.gitignore

@@ -30,7 +30,7 @@
 # npm
 node_modules/
 
-*.patch
+#*.patch
 /.csslintrc
 /.eslintrc.json
 /.ht.router.php
@@ -47,4 +47,4 @@ node_modules/
 /web_main/.vscode/*
 .vscode/*
 
-/log
+/log

composer.json

@@ -121,6 +121,9 @@
           },
           "drupal/core": {
             "CKEDITOR for summary https://www.drupal.org/project/drupal/issues/2671162":"https://www.drupal.org/files/issues/2025-08-23/2671162-158.patch"
+          },
+          "drupal/footnotes": {
+            "leave paragraphs tags in place":"./patches/footnotes-leave-paragraphs.patch"
           }
         }
     }

config/sync/editor.editor.footnote.yml

@@ -16,13 +16,22 @@ settings:
       - bold
       - italic
       - underline
-      - link
       - bulletedList
+      - drupalInsertImage
+      - showBlocks
   plugins:
+    ckeditor5_imageResize:
+      allow_resize: true
     ckeditor5_list:
       properties:
         reversed: false
         startIndex: false
       multiBlock: false
 image_upload:
-  status: false
+  status: true
+  scheme: public
+  directory: inline-images
+  max_size: null
+  max_dimensions:
+    width: 1080
+    height: null

config/sync/filter.format.footnote.yml

@@ -3,6 +3,10 @@ langcode: en
 status: true
 dependencies:
   module:
+    - editor
+    - footnotes
+    - linkit
+    - media
     - pathologic
 _core:
   default_config_hash: SYAah-i4HbJnc3ZnKC9NmY4M0UAFYpfobYzxg0eMunM
@@ -10,23 +14,108 @@ name: Footnote
 format: footnote
 weight: 0
 filters:
+  editor_file_reference:
+    id: editor_file_reference
+    provider: editor
+    status: true
+    weight: -48
+    settings: {  }
+  filter_align:
+    id: filter_align
+    provider: filter
+    status: false
+    weight: -47
+    settings: {  }
+  filter_autop:
+    id: filter_autop
+    provider: filter
+    status: true
+    weight: -43
+    settings: {  }
+  filter_caption:
+    id: filter_caption
+    provider: filter
+    status: false
+    weight: -46
+    settings: {  }
+  filter_footnotes:
+    id: filter_footnotes
+    provider: footnotes
+    status: false
+    weight: -44
+    settings:
+      footnotes_collapse: false
+      footnotes_css: true
+      footnotes_dialog: false
+      footnotes_dialog_prevent_bubbling: false
+      footnotes_footer_disable: false
+      footnotes_preview_show_text: true
+      footnotes_preview_character: ''
   filter_html:
     id: filter_html
     provider: filter
     status: true
-    weight: -10
+    weight: -50
     settings:
-      allowed_html: '<br> <p> <strong> <em> <u> <a href> <ul> <ol reversed start> <li>'
+      allowed_html: '<br> <p> <strong> <em> <u> <ul> <ol> <li> <img src alt height width data-entity-uuid data-entity-type>'
-      filter_html_help: true
+      filter_html_help: false
       filter_html_nofollow: false
+  filter_html_escape:
+    id: filter_html_escape
+    provider: filter
+    status: false
+    weight: -49
+    settings: {  }
+  filter_html_image_secure:
+    id: filter_html_image_secure
+    provider: filter
+    status: false
+    weight: -41
+    settings: {  }
+  filter_htmlcorrector:
+    id: filter_htmlcorrector
+    provider: filter
+    status: false
+    weight: -40
+    settings: {  }
+  filter_image_lazy_load:
+    id: filter_image_lazy_load
+    provider: filter
+    status: false
+    weight: -39
+    settings: {  }
   filter_pathologic:
     id: filter_pathologic
     provider: pathologic
     status: false
-    weight: 50
+    weight: -38
     settings:
       settings_source: global
       local_settings:
         protocol_style: full
         local_paths: ''
         keep_language_prefix: true
+  filter_url:
+    id: filter_url
+    provider: filter
+    status: false
+    weight: -45
+    settings:
+      filter_url_length: 72
+  linkit:
+    id: linkit
+    provider: linkit
+    status: false
+    weight: -42
+    settings:
+      title: true
+      media_substitution: metadata
+  media_embed:
+    id: media_embed
+    provider: media
+    status: false
+    weight: -37
+    settings:
+      default_view_mode: default
+      allowed_view_modes: {  }
+      allowed_media_types: {  }

config/sync/filter.format.wysiwyg.yml

@@ -5,6 +5,8 @@ dependencies:
   module:
     - editor
     - footnotes
+    - linkit
+    - media
     - pathologic
 _core:
   default_config_hash: a0dSxrd1nnzeSvKpvFmtoLpxDd3Nj6E7dQN-MZUi20g
@@ -22,38 +24,38 @@ filters:
     id: filter_align
     provider: filter
     status: false
-    weight: -41
+    weight: -42
     settings: {  }
   filter_autop:
     id: filter_autop
     provider: filter
     status: true
-    weight: -49
+    weight: -45
     settings: {  }
   filter_caption:
     id: filter_caption
     provider: filter
     status: false
-    weight: -40
+    weight: -41
     settings: {  }
   filter_footnotes:
     id: filter_footnotes
     provider: footnotes
     status: true
-    weight: 0
+    weight: -47
     settings:
       footnotes_collapse: false
       footnotes_css: false
       footnotes_dialog: false
       footnotes_dialog_prevent_bubbling: true
       footnotes_footer_disable: true
-      footnotes_preview_show_text: true
+      footnotes_preview_show_text: false
       footnotes_preview_character: ''
   filter_html:
     id: filter_html
     provider: filter
     status: false
-    weight: -43
+    weight: -44
     settings:
       allowed_html: ''
       filter_html_help: true
@@ -62,25 +64,31 @@ filters:
     id: filter_html_escape
     provider: filter
     status: false
-    weight: -42
+    weight: -43
     settings: {  }
   filter_html_image_secure:
     id: filter_html_image_secure
     provider: filter
     status: true
-    weight: -48
+    weight: -49
     settings: {  }
   filter_htmlcorrector:
     id: filter_htmlcorrector
     provider: filter
     status: true
-    weight: -47
+    weight: -46
+    settings: {  }
+  filter_image_lazy_load:
+    id: filter_image_lazy_load
+    provider: filter
+    status: false
+    weight: -39
     settings: {  }
   filter_pathologic:
     id: filter_pathologic
     provider: pathologic
     status: false
-    weight: 50
+    weight: -38
     settings:
       settings_source: global
       local_settings:
@@ -91,6 +99,23 @@ filters:
     id: filter_url
     provider: filter
     status: true
-    weight: -45
+    weight: -48
     settings:
       filter_url_length: 72
+  linkit:
+    id: linkit
+    provider: linkit
+    status: false
+    weight: -40
+    settings:
+      title: true
+      media_substitution: metadata
+  media_embed:
+    id: media_embed
+    provider: media
+    status: false
+    weight: -37
+    settings:
+      default_view_mode: default
+      allowed_view_modes: {  }
+      allowed_media_types: {  }

patches/footnotes-leave-paragraphs.patch

@@ -0,0 +1,13 @@
+diff --git a/src/Plugin/Filter/FootnotesFilter.php b/src/Plugin/Filter/FootnotesFilter.php
+index 03bff31..8189be0 100644
+--- a/src/Plugin/Filter/FootnotesFilter.php
++++ b/src/Plugin/Filter/FootnotesFilter.php
+@@ -168,7 +168,7 @@ class FootnotesFilter extends FilterBase implements ContainerFactoryPluginInterf
+       // Citations should not contain paragraph tags as they should be inline
+       // content. This attempts to remove them; however, if the 'Convert line
+       // breaks filter' runs after this filter, it will still be an issue.
+-      $markup = str_replace(['<p>', '</p>'], '', $markup);
++      // $markup = str_replace(['<p>', '</p>'], '', $markup);
+       static::replaceNodeContent($node, $markup);
+     }
+ 

web_main/themes/custom/mathallo/assets/js/main.js

@@ -394,7 +394,7 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
     function onMouseEnterFN(event){
       console.log('onMouseEnterFN, event:', event);
-      fn_modale.innerHTML = event.target.dataset.content;
+      fn_modale.innerHTML = event.target.querySelector('.footnote-content').innerHTML;
       fn_modale.classList.add('visible');
 
 

web_main/themes/custom/mathallo/assets/scss/main.scss

@@ -770,7 +770,7 @@ aside.footnote-content{
   position: absolute;
   // top:50%; left:50%;
   z-index: 200;
-  max-width: 100em;
+  max-width: 40em;
   padding:1em 1.5em 1em 1em;
   border:  1px dashed $bleu_site;
   &.visible{
@@ -778,5 +778,8 @@ aside.footnote-content{
     opacity: 1;
     transition: opacity 0.25s ease-in-out;
   }
-
+  img{
+    max-width: 100%;
+    height: auto;
+  }
 }

web_main/themes/custom/mathallo/templates/footnote-link.html.twig

@@ -1,7 +1,7 @@
 {% apply footnotes_spaceless %}
   {# footnotes/footnote-link.html.twig #}
-  <span class="footnote__citation js-footnote-citation" id="{{ fn.ref_id }}" data-content="{{ fn.text }}">
+  <div class="footnote__citation js-footnote-citation" id="{{ fn.ref_id }}">
     {{ fn.value|render|trim }}
-    {# <aside class="footnote-content">{{ fn.text }}</aside> #}
+    <aside class="footnote-content">{{ fn.text }}</aside>
-  </span>
+  </div>
 {% endapply %}

web_main/themes/custom/mathallo/templates/footnote-links.html.twig

@@ -10,4 +10,4 @@
       {%- endfor -%}
     </span>
   {%- endif -%}
-{% endapply %}
+{% endapply %}