fix: code render for escape html

qq15725 · Apr 24, 2023 · 225f8ad · 225f8ad · vercel · Apr 24, 2023
1 parent a8acce6
commit 225f8ad
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/packages/veno-ui/src/components/button/docs/icon.md b/packages/veno-ui/src/components/button/docs/icon.md
@@ -14,21 +14,21 @@
 
 <ve-spacer cols="12">
   <ve-spacer>
-    <ve-button :variant="variant" icon="mdi-star-outline" shape="circle" />
-    <ve-button :variant="variant" icon="mdi-star-outline" shape="circle" color="primary" />
-    <ve-button :variant="variant" icon="mdi-star-outline" shape="circle" disabled />
+    <ve-button :variant="variant" icon="$warning" shape="circle" />
+    <ve-button :variant="variant" icon="$warning" shape="circle" color="primary" />
+    <ve-button :variant="variant" icon="$warning" shape="circle" disabled />
   </ve-spacer>
 
   <ve-spacer>
-    <ve-button :variant="variant" icon="mdi-star-outline" />
-    <ve-button :variant="variant" icon="mdi-star-outline" color="primary" />
-    <ve-button :variant="variant" icon="mdi-star-outline" disabled />
+    <ve-button :variant="variant" icon="$warning" />
+    <ve-button :variant="variant" icon="$warning" color="primary" />
+    <ve-button :variant="variant" icon="$warning" disabled />
   </ve-spacer>
 
   <ve-spacer>
-    <ve-button :variant="variant" prepend-icon="mdi-star-outline">Star</ve-button>
-    <ve-button :variant="variant" prepend-icon="mdi-star-outline" color="primary">Star</ve-button>
-    <ve-button :variant="variant" prepend-icon="mdi-star-outline" disabled>Star</ve-button>
+    <ve-button :variant="variant" prepend-icon="$warning">Star</ve-button>
+    <ve-button :variant="variant" prepend-icon="$warning" color="primary">Star</ve-button>
+    <ve-button :variant="variant" prepend-icon="$warning" disabled>Star</ve-button>
   </ve-spacer>
 
   <ve-spacer>
@@ -62,4 +62,4 @@ export default defineComponent({
 })
 ```
 
-:::
+:::
diff --git a/packages/veno-ui/src/components/code/code.tsx b/packages/veno-ui/src/components/code/code.tsx
@@ -16,6 +16,26 @@ import { makeScrollbar, useScrollbar } from '../../composables/scrollbar'
 // Types
 import type { PropType } from 'vue'
 
+const HTML_ESCAPE_TEST_RE = /[&<>"]/
+const HTML_ESCAPE_REPLACE_RE = /[&<>"]/g
+const HTML_REPLACEMENTS = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+  '"': '&quot;',
+}
+
+function replaceUnsafeChar(ch: string) {
+  return HTML_REPLACEMENTS[ch as unknown as keyof typeof HTML_REPLACEMENTS]
+}
+
+function escapeHtml(str: string) {
+  if (HTML_ESCAPE_TEST_RE.test(str)) {
+    return str.replace(HTML_ESCAPE_REPLACE_RE, replaceUnsafeChar)
+  }
+  return str
+}
+
 export const Code = defineComponent({
   name: 'VeCode',
 
@@ -83,7 +103,7 @@ export const Code = defineComponent({
         .replace(/\n$/, '')
         .replace(/^\n/, '')
     })
-    const highlightedCode = ref(code.value)
+    const highlightedCode = ref(escapeHtml(code.value))
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(
       props, 'color',
     )
@@ -104,7 +124,7 @@ export const Code = defineComponent({
       })
     })
 
-    const highlight = async () => {
+    async function highlight() {
       highlightedCode.value = await highlighter.value?.highlight(
         code.value,
         language.value,
@@ -126,7 +146,7 @@ export const Code = defineComponent({
               backgroundColorClasses.value,
             ] }
             style={ backgroundColorStyles.value }
-            v-html={ highlightedCode.value }
+            v-html={ escapeHtml(highlightedCode.value) }
           />
         )
       }

diff --git a/packages/veno-ui/src/components/tag/docs/closable.md b/packages/veno-ui/src/components/tag/docs/closable.md
@@ -7,8 +7,8 @@
 ```html
 <ve-spacer>
   <ve-tag closable>Tag</ve-tag>
-  <ve-tag closable prepend-icon="mdi-star-outline">Tag</ve-tag>
+  <ve-tag closable prepend-icon="$warning">Tag</ve-tag>
 </ve-spacer>
 ```
 
-:::
+:::