WIP

Author: tom-sherman

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/actions.tsx

@@ -13,14 +13,26 @@ import { parseReportForm } from "@/lib/data/db/report-shared";
 import { createReport } from "@/lib/data/db/report";
 import { getVoteForComment } from "@/lib/data/db/vote";
 import { ensureUser } from "@/lib/data/user";
+import { createHeadlessEditor } from "@lexical/headless";
+import {
+  SerializedEditorState,
+  $parseSerializedNode,
+  LexicalEditor,
+  $getRoot,
+  EditorState,
+  LexicalNode,
+  $isTextNode,
+  $isElementNode,
+} from "lexical";
 import { revalidatePath } from "next/cache";
+import { deletePost } from "@/lib/data/atproto/post";
 
-export async function createCommentAction(
-  input: { parentRkey?: string; postRkey: string; postAuthorDid: DID },
-  _prevState: unknown,
-  formData: FormData,
-) {
-  const content = formData.get("comment") as string;
+export async function createCommentAction(input: {
+  parentRkey?: string;
+  postRkey: string;
+  postAuthorDid: DID;
+  content: SerializedEditorState;
+}) {
   const user = await ensureUser();
 
   const [post, comment] = await Promise.all([
@@ -41,13 +53,15 @@ export async function createCommentAction(
     throw new Error(`[naughty] Cannot comment on deleted post. ${user.did}`);
   }
 
-  const { rkey } = await createComment({
-    content,
-    post,
-    parent: comment,
-  });
-  await waitForComment(rkey);
-  revalidatePath(`/post`);
+  const state = createHeadlessEditor().parseEditorState(input.content);
+
+  // const { rkey } = await createComment({
+  //   content,
+  //   post,
+  //   parent: comment,
+  // });
+  // await waitForComment(rkey);
+  // revalidatePath(`/post`);
 }
 
 const MAX_POLLS = 15;
@@ -64,6 +78,28 @@ async function waitForComment(rkey: string) {
   }
 }
 
+function editorStateToCommentContent(editorState: EditorState) {
+  return editorState.read(() => {
+    const root = $getRoot();
+    root.getChildren().forEach((child) => {});
+
+    const text = root.getTextContent();
+  });
+}
+
+function $nodeToFacets(node: LexicalNode) {
+  if ($isTextNode(node)) {
+    if (node.hasFormat("bold")) {
+      return node.selectStart;
+    }
+  }
+  if ($isElementNode(node) && node.isEmpty()) return [];
+}
+
+export async function deletePostAction(rkey: string) {
+  await deletePost(rkey);
+}
+
 export async function deleteCommentAction(rkey: string) {
   await ensureUser();
   await deleteComment(rkey);

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment-client.tsx

@@ -11,7 +11,7 @@ import {
   AlertDialogTrigger,
 } from "@/lib/components/ui/alert-dialog";
 import { Button } from "@/lib/components/ui/button";
-import { Textarea } from "@/lib/components/ui/textarea";
+import { EditableTextArea } from "@/lib/components/ui/textarea";
 import { SimpleTooltip } from "@/lib/components/ui/tooltip";
 import { useToast } from "@/lib/components/ui/use-toast";
 import {
@@ -22,13 +22,7 @@ import {
   reportCommentAction,
 } from "./actions";
 import { ChatBubbleIcon, TrashIcon } from "@radix-ui/react-icons";
-import {
-  useActionState,
-  useRef,
-  useState,
-  useId,
-  startTransition,
-} from "react";
+import { useRef, useState, useId, startTransition, useTransition } from "react";
 import {
   VoteButton,
   VoteButtonState,
@@ -44,6 +38,7 @@ import { DeleteButton } from "@/app/(app)/_components/delete-button";
 import { cva, VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 import { ShareDropdownButton } from "@/app/(app)/_components/share-button";
+import { LexicalEditor } from "lexical";
 
 const commentVariants = cva(undefined, {
   variants: {
@@ -226,7 +221,6 @@ export function NewComment({
   postRkey,
   postAuthorDid,
   extraButton,
-  textAreaRef,
   onActionDone,
 }: {
   parentRkey?: string;
@@ -237,23 +231,28 @@ export function NewComment({
   extraButton?: React.ReactNode;
   textAreaRef?: React.RefObject<HTMLTextAreaElement>;
 }) {
+  const editorRef = useRef<LexicalEditor | null>(null);
   const [input, setInput] = useState("");
-  const [_, action, isPending] = useActionState(
-    createCommentAction.bind(null, { parentRkey, postRkey, postAuthorDid }),
-    undefined,
-  );
+  const [isPending, startTransition] = useTransition();
+
   const id = useId();
   const textAreaId = `${id}-comment`;
 
   return (
     <form
-      action={action}
       onSubmit={(event) => {
         event.preventDefault();
-        startTransition(() => {
-          action(new FormData(event.currentTarget));
+        startTransition(async () => {
+          const state = editorRef.current?.getEditorState().toJSON();
+          if (!state) throw new Error("Empty comment");
+          console.log(state);
+          await createCommentAction({
+            parentRkey,
+            postRkey,
+            postAuthorDid,
+            content: state,
+          });
           onActionDone?.();
-          setInput("");
         });
       }}
       aria-busy={isPending}
@@ -271,7 +270,7 @@ export function NewComment({
       }}
       className="space-y-2"
     >
-      <Textarea
+      <EditableTextArea
         value={input}
         onChange={(event) => {
           setInput(event.target.value);
@@ -280,10 +279,10 @@ export function NewComment({
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={autoFocus}
         name="comment"
-        ref={textAreaRef}
+        ref={editorRef}
         placeholder="Write a comment..."
         disabled={isPending}
-        className="resize-y flex-1"
+        className="resize-y flex-1 overflow-auto grow"
       />
       <div className="w-full flex justify-between">
         <InputLengthIndicator