Fix: correctly handle linebreaks and markdown in translation strings

.eslintrc.cjs

@@ -28,6 +28,7 @@ module.exports = {
       },
     ],
     'vue/multi-word-component-names': 'off',
+    'vue/no-v-text-v-html-on-component': 'off',
     'vue/attribute-hyphenation': ['error', 'always', {ignore: ['onLoad']}],
     'no-unused-vars': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',

src/components/InfoHeader.vue

@@ -386,7 +386,7 @@ import MediaItemThumb from "./MediaItemThumb.vue";
 import MenuButton from "./MenuButton.vue";
 import { getImageThumbForItem } from "./MediaItemThumb.vue";
 import { useRouter } from "vue-router";
-import { truncateString, parseBool } from "@/helpers/utils";
+import { truncateString, parseBool, markdownToHtml } from "@/helpers/utils";
 import {
   getContextMenuItems,
   getPlayMenuItems,
@@ -485,18 +485,15 @@ const rawDescription = computed(() => {
 });
 
 const fullDescription = computed(() => {
-  return rawDescription.value.replace(/(\r\n|\n|\r)/gm, "<br /><br />");
+  return markdownToHtml(rawDescription.value);
 });
+
 const shortDescription = computed(() => {
   const maxChars = mobile.value ? 160 : 300;
   if (rawDescription.value.length > maxChars) {
-    return (
-      rawDescription.value
-        .replace(/(\r\n|\n|\r)/gm, " ")
-        .substring(0, maxChars) + "..."
-    );
+    return fullDescription.value.substring(0, maxChars) + "...";
   }
-  return rawDescription.value.replace(/(\r\n|\n|\r)/gm, " ");
+  return fullDescription.value;
 });
 
 const artistLogo = computed(() => {

src/helpers/utils.ts

@@ -9,6 +9,7 @@ import {
 } from "@/plugins/api/interfaces";
 import { getBreakpointValue } from "@/plugins/breakpoint";
 import { api } from "@/plugins/api";
+import { marked } from "marked";
 
 import Color from "color";
 //@ts-ignore
@@ -491,3 +492,11 @@ export function isTouchscreenDevice() {
   }
   return result;
 }
+
+export const markdownToHtml = function (text: string): string {
+  text = text
+    .replaceAll(/\\n/g, "<br />")
+    .replaceAll("\n", "<br />")
+    .replaceAll(" \\", "<br />");
+  return marked(text) as string;
+};

src/views/settings/AddPlayerGroup.vue

@@ -6,9 +6,10 @@
         <v-card-title>
           {{ $t("settings.add_group_player") }}
         </v-card-title>
-        <v-card-subtitle style="white-space: break-spaces">
-          {{ $t("settings.add_group_player_desc") }}
-        </v-card-subtitle>
+        <v-card-subtitle
+          style="white-space: break-spaces"
+          v-html="markdownToHtml($t('settings.add_group_player_desc'))"
+        />
         <br />
         <v-divider />
         <br />
@@ -84,6 +85,7 @@ import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
 import { api } from "@/plugins/api";
 import { ProviderFeature } from "@/plugins/api/interfaces";
+import { markdownToHtml } from "@/helpers/utils";
 
 // global refs
 const router = useRouter();

src/views/settings/AddProvider.vue

@@ -11,14 +11,17 @@
             $t("settings.setup_provider", [api.providerManifests[domain].name])
           }}
         </v-card-title>
-        <v-card-subtitle>
-          {{ api.providerManifests[domain].description }} </v-card-subtitle
-        ><br />
-        <v-card-subtitle v-if="api.providerManifests[domain].codeowners.length">
-          <b>{{ $t("settings.codeowners") }}: </b
-          >{{ api.providerManifests[domain].codeowners.join(" / ") }}
-        </v-card-subtitle>
-
+        <v-card-subtitle
+          v-html="markdownToHtml(api.providerManifests[domain].description)"
+        /><br />
+        <v-card-subtitle
+          v-if="api.providerManifests[domain].codeowners.length"
+          v-html="
+            markdownToHtml(
+              getAuthorsMarkdown(api.providerManifests[domain].codeowners),
+            )
+          "
+        />
         <v-card-subtitle v-if="api.providerManifests[domain].documentation">
           <b>{{ $t("settings.need_help_setup_provider") }} </b>&nbsp;
           <a
