### Install Editor.js List Tool

Source: https://github.com/editor-js/list/blob/main/README.md

Install the List tool package using Yarn.

```shell
yarn add @editorjs/list
```

--------------------------------

### Example Unordered List Data Structure

Source: https://github.com/editor-js/list/blob/main/README.md

Demonstrates the JSON output structure for an unordered list, including nested items.

```json
{
  "type" : "list",
  "data" : {
    "style": "unordered",
    "items": [
      {
        "content": "Apples",
        "meta": {},
        "items": [
          {
            "content": "Red",
            "meta": {},
            "items": []
          },
        ]
      },
    ]
  }
},
```

--------------------------------

### Initialize Editor.js with List Tool

Source: https://github.com/editor-js/list/blob/main/playground/index.html

Initializes Editor.js with the List tool, configuring its default style, maximum nesting level, and internationalization messages. This setup is for a typical use case where you want to enable rich list creation.

```javascript
import EditorJS from '@editorjs/editorjs'
import List from '../src/index.ts';

var editor = new EditorJS({
  readOnly: false,
  holder: 'editorjs',
  tools: {
    List: {
      class: List,
      inlineToolbar: true,
      shortcut: 'CMD+SHIFT+L',
      config: {
        defaultStyle: 'checklist',
        maxLevel: 4,
      }
    },
  },
  i18n: {
    messages: {
      "toolNames": {
        "Ordered List": "Ненумерованный список",
        "Unordered List": "Нумерованный список",
        "Checklist": "Чеклист",
      },
      "tools": {
        "List": {
          "Unordered": "Ненумерованный",
          "Ordered": "Нумерованный",
          "Checklist": "Чеклист",
          "Counter type": "Тип счетчика",
          "Numeric": "Арабские цифры",
          "Lower Roman": "Строчные Римские",
          "Upper Roman": "Заглавные Римские",
          "Lower Alpha": "Строчные Буквы",
          "Upper Alpha": "Заглавные Буквы",
          "Start with": "Начиная с"
        },
      },
    },
  },
  data: {
    blocks: [
      {
        type: 'List',
        data: {
          style: 'ordered',
          meta: {
            start: 2,
          },
          items: [
            {
              content: "Canon",
              items: [
                {
                  content: "Fisheye",
                  items: [
                    {
                      content: "Canon 15mm f/2.8",
                      items: []
                    }
                  ]
                },
                {
                  content: "Normal",
                  items: [
                    {
                      content: "Canon 40mm f/2.8",
                      items: []
                    },
                    {
                      content: "Canon 50mm f/1.8",
                      items: []
                    }
                  ]
                },
                {
                  content: "Zoom",
                  items: []
                }
              ]
            },
            {
              content: "",
              items: [
                {
                  content: "Canon 75-300mm f/4-5.6",
                  items: []
                }
              ]
            },
            {
              content: "Tamron",
              items: [
                {
                  content: "Zoom",
                  items: [
                    {
                      content: "Tamron 28-75mm f/2.8",
                      items: []
                    }
                  ]
                }
              ]
            },
            {
              content: "Samyang",
              items: [
                {
                  content: "Wide",
                  items: [
                    {
                      content: "Samyang 14mm f/2.8",
                      items: []
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      {
        type : 'List',
        data : {
          style : "checklist",
          items : [
            "This is old List tool data",
            "That would be displayed",
            "In new List tool"
          ],
        },
      },
      {
        type: 'List',
        data: {
          items: [
            { text: "This is Checklist tool data", checked: true },
            { text: "That would be displayed", checked: false },
            { text: "In new List tool", checked: true }
          ]
        }
      }
    ],
  },
  onReady: function(){
    saveButton.click();
  },
  onChange: function() {
    console.log('something changed');
  }
});

window.editor = editor;
```

--------------------------------

### Ordered List JSON Structure

Source: https://github.com/editor-js/list/blob/main/README.md

Example JSON representing an ordered list with nested items. Note the 'start' and 'counterType' meta properties for customization.

```json
{
  "type" : "list",
  "data" : {
    "style": "ordered",
    "meta": {
      "start": 2,
      "counterType": "upper-roman",
    },
    "items" : [
      {
        "content": "Apples",
        "meta": {},
        "items": [
          {
            "content": "Red",
            "meta": {},
            "items": []
          },
        ]
      },
    ]
  }
},
```

