Added linked and table renderer for markdown in comment (#41)

* Added linked and table renderer for markdown in comment * Added white-space pre wrap for comment markdown * updated snapshot * clean up
mattermost · Dec 2, 2024 · c95e6e8 · c95e6e8
1 parent bd93b94
commit c95e6e8
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 29 deletions.
diff --git a/webapp/src/components/cardDetail/__snapshots__/comment.test.tsx.snap b/webapp/src/components/cardDetail/__snapshots__/comment.test.tsx.snap
@@ -118,9 +118,13 @@ exports[`components/cardDetail/comment return comment 1`] = `
       </div>
     </div>
     <div
-      class="mocked-message-html"
+      class="comment-markdown"
     >
-      Test Comment
+      <div
+        class="mocked-message-html"
+      >
+        Test Comment
+      </div>
     </div>
   </div>
 </div>
@@ -244,9 +248,13 @@ exports[`components/cardDetail/comment return comment and delete comment 1`] = `
       </div>
     </div>
     <div
-      class="mocked-message-html"
+      class="comment-markdown"
     >
-      Test Comment
+      <div
+        class="mocked-message-html"
+      >
+        Test Comment
+      </div>
     </div>
   </div>
 </div>
@@ -281,9 +289,13 @@ exports[`components/cardDetail/comment return comment readonly 1`] = `
       </div>
     </div>
     <div
-      class="mocked-message-html"
+      class="comment-markdown"
     >
-      Test Comment
+      <div
+        class="mocked-message-html"
+      >
+        Test Comment
+      </div>
     </div>
   </div>
 </div>
@@ -416,9 +428,13 @@ exports[`components/cardDetail/comment return guest comment 1`] = `
       </div>
     </div>
     <div
-      class="mocked-message-html"
+      class="comment-markdown"
     >
-      Test Comment
+      <div
+        class="mocked-message-html"
+      >
+        Test Comment
+      </div>
     </div>
   </div>
 </div>
@@ -551,9 +567,13 @@ exports[`components/cardDetail/comment return guest comment and delete comment 1
       </div>
     </div>
     <div
-      class="mocked-message-html"
+      class="comment-markdown"
     >
-      Test Comment
+      <div
+        class="mocked-message-html"
+      >
+        Test Comment
+      </div>
     </div>
   </div>
 </div>
@@ -597,9 +617,13 @@ exports[`components/cardDetail/comment return guest comment readonly 1`] = `
       </div>
     </div>
     <div
-      class="mocked-message-html"
+      class="comment-markdown"
     >
-      Test Comment
+      <div
+        class="mocked-message-html"
+      >
+        Test Comment
+      </div>
     </div>
   </div>
 </div>

diff --git a/webapp/src/components/cardDetail/__snapshots__/commentsList.test.tsx.snap b/webapp/src/components/cardDetail/__snapshots__/commentsList.test.tsx.snap
@@ -65,9 +65,13 @@ exports[`components/cardDetail/CommentsList comments show up 1`] = `
         </div>
       </div>
       <div
-        class="mocked-message-html"
+        class="comment-markdown"
       >
-        Test Comment
+        <div
+          class="mocked-message-html"
+        >
+          Test Comment
+        </div>
       </div>
     </div>
     <div
@@ -109,9 +113,13 @@ exports[`components/cardDetail/CommentsList comments show up 1`] = `
         </div>
       </div>
       <div
-        class="mocked-message-html"
+        class="comment-markdown"
       >
-        Test Comment
+        <div
+          class="mocked-message-html"
+        >
+          Test Comment
+        </div>
       </div>
     </div>
     <hr
@@ -151,9 +159,13 @@ exports[`components/cardDetail/CommentsList comments show up in readonly mode 1`
         </div>
       </div>
       <div
-        class="mocked-message-html"
+        class="comment-markdown"
       >
-        Test Comment
+        <div
+          class="mocked-message-html"
+        >
+          Test Comment
+        </div>
       </div>
     </div>
     <div
@@ -181,9 +193,13 @@ exports[`components/cardDetail/CommentsList comments show up in readonly mode 1`
         </div>
       </div>
       <div
-        class="mocked-message-html"
+        class="comment-markdown"
       >
-        Test Comment
+        <div
+          class="mocked-message-html"
+        >
+          Test Comment
+        </div>
       </div>
     </div>
     <hr

diff --git a/webapp/src/components/cardDetail/comment.scss b/webapp/src/components/cardDetail/comment.scss
@@ -64,4 +64,8 @@
     .comment-text * {
         user-select: text;
     }
+
+    .comment-markdown {
+        white-space: pre-wrap;
+    }
 }
diff --git a/webapp/src/components/cardDetail/comment.tsx b/webapp/src/components/cardDetail/comment.tsx
@@ -44,9 +44,8 @@ const Comment: FC<Props> = (props: Props) => {
     const formattedText = 
     <Provider store={(window as any).store}>
         {messageHtmlToComponent(formatText(comment.title, {
-            singleline: false,
+            renderer: Utils.getMarkdownRenderer(),
             atMentions: true,
-            mentionHighlight: false,
             team: selectedTeam,
             channelNamesMap,
         }), {
@@ -87,7 +86,9 @@ const Comment: FC<Props> = (props: Props) => {
                     </MenuWrapper>
                 )}
             </div>
-            {formattedText}
+            <div className='comment-markdown'>
+                {formattedText}
+            </div>
         </div>
     )
 }

diff --git a/webapp/src/utils.ts b/webapp/src/utils.ts
@@ -289,7 +289,11 @@ class Utils {
     // Markdown
 
     static htmlFromMarkdown(text: string): string {
-        // HACKHACK: Somehow, marked doesn't encode angle brackets
+        const renderer = this.getMarkdownRenderer() 
+        return this.htmlFromMarkdownWithRenderer(text, renderer)
+    }
+
+    static getMarkdownRenderer(): marked.Renderer {
         const renderer = new marked.Renderer()
         renderer.link = (href, title, contents) => {
             return '<a ' +
@@ -303,9 +307,8 @@ class Utils {
 
         renderer.table = (header, body) => {
             return `<div class="table-responsive"><table class="markdown__table"><thead>${header}</thead><tbody>${body}</tbody></table></div>`
-        }
-
-        return this.htmlFromMarkdownWithRenderer(text, renderer)
+        } 
+        return renderer
     }
 
     static htmlFromMarkdownWithRenderer(text: string, renderer: marked.Renderer): string {

diff --git a/webapp/src/webapp_globals.ts b/webapp/src/webapp_globals.ts
@@ -5,15 +5,16 @@ import {NameMappedObjects} from "mattermost-redux/types/utilities"
 
 import {Channel} from "mattermost-redux/types/channels"
 
+import {Renderer} from "marked"
+
 import {Team} from "./store/teams"
 
 
 type Options = {
-    singleline: boolean;
     atMentions: boolean;
-    mentionHighlight: boolean;
     team: Team | null;
     channelNamesMap: NameMappedObjects<Channel>;
+    renderer: Renderer;
 }
 
 type Props = {