Debug cannot import footnote from hash

packages/cli/test/functional/test_site/expected/index.html

@@ -237,6 +237,11 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
               Here is an inline note.<trigger for="pop:footnotefn-1-3"><sup class="footnote-ref"><a aria-describedby="footnote-label" href="#fn-1-3">[3]</a></sup></trigger>
             </p>
           </div>
+          <p><strong>Test include footnotes from hash</strong></p>
+          <div>
+            <p>text<trigger for="pop:footnotefn-2-1"><sup class="footnote-ref"><a aria-describedby="footnote-label" href="#fn-2-1">[1]</a></sup></trigger>, text2<trigger for="pop:footnotefn-2-2"><sup class="footnote-ref"><a aria-describedby="footnote-label" href="#fn-2-2">[2]</a></sup></trigger>
+            </p>
+          </div>
           <p><strong>Nunjucks SetExt</strong></p>
           <div> front back </div>
           <p>arrayVarItem1</p>
@@ -789,6 +794,25 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
                 note.</p>
             </li>
 
+
+            <popover id="pop:footnotefn-2-1">
+              <template #content>
+                <div>
+                  null
+                </div>
+              </template>
+            </popover>
+            <popover id="pop:footnotefn-2-2">
+              <template #content>
+                <div>
+                  null
+                </div>
+              </template>
+            </popover>
+
+            <li id="fn-2-1" class="footnote-item">null</li>
+            <li id="fn-2-2" class="footnote-item">null</li>
+
           </ol>
         </section>
 

packages/cli/test/functional/test_site/index.md

@@ -37,6 +37,10 @@ Hence, the contained markdown should be parsed and output as is, without any par
 
 <include src="testFootnotes.md" />
 
+**Test include footnotes from hash**
+
+<include src="testHashFootnotes.md#import" />
+
 **Nunjucks SetExt**
 
 {% ext externalVar = "_markbind/variable.json" %}

packages/cli/test/functional/test_site/testHashFootnotes.md

@@ -0,0 +1,4 @@
+<div id="import">
+
+text^[footnote1], text2^[footnote2]
+</div>

packages/core/src/html/includePanelProcessor.ts

@@ -230,6 +230,24 @@ export function processInclude(node: MbNode, context: Context, pageSources: Page
     const $ = cheerio.load(actualContent);
     const actualContentOrNull = $(hash).html();
     actualContent = actualContentOrNull || '';
+    if (actualContent !== '') {
+      const footnotePattern = /<a aria-describedby="footnote-label" href="#fn-\d+-\d+">\[\d+\]/g;
+      const matchs = actualContent.match(footnotePattern);
+      if (matchs) {
+        const hrefPattern = /href="#(fn-\d+-\d+)"/;
+        let footnoteNumber = 1;
+        let toAppend = '<mb-temp-footnotes>';
+        matchs.forEach((match) => {
+          const href = match.match(hrefPattern)![1];
+          const replaceTo = `<a aria-describedby="footnote-label" href="#${href}">[${footnoteNumber}]`;
+          footnoteNumber += 1;
+          actualContent = actualContent.replace(match, replaceTo);
+          toAppend += `\n<li id="${href}" class="footnote-item">${$('#fn-1-1.footnote-item')!.html()}</li>`;
+        });
+        toAppend += '\n</mb-temp-footnotes>';
+        actualContent += toAppend;
+      }
+    }
 
     if (actualContentOrNull === null && !isOptional) {
       const error = new Error(`No such segment '${hash}' in file: ${actualFilePath}\n`

packages/core/test/unit/html/includePanelProcessor.test.ts

@@ -87,6 +87,44 @@ test('includeFile replaces <include src="doesNotExist.md" optional> with empty <
   expect(result).toEqual(expected);
 });
 
+test('includeFile import footnote from hash', async () => {
+  const indexPath = path.resolve('index.md');
+
+  const index = [
+    '<include src="include.md#exists"/>',
+    '',
+  ].join('\n');
+
+  const include = [
+    '<div id="exists">',
+    '',
+    'text^[footnote]',
+    '</div>',
+    '',
+  ].join('\n');
+
+  const json = {
+    'index.md': index,
+    'include.md': include,
+  };
+
+  fs.vol.fromJSON(json, '');
+
+  const nodeProcessor = getNewDefaultNodeProcessor();
+  const result = await nodeProcessor.process(indexPath, index);
+  // to make lint happy; if write as array.join, some lines more than 100 characters;
+  const a = '<div>\n<p>text<trigger for="pop:footnotefn-1-1"><sup class="footnote-ref">';
+  const b = '<a aria-describedby="footnote-label" href="#fn-1-1">[1]</a></sup></trigger></p>';
+  const c = '</div><hr class="footnotes-sep">\n<section class="footnotes">\n';
+  const d = '<ol class="footnotes-list">\n<popover id="pop:footnotefn-1-1">\n';
+  const e = '            <template #content><div>\n              <p>footnote</p>\n\n';
+  const f = '            </div></template>\n          </popover>\n\n<li id="fn-1-1"';
+  const g = ' class="footnote-item"><p>footnote</p>\n</li>\n\n</ol>\n</section>\n';
+  const expected = a + b + c + d + e + f + g;
+
+  expect(result).toEqual(expected);
+});
+
 test('includeFile replaces <include src="include.md#exists"> with <div>', async () => {
   const indexPath = path.resolve('index.md');