From 2c12fbfd09d1bb501926dae8d1bd49a6cd0adb66 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 6 Dec 2023 11:18:05 +0100
Subject: [PATCH] fix(front): anonymous participant text is plain text, avoid
 using v-html

It was using v-html when opening to "view more"

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 src/filters/index.ts                 |  2 --
 src/filters/utils.ts                 |  9 ---------
 src/utils/html.ts                    |  4 ----
 src/views/Event/ParticipantsView.vue | 12 ++++++------
 4 files changed, 6 insertions(+), 21 deletions(-)
 delete mode 100644 src/filters/utils.ts

diff --git a/src/filters/index.ts b/src/filters/index.ts
index 941d69c7e..8d02384b6 100644
--- a/src/filters/index.ts
+++ b/src/filters/index.ts
@@ -1,4 +1,3 @@
-import nl2br from "@/filters/utils";
 import {
   formatDateString,
   formatTimeString,
@@ -11,6 +10,5 @@ export default {
     vue.filter("formatDateString", formatDateString);
     vue.filter("formatTimeString", formatTimeString);
     vue.filter("formatDateTimeString", formatDateTimeString);
-    vue.filter("nl2br", nl2br);
   },
 };
diff --git a/src/filters/utils.ts b/src/filters/utils.ts
deleted file mode 100644
index 58e91df6d..000000000
--- a/src/filters/utils.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * New Line to <br>
- *
- * @param {string} str Input text
- * @return {string} Filtered text
- */
-export default function nl2br(str: string): string {
-  return `${str}`.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, "$1<br>");
-}
diff --git a/src/utils/html.ts b/src/utils/html.ts
index 084970f70..02b8763b4 100644
--- a/src/utils/html.ts
+++ b/src/utils/html.ts
@@ -1,7 +1,3 @@
-export function nl2br(text: string): string {
-  return text.replace(/(?:\r\n|\r|\n)/g, "<br>");
-}
-
 export const getValueFromMeta = (name: string): string | null => {
   const element = document.querySelector(`meta[name="${name}"]`);
   if (element && element.getAttribute("content")) {
diff --git a/src/views/Event/ParticipantsView.vue b/src/views/Event/ParticipantsView.vue
index 7624f9202..e5f33aee0 100644
--- a/src/views/Event/ParticipantsView.vue
+++ b/src/views/Event/ParticipantsView.vue
@@ -189,16 +189,15 @@
           <p v-else>
             {{ props.row.metadata.message }}
           </p>
-          <button
-            type="button"
-            class="button is-text"
+          <o-button
+            variant="primary"
             v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH"
             @click.stop="toggleQueueDetails(props.row)"
           >
             {{
               openDetailedRows[props.row.id] ? t("View less") : t("View more")
             }}
-          </button>
+          </o-button>
         </div>
         <p v-else class="has-text-grey-dark">
           {{ t("No message") }}
@@ -212,7 +211,9 @@
         </span>
       </o-table-column>
       <template #detail="props">
-        <article v-html="nl2br(props.row.metadata.message)" />
+        <p>
+          {{ props.row.metadata.message }}
+        </p>
       </template>
       <template #empty>
         <EmptyContent icon="account-circle" :inline="true">
@@ -265,7 +266,6 @@ import {
   UPDATE_PARTICIPANT,
 } from "@/graphql/event";
 import { usernameWithDomain } from "@/types/actor";
-import { nl2br } from "@/utils/html";
 import { asyncForEach } from "@/utils/asyncForEach";
 import RouteName from "@/router/name";
 import { useCurrentActorClient } from "@/composition/apollo/actor";