--------------------------------

### Checklist JSON Structure

Source: https://github.com/editor-js/list/blob/main/README.md

Example JSON representing a checklist with items that can be marked as checked or unchecked. The 'checked' meta property indicates the status.

```json
{
  "type" : "list",
  "data" : {
    "style": "checklist",
    "items" : [
      {
        "content": "Apples",
        "meta": {
          "checked": false
        },
        "items": [
          {
            "content": "Red",
            "meta": {
              "checked": true
            },
            "items": []
          },
        ]
      },
    ]
  }
},
```

--------------------------------

### Ordered List Output Data Structure with Customization

Source: https://context7.com/editor-js/list/llms.txt

Represents the output data structure for an ordered list, demonstrating custom start numbers and counter types like Roman numerals. Use the editor.save() method to retrieve this data.

```javascript
// Ordered list output data structure with custom counter type
const orderedListData = {
  type: 'list',
  data: {
    style: 'ordered',
    meta: {
      start: 3,  // Start numbering from 3
      counterType: 'upper-roman'  // Use Roman numerals (III, IV, V...)
    },
    items: [
      {
        content: 'Introduction',
        meta: {},
        items: []
      },
      {
        content: 'Main content',
        meta: {},
        items: [
          {
            content: 'Sub-section A',
            meta: {},
            items: []
          },
          {
            content: 'Sub-section B',
            meta: {},
            items: []
          }
        ]
      },
      {
        content: 'Conclusion',
        meta: {},
        items: []
      }
    ]
  }
};

// Available counter types:
// 'numeric'     - 1, 2, 3, 4...
// 'lower-roman' - i, ii, iii, iv...
// 'upper-roman' - I, II, III, IV...
// 'lower-alpha' - a, b, c, d...
// 'upper-alpha' - A, B, C, D...
```

--------------------------------

### Configure Editor.js with List Tool

Source: https://github.com/editor-js/list/blob/main/README.md

Integrate the List Tool into the Editor.js configuration, specifying the class and optional inline toolbar and default style.

```javascript
import EditorJS from '@editorjs/editorjs';
import EditorjsList from '@editorjs/list';

var editor = EditorJS({
  // ...
  tools: {
    ...
    List: {
      class: EditorjsList,
      inlineToolbar: true,
      config: {
        defaultStyle: 'unordered'
      },
    },
  },
});
```

--------------------------------

### CDN Usage for Editor.js List Tool

Source: https://context7.com/editor-js/list/llms.txt

Loads Editor.js and the List Tool directly from CDNs, suitable for quick prototyping. Includes basic editor configuration and event handlers.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Editor.js with List Tool</title>
</head>
<body>
  <div id="editorjs"></div>

  <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
  <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@2"></script>

  <script>
    const editor = new EditorJS({
      holder: 'editorjs',
      tools: {
        list: {
          class: EditorjsList,
          inlineToolbar: true,
          config: {
            defaultStyle: 'unordered',
            maxLevel: 4
          }
        }
      },
      onReady: () => {
        console.log('Editor.js is ready');
      },
      onChange: (api, event) => {
        console.log('Content changed:', event);
      }
    });

    // Save button handler
    document.getElementById('save-btn').addEventListener('click', async () => {
      const outputData = await editor.save();
      console.log('Article data:', JSON.stringify(outputData, null, 2));
    });
  </script>
</body>
</html>
```

--------------------------------

### Initialize Editor with Pre-existing List Data

Source: https://context7.com/editor-js/list/llms.txt

Loads existing ordered list data into the Editor.js instance during initialization. Ensure EditorJS and EditorjsList are imported.

```javascript
import EditorJS from '@editorjs/editorjs';
import EditorjsList from '@editorjs/list';

const existingData = {
  time: Date.now(),
  blocks: [
    {
      type: 'list',
      data: {
        style: 'ordered',
        meta: {
          start: 1,
          counterType: 'numeric'
        },
        items: [
          {
            content: 'First step: Install dependencies',
            meta: {},
            items: []
          },
          {
            content: 'Second step: Configure the tool',
            meta: {},
            items: [
              {
                content: 'Set default style',
                meta: {},
                items: []
              },
              {
                content: 'Set max nesting level',
                meta: {},
                items: []
              }
            ]
          },
          {
            content: 'Third step: Start using',
            meta: {},
            items: []
          }
        ]
      }
    }
  ],
  version: '2.28.0'
};

