chore: use tiny-decode instead of v-html+escapeHtml

vuejs · May 22, 2024 · fbef70c · fbef70c
1 parent 82f5d69
commit fbef70c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -44,7 +44,8 @@
  "@docsearch/js": "^3.6.0",
  "@vueuse/core": "^10.9.0",
  "body-scroll-lock": "^4.0.0-beta.0",
- "normalize.css": "^8.0.1"
+ "normalize.css": "^8.0.1",
+ "tiny-decode": "^0.1.3"
  },
  "devDependencies": {
  "@mdit-vue/types": "^2.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/vitepress/components/VPDocOutlineItem.vue b/src/vitepress/components/VPDocOutlineItem.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { useData, _escapeHtml } from 'vitepress'
+import { decode } from 'tiny-decode'
+import { useData } from 'vitepress'
 import type { MenuItemWithLinkAndChildren } from '../composables/outline.js'
 
 defineProps<{
@@ -21,13 +22,9 @@ function onClick({ target: el }: Event) {
 <template>
  <ul :class="nested ? 'nested' : 'root'">
  <li v-for="{ children, link, text, hidden } in headers">
- <a
- class="outline-link"
- :href="link"
- @click="onClick"
- v-show="!hidden"
- v-html="_escapeHtml(text)"
- />
+ <a class="outline-link" :href="link" @click="onClick" v-show="!hidden">
+ {{ decode(text) }}
+ </a>
  <template v-if="children?.length && frontmatter.outline === 'deep'">
  <VPDocOutlineItem :headers="children" :nested="true" />
  </template>