From 65a923397a474433ed93a5186d8c9dbfa93c6a9e Mon Sep 17 00:00:00 2001
From: openorclose <interfiancee@gmail.com>
Date: Sat, 28 Mar 2020 16:40:11 +0800
Subject: [PATCH] Parse popovers for footnotes

During the migration to bootstrap-vue,
popovers had to be parsed into bootstrap-vue syntax.

This is done before the plugins stage, where footnotes are implemented, so the popovers don't work there.

Let's add the parsing of popovers to the footnotes plugin to solve this.
---
 .../markbind-plugin-footnotes-popovers.js     |  4 +++
 test/functional/test_site/expected/index.html | 36 ++++++++++---------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/plugins/default/markbind-plugin-footnotes-popovers.js b/src/plugins/default/markbind-plugin-footnotes-popovers.js
index 339aeae18a..4d8a7172ee 100644
--- a/src/plugins/default/markbind-plugin-footnotes-popovers.js
+++ b/src/plugins/default/markbind-plugin-footnotes-popovers.js
@@ -1,4 +1,5 @@
 const cheerio = module.parent.require('cheerio');
+const { parseComponents } = require('../../lib/markbind/src/parsers/componentParser.js');
 
 module.exports = {
   postRender: (content) => {
@@ -17,6 +18,9 @@ module.exports = {
     $('#content-wrapper')
       .append($('hr.footnotes-sep'))
       .append($('section.footnotes').append(popoversHtml));
+    $('section.footnotes popover').each((index, popover) => {
+      parseComponents(popover);
+    });
     return $.html();
   },
 };
diff --git a/test/functional/test_site/expected/index.html b/test/functional/test_site/expected/index.html
index f8b5285162..c84775a1bd 100644
--- a/test/functional/test_site/expected/index.html
+++ b/test/functional/test_site/expected/index.html
@@ -536,25 +536,27 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
               </p>
             </li>
           </ol>
-          <popover id="pop:footnote1">
-            <div slot="content">
-              <p>Here is the footnote. Footnotes will appear at the bottom of the page.</p>
-            </div>
-          </popover>
+          <span id="pop:footnote1" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger">
+          <div data-mb-html-for="content">
+            <p>Here is the footnote. Footnotes will appear at the bottom of the page.</p>
+          </div>
+        </span>
 
-          <popover id="pop:footnote2">
-            <div slot="content">
-              <p>Here's one with multiple blocks.</p>
-              <p>Subsequent paragraphs are indented to show that they belong to the previous footnote.</p>
-            </div>
-          </popover>
+          <span id="pop:footnote2" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger">
+          <div data-mb-html-for="content">
+            <p>Here's one with multiple blocks.</p>
+<p>Subsequent paragraphs are indented to show that they
+belong to the previous footnote.</p>
+          </div>
+        </span>
 
-          <popover id="pop:footnote3">
-            <div slot="content">
-              <p>Inlines notes are easier to write, since you don't have to pick an identifier and move down to type the note.
-              </p>
-            </div>
-          </popover>
+          <span id="pop:footnote3" data-mb-component-type="popover" v-b-popover.hover.top.html="popoverInnerGenerator" class="trigger">
+          <div data-mb-html-for="content">
+            <p>Inlines notes are easier to write, since
+you don't have to pick an identifier and move down to type the
+note.</p>
+          </div>
+        </span>
         </section>
       </div>
       <nav id="page-nav" class="navbar navbar-light bg-transparent">