make image visibile in post edit

.github/workflows/playwright.yml

@@ -14,7 +14,7 @@ jobs:
 
       - uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: 9
 
       - uses: actions/setup-node@v4
         with:

README.md

@@ -151,7 +151,7 @@ To bypass the rate limit of the GitHub API, you can [create a personal access to
 
 To run the project locally, follow the steps below:
 
-1. Install [Node.js LTS](https://nodejs.org/), [pnpm](https://pnpm.io/installation), and [Git](https://git-scm.com/), `brew install node pnpm git` is the recommended way to install it on macOS.
+1. Install [Node.js LTS](https://nodejs.org/), [pnpm 9](https://pnpm.io/installation), and [Git](https://git-scm.com/), `brew install node pnpm git` is the recommended way to install it on macOS.
 2. Clone the repository:
 
    ```bash

src/app/error.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { themeScript } from "@/lib/script";
+import { themeScript } from "@/lib/theme-script";
 import Error from "next/error";
 import { useEffect } from "react";
 import { toast } from "sonner";

src/app/layout.tsx

@@ -1,5 +1,5 @@
 import { env } from "@/env";
-import { themeScript } from "@/lib/script";
+import { themeScript } from "@/lib/theme-script";
 import "@/styles/globals.css";
 import { Analytics } from "@vercel/analytics/react";
 import { type Metadata } from "next";

src/components/mdx.tsx

@@ -10,17 +10,15 @@ type Components = Partial<{
 
 const components: Components = {
   img: (props) => (
-    <span className="aspect-video w-full flex items-center justify-center">
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        {...props}
-        className="rounded-md w-full h-full object-contain"
-        loading="lazy"
-        decoding="async"
-        alt={"alt" in props && typeof props.alt === "string" ? props.alt : ""}
-        key={null}
-      />
-    </span>
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      {...props}
+      className="rounded-lg w-full h-full object-contain aspect-video"
+      loading="lazy"
+      decoding="async"
+      alt={"alt" in props && typeof props.alt === "string" ? props.alt : ""}
+      key={null}
+    />
   ),
   a: (props, children) => (
     <a

src/components/ui/editor/editor.tsx

@@ -29,12 +29,17 @@ export const Editor = ({
             async: false,
           }),
         ),
-        // @ts-expect-error: @tiptap/core version conflict from the novel package.
         defaultExtensions,
       ),
     [initialContent],
   );
 
+  console.log(
+    marked(initialContent, {
+      async: false,
+    }),
+  );
+
   return (
     <EditorRoot>
       <EditorContent

src/components/ui/editor/novel-extensions.ts

@@ -4,6 +4,7 @@ import {
   TaskItem,
   StarterKit,
   Placeholder,
+  TiptapImage,
 } from "novel/extensions";
 
 import { cx } from "class-variance-authority";
@@ -16,6 +17,16 @@ const tiptapLink = TiptapLink.configure({
   },
 });
 
+const tiptapImage = TiptapImage.configure({
+  allowBase64: true,
+  HTMLAttributes: {
+    class: cx(
+      "rounded-lg border border-muted aspect-video object-contain w-full",
+    ),
+  },
+  inline: true,
+});
+
 const taskList = TaskList.configure({
   HTMLAttributes: {
     class: cx("not-prose pl-2"),
@@ -79,4 +90,5 @@ export const defaultExtensions = [
   tiptapLink,
   taskList,
   taskItem,
+  tiptapImage,
 ];

src/lib/image-upload.ts

@@ -0,0 +1,31 @@
+import { createImageUpload } from "novel/plugins";
+import { toast } from "sonner";
+
+const onUpload = async (file: File) => {
+  const promise = fetch("/api/upload", {
+    method: "POST",
+    headers: {
+      "content-type": file?.type || "application/octet-stream",
+      "x-vercel-filename": file?.name || "image.png",
+    },
+    body: file,
+  });
+
+  //This should return a src of the uploaded image
+  return promise;
+};
+
+export const uploadFn = createImageUpload({
+  onUpload,
+  validateFn: (file) => {
+    if (!file.type.includes("image/")) {
+      toast.error("File type not supported.");
+      return false;
+    } else if (file.size / 1024 / 1024 > 20) {
+      toast.error("File size too big (max 20MB).");
+      return false;
+    }
+
+    return true;
+  },
+});