Removed Tailwind classes from comment contents

apps/comments-ui/src/components/Comment.js

@@ -52,7 +52,7 @@ const Comment = (props) => {
                             </div>
                         </div>
                         <div className={`ml-14 mb-4 pr-4 font-sans leading-normal ${isNotPublished ? 'text-neutral-400' : 'text-neutral-900'} dark:text-[rgba(255,255,255,0.85)]`}>
-                            <p dangerouslySetInnerHTML={html} className="whitespace-pre-wrap text-[16.5px] leading-normal"></p>
+                            <p dangerouslySetInnerHTML={html} className="gh-comment-content text-[16.5px] leading-normal"></p>
                         </div>
                         <div className="ml-14 flex gap-5 items-center">
                             <Like comment={comment} />

apps/comments-ui/src/index.css

@@ -15,7 +15,20 @@ body {
     font-size: 1.5rem;
 }
 
+/* Comment HTML styles */
+
+/* This makes sure we can have empty lines in comments (= <p></p>) */
+.gh-comment-content p:empty::after {
+    content: "\00A0";
+}
+
+/* Links */
+.gh-comment-content a {
+    text-decoration: underline;
+}
+
 /* The following lines are needed for the editor */
+
 /* Placeholder */
 .ProseMirror p.is-editor-empty:first-child::before {
     content: attr(data-placeholder);

apps/comments-ui/src/utils/editor.js

@@ -11,12 +11,7 @@ export function getEditorConfig({placeholder, autofocus = false, content = ''})
             Text,
             Paragraph,
             Link.configure({
-                openOnClick: false,
-                // Add these HTML attributes to all the <a> links
-                // Warning: we need to do backend changes to make sure the sanitizer always picks the same class for links
-                HTMLAttributes: {
-                    class: 'underline'
-                }
+                openOnClick: false
             }),
             Placeholder.configure({
                 placeholder
@@ -26,8 +21,10 @@ export function getEditorConfig({placeholder, autofocus = false, content = ''})
         autofocus,
         editorProps: {
             attributes: {
-                class: `focus:outline-0`
+                class: `gh-comment-content focus:outline-0`
             }
         }
     };
 }
+
+/** We need to post process the HTML from tiptap, because tiptap by default */