fix(vue): use isomorphic-dompurify

Author: mohdashraf010897

packages/vue/examples/search-box-custom-suggestions/src/App.vue

@@ -23,8 +23,8 @@
           <ul v-if="isOpen">
             <li
               v-for="suggestion in (suggestions || []).map(s => ({
-                label: s.source.authors,
-                value: s.source.authors,
+                label: s.source && s.source.authors,
+                value: s.source && s.source.authors,
                 key: s._id,
               }))"
               v-bind="getItemProps({ item: suggestion })"
@@ -47,13 +47,13 @@
         class="result-list-container"
       >
         <template #renderItem="{ item }">
-          <div 
-            :id="item._id" 
-            :key="item._id" 
+          <div
+            :id="item._id"
+            :key="item._id"
             class="flex book-content">
-            <img 
-              :src="item.image" 
-              alt="Book Cover" 
+            <img
+              :src="item.image"
+              alt="Book Cover"
               class="book-image" >
             <div class="flex column justify-center ml20">
               <div class="book-header">{{ item.original_title }}</div>
@@ -72,13 +72,13 @@
                         class="fas fa-star"
                       />
                     </span>
-                    <span 
+                    <span
                       class="avg-rating"
                     >({{ item.average_rating }} avg)</span
                     >
                   </div>
                 </div>
-                <span 
+                <span
                   class="pub-year"
                 >Pub {{ item.original_publication_year }}</span
                 >

packages/vue/package.json

@@ -54,7 +54,7 @@
 		"vue-no-ssr": "^1.1.0",
 		"vue-slider-component": "next",
 		"vue-types": "^5.0.2",
-		"xss": "^1.0.11"
+		"isomorphic-dompurify": "^1.12.0"
 	},
 	"peerDependencies": {
 		"vue": "^3.1.0"

packages/vue/src/components/search/SearchBox.jsx

@@ -2,7 +2,7 @@
 import { Actions, helper, causes } from '@appbaseio/reactivecore';
 import VueTypes from 'vue-types';
 import hotkeys from 'hotkeys-js';
-import xss from 'xss';
+import { sanitize } from 'isomorphic-dompurify';
 import { Remarkable } from 'remarkable';
 import {
 	AI_LOCAL_CACHE_KEY,
@@ -216,7 +216,7 @@ const SearchBox = defineComponent({
 							if (typeof renderItem === 'function') {
 								const jsxEl = renderItem(newSuggestion);
 								const innerValue = innerText(jsxEl);
-								newSuggestion.value = xss(innerValue);
+								newSuggestion.value = sanitize(innerValue);
 							}
 							return newSuggestion;
 						}
@@ -1701,7 +1701,7 @@ const SearchBox = defineComponent({
 													return () => (
 														<div
 															style={{ display: 'flex' }}
-															innerHTML={xss(item.icon)}
+															innerHTML={sanitize(item.icon)}
 														/>
 													);
 												}
@@ -1710,7 +1710,7 @@ const SearchBox = defineComponent({
 														// When you change below also change the empty icon below
 														<img
 															style={{ maxWidth: '30px' }}
-															src={xss(item.iconURL)}
+															src={sanitize(item.iconURL)}
 															alt={item.value}
 														/>
 													);
@@ -1770,7 +1770,7 @@ const SearchBox = defineComponent({
 																const index
 																	= indexOffset + itemIndex;
 																if (Array.isArray(item)) {
-																	const sectionHtml = xss(
+																	const sectionHtml = sanitize(
 																		item[0].sectionLabel,
 																	);
 																	indexOffset += item.length - 1;