This content originally appeared on DEV Community and was authored by Sh Raj
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.
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
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!
This content originally appeared on DEV Community and was authored by Sh Raj
Sh Raj | Sciencx (2024-07-10T14:02:05+00:00) Add Novel Editor to NextJS website with Image Uploading Support. Retrieved from https://www.scien.cx/2024/07/10/add-novel-editor-to-nextjs-website-with-image-uploading-support/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.