From 8a43d3aaa2b45cd25e7185e8fb12ff6d5c58cec6 Mon Sep 17 00:00:00 2001
From: Bryan Phelps <bryphe@outlook.com>
Date: Tue, 4 Aug 2020 10:32:55 -0700
Subject: [PATCH] Markdown: Add hook for rendering images

---
 examples/MarkdownExample.re    |  2 ++
 src/UI_Components/Markdown.re  | 25 +++++++++++++++++++++++--
 src/UI_Components/Markdown.rei |  3 ++-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/examples/MarkdownExample.re b/examples/MarkdownExample.re
index 268d49f8b..653c8ec63 100644
--- a/examples/MarkdownExample.re
+++ b/examples/MarkdownExample.re
@@ -41,6 +41,8 @@ let example = () =>
 An h2 header
 ------------
 
+![Test Image](https://raw.githubusercontent.com/revery-ui/revery/master/assets/logo.png)
+
 Here's a numbered list:
 
  1. first item
diff --git a/src/UI_Components/Markdown.re b/src/UI_Components/Markdown.re
index 7a77fe07f..7de115cbd 100644
--- a/src/UI_Components/Markdown.re
+++ b/src/UI_Components/Markdown.re
@@ -47,6 +47,7 @@ type style = {
   codeBlockFontSize: float,
   baseFontSize: float,
   codeBlock: list(Style.viewStyleProps),
+  imageElement: (~url: string) => Revery_UI.element,
 };
 
 module SyntaxHighlight = {
@@ -143,7 +144,13 @@ type inlineAttrs =
   | Bolded
   | Monospaced;
 
-type kind = [ | `Paragraph | `Heading(int) | `Link(string) | `InlineCode];
+type kind = [
+  | `Paragraph
+  | `Heading(int)
+  | `Image(string)
+  | `Link(string)
+  | `InlineCode
+];
 
 let selectStyleFromKind = (kind: kind, styles) =>
   switch (kind) {
@@ -223,6 +230,7 @@ let generateText = (text, styles, attrs, dispatch, state) => {
         italic={isItalicized(attrs)}
       />
     </View>
+  | `Image(url) => styles.imageElement(~url)
   | _ =>
     <Text
       text
@@ -269,7 +277,12 @@ let rec generateInline' = (inline, styles, attrs, dispatch, state) => {
     generateInline'(
       l.def.label,
       styles,
-      {...attrs, kind: `Link(l.def.destination)},
+      {
+        ...attrs,
+        kind:
+          l.kind == Url
+            ? `Link(l.def.destination) : `Image(l.def.destination),
+      },
       dispatch,
       state,
     )
@@ -464,6 +477,12 @@ let generateMarkdown = (mdText: string, styles, highlighter, dispatch, state) =>
   |> React.listToElement;
 };
 
+let defaultImageRenderer = (~url as _) => {
+  <View
+    style=Style.[width(64), height(64), backgroundColor(Colors.gray)]
+  />;
+};
+
 let%component make =
               (
                 ~markdown as mdText="",
@@ -482,6 +501,7 @@ let%component make =
                 ~h6Style=Style.emptyTextStyle,
                 ~inlineCodeStyle=Style.emptyTextStyle,
                 ~codeBlockStyle=Styles.Code.defaultBlock,
+                ~imageElement=defaultImageRenderer,
                 ~syntaxHighlighter=SyntaxHighlight.default,
                 (),
               ) => {
@@ -508,6 +528,7 @@ let%component make =
          baseFontSize,
          codeBlockFontSize,
          codeBlock: codeBlockStyle,
+         imageElement,
        },
        syntaxHighlighter,
        dispatch,
diff --git a/src/UI_Components/Markdown.rei b/src/UI_Components/Markdown.rei
index 694835b6d..94dcdff27 100644
--- a/src/UI_Components/Markdown.rei
+++ b/src/UI_Components/Markdown.rei
@@ -34,7 +34,8 @@ let make:
     ~h6Style: list(Revery_UI.Style.textStyleProps)=?,
     ~inlineCodeStyle: list(Revery_UI.Style.textStyleProps)=?,
     ~codeBlockStyle: list(Revery_UI.Style.viewStyleProps)=?,
+    ~imageElement: (~url: string) => Revery_UI.element=?,
     ~syntaxHighlighter: SyntaxHighlight.t=?,
     unit
   ) =>
-  Brisk_reconciler.element(Revery_UI.React.node);
+  Revery_UI.element;