@ebl-vue/editor-full 1.0.11 → 1.0.13

package/src/plugins/imageTool/index.css

@@ -0,0 +1,145 @@
+.image-tool {
+  --bg-color: #cdd1e0;
+  --front-color: #388ae5;
+  --border-color: #e8e8eb
+}
+
+
+.image-tool__image {
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 10px;
+  padding-bottom: 0
+}
+
+.image-tool__image-picture {
+  max-width: 100%;
+  vertical-align: bottom;
+  display: inline-block
+}
+
+.image-tool__image-preloader {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-size: cover;
+  margin: auto;
+  position: relative;
+  background-color: var(--bg-color);
+  background-position: center center
+}
+
+.image-tool__image-preloader:after {
+  content: "";
+  position: absolute;
+  z-index: 3;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: 2px solid var(--bg-color);
+  border-top-color: var(--front-color);
+  left: 50%;
+  top: 50%;
+  margin-top: -30px;
+  margin-left: -30px;
+  animation: image-preloader-spin 2s infinite linear;
+  box-sizing: border-box
+}
+
+.image-tool__caption {
+  visibility: hidden;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin-bottom: 10px
+}
+
+.image-tool__caption[contentEditable=true][data-placeholder]:before {
+  position: absolute !important;
+  content: attr(data-placeholder);
+  color: #707684;
+  font-weight: 400;
+  display: none
+}
+
+.image-tool__caption[contentEditable=true][data-placeholder]:empty:before {
+  display: block
+}
+
+.image-tool__caption[contentEditable=true][data-placeholder]:empty:focus:before {
+  display: none
+}
+
+.image-tool--empty .image-tool__image,
+.image-tool--empty .image-tool__image-preloader {
+  display: none
+}
+
+.image-tool--empty .image-tool__caption,
+.image-tool--uploading .image-tool__caption {
+  visibility: hidden !important
+}
+
+.image-tool .cdx-button {
+  display: flex;
+  align-items: center;
+  justify-content: center
+}
+
+.image-tool .cdx-button svg {
+  height: auto;
+  margin: 0 6px 0 0
+}
+
+.image-tool--filled .cdx-button,
+.image-tool--filled .image-tool__image-preloader {
+  display: none
+}
+
+.image-tool--uploading .image-tool__image {
+  min-height: 200px;
+  display: flex;
+  border: 1px solid var(--border-color);
+  background-color: #fff
+}
+
+.image-tool--uploading .image-tool__image-picture,
+.image-tool--uploading .cdx-button {
+  display: none
+}
+
+.image-tool--withBorder .image-tool__image {
+  border: 1px solid var(--border-color)
+}
+
+.image-tool--withBackground .image-tool__image {
+  padding: 15px;
+  background: var(--bg-color)
+}
+
+.image-tool--withBackground .image-tool__image-picture {
+  max-width: 60%;
+  margin: 0 auto
+}
+
+.image-tool--stretched .image-tool__image-picture {
+  width: 100%
+}
+
+.image-tool--caption .image-tool__caption {
+  visibility: visible
+}
+
+.image-tool--caption {
+  padding-bottom: 50px
+}
+
+@keyframes image-preloader-spin {
+  0% {
+    transform: rotate(0)
+  }
+
+  to {
+    transform: rotate(360deg)
+  }
+}

package/src/plugins/imageTool/index.ts

