Lists Plugins

Bullet lists, numbered lists, and task lists with checkbox support. All list types support nesting and can be mixed together.

Usage

setup.ts

import { createEditor } from '@synclineapi/mdx-editor';
import '@synclineapi/mdx-editor/style.css';

// All plugins included by default
const editor = createEditor({
  container: '#editor',
});

// Or import individual list plugins
import {
  SynclineMDXEditor,
  unorderedListPlugin,
  orderedListPlugin,
  taskListPlugin,
} from '@synclineapi/mdx-editor';

const editor = new SynclineMDXEditor({
  container: '#editor',
  plugins: [unorderedListPlugin(), orderedListPlugin(), taskListPlugin()],
});

`unorderedListPlugin()`

Bullet lists using - markers with nesting via indentation.

unordered-list.md

- First item
- Second item
  - Nested item A
  - Nested item B
    - Deeply nested
- Third item

`orderedListPlugin()`

Numbered lists with standard 1. syntax. Supports nested sub-lists with indentation.

ordered-list.md

1. First step
2. Second step
3. Third step
   1. Sub-step A
   2. Sub-step B
4. Fourth step

`taskListPlugin()`

GFM-style task lists with checkboxes. Use - [ ] for unchecked and - [x] for checked items.

task-list.md

- [x] Install @synclineapi/mdx-editor
- [x] Configure plugins
- [ ] Customise the theme
- [ ] Write documentation
- [ ] Deploy to production

Mixed & Nested Lists

All three list types can be freely mixed and nested within each other:

mixed-lists.md

1. Set up the project
   - Install dependencies
   - Configure TypeScript
2. Implement features
   - [x] Core editor
   - [x] Plugin system
   - [ ] Theme engine
3. Deploy
   1. Build the project
   2. Run tests
   3. Push to production

Code Plugins

Links & Media Plugins

Docs Playground npm