@ebl-vue/editor-full 1.0.12 → 1.1.1

package/src/plugins/imageTool/types/types.ts

@@ -0,0 +1,236 @@
+import type { HTMLPasteEventDetail } from '@editorjs/editorjs';
+
+/**
+ * Represents options for uploading, including a function to handle previewing.
+ */
+export interface UploadOptions {
+  /**
+   * Callback function to be called when the preview is ready.
+   * @param src - The source of the preview as a string.
+   * @returns void
+   */
+  onPreview: (src: string) => void;
+  noSelectedFile:()=>void;
+}
+
+/**
+ * User configuration of Image block tunes. Allows to add custom tunes through the config
+ */
+export interface ActionConfig {
+  /**
+   * The name of the tune.
+   */
+  name: string;
+
+  /**
+   * The icon for the tune. Should be an SVG string.
+   */
+  icon: string;
+
+  /**
+   * The title of the tune. This will be displayed in the UI.
+   */
+  title: string;
+
+  /**
+   * An optional flag indicating whether the tune is a toggle (true) or not (false).
+   */
+  toggle?: boolean;
+
+  /**
+   * An optional action function to be executed when the tune is activated.
+   */
+  action?: Function;
+};
+
+/**
+ * UploadResponseFormat interface representing the response format expected from the backend on file uploading.
+ */
+export interface UploadResponseFormat<AdditionalFileData = {}> {
+  status?: number;
+  /**
+   * success - 1 for successful uploading, 0 for failure
+   */
+  success: number;
+
+  /**
+   * 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;
+  } & AdditionalFileData;
+}
+export interface IUploadResponseFormat<> {
+
+  success: boolean;
+  data?: any,
+  message?: string;
+}
+/**
+ * ImageToolData type representing the input and output data format for the image tool, including optional custome actions.
+ */
+export type ImageToolData<Actions = {}, AdditionalFileData = {}> = {
+  /**
+   * Caption for the image.
+   */
+  caption: string;
+
+  /**
+   * Flag indicating whether the image has a border.
+   */
+  withBorder: boolean;
+
+  /**
+   * Flag indicating whether the image has a background.
+   */
+  withBackground: boolean;
+
+  /**
+   * Flag indicating whether the image is stretched.
+   */
+  stretched: boolean;
+
+  /**
+   * Object containing the URL of the image file.
+   * Also can contain any additional data.
+   */
+  file: {
+    /**
+     * The URL of the image.
+     */
+    url: string;
+  } & AdditionalFileData;
+} & (Actions extends Record<string, boolean> ? Actions : {});
+
+/**
+ * @description Allows to enable or disable features.
+ */
+export type FeaturesConfig = {
+  /**
+   * Flag to enable/disable tune - background.
+   */
+  background?: boolean;
+  /**
+   * Flag to enable/disable tune - border.
+   */
+  border?: boolean;
+  /**
+   * Flag to enable/disable caption.
+   * Can be set to 'optional' to allow users to toggle via block tunes.
+   */
+  caption?: boolean | 'optional';
+  /**
+   * Flag to enable/disable tune - stretched
+   */
+  stretch?: boolean;
+};
+
+/**
+ *
+ * @description Config supported by Tool
+ */
+export interface ImageConfig {
+  userStore?: any;
+  /**
+   * Endpoints for upload, whether using file or URL.
+   */
+  endpoints: {
+
+    /**
+     * Endpoint for file upload.
+     */
+    byFile?: string;
+
+    /**
+     * Endpoints for URL upload.
+     */
+    byUrl?: string;
+  };
+
+  /**
+   * Field name for the uploaded image.
+   */
+  field?: string;
+
+  /**
+   * Allowed mime-types for the uploaded image.
+   */
+  types?: string;
+
+  /**
+   * Placeholder text for the caption field.
+   */
+  captionPlaceholder?: string;
+
+  /**
+   * Additional data to send with requests.
+   */
+  additionalRequestData?: object;
+
+  /**
+   * Additional headers to send with requests.
+   */
+  additionalRequestHeaders?: object;
+
+  /**
+   * Custom content for the select file button.
+   */
+  buttonContent?: string;
+
+  /**
+   * Optional custom uploader.
+   */
+  uploader?: {
+
+    /**
+     * Method to upload an image by file.
+     */
+    uploadByFile?: (file: Blob) => Promise<UploadResponseFormat>;
+
+    /**
+     * Method to upload an image by URL.
+     */
+    uploadByUrl?: (url: string) => Promise<UploadResponseFormat>;
+  };
+
+  /**
+   * Additional actions for the tool.
+   */
+  actions?: ActionConfig[];
+
+  /**
+   * Tunes to be enabled.
+   */
+  features?: FeaturesConfig;
+}
+
+/**
+ * Interface representing the details of a paste event for HTML elements.
+ * Extends the `HTMLPasteEventDetail` interface to include additional data properties.
+ */
+export interface HTMLPasteEventDetailExtended extends HTMLPasteEventDetail {
+  /**
+   * The data property containing the source of the image and HTML element details.
+   */
+  data: {
+    /**
+     * The source URL of the pasted image.
+     */
+    src: string;
+  } & HTMLElement;
+}
+
+/**
+ * Parameter type of Image setter function in ImageTool
+ */
+export type ImageSetterParam = {
+  /**
+   * url path of the image
+   */
+  url: string;
+};

package/src/plugins/imageTool/ui.ts

@@ -0,0 +1,313 @@
+import { IconPicture } from '../../icons';
+import { make } from './utils/dom';
+import type { API } from '@editorjs/editorjs';
+import type { ImageConfig } from './types/types';
+
+/**
+ * Enumeration representing the different states of the UI.
+ */
+export enum UiState {
+  /**
+   * The UI is in an empty state, with no image loaded or being selected.
+   */
+  Empty = 'empty',
+
+  /**
+   * The UI is in an uploading state, indicating an image is currently being uploaded.
+   */
+  Uploading = 'uploading',
+
+  /**
+   * The UI is in a filled state, with an image successfully loaded.
+   */
+  Filled = 'filled'
+};
+
+/**
+ * Nodes interface representing various elements in the UI.
+ */
+interface Nodes {
+  /**
+   * Wrapper element in the UI.
+   */
+  wrapper: HTMLElement;
+
+  /**
+   * Container for the image element in the UI.
+   */
+  imageContainer: HTMLElement;
+
+  /**
+   * Button for selecting files.
+   */
+  fileButton: HTMLElement;
+
+  /**
+   * Represents the image element in the UI, if one is present; otherwise, it's undefined.
+   */
+  imageEl?: HTMLElement;
+
+  /**
+   * Preloader element for the image.
+   */
+  imagePreloader: HTMLElement;
+
+  /**
+   * Caption element for the image.
+   */
+  caption: HTMLElement;
+}
+
+/**
+ * ConstructorParams interface representing parameters for the Ui class constructor.
+ */
+interface ConstructorParams {
+  /**
+   * Editor.js API.
+   */
+  api: API;
+  /**
+   * Configuration for the image.
+   */
+  config: ImageConfig;
+  /**
+   * Callback function for selecting a file.
+   */
+  onSelectFile: () => void;
+  /**
+   * Flag indicating if the UI is in read-only mode.
+   */
+  readOnly: boolean;
+}
+
+/**
+ * Class for working with UI:
+ *  - rendering base structure
+ *  - show/hide preview
+ *  - apply tune view
+ */
+export default class Ui {
+  /**
+   * Nodes representing various elements in the UI.
+   */
+  public nodes: Nodes;
+
+  /**
+   * API instance for Editor.js.
+   */
+  private api: API;
+
+  /**
+   * Configuration for the image tool.
+   */
+  private config: ImageConfig;
+
+  /**
+   * Callback function for selecting a file.
+   */
+  private onSelectFile: () => void;
+
+  /**
+   * Flag indicating if the UI is in read-only mode.
+   */
+  private readOnly: boolean;
+
+  /**
+   * @param ui - image tool Ui module
+   * @param ui.api - Editor.js API
+   * @param ui.config - user config
+   * @param ui.onSelectFile - callback for clicks on Select file button
+   * @param ui.readOnly - read-only mode flag
+   */
+  constructor({ api, config, onSelectFile, readOnly }: ConstructorParams) {
+    this.api = api;
+    this.config = config;
+    this.onSelectFile = onSelectFile;
+    
+    this.readOnly = readOnly;
+    this.nodes = {
+      wrapper: make('div', [this.CSS.baseClass, this.CSS.wrapper]),
+      imageContainer: make('div', [this.CSS.imageContainer]),
+      fileButton: this.createFileButton(),
+      imageEl: undefined,
+      imagePreloader: make('div', this.CSS.imagePreloader),
+      caption: make('div', [this.CSS.input, this.CSS.caption], {
+        contentEditable: !this.readOnly,
+      }),
+    };
+
+    /**
+     * Create base structure
+     *  <wrapper>
+     *    <image-container>
+     *      <image-preloader />
+     *    </image-container>
+     *    <caption />
+     *    <select-file-button />
+     *  </wrapper>
+     */
+    this.nodes.caption.dataset.placeholder = this.config.captionPlaceholder;
+    this.nodes.imageContainer.appendChild(this.nodes.imagePreloader);
+    this.nodes.wrapper.appendChild(this.nodes.imageContainer);
+    this.nodes.wrapper.appendChild(this.nodes.caption);
+    this.nodes.wrapper.appendChild(this.nodes.fileButton);
+  }
+
+  /**
+   * Apply visual representation of activated tune
+   * @param tuneName - one of available tunes {@link Tunes.tunes}
+   * @param status - true for enable, false for disable
+   */
+  public applyTune(tuneName: string, status: boolean): void {
+    this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--${tuneName}`, status);
+  }
+
+  /**
+   * Renders tool UI
+   */
+  public render(): HTMLElement {
+    this.toggleStatus(UiState.Empty);
+
+    return this.nodes.wrapper;
+  }
+
+  /**
+   * Shows uploading preloader
+   * @param src - preview source
+   */
+  public showPreloader(src: string): void {
+    this.nodes.imagePreloader.style.backgroundImage = `url(${src})`;
+
+    //this.toggleStatus(UiState.Uploading);
+  }
+ 
+
+  /**
+   * Hide uploading preloader
+   */
+  public hidePreloader(): void {
+    this.nodes.imagePreloader.style.backgroundImage = '';
+    this.toggleStatus(UiState.Empty);
+  }
+
+  /**
+   * Shows an image
+   * @param url - image source
+   */
+  public fillImage(url: string): void {
+    /**
+     * Check for a source extension to compose element correctly: video tag for mp4, img — for others
+     */
+    const tag = /\.mp4$/.test(url) ? 'VIDEO' : 'IMG';
+
+    const attributes: { [key: string]: string | boolean } = {
+      src: url,
+    };
+
+    /**
+     * We use eventName variable because IMG and VIDEO tags have different event to be called on source load
+     * - IMG: load
+     * - VIDEO: loadeddata
+     */
+    let eventName = 'load';
+
+    /**
+     * Update attributes and eventName if source is a mp4 video
+     */
+    if (tag === 'VIDEO') {
+      /**
+       * Add attributes for playing muted mp4 as a gif
+       */
+      attributes.autoplay = true;
+      attributes.loop = true;
+      attributes.muted = true;
+      attributes.playsinline = true;
+
+      /**
+       * Change event to be listened
+       */
+      eventName = 'loadeddata';
+    }
+
+    /**
+     * Compose tag with defined attributes
+     */
+    this.nodes.imageEl = make(tag, this.CSS.imageEl, attributes);
+
+    /**
+     * Add load event listener
+     */
+    this.nodes.imageEl.addEventListener(eventName, () => {
+      this.toggleStatus(UiState.Filled);
+
+      /**
+       * Preloader does not exists on first rendering with presaved data
+       */
+      if (this.nodes.imagePreloader !== undefined) {
+        this.nodes.imagePreloader.style.backgroundImage = '';
+      }
+    });
+
+    this.nodes.imageContainer.appendChild(this.nodes.imageEl);
+  }
+
+  /**
+   * Shows caption input
+   * @param text - caption content text
+   */
+  public fillCaption(text: string): void {
+    if (this.nodes.caption !== undefined) {
+      this.nodes.caption.innerHTML = text;
+    }
+  }
+
+  /**
+   * Changes UI status
+   * @param status - see {@link Ui.status} constants
+   */
+  public toggleStatus(status: UiState): void {
+    for (const statusType in UiState) {
+      if (Object.prototype.hasOwnProperty.call(UiState, statusType)) {
+        const state = UiState[statusType as keyof typeof UiState];
+
+        this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--${state}`, state === status);
+      }
+    }
+  }
+
+  /**
+   * CSS classes
+   */
+  private get CSS(): Record<string, string> {
+    return {
+      baseClass: this.api.styles.block,
+      loading: this.api.styles.loader,
+      input: this.api.styles.input,
+      button: this.api.styles.button,
+
+      /**
+       * Tool's classes
+       */
+      wrapper: 'image-tool',
+      imageContainer: 'image-tool__image',
+      imagePreloader: 'image-tool__image-preloader',
+      imageEl: 'image-tool__image-picture',
+      caption: 'image-tool__caption',
+    };
+  };
+
+  /**
+   * Creates upload-file button
+   */
+  private createFileButton(): HTMLElement {
+    const button = make('div', [this.CSS.button]);
+
+    button.innerHTML = this.config.buttonContent ?? `${IconPicture} ${this.api.i18n.t('Select an Image')}`;
+
+    button.addEventListener('click', () => {
+      this.onSelectFile();
+    });
+
+    return button;
+  }
+}