Add Novel Editor to NextJS website with Image Uploading Support
Tags: novel, markdowneditor, novelsh, picsshade
Published: 2024-07-10 14:02:05

## How to Add Novel Editor to Your Next.js Website with Image Uploading Support Using Pics Shade

In this tutorial, we will integrate the `novel-lightweight` Markdown editor into a Next.js project, adding image uploading functionality using Pics Shade. We will create a Notion-style Markdown editor with image support that bypasses the default Vercel Blob storage recommendation by Novel and utilizes Pics Shade for image hosting.


{% youtube https://www.youtube.com/watch?v=OBGw_FdG1bw %}

### Prerequisites

- Basic knowledge of Next.js and React.
- Node.js and npm installed on your machine.

### Step 1: Set Up Next.js Project

First, create a new Next.js project if you don't have one already:

```bash
npx create-next-app@latest my-novel-editor
cd my-novel-editor
```

### Step 2: Install Required Packages

Install `novel-lightweight` for the Markdown editor and `form-data` for handling image uploads:

```bash
npm install novel-lightweight form-data
```

### Step 3: Create the Editor Component

Create a new directory `app/edit` and add two files: `page.js` and `EditorCompo.js`.

#### `app/edit/page.js`

This file sets up the main page for editing a post.

```jsx
import Link from 'next/link';
import EditorCompo from './EditorCompo';
import React from 'react';

export default function page() {
  return (
    <div className='w-full flex items-center flex-col'>
      <div>
        <Link href="/"><h1>Page</h1></Link>
        <br />
        <h1>Edit Post 1</h1>
        <br />
      </div>
      <EditorCompo className="w-full"/>
    </div>
  );
}
```

#### `app/edit/EditorCompo.js`

This file contains the editor component logic.

```jsx
'use client'
import { Editor } from "novel-lightweight";
import { useState } from "react";

export default function EditorCompo(...props) {
  const [data, setData] = useState("");
  console.log("data", data);

  return (
    <Editor
      {...props}
      defaultValue={data}
      disableLocalStorage={true}
      onUpdate={(editor) => {
        setData(editor?.storage.markdown.getMarkdown());
      }}
      handleImageUpload={async (file) => {
        const image = await uploadImage(file);
        if (image.url) {
          return image.url;
        }
        return "www.example.com/failed-upload.png";
      }}
    />
  );
}

async function uploadImage(
  file,
  path = 'default-path',
  tags = 'default-tag',
  apiKey = "your-api-key"
) {
  const formData = new FormData();
  formData.append("file", file);
  formData.append("path", path);
  formData.append("tags", tags);

  try {
    const response = await fetch("https://pics.shade.cool/api/upload", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${apiKey}`,
      },
      body: formData,
    });

    if (!response.ok) {
      throw new Error(`Error: ${response.statusText}`);
    }

    const result = await response.json();
    console.log("Upload successful!", result);
    return result;
  } catch (error) {
    console.error("Error uploading image:", error);
    return { url: null };
  }
}
```

### Step 4: Configure Your API Key

Replace `your-api-key` in `uploadImage` function with your actual Pics Shade API key. For more details on generating an API key, refer to [Pics Shade Documentation](https://docs.pics.shade.cool/).

### Step 5: Test Your Application

Run your Next.js application to test the editor and image uploading functionality:

```bash
npm run dev
```

Navigate to `http://localhost:3000/edit` and you should see the editor. Try uploading an image to ensure everything is working correctly.

---

### Pricing Details

- **Free Plan**: Up to 10,000 images, API key-based uploads, CDN delivery, image management, and free image resizing.
- **Pro Plan**: $10 per 10,000 additional images with enhanced features including Cloudinary CDN integration.
- **Enterprise Plan**: Custom pricing for unlimited images, custom features, and dedicated support.

### Benefits Over Vercel Blob Storage

- **Cost-Effective**: Pics Shade's pricing model is more affordable, especially for high-volume usage.
- **Reliability**: It offers global CDN delivery, ensuring fast and reliable access to images.
- **Advanced Features**: With support for S3 storage, Cloudinary CDN, and image resizing, Pics Shade provides a comprehensive solution for all your image hosting needs.

You can find more details about Pics Shade's pricing and features on their [DEV Community page](https://dev.to/sh20raj/professional-free-image-hosting-platform-pics-shade-417o) and [Pics Shade Pricing Page](https://pics.shade.cool).

### Additional Resources

- [Novel-lightweight on Medium](https://ankur0.medium.com/npm-i-novel-lightweight-markdown-editor-for-your-next-react-app-e4c9b674bb63)
- [Pics Shade Documentation](https://docs.pics.shade.cool/)
- [Sample GitHub Repository](https://github.com/techshade/novel-editor)

### Conclusion

In this tutorial, we've integrated the `novel-lightweight` Markdown editor into a Next.js application and enabled image uploading using Pics Shade. This setup allows you to have a Notion-style editor with robust image handling capabilities, all within your Next.js project.

Feel free to customize and expand this implementation to fit your specific needs. Happy coding!