From 0bf911675c9f5d4075e353c206c5b9547adee542 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 11 Jun 2021 17:30:10 +1000
Subject: [PATCH] Add more vertical margin to Markdown rendering and change
 embed to image tag

---
 src/components/Markdown.js      | 14 ++++++--------
 src/docs/howTo/overview.md      |  2 +-
 src/docs/howTo/sharingMaps.md   |  2 +-
 src/docs/howTo/usingDice.md     |  2 +-
 src/docs/howTo/usingDrawing.md  |  2 +-
 src/docs/howTo/usingFog.md      |  2 +-
 src/docs/howTo/usingTokens.md   |  2 +-
 src/docs/releaseNotes/v1.1.0.md |  2 +-
 src/docs/releaseNotes/v1.2.0.md |  2 +-
 src/docs/releaseNotes/v1.3.0.md |  2 +-
 src/docs/releaseNotes/v1.4.0.md |  2 +-
 src/docs/releaseNotes/v1.5.0.md |  2 +-
 src/docs/releaseNotes/v1.6.0.md |  2 +-
 src/docs/releaseNotes/v1.7.0.md |  2 +-
 src/docs/releaseNotes/v1.8.0.md |  2 +-
 15 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/components/Markdown.js b/src/components/Markdown.js
index 52d67fe..388ea77 100644
--- a/src/components/Markdown.js
+++ b/src/components/Markdown.js
@@ -9,7 +9,7 @@ import {
 import ReactMarkdown from "react-markdown";
 
 function Paragraph(props) {
-  return <Text variant="body2" {...props} />;
+  return <Text as="p" my={2} variant="body2" {...props} />;
 }
 
 function Heading({ level, ...props }) {
@@ -27,6 +27,9 @@ function Heading({ level, ...props }) {
 }
 
 function Image(props) {
+  if (props.alt === "embed:") {
+    return <Embed as="span" sx={{ display: "block" }} src={props.src} my={2} />;
+  }
   if (props.src.endsWith(".mp4")) {
     return (
       <video
@@ -125,12 +128,7 @@ function TableCell({ children }) {
 }
 
 function Link({ href, children }) {
-  const linkText = children[0].props.value;
-  if (linkText === "embed:") {
-    return <Embed src={href} my={2} />;
-  } else {
-    return <UILink href={href}>{children}</UILink>;
-  }
+  return <UILink href={href}>{children}</UILink>;
 }
 
 function Markdown({ source, assets }) {
@@ -151,7 +149,7 @@ function Markdown({ source, assets }) {
     <ReactMarkdown
       source={source}
       renderers={renderers}
-      transformImageUri={(uri) => assets[uri]}
+      transformImageUri={(uri) => assets[uri] || uri}
     />
   );
 }
diff --git a/src/docs/howTo/overview.md b/src/docs/howTo/overview.md
index 1d1f5cb..15613c3 100644
--- a/src/docs/howTo/overview.md
+++ b/src/docs/howTo/overview.md
@@ -1 +1 @@
-[embed:](https://www.youtube.com/embed/KLUsOZA-SHI)
+![embed:](https://www.youtube.com/embed/KLUsOZA-SHI)
diff --git a/src/docs/howTo/sharingMaps.md b/src/docs/howTo/sharingMaps.md
index a693886..bf3ad11 100644
--- a/src/docs/howTo/sharingMaps.md
+++ b/src/docs/howTo/sharingMaps.md
@@ -1,4 +1,4 @@
-[embed:](https://www.youtube.com/embed/ztLDznOpmsg)
+![embed:](https://www.youtube.com/embed/ztLDznOpmsg)
 
 Once you have started a game you can share a map to all other party members by clicking the Select Map button then selecting the desired map to share and clicking the Done button.
 
diff --git a/src/docs/howTo/usingDice.md b/src/docs/howTo/usingDice.md
index 4260b92..5079516 100644
--- a/src/docs/howTo/usingDice.md
+++ b/src/docs/howTo/usingDice.md
@@ -1,4 +1,4 @@
-[embed:](https://www.youtube.com/embed/Er_grVmqpk0)
+![embed:](https://www.youtube.com/embed/Er_grVmqpk0)
 
 Owlbear Rodeo supports a physically simulated 3D dice tray and dice. To access these features click the Show Dice Tray icon in the top left of the map view.
 
diff --git a/src/docs/howTo/usingDrawing.md b/src/docs/howTo/usingDrawing.md
index 6e25daf..8cd9db6 100644
--- a/src/docs/howTo/usingDrawing.md
+++ b/src/docs/howTo/usingDrawing.md
@@ -1,4 +1,4 @@
-[embed:](https://www.youtube.com/embed/2e07DtB-Xrc)
+![embed:](https://www.youtube.com/embed/2e07DtB-Xrc)
 
 The Drawing Tool allows you to draw on top of a map. To access the Drawing Tool click the Drawing Tool button in the top right of the map view.
 
diff --git a/src/docs/howTo/usingFog.md b/src/docs/howTo/usingFog.md
index f9bd7f1..cc60364 100644
--- a/src/docs/howTo/usingFog.md
+++ b/src/docs/howTo/usingFog.md
@@ -1,4 +1,4 @@
-[embed:](https://www.youtube.com/embed/1ra7DoIsas8)
+![embed:](https://www.youtube.com/embed/1ra7DoIsas8)
 
 The Fog Tool allows you to add hidden areas to control what the other party members can see on your map. To access the Fog Tool click the Fog Tool button in the top right of the map view.
 
diff --git a/src/docs/howTo/usingTokens.md b/src/docs/howTo/usingTokens.md
index a80eefd..0b29625 100644
--- a/src/docs/howTo/usingTokens.md
+++ b/src/docs/howTo/usingTokens.md
@@ -1,4 +1,4 @@
-[embed:](https://www.youtube.com/embed/j-9X9CF7_UY)
+![embed:](https://www.youtube.com/embed/j-9X9CF7_UY)
 
 Once you have a map shared between a party all players can drag tokens from the Token List on the right hand side of the screen. Tokens can then be used to represent players, monsters or any other object that needs to be moved around the map.
 
diff --git a/src/docs/releaseNotes/v1.1.0.md b/src/docs/releaseNotes/v1.1.0.md
index 65827c5..24d2761 100644
--- a/src/docs/releaseNotes/v1.1.0.md
+++ b/src/docs/releaseNotes/v1.1.0.md
@@ -1,4 +1,4 @@
-[embed:](https://www.youtube.com/embed/aOTvQOrpNo4)
+![embed:](https://www.youtube.com/embed/aOTvQOrpNo4)
 
 ## Major Changes
 
diff --git a/src/docs/releaseNotes/v1.2.0.md b/src/docs/releaseNotes/v1.2.0.md
index d15dea3..7ffd49e 100644
--- a/src/docs/releaseNotes/v1.2.0.md
+++ b/src/docs/releaseNotes/v1.2.0.md
@@ -1,4 +1,4 @@
-[embed:](https://www.youtube.com/embed/IhSS24d4zlM)
+![embed:](https://www.youtube.com/embed/IhSS24d4zlM)
 
 ## Major Changes
 
diff --git a/src/docs/releaseNotes/v1.3.0.md b/src/docs/releaseNotes/v1.3.0.md
index f6d0c44..8b37690 100644
--- a/src/docs/releaseNotes/v1.3.0.md
+++ b/src/docs/releaseNotes/v1.3.0.md
@@ -1,4 +1,4 @@
-[embed:](https://www.youtube.com/embed/Y7sEgoopz4E)
+![embed:](https://www.youtube.com/embed/Y7sEgoopz4E)
 
 ## Major Changes
 
diff --git a/src/docs/releaseNotes/v1.4.0.md b/src/docs/releaseNotes/v1.4.0.md
index d3a8960..c17daf8 100644
--- a/src/docs/releaseNotes/v1.4.0.md
+++ b/src/docs/releaseNotes/v1.4.0.md
@@ -1,4 +1,4 @@
-[embed:](https://www.youtube.com/embed/vtNpj-449B8)
+![embed:](https://www.youtube.com/embed/vtNpj-449B8)
 
 ## Major Changes
 
diff --git a/src/docs/releaseNotes/v1.5.0.md b/src/docs/releaseNotes/v1.5.0.md
index 3909220..3fac2aa 100644
--- a/src/docs/releaseNotes/v1.5.0.md
+++ b/src/docs/releaseNotes/v1.5.0.md
@@ -1,4 +1,4 @@
-[embed:](https://www.youtube.com/embed/i4JvZboAPhQ)
+![embed:](https://www.youtube.com/embed/i4JvZboAPhQ)
 
 ## Major Changes
 
diff --git a/src/docs/releaseNotes/v1.6.0.md b/src/docs/releaseNotes/v1.6.0.md
index e7d1d32..b068f12 100644
--- a/src/docs/releaseNotes/v1.6.0.md
+++ b/src/docs/releaseNotes/v1.6.0.md
@@ -1,4 +1,4 @@
-[embed:](https://www.youtube.com/embed/TIhCAJoTeAU)
+![embed:](https://www.youtube.com/embed/TIhCAJoTeAU)
 
 ## Major Changes
 
diff --git a/src/docs/releaseNotes/v1.7.0.md b/src/docs/releaseNotes/v1.7.0.md
index 6b89316..09a0726 100644
--- a/src/docs/releaseNotes/v1.7.0.md
+++ b/src/docs/releaseNotes/v1.7.0.md
@@ -1,4 +1,4 @@
-[embed:](https://www.youtube.com/embed/MWbfbN3Brhw)
+![embed:](https://www.youtube.com/embed/MWbfbN3Brhw)
 
 ## Major Changes
 
diff --git a/src/docs/releaseNotes/v1.8.0.md b/src/docs/releaseNotes/v1.8.0.md
index f4f6900..35eb589 100644
--- a/src/docs/releaseNotes/v1.8.0.md
+++ b/src/docs/releaseNotes/v1.8.0.md
@@ -1,4 +1,4 @@
-[embed:](https://www.youtube.com/embed/MBy0VLsesL0)
+![embed:](https://www.youtube.com/embed/MBy0VLsesL0)
 
 ## Major Changes