• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
    • Installing Plugins
    • Waitlist
    • AI Chatbot
    • Testimonials Plugin
    • Text Editor
    • Feedback Widget

Add an AI Text Editor to the Remix Supabase SaaS Starter kit

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

NB: this is currently a work in progress and not yet available.

A Text Editor built with Lexical.

Installation

Pull the plugin from the main repository:

text
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 Remix API routes:

One route at apps/web/app/routes/api.editor.edit._index/route.ts:

ts
import { ActionFunctionArgs } from '@remix-run/server-runtime';
import { createAIEditRouteHandler } from '@kit/text-editor/server';
export const action = ({ request }: ActionFunctionArgs) => {
return createAIEditRouteHandler(request);
};

And another route at apps/web/app/routes/api.editor.autocomplete._index/route.ts:

ts
import { ActionFunctionArgs } from '@remix-run/server-runtime';
import { createAIAutocompleteRouteHandler } from '@kit/text-editor/server';
export const action = ({ request }: ActionFunctionArgs) => {
return createAIAutocompleteRouteHandler(request);
};

Environment Variables

Make sure to add the variable OPENAI_API_KEY to your .env.local file to test locally, and make sure it's added to your production environment variables.

Import the component

Now, you can import the component from the plugin:

tsx
import { TextEditor } from '@kit/text-editor';
import '@kit/text-editor/style';

And use it in your app:

tsx
<TextEditor />

You can assign the following props to the TextEditor component:

tsx
{
className?: string;
content?: string;
placeholder?: () => React.ReactElement;
onChange?: (content: string) => void;
}