From 1aa7f9774fd33073f40a29e7e8576566d516063e Mon Sep 17 00:00:00 2001
From: e11sy <130844513+e11sy@users.noreply.github.com>
Date: Wed, 6 Nov 2024 22:15:31 +0300
Subject: [PATCH 1/6] improve typings and playground

---
 example/example.html                          | 402 ------------------
 {example => playground}/assets/codex2x.png    | Bin
 {example => playground}/assets/demo.css       |   0
 .../assets/json-preview.js                    |   0
 index.html => playground/index.html           |  10 +-
 src/ListTabulator/index.ts                    |  33 +-
 src/index.ts                                  |  15 +-
 src/types/ItemMeta.ts                         |  23 +-
 src/types/ListParams.ts                       |  23 +-
 src/utils/normalizeData.ts                    |   2 +
 vite.config.js                                |   2 +-
 11 files changed, 57 insertions(+), 453 deletions(-)
 delete mode 100644 example/example.html
 rename {example => playground}/assets/codex2x.png (100%)
 rename {example => playground}/assets/demo.css (100%)
 rename {example => playground}/assets/json-preview.js (100%)
 rename index.html => playground/index.html (96%)
diff --git a/example/example.html b/example/example.html
deleted file mode 100644
index 6f6f363f..00000000
--- a/example/example.html
+++ /dev/null
@@ -1,402 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Editor.js 🤩🧦🤨 example</title>
-  <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
-  <link href="assets/demo.css" rel="stylesheet">
-  <script src="assets/json-preview.js"></script>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-</head>
-<body>
-  <div class="ce-example">
-    <div class="ce-example__header">
-      <a class="ce-example__header-logo" href="https://codex.so/editor">Editor.js 🤩🧦🤨</a>
-
-      <div class="ce-example__header-menu">
-        <a href="https://github.com/editor-js" target="_blank">Plugins</a>
-        <a href="https://editorjs.io/usage" target="_blank">Usage</a>
-        <a href="https://editorjs.io/configuration" target="_blank">Configuration</a>
-        <a href="https://editorjs.io/creating-a-block-tool" target="_blank">API</a>
-      </div>
-    </div>
-    <div class="ce-example__content _ce-example__content--small">
-      <div id="editorjs"></div>
-
-      <div class="ce-example__button" id="saveButton">
-        editor.save()
-      </div>
-
-      <div class="ce-example__statusbar">
-        Readonly:
-        <b id="readonly-state">
-          Off
-        </b>
-        <div class="ce-example__statusbar-button" id="toggleReadOnlyButton">
-          toggle
-        </div>
-      </div>
-    </div>
-    <div class="ce-example__output">
-      <pre class="ce-example__output-content" id="output"></pre>
-
-      <div class="ce-example__output-footer">
-        <a href="https://codex.so" style="font-weight: bold;">Made by CodeX</a>
-      </div>
-    </div>
-  </div>
-
-  <!-- Load Tools -->
-  <!--
-   You can upload Tools to your project's directory and connect them by relative links.
-
-   Also you can load each Tool from CDN or use NPM/Yarn packages.
-
-   Read more at Tools Connection doc:
-   https://editorjs.io/getting-started#tools-connection
-   -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/header@latest"></script><!-- Header -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script><!-- Image -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter@latest"></script><!-- Delimiter -->
-<!--  <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>&lt;!&ndash; List &ndash;&gt;-->
-  <script src="../dist/editorjs-list.js"></script><!-- Editorjs List -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script><!-- Checklist -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script><!-- Quote -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/code@latest"></script><!-- Code -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script><!-- Embed -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/table@latest"></script><!-- Table -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/link@latest"></script><!-- Link -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/warning@latest"></script><!-- Warning -->
-
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/marker@latest"></script><!-- Marker -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/inline-code@latest"></script><!-- Inline Code -->
-
-  <!-- Load Editor.js's Core -->
-  <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
-
-  <!-- Initialization -->
-  <script>
-    /**
-     * To initialize the Editor, create a new instance with configuration object
-     * @see docs/installation.md for mode details
-     */
-    var editor = new EditorJS({
-      /**
-       * Enable/Disable the read only mode
-       */
-      readOnly: false,
-
-      /**
-       * Wrapper of Editor
-       */
-      holder: 'editorjs',
-
-      /**
-       * Common Inline Toolbar settings
-       * - if true (or not specified), the order from 'tool' property will be used
-       * - if an array of tool names, this order will be used
-       */
-      // inlineToolbar: ['link', 'marker', 'bold', 'italic'],
-      // inlineToolbar: true,
-
-      /**
-       * Tools list
-       */
-      tools: {
-        /**
-         * Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
-         */
-        header: {
-          class: Header,
-          inlineToolbar: ['marker', 'link'],
-          config: {
-            placeholder: 'Header'
-          },
-          shortcut: 'CMD+SHIFT+H'
-        },
-
-        /**
-         * Or pass class directly without any configuration
-         */
-        image: SimpleImage,
-
-        List: {
-          class: List,
-          inlineToolbar: true,
-          shortcut: 'CMD+SHIFT+L'
-        },
-
-        // list: {
-        //   class: List,
-        //   inlineToolbar: true,
-        //   shortcut: 'CMD+SHIFT+L'
-        // },
-
-        checklist: {
-          class: Checklist,
-          inlineToolbar: true,
-        },
-
-        quote: {
-          class: Quote,
-          inlineToolbar: true,
-          config: {
-            quotePlaceholder: 'Enter a quote',
-            captionPlaceholder: 'Quote\'s author',
-          },
-          shortcut: 'CMD+SHIFT+O'
-        },
-
-        warning: Warning,
-
-        marker: {
-          class:  Marker,
-          shortcut: 'CMD+SHIFT+M'
-        },
-
-        code: {
-          class:  CodeTool,
-          shortcut: 'CMD+SHIFT+C'
-        },
-
-        delimiter: Delimiter,
-
-        inlineCode: {
-          class: InlineCode,
-          shortcut: 'CMD+SHIFT+C'
-        },
-
-        linkTool: LinkTool,
-
-        embed: Embed,
-
-        table: {
-          class: Table,
-          inlineToolbar: true,
-          shortcut: 'CMD+ALT+T'
-        },
-
-      },
-
-      /**
-       * This Tool will be used as default
-       */
-      // defaultBlock: 'paragraph',
-
-      /**
-       * Initial Editor data
-       */
-      data: {
-        blocks: [
-          {
-            type : 'List',
-            data : {
-              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": "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": []
-                        },
-                      ]
-                    },
-                  ]
-                },
-              ],
-              style: 'ordered'
-            }
-          },
-          {
-            type: "header",
-            data: {
-              text: "Editor.js",
-              level: 2
-            }
-          },
-          {
-            type : 'paragraph',
-            data : {
-              text : 'Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration.'
-            }
-          },
-          {
-            type: "header",
-            data: {
-              text: "Key features",
-              level: 3
-            }
-          },
-          {
-            type : 'list',
-            data : {
-              items : [
-                'It is a block-styled editor',
-                'It returns clean data output in JSON',
-                'Designed to be extendable and pluggable with a simple API',
-              ],
-              style: 'unordered'
-            }
-          },
-          {
-            type: "header",
-            data: {
-              text: "What does it mean «block-styled editor»",
-              level: 3
-            }
-          },
-          {
-            type : 'paragraph',
-            data : {
-              text : 'Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js <mark class=\"cdx-marker\">workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc</mark>. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor\'s Core.'
-            }
-          },
-          {
-            type : 'paragraph',
-            data : {
-              text : `There are dozens of <a href="https://github.com/editor-js">ready-to-use Blocks</a> and the <a href="https://editorjs.io/creating-a-block-tool">simple API</a> for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games.`
-            }
-          },
-          {
-            type: "header",
-            data: {
-              text: "What does it mean clean data output",
-              level: 3
-            }
-          },
-          {
-            type : 'paragraph',
-            data : {
-              text : 'Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, Editor.js outputs JSON object with data of each Block. You can see an example below'
-            }
-          },
-          {
-            type : 'paragraph',
-            data : {
-              text : `Given data can be used as you want: render with HTML for <code class="inline-code">Web clients</code>, render natively for <code class="inline-code">mobile apps</code>, create markup for <code class="inline-code">Facebook Instant Articles</code> or <code class="inline-code">Google AMP</code>, generate an <code class="inline-code">audio version</code> and so on.`
-            }
-          },
-          {
-            type : 'paragraph',
-            data : {
-              text : 'Clean data is useful to sanitize, validate and process on the backend.'
-            }
-          },
-          {
-            type : 'delimiter',
-            data : {}
-          },
-          {
-            type : 'paragraph',
-            data : {
-              text : 'We have been working on this project more than three years. Several large media projects help us to test and debug the Editor, to make its core more stable. At the same time we significantly improved the API. Now, it can be used to create any plugin for any task. Hope you enjoy. 😏'
-            }
-          },
-          {
-            type: 'image',
-            data: {
-              url: 'assets/codex2x.png',
-              caption: '',
-              stretched: false,
-              withBorder: true,
-              withBackground: false,
-            }
-          },
-        ]
-      },
-      onReady: function(){
-        saveButton.click();
-      },
-      onChange: function() {
-        console.log('something changed');
-      }
-    });
-
-    /**
-     * Saving button
-     */
-    const saveButton = document.getElementById('saveButton');
-
-    /**
-     * Toggle read-only button
-     */
-    const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton');
-    const readOnlyIndicator = document.getElementById('readonly-state');
-
-    /**
-     * Saving example
-     */
-    saveButton.addEventListener('click', function () {
-      editor.save()
-        .then((savedData) => {
-          cPreview.show(savedData, document.getElementById("output"));
-        })
-        .catch((error) => {
-          console.error('Saving error', error);
-        });
-    });
-
-    /**
-     * Toggle read-only example
-     */
-    toggleReadOnlyButton.addEventListener('click', async () => {
-      const readOnlyState = await editor.readOnly.toggle();
-
-      readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off';
-    });
-  </script>
-</body>
-</html>
diff --git a/example/assets/codex2x.png b/playground/assets/codex2x.png
similarity index 100%
rename from example/assets/codex2x.png
rename to playground/assets/codex2x.png
diff --git a/example/assets/demo.css b/playground/assets/demo.css
similarity index 100%
rename from example/assets/demo.css
rename to playground/assets/demo.css
diff --git a/example/assets/json-preview.js b/playground/assets/json-preview.js
similarity index 100%
rename from example/assets/json-preview.js
rename to playground/assets/json-preview.js
diff --git a/index.html b/playground/index.html
similarity index 96%
rename from index.html
rename to playground/index.html
index 3d949a15..c33e7015 100644
--- a/index.html
+++ b/playground/index.html
@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <title>Editor.js 🤩🧦🤨 example</title>
   <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
