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

@@ -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': {

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 }} />;
 }

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) => {