@@ -76,7 +79,8 @@ import {
 } from "@/plugins/api/interfaces";
 import EditConfig from "./EditConfig.vue";
 import { watch } from "vue";
-import { openLinkInNewTab } from "@/helpers/utils";
+import { openLinkInNewTab, markdownToHtml } from "@/helpers/utils";
+import { useI18n } from "vue-i18n";
 
 // global refs
 const router = useRouter();
@@ -176,6 +180,21 @@ const onAction = async function (
       showAuthLink.value = false;
     });
 };
+
+const getAuthorsMarkdown = function (authors: string[]) {
+  const allAuthors: string[] = [];
+  const { t } = useI18n();
+  for (const author of authors) {
+    if (author.includes("@")) {
+      allAuthors.push(
+        `[${author.replace("@", "")}](https://github.com/${author.replace("@", "")})`,
+      );
+    } else {
+      allAuthors.push(author);
+    }
+  }
+  return `**${t("settings.codeowners")}**: ` + allAuthors.join(" / ");
+};
 </script>
 
 <style scoped></style>

src/views/settings/EditConfig.vue

@@ -364,9 +364,9 @@ import {
   ConfigEntry,
   ConfigValueOption,
 } from "@/plugins/api/interfaces";
+import { markdownToHtml } from "@/helpers/utils";
 import { $t } from "@/plugins/i18n";
 const router = useRouter();
-import { marked } from "marked";
 
 export interface Props {
   configEntries: ConfigEntry[];
@@ -533,15 +533,6 @@ const getTranslatedOptions = function (entry: ConfigEntry) {
   return options;
 };
 
-const markdownToHtml = function (text: string) {
-  // text = text.replaceAll(/\\n\\n/g, "<br /><br />").replace(/\\n/g, "<br /> ");
-  text = text
-    .replaceAll(/\\n/g, "<br />")
-    .replaceAll("\n", "<br />")
-    .replaceAll(" \\", "<br />");
-  return marked(text);
-};
-
 const hasDescriptionOrHelpLink = function (conf_entry: ConfigEntry) {
   // overly complicated way to determine we have a description for the entry
   // in either the translations (by entry key), on the entry itself as fallback

src/views/settings/EditProvider.vue

@@ -17,10 +17,14 @@
         ><br />
         <v-card-subtitle
           v-if="api.providerManifests[config.domain].codeowners.length"
-        >
-          <b>{{ $t("settings.codeowners") }}: </b
-          >{{ api.providerManifests[config.domain].codeowners.join(" / ") }}
-        </v-card-subtitle>
+          v-html="
+            markdownToHtml(
+              getAuthorsMarkdown(
+                api.providerManifests[config.domain].codeowners,
+              ),
+            )
+          "
+        />
 
         <v-card-subtitle
           v-if="api.providerManifests[config.domain].documentation"
@@ -102,7 +106,8 @@ import {
 } from "@/plugins/api/interfaces";
 import EditConfig from "./EditConfig.vue";
 import { nanoid } from "nanoid";
-import { openLinkInNewTab } from "@/helpers/utils";
+import { openLinkInNewTab, markdownToHtml } from "@/helpers/utils";
+import { useI18n } from "vue-i18n";
 
 // global refs
 const router = useRouter();
@@ -203,4 +208,19 @@ const onAction = async function (
       showAuthLink.value = false;
     });
 };
+
+const getAuthorsMarkdown = function (authors: string[]) {
+  const allAuthors: string[] = [];
+  const { t } = useI18n();
+  for (const author of authors) {
+    if (author.includes("@")) {
+      allAuthors.push(
+        `[${author.replace("@", "")}](https://github.com/${author.replace("@", "")})`,
+      );
+    } else {
+      allAuthors.push(author);
+    }
+  }
+  return `**${t("settings.codeowners")}**: ` + allAuthors.join(" / ");
+};
 </script>