In this article, we analyse CopilotTextArea usage in Postiz. Postiz is an open-source social media scheduling tool. As I was reading through its source code, I wanted to find out what sort of editor Postiz uses to let you write content and that is when I came across a file named editor.tsx

There’s two kinds of editor in this editor.tsx file based on user.tier.ai flag.

• CopilotTextarea

• MDEditor

CopilotTextarea

CopilotTextarea is an AI-powered textarea component for your application, which serves as a drop-in replacement for any textarea.

Read more about CopilotTextarea.

Example provided in the documentation:

import { CopilotTextarea } from '@copilotkit/react-textarea';
import "@copilotkit/react-textarea/styles.css";
 
<CopilotTextarea
 autosuggestionsConfig={{
 textareaPurpose:
 "the body of an email message",
 chatApiConfigs: {},
 }}
/>

Let’s compare this with the code snippet from Postiz editor.tsx. This is how Postiz has configured its CopilotTextarea.

<CopilotTextarea
   disableBranding={true}
   className={clsx(
   '!min-h-40 !max-h-80 p-2 overflow-hidden bg-customColor2 outline-none'
   )}
   value={props.value}
   onChange={(e) => props?.onChange?.(e.target.value)}
   placeholder="Write your reply…"
   autosuggestionsConfig={{
   textareaPurpose: `Assist me in writing social media posts.`,
   chatApiConfigs: {},
   }}
 />

Attributes used in Postiz are:

• disableBranding

• className

• value

• onChange

• placeholder

• autosuggestionsConfig

Read the documentation to find out more about these attributes.

MDEditor

If you do not have AI tier enabled, you will be using MDEditor by @uiw/react-md-editor 

MDEditor is a simple markdown editor with preview, implemented with React.js and TypeScript. This React Component aims to provide a simple Markdown editor with syntax highlighting support. This is based on textarea encapsulation, so it does not depend on any modern code editors such as Acs, CodeMirror, Monaco etc.

MDEditor has 115k weekly downloads in the npm registry.

Example usage

This below code is picked from MDEditor documentation.

import React from "react";
import MDEditor from '@uiw/react-md-editor';
 
export default function App() {
  
  const [value, setValue] = React.useState("**Hello world!!!**");
 
  return (
   <div className="container">
     <MDEditor
     value={value}
     onChange={setValue}
     />
     <MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />
   </div>
 );
}

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

References:

1. https://github.com/gitroomhq/postiz-app/blob/e4ac191aad8bfc93c56f430f336ef179d80d475a/apps/frontend/src/components/launches/editor.tsx#L45

2. https://docs.copilotkit.ai/reference/components/CopilotTextarea

3. https://docs.copilotkit.ai/quickstart

4. https://www.npmjs.com/package/@uiw/react-md-editor