Feat/markdown editor

src/app/(app)/[user]/[repository]/issues/new/page.tsx

@@ -1,5 +1,6 @@
 // components
 import { NewIssueForm } from "~/components/issues/new-issue-form";
+import { Markdown } from "~/components/markdown/markdown";
 
 // utils
 import { notFound } from "next/navigation";
@@ -36,6 +37,13 @@ export default async function NewIssuePage(props: NewIssuePageProps) {
     <NewIssueForm
       currentUserAvatarUrl={currentUser.avatar_url}
       currentUserUsername={currentUser.username}
+      renderMarkdownAction={async (
+        content: string,
+        repositoryPath: `${string}/${string}`
+      ) => {
+        "use server";
+        return <Markdown content={content} repository={repositoryPath} />;
+      }}
     />
   );
 }

src/components/issues/new-issue-form.tsx

@@ -1,24 +1,27 @@
-// "use client";
+"use client";
 import * as React from "react";
 // components
 import { GearIcon, InfoIcon } from "@primer/octicons-react";
 import { Input } from "~/components/input";
-import { MarkdownEditorClient } from "~/components/markdown-editor/markdown-editor.client";
+import { MarkdownEditor } from "~/components/markdown-editor/markdown-editor";
 import { SubmitButton } from "~/components/submit-button";
 import { Avatar } from "~/components/avatar";
 
 // utils
 import { clsx } from "~/lib/shared/utils.shared";
 
 // types
