From d06882898a446a2c08c75101567827e347098d0e Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 7 May 2024 20:07:09 +0700
Subject: [PATCH] Update content rendering method in Keystatic package

This commit changes the way content is handled in the Keystatic package. It introduces rendering the content to HTML in the Keystatic client rather than in the content renderer component. This simplifies the rendering processing and better utilises the properties of the Markdoc library.
---
 packages/cms/core/src/content-renderer.tsx      | 6 ++++--
 packages/cms/keystatic/src/content-renderer.tsx | 8 ++------
 packages/cms/keystatic/src/keystatic-client.ts  | 3 ++-
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/cms/core/src/content-renderer.tsx b/packages/cms/core/src/content-renderer.tsx
index c9d220aa8..a19a25fbc 100644
--- a/packages/cms/core/src/content-renderer.tsx
+++ b/packages/cms/core/src/content-renderer.tsx
@@ -1,3 +1,5 @@
+import { KeystaticContentRenderer } from '@kit/keystatic';
+
 import type { CmsType } from './cms.type';
 
 const CMS_CLIENT = process.env.CMS_CLIENT as CmsType;
@@ -13,11 +15,11 @@ export async function ContentRenderer({
 }: ContentRendererProps) {
   switch (type) {
     case 'keystatic': {
-      const { KeystaticDocumentRenderer } = await import(
+      const { KeystaticContentRenderer } = await import(
         '../../keystatic/src/content-renderer'
       );
 
-      return <KeystaticDocumentRenderer content={content} />;
+      return <KeystaticContentRenderer content={content} />;
     }
 
     case 'wordpress': {
diff --git a/packages/cms/keystatic/src/content-renderer.tsx b/packages/cms/keystatic/src/content-renderer.tsx
index c3de59220..e25c25729 100644
--- a/packages/cms/keystatic/src/content-renderer.tsx
+++ b/packages/cms/keystatic/src/content-renderer.tsx
@@ -1,7 +1,3 @@
-import * as React from 'react';
-
-const Markdoc = await import('@markdoc/markdoc');
-
-export function KeystaticDocumentRenderer({ content }: { content: unknown }) {
-  return Markdoc.renderers.react(content as string, React);
+export function KeystaticContentRenderer(props: { content: unknown }) {
+  return <div dangerouslySetInnerHTML={{ __html: props.content as string }} />;
 }
diff --git a/packages/cms/keystatic/src/keystatic-client.ts b/packages/cms/keystatic/src/keystatic-client.ts
index ffb9ab7fa..719e28160 100644
--- a/packages/cms/keystatic/src/keystatic-client.ts
+++ b/packages/cms/keystatic/src/keystatic-client.ts
@@ -142,6 +142,7 @@ class KeystaticClient implements CmsClient {
 
     const markdoc = await item.entry.content();
     const content = Markdoc.transform(markdoc.node);
+    const html = Markdoc.renderers.html(content);
 
     return {
       id: item.slug,
@@ -150,7 +151,7 @@ class KeystaticClient implements CmsClient {
       slug: item.slug,
       description: item.entry.description,
       publishedAt: publishedAt.toISOString(),
-      content,
+      content: html,
       image: item.entry.image ?? undefined,
       categories:
         item.entry.categories.map((item) => {