From 3e2c31eaa71a06e9ce895666a7d28f3604e861b7 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Sat, 16 Mar 2024 22:41:13 -0700
Subject: [PATCH] Remove v-html

---
 app/common/util.mjs                               |  4 ----
 app/social/generators/ChallengeStatus.mjs         |  2 +-
 src/common/util.mjs                               |  3 +++
 src/components/challenge/ChallengeScheduleBox.vue | 15 +++++++--------
 4 files changed, 11 insertions(+), 13 deletions(-)
 create mode 100644 src/common/util.mjs

diff --git a/app/common/util.mjs b/app/common/util.mjs
index 330a397..1cb30f6 100644
--- a/app/common/util.mjs
+++ b/app/common/util.mjs
@@ -27,10 +27,6 @@ export function getDateParts(date = null) {
   };
 }
 
-export function br2nl(str, replace = '\n') {
-  return str.replace(/<br\s*\/?>/gi, replace);
-}
-
 export function getGearIcon(gear) {
   switch (gear.gear.__typename) {
     case 'HeadGear': return '🧢';
diff --git a/app/social/generators/ChallengeStatus.mjs b/app/social/generators/ChallengeStatus.mjs
index 9d4367e..12369e3 100644
--- a/app/social/generators/ChallengeStatus.mjs
+++ b/app/social/generators/ChallengeStatus.mjs
@@ -1,7 +1,7 @@
 import StatusGenerator from "./StatusGenerator.mjs";
 import Media from "../Media.mjs";
 import { useEventSchedulesStore } from "../../../src/stores/schedules.mjs";
-import { br2nl } from "../../common/util.mjs";
+import { br2nl } from "../../../src/common/util.mjs";
 import ScreenshotHelper from "../../screenshots/ScreenshotHelper.mjs";
 export default class ChallengeStatus extends StatusGenerator
 {
diff --git a/src/common/util.mjs b/src/common/util.mjs
new file mode 100644
index 0000000..df0a464
--- /dev/null
+++ b/src/common/util.mjs
@@ -0,0 +1,3 @@
+export function br2nl(str, replace = '\n') {
+  return str.replace(/<br\s*\/?>/gi, replace);
+}
diff --git a/src/components/challenge/ChallengeScheduleBox.vue b/src/components/challenge/ChallengeScheduleBox.vue
index c0a1139..2027d1e 100644
--- a/src/components/challenge/ChallengeScheduleBox.vue
+++ b/src/components/challenge/ChallengeScheduleBox.vue
@@ -7,10 +7,9 @@
           <div class="font-splatoon1 lg:text-2xl xl:text-3xl text-shadow">
             {{ $t(`splatnet.events.${event.settings.leagueMatchEvent.id}.name`, event.settings.leagueMatchEvent.name) }}
 
-            <div
-              class="font-splatoon2 lg:text-md xl:text-xl text-shadow"
-              v-html="$t(`splatnet.events.${event.settings.leagueMatchEvent.id}.desc`, event.settings.leagueMatchEvent.desc)"
-            />
+            <div class="font-splatoon2 lg:text-md xl:text-xl text-shadow whitespace-pre-line">
+              {{ br2nl($t(`splatnet.events.${event.settings.leagueMatchEvent.id}.desc`, event.settings.leagueMatchEvent.desc)) }}
+            </div>
           </div>
         </div>
 
@@ -82,10 +81,9 @@
           </div>
         </div>
 
-        <div
-          class="font-splatoon2 mx-2 p-2 text-zinc-200 bg-zinc-900 bg-opacity-50 backdrop-blur-sm rounded-lg"
-          v-html="$t(`splatnet.events.${event.settings.leagueMatchEvent.id}.regulation`, event.settings.leagueMatchEvent.regulation)"
-        />
+        <div class="font-splatoon2 mx-2 p-2 text-zinc-200 bg-zinc-900 bg-opacity-50 backdrop-blur-sm rounded-lg whitespace-pre-line">
+          {{ br2nl($t(`splatnet.events.${event.settings.leagueMatchEvent.id}.regulation`, event.settings.leagueMatchEvent.regulation)) }}
+        </div>
       </div>
     </ProductContainer>
   </template>
@@ -99,6 +97,7 @@ import RuleIcon from '../RuleIcon.vue';
 import SquidTape from '../SquidTape.vue';
 import { useScheduleTypes } from '../concerns/scheduleTypes.mjs';
 import ChallengeScheduleRow from './ChallengeScheduleRow.vue';
+import { br2nl } from '../../common/util.mjs';
 
 const props = defineProps({
   type: {