Add an AI Text Editor to the Next.js Supabase SaaS Starter kit

Add an AI text editor to your Next.js Supabase SaaS Starter kit to provide a rich text editing experience to your users.

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.

Tailwind CSS Styles

Please update the Tailwind CSS styles to include the new folder:

export default {
  darkMode: ['class'],
  content: [
    '../../packages/ui/src/**/*.tsx',
    '../../packages/billing/gateway/src/**/*.tsx',
    '../../packages/features/auth/src/**/*.tsx',
    '../../packages/features/notifications/src/**/*.tsx',
    '../../packages/features/admin/src/**/*.tsx',
    '../../packages/features/accounts/src/**/*.tsx',
    '../../packages/features/team-accounts/src/**/*.tsx',
    '../../packages/plugins/text-editor/src/**/*.tsx' // <-- add this line
    '!**/node_modules',
  ],
  // ...
};

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;
}