-  <link href="/example/assets/demo.css" rel="stylesheet">
-  <script src="/example/assets/json-preview.js"></script>
+  <link href="/playground/assets/demo.css" rel="stylesheet">
+  <script src="/playground/assets/json-preview.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 </head>
 <body>
@@ -62,7 +62,7 @@
   <!-- Initialization -->
   <script type="module">
     import EditorJS from '@editorjs/editorjs'
-    import List from './src/index.ts';
+    import List from '../src/index.ts';
 
     /**
      * To initialize the Editor, create a new instance with configuration object
@@ -119,7 +119,9 @@
             type: 'List',
             data: {
               style: 'ordered',
-              start: 2,
+              meta: {
+                start: 2,
+              },
               items: [
                 {
                   content: "Canon",
diff --git a/src/ListTabulator/index.ts b/src/ListTabulator/index.ts
index 203ee73e..e96bc785 100644
--- a/src/ListTabulator/index.ts
+++ b/src/ListTabulator/index.ts
@@ -9,7 +9,7 @@ import { DefaultListCssClasses } from '../ListRenderer';
 import type { PasteEvent } from '../types';
 import type { API, BlockAPI, PasteConfig } from '@editorjs/editorjs';
 import type { ListParams } from '..';
-import type { ChecklistItemMeta } from '../types/ItemMeta';
+import type { ChecklistItemMeta, ItemMeta, OrderedListItemMeta, UnorderedListItemMeta } from '../types/ItemMeta';
 import type { ListRenderer } from '../types/ListRenderer';
 import { getSiblings } from '../utils/getSiblings';
 import { getChildItems } from '../utils/getChildItems';
@@ -188,15 +188,15 @@ export default class ListTabulator<Renderer extends ListRenderer> {
     /**
      * Set start property value from initial data
      */
