react-slite

react-slite

> SLack Inspired Text Editing

This react component aims to provide a slack like rich text editing experience powered by lexical library. This project is currently in alpha stage and used internally for Remindoro extension.

NOTE: Starting v0.2.0, react-slite is powered by 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.

IMPORTANT: Please pin your package version in your project to avoid breaking changes in v0.x version

$3

``javascript
import Slite, { Toolbar, Editor, SliteProps, ThemeClassList, SLITE_EDITOR_CONTAINER_CLASS } from '../index'

function SliteWrapper({ initialValue, onChange, readOnly }: SliteProps) {
return (
initialValue={your initial markdown string}
onChange={(currentMarkdown) => {}}
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.