Update Confirm component to support allowHtml prompt option

client/components/app/Appbar.vue

@@ -196,6 +196,7 @@ export default {
     requestBatchQuickEmbed() {
       const payload = {
         message: this.$strings.MessageConfirmQuickEmbed,
+        allowHtml: true,
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios

client/components/modals/item/tabs/Tools.vue

@@ -107,6 +107,7 @@ export default {
     quickEmbed() {
       const payload = {
         message: this.$strings.MessageConfirmQuickEmbed,
+        allowHtml: true,
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios

client/components/prompt/Confirm.vue

@@ -3,7 +3,8 @@
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-linear-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
     <div ref="content" class="relative text-white" :style="{ height: modalHeight, width: modalWidth }" v-click-outside="clickedOutside">
       <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
-        <p id="confirm-prompt-message" class="text-lg mb-6 mt-2 px-1" v-html="message" />
+        <p v-if="allowHtmlMessage" id="confirm-prompt-message" class="text-lg mb-6 mt-2 px-1" v-html="sanitizedMessage" />
+        <p v-else id="confirm-prompt-message" class="text-lg mb-6 mt-2 px-1">{{ message }}</p>
 
         <ui-checkbox v-if="checkboxLabel" v-model="checkboxValue" checkbox-bg="bg" :label="checkboxLabel" label-class="pl-2 text-base" class="mb-6 px-1" />
 
@@ -52,6 +53,17 @@ export default {
     message() {
       return this.confirmPromptOptions.message || ''
     },
+    allowHtmlMessage() {
+      return !!this.confirmPromptOptions.allowHtml
+    },
+    sanitizedMessage() {
+      if (!this.allowHtmlMessage) return this.message
+
+      return this.escapeHtml(this.message)
+        .replace(/&lt;br\s*\/?&gt;/gi, '<br>')
+        .replace(/&lt;code&gt;/gi, '<code>')
+        .replace(/&lt;\/code&gt;/gi, '</code>')
+    },
     callback() {
       return this.confirmPromptOptions.callback
     },
@@ -103,6 +115,14 @@ export default {
       if (this.callback) this.callback(true, this.checkboxValue)
       this.show = false
     },
+    escapeHtml(value) {
+      return String(value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+    },
     setShow() {
       this.checkboxValue = this.checkboxDefaultValue
       this.$eventBus.$emit('showing-prompt', true)

client/pages/config/index.vue

@@ -390,8 +390,8 @@ export default {
     },
     purgeItemsCache() {
       const payload = {
-        // message: `This will delete the entire folder at <code>/metadata/cache/items</code>.<br />Are you sure you want to purge items cache?`,
         message: this.$strings.MessageConfirmPurgeItemsCache,
+        allowHtml: true,
         callback: (confirmed) => {
           if (confirmed) {
             this.sendPurgeItemsCache()

client/pages/config/item-metadata-utils/genres.vue

@@ -90,9 +90,9 @@ export default {
 
       let message = this.$getString('MessageConfirmRenameGenre', [this.editingGenre, this.newGenreName])
       if (genreNameExists) {
-        message += `<br><span class="text-sm">${this.$strings.MessageConfirmRenameGenreMergeNote}</span>`
+        message += ` ${this.$strings.MessageConfirmRenameGenreMergeNote}`
       } else if (genreNameExistsOfDifferentCase) {
-        message += `<br><span class="text-warning text-sm">${this.$getString('MessageConfirmRenameGenreWarning', [genreNameExistsOfDifferentCase])}</span>`
+        message += ` ${this.$getString('MessageConfirmRenameGenreWarning', [genreNameExistsOfDifferentCase])}`
       }
 
       const payload = {

client/pages/config/item-metadata-utils/tags.vue

@@ -86,9 +86,9 @@ export default {
 
       let message = this.$getString('MessageConfirmRenameTag', [this.editingTag, this.newTagName])
       if (tagNameExists) {
-        message += `<br><span class="text-sm">${this.$strings.MessageConfirmRenameTagMergeNote}</span>`
+        message += ` ${this.$strings.MessageConfirmRenameTagMergeNote}`
       } else if (tagNameExistsOfDifferentCase) {
-        message += `<br><span class="text-warning text-sm">${this.$getString('MessageConfirmRenameTagWarning', [tagNameExistsOfDifferentCase])}</span>`
+        message += ` ${this.$getString('MessageConfirmRenameTagWarning', [tagNameExistsOfDifferentCase])}`
       }
 
       const payload = {