#2243 - Fix markdown <code> element issue (#2247)

* fix the markdown issue * display horizontal scrollbar instead * flaky test * fix the overflowing emojis * flaky test
okTurtles · Jul 24, 2024 · 6380d4d · 6380d4d
1 parent 96ce11f
commit 6380d4d
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 5 deletions.
diff --git a/frontend/assets/style/components/_custom-markdowns.scss b/frontend/assets/style/components/_custom-markdowns.scss
@@ -44,6 +44,8 @@
     background-color: $general_1;
     line-height: 1.4;
     margin: 0;
+    max-width: 100%;
+    overflow-x: auto;
   }
 
   * + pre,

diff --git a/frontend/views/containers/chatroom/MessageBase.vue b/frontend/views/containers/chatroom/MessageBase.vue
@@ -327,6 +327,7 @@ export default ({
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
+  max-width: 100%;
 }
 
 .c-avatar {
@@ -342,6 +343,10 @@ export default ({
   width: 100%;
 }
 
+.c-body {
+  max-width: calc(100% - 2.5rem);
+}
+
 .c-who {
   display: flex;
 
@@ -354,6 +359,7 @@ export default ({
   word-break: break-word; // too much long words will break
   white-space: pre-line; // break \n to a new line
   margin: 0;
+  max-width: 100%;
 
   // When .c-shot is the only element (when .c-who isn't rendered)
   &:first-child:last-child {

diff --git a/frontend/views/containers/chatroom/MessageReactions.vue b/frontend/views/containers/chatroom/MessageReactions.vue
@@ -82,6 +82,7 @@ export default ({
 .c-emoticons-list {
   padding-left: 3rem;
   display: flex;
+  flex-wrap: wrap;
 
   &.for-type-poll {
     @include phone {

diff --git a/frontend/views/containers/chatroom/chat-mentions/RenderMessageWithMarkdown.js b/frontend/views/containers/chatroom/chat-mentions/RenderMessageWithMarkdown.js
@@ -26,6 +26,7 @@ const RenderMessageWithMarkdown: any = {
     const recursiveCall = (entry: any): any => {
       if (entry.tagName) {
         const hasChildren = Array.isArray(entry.children)
+        const isCodeElement = entry.tagName === 'CODE'
 
         const routerOptions = { isInAppRouter: false, route: {}, href: '' }
         if (entry.tagName === 'A' && entry.attributes.href) {
@@ -65,7 +66,7 @@ const RenderMessageWithMarkdown: any = {
           opts,
           hasChildren
             ? entry.children.map(child => recursiveCall(child))
-            : undefined
+            : isCodeElement ? entry.text : undefined
         )
       } else if (entry.text) {
         return createElement(

diff --git a/frontend/views/containers/chatroom/chat-mentions/chat-mentions-utils.js b/frontend/views/containers/chatroom/chat-mentions/chat-mentions-utils.js
@@ -59,19 +59,27 @@ function createRecursiveDomObjects (element: any): DomObject {
     This outcome will be used by a Vue render function to render converted markdown cleanly without breaking the html structure.
   */
 
-  const isNodeTypeText = (el: any): boolean => el?.nodeType === Node.TEXT_NODE
+  const isNodeTypeText = element?.nodeType === Node.TEXT_NODE
+  const isNodeCodeElement = element?.nodeName === 'CODE' // <code> ... </code> element needs a special treatment in the chat.
 
-  const nodeObj: DomObject = isNodeTypeText(element)
+  const nodeObj: DomObject = isNodeTypeText
     ? { tagName: null, attributes: {}, text: element.textContent }
-    : { tagName: element.tagName, attributes: {} }
+    : {
+        tagName: element.tagName,
+        text: isNodeCodeElement
+          // $FlowFixMe[prop-missing]
+          ? element.innerText.replaceAll('<br>', '')
+          : undefined,
+        attributes: {}
+      }
 
   if (element.attributes?.length) {
     for (const attr of element.attributes) {
       nodeObj.attributes[attr.name] = attr.value
     }
   }
 
-  if (element.childNodes?.length) {
+  if (!isNodeCodeElement && element.childNodes?.length) {
     nodeObj.children = []
 
     for (const child of element.childNodes) {