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;
 
  /**
@@ -136,6 +136,13 @@ export class CheckListRenderer implements ListRendererInterface<ChecklistItemMet
  }
  }
 
+ /**
+ * Returns default item meta used on creation of the new item
+ */
+ composeDefaultMeta(): ChecklistItemMeta {
+ return { checked: false };
+ }
+
  /**
  * Toggle checklist item state
  *

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
@@ -55,4 +55,9 @@ export interface ListRendererInterface<ItemMeta> {
  * @returns {ItemMeta} Item meta object
  */
  getItemMeta: (item: Element) => ItemMeta;
+
+ /**
+ * Returns default item meta used on creation of the new item
+ */
+ composeDefaultMeta: () => ItemMeta;
 };

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;
@@ -94,9 +94,16 @@ export class OrderedListRenderer implements ListRendererInterface<OrderedListIte
 
  /**
  * Returns item meta, for ordered list
- * @returns Item meta object
+ * @returns item meta object
  */
  getItemMeta(): OrderedListItemMeta {
  return {}
  }
+
+ /**
+ * Returns default item meta used on creation of the new item
+ */
+ composeDefaultMeta(): OrderedListItemMeta {
+ return {};
+ }
 }

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;
@@ -100,4 +100,11 @@ export class UnorderedListRenderer implements ListRendererInterface<UnorderedLis
  getItemMeta(): UnorderedListItemMeta {
  return {}
  }
+
+ /**
+ * Returns default item meta used on creation of the new item
+ */
+ composeDefaultMeta(): UnorderedListItemMeta {
+ return {};
+ }
 }