From 3968aa5d61c73ad589c1b7005b7b5db60dd26853 Mon Sep 17 00:00:00 2001
From: Mitchell Hamilton <mitchell@hamil.town>
Date: Fri, 12 Feb 2021 13:47:24 +1000
Subject: [PATCH] Add renderer for relationship nodes in document renderer
 (#4821)

---
 .changeset/cuddly-melons-speak.md             |  5 ++++
 packages-next/document-renderer/src/index.tsx | 24 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/cuddly-melons-speak.md

diff --git a/.changeset/cuddly-melons-speak.md b/.changeset/cuddly-melons-speak.md
new file mode 100644
index 00000000000..09387ea9f0d
--- /dev/null
+++ b/.changeset/cuddly-melons-speak.md
@@ -0,0 +1,5 @@
+---
+'@keystone-next/document-renderer': minor
+---
+
+Added renderer for relationship nodes
diff --git a/packages-next/document-renderer/src/index.tsx b/packages-next/document-renderer/src/index.tsx
index 905f56cd2f0..ddc0c39da07 100644
--- a/packages-next/document-renderer/src/index.tsx
+++ b/packages-next/document-renderer/src/index.tsx
@@ -31,6 +31,9 @@ type MarkRenderers = { [Key in Mark]: OnlyChildrenComponent };
 interface Renderers {
   inline: {
     link: Component<{ children: ReactNode; href: string }> | 'a';
+    relationship: Component<{
+      data: { id: string; label: string; data: Record<string, any> } | null;
+    }>;
   } & MarkRenderers;
   block: {
     block: OnlyChildrenComponent;
@@ -59,6 +62,9 @@ const defaultRenderers: Renderers = {
     subscript: 'sub',
     superscript: 'sup',
     underline: 'u',
+    relationship: ({ data }) => {
+      return <span>{data?.label}</span>;
+    },
   },
   block: {
     block: 'div',
@@ -110,7 +116,7 @@ function DocumentNode({
   if (typeof _node.text === 'string') {
     let child = <Fragment>{_node.text}</Fragment>;
     (Object.keys(renderers.inline) as (keyof typeof renderers.inline)[]).forEach(markName => {
-      if (markName !== 'link' && _node[markName]) {
+      if (markName !== 'link' && markName !== 'relationship' && _node[markName]) {
         const Mark = renderers.inline[markName];
         child = <Mark>{child}</Mark>;
       }
@@ -175,6 +181,22 @@ function DocumentNode({
         />
       );
     }
+    case 'relationship': {
+      const data = node.data as any;
+      return (
+        <renderers.inline.relationship
+          data={
+            data
+              ? {
+                  id: data.id,
+                  label: data.label || data.id,
+                  data: data.data || {},
+                }
+              : null
+          }
+        />
+      );
+    }
   }
   return <Fragment>{children}</Fragment>;
 }