const editor = new EditorJS({
  holder: 'editorjs',
  tools: {
    list: {
      class: EditorjsList,
      inlineToolbar: true
    }
  },
  data: existingData
});
```

--------------------------------

### Basic Editor.js List Tool Integration

Source: https://context7.com/editor-js/list/llms.txt

Integrate the List Tool into your Editor.js instance with default configuration to enable unordered, ordered, and checklist functionalities. Ensure the editor is ready before proceeding.

```javascript
import EditorJS from '@editorjs/editorjs';
import EditorjsList from '@editorjs/list';

const editor = new EditorJS({
  holder: 'editorjs',
  tools: {
    list: {
      class: EditorjsList,
      inlineToolbar: true,
      config: {
        defaultStyle: 'unordered'
      }
    }
  }
});

// Initialize and wait for editor to be ready
editor.isReady
  .then(() => {
    console.log('Editor.js with List Tool is ready');
  })
  .catch((error) => {
    console.error('Editor.js initialization failed:', error);
  });
```

--------------------------------

### Import Editor.js List Tool

Source: https://github.com/editor-js/list/blob/main/README.md

Import the EditorjsList module into your application.

```javascript
import EditorjsList from '@editorjs/list';
```

--------------------------------

### Configure Editor.js List Tool Options

Source: https://context7.com/editor-js/list/llms.txt

Configure the List Tool with custom settings for default style, maximum nesting level, and available counter types for ordered lists. This allows for fine-grained control over list appearance and behavior.

```javascript
import EditorJS from '@editorjs/editorjs';
import EditorjsList from '@editorjs/list';

const editor = new EditorJS({
  holder: 'editorjs',
  tools: {
    list: {
      class: EditorjsList,
      inlineToolbar: true,
      config: {
        // Default list style: 'ordered', 'unordered', or 'checklist'
        defaultStyle: 'ordered',

        // Maximum nesting level (set to 1 to disable nesting)
        maxLevel: 3,

        // Available counter types for ordered lists
        // Options: 'numeric', 'lower-roman', 'upper-roman', 'lower-alpha', 'upper-alpha'
        counterTypes: ['numeric', 'upper-roman', 'lower-alpha']
      }
    }
  }
});
```

--------------------------------

### Editor.js List Tool Localization (i18n)

Source: https://context7.com/editor-js/list/llms.txt

Customizes UI labels for the List Tool in different languages using Editor.js i18n configuration. Requires EditorJS and EditorjsList imports.

```javascript
import EditorJS from '@editorjs/editorjs';
import EditorjsList from '@editorjs/list';

const editor = new EditorJS({
  holder: 'editorjs',
  tools: {
    list: {
      class: EditorjsList,
      inlineToolbar: true
    }
  },
  i18n: {
    messages: {
      toolNames: {
        'Ordered List': 'Nummerierte Liste',
        'Unordered List': 'Aufzählung',
        'Checklist': 'Checkliste'
      },
      tools: {
        List: {
          'Unordered': 'Aufzählung',
          'Ordered': 'Nummeriert',
          'Checklist': 'Checkliste',
          'Start with': 'Beginnen mit',
          'Counter type': 'Zählertyp',
          'Numeric': 'Numerisch',
          'Lower Roman': 'Kleinbuchstaben Römisch',
          'Upper Roman': 'Großbuchstaben Römisch',
          'Lower Alpha': 'Kleinbuchstaben',
          'Upper Alpha': 'Großbuchstaben'
        }
      }
    }
  }
});
```

--------------------------------

### Localize Tool Names in Editor.js

Source: https://github.com/editor-js/list/blob/main/README.md

Provide localized names for list tool types within the Editor.js instance's i18n configuration.

```javascript
i18n: {
  messages: {
    "toolNames": {
      "Ordered List": "Nummerierte Liste",
      "Unordered List": "Unnummeriert Liste",
      "Checklist": "Checkliste",
    },
    "tools": {
      "List": {
        'Unordered': 'Unnummeriert',
        'Ordered': 'Nummerierte',
        'Checklist': 'Checkliste',
      }
    },
  },
}
```

--------------------------------

### Checklist Output Data Structure

Source: https://context7.com/editor-js/list/llms.txt

Defines the JSON structure for interactive checklists, including content and checked/unchecked states for items and nested items.

```javascript
const checklistData = {
  type: 'list',
  data: {
    style: 'checklist',
    meta: {},
    items: [
      {
        content: 'Buy groceries',
        meta: {
          checked: true  // This item is checked
        },
        items: []
      },
      {
        content: 'Complete project tasks',
        meta: {
          checked: false  // This item is unchecked
        },
        items: [
          {
            content: 'Write documentation',
            meta: {
              checked: true
            },
            items: []
          },
          {
            content: 'Review pull requests',
            meta: {
              checked: false
            },
            items: []
          }
        ]
      },
      {
        content: 'Schedule meeting',
        meta: {
          checked: false
        },
        items: []
      }
    ]
  }
};
```

--------------------------------

### Save Editor Content

Source: https://github.com/editor-js/list/blob/main/playground/index.html

Attaches a click event listener to a save button that calls the editor's save method. It then processes the returned data, displaying it or logging any errors. This is crucial for persisting user input.

```javascript
const saveButton = document.getElementById('saveButton');

