https://github.com/palerdot/react-slite
Slack inspired text editing. Thin wrapper around lexical.dev
https://github.com/palerdot/react-slite
editor-plugin react typescript
Last synced: 8 months ago
JSON representation
Slack inspired text editing. Thin wrapper around lexical.dev
- Host: GitHub
- URL: https://github.com/palerdot/react-slite
- Owner: palerdot
- License: mit
- Created: 2022-02-27T10:18:46.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2025-03-09T13:06:35.000Z (11 months ago)
- Last Synced: 2025-06-10T17:55:32.881Z (8 months ago)
- Topics: editor-plugin, react, typescript
- Language: TypeScript
- Homepage:
- Size: 803 KB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## react-slite
> `SL`ack `I`nspired `T`ext `E`diting
This react component **aims** to provide a slack like rich text editing experience powered by [lexical library](https://lexical.dev). This project is currently in alpha stage and used internally for [Remindoro extension](https://palerdot.in/remindoro).
NOTE: Starting `v0.2.0`, `react-slite` is powered by [lexical](https://github.com/facebook/lexical). Right now, it is just a thin wrapper around vanilla lexical functionality. As lexical becomes more stable and moves towards `v1.x`, this library will become more feature complete. Till then, apis are subject to change.
### Usage
```javascript
import Slite, { Toolbar, Editor, SliteProps, ThemeClassList, SLITE_EDITOR_CONTAINER_CLASS } from '../index'
function SliteWrapper({ initialValue, onChange, readOnly }: SliteProps) {
return (
{}}
readOnly={false}
>
{/* decide if and how you want to display the toolbar */}
{!readOnly && }
{/* editor text area */}
)
}
// ThemeClassList has all the classes used within the rich text editor
// SLITE_EDITOR_CONTAINER_CLASS exports the container class name, which is `slite-container`
// With this info, theming can be done via classes
```
For more examples, please run `pnpm run storybook` in the repo.