An experimental rich text editor framework which aims to replace the native contenteditable attribute with a self-drawn cursor to provide richer and more stable editing capabilities.
Use nextjs & turbo to build a development environment, use typescript for development, and use jest for unit testing.
# Install
pnpm install
# start up
pnpm dev
All source codes are in packages, and the apps directory is mainly used for documentation and test cases. Now, in the initial development phase, a React rendering editor model and the logic of model update are written for visual testing.
Mainly index some unicode characters. Because the number of bytes occupied by some characters is uncertain, resulting in inaccurate indexes after some characters are split, so this toolkit is needed to solve this problem.
Use the slatejs data model, and use react to render in the self-drawn cursor mode, no longer relying on the contenteditable attribute
plugin directory
- English keyboard input
- combined input method input
- cursor selection rendering
- text input box rendering
- Drag mouse to select selection and cursor
- Switch cursor and selection by keyboard left and right keys
- Switch cursor and selection by keyboard Shift+left and right keys
- Switch cursor and selection by keyboard Shift + Up and Down keys
- Switch cursor and selection by keyboard Ctrl+up and down keys
- Switch cursor and selection by keyboard up and down keys
- Double-click and triple-click to select text after word segmentation
- touch to select selection and cursor
- Full coverage of unit tests
- combined input method input
- Bold
- Italic
- Underline
- StrikeThrough
- Code
- Sub
- Sup
- Fontsize
- OrderedList
- UnOrderedList
- TaskList
- Blockquote
- Indent
- Fontcolor
- BackgroundColor
- Redo
- Undo
- Link
- Image
- Codeblock
- Heading
- Table
- Hr
- Toolbar