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

* Add align to img, p, and div

Signed-off-by: Jakob <minenash@protonmail.com>

* fixed issue from porting pr

Signed-off-by: Jakob <minenash@protonmail.com>

* attempt to fix overflow of aligned imgs

Signed-off-by: Jakob <minenash@protonmail.com>

* Allow h1 to be centered

Signed-off-by: Jakob <minenash@protonmail.com>

* Excluded markdown-body from universal-card styling in components

* Fixed it in editor?

* undid previous attempt, did something simpler

---------

Signed-off-by: Jakob <minenash@protonmail.com>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

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;

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;

packages/utils/parse.ts

@@ -14,7 +14,7 @@ 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'],
@@ -22,6 +22,8 @@ export const configuredXss = new FilterXSS({
     th: [...(whiteList.th || []), 'style'],
     picture: [],
     source: ['media', 'sizes', 'src', 'srcset', 'type'],
+    p: [...(whiteList.p || []), 'align'],
+    div: [...(whiteList.p || []), 'align'],
   },
   css: {
     whiteList: {