fix(embed): strip front matter from included markdown (#2752)

Author: sy-records

docs/embed-files.md

@@ -48,6 +48,10 @@ Front Matter, commonly utilized in blogging systems like Jekyll, serves to defin
 
 When using Markdown, YAML front matter will be stripped from the rendered content. The attributes cannot be used in this case.
 
+```html
+<script src="//cdn.jsdelivr.net/npm/docsify@5/dist/plugins/front-matter.min.js"></script>
+```
+
 ```markdown
 [filename](_media/example-with-yaml.md ':include')
 ```

src/core/render/embed.js

@@ -32,7 +32,7 @@ function extractFragmentContent(text, fragment, fullLine) {
   return stripIndent((match || [])[1] || '').trim();
 }
 
-function walkFetchEmbed({ embedTokens, compile, fetch }, cb) {
+function walkFetchEmbed({ embedTokens, compile, fetch, frontMatter }, cb) {
   if (!embedTokens.length) {
     return cb({});
   }
@@ -62,9 +62,9 @@ function walkFetchEmbed({ embedTokens, compile, fetch }, cb) {
           });
 
           // This may contain YAML front matter and will need to be stripped.
-          const frontMatterInstalled = $docsify?.frontMatter?.installed;
+          const frontMatterInstalled = frontMatter?.installed;
           if (frontMatterInstalled) {
-            text = $docsify.frontMatter?.parseMarkdown(text);
+            text = frontMatter?.parseMarkdown(text);
           }
 
           if (currentToken.embed.fragment) {
@@ -140,6 +140,7 @@ export function prerenderEmbed({ compiler, raw = '', fetch }, done) {
   }
 
   const compile = compiler._marked;
+  const frontMatter = compiler.config.frontMatter;
   let tokens = compile.lexer(raw);
   const embedTokens = [];
   const links = tokens.links;
@@ -203,7 +204,7 @@ export function prerenderEmbed({ compiler, raw = '', fetch }, done) {
   const moves = [];
   const tokenInsertState = new WeakMap();
   walkFetchEmbed(
-    { compile, embedTokens, fetch },
+    { compile, embedTokens, fetch, frontMatter },
     ({ embedToken, token, rowIndex, cellIndex, tokenRef }) => {
       if (token && embedToken) {
         Object.assign(links, embedToken.links);

test/integration/embed.test.js

@@ -179,6 +179,40 @@ describe('Embed', function () {
     expect(mainText).not.toContain("_media/second.md ':include'");
   });
 
+  test('embed markdown file strips front matter when plugin is installed', async () => {
+    await docsifyInit({
+      markdown: {
+        homepage: `
+          ---
+          title: Homepage
+          ---
+
+          # Embed Test
+
+          [front matter include](_media/content.md ':include')
+        `,
+      },
+      routes: {
+        '_media/content.md': `
+          ---
+          title: Include
+          ---
+
+          included front matter content
+        `,
+      },
+      scriptURLs: ['/dist/plugins/front-matter.js'],
+    });
+
+    expect(
+      await waitForText('#main', 'included front matter content'),
+    ).toBeTruthy();
+
+    const mainText = document.querySelector('#main').textContent;
+    expect(mainText).not.toContain('title: Homepage');
+    expect(mainText).not.toContain('title: Include');
+  });
+
   test('embed multiple include code fragments in same paragraph', async () => {
     await docsifyInit({
       markdown: {