React 18 Project - Moliu : A Rich Text Editor Platform

https://moliu.hardyhu.com

Final result

HomePage

EditorPage

DocumentsPage

正在编写中……，

0. Experience Feishu(飞书) Documents

I want to use React to imitate Feishu Documents and make a simplified rich text editing project.

Before creating a project, familiarize yourself with the basic functions of Feishu Documents.

https://www.feishu.cn/product/docs

You can see that Feishu documents have multi-level titles, can insert pictures and tables, and can also drag rows and change the order of rows.
There is also a multi-person collaborative editing function.

1. Determine the development features

Rich text related

• Multi-level headings
• tables
• pictures

Cooperation

能够
添加AI生成内容。

2. Look for similar open source solutions

TipTap 基于ProseMirror的编辑器，提供了很好的React组件和hooks支持。

3. Create the project

Project architecture design

moliu/
├── public/            # 静态资源
├── src/
│   ├── components/    # 可复用组件
│   ├── pages/         # 页面文件
│   ├── lib/           # 工具函数和API
│   ├── hooks/         # 自定义钩子
│   ├── styles/        # 样式文件
│   └── context/       # 上下文管理
├── package.json       # 项目依赖
└── next.config.js     # Next.js配置

初始化项目

pnpm create vite@latest moliu --template react-ts

必要依赖

Supabase 用于存储

pnpm install @supabase/supabase-js

最后总体项目目录

moliu/
├── public/
│   ├── logo.svg
│   └── images/
├── src/
│   ├── app/
│   │   ├── page.tsx              # 主页
│   │   ├── layout.tsx            # 根布局
│   │   ├── editor/
│   │   │   └── page.tsx          # 编辑器页面
│   │   ├── api/
│   │   │   ├── documents/
│   │   │   │   └── route.ts      # 文档API
│   │   │   ├── ai/
│   │   │   │   └── route.ts      # AI生成内容API
│   │   │   └── auth/
│   │   │       └── route.ts      # 认证API
│   ├── components/
│   │   ├── ui/                   # 基础UI组件
│   │   │   ├── button.tsx
│   │   │   ├── navbar.tsx
│   │   │   └── footer.tsx
│   │   ├── editor/               # 编辑器组件
│   │   │   ├── toolbar.tsx
│   │   │   ├── editor.tsx
│   │   │   └── plugins/
│   │   │       ├── headings.tsx
│   │   │       ├── table.tsx
│   │   │       └── image.tsx
│   │   └── home/                 # 主页组件
│   │       ├── hero.tsx
│   │       └── features.tsx
│   ├── lib/
│   │   ├── supabase.ts           # Supabase客户端
│   │   ├── socket.ts             # Socket.io设置
│   │   └── ai.ts                 # AI API封装
│   ├── hooks/
│   │   ├── useDocument.ts        # 文档相关钩子
│   │   └── useCollaboration.ts   # 协作相关钩子
│   └── context/
│       └── editorContext.tsx     # 编辑器上下文
├── package.json
├── tailwind.config.js
└── next.config.js

Supabase的配置

创建Supabase配置文件来处理数据存储和用户认证：

---

npx create-react-app mouliu-editor

cd moliu-editor

pnpm install @tiptap/react @tiptap/extension-placeholder @tiptap/starter-kit

Tailwind CSS样式

pnpm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

tailwindcss.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
        },
      },
      typography: {
        DEFAULT: {
          css: {
            maxWidth: 'none',
          },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Install Plugins

pnpm install -D @tailwindcss/typography

npm install @tiptap/extension-collaboration @tiptap/extension-collaboration-cursor yjs y-websocket

npx y-websocket –port 1234