Merge pull request #96 from editor-js/add-converter-for-list-tool-data

Feat (data compatibility): Add normalization for List tool data

index.html

@@ -191,8 +191,19 @@
                 }
               ]
             }
-          }
-        ]
+          },
+          {
+            type : 'List',
+            data : {
+            style : "checklist",
+            items : [
+              "This is List tool data",
+              "That would be displayed",
+              "In Nested List tool"
+              ],
+            },
+          },
+        ],
       },
       onReady: function(){
         saveButton.click();

src/index.ts

@@ -5,7 +5,7 @@ import type {
   ToolConfig
 } from '@editorjs/editorjs/types/tools';
 import { IconListBulleted, IconListNumbered, IconChecklist } from '@codexteam/icons';
-import type { NestedListConfig, ListData, ListDataStyle, ListItem } from './types/ListParams';
+import type { NestedListConfig, ListData, ListDataStyle, ListItem, OldListData } from './types/ListParams';
 import ListTabulator from './ListTabulator';
 import { CheckListRenderer, OrderedListRenderer, UnorderedListRenderer } from './ListRenderer';
 import type { ListRenderer } from './types/ListRenderer';
@@ -18,11 +18,12 @@ import { type OlCounterType, OlCounterTypesMap } from './types/OlCounterType';
 import './styles/list.pcss';
 import './styles/input.pcss';
 import stripNumbers from './utils/stripNumbers';
+import normalizeData from './utils/normalizeData';
 
 /**
  * Constructor Params for Nested List Tool, use to pass initial data and settings
  */
-export type ListParams = BlockToolConstructorOptions<ListData, NestedListConfig>;
+export type ListParams = BlockToolConstructorOptions<ListData | OldListData, NestedListConfig>;
 
 /**
  * Default class of the component used in editor
@@ -210,7 +211,7 @@ export default class NestedList {
       items: [],
     };
 
-    this.data = Object.keys(data).length ? data : initialData;
+    this.data = Object.keys(data).length ? normalizeData(data) : initialData;
 
     /**
      * Assign default value of the property for the ordered list

src/styles/list.pcss

@@ -13,7 +13,7 @@
   --checkbox-background: #fff;
   --color-border: #C9C9C9;
   --color-bg-checked: #369FFF;
-  --line-height: 145%;
+  --line-height: 1.45em;
   --color-bg-checked-hover: #0059AB;
   --color-tick: #fff;
   --size-checkbox: 1.2em;

src/types/ListParams.ts

@@ -7,7 +7,7 @@ import type { OlCounterType } from './OlCounterType';
 export type ListDataStyle = 'ordered' | 'unordered' | 'checklist';
 
 /**
- * Output data
+ * Interface that represents data of the Nested List tool
  */
 export interface ListData {
   /**
@@ -33,6 +33,20 @@ export interface ListData {
   counterType?: OlCounterType;
 }
 
+/**
+ * Interface that represents data of the List tool
+ */
+export interface OldListData {
+  /**
+   * Style of the List tool
+   */
+  style: 'ordered' | 'unordered';
+  /**
+   * Array of items of the List tool
+   */
+  items: string[];
+}
+
 /**
  * List item within the output data
  */

src/utils/normalizeData.ts

@@ -0,0 +1,36 @@
+import type { OldListData, ListData, ListItem } from '../types/ListParams';
+
+/**
+ * Method that checks if data is related to the List or NestedListTool
+ * @param data - data of the List or NestedListTool
+ * @returns true if data related to the List tool, false if to Nested List tool
+ */
+function instanceOfListData(data: ListData | OldListData): data is OldListData {
+  return (typeof data.items[0] === 'string');
+}
+
+/**
+ * Method that checks if passed data is related to the legacy format and normalizes it
+ * @param data - data to be checked
+ * @returns - normalized data, ready to be used by Nested List tool
+ */
+export default function normalizeData(data: ListData | OldListData): ListData {
+  const normalizedDataItems: ListItem[] = [];
+
+  if (instanceOfListData(data)) {
+    data.items.forEach((item) => {
+      normalizedDataItems.push({
+        content: item,
+        meta: {},
+        items: [],
+      });
+    });
+
+    return {
+      style: data.style,
+      items: normalizedDataItems,
+    };
+  } else {
+    return data;
+  }
+};