@ebl-vue/editor-full 2.31.25 → 2.31.31

package/src/plugins/imageResizeCrop/ImageTune.ts

@@ -1,916 +0,0 @@
-
-//import Cropper from 'cropperjs';
-//import 'cropperjs/dist/cropper.css';
-import './index.css';
-import  type {  BlockTune,  API,  BlockAPI } from '@ebl-vue/editorjs/types'
-
-
-export interface TuneSetting {
-  name: string;
-  icon: string;
-  label: string;
-  group: string;
-}
-
-export interface ImageToolTuneData {
-  floatLeft: boolean;
-  floatRight: boolean;
-  center: boolean;
-  sizeSmall: boolean;
-  sizeMiddle: boolean;
-  sizeLarge: boolean;
-  resize: boolean;
-  resizeSize: number;
-  crop: boolean;
-  cropperFrameHeight: number;
-  cropperFrameWidth: number;
-  cropperFrameLeft: number;
-  cropperFrameTop: number;
-  cropperImageHeight: number;
-  cropperImageWidth: number;
-  cropperInterface?: any//Cropper;
-}
-
-export interface ImageToolTuneConfig {
-  resize: boolean;
-  crop: boolean;
-}
-
-export interface CustomStyles {
-  settingsButton: string;
-  settingsButtonActive: string;
-  settingsButtonModifier?: string;
-  settingsButtonModifierActive?: string;
-}
-
-export type ImageToolTuneConstructor = {
-  api: API;
-  data: Partial<ImageToolTuneData>;
-  config?: ImageToolTuneConfig;
-  block: BlockAPI;
-};
-
-export default class ImageToolTune  implements BlockTune {
-  private settings: TuneSetting[];
-  private api: API;
-  private block: BlockAPI;
-  private data: ImageToolTuneData;
-  private wrapper: HTMLElement | undefined;
-  private buttons: HTMLElement[];
-  private styles: CustomStyles;
-
-  constructor({ api, data, config, block }: ImageToolTuneConstructor) {
-    this.settings = [
-      
-    ];
-
-    this.api = api;
-    this.block = block;
-    this.data = {
-      floatLeft: data?.floatLeft ?? false,
-      floatRight: data?.floatRight ?? false,
-      center: data?.center ?? false,
-      sizeSmall: data?.sizeSmall ?? false,
-      sizeMiddle: data?.sizeMiddle ?? false,
-      sizeLarge: data?.sizeLarge ?? false,
-      resize: data?.resize ?? config?.resize ?? false,
-      resizeSize: data?.resizeSize ?? 0,
-      crop: data?.crop ?? config?.crop ?? false,
-      cropperFrameHeight: data?.cropperFrameHeight ?? 0,
-      cropperFrameWidth: data?.cropperFrameWidth ?? 0,
-      cropperFrameLeft: data?.cropperFrameLeft ?? 0,
-      cropperFrameTop: data?.cropperFrameTop ?? 0,
-      cropperImageHeight: data?.cropperImageHeight ?? 0,
-      cropperImageWidth: data?.cropperImageWidth ?? 0,
-      cropperInterface: undefined,
-    };
-    this.wrapper = undefined;
-    this.buttons = [];
-    this.styles = {
-      settingsButton: 'cdx-settings-button',
-      settingsButtonActive: 'cdx-settings-button--active',
-      settingsButtonModifier: '',
-      settingsButtonModifierActive: '',
-    };
-  }
-
-  static get isTune(): boolean {
-    return true;
-  }
-
-  static get sanitize(): Record<string, object> {
-    return {
-      floatLeft: {},
-      floatRight: {},
-      center: {},
-      sizeSmall: {},
-      sizeMiddle: {},
-      sizeLarge: {},
-      resize: {},
-      resizeSize: {},
-      crop: {},
-      cropperFrameHeight: {},
-      cropperFrameWidth: {},
-      cropperFrameLeft: {},
-      cropperFrameTop: {},
-      cropperImageHeight: {},
-      cropperImageWidth: {},
-      cropperInterface: {},
-    };
-  }
-
-  /**
-   * CSS classes
-   *  @return {object}
-   * @constructor
-   * @property {string} CSS.wrapper - wrapper for buttons
-   * @property {string} CSS.button - button
-   * @property {string} CSS.buttonActive - active button
-   * @property {string} CSS.buttonModifier - button with modifier
-   * @property {string} CSS.buttonModifierActive - active button with modifier
-   */
-  get CSS(): Record<string, string> {
-    return {
-      wrapper: 'cdx-image-tool-tune',
-      button: this.styles.settingsButton,
-      buttonActive: this.styles.settingsButtonActive,
-      buttonModifier: this.styles.settingsButtonModifier || '',
-      buttonModifierActive: this.styles.settingsButtonModifierActive || '',
-      isFloatLeft: 'cdx-image-tool-tune--floatLeft',
-      isFloatRight: 'cdx-image-tool-tune--floatRight',
-      isCenter: 'cdx-image-tool-tune--center',
-      isSizeSmall: 'cdx-image-tool-tune--sizeSmall',
-      isSizeMiddle: 'cdx-image-tool-tune--sizeMiddle',
-      isSizeLarge: 'cdx-image-tool-tune--sizeLarge',
-      isResize: 'cdx-image-tool-tune--resize',
-      isCrop: 'cdx-image-tool-tune--crop',
-    };
-  }
-
-  /**
-   *
-   * @return {HTMLElement}
-   * @public
-   * @readonly
-   * @property {HTMLElement} wrapper - tune buttons wrapper
-   */
-  get view(): HTMLElement {
-    if (!this.wrapper) {
-      this.wrapper = this.createView();
-    }
-
-    return this.wrapper;
-  }
-
-  /**
-   * Clicks to one of the tunes
-   * @param {MouseEvent} e - click
-   * @param {HTMLElement} tune - clicked tune button
-   * @private
-   * @return {void}
-   * */
-  tuneClicked(e: MouseEvent, tune: HTMLElement): void {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const tuneName = tune.dataset.tune || '';
-    const tuneGroup = this.settings.find(t => t.name === tuneName)?.group;
-
-    this.buttons.forEach(button => {
-      //if is the same group
-      if (
-        this.settings.find(t => t.name === button.dataset.tune)?.group ===
-        tuneGroup
-      ) {
-        if (button !== tune) {
-          button.classList.remove(this.CSS.buttonActive);
-        }
-      }
-    });
-
-    tune.classList.toggle(this.CSS.buttonActive);
-    this.setTune(tuneName);
-  }
-
-  /**
-   * Styles the image with a tune
-   * @param {string} tune - tune name
-   * @private
-   * @return {void}
-   * */
-  setTune(tune: string): void {
-    switch (tune) {
-      case 'floatLeft':
-        this.data.floatLeft = !this.data.floatLeft;
-        this.data.floatRight = false;
-        this.data.center = false;
-        break;
-      case 'floatRight':
-        this.data.floatLeft = false;
-        this.data.floatRight = !this.data.floatRight;
-        this.data.center = false;
-        break;
-      case 'center':
-        this.data.center = !this.data.center;
-        this.data.floatLeft = false;
-        this.data.floatRight = false;
-        break;
-      case 'sizeSmall':
-        this.data.sizeSmall = !this.data.sizeSmall;
-        this.data.sizeMiddle = false;
-        this.data.sizeLarge = false;
-        this.data.resize = false;
-        this.data.crop = false;
-        break;
-      case 'sizeMiddle':
-        this.data.sizeSmall = false;
-        this.data.sizeMiddle = !this.data.sizeMiddle;
-        this.data.sizeLarge = false;
-        this.data.resize = false;
-        this.data.crop = false;
-        break;
-      case 'sizeLarge':
-        this.data.sizeSmall = false;
-        this.data.sizeMiddle = false;
-        this.data.sizeLarge = !this.data.sizeLarge;
-        this.data.resize = false;
-        this.data.crop = false;
-        break;
-      case 'resize':
-        this.data.sizeSmall = false;
-        this.data.sizeMiddle = false;
-        this.data.sizeLarge = false;
-        this.data.resize = !this.data.resize;
-        this.data.crop = false;
-        break;
-      case 'crop':
-        this.data.crop = !this.data.crop;
-        this.data.sizeSmall = false;
-        this.data.sizeMiddle = false;
-        this.data.sizeLarge = false;
-        this.data.resize = false;
-        this.data.resizeSize = 0;
-        break;
-      default:
-        this.data.floatLeft = false;
-        this.data.floatRight = false;
-        this.data.sizeSmall = false;
-        this.data.sizeMiddle = false;
-        this.data.sizeLarge = false;
-        this.data.resize = false;
-        this.data.crop = false;
-        break;
-    }
-
-    if (!this.data.resize) {
-      this.data.resizeSize = 0;
-    }
-
-    if (!this.data.crop) {
-      this.data.cropperFrameHeight = 0;
-      this.data.cropperFrameWidth = 0;
-      this.data.cropperFrameLeft = 0;
-      this.data.cropperFrameTop = 0;
-      this.data.cropperImageHeight = 0;
-      this.data.cropperImageWidth = 0;
-    }
-
-    const blockContent = this.block.holder.querySelector(
-      '.ce-block__content',
-    ) as HTMLElement;
-    this.apply(blockContent);
-    this.block.dispatchChange();
-  }
-
-  /**
-   * Append class to block by tune data
-   * @param {HTMLElement} blockContent - wrapper for block content
-   * @public
-   * @return {void}
-   *  */
-  apply(blockContent: HTMLElement): void {
-    if (this.data.floatLeft) {
-      blockContent.classList.add(this.CSS.isFloatLeft);
-    } else {
-      blockContent.classList.remove(this.CSS.isFloatLeft);
-    }
-
-    if (this.data.floatRight) {
-      blockContent.classList.add(this.CSS.isFloatRight);
-    } else {
-      blockContent.classList.remove(this.CSS.isFloatRight);
-    }
-
-    if (this.data.center) {
-      blockContent.classList.add(this.CSS.isCenter);
-    } else {
-      blockContent.classList.remove(this.CSS.isCenter);
-    }
-
-    if (this.data.sizeSmall) {
-      blockContent.classList.add(this.CSS.isSizeSmall);
-    } else {
-      blockContent.classList.remove(this.CSS.isSizeSmall);
-    }
-
-    if (this.data.sizeMiddle) {
-      blockContent.classList.add(this.CSS.isSizeMiddle);
-    } else {
-      blockContent.classList.remove(this.CSS.isSizeMiddle);
-    }
-
-    if (this.data.sizeLarge) {
-      blockContent.classList.add(this.CSS.isSizeLarge);
-    } else {
-      blockContent.classList.remove(this.CSS.isSizeLarge);
-    }
-
-    if (this.data.resize) {
-      blockContent.classList.add(this.CSS.isResize);
-
-      if (this.data.resizeSize > 0) {
-        const cdxBlock = blockContent.getElementsByClassName(
-          'cdx-block',
-        )[0] as HTMLElement;
-        cdxBlock.style.width = this.data.resizeSize + 'px';
-      }
-
-      this.resize(blockContent);
-    } else {
-      blockContent.classList.remove(this.CSS.isResize);
-      this.unresize(blockContent);
-    }
-
-    if (this.data.crop) {
-      blockContent.classList.add(this.CSS.isCrop);
-
-      this.crop(blockContent);
-      if (this.data.cropperFrameHeight > 0 && this.data.cropperFrameWidth > 0) {
-        this.applyCrop(blockContent);
-      }
-    } else {
-      blockContent.classList.remove(this.CSS.isCrop);
-      this.uncrop(blockContent);
-    }
-  }
-
-  /**
-   * Add crop handles to image
-   * @param {HTMLElement} blockContent - wrapper for block content
-   * @public
-   * @return {void}
-   */
-  crop(blockContent: HTMLElement): void {
-    //add append crop button to image-tool__image
-    //If editor is readOnly, do not add crop button
-    if (this.api.readOnly.isEnabled) return;
-
-    const image = blockContent.getElementsByClassName(
-      'image-tool__image',
-    )[0] as HTMLElement;
-    const cropBtn = document.createElement('div');
-    cropBtn.classList.add('crop-btn', 'btn-crop-action');
-    cropBtn.innerHTML = this.api.i18n.t('Crop');
-
-    cropBtn.addEventListener('click', () => {
-      //remove crop button
-      image.removeChild(cropBtn);
-      this.appendCrop(blockContent);
-    });
-
-    image.appendChild(cropBtn);
-  }
-
-  appendCrop(blockContent: HTMLElement): void {
-    if (this.api.readOnly.isEnabled) return;
-
-    this.uncrop(blockContent);
-    const cdxBlock = blockContent.getElementsByClassName(
-      'cdx-block',
-    )[0] as HTMLElement;
-    const image = cdxBlock.getElementsByTagName('img')[0] as HTMLImageElement;
-    cdxBlock.classList.add('isCropping');
-    this.data.cropperInterface = new Cropper(image);
-
-    //append save crop button
-    const cropSaveBtn = document.createElement('div');
-    cropSaveBtn.classList.add('crop-save', 'btn-crop-action');
-    cropSaveBtn.innerHTML = this.api.i18n.t('Apply');
-
-    cropSaveBtn.addEventListener('click', () => {
-      if (this.data.cropperInterface) {
-        this.data.cropperFrameHeight =
-          this.data.cropperInterface.getCropBoxData().height;
-        this.data.cropperFrameWidth =
-          this.data.cropperInterface.getCropBoxData().width;
-        this.data.cropperFrameLeft =
-          this.data.cropperInterface.getCanvasData().left -
-          this.data.cropperInterface.getCropBoxData().left;
-        this.data.cropperFrameTop =
-          this.data.cropperInterface.getCanvasData().top -
-          this.data.cropperInterface.getCropBoxData().top;
-        this.data.cropperImageHeight =
-          this.data.cropperInterface.getImageData().height;
-        this.data.cropperImageWidth =
-          this.data.cropperInterface.getImageData().width;
-      }
-      this.applyCrop(blockContent);
-    });
-
-    const imageToolImage = blockContent.getElementsByClassName(
-      'image-tool__image',
-    )[0] as HTMLElement;
-    imageToolImage.appendChild(cropSaveBtn);
-
-    //add temporary style to block content so that it comes in front of every other block
-    blockContent.classList.add('isCropping');
-  }
-
-  applyCrop(blockContent: HTMLElement): void {
-    //apply data to image and remove cropper interface and save button, add crop button
-    const blockEl = blockContent.getElementsByClassName(
-      'cdx-block',
-    )[0] as HTMLElement;
-    if (blockEl) {
-      blockEl.style.minWidth = this.data.cropperFrameWidth + 'px';
-      blockEl.style.maxWidth = this.data.cropperFrameWidth + 'px';
-
-      const image = blockEl.getElementsByTagName('img')[0] as HTMLImageElement;
-      image.style.width = this.data.cropperImageWidth + 'px';
-      image.style.height = this.data.cropperImageHeight + 'px';
-
-      const blockImg = blockContent.getElementsByClassName(
-        'image-tool__image',
-      )[0] as HTMLElement;
-      blockImg.style.width = this.data.cropperFrameWidth + 'px';
-      blockImg.style.height = this.data.cropperFrameHeight + 'px';
-
-      const imageEl = blockImg.getElementsByTagName(
-        'img',
-      )[0] as HTMLImageElement;
-      if (imageEl) {
-        imageEl.style.left = this.data.cropperFrameLeft + 'px';
-        imageEl.style.top = this.data.cropperFrameTop + 'px';
-        imageEl.classList.add('isCropped');
-      }
-
-      blockEl.classList.remove('isCropping');
-
-      const cropSaveBtn = blockContent.getElementsByClassName(
-        'btn-crop-action',
-      )[0] as HTMLElement;
-      if (cropSaveBtn) {
-        blockImg.removeChild(cropSaveBtn);
-      }
-    }
-
-    //remove cropper interface
-    if (this.data.cropperInterface) {
-      this.data.cropperInterface.destroy();
-      this.data.cropperInterface = undefined;
-    }
-
-    //add crop button
-    if (this.api.readOnly.isEnabled) return;
-    const cropBtn = document.createElement('div');
-    cropBtn.classList.add('crop-btn', 'btn-crop-action');
-    cropBtn.innerHTML = this.api.i18n.t('Crop');
-
-    const imageToolImage = blockContent.getElementsByClassName(
-      'image-tool__image',
-    )[0] as HTMLElement;
-    if (imageToolImage) {
-      cropBtn.addEventListener('click', () => {
-        //remove crop button
-        imageToolImage.removeChild(cropBtn);
-        this.appendCrop(blockContent);
-      });
-
-      imageToolImage.appendChild(cropBtn);
-    }
-
-    blockContent.classList.remove('isCropping');
-    this.block.dispatchChange();
-  }
-
-  uncrop(blockContent: HTMLElement): void {
-    if (this.api.readOnly.isEnabled) return;
-
-    const imageEl = blockContent.getElementsByClassName(
-      'image-tool__image',
-    )[0] as HTMLElement;
-
-    //remove crop and save button
-    const cropSaveBtn = blockContent.getElementsByClassName(
-      'btn-crop-action',
-    )[0] as HTMLElement;
-    if (cropSaveBtn && imageEl) {
-      imageEl.removeChild(cropSaveBtn);
-    }
-
-    //remove crop button
-    const cropBtn = blockContent.getElementsByClassName(
-      'btn-crop-action',
-    )[0] as HTMLElement;
-    if (cropBtn && imageEl) {
-      imageEl.removeChild(cropBtn);
-    }
-
-    //remove isCropped class
-    const blockEl = blockContent.getElementsByClassName(
-      'cdx-block',
-    )[0] as HTMLElement;
-    if (blockEl) {
-      const image = blockEl.getElementsByTagName('img')[0] as HTMLImageElement;
-      if (image) image.classList.remove('isCropped');
-
-      //remove isCropping class
-      blockEl.classList.remove('isCropping');
-
-      //remove min and max width
-      blockEl.style.minWidth = '';
-      blockEl.style.maxWidth = '';
-    }
-
-    if (imageEl) {
-      //remove image width and height
-      imageEl.style.width = '';
-      imageEl.style.height = '';
-
-      //remove image left and top
-      const image = imageEl.getElementsByTagName('img')[0] as HTMLImageElement;
-      if (image) {
-        image.style.left = '';
-        image.style.top = '';
-
-        //remove image width and height
-        image.style.width = '';
-        image.style.height = '';
-      }
-    }
-
-    blockContent.classList.remove('isCropping');
-
-    //remove cropper interface
-    if (this.data.cropperInterface) {
-      this.data.cropperInterface.destroy();
-      this.data.cropperInterface = undefined;
-    }
-
-    //remove crop data
-    this.data.cropperFrameHeight = 0;
-    this.data.cropperFrameWidth = 0;
-    this.data.cropperFrameLeft = 0;
-    this.data.cropperFrameTop = 0;
-    this.data.cropperImageHeight = 0;
-    this.data.cropperImageWidth = 0;
-  }
-
-  /**
-   * Add resize handles to block
-   * @param {HTMLElement} blockContent - wrapper for block content
-   * @public
-   * @return {void}
-   * */
-  resize(blockContent: HTMLElement): void {
-    if (this.api.readOnly.isEnabled) return;
-    const resizable = document.createElement('div');
-    resizable.classList.add('resizable');
-
-    const resizers = document.createElement('div');
-    resizers.classList.add('resizers');
-
-    const resizerTopRight = document.createElement('div');
-    resizerTopRight.classList.add('resizer', 'top-right');
-    resizerTopRight.addEventListener('mousedown', e => {
-      this.resizeClick(
-        blockContent.getElementsByClassName('cdx-block')[0] as HTMLElement,
-        "right",
-        e,
-      );
-    });
-
-    const resizerBottomRight = document.createElement('div');
-    resizerBottomRight.classList.add('resizer', 'bottom-right');
-    resizerBottomRight.addEventListener('mousedown', e => {
-      this.resizeClick(
-        blockContent.getElementsByClassName('cdx-block')[0] as HTMLElement,
-        "right",
-        e,
-      );
-    });
-
-    const resizerTopLeft = document.createElement('div');
-    resizerTopLeft.classList.add('resizer', 'top-left');
-    resizerTopLeft.addEventListener('mousedown', e => {
-      this.resizeClick(
-        blockContent.getElementsByClassName('cdx-block')[0] as HTMLElement,
-        "left",
-        e,
-      );
-    });
-    const resizerBottomLeft = document.createElement('div');
-    resizerBottomLeft.classList.add('resizer', 'bottom-left');
-    resizerBottomLeft.addEventListener('mousedown', e => {
-      this.resizeClick(
-        blockContent.getElementsByClassName('cdx-block')[0] as HTMLElement,
-        "left",
-        e,
-      );
-    });
-
-
-    resizers.appendChild(resizerTopRight);
-    resizers.appendChild(resizerBottomRight);
-    resizers.appendChild(resizerTopLeft);
-    resizers.appendChild(resizerBottomLeft);
-    resizable.appendChild(resizers);
-    blockContent.getElementsByClassName('cdx-block')[0].appendChild(resizable);
-  }
-
-  /**
-   * click event to resize handles
-   * preserve aspect ratio
-   * prevent block from moving when dragging resize handles
-   * max size = 100%
-   * min size = 50px
-   * @param {HTMLElement} blockContent - wrapper for block content
-   * @param {HTMLElement} handle - resize handle
-   * @param {MouseEvent} e - mouse event
-   * @public
-   * @return {void}
-   * */
-  resizeClick(blockContent: HTMLElement, handleDirection: String, e: MouseEvent): void {
-    const maxWidth =
-      document.getElementsByClassName('ce-block__content')[0].clientWidth;
-    let startX = 0;
-    let startWidth = 0;
-
-    const mouseMoveHandler = (e: MouseEvent) => {
-      const dx = e.clientX - startX;
-      let newWidth = startWidth;
-      if (handleDirection === "right") {
-        newWidth += dx;
-      }
-      if (handleDirection === "left") {
-        newWidth -= dx;
-      }
-
-      if (newWidth > 50 && newWidth < maxWidth) {
-        (
-          blockContent as HTMLElement & { style: CSSStyleDeclaration }
-        ).style.width = newWidth + 'px';
-      }
-    };
-
-    const mouseUpHandler = () => {
-      const blockWidth = parseInt(
-        window.getComputedStyle(blockContent).width,
-        10,
-      );
-
-      if (blockWidth > 0) {
-        this.data.resizeSize = blockWidth;
-      }
-
-      document.removeEventListener('mousemove', mouseMoveHandler);
-      document.removeEventListener('mouseup', mouseUpHandler);
-
-      this.block.dispatchChange();
-    };
-
-    document.addEventListener('mousemove', mouseMoveHandler);
-    document.addEventListener('mouseup', mouseUpHandler);
-
-    startX = e.clientX;
-    startWidth = parseInt(window.getComputedStyle(blockContent).width, 10);
-  }
-
-  /**
-   * Remove resize handles from block
-   * @param {HTMLElement} blockContent - wrapper for block content
-   * @public
-   * @return {void}
-   */
-  unresize(blockContent: HTMLElement): void {
-    const unresizable = blockContent.getElementsByClassName(
-      'resizable',
-    )[0] as HTMLElement;
-    if (unresizable) {
-      blockContent
-        .getElementsByClassName('cdx-block')[0]
-        .removeChild(unresizable);
-    }
-
-    const block: HTMLElement = blockContent.getElementsByClassName(
-      'cdx-block',
-    )[0] as HTMLElement;
-    block.style.width = 'auto';
-  }
-
-  /**
-   * Remove tunes from block wrapper
-   * @param {HTMLElement} blockContent - wrapper for block content
-   * @public
-   * @return {HTMLElement}
-   */
-  unwrap(blockContent: HTMLElement): HTMLElement {
-    //remove tunes from block
-    this.buttons.forEach(button => {
-      button.classList.remove(this.CSS.buttonActive);
-    });
-
-    //remove isFloatLeft class
-    blockContent.classList.remove(this.CSS.isFloatLeft);
-
-    //remove isFloatRight class
-    blockContent.classList.remove(this.CSS.isFloatRight);
-
-    //remove isCenter class
-    blockContent.classList.remove(this.CSS.isCenter);
-
-    //remove isSizeSmall class
-    blockContent.classList.remove(this.CSS.isSizeSmall);
-
-    //remove isSizeMiddle class
-    blockContent.classList.remove(this.CSS.isSizeMiddle);
-
-    //remove isSizeLarge class
-    blockContent.classList.remove(this.CSS.isSizeLarge);
-
-    //remove isResize class
-    blockContent.classList.remove(this.CSS.isResize);
-
-    //remove isCrop class
-    blockContent.classList.remove(this.CSS.isCrop);
-
-    //remove isCropped class
-    const cdxBlock = blockContent.getElementsByClassName(
-      'cdx-block',
-    )[0] as HTMLElement;
-    const img = cdxBlock.getElementsByTagName('img')[0] as HTMLImageElement;
-    img.classList.remove('isCropped');
-
-    //remove isCropping class
-    cdxBlock.classList.remove('isCropping');
-
-    //remove min and max width
-    cdxBlock.style.minWidth = '';
-    cdxBlock.style.maxWidth = '';
-
-    //remove image width and height
-    const imageToolImage = blockContent.getElementsByClassName(
-      'image-tool__image',
-    )[0] as HTMLElement;
-    imageToolImage.style.width = '';
-    imageToolImage.style.height = '';
-
-    //remove image left and top
-    const image = imageToolImage.getElementsByTagName(
-      'img',
-    )[0] as HTMLImageElement;
-    image.style.left = '';
-    image.style.top = '';
-
-    //remove image width and height
-    image.style.width = '';
-    image.style.height = '';
-
-    //remove resize handles
-    this.unresize(blockContent);
-
-    //remove crop handles
-    this.uncrop(blockContent);
-
-    //remove cropper interface
-    if (this.data.cropperInterface) {
-      this.data.cropperInterface.destroy();
-      this.data.cropperInterface = undefined;
-    }
-
-    //remove crop data
-    this.data.cropperFrameHeight = 0;
-    this.data.cropperFrameWidth = 0;
-    this.data.cropperFrameLeft = 0;
-    this.data.cropperFrameTop = 0;
-    this.data.cropperImageHeight = 0;
-    this.data.cropperImageWidth = 0;
-
-    return blockContent;
-  }
-
-  /**
-   * Add tune to block data
-   * @private
-   * @return {ImageToolTuneData}
-   * */
-  save(): ImageToolTuneData {
-    return this.data;
-  }
-
-  /**
-   * Append tunes to block wrapper
-   * @param {HTMLElement} blockContent - wrapper for block content
-   * @public
-   * @return {HTMLElement}
-   * */
-  wrap(blockContent: HTMLElement): HTMLElement {
-    //createview if not exists
-    if (!this.wrapper) {
-      this.wrapper = this.createView();
-    }
-
-    this.apply(blockContent);
-    return blockContent;
-  }
-
-  private tuneNameToI18nKey(tuneName: string): string {
-    const translation: Record<string, string> = {
-      crop: 'Crop',
-      resize: 'Resize',
-    };
-    return translation[tuneName];
-  }
-
-  /**
-   * Creates a view for tunes
-   * @return {HTMLElement}
-   * @private
-   * */
-  createView(): HTMLElement {
-    this.buttons = this.settings.map(tune => {
-      const el = document.createElement('div');
-      const buttonIco = document.createElement('span');
-      const buttonTxt = document.createElement('span');
-      el.classList.add(this.CSS.button);
-      buttonTxt.style.fontSize = '8px';
-      buttonIco.innerHTML = tune.icon;
-      buttonTxt.innerHTML = tune.label;
-      el.appendChild(buttonIco);
-      el.appendChild(buttonTxt);
-      el.dataset.tune = tune.name;
-      el.title = tune.label;
-
-      el.addEventListener('click', e => this.tuneClicked(e, el));
-      this.api.tooltip.onHover(
-        el,
-        this.api.i18n.t(this.tuneNameToI18nKey(tune.name)),
-      );
-      return el;
-    });
-    const wrapper = document.createElement('div');
-    this.buttons.forEach(button => {
-      wrapper.appendChild(button);
-    });
-    wrapper.classList.add(this.CSS.wrapper);
-    return wrapper;
-  }
-
-  /**
-   * Checks if tune is active
-   * @param {string} tune - tune name
-   * @return {boolean}
-   * @private
-   * */
-  isTuneActive(tune: string): boolean {
-    return !!this.data[tune as keyof ImageToolTuneData];
-  }
-
-  /**
-   * Makes buttons with tunes
-   * @return {HTMLElement}
-   * @public
-   * */
-  render(): HTMLElement {
-    //when editor is ready
-    this.buttons.forEach(button => {
-      const tuneName = button.dataset.tune || '';
-      button.classList.toggle(
-        this.CSS.buttonActive,
-        this.isTuneActive(tuneName),
-      );
-    });
-
-    return this.view;
-  }
-
-  /**
-   * Destroys the plugin
-   * @public
-   * @return {void}
-   * */
-  destroy(): void {
-    this.wrapper = undefined;
-    this.buttons = [];
-  }
-
-  /**
-   * Toggle tune
-   * @param {string} tuneName - tune name
-   * @private
-   * @return {void}
-   * */
-  _toggleTune(tuneName: string): void {
-    this.setTune(tuneName);
-  }
-}