#2512 - Fix a couple of chat regressions

frontend/views/containers/chatroom/chat-mentions/RenderMessageText.vue

@@ -89,8 +89,9 @@ export default ({
     generateTextObjectsFromText (text) {
       const containsMentionChar = str => new RegExp(`[${CHATROOM_MEMBER_MENTION_SPECIAL_CHAR}${CHATROOM_CHANNEL_MENTION_SPECIAL_CHAR}]`, 'g').test(text)
       const wrapEmojis = str => {
+        const emojiRegex = /(\p{Emoji_Presentation}|\p{Emoji}\uFE0F|[\u2615-\u27BF]|\u200D)/gu
         // We should be able to style the emojis in message-text (reference issue: https://github.com/okTurtles/group-income/issues/2464)
-        return str.replace(/(\p{Emoji})/gu, '<span class="chat-emoji">$1</span>')
+        return str.replace(emojiRegex, '<span class="chat-emoji">$1</span>')
       }
 
       if (!text) { return [] }

frontend/views/containers/chatroom/chat-mentions/RenderMessageWithMarkdown.js

@@ -21,7 +21,6 @@ const RenderMessageWithMarkdown: any = {
   render: function (createElement: any): any {
     const { text, edited = false, isReplyingMessage = false } = this.$props
     const domTree = htmlStringToDomObjectTree(renderMarkdown(text))
-
     // Turns a dom tree object structure into the equivalent recursive createElement(...) call structure.
     const recursiveCall = (entry: any): any => {
       if (entry.tagName) {

frontend/views/containers/chatroom/chat-mentions/chat-mentions-utils.js

@@ -25,6 +25,10 @@ export function htmlStringToDomObjectTree (htmlString: string): Array<DomObject>
   return createRecursiveDomObjects(rootNode)?.children || []
 }
 
+function isOnlyNewlines (str: any): boolean {
+  return /^[\n]*$/.test(str)
+}
+
 function createRecursiveDomObjects (element: any): DomObject {
   /*
     This function takes the virtual DOM tree generated as a reult of calling the DOMParser method,
@@ -61,7 +65,6 @@ function createRecursiveDomObjects (element: any): DomObject {
 
   const isNodeTypeText = element?.nodeType === Node.TEXT_NODE
   const isNodeCodeElement = element?.nodeName === 'CODE' // <code> ... </code> element needs a special treatment in the chat.
-  const isBodyElement = element?.nodeName === 'BODY'
 
   const nodeObj: DomObject = isNodeTypeText
     ? { tagName: null, attributes: {}, text: element.textContent }
@@ -90,11 +93,7 @@ function createRecursiveDomObjects (element: any): DomObject {
 
     nodeObj.children = nodeObj.children.filter(child => {
       if (child.tagName) return true
-      else {
-        return isBodyElement
-          ? child.text !== '\n' // DOMParser.parseFromString() adds a '\n' at the end of the body content which needs to be removed.
-          : (child.text || '').length
-      }
+      else return Boolean(child.text?.length) && !isOnlyNewlines(child.text)
     })
   }
 

frontend/views/utils/markdown-utils.js

@@ -40,25 +40,23 @@ export function renderMarkdown (str: string): any {
       entryText = entryText.replace(/</g, '&lt;')
         .replace(/(?<!(^|\n))>/g, '&gt;') // Replace all '>' with '&gt;' except for the ones that are not preceded by a line-break or start of the string (e.g. '> asdf' is a blockquote).
 
-      entryText = entryText.replace(/\n(?=\n)/g, '\n<br>')
-        .replace(/<br>\n(\s*)(>|\d+\.|-)/g, '\n\n$1$2') // [1] custom-handling the case where <br> is directly followed by the start of ordered/unordered lists
-        .replace(/(>|\d+\.|-)(\s.+)\n<br>/g, '$1$2\n\n') // [2] this is a custom-logic added so that the end of ordered/un-ordered lists are correctly detected by markedjs.
-        .replace(/(>)(\s.+)\n<br>/gs, '$1$2\n\n') // [3] this is a custom-logic added so that the end of blockquotes are correctly detected by markedjs. ('s' flag is needed to account for multi-line strings)
-
+      // GI needs to keep the line-breaks in the markdown but the markedjs with 'gfm' option doesn't fully support it.
+      // So we need to manually add <br/> tags here before passing it to markedjs.
+      // (Reference: https://github.com/markedjs/marked/issues/190#issuecomment-865303317)
+      entryText = entryText.replace(/\n(?=\n)/g, '\n\n<br/>\n')
       entry.text = entryText
     }
   })
 
   str = combineMarkdownSegmentListIntoString(strSplitByCodeMarkdown)
-  str = str.replace(/(\d+\.|-)(\s.+)\n<br>/g, '$1$2\n\n')
-    .replace(/(>)(\s.+)\n<br>/gs, '$1$2\n\n') // Check for [2], [3] above once more to resolve edge-cases (reference: https://github.com/okTurtles/group-income/issues/2356)
 
   // STEP 2. convert the markdown into html DOM string.
   let converted = marked.parse(str, { gfm: true })
 
   // STEP 3. Remove the unecessary starting/end line-breaks added in/outside of the converted html tags.
   converted = converted.replace(/<([a-z]+)>\n/g, '<$1>')
     .replace(/\n<\/([a-z]+)>/g, '</$1>')
+
   return converted
 }
 
@@ -159,7 +157,7 @@ export function splitStringByMarkdownCode (
   // (e.g. `asdf`, ```const var = 123```)
 
   const regExCodeMultiple = /(```\n[\s\S]*?```$)/gm // Detecting multi-line code-block by reg-exp - reference: https://regexr.com/4h9sh
-  const regExCodeInline = /(`.+`)/g
+  const regExCodeInline = /(`[^`]+`)/g
   const splitByMulitpleCode = str.split(regExCodeMultiple)
   const finalArr = []