Chore(tabulation): Keydown refactor

index.html

@@ -114,77 +114,80 @@
       data: {
         blocks: [
           {
-            type : 'List',
-            data : {
-              items : [
+            type: 'List',
+            data: {
+              items: [
                 {
-                  "content": "Canon",
-                  "items": [
+                  content: "Canon",
+                  items: [
                     {
-                      "content": "Fisheye",
-                      "items": [
+                      content: "Fisheye",
+                      items: [
                         {
-                          "content": "Canon 15mm f/2.8",
-                          "items": []
-                        },
+                          content: "Canon 15mm f/2.8",
+                          items: []
+                        }
                       ]
                     },
                     {
-                      "content": "Normal",
-                      "items": [
+                      content: "Normal",
+                      items: [
                         {
-                          "content": "Canon 40mm f/2.8",
-                          "items": []
+                          content: "Canon 40mm f/2.8",
+                          items: []
                         },
                         {
-                          "content": "Canon 50mm f/1.8",
-                          "items": []
-                        },
+                          content: "Canon 50mm f/1.8",
+                          items: []
+                        }
                       ]
                     },
                     {
-                      "content": "Zoom",
-                      "items": [
-                        {
-                          "content": "Canon 75-300mm f/4-5.6",
-                          "items": []
-                        },
-                      ]
-                    },
+                      content: "Zoom",
+                      items: []
+                    }
+                  ]
+                },
+                {
+                  content: "",
+                  items: [
+                    {
+                      content: "Canon 75-300mm f/4-5.6",
+                      items: []
+                    }
                   ]
                 },
                 {
-                  "content": "Tamron",
-                  "items": [
+                  content: "Tamron",
+                  items: [
                     {
-                      "content": "Zoom",
-                      "items": [
+                      content: "Zoom",
+                      items: [
                         {
-                          "content": "Tamron 28-75mm f/2.8",
-                          "items": []
-                        },
+                          content: "Tamron 28-75mm f/2.8",
+                          items: []
+                        }
                       ]
-                    },
+                    }
                   ]
                 },
                 {
-                  "content": "Samyang",
-                  "items": [
+                  content: "Samyang",
+                  items: [
                     {
-                      "content": "Wide",
-                      "items": [
+                      content: "Wide",
+                      items: [
                         {
-                          "content": "Samyang 14mm f/2.8",
-                          "items": []
-                        },
+                          content: "Samyang 14mm f/2.8",
+                            items: []
+                        }
                       ]
-                    },
+                    }
                   ]
-                },
-              ],
-              style: 'checklist'
+                }
+              ]
             }
-          },
+          }
         ]
       },
       onReady: function(){
@@ -195,6 +198,9 @@
       }
     });
 
+    window.editor = editor;
+
+
     /**
      * Saving button
      */

package.json

@@ -35,6 +35,8 @@
     "@editorjs/editorjs": "^2.29.1",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
+    "@editorjs/caret": "^0.0.7",
+    "@editorjs/dom": "^0.0.7",
     "eslint": "^7.22.0",
     "eslint-loader": "^4.0.2",
     "postcss-nested": "^5.0.3",

src/ListRenderer/ChecklistRenderer.ts

@@ -1,7 +1,7 @@
 import { IconCheck } from '@codexteam/icons'
 import type { ChecklistItemMeta } from "../types/ItemMeta";
 import { NestedListConfig } from "../types/ListParams";
-import * as Dom from '../utils/Dom';
+import * as Dom from '@editorjs/dom';
 import { ListRendererInterface, DefaultListCssClasses, CssPrefix } from './ListRenderer';
 import type { ListCssClasses } from './ListRenderer';
 
@@ -45,16 +45,16 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
 
   /**
    * Renders ul wrapper for list
-   * @param level - level of nesting (0 for the rool level)
+   * @param isRoot - boolean variable that represents level of the wrappre (root or childList)
    * @returns - created html ul element
    */
