sprintify-ui 0.12.24 → 0.12.25

package/dist/types/directives/safeHtml.d.ts

@@ -0,0 +1,4 @@
+import type { Config } from 'dompurify';
+import type { Directive } from 'vue';
+export declare const SAFE_HTML_CONFIG: Config;
+export declare const vSafeHtml: Directive<HTMLElement, string | null | undefined>;

package/dist/types/index.d.ts

@@ -6,6 +6,7 @@ import { useSystemAlertStore } from './stores/systemAlerts';
 import { useClickOutside } from './composables/clickOutside';
 import { LAYOUT_HEADER_HEIGHT_CSS_VARIABLE, useLayoutHeaderHeight } from './composables/layoutHeaderHeight';
 import { useField } from './composables/field';
+import { vSafeHtml, SAFE_HTML_CONFIG } from './directives/safeHtml';
 declare const messages: {
     en: {
         cancel: string;
@@ -274,3 +275,5 @@ export { useLayoutHeaderHeight };
 export { LAYOUT_HEADER_HEIGHT_CSS_VARIABLE };
 export { useField };
 export { SettingsStorage };
+export { vSafeHtml };
+export { SAFE_HTML_CONFIG };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.12.24",
+  "version": "0.12.25",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",
@@ -44,6 +44,7 @@
     "@tiptap/extension-subscript": "^3.20.4",
     "@tiptap/extension-superscript": "^3.20.4",
     "color2k": "^2.0.3",
+    "dompurify": "^3.4.14",
     "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {

package/src/components/BaseButton.vue

@@ -69,8 +69,8 @@
           name="tooltip"
         >
           <div
+            v-safe-html="tooltip"
             class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3 bg-slate-900 text-white"
-            v-html="tooltip"
           />
         </slot>
       </transition>
@@ -79,6 +79,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { ClassNameValue, twMerge } from 'tailwind-merge';
 import { RouteLocationRaw } from 'vue-router';
 import { BaseIcon } from '.';

package/src/components/BaseDataIteratorSectionColumns.vue

@@ -43,9 +43,9 @@
                 @change="onVisibleColumnChange($event, element.newKey)"
               >
               <div 
+                v-safe-html="element.label"
                 class="text-xs grow leading-tight"
                 :class="[element.toggle ? 'text-slate-700' : 'text-slate-400']"
-                v-html="element.label"
               >
             </div>
             </label>
@@ -57,6 +57,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { cloneDeep } from 'lodash';
 import { PropType } from 'vue';
 import BaseDataTableTemplate from './BaseDataTableTemplate.vue';

package/src/components/BaseDataTableTemplate.vue

@@ -58,12 +58,12 @@
                 @click="sort(column, undefined, $event as any)"
               >
                 <div
+                  v-safe-html="column.label"
                   class="whitespace-nowrap text-slate-600"
                   :class="{
                     'text-[12px]': size == 'sm',
                     'text-xs': size == 'md',
                   }"
-                  v-html="column.label"
                 />
                 <!-- h-4 is used to make sure the tooltip icon is always smaller than label and avoid alignment issues when icon is not present -->
                 <div
@@ -197,6 +197,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { PropType, ref } from 'vue';
 import { BaseTableColumnData, CollectionItem, Row } from '@/types';
 import SlotComponent from './SlotComponent';

package/src/components/BaseDialog.vue

@@ -47,8 +47,8 @@
           <div class="mt-2">
             <div
               v-if="html"
+              v-safe-html="message"
               class="text-slate-500 prose-sm prose-p:leading-snug prose-a:text-blue-600 prose-a:underline"
-              v-html="message"
             />
             <p
               v-else
@@ -118,6 +118,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { PropType } from 'vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { t } from '@/i18n';

package/src/components/BaseLayoutNotificationItemContent.vue

@@ -10,9 +10,9 @@
       />
       <div class="min-w-0 flex-1">
         <div
+          v-safe-html="notification.text"
           class="text-sm leading-tight"
           :class="textClasses"
-          v-html="notification.text"
         />
         <BaseDisplayRelativeTime
           v-if="notification.created_at"
@@ -32,6 +32,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { Notification } from '@/types/Notification';
 import BaseDisplayRelativeTime from './BaseDisplayRelativeTime.vue';
 

package/src/components/BaseTableHeader.vue

@@ -32,8 +32,8 @@
           name="tooltip"
         >
           <div
+            v-safe-html="tooltip"
             class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3 bg-slate-900 text-white"
-            v-html="tooltip"
           />
         </slot>
       </transition>
@@ -42,6 +42,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { useTooltip } from '@/composables/tooltip';
 import { cellClasses } from '@/services/table/classes';
 import { CellConfig, TableProps } from '@/services/table/types';

package/src/components/BaseTooltip.vue

@@ -28,11 +28,11 @@
           >
             <div class="relative filter drop-shadow-[0_1px_2px_rgba(0,0,0,0.1)]">
               <div
+                v-safe-html="text"
                 class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3"
                 :class="[
                   dark ? 'bg-slate-900 text-white' : 'bg-white text-slate-900',
                 ]"
-                v-html="text"
               />
               <div
                 ref="arrowRef"
@@ -51,6 +51,7 @@
 </template>
 
 <script lang="ts" setup>
+import { vSafeHtml } from '@/directives/safeHtml';
 import { useTooltip } from '@/composables/tooltip';
 import { unrefElement } from '@vueuse/core';
 import { UseFloatingOptions } from '@floating-ui/vue';

package/src/directives/safeHtml.ts

@@ -0,0 +1,28 @@
+import DOMPurify from 'dompurify';
+import type { Config } from 'dompurify';
+import type { Directive } from 'vue';
+
+// Must keep BaseTipTap output intact: links (href/target), images,
+// highlights (<mark style="background-color">), sub/superscript.
+export const SAFE_HTML_CONFIG: Config = {
+  USE_PROFILES: { html: true },
+  ADD_ATTR: ['target'],
+  FORBID_TAGS: ['style', 'form', 'input', 'textarea', 'select', 'button'],
+};
+
+DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+  if (node.tagName === 'A' && node.getAttribute('target') === '_blank') {
+    node.setAttribute('rel', 'noopener noreferrer');
+  }
+});
+
+export const vSafeHtml: Directive<HTMLElement, string | null | undefined> = {
+  mounted: (el, { value }) => {
+    el.innerHTML = DOMPurify.sanitize(value ?? '', SAFE_HTML_CONFIG);
+  },
+  updated: (el, { value, oldValue }) => {
+    if (value !== oldValue) {
+      el.innerHTML = DOMPurify.sanitize(value ?? '', SAFE_HTML_CONFIG);
+    }
+  },
+};

package/src/index.ts

@@ -13,6 +13,7 @@ import {
   useLayoutHeaderHeight,
 } from './composables/layoutHeaderHeight';
 import { useField } from './composables/field';
+import { vSafeHtml, SAFE_HTML_CONFIG } from './directives/safeHtml';
 
 const messages = { en, fr };
 
@@ -76,6 +77,8 @@ function install(app: App, options?: Options) {
     app.component(key, components[key]);
   }
 
+  app.directive('safe-html', vSafeHtml);
+
   if (options?.http) {
     config.http = options.http;
   }
@@ -142,3 +145,5 @@ export { useLayoutHeaderHeight };
 export { LAYOUT_HEADER_HEIGHT_CSS_VARIABLE };
 export { useField };
 export { SettingsStorage };
+export { vSafeHtml };
+export { SAFE_HTML_CONFIG };