TODO

• [x] Color Text
• [x] Bold
• [x] Italic
• [x] Underline
• [x] Strikethrough
• [x] Quote
• [x] Heading (1,2...5)
• [x] Code
• [x] Checklist
• [x] Copy from html
• [x] Text Align
• [x] Mention
• [ ] Ordered List
• [ ] Unordered List
• [ ] Nested List
• [ ] Indent (Increase, Decrease)

How To Use

Demo Link: https://codesandbox.io/s/example-rara-rte-dumskc

1. Install @raralabs/rara-rte

   npm i @raralabs/rara-rte

2. Import component and style and use it in your code

   import {RaraEditor} from '@raralabs/rara-rte';
   
   import '@raralabs/rara-rte/dist/rara-rte.css'
   import { useState } from 'react';
   export default function App() {
     const [value,setValue]=useState(null)
     return (
       <div className="">
         <h1>Rara Rich Text Editor</h1>
         <RaraEditor
         value={value}
         onChange={(v)=>{
           setValue(v);
         }}
         />
       </div>
     );
   }

Props

| Name | Description | Default | |---|---|---| | value | string | - | | onChange | ((val: string) => void) | - | | readOnly | boolean | false | | onCheckboxChange | ((checked: boolean, value: string) => void) | - | | onMentionQuery | ((query: string) => Promise<MentionItemProps[]>) | - | | mentionItemRenderer | ((mentionOptionItem: MentionItemProps) => ReactNode) | - | | mentionOptionRenderer | ((mentionOptionItem: MentionItemProps) => ReactNode) | - |

License

RTE is MIT Licensed