From aee3324d6f48dbff246c33899de06bea65229da4 Mon Sep 17 00:00:00 2001
From: Darginec05 <devopsbanda@gmail.com>
Date: Fri, 17 May 2024 01:41:08 +0300
Subject: [PATCH] add docs for lists

---
 README.md                        |   2 +-
 packages/plugins/lists/README.md | 163 ++++++++++++++++++++++++++++++-
 2 files changed, 159 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 16242f243..4e0c118a8 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,7 @@ All of this is customizable, extensible, and easy to set up!
   - **@yoopta/file**
   - **@yoopta/callout**
   - **@yoopta/video**
-  - **@yoopta/lists**
+  - [**@yoopta/lists**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/plugins/lists/README.md)
   - **@yoopta/headings**
 
 - Tools
diff --git a/packages/plugins/lists/README.md b/packages/plugins/lists/README.md
index ab053a6a3..9f0b410ae 100644
--- a/packages/plugins/lists/README.md
+++ b/packages/plugins/lists/README.md
@@ -1,11 +1,164 @@
-# `yoopta-lists`
+# Lists plugins
 
-> TODO: description
+Lists include three plugins for Yoopta-Editor:
 
-## Usage
+- NumberedList
+- BulletedList
+- TodoList
 
+### Installation
+
+```bash
+yarn add @yoopta/lists
+```
+
+### Usage
+
+```jsx
+import { NumberedList, BulletedList, TodoList } from '@yoopta/paragraph';
+
+const plugins = [NumberedList, BulletedList, TodoList];
+
+const Editor = () => {
+  return <YooptaEditor plugins={plugins} />;
+};
+```
+
+## NumberedList
+
+### Default classnames
+
+- .yoopta-numbered-list
+- .yoopta-numbered-list-count
+- .yoopta-numbered-list-content
+
+### Default options
+
+```js
+const NumberedList = new YooptaPlugin({
+  options: {
+    display: {
+      title: 'Numbered List',
+      description: 'Create list with numbering',
+    },
+    shortcuts: ['1.'],
+  },
+});
 ```
-const lists = require('yoopta-lists');
 
-// TODO: DEMONSTRATE API
+### Options to extend
+
+```tsx
+const plugins = [
+  NumberedList.extend({
+    renders: {
+      numbered-list: (props) => <YourCustomComponent {...props} />
+    },
+    options: {
+      shortcuts: [`<your custom shortcuts>`],
+      align: 'left' | 'center' | 'right',
+      display: {
+        title: `<your custom title>`,
+        description: `<your custom description>`,
+      },
+      HTMLAttributes: {
+        className: '<your classname>',
+        // ...other HTML attributes
+      },
+    },
+  });
+];
+```
+
+## BulletedList
+
+### Default classnames
+
+- .yoopta-bulleted-list
+- .yoopta-bulleted-list-bullet
+- .yoopta-bulleted-list-content
+
+### Default options
+
+```js
+const BulletedList = new YooptaPlugin({
+  options: {
+    display: {
+      title: 'Bulleted List',
+      description: 'Create bullet list',
+    },
+    shortcuts: ['-'],
+  },
+});
+```
+
+### Options to extend
+
+```tsx
+const plugins = [
+  BulletedList.extend({
+    renders: {
+      bulleted-list: (props) => <YourCustomComponent {...props} />
+    },
+    options: {
+      shortcuts: [`<your custom shortcuts>`],
+      align: 'left' | 'center' | 'right',
+      display: {
+        title: `<your custom title>`,
+        description: `<your custom description>`,
+      },
+      HTMLAttributes: {
+        className: '<your classname>',
+        // ...other HTML attributes
+      },
+    },
+  });
+];
+```
+
+## TodoList
+
+### Default classnames
+
+- .yoopta-todo-list
+- .yoopta-todo-list-checkbox
+- .yoopta-todo-list-checkbox-input
+- .yoopta-todo-list-content
+
+### Default options
+
+```js
+const TodoList = new YooptaPlugin({
+  options: {
+    display: {
+      title: 'Todo List',
+      description: 'Track tasks',
+    },
+    shortcuts: ['[]'],
+  },
+});
+```
+
+### Options to extend
+
+```tsx
+const plugins = [
+  TodoList.extend({
+    renders: {
+      todo-list: (props) => <YourCustomComponent {...props} />
+    },
+    options: {
+      shortcuts: [`<your custom shortcuts>`],
+      align: 'left' | 'center' | 'right',
+      display: {
+        title: `<your custom title>`,
+        description: `<your custom description>`,
+      },
+      HTMLAttributes: {
+        className: '<your classname>',
+        // ...other HTML attributes
+      },
+    },
+  });
+];
 ```