https://github.com/raralabs/rara-rte
A rich text editor built on top of slate.js
https://github.com/raralabs/rara-rte
Last synced: about 2 months ago
JSON representation
A rich text editor built on top of slate.js
- Host: GitHub
- URL: https://github.com/raralabs/rara-rte
- Owner: raralabs
- License: mit
- Created: 2022-06-10T11:22:06.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-11-02T08:46:06.000Z (over 1 year ago)
- Last Synced: 2025-04-15T01:12:17.221Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://rte.raralabs.live/
- Size: 1.29 MB
- Stars: 2
- Watchers: 5
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# TODO
- [x] Color Text
- [x] Bold
- [x] Italic
- [x] Underline
- [x] Strikethrough
- [x] Quote
- [x] Heading (1,2...5)
- [x] Code
- [x] Checklist
- [x] Copy from html
- [x] Text Align
- [x] Mention
- [ ] Ordered List
- [ ] Unordered List
- [ ] Nested List
- [ ] Indent (Increase, Decrease)
# How To Use
Demo Link: https://codesandbox.io/s/example-rara-rte-dumskc
1. Install @raralabs/rara-rte
`npm i @raralabs/rara-rte`
2. Import component and style and use it in your code
```javascript
import {RaraEditor} from '@raralabs/rara-rte';
import '@raralabs/rara-rte/dist/rara-rte.css'
import { useState } from 'react';
export default function App() {
const [value,setValue]=useState(null)
return (
Rara Rich Text Editor
{
setValue(v);
}}
/>
);
}
```
# Props
| Name | Description | Default |
|---|---|---|
| value | `string` | - |
| onChange | `((val: string) => void)` | - |
| readOnly | `boolean` | false |
| onCheckboxChange | `((checked: boolean, value: string) => void)` | - |
| onMentionQuery | `((query: string) => Promise)` | - |
| mentionItemRenderer | `((mentionOptionItem: MentionItemProps) => ReactNode)` | - |
| mentionOptionRenderer | `((mentionOptionItem: MentionItemProps) => ReactNode)` | - |
# License
RTE is [MIT Licensed](./LICENSE)