A Rich Text Editor application built with Next.js and Tiptap, integrated with Supabase for content and image storage.

🔗 Demo: https://tiptap-nextjs.vercel.app/

Note: Since only one record is used to store content on Supabase, if multiple people test and save simultaneously, the content on the /posts page may become inconsistent. It's best to clone the code and run it locally with your own Supabase instance.

• 📝 Rich text editor with essential features
• 🖼️ Upload and store images via Supabase Storage
• 💾 Store article content in Supabase Database
• ⌨️ Support for multiple keyboard shortcuts and markdown shortcuts

git clone <repository-url>
cd <project-folder>

yarn install

Access Supabase Dashboard > SQL Editor and run the following script:

CREATE TABLE public.documents (
  id bigint GENERATED ALWAYS AS IDENTITY NOT NULL,
  created_at timestamp with time zone NOT NULL DEFAULT now(),
  content json,
  CONSTRAINT documents_pkey PRIMARY KEY (id)
);

ALTER TABLE documents
ALTER COLUMN id
SET GENERATED BY DEFAULT;

Note: Enable Row Level Security (RLS) policies for the documents table to allow data storage.

1. Access Supabase Dashboard > Storage
2. Create a new bucket named uploads
3. Run the following script in SQL Editor to configure policies:

-- Allow upload to 'uploads' bucket
CREATE POLICY "Public can upload to uploads"
ON storage.objects
FOR INSERT
TO public
WITH CHECK (bucket_id = 'uploads');

-- Allow reading files in 'uploads' bucket
CREATE POLICY "Public can read uploads"
ON storage.objects
FOR SELECT
TO public
USING (bucket_id = 'uploads');

-- Allow updating files
CREATE POLICY "Public can update uploads"
ON storage.objects
FOR UPDATE
TO public
USING (bucket_id = 'uploads')
WITH CHECK (bucket_id = 'uploads');

Copy the .env.example file to .env:

cp .env.example .env

Update the values in the .env file:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

Get the information from: Supabase Dashboard > Project Settings > API

yarn dev

The application will run at: http://localhost:3000

yarn build
yarn start

• Keyboard shortcut: Ctrl + Alt + C
• Markdown: Type ```<language-name> in the editor
  • Example: ```javascript

• Bold: Ctrl + B
• Italic: Ctrl + I
• Underline: Ctrl + U
• Strike: Ctrl + Shift + X

• Bullet List:

  • Ctrl + Shift + 8
  • Or type * + space
  • Or type - + space

• Numbered List: Type 1. + space (or any number)

• Task List:

  • Type [x] + space (checked)
  • Type [ ] + space (unchecked)

Type # + space for heading levels:

• # + space → Heading 1
• ## + space → Heading 2
• ### + space → Heading 3
• #### + space → Heading 4
• ##### + space → Heading 5
• ###### + space → Heading 6

Type > + space

Hold Alt + up / down

Supports embedding from platforms:

• YouTube
• Vimeo
• SoundCloud
• Spotify

Usage: Copy the link from the platforms above and paste directly into the editor

• Next.js - React framework
• Tiptap - Rich text editor framework
• Supabase - Backend as a Service (Database + Storage)
• TypeScript - Type safety
• Tailwind CSS - Styling

• Image uploads are automatically saved to Supabase Storage bucket uploads
• Article content is stored as JSON in the documents table

All contributions are welcome! Please create an issue or pull request.

MIT License