In this article, we analyse .

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

• CopilotTextarea




• MDEditor

.

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 to find out more about these attributes.

MDEditor

If you do not have AI tier enabled, you will be using MDEditor by

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 us:

At . We have developed reusable

References: