From fafd47fd907a9453b423da5e8155d3e4bbf05c20 Mon Sep 17 00:00:00 2001 From: Jakob Date: Thu, 22 Aug 2024 21:18:22 -0400 Subject: [PATCH] Add align to img, p, and div & allow h1 to be centered (#2231) * Add align to img, p, and div Signed-off-by: Jakob * fixed issue from porting pr Signed-off-by: Jakob * attempt to fix overflow of aligned imgs Signed-off-by: Jakob * Allow h1 to be centered Signed-off-by: Jakob * Excluded markdown-body from universal-card styling in components * Fixed it in editor? * undid previous attempt, did something simpler --------- Signed-off-by: Jakob Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com> --- apps/frontend/src/assets/styles/components.scss | 4 ++++ packages/assets/styles/classes.scss | 5 +++++ packages/utils/parse.ts | 4 +++- 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/apps/frontend/src/assets/styles/components.scss b/apps/frontend/src/assets/styles/components.scss index b475972b2..03ba15e3c 100644 --- 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 index 1089df818..61875ba6a 100644 --- 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 index aa53d64ef..ef0a631b8 100644 --- a/packages/utils/parse.ts +++ b/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: {