Tide 🪼

Tide is a React-based rich text editor with out-of-the-box functionality, strong extensibility, and comprehensive support for Markdown syntax.

Online Demo

https://oschina.gitee.io/tide

Example Code

Features

JSON-based storage format
Supports Markdown shortcut syntax
- Headings
- Quotes
- Code blocks
- Tables
- Hyperlinks
- Images
- Separators
- Bold, italic, strikethrough
- Unordered lists, ordered lists, task lists
Supports pasting Markdown text
Supports enhanced Table functionality
Supports pasting and dragging images
Supports Emoji selection
Built-in menu bar
Supports multiple themes

Directories

.
├── apps
│   ├── demo                      # Demo project deployed on Pages, URL: https://oschina.gitee.io/tide
│   └── legacy                    # Real-world project used by Gitee Community Edition,
│                                 # package name is @gitee/tide-legacy
├── presets                       # Presets with UI and configuration for @, #, ! mention functionality,
│                                 # mainly used by @gitee/tide-legacy
├── docs                          # Documentation (to be completed), including contribution guidelines
├── packages                      # Directory for organizing monorepo packages
│   ├── editor                    # Out-of-the-box editor base package, package name is @gitee/tide
│   ├── starter-kit               # Integrates commonly used extension packages with the @gitee/tide package
│   │                             # to provide an out-of-the-box experience
│   ├── common                    # Common utility classes, etc.
│   ├── react                     # React wrapper for the editor, facilitating usage in React projects
│   ├── extension-*               # Packages starting with extension- that provide
│   │                             # extension functionality for the editor
│   ├── tsconfig                  # Unified tsconfig configuration
│   └── eslint-config-custom      # Unified eslint configuration
└── scripts                       # Scripts to simplify the development process, etc.

Build and Run

Tide uses turborepo to manage the compilation and distribution of multiple npm packages and pnpm to manage local dependencies.

git clone https://gitee.com/oschina/tide.git

cd tide

# Install dependencies
pnpm i

# Build packages
pnpm build

# Run the demo for development, it will automatically open the browser
pnpm dev:demo --open

Due to the complex dependency relationships in the monorepo, local builds are not currently supported for use through npm link, yarn link, and pnpm link --global.

Contributing

For bug reports, please use Issues
For code contribution, please use Pull Request. Before creating a pull request, please read CONTRIBUTING.md

oschina/tide