refactor: fix multiple issues

editor-js · Jun 19, 2024 · 7edd811 · 7edd811
1 parent e071d6a
commit 7edd811
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 77 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -31,7 +31,7 @@
  */
 
 import type { TunesMenuConfig } from "@editorjs/editorjs/types/tools";
-import type { API, ToolboxConfig, PasteConfig } from '@editorjs/editorjs';
+import type { API, ToolboxConfig, PasteConfig, BaseTool } from '@editorjs/editorjs';
 import './index.css';
 
 import Ui from './ui';
@@ -72,7 +72,7 @@ export interface ImageToolData {
  *
  * @description Config supported by Tool
  */
-export interface ImageConfig {
+export interface ImageToolConfig {
   /**
    * Endpoints for upload, whether using file or URL.
    */
@@ -141,72 +141,72 @@ export interface ImageConfig {
 interface UploadResponseFormat {
   /**
    * success - 1 for successful uploading, 0 for failure 
-  */
+   */
   success: number;
   /**
-  * Object with file data.
+   * Object with file data.
    *             'url' is required,
    *             also can contain any additional data that will be saved and passed back
-  */
+   */
   file: {
     /**
      * The URL of the uploaded image.
-    */
+     */
     url: string;
   };
 }
 
-interface ConstructorParams {
+interface BlockToolConstructorOptions {
   /**
    * Previously saved data as ImageTool data.
-  */
+   */
   data: ImageToolData;
   /**
    * User config for Tool.
-  */
-  config: ImageConfig;
+   */
+  config: ImageToolConfig;
   /**
    * Editor.js API.
-  */
+   */
   api: API;
   /**
    * Flag indicating read-only mode.
-  */
+   */
   readOnly: boolean;
   /**
    * Current Block API.
-  */
+   */
   block: any;
 }
 
-export default class ImageTool {
+export default class ImageTool implements BaseTool{
   /** 
    * Editor.js API instance 
-  */
+   */
   private api: API;
   /** 
    * Flag indicating read-only mode 
-  */
+   */
   private readOnly: boolean;
   /** 
    * Current Block API instance
-  */
+   */
   private block: any;
   /** 
    * Configuration for the ImageTool
-  */
-  private config: ImageConfig;
+   */
+  private config: ImageToolConfig;
   /** 
    * Uploader module instance 
-  */
+   */
   private uploader: Uploader;
   /** 
    * UI module instance
-  */
+   */
   private ui: Ui;
   /** 
    * Partial data for the ImageTool 
-  */
+   */
   private _data: ImageToolData;
 
   /**
@@ -217,7 +217,7 @@ export default class ImageTool {
    * @param {boolean} tool.readOnly - read-only mode flag
    * @param {BlockAPI|{}} tool.block - current Block API
    */
-  constructor({ data, config, api, readOnly, block }: ConstructorParams) {
+  constructor({ data, config, api, readOnly, block }: BlockToolConstructorOptions) {
     this.api = api;
     this.readOnly = readOnly;
     this.block = block;
@@ -453,10 +453,7 @@ export default class ImageTool {
         /** Images from PDF */
         if (/^blob:/.test(image.src)) {
           const response = await fetch(image.src);
-          /**
-           * the return value of response.blob() is Promise<blob>, which can't be used in the function uploadFile.
-           * So, it is converted to File, and then use the file in the uploadFile function.
-           */
+
           const file = await response.blob();
 
           this.uploadFile(file);

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -1,25 +1,12 @@
-/** 
- * Preview: Represents a function to handle previewing with a source string.
-*/
-export type PreviewCallback = { onPreview: (src: string) => void };
-
-/** 
- * UICSS: Represents a key-value pair of CSS properties.
-*/
-export type UICSS = { [key: string]: string };
-
-/** 
- * UIStatus: Represents different statuses like EMPTY, UPLOADING, FILLED.
-*/
-export type UIStatus = {EMPTY: string, UPLOADING: string, FILLED: string};
-
-/** 
- * UIAttributes: Represents a key-value pair of attributes.
-*/
-export type UIAttributes = { [key: string]: any};
+/**
+ * Represents options for uploading, including a function to handle previewing.
+ */
+export interface UploadOptions  { 
+  onPreview: (src: string) => void 
+};
 
 /** 
- * Tunes: Represents a tone with name, icon, title, toggle, and optional action.
+ * User configuration of Image block tunes. Allows to add custom tunes through the config
 */
 export type TunesConfig = { name: string; icon: string; title: string; toggle: boolean, action?: Function };
 

diff --git a/src/ui.ts b/src/ui.ts
@@ -1,11 +1,14 @@
 import { IconPicture } from '@codexteam/icons';
 import { make } from './utils/dom';
-import { UIAttributes, UICSS, UIStatus } from './types/types';
-import { ImageConfig } from './index';
-import { API } from '@editorjs/editorjs';
+import { ImageToolConfig } from './index';
+import type { API } from '@editorjs/editorjs';
 import { ImageToolData } from './index';
 
-
+enum UiState {
+  EMPTY = "empty",
+  UPLOADING = 'uploading', 
+  FILLED = 'filled'
+};
 
 /**
  * Nodes interface representing various elements in the UI.
@@ -48,11 +51,11 @@ interface ConstructorParams {
   /**
    * Configuration for the image.
    */
-  config: ImageConfig;
+  config: ImageToolConfig;
   /**
    * Callback function for selecting a file.
    */
-  onSelectFile: Function;
+  onSelectFile: () => void;
   /**
    * Flag indicating if the UI is in read-only mode.
    */
@@ -74,7 +77,7 @@ private api: API;
 /**
  * Configuration for the image tool.
  */
-private config: ImageConfig;
+private config: ImageToolConfig;
 
 /**
  * Callback function for selecting a file.
@@ -93,7 +96,7 @@ public nodes: Nodes;
   /**
    * @param {object} ui - image tool Ui module
    * @param {object} ui.api - Editor.js API
-   * @param {ImageConfig} ui.config - user config
+   * @param {ImageToolConfig} ui.config - user config
    * @param {Function} ui.onSelectFile - callback for clicks on Select file button
    * @param {boolean} ui.readOnly - read-only mode flag
    */
@@ -135,7 +138,7 @@ public nodes: Nodes;
    *
    * @returns {object}
    */
-  get CSS(): UICSS {
+  get CSS(): Record<string, string> {
     return {
       baseClass: this.api.styles.block,
       loading: this.api.styles.loader,
@@ -161,12 +164,8 @@ public nodes: Nodes;
    *
    * @returns {{EMPTY: string, UPLOADING: string, FILLED: string}}
    */
-  static get status(): UIStatus {
-    return {
-      EMPTY: 'empty',
-      UPLOADING: 'uploading',
-      FILLED: 'filled',
-    };
+  static get status(): typeof UiState {
+    return UiState;
   }
 
   /**
@@ -177,9 +176,9 @@ public nodes: Nodes;
    */
   render(toolData: ImageToolData): HTMLElement  {
     if (!toolData.file || Object.keys(toolData.file).length === 0) {
-      this.toggleStatus(Ui.status.EMPTY as keyof UIStatus);
+      this.toggleStatus(Ui.status.EMPTY);
     } else {
-      this.toggleStatus(Ui.status.UPLOADING as keyof UIStatus);
+      this.toggleStatus(Ui.status.UPLOADING);
     }
     return this.nodes.wrapper;
   }
@@ -210,7 +209,7 @@ public nodes: Nodes;
   showPreloader(src: string): void {
     this.nodes.imagePreloader.style.backgroundImage = `url(${src})`;
 
-    this.toggleStatus(Ui.status.UPLOADING as keyof UIStatus);
+    this.toggleStatus(Ui.status.UPLOADING);
   }
 
   /**
@@ -220,7 +219,7 @@ public nodes: Nodes;
    */
   hidePreloader(): void {
     this.nodes.imagePreloader.style.backgroundImage = '';
-    this.toggleStatus(Ui.status.EMPTY as keyof UIStatus);
+    this.toggleStatus(Ui.status.EMPTY);
   }
 
   /**
@@ -235,7 +234,7 @@ public nodes: Nodes;
      */
     const tag = /\.mp4$/.test(url) ? 'VIDEO' : 'IMG';
 
-    const attributes: UIAttributes = {
+    const attributes: { [key: string]: any} = {
       src: url,
     };
 
@@ -281,7 +280,7 @@ public nodes: Nodes;
      * Add load event listener
      */
     this.nodes.imageEl.addEventListener(eventName, () => {
-      this.toggleStatus(Ui.status.FILLED as keyof UIStatus);
+      this.toggleStatus(Ui.status.FILLED);
 
       /**
        * Preloader does not exists on first rendering with presaved data
@@ -312,10 +311,11 @@ public nodes: Nodes;
    * @param {string} status - see {@link Ui.status} constants
    * @returns {void}
    */
-  toggleStatus(status: keyof UIStatus): void {
+  toggleStatus(status: UiState): void {
     for (const statusType in Ui.status) {
       if (Object.prototype.hasOwnProperty.call(Ui.status, statusType)) {
-        this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--${Ui.status[statusType as keyof UIStatus]}`, status === Ui.status[statusType as keyof UIStatus]);      }
+          this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--${Ui.status[statusType as keyof typeof UiState]}`, status === Ui.status[statusType as keyof typeof UiState]);
+      }
     }
   }
 

diff --git a/src/uploader.ts b/src/uploader.ts
@@ -1,7 +1,7 @@
 import ajax from '@codexteam/ajax';
 import isPromise from './utils/isPromise';
-import { ImageConfig } from './index';
-import { PreviewCallback } from './types/types';
+import { ImageToolConfig } from './index';
+import { UploadOptions } from './types/types';
 import { UploadResponseFormat } from './types/types';
 
 /**
@@ -11,7 +11,7 @@ interface UploaderParams {
   /**
    * Configuration for the uploader
    */
-  config: ImageConfig;
+  config: ImageToolConfig;
   /**
    * 
    * @param response: Callback function for successful upload
@@ -33,12 +33,12 @@ interface UploaderParams {
  *  3. Upload by pasting file from Clipboard or by Drag'n'Drop
  */
 export default class Uploader {
-  private config: ImageConfig;
+  private config: ImageToolConfig;
   private onUpload: (response: UploadResponseFormat) => void;
   private onError: (error: any) => void;
   /**
    * @param {object} params - uploader module params
-   * @param {ImageConfig} params.config - image tool config
+   * @param {ImageToolConfig} params.config - image tool config
    * @param {Function} params.onUpload - one callback for all uploading (file, url, d-n-d, pasting)
    * @param {Function} params.onError - callback for uploading errors
    */
@@ -54,7 +54,7 @@ export default class Uploader {
    *
    * @param {Function} onPreview - callback fired when preview is ready
    */
-  uploadSelectedFile({ onPreview }: PreviewCallback) {
+  uploadSelectedFile({ onPreview }: UploadOptions) {
     const preparePreview = function (file: File) {
       const reader = new FileReader();
 
@@ -151,7 +151,7 @@ export default class Uploader {
    * @param {File} file - file pasted by drag-n-drop
    * @param {Function} onPreview - file pasted by drag-n-drop
    */
-  uploadByFile(file: Blob, { onPreview }: PreviewCallback) {
+  uploadByFile(file: Blob, { onPreview }: UploadOptions) {
     /**
      * Load file for preview
      *