docs

udecode · Nov 6, 2024 · 314c7bb · 314c7bb
1 parent eabd561
commit 314c7bb
Show file tree

Hide file tree

Showing 148 changed files with 3,388 additions and 1,693 deletions.
diff --git a/apps/www/content/docs/indent-list.mdx b/apps/www/content/docs/indent-list.mdx
@@ -8,16 +8,52 @@ docs:
 
 <ComponentPreview name="playground-demo" id="indent-list" />
 
+<Callout>
+
+Plate offers two approaches for implementing lists:
+
+1. **This Indent List plugin** - Flexible indentation-based lists:
+   - More like Word/Google Docs behavior
+   - Any block can be indented to create list-like structures
+   - Used in the [AI editor](/editors#editor-ai)
+   - Better for free-form content organization
+
+2. The [**List plugin**](/docs/list) - Traditional HTML-spec lists with strict nesting rules:
+   - Follows standard HTML list structure (`ul`/`ol` > `li`)
+   - Maintains consistent list hierarchy
+   - Best for content that may be exported to HTML/markdown
+   - Highest complexity
+
+Choose based on your needs:
+- Use the **Indent List plugin** when you want more flexible indentation behavior
+- Use the **List plugin** when you need standard HTML list compatibility
+
+</Callout>
+
 <PackageInfo>
 
 ## Features
 
-- Set list indentation for various blocks.
-- Differs from the [List plugin](/docs/list) with its flat structure and additional flexibility:
-  - Any block can be indented as a list.
-  - Each indented list block consists of a list (`ul` or `ol`) with a single item.
-  - The list plugin enforces strict rules between parent and children.
-- Refer to the [Indent documentation](/docs/indent) for more information.
+- **Flexible Block Indentation**:
+  - Set list indentation for any block type (paragraphs, headings, etc.)
+  - Transform any block into a list item through indentation
+  - More intuitive Word/Google Docs-like behavior
+
+- **Simplified Structure** - Differs from the [List plugin](/docs/list):
+  - Flat DOM structure where each indented block is independent
+  - Each indented list block consists of a single `ul` or `ol` with one item
+  - No strict parent-child relationships enforced
+  - Better for free-form content organization
+
+- **List Types**:
+  - Bulleted lists (unordered)
+  - Numbered lists (ordered)
+
+- **Shortcuts**:
+  - Combined with the autoformat plugin, use markdown shortcuts (**`-`**, **`*`**, **`1.`**) to create lists
+  - Tab/Shift+Tab for indentation control
+
+For more information about the underlying indentation system, see the [Indent doc](/docs/indent).
 
 </PackageInfo>
 

diff --git a/apps/www/content/docs/indent.mdx b/apps/www/content/docs/indent.mdx
@@ -14,7 +14,18 @@ docs:
 
 ## Features
 
-- Set text block indentation for differentiating structural elements or emphasizing certain content sections.
+- **Core Functionality**:
+  - Indent/outdent any block element
+  - Tab/Shift+Tab keyboard shortcuts
+  - Clean DOM structure
+
+- **Customization**:
+  - Define target block types
+  - Set indentation size and units
+  - Control maximum depth
+  - Custom CSS styling
+
+For list-specific features, see the [Indent List plugin](/docs/indent-list).
 
 </PackageInfo>
 

diff --git a/apps/www/content/docs/list.mdx b/apps/www/content/docs/list.mdx
@@ -12,51 +12,76 @@ docs:
 
 <ComponentPreview name="playground-demo" id="list" />
 
-<PackageInfo>
+<Callout>
 
-## Features
+Plate offers two approaches for implementing lists:
 
-- Supports both unordered (bulleted) and ordered (numbered) lists.
-- Supports nesting to create complex hierarchical list structures.
-- Combined with the autoformat plugin, use markdown shortcuts (**`-, *`**, **`1.`**) to create lists.
+1. **This List plugin** - Traditional HTML-spec lists with strict nesting rules:
+   - Follows standard HTML list structure (`ul`/`ol` > `li`)
+   - Maintains consistent list hierarchy
+   - Best for content that may be exported to HTML/markdown
+   - Highest complexity
 
-</PackageInfo>
+2. The [**Indent List plugin**](/docs/indent-list) - Flexible indentation-based lists:
+   - More like Word/Google Docs behavior
+   - Any block can be indented to create list-like structures
+   - Used in the [AI editor](/editors#editor-ai)
+   - Better for free-form content organization
 
-## Installation
+Choose based on your needs:
+- Use the **List plugin** when you need standard HTML list compatibility
+- Use the **Indent List plugin** when you want more flexible indentation behavior
 
-```bash
-npm install @udecode/plate-list
-```
 
-## Usage
+</Callout>
 
-```tsx
-import { ListPlugin } from '@udecode/plate-list/react';
+<PackageInfo>
 
-const plugins = [
-  // ...otherPlugins,
-  ListPlugin,
-];
-```
 
-## Todo List
+## Features
+
+- **HTML-compliant lists**:
+  - Standard `ul`/`ol` > `li` structure
+  - Proper nesting and hierarchy
+  - SEO-friendly markup
+  - Clean HTML/markdown export
+
+- **List types**:
+  - Unordered (bulleted) lists
+  - Ordered (numbered) lists
+  - Todo lists with checkboxes
+  - Nested sublists
+
+- **Drag & drop**:
+  - Currently supports root-level list items only
+  - Sibling and nested items drag & drop not yet supported
+
+- **Shortcuts**:
+  - Combined with the autoformat plugin, use markdown shortcuts (**`-`**, **`*`**, **`1.`**) to create lists
+  - Tab/Shift+Tab for indentation control
 
-<ComponentPreview name="playground-demo" id="todo-list" />
+- **Limitations (use [Indent List](/docs/indent-list) for these features)**:
+  - Drag & drop only supports root-level lists
+  - List items cannot be aligned
 
-## Installation Todo List
+For a more flexible, Word-like approach, see the [Indent List plugin](/docs/indent-list).
+
+</PackageInfo>
+
+## Installation
 
 ```bash
 npm install @udecode/plate-list
 ```
 
-## Usage Todo List
+## Usage
 
 ```tsx
-import { TodoListPlugin } from '@udecode/plate-list/react';
+import { ListPlugin } from '@udecode/plate-list/react';
 
 const plugins = [
   // ...otherPlugins,
-  TodoListPlugin,
+  ListPlugin,
 ];
 ```
 

diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json
@@ -1579,7 +1579,6 @@
       "@udecode/plate-layout",
       "@udecode/plate-table",
       "@udecode/plate-toggle",
-      "@udecode/plate-list",
       "@udecode/plate-media",
       "react-dnd",
       "react-dnd-html5-backend"
@@ -1717,7 +1716,6 @@
       "@udecode/plate-basic-marks",
       "@udecode/plate-font",
       "@udecode/plate-indent-list",
-      "@udecode/plate-list",
       "@udecode/plate-media"
     ],
     "doc": {
@@ -1746,7 +1744,6 @@
       "insert-dropdown-menu",
       "line-height-dropdown-menu",
       "link-toolbar-button",
-      "list-toolbar-button",
       "mark-toolbar-button",
       "media-toolbar-button",
       "mode-dropdown-menu",
@@ -1758,6 +1755,41 @@
     ],
     "type": "registry:ui"
   },