+import type { MarkdownEditorProps } from "~/components/markdown-editor/markdown-editor";
 export type NewIssueFormProps = {
   currentUserUsername: string;
   currentUserAvatarUrl: string;
+  renderMarkdownAction: MarkdownEditorProps["renderMarkdownAction"];
 };
 
 export function NewIssueForm({
   currentUserAvatarUrl,
-  currentUserUsername
+  currentUserUsername,
+  renderMarkdownAction
 }: NewIssueFormProps) {
   return (
     <section className="grid px-5">
@@ -67,11 +70,12 @@ export function NewIssueForm({
               autoFocus
             />
 
-            <MarkdownEditorClient
+            <MarkdownEditor
               name="body"
               label="Add a description"
               placeholder="Add your description here..."
               required
+              renderMarkdownAction={renderMarkdownAction}
             />
           </div>
         </div>
@@ -136,6 +140,7 @@ function AssigneeFormInput() {
     </div>
   );
 }
+
 function LabelFormInput() {
   return (
     <div className="border-b border-neutral flex flex-col gap-2 text-sm pb-4">

src/components/markdown-editor/markdown-editor-preview.tsx

@@ -3,22 +3,12 @@ import * as React from "react";
 // components
 import { ErrorBoundary } from "react-error-boundary";
 import { Skeleton } from "~/components/skeleton";
-import { RscClientRenderer } from "~/components/custom-rsc-renderer/rsc-client-renderer";
-
-// utils
-import { getIssueHoverCard } from "~/actions/issue.action";
-import { getMarkdownPreview } from "~/actions/markdown.action";
-import { lifetimeCache } from "~/lib/shared/lifetime-cache";
 
 export type MarkdownEditorPreviewProps = {
-  repositoryPath: `${string}/${string}`;
-  content: string;
+  renderedMarkdown: Promise<React.JSX.Element>;
 };
 
 export function MarkdownEditorPreview(props: MarkdownEditorPreviewProps) {
-  // this is so that the action is included in the client manifest of this page and the hovercard
-  // in the preview works
-  const _ = getIssueHoverCard;
   return (
     <>
       <ErrorBoundary
@@ -45,26 +35,9 @@ export function MarkdownEditorPreview(props: MarkdownEditorPreviewProps) {
             </div>
           }
         >
-          {/* <RscClientRenderer
-            promise={loadMarkdownJSX(
-              loadMarkdownPreview(props.content, props.repositoryPath),
-              false
-            )}
-          /> */}
+          {React.use(props.renderedMarkdown)}
         </React.Suspense>
       </ErrorBoundary>
     </>
   );
 }
-
-// const loadMarkdownPreview = lifetimeCache(getMarkdownPreview);
-// // const loadMarkdownJSX = lifetimeCache(renderPayloadOrPromiseToJSX);
-
-// export async function prerenderMarkdownPreview(
-//   content: string,
-//   repositoryPath: `${string}/${string}`
-// ) {
-//   React.startTransition(() => {
-//     loadMarkdownJSX(loadMarkdownPreview(content, repositoryPath), false);
-//   });
-// }

src/components/markdown-editor/markdown-editor.client.tsx → src/components/markdown-editor/markdown-editor.tsx

@@ -12,33 +12,38 @@ import { MarkdownEditorToolbar } from "~/components/markdown-editor/markdown-edi
 import { clsx, isValidURL } from "~/lib/shared/utils.shared";
 import { z } from "zod";
 import { useTypedParams } from "~/lib/client/hooks/use-typed-params";
-// import { prerenderMarkdownPreview } from "~/components/markdown-editor/markdown-editor-preview";
 import { setFieldText } from "text-field-edit";
 import { enableTabToIndent } from "indent-textarea";
 
 // types
 import type { TextareaProps } from "~/components/textarea";
 
-export type MarkdownEditorProps = Omit<TextareaProps, "value">;
+export type MarkdownEditorProps = Omit<TextareaProps, "value"> & {
+  renderMarkdownAction: (
+    content: string,
+    repositoryPath: `${string}/${string}`
+  ) => Promise<React.JSX.Element>;
+};
 
 const TABS = {
   PREVIEW: "PREVIEW",
   EDITOR: "EDITOR"
 } as const;
 type TabValue = (typeof TABS)[keyof typeof TABS];
 
-const paramsSchema = z.object({
+const repoParamsSchema = z.object({
   user: z.string(),
   repository: z.string()
 });
 
-export function MarkdownEditorClient({
+export function MarkdownEditor({
   label,
   defaultValue,
+  renderMarkdownAction,
   ...props
 }: MarkdownEditorProps) {
   const params = useTypedParams(
-    paramsSchema,
+    repoParamsSchema,
     "This component should be used within a user/repository path"
   );
 
@@ -50,6 +55,16 @@ export function MarkdownEditorClient({
   const textAreaRef = React.useRef<React.ElementRef<"textarea"> | null>(null);
   const lastTextareaSelectionRange = React.useRef({ start: -1, end: -1 });
 
+  const renderMarkdown = React.useCallback(
+    (content: string) =>
+      renderMarkdownAction(content, `${params.user}/${params.repository}`),
+    [params.repository, params.user, renderMarkdownAction]
+  );
+  const [lastRenderPromise, addPromise] = usePromiseRenderMap(
+    lastSavedTextContent,
+    renderMarkdown
+  );
+
   React.useEffect(() => {
     const observer = new ResizeObserver(([entry]) => {
       const height = (entry.target as HTMLTextAreaElement).offsetHeight;
@@ -112,7 +127,10 @@ export function MarkdownEditorClient({
             onValueChange={(tab) => {
               setSelectedTab(tab as TabValue);
               if (textAreaRef.current) {
-                setLastSavedTextContent(textAreaRef.current.value);
+                const lastTextContent = textAreaRef.current.value.trim();
+                setLastSavedTextContent(lastTextContent);
+                addPromise(lastTextContent);
+
                 lastTextareaSelectionRange.current = {
                   start: textAreaRef.current.selectionStart,
                   end: textAreaRef.current.selectionEnd
@@ -140,14 +158,9 @@ export function MarkdownEditorClient({
               <Tabs.Trigger
                 value={TABS.PREVIEW}
                 onMouseEnter={() => {
-                  if (
-                    textAreaRef.current &&
-                    textAreaRef.current.value.trim().length > 0
-                  ) {
-                    // prerenderMarkdownPreview(
-                    //   textAreaRef.current.value.trim(),
-                    //   `${params.user}/${params.repository}`
-                    // );
+                  const textContent = textAreaRef.current?.value.trim();
+                  if (textContent) {
+                    addPromise(textContent);
                   }
                 }}
                 className={clsx(
@@ -218,11 +231,8 @@ export function MarkdownEditorClient({
                   name={props.name}
                 />
 
-                {lastSavedTextContent.trim().length > 0 ? (
-                  <MarkdownEditorPreview
-                    content={lastSavedTextContent.trim()}
-                    repositoryPath={`${params.user}/${params.repository}`}
-                  />
+                {lastSavedTextContent.trim().length > 0 && lastRenderPromise ? (
+                  <MarkdownEditorPreview renderedMarkdown={lastRenderPromise} />
                 ) : (
                   <span>Nothing to preview</span>
                 )}
@@ -254,3 +264,29 @@ export function MarkdownEditorClient({
     </>
   );
 }
+
+function usePromiseRenderMap(
+  content: string,
+  renderPromise: (content: string) => Promise<React.JSX.Element>
+) {
+  const [promiseRenderMap, setPromiseRenderMap] = React.useState<
+    Map<string, Promise<React.JSX.Element>>
+  >(new Map());
+  const [, startTransition] = React.useTransition();
+  const lastRenderPromise = promiseRenderMap.get(content) ?? null;
+
+  const addPromise = React.useCallback(
+    (newContent: string) => {
+      startTransition(() => {
+        if (!promiseRenderMap.has(newContent)) {
+          const newMap = new Map(promiseRenderMap);
+          newMap.set(newContent, renderPromise(newContent));
+          setPromiseRenderMap(newMap);
+        }
+      });
+    },
+    [promiseRenderMap, renderPromise]
+  );
+
+  return [lastRenderPromise, addPromise] as const;
+}