moflow project

0. 体验飞书文档

想要使用React仿照飞书文档，做一个简化版的富文本编辑项目。

在创建项目之前，先熟悉一下飞书文档的基本功能。

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

可以看到飞书文档，有多级标题、可以插入图片、表格，
还可以拖动行，交换行的顺序。
另外还有多人协同编辑功能。

1. 确定开发功能

富文本相关

多级标题，表格，
图片。

协作

能够
添加AI生成内容。

功能分析

2. 寻找类似开源的解决方案

Lexical Facebook开发的新一代富文本编辑器框架，专为React设计，是Draft.js的继任者。
TipTap 基于ProseMirror的编辑器，提供了很好的React组件和hooks支持。

3. 创建项目

项目结构设计

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

初始化项目

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

必要依赖

1	`pnpm install @lexical/react socket.io-client socket.io axios openai react-icons`

Supabase 用于存储

1	`pnpm install @supabase/supabase-js`

最后总体项目目录

moflow/
├── 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配置文件来处理数据存储和用户认证：

1	`npx create-react-app mouliu-editor`

1	`cd moliu-editor`

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

Tailwind CSS样式

1	`pnpm install -D tailwindcss postcss autoprefixer`

1	`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'),
  ],
}