@tak-ps/vue-tabler 4.21.0 → 4.24.0

package/.github/workflows/release.yml

@@ -7,7 +7,7 @@ on:
 
 permissions:
   id-token: write  # Required for OIDC
-  contents: read
+  contents: write
 
 jobs:
   build:
@@ -31,3 +31,11 @@ jobs:
 
       - name: Publish package
         run: npm publish --provenance --access public
+
+      - name: Generate CHANGELOG
+        run: grep -Pzo "### ${{ github.ref_name }}(?s).*?(?=###)" CHANGELOG.md > RELEASE
+
+      - name: Github Release
+        uses: softprops/action-gh-release@v2
+        with:
+          body_path: RELEASE

package/CHANGELOG.md

@@ -10,7 +10,19 @@
 
 ## Version History
 
-### v4.21.0
+### v4.24.0
+
+- :tada: Add `icon` slot to `TablerInlineAlert`
+
+### v4.23.1
+
+- :bug: Add sanitize helper fn
+
+### v4.23.0
+
+- :pencil2: Add GH Release system
+
+### v4.22.0
 
 - :rocket: Migrate to more modern `marked` instead of `showdown`
 

package/README.md

@@ -97,6 +97,7 @@ This library relies on the following core dependencies:
 - [Vue 3](https://vuejs.org/)
 - [@tabler/icons-vue](https://www.npmjs.com/package/@tabler/icons-vue)
 - [marked](https://www.npmjs.com/package/marked) (for Markdown rendering)
+- [DOMPurify](https://www.npmjs.com/package/dompurify) (for HTML sanitization)
 
 ## 📄 License
 

package/components/InlineAlert.vue

@@ -6,31 +6,33 @@
             role='alert'
         >
             <div class='alert-icon'>
-                <IconInfoCircle
-                    v-if='props.severity === "info"'
-                    :size='24'
-                    stroke='1'
-                />
-                <IconExclamationCircle
-                    v-else-if='props.severity === "danger"'
-                    :size='24'
-                    stroke='1'
-                />
-                <IconAlertTriangle
-                    v-else-if='props.severity === "warning"'
-                    :size='24'
-                    stroke='1'
-                />
-                <IconCheck
-                    v-else-if='props.severity === "success"'
-                    :size='24'
-                    stroke='1'
-                />
-                <IconQuestionMark
-                    v-else
-                    :size='24'
-                    stroke='1'
-                />
+                <slot name='icon'>
+                    <IconInfoCircle
+                        v-if='props.severity === "info"'
+                        :size='24'
+                        stroke='1'
+                    />
+                    <IconExclamationCircle
+                        v-else-if='props.severity === "danger"'
+                        :size='24'
+                        stroke='1'
+                    />
+                    <IconAlertTriangle
+                        v-else-if='props.severity === "warning"'
+                        :size='24'
+                        stroke='1'
+                    />
+                    <IconCheck
+                        v-else-if='props.severity === "success"'
+                        :size='24'
+                        stroke='1'
+                    />
+                    <IconQuestionMark
+                        v-else
+                        :size='24'
+                        stroke='1'
+                    />
+                </slot>
             </div>
 
             <div>
@@ -72,6 +74,7 @@ export interface InlineAlertProps {
 
 const props = withDefaults(defineProps<InlineAlertProps>(), {
     severity: 'info',
+    description: undefined,
     dismissable: false,
 });
 </script>

package/components/Markdown.vue

@@ -1,12 +1,15 @@
 <template>
+    <!-- eslint-disable vue/no-v-html -->
     <div
         :style='autowrap ? `white-space: pre-wrap;` : ``'
         v-html='html'
     />
+    <!-- eslint-enable vue/no-v-html -->
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import DOMPurify from 'dompurify'
 import { marked } from 'marked'
 
 export interface MarkdownProps {
@@ -18,10 +21,20 @@ const props = withDefaults(defineProps<MarkdownProps>(), {
     autowrap: true
 });
 
+function sanitizeHtml(html: string): string {
+    return DOMPurify.sanitize(html, {
+        USE_PROFILES: {
+            html: true
+        }
+    })
+}
+
 const html = computed(() => {
-    return marked.parse(props.markdown, {
+    const rendered = marked.parse(props.markdown, {
         async: false,
         gfm: true
     })
+
+    return sanitizeHtml(rendered)
 })
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "4.21.0",
+    "version": "4.24.0",
     "lib": "lib.ts",
     "main": "lib.ts",
     "module": "lib.ts",
@@ -27,6 +27,7 @@
     "homepage": "https://github.com/tak-ps/vue-tabler#readme",
     "dependencies": {
         "@tabler/icons-vue": "^3.0.0",
+        "dompurify": "^3.4.1",
         "marked": "^18.0.2"
     },
     "peerDependencies": {

package/test/Markdown.spec.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Markdown from '../components/Markdown.vue'
+
+describe('TablerMarkdown', () => {
+    it('renders markdown and basic HTML', () => {
+        const wrapper = mount(Markdown, {
+            props: {
+                markdown: '# Title\n\n<div class="note">Allowed HTML</div>'
+            }
+        })
+
+        expect(wrapper.html()).toContain('<h1>Title</h1>')
+        expect(wrapper.html()).toContain('<div class="note">Allowed HTML</div>')
+    })
+
+    it('sanitizes unsafe HTML before rendering', () => {
+        const wrapper = mount(Markdown, {
+            props: {
+                markdown: '<img src="x" onerror="alert(1)"><script>alert(2)</script><a href="javascript:alert(3)">bad</a>'
+            }
+        })
+
+        expect(wrapper.html()).toContain('<img src="x">')
+        expect(wrapper.html()).toContain('<a>bad</a>')
+        expect(wrapper.html()).not.toContain('onerror')
+        expect(wrapper.html()).not.toContain('<script>')
+        expect(wrapper.html()).not.toContain('javascript:')
+    })
+})