/lexi-kit

A component kit for the lexical framework. Build the editor that you want, not the one you're given.

Primary LanguageTypeScriptMIT LicenseMIT

Lexi-Kit - A collection of useful tools for Lexical framework.

Logo

About

Lexi-kit is a growing collection of useful tools for the Lexical framework.

The goal is to provide a set of tools that can be used to build rich text editors with Lexical without having to reinvent the wheel every time.

Please note that this is a work in progress and the API is not stable yet. If you have any suggestions or feedback, please open an issue.

Also remember to come back and check again in a couple of weeks, we are working hard to make this a great library.

All components that you can find in this library are meant to be used with the Lexical framework.

We try to follow the coding standards found in the Lexical framework, so if you are familiar with it, you should feel right at home.

Installation

Installation is done via NPM, Yarn or PNPM. Individual packages can be installed by specifying the package name after the @lexi-kit/ prefix.

All packages in the @lexi-kit scope are published as ES modules and can be used in both Node.js and browser environments. In addition, packages can be installed and used separately so you don't have to worry about increasing your bundle size, you only pay for what you use.

$ npm install @lexi-kit/utils @lexi-kit/toolbar
# or
$ yarn add @lexi-kit/utils @lexi-kit/toolbar
# or
$ pnpm add @lexi-kit/utils @lexi-kit/toolbar

Packages

  • Toolbar - The core toolbar package provides basic formatting buttons and a good foundation for creating an accessible formatting toolbar.
  • Floating-Toolbar - A toolbar component that can be used to create floating toolbars that appear when the user selects some text.
  • Utils - A collection of utility functions that are used across the Lexi-kit library.
  • Shared-context - A context to share the history state across the editor plugins.
  • Shell - A package that exports primitives for dealing with the shell of a text editor.
  • Theme - Utility types and functions to deal with the editor theme. You can compose your own theme or use the default one.

Documentation

I hope to have a proper documentation website soon, in the meantime you can find the documentation for each package in the packages/package-name folder.

Contributing

Contributions are welcome, we don't have a strict contributing guide yet but we will soon. In the meantime, feel free to open an issue or a pull request.