fix(search): clean markdown elements in search contents

Author: Koooooo-7

src/plugins/search/markdown-to-txt.js

@@ -0,0 +1,61 @@
+/**
+ * This is a modified version of the
+ * [markdown-to-txt](https://www.npmjs.com/package/markdown-to-txt) library.
+ */
+import { marked } from 'marked';
+import { escape, unescape } from 'lodash';
+const block = text => text + '\n\n';
+const escapeBlock = text => escape(text) + '\n\n';
+const line = text => text + '\n';
+const inline = text => text;
+const newline = () => '\n';
+const empty = () => '';
+
+const TxtRenderer = {
+  // Block elements
+  code: escapeBlock,
+  blockquote: block,
+  html: empty,
+  heading: block,
+  hr: newline,
+  list: text => block(text.trim()),
+  listitem: line,
+  checkbox: empty,
+  paragraph: block,
+  table: (header, body) => line(header + body),
+  tablerow: text => line(text.trim()),
+  tablecell: text => text + ' ',
+  // Inline elements
+  strong: inline,
+  em: inline,
+  codespan: inline,
+  br: newline,
+  del: inline,
+  link: (_0, _1, text) => text,
+  image: (_0, _1, text) => text,
+  text: inline,
+  // etc.
+  options: {},
+};
+
+/**
+ * Converts markdown to plaintext using the marked Markdown library.
+ * Accepts [MarkedOptions](https://marked.js.org/using_advanced#options) as
+ * the second argument.
+ *
+ * NOTE: The output of markdownToTxt is NOT sanitized. The output may contain
+ * valid HTML, JavaScript, etc. Be sure to sanitize if the output is intended
+ * for web use.
+ *
+ * @param markdown the markdown text to txtify
+ * @param options  the marked options
+ * @returns the unmarked text
+ */
+export function markdownToTxt(markdown, options) {
+  const unmarked = marked(markdown, { ...options, renderer: TxtRenderer });
+  const unescaped = unescape(unmarked);
+  const trimmed = unescaped.trim();
+  return trimmed;
+}
+
+export default markdownToTxt;

src/plugins/search/search.js

@@ -2,6 +2,7 @@ import {
   getAndRemoveConfig,
   getAndRemoveDocisfyIgnoreConfig,
 } from '../../core/render/utils.js';
+import { markdownToTxt } from './markdown-to-txt.js';
 
 let INDEXS = {};
 
@@ -34,6 +35,17 @@ function escapeHtml(string) {
   return String(string).replace(/[&<>"']/g, s => entityMap[s]);
 }
 
+function formatContent(text) {
+  return escapeHtml(cleanMarkdown(ignoreDiacriticalMarks(text)));
+}
+
+function cleanMarkdown(text) {
+  if (text) {
+    text = markdownToTxt(text);
+  }
+  return text;
+}
+
 function getAllPaths(router) {
   const paths = [];
 
@@ -175,19 +187,14 @@ export function search(query) {
       keywords.forEach(keyword => {
         // From https://github.com/sindresorhus/escape-string-regexp
         const regEx = new RegExp(
-          escapeHtml(ignoreDiacriticalMarks(keyword)).replace(
-            /[|\\{}()[\]^$+*?.]/g,
-            '\\$&',
-          ),
+          formatContent(keyword).replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'),
           'gi',
         );
         let indexTitle = -1;
         let indexContent = -1;
-        handlePostTitle = postTitle
-          ? escapeHtml(ignoreDiacriticalMarks(postTitle))
-          : postTitle;
+        handlePostTitle = postTitle ? formatContent(postTitle) : postTitle;
         handlePostContent = postContent
-          ? escapeHtml(ignoreDiacriticalMarks(postContent))
+          ? formatContent(postContent)
           : postContent;
 
         indexTitle = postTitle ? handlePostTitle.search(regEx) : -1;
@@ -226,8 +233,8 @@ export function search(query) {
 
       if (matchesScore > 0) {
         const matchingPost = {
-          title: handlePostTitle,
-          content: postContent ? resultStr : '',
+          title: formatContent(handlePostTitle),
+          content: formatContent(postContent ? resultStr : ''),
           url: postUrl,
           score: matchesScore,
         };

test/e2e/search.test.js

@@ -232,4 +232,23 @@ test.describe('Search Plugin Tests', () => {
     await page.keyboard.press('z');
     await expect(searchFieldElm).toBeFocused();
   });
+  test('search result should remove markdown', async ({ page }) => {
+    const docsifyInitConfig = {
+      markdown: {
+        homepage: `
+          # The [mock](example.com) link
+          There is lots of words.
+        `,
+      },
+      scriptURLs: ['/dist/plugins/search.js'],
+    };
+
+    const searchFieldElm = page.locator('input[type=search]');
+    const resultsHeadingElm = page.locator('.results-panel h2');
+
+    await docsifyInit(docsifyInitConfig);
+
+    await searchFieldElm.fill('There');
+    await expect(resultsHeadingElm).toHaveText('The mock link');
+  });
 });