From 241f6c0df672a2bfc48022c2bea7ce6aaa543f63 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 11 Nov 2020 18:00:07 +0100
Subject: [PATCH] markdown render fixes (#239)

---
 src/components/atoms/Markdown.module.css      | 71 +++++++++++++++++++
 src/components/atoms/Markdown.tsx             |  8 ++-
 .../organisms/AssetContent/index.module.css   | 19 -----
 .../pages/Publish/Preview.module.css          | 19 -----
 4 files changed, 78 insertions(+), 39 deletions(-)
 create mode 100644 src/components/atoms/Markdown.module.css

diff --git a/src/components/atoms/Markdown.module.css b/src/components/atoms/Markdown.module.css
new file mode 100644
index 000000000..eff8ca24a
--- /dev/null
+++ b/src/components/atoms/Markdown.module.css
@@ -0,0 +1,71 @@
+.markdown {
+  /* handling long text, like URLs */
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.markdown h1 {
+  font-size: var(--font-size-h3);
+}
+
+.markdown h2 {
+  font-size: var(--font-size-h4);
+}
+
+.markdown h3 {
+  font-size: var(--font-size-large);
+}
+
+.markdown h4,
+.markdown h5 {
+  font-size: var(--font-size-base);
+}
+
+.markdown ul,
+.markdown ol {
+  margin: 0;
+  margin-bottom: var(--spacer);
+  padding-left: 1.5rem;
+}
+
+.markdown ul {
+  list-style: none;
+}
+
+.markdown ul li {
+  position: relative;
+  display: block;
+}
+
+.markdown ul li:before {
+  content: '▪';
+  top: -2px;
+  position: absolute;
+  left: -1.5rem;
+  color: var(--brand-grey-light);
+  user-select: none;
+}
+
+.markdown li + li {
+  margin-top: calc(var(--spacer) / 8);
+}
+
+.markdown li ul,
+.markdown li ol,
+.markdown li p {
+  margin-bottom: 0;
+  margin-top: calc(var(--spacer) / 8);
+}
+
+.markdown hr {
+  display: block;
+  margin: calc(var(--spacer) * 1.5) auto;
+  max-width: 20%;
+  border: 0;
+  border-top: 2px solid var(--border-color);
+}
+
+.markdown img {
+  margin-bottom: calc(var(--spacer) / 2);
+}
diff --git a/src/components/atoms/Markdown.tsx b/src/components/atoms/Markdown.tsx
index 2754ac386..39004d98e 100644
--- a/src/components/atoms/Markdown.tsx
+++ b/src/components/atoms/Markdown.tsx
@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react'
 import ReactMarkdown from 'react-markdown'
+import styles from './Markdown.module.css'
 
 const Markdown = ({
   text,
@@ -12,7 +13,12 @@ const Markdown = ({
   // https://github.com/rexxars/react-markdown/issues/105#issuecomment-351585313
   const textCleaned = text.replace(/\\n/g, '\n ')
 
-  return <ReactMarkdown source={textCleaned} className={className} />
+  return (
+    <ReactMarkdown
+      source={textCleaned}
+      className={`${styles.markdown} ${className}`}
+    />
+  )
 }
 
 export default Markdown
diff --git a/src/components/organisms/AssetContent/index.module.css b/src/components/organisms/AssetContent/index.module.css
index d0ff8fc50..e081a411c 100644
--- a/src/components/organisms/AssetContent/index.module.css
+++ b/src/components/organisms/AssetContent/index.module.css
@@ -46,22 +46,3 @@
   margin-top: var(--spacer);
   margin-bottom: var(--spacer);
 }
-
-/* Markdown tweaks */
-
-.description h1 {
-  font-size: var(--font-size-h3);
-}
-
-.description h2 {
-  font-size: var(--font-size-h4);
-}
-
-.description h3 {
-  font-size: var(--font-size-large);
-}
-
-.description h4,
-.description h5 {
-  font-size: var(--font-size-base);
-}
diff --git a/src/components/pages/Publish/Preview.module.css b/src/components/pages/Publish/Preview.module.css
index 2e3f18bfa..50db0dfd8 100644
--- a/src/components/pages/Publish/Preview.module.css
+++ b/src/components/pages/Publish/Preview.module.css
@@ -40,25 +40,6 @@
   margin-top: calc(var(--spacer) / 4);
 }
 
-/* Markdown tweaks */
-
-.description h1 {
-  font-size: var(--font-size-h3);
-}
-
-.description h2 {
-  font-size: var(--font-size-h4);
-}
-
-.description h3 {
-  font-size: var(--font-size-large);
-}
-
-.description h4,
-.description h5 {
-  font-size: var(--font-size-base);
-}
-
 .toggle {
   position: absolute;
   bottom: 0.15rem;