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>
This commit is contained in:
Thomas Citharel 2023-12-06 11:18:05 +01:00
parent ffff379d47
commit 2c12fbfd09
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
4 changed files with 6 additions and 21 deletions

View file

@ -1,4 +1,3 @@
import nl2br from "@/filters/utils";
import { import {
formatDateString, formatDateString,
formatTimeString, formatTimeString,
@ -11,6 +10,5 @@ export default {
vue.filter("formatDateString", formatDateString); vue.filter("formatDateString", formatDateString);
vue.filter("formatTimeString", formatTimeString); vue.filter("formatTimeString", formatTimeString);
vue.filter("formatDateTimeString", formatDateTimeString); vue.filter("formatDateTimeString", formatDateTimeString);
vue.filter("nl2br", nl2br);
}, },
}; };

View file

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

View file

@ -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 => { export const getValueFromMeta = (name: string): string | null => {
const element = document.querySelector(`meta[name="${name}"]`); const element = document.querySelector(`meta[name="${name}"]`);
if (element && element.getAttribute("content")) { if (element && element.getAttribute("content")) {

View file

@ -189,16 +189,15 @@
<p v-else> <p v-else>
{{ props.row.metadata.message }} {{ props.row.metadata.message }}
</p> </p>
<button <o-button
type="button" variant="primary"
class="button is-text"
v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH" v-if="props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH"
@click.stop="toggleQueueDetails(props.row)" @click.stop="toggleQueueDetails(props.row)"
> >
{{ {{
openDetailedRows[props.row.id] ? t("View less") : t("View more") openDetailedRows[props.row.id] ? t("View less") : t("View more")
}} }}
</button> </o-button>
</div> </div>
<p v-else class="has-text-grey-dark"> <p v-else class="has-text-grey-dark">
{{ t("No message") }} {{ t("No message") }}
@ -212,7 +211,9 @@
</span> </span>
</o-table-column> </o-table-column>
<template #detail="props"> <template #detail="props">
<article v-html="nl2br(props.row.metadata.message)" /> <p>
{{ props.row.metadata.message }}
</p>
</template> </template>
<template #empty> <template #empty>
<EmptyContent icon="account-circle" :inline="true"> <EmptyContent icon="account-circle" :inline="true">
@ -265,7 +266,6 @@ import {
UPDATE_PARTICIPANT, UPDATE_PARTICIPANT,
} from "@/graphql/event"; } from "@/graphql/event";
import { usernameWithDomain } from "@/types/actor"; import { usernameWithDomain } from "@/types/actor";
import { nl2br } from "@/utils/html";
import { asyncForEach } from "@/utils/asyncForEach"; import { asyncForEach } from "@/utils/asyncForEach";
import RouteName from "@/router/name"; import RouteName from "@/router/name";
import { useCurrentActorClient } from "@/composition/apollo/actor"; import { useCurrentActorClient } from "@/composition/apollo/actor";