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

@@ -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);
   },
 };

src/filters/utils.ts

@@ -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>");
-}

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")) {

src/views/Event/ParticipantsView.vue

@@ -189,16 +189,15 @@
           <p v-else>
             {{ props.row.metadata.message }}
           </p>
-          <button
+          <o-button
-            type="button"
+            variant="primary"
-            class="button is-text"
             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";