@tak-ps/vue-tabler 4.20.0 → 4.23.1

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

@@ -9,6 +9,23 @@
 - :tada: when adding new features
 
 ## Version History
+
+### 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`
+
+### v4.20.0
+
+- :bug: Fix hover state
+
 ### v4.19.1
 
 - :bug: Fix `TablerBorder` `tools` slot not appearing on hover when scoped CSS selector matched the wrong element

package/README.md

@@ -96,7 +96,8 @@ import { TablerButton, TablerAlert } from '@tak-ps/vue-tabler';
 This library relies on the following core dependencies:
 - [Vue 3](https://vuejs.org/)
 - [@tabler/icons-vue](https://www.npmjs.com/package/@tabler/icons-vue)
-- [showdown](https://www.npmjs.com/package/showdown) (for Markdown rendering)
+- [marked](https://www.npmjs.com/package/marked) (for Markdown rendering)
+- [DOMPurify](https://www.npmjs.com/package/dompurify) (for HTML sanitization)
 
 ## 📄 License
 

package/components/Markdown.vue

@@ -1,14 +1,16 @@
 <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'
-// @ts-expect-error: showdown types not available
-import showdown from 'showdown'
+import DOMPurify from 'dompurify'
+import { marked } from 'marked'
 
 export interface MarkdownProps {
     markdown: string;
@@ -19,12 +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(() => {
-    const converter = new showdown.Converter({
-        tables: true,
-        tasklists: true,
-        emoji: true
+    const rendered = marked.parse(props.markdown, {
+        async: false,
+        gfm: true
     })
-    return converter.makeHtml(props.markdown)
+
+    return sanitizeHtml(rendered)
 })
 </script>

package/package.json

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

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:')
+    })
+})