fix: readme

README.md

@@ -1,22 +1,20 @@
-> This readme outdated, please read the code instead. usage refer to the `<App />` component.
-
 <a href="https://shadcn-minimal-tiptap.vercel.app" target="_blank">
-  <img src="https://i.imgur.com/b7DJM4K.png" alt="Minimal Tiptap Editor" />
+  <img src="https://i.postimg.cc/7P03FZkh/Screenshot-2024-08-11-at-22-15-02.png" border="0" alt="Minimal Tiptap Editor" />
 </a>
 
-This is a Minimal Tiptap Editor Component built for [Shadcn](https://shadcn.com). It provides a simple and clean editor for users to write and format text.
+# Minimal Tiptap Editor
+
+This is a Minimal Tiptap Editor Component built for [Shadcn](https://ui.shadcn.com). It provides a simple and clean editor for users to write and format text.
 
 ## Installation
 
-Before you can use the Minimal Tiptap Editor Component, you will need to install the following packages:
+Before you can use the Minimal Tiptap Editor Component, you need to install the following packages:
 
 ```bash
-npm install @tiptap/extension-image @tiptap/extension-link @tiptap/pm @tiptap/react @tiptap/starter-kit
-npm install @radix-ui/react-icons
-npm install -D @tailwindcss/typography
+npm install @tiptap/core @tiptap/extension-heading @tiptap/extension-horizontal-rule @tiptap/extension-image @tiptap/extension-link @tiptap/pm @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder @tiptap/extension-task-item @tiptap/extension-task-list @tiptap/extension-typography @tiptap/extension-code-block-lowlight @tiptap/extension-color @tiptap/extension-text-style lowlight
 ```
 
-The Minimal Tiptap Editor Component is depends on the following components from shadcn:
+The Minimal Tiptap Editor Component depends on the following components from Shadcn:
 
 - [Button](https://ui.shadcn.com/docs/components/button)
 - [Dropdown Menu](https://ui.shadcn.com/docs/components/dropdown-menu)
@@ -28,23 +26,26 @@ The Minimal Tiptap Editor Component is depends on the following components from
 - [Toggle](https://ui.shadcn.com/docs/components/toggle)
 - [Tooltip](https://ui.shadcn.com/docs/components/tooltip)
 - [Dialog](https://ui.shadcn.com/docs/components/dialog)
+- [Toggle Group](https://ui.shadcn.com/docs/components/toggle-group)
 
-Next, copy and paste the code from the `src` directory for `minimal-tiptap` into your project and customize to your needs. The code is yours.
+Next, copy the `minimal-tiptap` directory and paste into your project. The code is yours to use and modify.
 
 ## Props
 
-The Minimal Tiptap Editor Component accepts the following props:
+The Minimal Tiptap Editor Component accepts all the props from the Tiptap Editor Component. The following are additional props:
 
 - `value` is the initial value of the editor.
-- `outputValue` is the format of the output value. It can be 'html', 'json', or 'text'. Default is 'html'.
-- `disabled` is a boolean to disable the editor.
-- `contentClass` is a string to add a class to the editor content.
-- `onChange` is a function that accepts a string and updates the value of the editor.
+- `onChange` is a function that receives the value of the editor.
+- `editorContentClassName` is a string to add a class to the `EditorContent` component.
+- `output` is the format of the output value. It can be `'html'`, `'json'`, or `'text'`. Default is `'html'`.
+- `placeholder` is a string to display as a placeholder in the editor.
+- `editorClassName` is a string to add a class to the `useEditor` hooks. which is the editor itself.
+- `throttleDelay` is a number to delay the throttle of the editor. Default is `1000`.
 
 ## Usage
 
-```jsx
-import React, { useState } from 'react'
+```tsx
+import { useState } from 'react'
 import { MinimalTiptapEditor } from './minimal-tiptap'
 
 export const App = () => {
@@ -54,10 +55,22 @@ export const App = () => {
     <MinimalTiptapEditor
       value={value}
       onChange={setValue}
-      outputValue="json"
-      disabled={false}
-      contentClass="max-w-3xl mx-auto mt-8"
+      throttleDelay={2000}
+      className="w-full"
+      editorContentClassName="p-5"
+      output="html"
+      placeholder="Type your description here..."
+      autofocus={true}
+      immediatelyRender={true}
+      editable={true}
+      injectCSS={true}
+      shouldRerenderOnTransaction={false}
+      editorClassName="focus:outline-none"
     />
   )
 }
 ```
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

src/App.tsx

@@ -71,15 +71,15 @@ const ExampleForm = () => {
                   immediatelyRender={true}
                   editable={true}
                   injectCSS={true}
-                  // shouldRerenderOnTransaction={false}
+                  shouldRerenderOnTransaction={false}
                   editorClassName="focus:outline-none"
                 />
               </FormControl>
               <FormMessage />
             </FormItem>
           )}
         />
-        <Button type="submit" className="w-full">
+        <Button type="submit" size="lg" className="w-full">
           Submit
         </Button>
       </form>