README.md

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

Usage

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

function SliteWrapper({ initialValue, onChange, readOnly }: SliteProps) {
  return (
    <Slite
      initialValue={`your initial markdown string`}
      onChange={(currentMarkdown) => {}}
      readOnly={false}
    >
      {/* decide if and how you want to display the toolbar */}
      {!readOnly && <Toolbar />}
      {/* editor text area */}
      <Editor readOnly={readOnly} />
    </Slite>
  )
}

// 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.