improve typings and playground

editor-js · Nov 6, 2024 · 1aa7f97 · 1aa7f97
1 parent be12977
commit 1aa7f97
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 453 deletions.
diff --git a/example/example.html b/example/example.html
diff --git a/example/assets/codex2x.png → playground/assets/codex2x.png b/example/assets/codex2x.png → playground/assets/codex2x.png
diff --git a/example/assets/demo.css → playground/assets/demo.css b/example/assets/demo.css → playground/assets/demo.css
diff --git a/example/assets/json-preview.js → playground/assets/json-preview.js b/example/assets/json-preview.js → playground/assets/json-preview.js
diff --git a/index.html → playground/index.html b/index.html → 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
@@ -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,15 +379,16 @@ export default class ListTabulator<Renderer extends ListRenderer> {
 
     const data: ListData = {
       style,
+      meta: {} as ItemMeta,
       items: [],
     };
 
     /**
      * 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -24,7 +24,7 @@ export default {
 
   server: {
     port: 3303,
-    open: true,
+    open: './playground/index.html',
   },
   plugins: [cssInjectedByJsPlugin(), dts()],
 };