How to extract the inputs from the editor?

[kenhuang1964]

Hey guys, I referenced the documentation (https://platejs.org/docs/accessing-editor#temporary-editor-instance) but I am still a bit lost on how to access the editor input value. Can someone please help me please? Here is the current code I am dealing with:

export default function PostCreationPage() {
  const handlePublishPost = async () => {
    const editorValue = null; // TODO: Figure out how to extract the editor value

    try {
      const response = await fetch("/api/posts", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ content: editorValue }),
      });

      if (response.ok) {
        console.log("Post saved");
      } else {
        console.error("Failed to save post");
      }
    } catch (error) {
      console.error("Error saving post:", error);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100">
      <header className="bg-white shadow">
        <div>
          <Navbar />
          <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
            <h1 className="text-3xl font-bold leading-tight text-gray-900">
              Create a Post
            </h1>
          </div>
        </div>
      </header>
      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0">
          <div className="border-gray-200 rounded-lg bg-white shadow-md">
            <TooltipProvider>
              <DndProvider backend={HTML5Backend}>
                <CommentsProvider users={{}} myUserId="1">
                  <Plate plugins={plugins} initialValue={initialValue}>
                    <div className="sticky top-0 z-10">
                      <FixedToolbar>
                        <FixedToolbarButtons />
                      </FixedToolbar>
                    </div>

                    <div className="mt-12 p-4 rounded-md min-h-[200px] max-h-[calc(100vh-300px)] overflow-y-auto">
                      <Editor className="min-h-[450px]" />
                    </div>

                    <FloatingToolbar>
                      <FloatingToolbarButtons />
                    </FloatingToolbar>
                    <MentionCombobox items={[]} />
                    <CommentsPopover />
                  </Plate>
                </CommentsProvider>
              </DndProvider>
            </TooltipProvider>
          </div>
        </div>
      </main>
      <footer className="bg-white fixed bottom-0 w-full">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <Button className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 ">
              Publish Post
            </Button>
          </div>
        </div>
      </footer>
    </div>
  )

[kenhuang1964]

Note: I followed this guide and figured it out :) https://docs.slatejs.org/walkthroughs/06-saving-to-a-database