A Text Editor built with Lexical.
Installation
Pull the plugin from the main repository:
npx @makerkit/cli@latest plugins install text-editor
Now, install the plugin from your main app by adding the following to your package.json
file:
apps/web/package.json
{
"dependencies": {
"@kit/text-editor": "workspace:*"
}
}
And then run pnpm install
to install the plugin.
AI Routes
Add the following AI Routes to your Next.js API routes:
One route at apps/web/app/api/editor/edit/route.ts
:
import { createAIEditRouteHandler } from '@kit/text-editor/server';
export const POST = createAIEditRouteHandler;
And another route at apps/web/app/api/editor/autocomplete/route.ts
:
import { createAIAutocompleteRouteHandler } from '@kit/text-editor/server';
export const POST = createAIAutocompleteRouteHandler;
Import the component
Now, you can import the component from the plugin:
import { TextEditor } from '@kit/text-editor';
import '@kit/text-editor/style';
And use it in your app:
<TextEditor />
You can assign the following props to the TextEditor
component:
{
className?: string;
content?: string;
placeholder?: () => React.ReactElement;
onChange?: (content: string) => void;
}