Merge pull request #774 from Adamant-im/fix/markdown-headings-2

fix: formatting for markdown headings in chat list and notifications

Author: bludnic

src/components/AChat/AChatReplyPreview.vue

@@ -29,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 { formatMessage } from '@/lib/markdown'
+import { formatChatPreviewMessage } from '@/lib/markdown'
 import { mdiClose } from '@mdi/js'
 import type { NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
 
@@ -73,7 +73,7 @@ const cryptoTransferLabel = computed(() => {
 
 const messageLabel = computed(() => {
   return store.state.options.formatMessages
-    ? formatMessage(props.message.message)
+    ? formatChatPreviewMessage(props.message.message)
     : props.message.message
 })
 </script>

src/components/AChat/QuotedMessage.vue

@@ -43,7 +43,7 @@ import { getTransaction, decodeChat } from '@/lib/adamant-api'
 import { NormalizedChatMessageTransaction, normalizeMessage } from '@/lib/chat/helpers'
 import { Cryptos } from '@/lib/constants'
 import currencyFormatter from '@/filters/currencyAmountWithSymbol'
-import { formatMessage } from '@/lib/markdown'
+import { formatChatPreviewMessage } from '@/lib/markdown'
 import { ChatMessageTransaction } from '@/lib/schema/client/api'
 
 const className = 'quoted-message'
@@ -141,7 +141,7 @@ export default defineComponent({
       }
 
       return store.state.options.formatMessages
-        ? formatMessage(transaction.value.message)
+        ? formatChatPreviewMessage(transaction.value.message)
         : transaction.value.message
     })
 

src/components/ChatPreview.vue

@@ -109,7 +109,7 @@ import ChatAvatar from '@/components/Chat/ChatAvatar.vue'
 import Icon from '@/components/icons/BaseIcon.vue'
 import currency from '@/filters/currencyAmountWithSymbol'
 import formatDate from '@/filters/dateBrief'
-import { formatMessage } from '@/lib/markdown'
+import { formatChatPreviewMessage } from '@/lib/markdown'
 import { isAdamantChat, isWelcomeChat } from '@/lib/chat/meta/utils'
 import { NormalizedChatMessageTransaction } from '@/lib/chat/helpers'
 import { isStringEqualCI } from '@/lib/textHelpers'
@@ -196,7 +196,7 @@ const lastMessageTextLocalized = computed(() =>
 )
 const lastMessageTextNoFormats = computed(() => {
   if (isAdamantChat(contactId.value) || store.state.options.formatMessages) {
-    return formatMessage(lastMessageTextLocalized.value)
+    return formatChatPreviewMessage(lastMessageTextLocalized.value)
   }
 
   return lastMessageTextLocalized.value

src/lib/markdown.ts

@@ -67,23 +67,30 @@ export function renderMarkdown(text = '') {
  * @param {string} text text to process
  * @returns {string} resulting clear text of the first line
  */
-export function removeFormats(text = '') {
-  const node = document.createElement('div')
-  const textWithSymbol = text.replace(/\n/g, '↵ ')
-  node.innerHTML = marked.parse(sanitizeHTML(textWithSymbol), { async: false })
-
-  return node.textContent || node.innerText || ''
-}
-
-export function formatMessage(text = '') {
+export function formatMessageBasic(text = '') {
   const node = document.createElement('div')
 
   const textWithSymbol = text.replace(/\n/g, LINE_BREAK_VISUAL)
   node.innerHTML = marked.parse(sanitizeHTML(textWithSymbol), { async: false })
 
-  const textWithoutHtml = node.textContent || node.innerText || ''
+  let textWithoutHtml = node.textContent || node.innerText || ''
 
-  return textWithoutHtml
+  textWithoutHtml = textWithoutHtml
     .replace(LINE_SEPARATOR, LINE_BREAK_VISUAL)
+    .split(LINE_BREAK_VISUAL)
+    // strip all markdown heading signs (#) but only if they are at the beginning of the line 
+    .map((line) => line.replace(/^[#]+ /, ''))
+    .join(LINE_BREAK_VISUAL)
+
+  return textWithoutHtml
+}
+
+/**
+ * Formats a message for display in a chat preview
+ * @param {string} text text to process
+ * @returns {string} resulting clear text of the first line
+ */
+export function formatChatPreviewMessage(text = '') {
+  return formatMessageBasic(text)
     .replace(/↵/g, '<span class="arrow-return">↵</span>')
 }

src/lib/notifications.js

@@ -3,7 +3,7 @@
 import Notify from 'notifyjs'
 import Visibility from 'visibilityjs'
 import currency from '@/filters/currencyAmountWithSymbol'
-import { removeFormats } from '@/lib/markdown'
+import { formatMessageBasic } from '@/lib/markdown'
 import { isAdamantChat } from '@/lib/chat/meta/utils'
 
 let _this
@@ -80,7 +80,7 @@ class PushNotification extends Notification {
       message = this.lastUnread.message
     }
     const processedMessage = this.store.state.options.formatMessages
-      ? removeFormats(message)
+      ? formatMessageBasic(message)
       : message
     return `${this.partnerIdentity}: ${processedMessage}`
   }