fix: abbr incorrectly appears in search results (#495)

* fix: `abbr` incorrectly appears in search results

* chore: tweak

plugins/plugin-md-power/src/client/components/Abbreviation.vue

@@ -34,18 +34,20 @@ watch(show, () => nextTick(() => {
 <template>
   <span class="vp-abbr" @mouseenter="show = true" @mouseleave="show = false">
     <slot />
-    <Transition name="fade">
-      <span v-show="show" ref="tooltip" class="vp-abbr-tooltip" :style="styles">
-        <slot name="tooltip" />
-      </span>
-    </Transition>
+    <ClientOnly>
+      <Transition name="fade">
+        <span v-show="show" ref="tooltip" class="vp-abbr-tooltip ignore-header" :style="styles">
+          <slot name="tooltip" />
+        </span>
+      </Transition>
+    </ClientOnly>
   </span>
 </template>
 
 <style>
 :root {
   --vp-abbr-bg: var(--vp-c-bg);
-  --vp-abbr-text: var(--vp-c-text-2);
+  --vp-abbr-text: var(--vp-c-text-1);
   --vp-abbr-border: var(--vp-c-divider);
   --vp-abbr-transform: translateX(-50%);
   --vp-abbr-space-transform: translateX(-50%);
@@ -66,7 +68,7 @@ watch(show, () => nextTick(() => {
   width: max-content;
   max-width: min(calc(100vw - 32px), 360px);
   padding: 8px 14px;
-  font-size: 0.875em;
+  font-size: 14px;
   line-height: 1.7;
   color: var(--vp-abbr-text);
   cursor: auto;

plugins/plugin-md-power/src/node/inline/abbr.ts

@@ -174,11 +174,8 @@ export const abbrPlugin: PluginSimple = (md) => {
 
   md.core.ruler.after('linkify', 'abbr_replace', abbrReplace)
 
-  md.renderer.rules.abbreviation = (tokens, idx) => {
+  md.renderer.rules.abbreviation = (tokens, idx, _, env) => {
     const { content, info } = tokens[idx]
-    return `<Abbreviation>
-      ${content}
-      ${info ? `<template #tooltip>${md.renderInline(info)}</template>` : ''}
-    </Abbreviation>`
+    return `<Abbreviation>${content}${info ? `<template #tooltip>${md.renderInline(info, env)}</template>` : ''}</Abbreviation>`
   }
 }

plugins/plugin-search/src/node/prepareSearchIndex.ts

@@ -156,10 +156,10 @@ ${page.contentRendered}`
 }
 
 // eslint-disable-next-line regexp/no-super-linear-backtracking
-const headingRegex = /<h(\d*).*?>(<a.*? href="#.*?".*?>.*?<\/a>)<\/h\1>/gi
+const headingRegex = /<h(\d*).*?>(<a.*? href="#.*?".*?>[\s\S]*?<\/a>)<\/h\1>/gi
 // eslint-disable-next-line regexp/no-super-linear-backtracking
-const headingContentRegex = /<a.*? href="#(.*?)".*?><span>(.*?)<\/span><\/a>/i
-
+const headingContentRegex = /<a.*? href="#(.*?)".*?><span>([\s\S]*?)<\/span><\/a>/i
+const ignoreHeadingRegex = /<template[^>]*>[\s\S]*<\/template>/gi
 /**
  * Splits HTML into sections based on headings
  */
@@ -195,6 +195,8 @@ function getSearchableText(content: string) {
 }
 
 function clearHtmlTags(str: string) {
+  str = str.replace(ignoreHeadingRegex, '')
+  // 移除其他所有HTML标签
   return str.replace(/<[^>]*>/g, '')
 }