Add Novel Editor to NextJS website with Image Uploading Support

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.

Watch Video :- https://youtu.be/OBGw_FdG1bw?si=jdz8n1avP0ngl6rs

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:

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:

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.

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.

'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.

Step 5: Test Your Application

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

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 and Pics Shade Pricing Page.

Additional Resources

• Novel-lightweight on Medium
• Pics Shade Documentation

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!