feat: Ensure the article appears exactly as it will when published #1102

app/(app)/articles/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import type { RenderableTreeNode } from "@markdoc/markdoc";
 import Markdoc from "@markdoc/markdoc";
 import Link from "next/link";
 import BioBar from "@/components/BioBar/BioBar";
@@ -13,6 +14,8 @@ import ArticleAdminPanel from "@/components/ArticleAdminPanel/ArticleAdminPanel"
 import { type Metadata } from "next";
 import { getPost } from "@/server/lib/posts";
 import { getCamelCaseFromLower } from "@/utils/utils";
+import { generateHTML } from "@tiptap/html";
+import { TiptapExtensions } from "@/components/editor/editor/extensions";
 
 type Props = { params: { slug: string } };
 
@@ -57,6 +60,21 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   };
 }
 
+const isValidJSON = (str: string): boolean => {
+  try {
+    JSON.parse(str);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+const renderTiptapContent = (jsonContent: JSON) => {
+  return generateHTML(jsonContent, [
+    ...TiptapExtensions,
+  ]);
+};
+
 const ArticlePage = async ({ params }: Props) => {
   const session = await getServerAuthSession();
   const { slug } = params;
@@ -69,8 +87,22 @@ const ArticlePage = async ({ params }: Props) => {
     notFound();
   }
 
-  const ast = Markdoc.parse(post.body);
-  const content = Markdoc.transform(ast, config);
+  const isTiptapContent = isValidJSON(post.body) &&
+    JSON.parse(post.body).type === "doc";
+
+  let renderedContent: string | RenderableTreeNode;
+
+  if (isTiptapContent) {
+    const jsonContent = JSON.parse(post.body);
+    renderedContent = renderTiptapContent(jsonContent);
+  } else {
+    const ast = Markdoc.parse(post.body);
+    const transformedContent = Markdoc.transform(ast, config);
+    renderedContent = Markdoc.renderers.react(transformedContent, React, {
+      components: markdocComponents,
+    }) as unknown as string;
+  }
+
 
   return (
     <>
@@ -83,10 +115,16 @@ const ArticlePage = async ({ params }: Props) => {
       />
       <div className="mx-auto break-words px-2 pb-4 sm:px-4 md:max-w-3xl">
         <article className="prose mx-auto max-w-3xl dark:prose-invert lg:prose-lg">
-          <h1>{post.title}</h1>
-          {Markdoc.renderers.react(content, React, {
-            components: markdocComponents,
-          })}
+          {!isTiptapContent && (<h1>{post.title}</h1>)}
+
+          {isTiptapContent ? (
+            <div
+              dangerouslySetInnerHTML={{ __html: renderedContent }}
+              className="tiptap-content"
+            />
+          ) : (
+            <div>{renderedContent}</div>
+          )}
         </article>
         {post.tags.length > 0 && (
           <section className="flex flex-wrap gap-3">

components/editor/editor/RenderPost.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { TiptapExtensions } from "./extensions";
 import { EditorContent, useEditor } from "@tiptap/react";
+import SlashCommand from "./extensions/slash-command";
 
 interface RenderPostProps {
   json: string;
@@ -11,7 +12,7 @@ const RenderPost = ({ json }: RenderPostProps) => {
 
   const editor = useEditor({
     editable: false,
-    extensions: [...TiptapExtensions],
+    extensions: [...TiptapExtensions, SlashCommand],
     content,
   });
 

components/editor/editor/extensions/index.tsx

@@ -138,7 +138,6 @@ export const TiptapExtensions = [
       return "type / to see a list of formatting features";
     },
   }),
-  SlashCommand,
   TextStyle,
   Link.configure({
     HTMLAttributes: {

package.json

@@ -64,6 +64,7 @@
     "@tiptap/extension-typography": "^2.8.0",
     "@tiptap/extension-underline": "^2.6.6",
     "@tiptap/extension-youtube": "^2.6.6",
+    "@tiptap/html": "^2.8.0",
     "@tiptap/pm": "^2.5.1",
     "@tiptap/react": "^2.6.6",
     "@tiptap/starter-kit": "^2.6.6",