feat: multi line sumbol

src/assets/styles/app.scss

@@ -10,5 +10,6 @@
 
 @import './components/_chat.scss';
 @import './components/_login-form.scss';
+@import './components/_arrow-return.scss';
 
 @import './themes/adamant/_index.scss';

src/assets/styles/components/_arrow-return.scss

@@ -0,0 +1,16 @@
+@import '../themes/adamant/_mixins.scss';
+
+.arrow-return {
+  @include a-text-explanation();
+}
+
+.v-theme--light {
+  .arrow-return {
+    opacity: 0.7;
+  }
+}
+.v-theme--dark {
+  .arrow-return {
+    opacity: 0.6;
+  }
+}

src/components/AChat/AChatReplyPreview.vue

@@ -6,7 +6,8 @@
       </div>
 
       <div :class="classes.message">
-        {{ isCryptoTransfer ? cryptoTransferLabel : messageLabel }}
+        <span v-if="!isCryptoTransfer" v-html="messageLabel"></span>
+        <span v-else>{{ cryptoTransferLabel }}</span>
       </div>
 
       <v-btn
@@ -28,7 +29,7 @@ import { useStore } from 'vuex'
 import ChatAvatar from '@/components/Chat/ChatAvatar.vue'
 import { Cryptos } from '@/lib/constants'
 import currencyFormatter from '@/filters/currencyAmountWithSymbol'
-import { removeFormats } from '@/lib/markdown'
+import { formatMessage } from '@/lib/markdown'
 
 const className = 'a-chat-reply-preview'
 const classes = {
@@ -77,7 +78,7 @@ export default defineComponent({
 
     const messageLabel = computed(() => {
       return store.state.options.formatMessages
-        ? removeFormats(props.message.message)
+        ? formatMessage(props.message.message)
         : props.message.message
     })
 

src/components/AChat/QuotedMessage.vue

@@ -20,7 +20,7 @@
         {{ cryptoTransferLabel }}
       </span>
       <span v-else>
-        {{ messageLabel }}
+        <span v-html="messageLabel"></span>
       </span>
     </div>
   </div>
@@ -35,7 +35,7 @@ import { getTransaction, decodeChat } from '@/lib/adamant-api'
 import { normalizeMessage } from '@/lib/chat/helpers'
 import { Cryptos } from '@/lib/constants'
 import currencyFormatter from '@/filters/currencyAmountWithSymbol'
-import { removeFormats } from '@/lib/markdown'
+import { formatMessage } from '@/lib/markdown'
 
 const className = 'quoted-message'
 const classes = {
@@ -124,7 +124,7 @@ export default defineComponent({
 
     const messageLabel = computed(() => {
       return store.state.options.formatMessages
-        ? removeFormats(transaction.value.message)
+        ? formatMessage(transaction.value.message)
         : transaction.value.message
     })
 

src/components/ChatPreview.vue

@@ -71,15 +71,15 @@
             <v-icon v-else :icon="statusIcon" size="15" />
           </template>
 
-          {{ lastMessageTextNoFormats }}
+          <span v-html="lastMessageTextNoFormats"></span>
         </v-list-item-subtitle>
       </template>
     </div>
   </v-list-item>
 </template>
 
 <script>
-import { removeFormats } from '@/lib/markdown'
+import { formatMessage } from '@/lib/markdown'
 
 import transaction from '@/mixins/transaction'
 import formatDate from '@/filters/dateBrief'
@@ -183,7 +183,7 @@ export default {
     },
     lastMessageTextNoFormats() {
       if (this.isAdamantChat(this.contactId) || this.$store.state.options.formatMessages) {
-        return removeFormats(this.lastMessageTextLocalized)
+        return formatMessage(this.lastMessageTextLocalized)
       }
 
       return this.lastMessageTextLocalized

src/lib/markdown.js

@@ -57,7 +57,18 @@ export function renderMarkdown(text = '') {
  */
 export function removeFormats(text = '') {
   const node = document.createElement('div')
-  node.innerHTML = marked(DOMPurify.sanitize(text), { renderer })
+  const textWithSumbol = text.replace(/\n/g, '↵ ')
+  node.innerHTML = marked(DOMPurify.sanitize(textWithSumbol), { renderer })
 
   return node.textContent || node.innerText || ''
 }
+
+export function formatMessage(text = '') {
+  const node = document.createElement('div')
+  const textWithSumbol = text.replace(/\n/g, '↵ ')
+  node.innerHTML = marked(DOMPurify.sanitize(textWithSumbol), { renderer })
+
+  const textWithoutHtml = node.textContent || node.innerText || ''
+  const styledText = textWithoutHtml.replace(/↵/g, '<span class="arrow-return">↵</span>')
+  return styledText
+}