Debug cannot import footnote from hash

docs/userGuide/syntax/footnotes.md

@@ -46,5 +46,6 @@ belong to the previous footnote.
 ```
 </div>
 <div id="examples" class="d-none">
+
 1 + 1 = 2 ^[Math]
 </div>

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,29 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
                 note.</p>
             </li>
 
+
+            <popover id="pop:footnotefn-2-1">
+              <template #content>
+                <div>
+                  <p>footnote1</p>
+
+                </div>
+              </template>
+            </popover>
+            <popover id="pop:footnotefn-2-2">
+              <template #content>
+                <div>
+                  <p>footnote2</p>
+
+                </div>
+              </template>
+            </popover>
+            <li id="fn-2-1" class="footnote-item">
+              <p>footnote1</p>
+            </li>
+            <li id="fn-2-2" class="footnote-item">
+              <p>footnote2</p>
+            </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

@@ -165,6 +165,15 @@ function _deleteIncludeAttributes(node: MbNode) {
   delete node.attribs.omitFrontmatter;
 }
 
+function buildGetNextFootnodeNumber() {
+  let footnoteNumber = 0;
+  function getFootnoteNumber() {
+    footnoteNumber += 1;
+    return footnoteNumber;
+  }
+  return getFootnoteNumber;
+}
+
 /**
  * PreProcesses includes.
  * Replaces it with an error node if the specified src is invalid,
@@ -173,7 +182,8 @@ function _deleteIncludeAttributes(node: MbNode) {
 export function processInclude(node: MbNode, context: Context, pageSources: PageSources,
                                variableProcessor: VariableProcessor, renderMd: (text: string) => string,
                                renderMdInline: (text: string) => string,
-                               config: Record<string, any>): Context {
+                               config: Record<string, any>,
+                               getNextFootnodeNumber: () => number = buildGetNextFootnodeNumber()): Context {
   if (_.isEmpty(node.attribs.src)) {
     const error = new Error(`Empty src attribute in include in: ${context.cwf}`);
     logger.error(error);
@@ -230,6 +240,27 @@ export function processInclude(node: MbNode, context: Context, pageSources: Page
     const $ = cheerio.load(actualContent);
     const actualContentOrNull = $(hash).html();
     actualContent = actualContentOrNull || '';
+    if (actualContent !== '') {
+      const hashNode = $(hash);
+      const footnodeHrefs = hashNode.find('a[aria-describedby="footnote-label"]')
+        .map(function (this: any) {
+          $(this).text(`[${getNextFootnodeNumber()}]`);
+          return $(this).attr('href');
+        })
+        .get();
+      if (footnodeHrefs.length > 0) {
+        const tempFootnotes = $('<mb-temp-footnotes></mb-temp-footnotes>');
+        footnodeHrefs.forEach((href) => {
+          // substring function called to remove the # from the href
+          const listItem = $('<li></li>').attr('id', href.substring(1))
+            .addClass('footnote-item')
+            .html($(`${href}.footnote-item`).html()!);
+          tempFootnotes.append(listItem);
+        });
+        hashNode.append(tempFootnotes);
+        actualContent = hashNode.html()!;
+      }
+    }
 
     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,51 @@ 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);
+  const expected = '<div>\n'
+                 + '<p>text<trigger for="pop:footnotefn-1-1"><sup class="footnote-ref"><a aria-describedby="'
+                 + 'footnote-label" href="#fn-1-1">[1]</a></sup>'
+                 + '</trigger></p></div><hr class="footnotes-sep">\n'
+                 + '<section class="footnotes">\n'
+                 + '<ol class="footnotes-list">\n'
+                 + '<popover id="pop:footnotefn-1-1">\n'
+                 + '            <template #content><div>\n'
+                 + '              <p>footnote</p>\n'
+                 + '\n'
+                 + '            </div></template>\n'
+                 + '          </popover>\n'
+                 + '<li id="fn-1-1" class="footnote-item"><p>footnote</p>\n'
+                 + '</li>\n'
+                 + '</ol>\n'
+                 + '</section>\n';
+
+  expect(result).toEqual(expected);
+});
+
 test('includeFile replaces <include src="include.md#exists"> with <div>', async () => {
   const indexPath = path.resolve('index.md');