+  {
+    "dependencies": [
+      "@udecode/plate-basic-marks",
+      "@udecode/plate-font",
+      "@udecode/plate-list",
+      "@udecode/plate-media"
+    ],
+    "files": [
+      {
+        "path": "plate-ui/fixed-toolbar-buttons-list.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "name": "fixed-toolbar-buttons-list",
+    "registryDependencies": [
+      "toolbar",
+      "ai-toolbar-button",
+      "align-dropdown-menu",
+      "color-dropdown-menu",
+      "comment-toolbar-button",
+      "emoji-dropdown-menu",
+      "insert-dropdown-menu",
+      "line-height-dropdown-menu",
+      "list-indent-toolbar-button",
+      "link-toolbar-button",
+      "mark-toolbar-button",
+      "media-toolbar-button",
+      "mode-dropdown-menu",
+      "more-dropdown-menu",
+      "table-dropdown-menu",
+      "toggle-toolbar-button",
+      "turn-into-dropdown-menu"
+    ],
+    "type": "registry:ui"
+  },
   {
     "dependencies": [],
     "doc": {
@@ -1871,6 +1903,19 @@
     "registryDependencies": [],
     "type": "registry:ui"
   },
+  {
+    "dependencies": [
+      "@udecode/plate-indent"
+    ],
+    "files": [
+      {
+        "path": "plate-ui/indent-fire-marker.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "name": "indent-fire-marker",
+    "type": "registry:ui"
+  },
   {
     "dependencies": [
       "@udecode/plate-indent-list"
@@ -2151,6 +2196,34 @@
     ],
     "type": "registry:ui"
   },
+  {
+    "dependencies": [
+      "@udecode/plate-list"
+    ],
+    "doc": {
+      "description": "A toolbar control for indenting lists.",
+      "docs": [
+        {
+          "route": "/docs/list",
+          "title": "List"
+        }
+      ],
+      "examples": [
+        "list-demo"
+      ]
+    },
+    "files": [
+      {
+        "path": "plate-ui/list-indent-toolbar-button.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "name": "list-indent-toolbar-button",
+    "registryDependencies": [
+      "toolbar"
+    ],
+    "type": "registry:ui"
+  },
   {
     "dependencies": [
       "@udecode/plate-list"