@@ -0,0 +1,519 @@
+/**
+ * Image Tool for the Editor.js
+ * @author CodeX <team@codex.so>
+ * @license MIT
+ * @see {@link https://github.com/editor-js/image}
+ *
+ * To developers.
+ * To simplify Tool structure, we split it to 4 parts:
+ *  1) index.ts — main Tool's interface, public API and methods for working with data
+ *  2) uploader.ts — module that has methods for sending files via AJAX: from device, by URL or File pasting
+ *  3) ui.ts — module for UI manipulations: render, showing preloader, etc
+ *
+ * For debug purposes there is a testing server
+ * that can save uploaded files and return a Response {@link UploadResponseFormat}
+ *
+ *       $ node dev/server.js
+ *
+ * It will expose 8008 port, so you can pass http://localhost:8008 with the Tools config:
+ *
+ * image: {
+ *   class: ImageTool,
+ *   config: {
+ *     endpoints: {
+ *       byFile: 'http://localhost:8008/uploadFile',
+ *       byUrl: 'http://localhost:8008/fetchUrl',
+ *     }
+ *   },
+ * },
+ */
+
+import type { TunesMenuConfig } from '@ebl-vue/editorjs/types/tools';
+import type { API, ToolboxConfig, PasteConfig, BlockToolConstructorOptions, BlockTool, BlockAPI, PasteEvent, PatternPasteEventDetail, FilePasteEventDetail } from '@editorjs/editorjs';
+import './index.css';
+
+import Ui from './ui';
+import Uploader from './uploader';
+
+import { IconAddBorder, IconStretch, IconAddBackground, IconPicture, IconText } from '../../icons';
+import type { ActionConfig, UploadResponseFormat, ImageToolData, ImageConfig, HTMLPasteEventDetailExtended, ImageSetterParam, FeaturesConfig } from './types/types';
+
+type ImageToolConstructorOptions = BlockToolConstructorOptions<ImageToolData, ImageConfig>;
+
+/**
+ * Implementation of ImageTool class
+ */
+export default class ImageTool implements BlockTool {
+  /**
+   * Editor.js API instance
+   */
+  private api: API;
+
+  /**
+   * Current Block API instance
+   */
+  private block: BlockAPI;
+
+  /**
+   * Configuration for the ImageTool
+   */
+  private config: ImageConfig;
+
+  /**
+   * Uploader module instance
+   */
+  private uploader: any;
+
+  /**
+   * UI module instance
+   */
+  private ui: Ui;
+
+  /**
+   * Stores current block data internally
+   */
+  private _data: ImageToolData;
+
+  /**
+   * Caption enabled state
+   * Null when user has not toggled the caption tune
+   * True when user has toggled the caption tune
+   * False when user has toggled the caption tune
+   */
+  private isCaptionEnabled: boolean | null = null;
+
+  /**
+   * @param tool - tool properties got from editor.js
+   * @param tool.data - previously saved data
+   * @param tool.config - user config for Tool
+   * @param tool.api - Editor.js API
+   * @param tool.readOnly - read-only mode flag
+   * @param tool.block - current Block API
+   */
+  constructor({ data, config, api, readOnly, block }: ImageToolConstructorOptions) {
+    this.api = api;
+    this.block = block;
+    /**
+     * Tool's initial config
+     */
+    this.config = {
+      endpoints: config.endpoints,
+      additionalRequestData: config.additionalRequestData,
+      additionalRequestHeaders: config.additionalRequestHeaders,
+      field: config.field,
+      types: config.types,
+      captionPlaceholder: this.api.i18n.t(config.captionPlaceholder ?? 'Caption'),
+      buttonContent: config.buttonContent,
+      uploader: config.uploader,
+      actions: config.actions,
+      features: config.features || {},
+    };
+
+    /**
+     * Module for file uploading
+     */
+    this.uploader = new Uploader({
+      config: this.config,
+      onUpload: (response: UploadResponseFormat) => this.onUpload(response),
+      onError: (error: string) => this.uploadingFailed(error),
+    });
+
+    /**
+     * Module for working with UI
+     */
+    this.ui = new Ui({
+      api,
+      config: this.config,
+      onSelectFile: () => {
+        this.uploader.uploadSelectedFile({
+          onPreview: (src: string) => {
+            this.ui.showPreloader(src);
+          },
+        });
+      },
+      readOnly,
+    });
+
+    /**
+     * Set saved state
+     */
+    this._data = {
+      caption: '',
+      withBorder: false,
+      withBackground: false,
+      stretched: false,
+      file: {
+        url: '',
+      },
+    };
+    this.data = data;
+  }
+
+  /**
+   * Notify core that read-only mode is supported
+   */
+  public static get isReadOnlySupported(): boolean {
+    return true;
+  }
+
+  /**
+   * Get Tool toolbox settings
+   * icon - Tool icon's SVG
+   * title - title to show in toolbox
+   */
+  public static get toolbox(): ToolboxConfig {
+    return {
+      icon: IconPicture,
+      title: 'Image',
+    };
+  }
+
+  /**
+   * Available image tools
+   */
+  public static get tunes(): Array<ActionConfig> {
+    return [
+      {
+        name: 'withBorder',
+        icon: IconAddBorder,
+        title: 'With border',
+        toggle: true,
+      },
+      {
+        name: 'stretched',
+        icon: IconStretch,
+        title: 'Stretch image',
+        toggle: true,
+      },
+      {
+        name: 'withBackground',
+        icon: IconAddBackground,
+        title: 'With background',
+        toggle: true,
+      },
+    ];
+  }
+
+  /**
+   * Renders Block content
+   */
+  public render(): HTMLDivElement {
+    if (this.config.features?.caption === true || this.config.features?.caption === undefined || (this.config.features?.caption === 'optional' && this.data.caption)) {
+      this.isCaptionEnabled = true;
+      this.ui.applyTune('caption', true);
+    }
+
+    return this.ui.render() as HTMLDivElement;
+  }
+
+  /**
+   * Validate data: check if Image exists
+   * @param savedData — data received after saving
+   * @returns false if saved data is not correct, otherwise true
+   */
+  public validate(savedData: ImageToolData): boolean {
+    return !!savedData.file.url;
+  }
+
+  /**
+   * Return Block data
+   */
+  public save(): ImageToolData {
+    const caption = this.ui.nodes.caption;
+
+    this._data.caption = caption.innerHTML;
+
+    return this.data;
+  }
+
+  /**
+   * Returns configuration for block tunes: add background, add border, stretch image
+   * @returns TunesMenuConfig
+   */
+  public renderSettings(): TunesMenuConfig {
+    // Merge default tunes with the ones that might be added by user
+    // @see https://github.com/editor-js/image/pull/49
+    const tunes = ImageTool.tunes.concat(this.config.actions || []);
+    const featureTuneMap: Record<string, string> = {
+      border: 'withBorder',
+      background: 'withBackground',
+      stretch: 'stretched',
+      caption: 'caption',
+    };
+
+    if (this.config.features?.caption === 'optional') {
+      tunes.push({
+        name: 'caption',
+        icon: IconText,
+        title: 'With caption',
+        toggle: true,
+      });
+    }
+
+    const availableTunes = tunes.filter((tune) => {
+      const featureKey = Object.keys(featureTuneMap).find(key => featureTuneMap[key] === tune.name);
+
+      if (featureKey === 'caption') {
+        return this.config.features?.caption !== false;
+      }
+
+      return featureKey == null || this.config.features?.[featureKey as keyof FeaturesConfig] !== false;
+    });
+
+    /**
+     * Check if the tune is active
+     * @param tune - tune to check
+     */
+    const isActive = (tune: ActionConfig): boolean => {
+      let currentState = this.data[tune.name as keyof ImageToolData] as boolean;
+
+      if (tune.name === 'caption') {
+        currentState = this.isCaptionEnabled ?? currentState;
+      }
+
+      return currentState;
+    };
+
+    return availableTunes.map(tune => ({
+      icon: tune.icon,
+      label: this.api.i18n.t(tune.title),
+      name: tune.name,
+      toggle: tune.toggle,
+      isActive: isActive(tune),
+      onActivate: () => {
+        /** If it'a user defined tune, execute it's callback stored in action property */
+        if (typeof tune.action === 'function') {
+          tune.action(tune.name);
+
+          return;
+        }
+        let newState = !isActive(tune);
+
+        /**
+         * For the caption tune, we can't rely on the this._data
+         * because it can be manualy toggled by user
+         */
+        if (tune.name === 'caption') {
+          this.isCaptionEnabled = !(this.isCaptionEnabled ?? false);
+          newState = this.isCaptionEnabled;
+        }
+
+        this.tuneToggled(tune.name as keyof ImageToolData, newState);
+      },
+    }));
+  }
+
+  /**
+   * Fires after clicks on the Toolbox Image Icon
+   * Initiates click on the Select File button
+   */
+  public appendCallback(): void {
+    this.ui.nodes.fileButton.click();
+  }
+
+  /**
+   * Specify paste substitutes
+   * @see {@link https://github.com/codex-team/editor.js/blob/master/docs/tools.md#paste-handling}
+   */
+  public static get pasteConfig(): PasteConfig {
+    return {
+      /**
+       * Paste HTML into Editor
+       */
+      tags: [
+        {
+          img: { src: true },
+        },
+      ],
+      /**
+       * Paste URL of image into the Editor
+       */
+      patterns: {
+        image: /https?:\/\/\S+\.(gif|jpe?g|tiff|png|svg|webp)(\?[a-z0-9=]*)?$/i,
+      },
+
+      /**
+       * Drag n drop file from into the Editor
+       */
+      files: {
+        mimeTypes: ['image/*'],
+      },
+    };
+  }
+
+  /**
+   * Specify paste handlers
+   * @see {@link https://github.com/codex-team/editor.js/blob/master/docs/tools.md#paste-handling}
+   * @param event - editor.js custom paste event
+   *                              {@link https://github.com/codex-team/editor.js/blob/master/types/tools/paste-events.d.ts}
+   */
+  public async onPaste(event: PasteEvent): Promise<void> {
+    switch (event.type) {
+      case 'tag': {
+        const image = (event.detail as HTMLPasteEventDetailExtended).data;
+
+        /** Images from PDF */
+        if (/^blob:/.test(image.src)) {
+          const response = await fetch(image.src);
+
+          const file = await response.blob();
+
+          this.uploadFile(file);
+          break;
+        }
+
+        this.uploadUrl(image.src);
+        break;
+      }
+      case 'pattern': {
+        const url = (event.detail as PatternPasteEventDetail).data;
+
+        this.uploadUrl(url);
+        break;
+      }
+      case 'file': {
+        const file = (event.detail as FilePasteEventDetail).file;
+
+        this.uploadFile(file);
+        break;
+      }
+    }
+  }
+
+  /**
+   * Private methods
+   */
+
+  /**
+   * Stores all Tool's data
+   * @param data - data in Image Tool format
+   */
+  private set data(data: ImageToolData) {
+    this.image = data.file;
+
+    this._data.caption = data.caption || '';
+    this.ui.fillCaption(this._data.caption);
+
+    ImageTool.tunes.forEach(({ name: tune }) => {
+      const value = typeof data[tune as keyof ImageToolData] !== 'undefined' ? data[tune as keyof ImageToolData] === true || data[tune as keyof ImageToolData] === 'true' : false;
+
+      this.setTune(tune as keyof ImageToolData, value);
+    });
+
+    if (data.caption) {
+      this.setTune('caption', true);
+    } else if (this.config.features?.caption === true) {
+      this.setTune('caption', true);
+    }
+  }
+
+  /**
+   * Return Tool data
+   */
+  private get data(): ImageToolData {
+    return this._data;
+  }
+
+  /**
+   * Set new image file
+   * @param file - uploaded file data
+   */
+  private set image(file: ImageSetterParam | undefined) {
+    this._data.file = file || { url: '' };
+
+    if (file && file.url) {
+      this.ui.fillImage(file.url);
+    }
+  }
+
+  /**
+   * File uploading callback
+   * @param response - uploading server response
+   */
+  private onUpload(response: UploadResponseFormat): void {
+    if (response.success && Boolean(response.file)) {
+      this.image = response.file;
+    } else {
+      this.uploadingFailed('incorrect response: ' + JSON.stringify(response));
+    }
+  }
+
+  /**
+   * Handle uploader errors
+   * @param errorText - uploading error info
+   */
+  private uploadingFailed(errorText: string): void {
+    console.log('Image Tool: uploading failed because of', errorText);
+    
+   
+    this.api.notifier.show({
+      message: this.api.i18n.t('Couldn’t upload image. Please try another.'),
+      style: 'error',
+    });
+    this.ui.hidePreloader();
+  }
+
+  /**
+   * Callback fired when Block Tune is activated
+   * @param tuneName - tune that has been clicked
+   * @param state - new state
+   */
+  private tuneToggled(tuneName: keyof ImageToolData, state: boolean): void {
+    if (tuneName === 'caption') {
+      this.ui.applyTune(tuneName, state);
+
+      if (state == false) {
+        this._data.caption = '';
+        this.ui.fillCaption('');
+      }
+    } else {
+      /**
+       * Inverse tune state
+       */
+      this.setTune(tuneName, state);
+    }
+  }
+
+  /**
+   * Set one tune
+   * @param tuneName - {@link Tunes.tunes}
+   * @param value - tune state
+   */
+  private setTune(tuneName: keyof ImageToolData, value: boolean): void {
+    (this._data[tuneName] as boolean) = value;
+
+    this.ui.applyTune(tuneName, value);
+    if (tuneName === 'stretched') {
+      /**
+       * Wait until the API is ready
+       */
+      Promise.resolve().then(() => {
+        this.block.stretched = value;
+      })
+        .catch((err) => {
+          console.error(err);
+        });
+    }
+  }
+
+  /**
+   * Show preloader and upload image file
+   * @param file - file that is currently uploading (from paste)
+   */
+  private uploadFile(file: Blob): void {
+    this.uploader.uploadByFile(file, {
+      onPreview: (src: string) => {
+        this.ui.showPreloader(src);
+      },
+    });
+  }
+
+  /**
+   * Show preloader and upload image by target url
+   * @param url - url pasted
+   */
+  private uploadUrl(url: string): void {
+    this.ui.showPreloader(url);
+    this.uploader.uploadByUrl(url);
+  }
+}