/*
 * @Description: 重写图片
 * @Author: tangjiang
 * @Github:
 * @Date: 2019-12-16 15:50:45
 * @LastEditors  : tangjiang
 * @LastEditTime : 2019-12-31 13:59:02
 */
import Quill from "quill";
import mediator from "../mediator";

const BlockEmbed = Quill.import('blots/block/embed');
//stringify 序列化，其中的onclick函数会丢失。
export default class ImageBlot extends BlockEmbed {

  static create(value) {

    const node = super.create()
    const { alt, url, width, height, id } = value

    node.setAttribute('alt', alt)
    node.setAttribute('src', url)

    if (value.id) {
      node.setAttribute('id', value.id);
    }

    node.setAttribute('style', 'max-width: 100%, cursor:pointer');
    node.onload = function () {
      node.setAttribute('width', width ? width : this.width)
      node.setAttribute('height', height ? height : this.height)
    }

    node.addEventListener('click', () => {
      mediator.publish('on-preview-image', value.url)
    })
    return node;
  }

  // 获取节点值
  static value(node) {

    return {
      alt: node.getAttribute('alt'),
      url: node.getAttribute('src'),
      width: node.width,
      height: node.height,
      id: node.id,
    };
  }
}

ImageBlot.blotName = 'image';
ImageBlot.tagName = 'img';