-  renderWrapper(level: number): HTMLUListElement {
+  renderWrapper(isRoot: boolean): HTMLUListElement {
     let wrapperElement: HTMLUListElement;
 
     /**
      * Check if it's root level
      */
-    if (level === 0) {
+    if (isRoot === true) {
       wrapperElement = Dom.make('ul', [CheckListRenderer.CSS.wrapper, CheckListRenderer.CSS.checklist]) as HTMLUListElement;
 
       /**

src/ListRenderer/ListRenderer.ts

@@ -30,10 +30,10 @@ export interface ListCssClasses {
 export interface ListRendererInterface<ItemMeta> {
   /**
    * Renders wrapper for list
-   * @param level - level of nesting (0 for the rool level)
+   * @param isRoot - boolean variable that represents level of the wrappre (root or childList)
    * @returns - created html ul element
    */
-  renderWrapper: (level: number) => HTMLElement;
+  renderWrapper: (isRoot: boolean) => HTMLElement;
 
   /**
    * Redners list item element

src/ListRenderer/OrderedListRenderer.ts

@@ -1,6 +1,6 @@
 import type { OrderedListItemMeta } from "../types/ItemMeta";
 import { NestedListConfig } from "../types/ListParams";
-import * as Dom from '../utils/Dom';
+import * as Dom from '@editorjs/dom';
 import { ListRendererInterface, DefaultListCssClasses, CssPrefix } from './ListRenderer';
 import type { ListCssClasses } from './ListRenderer';
 
@@ -39,16 +39,16 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
 
   /**
    * Renders ol wrapper for list
-   * @param level - level of nesting (0 for the rool level)
+   * @param isRoot - boolean variable that represents level of the wrappre (root or childList)
    * @returns - created html ol element
    */
-  renderWrapper(level: number): HTMLOListElement {
+  renderWrapper(isRoot: boolean): HTMLOListElement {
     let wrapperElement: HTMLOListElement;
 
     /**
      * Check if it's root level
      */
-    if (level === 0) {
+    if (isRoot === true) {
       wrapperElement = Dom.make('ol', [OrderedListRenderer.CSS.wrapper, OrderedListRenderer.CSS.orderedList]) as HTMLOListElement;
     } else {
       wrapperElement = Dom.make('ol', [OrderedListRenderer.CSS.orderedList, OrderedListRenderer.CSS.itemChildren]) as HTMLOListElement;

src/ListRenderer/UnorderedListRenderer.ts

@@ -1,6 +1,6 @@
 import type { UnorderedListItemMeta } from "../types/ItemMeta";
 import { NestedListConfig } from "../types/ListParams";
-import * as Dom from '../utils/Dom';
+import * as Dom from '@editorjs/dom';
 import { ListRendererInterface, DefaultListCssClasses, CssPrefix } from './ListRenderer';
 import type { ListCssClasses } from './ListRenderer';
 
@@ -39,16 +39,16 @@ export class UnorderedListRenderer implements ListRendererInterface<UnorderedLis
 
   /**
    * Renders ol wrapper for list
-   * @param level - level of nesting (0 for the rool level)
+   * @param isRoot - boolean variable that represents level of the wrappre (root or childList)
    * @returns - created html ul element
    */
-  renderWrapper(level: number): HTMLUListElement {
+  renderWrapper(isRoot: boolean): HTMLUListElement {
     let wrapperElement: HTMLUListElement;
 
     /**
      * Check if it's root level
      */
-    if (level === 0) {
+    if (isRoot === true) {
       wrapperElement = Dom.make('ul', [UnorderedListRenderer.CSS.wrapper, UnorderedListRenderer.CSS.unorderedList]) as HTMLUListElement;
     } else {
       wrapperElement = Dom.make('ul', [UnorderedListRenderer.CSS.unorderedList, UnorderedListRenderer.CSS.itemChildren]) as HTMLUListElement;