feat: APPS-3671 add dompurify for safe v-html usage (#883)

* feat: add dom purify

* fix: test

---------

Co-authored-by: Jess Divers <jessica.divers@library.ucla.edu>

Author: farosFreed

packages/component-library-nuxt-module/playground/nuxt.config.ts

@@ -1,5 +1,8 @@
 export default defineNuxtConfig({
-  modules: ['../src/module'],
+  modules: [
+    '@radya/nuxt-dompurify',
+    '../src/module',
+  ],
   devtools: { enabled: true },
   compatibilityDate: '2025-02-07',
   uclaLibraryWebsiteComponents: {},

packages/vue-component-library/package.json

@@ -53,6 +53,7 @@
     "@antfu/eslint-config": "^0.43.1",
     "@percy/cli": "^1.31.1",
     "@percy/cypress": "^3.1.2",
+    "@radya/nuxt-dompurify": "^1.0.5",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-essentials": "^7.1.1",

packages/vue-component-library/src/lib-components/RichText.vue

@@ -33,7 +33,7 @@ const parsedContent = computed(() => {
   <div :class="classes">
     <div
       class="parsed-content"
-      v-html="parsedContent"
+      v-sanitize-html="parsedContent"
     />
     <slot />
   </div>

packages/vue-component-library/src/stories/BentoBoxBlock.spec.js

@@ -2,6 +2,7 @@ describe('BentoBoxBlock Storybook', () => {
   it('Default', () => {
     cy.visit('/iframe.html?id=funkhaus-bento-box-block--default&viewMode=story')
     cy.get('.bento-box-block').should('exist')
-    cy.contains('Default Bento Block')
+
+    cy.percySnapshot('FUNKHAUS / Bento Box Block: Default')
   })
 })