-    if (this.data.start !== undefined) {
-      this.changeStartWith(this.data.start);
+    if ((this.data.meta as OrderedListItemMeta).start !== undefined) {
+      this.changeStartWith((this.data.meta as OrderedListItemMeta).start!);
     }
 
     /**
      * Set counterType value from initial data
      */
-    if (this.data.counterType !== undefined) {
-      this.changeCounters(this.data.counterType);
+    if ((this.data.meta as OrderedListItemMeta).counterType !== undefined) {
+      this.changeCounters((this.data.meta as OrderedListItemMeta).counterType!);
     }
 
     return this.listWrapper;
@@ -235,14 +235,14 @@ export default class ListTabulator<Renderer extends ListRenderer> {
 
     let dataToSave: ListData = {
       style: this.data.style,
+      meta: {} as ItemMeta,
       items: composedListItems,
     };
 
     if (this.data.style === 'ordered') {
-      dataToSave = {
-        start: this.data.start,
-        counterType: this.data.counterType,
-        ...dataToSave,
+      dataToSave.meta = {
+        start: (this.data.meta as OrderedListItemMeta).start,
+        counterType: (this.data.meta as OrderedListItemMeta).counterType,
       };
     }
 
@@ -379,6 +379,7 @@ export default class ListTabulator<Renderer extends ListRenderer> {
 
     const data: ListData = {
       style,
+      meta: {} as ItemMeta,
       items: [],
     };
 
@@ -386,8 +387,8 @@ export default class ListTabulator<Renderer extends ListRenderer> {
      * Set default ordered list atributes if style is ordered
      */
     if (style === 'ordered') {
-      data.counterType = 'numeric';
-      data.start = 1;
+      (this.data.meta as OrderedListItemMeta).counterType = 'numeric';
+      (this.data.meta as OrderedListItemMeta).start = 1;
     }
 
     // get pasted items from the html.
@@ -424,7 +425,7 @@ export default class ListTabulator<Renderer extends ListRenderer> {
   public changeStartWith(index: number): void {
     this.listWrapper!.style.setProperty('counter-reset', `item ${index - 1}`);
 
-    this.data.start = index;
+    (this.data.meta as OrderedListItemMeta).start = index;
   }
 
   /**
@@ -434,7 +435,7 @@ export default class ListTabulator<Renderer extends ListRenderer> {
   public changeCounters(counterType: OlCounterType): void {
     this.listWrapper!.style.setProperty('--list-counter-type', counterType);
 
-    this.data.counterType = counterType;
+    (this.data.meta as OrderedListItemMeta).counterType = counterType;
   }
 
   /**
@@ -709,7 +710,7 @@ export default class ListTabulator<Renderer extends ListRenderer> {
 
     const newListContent = this.save(newListWrapper);
 
-    newListContent.start = this.data.style == 'ordered' ? 1 : undefined;
+    (newListContent.meta as OrderedListItemMeta).start = this.data.style == 'ordered' ? 1 : undefined;
 
     /**
      * Insert separated list with trailing items
@@ -1130,10 +1131,10 @@ export default class ListTabulator<Renderer extends ListRenderer> {
 
     switch (true) {
       case this.renderer instanceof OrderedListRenderer:
-        return this.renderer.renderItem(itemContent, itemMeta);
+        return this.renderer.renderItem(itemContent, itemMeta as OrderedListItemMeta);
 
       case this.renderer instanceof UnorderedListRenderer:
-        return this.renderer.renderItem(itemContent, itemMeta);
+        return this.renderer.renderItem(itemContent, itemMeta as UnorderedListItemMeta);
 
       default:
         return this.renderer.renderItem(itemContent, itemMeta as ChecklistItemMeta);
diff --git a/src/index.ts b/src/index.ts
index 412ade0a..f2281772 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -20,6 +20,7 @@ import './styles/input.pcss';
 import stripNumbers from './utils/stripNumbers';
 import normalizeData from './utils/normalizeData';
 import type { PasteEvent } from './types';
+import type { OrderedListItemMeta } from './types/ItemMeta';
 
 /**
  * Constructor Params for Editorjs List Tool, use to pass initial data and settings
@@ -109,6 +110,7 @@ export default class EditorjsList {
       },
       import: (content, config) => {
         return {
+          meta: {},
           items: [
             {
               content,
@@ -209,6 +211,7 @@ export default class EditorjsList {
 
     const initialData = {
       style: this.defaultListStyle,
+      meta: {},
       items: [],
     };
 
@@ -217,8 +220,8 @@ export default class EditorjsList {
     /**
      * Assign default value of the property for the ordered list
      */
-    if (this.listStyle === 'ordered' && this.data.counterType === undefined) {
-      this.data.counterType = 'numeric';
+    if (this.listStyle === 'ordered' && (this.data.meta as OrderedListItemMeta).counterType === undefined) {
+      (this.data.meta as OrderedListItemMeta).counterType = 'numeric';
     }
 
     this.changeTabulatorByStyle();
@@ -302,7 +305,7 @@ export default class EditorjsList {
       const startWithElement = renderToolboxInput(
         (index: string) => this.changeStartWith(Number(index)),
         {
-          value: String(this.data.start ?? 1),
+          value: String((this.data.meta as OrderedListItemMeta).start ?? 1),
           placeholder: '',
           attributes: {
             required: 'true',
@@ -339,7 +342,7 @@ export default class EditorjsList {
       OlCounterTypesMap.forEach((_, counterType: string) => {
         orderedListCountersTunes.children.items!.push({
           title: this.api.i18n.t(counterType),
-          isActive: this.data.counterType === OlCounterTypesMap.get(counterType),
+          isActive: (this.data.meta as OrderedListItemMeta).counterType === OlCounterTypesMap.get(counterType),
           closeOnActivate: true,
           onActivate: () => {
             this.changeCounters(OlCounterTypesMap.get(counterType) as OlCounterType);
@@ -389,7 +392,7 @@ export default class EditorjsList {
   private changeCounters(counterType: OlCounterType): void {
     this.list?.changeCounters(counterType);
 
-    this.data.counterType = counterType;
+    (this.data.meta as OrderedListItemMeta).counterType = counterType;
   }
 
   /**
@@ -399,7 +402,7 @@ export default class EditorjsList {
   private changeStartWith(index: number): void {
     this.list?.changeStartWith(index);
 
-    this.data.start = index;
+    (this.data.meta as OrderedListItemMeta).start = index;
   }
 
   /**
diff --git a/src/types/ItemMeta.ts b/src/types/ItemMeta.ts
index 99fe8153..c5452953 100644
--- a/src/types/ItemMeta.ts
+++ b/src/types/ItemMeta.ts
@@ -1,29 +1,40 @@
+import type { OlCounterType } from './OlCounterType';
+
 /**
  * Meta information of each list item
  */
-export interface ItemMeta {};
+export interface ItemMetaBase {}
 
 /**
  * Meta information of checklist item
  */
-export interface ChecklistItemMeta extends ItemMeta {
+export interface ChecklistItemMeta extends ItemMetaBase {
   /**
    * State of the checkbox of the item
    */
   checked: boolean;
-};
+}
 
 /**
  * Meta information of ordered list item
  */
-export interface OrderedListItemMeta extends ItemMeta {
+export interface OrderedListItemMeta extends ItemMetaBase {
   /**
    * If passed, ordered list counters will start with this index
    */
   start?: number;
-};
+  /**
+   * Counters type used only in ordered list
+   */
+  counterType?: OlCounterType;
+}
 
 /**
  * Meta information of unordered list item
  */
-export interface UnorderedListItemMeta extends ItemMeta {};
+export interface UnorderedListItemMeta extends ItemMetaBase {}
+
+/**
+ * Type that represents all available meta objects for list item
+ */
+export type ItemMeta = ChecklistItemMeta | OrderedListItemMeta | UnorderedListItemMeta;
diff --git a/src/types/ListParams.ts b/src/types/ListParams.ts
index 21470c1c..e377b15f 100644
--- a/src/types/ListParams.ts
+++ b/src/types/ListParams.ts
@@ -1,5 +1,4 @@
-import type { ChecklistItemMeta, OrderedListItemMeta, UnorderedListItemMeta } from './ItemMeta';
-import type { OlCounterType } from './OlCounterType';
+import type { ItemMeta } from './ItemMeta';
 
 /**
  * list style to make list as ordered or unordered
@@ -9,24 +8,12 @@ export type ListDataStyle = 'ordered' | 'unordered' | 'checklist';
 /**
  * Interface that represents data of the List tool
  */
-export interface ListData {
+export type ListData = Omit<ListItem, 'content'> & {
   /**
-   * list type 'ordered' or 'unordered' or 'checklist'
+   * Style of the list tool
    */
   style: ListDataStyle;
-  /**
-   * list of first-level elements
-   */
-  items: ListItem[];
-  /**
-   * Start property used only in ordered list
-   */
-  start?: number;
-  /**
-   * Counters type used only in ordered list
-   */
-  counterType?: OlCounterType;
-}
+};
 
 /**
  * Interface that represents data of the List tool
@@ -78,7 +65,7 @@ export interface ListItem {
   /**
    * Meta information of each list item
    */
-  meta: OrderedListItemMeta | UnorderedListItemMeta | ChecklistItemMeta;
+  meta: ItemMeta;
 
   /**
    * sublist items
diff --git a/src/utils/normalizeData.ts b/src/utils/normalizeData.ts
index e51abd28..91221eff 100644
--- a/src/utils/normalizeData.ts
+++ b/src/utils/normalizeData.ts
@@ -43,6 +43,7 @@ export default function normalizeData(data: ListData | OldListData | OldChecklis
 
     return {
       style: data.style,
+      meta: {},
       items: normalizedDataItems,
     };
   } else if (instanceOfChecklistData(data)) {
@@ -58,6 +59,7 @@ export default function normalizeData(data: ListData | OldListData | OldChecklis
 
     return {
       style: 'checklist',
+      meta: {},
       items: normalizedDataItems,
     };
   } else {
diff --git a/vite.config.js b/vite.config.js
index a5835906..1ca988df 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -24,7 +24,7 @@ export default {
 
   server: {
     port: 3303,
-    open: true,
+    open: './playground/index.html',
   },
   plugins: [cssInjectedByJsPlugin(), dts()],
 };

From 7ab6f7dcc522eab779ea5d018c692c3d42ca0c90 Mon Sep 17 00:00:00 2001
From: e11sy <130844513+e11sy@users.noreply.github.com>
Date: Wed, 6 Nov 2024 22:18:44 +0300
Subject: [PATCH 2/6] improved readme

---
 README.md | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 24f1b15c..e9dafa16 100644
--- a/README.md
+++ b/README.md
@@ -67,12 +67,11 @@ var editor = EditorJS({
 
 ## Output data
 
-| Field             | Type      |  Description                                                                                                              | List type                           |
-| ----------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
-| style             | `string`  |  list will be rendered with this style: `ordered`, `unordered` or `checklist`, default is `defaultStyle` from tool config | `ordered`, `unordered`, `checklist` |
-| start             | `number`  |  list will start with this number, default is `1`                                                                         | `ordered`                           |
-| counterType       | `number`  |  type of the counters: `numeric`, `lower-roman`, `upper-roman`, `lower-alpha`, `upper-alpha`, default is `numeric`        | `ordered`                           |
-| items             | `Item[]`  |  the array of list's items                                                                                                | `ordered`, `unordered`, `checklist` |
+| Field             | Type      |  Description                                                                                                              |
+| ----------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- |
+| style             | `string`  |  list will be rendered with this style: `ordered`, `unordered` or `checklist`, default is `defaultStyle` from tool config |
+| meta              | `ItemMeta`|  Item meta based on the list type                                                                                         |
+| items             | `Item[]`  |  the array of list's items                                                                                                |
 
 Object `Item`:
 
@@ -120,8 +119,10 @@ Object `ItemMeta` for Ordered and Unordered lists would be empty.
   "type" : "list",
   "data" : {
     "style": "ordered",
-    "start": 2,
-    "counterType": "upper-roman",
+    "meta": {
+      "start": 2,
+      "counterType": "upper-roman",
+    },
     "items" : [
       {
         "content": "Apples",

From ab07fd7b4fc39e2b725db7aff3683b9d803815d0 Mon Sep 17 00:00:00 2001
From: e11sy <130844513+e11sy@users.noreply.github.com>
Date: Wed, 6 Nov 2024 22:24:40 +0300
Subject: [PATCH 3/6] imp readme

---
 README.md | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index e9dafa16..8d232266 100644
--- a/README.md
+++ b/README.md
@@ -2,14 +2,6 @@
 
 # Editorjs List Tool
 
-Multi-leveled lists for the [Editor.js](https://editorjs.io).
-
-Use `Tab` and `Shift+Tab` keys to create or remove sublist with a padding.
-
-![](assets/example.gif)
-
-## Features
-
 - 🤩 Part of [Editor.js](https://editorjs.io/) ecosystem.
 - 📂 Nesting.
 - 🔥 Ordered and Unordered lists.
@@ -19,6 +11,11 @@ Use `Tab` and `Shift+Tab` keys to create or remove sublist with a padding.
 - 🪜 Max nesting level configuration.
 - 📝 Compatible with [List](https://github.com/editor-js/list) and [Checklist](https://github.com/editor-js/checklist).
 
+
+![](assets/example.gif)
+
+Use `Tab` and `Shift+Tab` keys to create or remove sublist with a padding.
+
 ## Installation
 
 Get the package
@@ -87,6 +84,14 @@ Object `ItemMeta` for Checklist:
 | ------- | --------- | ------------------------- |
 | checked | `boolean` | state of the checkbox     |
 
+Object `ItemMeta` for Ordered list
+
+| Field   | Type      | Description               |
+| ------- | --------- | ------------------------- |
+| start   | `number`  | number for list to start with, default is 1 |
+| counter | `string`  | counter type for list, it could be `numeric`, `lower-roman`, `upper-roman`, `lower-alpha`, `upper-alpha`, default is `numeric` |
+
+
 Object `ItemMeta` for Ordered and Unordered lists would be empty.
 
 

From 0af481055cd231c9da2797f1e9239a6af99cbd2c Mon Sep 17 00:00:00 2001
From: e11sy <130844513+e11sy@users.noreply.github.com>
Date: Wed, 6 Nov 2024 22:26:26 +0300
Subject: [PATCH 4/6] Update README.md

Co-authored-by: Peter <specc.dev@gmail.com>
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 8d232266..2bd8ce58 100644
--- a/README.md
+++ b/README.md
@@ -67,7 +67,7 @@ var editor = EditorJS({
 | Field             | Type      |  Description                                                                                                              |
 | ----------------- | --------- | ------------------------------------------------------------------------------------------------------------------------- |
 | style             | `string`  |  list will be rendered with this style: `ordered`, `unordered` or `checklist`, default is `defaultStyle` from tool config |
-| meta              | `ItemMeta`|  Item meta based on the list type                                                                                         |
+| meta              | `ItemMeta`|  Item meta based on the list style                                                                                         |
 | items             | `Item[]`  |  the array of list's items                                                                                                |
 
 Object `Item`:

From 115d00d33c4b55979673cd1d4b42d625ee91374d Mon Sep 17 00:00:00 2001
From: e11sy <130844513+e11sy@users.noreply.github.com>
Date: Wed, 6 Nov 2024 22:29:03 +0300
Subject: [PATCH 5/6] improved type assertions

---
 src/ListTabulator/index.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/ListTabulator/index.ts b/src/ListTabulator/index.ts
index e96bc785..35f0b6fe 100644
--- a/src/ListTabulator/index.ts
+++ b/src/ListTabulator/index.ts
@@ -188,15 +188,15 @@ export default class ListTabulator<Renderer extends ListRenderer> {
     /**
      * Set start property value from initial data
      */
-    if ((this.data.meta as OrderedListItemMeta).start !== undefined) {
-      this.changeStartWith((this.data.meta as OrderedListItemMeta).start!);
+    if ('start' in this.data.meta && this.data.meta.start !== undefined) {
+      this.changeStartWith(this.data.meta.start);
     }
 
     /**
      * Set counterType value from initial data
      */
-    if ((this.data.meta as OrderedListItemMeta).counterType !== undefined) {
-      this.changeCounters((this.data.meta as OrderedListItemMeta).counterType!);
+    if ('counterType' in this.data.meta && this.data.meta.counterType !== undefined) {
+      this.changeCounters(this.data.meta.counterType);
     }
 
     return this.listWrapper;

From 84dc345b7106d7ee138e8a0528300bcb5feb1984 Mon Sep 17 00:00:00 2001
From: e11sy <130844513+e11sy@users.noreply.github.com>
Date: Wed, 6 Nov 2024 22:33:31 +0300
Subject: [PATCH 6/6] improve readme

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2bd8ce58..df5a9fd3 100644
--- a/README.md
+++ b/README.md
@@ -89,10 +89,10 @@ Object `ItemMeta` for Ordered list
 | Field   | Type      | Description               |
 | ------- | --------- | ------------------------- |
 | start   | `number`  | number for list to start with, default is 1 |
-| counter | `string`  | counter type for list, it could be `numeric`, `lower-roman`, `upper-roman`, `lower-alpha`, `upper-alpha`, default is `numeric` |
+| counterType | `string`  | counter type for list, it could be `numeric`, `lower-roman`, `upper-roman`, `lower-alpha`, `upper-alpha`, default is `numeric` |
 
 
-Object `ItemMeta` for Ordered and Unordered lists would be empty.
+Object `ItemMeta` for Unordered list would be empty.
 
 
 ## Example of the content for `Unordered List`
