Fix: Mobile - Add markup to some translations

app/frontend/apps/mobile/components/CommonLoader/CommonLoader.vue

@@ -1,6 +1,10 @@
 <!-- Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
+/* eslint-disable vue/no-v-html */
+
+import { markup } from '@shared/utils/markup'
+
 interface Props {
   loading?: boolean
   error?: string
@@ -37,7 +41,7 @@ export default {
     class="flex items-center justify-center gap-2 text-base text-red"
   >
     <CommonIcon name="close-small" />
-    <span>{{ $t(error) }}</span>
+    <span v-html="markup($t(error))" />
   </div>
   <slot v-else />
 </template>

app/frontend/shared/components/CommonNotifications/CommonNotifications.vue

@@ -1,8 +1,11 @@
 <!-- Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
+/* eslint-disable vue/no-v-html */
+
 import useNotifications from '@shared/components/CommonNotifications/composable'
 import type { Notification } from '@shared/components/CommonNotifications/types'
+import { markup } from '@shared/utils/markup'
 
 const notificationTypeClassMap = {
   warn: 'bg-yellow text-white',
@@ -51,14 +54,17 @@ const clickHandler = (notification: Notification) => {
               @click="clickHandler(notification)"
             >
               <CommonIcon :name="iconNameMap[notification.type]" size="small" />
-              <span class="text-sm ltr:ml-2 rtl:mr-2">{{
-                notification.messagePlaceholder
-                  ? i18n.t(
+              <span
+                class="text-sm ltr:ml-2 rtl:mr-2"
+                v-html="
+                  markup(
+                    $t(
                       notification.message,
-                      ...notification.messagePlaceholder,
-                    )
-                  : i18n.t(notification.message)
-              }}</span>
+                      ...(notification.messagePlaceholder || []),
+                    ),
+                  )
+                "
+              />
             </div>
           </div>
         </div>

app/frontend/shared/utils/__tests__/markup.spec.ts

@@ -0,0 +1,14 @@
+// Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/
+
+import { markup } from '../markup'
+
+it('markup creates correct html', () => {
+  expect(markup('||italic||')).toBe('<i>italic</i>')
+  expect(markup('|bold|')).toBe('<b>bold</b>')
+  expect(markup('_underline_')).toBe('<u>underline</u>')
+  expect(markup('//strikethrough//')).toBe('<del>strikethrough</del>')
+  expect(markup('§keyboard§')).toBe('<kbd>keyboard</kbd>')
+  expect(markup('[link](https://zammad.org)')).toBe(
+    '<a href="https://zammad.org" target="_blank">link</a>',
+  )
+})

app/frontend/shared/utils/markup.ts

@@ -0,0 +1,12 @@
+// Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/
+
+// to be compatible with app/assets/javascripts/app/lib/app_post/i18n.coffee:267
+export const markup = (source: string): string => {
+  return source
+    .replace(/\|\|(.+?)\|\|/gm, '<i>$1</i>')
+    .replace(/\|(.+?)\|/gm, '<b>$1</b>')
+    .replace(/_(.+?)_/gm, '<u>$1</u>')
+    .replace(/\/\/(.+?)\/\//gm, '<del>$1</del>')
+    .replace(/§(.+?)§/gm, '<kbd>$1</kbd>')
+    .replace(/\[(.+?)\]\((.+?)\)/gm, '<a href="$2" target="_blank">$1</a>')
+}