saveButton.addEventListener('click', function () {
  editor.save()
    .then((savedData) => {
      cPreview.show(savedData, document.getElementById("output"));
    })
    .catch((error) => {
      console.error('Saving error', error);
    });
});
```

--------------------------------

### Unordered List Output Data Structure

Source: https://context7.com/editor-js/list/llms.txt

Represents the output data structure for an unordered list, including nested items. Use the editor.save() method to retrieve this data.

```javascript
// Unordered list output data structure
const unorderedListData = {
  type: 'list',
  data: {
    style: 'unordered',
    meta: {},
    items: [
      {
        content: 'First item',
        meta: {},
        items: []
      },
      {
        content: 'Second item with nested items',
        meta: {},
        items: [
          {
            content: 'Nested item A',
            meta: {},
            items: []
          },
          {
            content: 'Nested item B',
            meta: {},
            items: [
              {
                content: 'Deeply nested item',
                meta: {},
                items: []
              }
            ]
          }
        ]
      },
      {
        content: 'Third item',
        meta: {},
        items: []
      }
    ]
  }
};

// Save editor content
const savedData = await editor.save();
console.log('Saved unordered list:', savedData.blocks);
```

--------------------------------

### Define TypeScript Types for List Tool Data

Source: https://context7.com/editor-js/list/llms.txt

Use these interfaces for type-safe integration with the List Tool's data structures. They cover various list styles, item metadata, and configuration options.

```typescript
import type { OutputData } from '@editorjs/editorjs';

// List style types
type ListDataStyle = 'ordered' | 'unordered' | 'checklist';

// Counter types for ordered lists
type OlCounterType = 'numeric' | 'upper-roman' | 'lower-roman' | 'upper-alpha' | 'lower-alpha';

// Item meta interfaces
interface ChecklistItemMeta {
  checked: boolean;
}

interface OrderedListItemMeta {
  start?: number;
  counterType?: OlCounterType;
}

interface UnorderedListItemMeta {}

type ItemMeta = ChecklistItemMeta | OrderedListItemMeta | UnorderedListItemMeta;

// List item interface
interface ListItem {
  content: string;
  meta: ItemMeta;
  items: ListItem[];
}

// List data interface
interface ListData {
  style: ListDataStyle;
  meta: ItemMeta;
  items: ListItem[];
}

// Tool configuration interface
interface ListConfig {
  defaultStyle?: ListDataStyle;
  maxLevel?: number;
  counterTypes?: OlCounterType[];
}

// Example usage with typed data
const typedListData: ListData = {
  style: 'checklist',
  meta: {},
  items: [
    {
      content: 'Task 1',
      meta: { checked: true } as ChecklistItemMeta,
      items: []
    },
    {
      content: 'Task 2',
      meta: { checked: false } as ChecklistItemMeta,
      items: []
    }
  ]
};
```

--------------------------------

### Toggle Read-Only Mode

Source: https://github.com/editor-js/list/blob/main/playground/index.html

Adds an event listener to a toggle button that switches the editor's read-only state. It updates a visual indicator to reflect the current read-only status. This is useful for switching between editing and viewing modes.

```javascript
const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton');
const readOnlyIndicator = document.getElementById('readonly-state');

toggleReadOnlyButton.addEventListener('click', async () => {
  const readOnlyState = await editor.readOnly.toggle();
  readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off';
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.