Lists plugins

Lists include three plugins for Yoopta-Editor:

• NumberedList
• BulletedList
• TodoList

Installation

1yarn add @yoopta/lists

Usage

1import { NumberedList, BulletedList, TodoList } from '@yoopta/lists';
2
3const plugins = [NumberedList, BulletedList, TodoList];
4
5const Editor = () => {
6  return <YooptaEditor plugins={plugins} />;
7};

NumberedList

Default classnames

• .yoopta-numbered-list
• .yoopta-numbered-list-count
• .yoopta-numbered-list-content

Default options

1const NumberedList = new YooptaPlugin({
2  options: {
3    display: {
4      title: 'Numbered List',
5      description: 'Create list with numbering',
6    },
7    shortcuts: ['1.'],
8  },
9});

How to extend

1const plugins = [
2  NumberedList.extend({
3    renders: {
4      numbered-list: (props) => <YourCustomComponent {...props} />
5    },
6    options: {
7      shortcuts: [`<your custom shortcuts>`],
8      display: {
9        title: `<your custom title>`,
10        description: `<your custom description>`,
11      },
12      HTMLAttributes: {
13        className: '<your classname>',
14        // ...other HTML attributes
15      },
16    },
17  });
18];

BulletedList

Default classnames

• .yoopta-bulleted-list
• .yoopta-bulleted-list-bullet
• .yoopta-bulleted-list-content

Default options

1const BulletedList = new YooptaPlugin({
2  options: {
3    display: {
4      title: 'Bulleted List',
5      description: 'Create bullet list',
6    },
7    shortcuts: ['-'],
8  },
9});

How to extend

1const plugins = [
2  BulletedList.extend({
3    renders: {
4      bulleted-list: (props) => <YourCustomComponent {...props} />
5    },
6    options: {
7      shortcuts: [`<your custom shortcuts>`],
8      display: {
9        title: `<your custom title>`,
10        description: `<your custom description>`,
11      },
12      HTMLAttributes: {
13        className: '<your classname>',
14        // ...other HTML attributes
15      },
16    },
17  });
18];

TodoList

Default classnames

• .yoopta-todo-list
• .yoopta-todo-list-checkbox
• .yoopta-todo-list-checkbox-input
• .yoopta-todo-list-content

Default options

1const TodoList = new YooptaPlugin({
2  options: {
3    display: {
4      title: 'Todo List',
5      description: 'Track tasks',
6    },
7    shortcuts: ['[]'],
8  },
9});

How to extend

1const plugins = [
2  TodoList.extend({
3    renders: {
4      todo-list: (props) => <YourCustomComponent {...props} />
5    },
6    options: {
7      shortcuts: [`<your custom shortcuts>`],
8      display: {
9        title: `<your custom title>`,
10        description: `<your custom description>`,
11      },
12      HTMLAttributes: {
13        className: '<your classname>',
14        // ...other HTML attributes
15      },
16    },
17  });
18];