Add align to img, p, and div & allow h1 to be centered (#2231)

* Add align to img, p, and div Signed-off-by: Jakob <[email protected]> * fixed issue from porting pr Signed-off-by: Jakob <[email protected]> * attempt to fix overflow of aligned imgs Signed-off-by: Jakob <[email protected]> * Allow h1 to be centered Signed-off-by: Jakob <[email protected]> * Excluded markdown-body from universal-card styling in components * Fixed it in editor? * undid previous attempt, did something simpler --------- Signed-off-by: Jakob <[email protected]> Co-authored-by: Prospector <[email protected]>
modrinth · Aug 23, 2024 · fafd47f · fafd47f
1 parent e099091
commit fafd47f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss
@@ -284,6 +284,10 @@
     align-items: center;
   }
 
+  .markdown-body h1 {
+    display: block;
+  }
+
   > :first-child {
     :first-child {
       margin-block-start: 0;

diff --git a/packages/assets/styles/classes.scss b/packages/assets/styles/classes.scss
@@ -833,6 +833,7 @@ a,
 // MARKDOWN
 
 .markdown-body {
+  overflow-y: auto;
   h1:first-child {
     margin-top: 0;
   }
@@ -856,6 +857,10 @@ a,
     line-height: 1.5;
   }
 
+  h1 {
+    display: block;
+  }
+
   h1,
   h2 {
     padding: 10px 0 5px;

diff --git a/packages/utils/parse.ts b/packages/utils/parse.ts
@@ -14,14 +14,16 @@ export const configuredXss = new FilterXSS({
     kbd: ['id'],
     input: ['checked', 'disabled', 'type'],
     iframe: ['width', 'height', 'allowfullscreen', 'frameborder', 'start', 'end'],
-    img: [...(whiteList.img || []), 'usemap', 'style'],
+    img: [...(whiteList.img || []), 'usemap', 'style', 'align'],
     map: ['name'],
     area: [...(whiteList.a || []), 'coords'],
     a: [...(whiteList.a || []), 'rel'],
     td: [...(whiteList.td || []), 'style'],
     th: [...(whiteList.th || []), 'style'],
     picture: [],
     source: ['media', 'sizes', 'src', 'srcset', 'type'],
+    p: [...(whiteList.p || []), 'align'],
+    div: [...(whiteList.p || []), 'align'],
   },
   css: {
     whiteList: {