vue-editify 0.1.13 → 0.1.16

package/lib/editify.es.js

@@ -1146,6 +1146,151 @@ const event$1 = {
     return events;
   }
 };
+const file$1 = {
+  /**
+   * 根据文件获取可预览的图片路径
+   * @param {Object} file
+   */
+  getImageUrl(file2) {
+    if (!file2 || !(file2 instanceof File)) {
+      throw new TypeError("The argument must be a File object");
+    }
+    return window.URL.createObjectURL(file2);
+  },
+  /**
+   * 将JS的file对象转为BASE64位字符串，通过then方法回调,参数为base64字符串
+   * @param {Object} file
+   */
+  dataFileToBase64(file2) {
+    return new Promise((resolve, reject) => {
+      if (!file2 || !(file2 instanceof File)) {
+        reject(new TypeError("The argument must be a File object"));
+      }
+      let reader = new FileReader();
+      reader.readAsDataURL(file2);
+      reader.onloadend = () => {
+        let dataURL = reader.result;
+        resolve(dataURL);
+      };
+    });
+  },
+  /**
+   * 将base64位格式文件转换为file对象
+   * @param {Object} base64String base64位格式字符串
+   * @param {Object} fileName 转换后的文件名字，包含后缀
+   */
+  dataBase64toFile(base64String, fileName) {
+    if (!base64String || typeof base64String != "string") {
+      throw new TypeError("The first argument must be a string");
+    }
+    if (!fileName || typeof fileName != "string") {
+      throw new TypeError("The second argument must be a string");
+    }
+    let arr = base64String.split(",");
+    let mime = arr[0].match(/:(.*?);/)[1];
+    let bstr = atob(arr[1]);
+    let n = bstr.length;
+    let u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], fileName, {
+      type: mime
+    });
+  },
+  /**
+   * 图片压缩方法
+   * @param {*} file 需要压缩的图片File文件
+   * @param {*} opts 压缩参数
+   */
+  compressImage(file2, opts) {
+    const options = {
+      //压缩图片的宽，单位px，如果不设置默认为原图宽
+      width: void 0,
+      //压缩图片质量，默认为原图的0.8
+      quality: 0.8,
+      //图片类型，jpeg或者webp，默认为jpeg
+      mimeType: "jpeg",
+      //压缩后的最大值，单位kb，默认为0表示不设置此值
+      maxSize: 0,
+      //小于该大小的图片不进行压缩，单位kb，默认为0表示任何图片都要压缩
+      minSize: 0
+    };
+    if (common$1.isObject(opts)) {
+      if (number$1.isNumber(opts.width)) {
+        options.width = opts.width;
+      }
+      if (number$1.isNumber(opts.quality) && opts.quality >= 0 && opts.quality <= 1) {
+        options.quality = opts.quality;
+      }
+      if (opts.mimeType == "jpeg" || opts.mimeType == "webp") {
+        options.mimeType = opts.mimeType;
+      }
+      if (number$1.isNumber(opts.maxSize)) {
+        options.maxSize = opts.maxSize;
+      }
+      if (number$1.isNumber(opts.minSize)) {
+        options.minSize = opts.minSize;
+      }
+    }
+    const createFile = (canvas, fileName, quality) => {
+      let url = canvas.toDataURL("image/" + options.mimeType, quality);
+      let file22 = this.dataBase64toFile(url, fileName);
+      if (options.maxSize > 0 && file22.size > options.maxSize * 1024) {
+        quality = quality <= 0 ? 0 : Number((quality - 0.01).toFixed(2));
+        const res = createFile(canvas, fileName, quality);
+        url = res.url;
+        file22 = res.file;
+        quality = res.quality;
+      }
+      return {
+        file: file22,
+        url,
+        quality
+      };
+    };
+    return new Promise((resolve, reject) => {
+      let reader = new FileReader();
+      reader.readAsDataURL(file2);
+      reader.onload = () => {
+        let url = reader.result;
+        let img = new Image();
+        img.src = url;
+        img.onload = () => {
+          if (options.minSize > 0 && file2.size <= options.minSize * 1024) {
+            resolve({
+              file: file2,
+              url,
+              quality: 1,
+              width: img.width,
+              height: img.height
+            });
+            return;
+          }
+          let canvas = document.createElement("canvas");
+          let context = canvas.getContext("2d");
+          canvas.width = options.width || img.width;
+          canvas.height = options.width ? options.width / (img.width / img.height) : img.height;
+          context.drawImage(img, 0, 0, canvas.width, canvas.height);
+          let index = file2.name.lastIndexOf(".");
+          const fileName = file2.name.substring(0, index) + "." + options.mimeType;
+          let res = createFile(canvas, fileName, options.quality);
+          resolve({
+            ...res,
+            width: canvas.width,
+            height: canvas.height
+          });
+        };
+        img.onerror = () => {
+          reject(new Error("Failed to load image file"));
+        };
+      };
+      reader.onerror = () => {
+        reject(new Error("Failed to load image file"));
+      };
+    });
+  }
+};
 const platform = {
   //设备语言类型
   language() {
@@ -1349,15 +1494,6 @@ const isContains = function(parentNode, childNode) {
   }
   return element$1.isContains(parentNode, childNode);
 };
-const blobToBase64 = function(blob) {
-  return new Promise((resolve) => {
-    const fileReader = new FileReader();
-    fileReader.onload = (e) => {
-      resolve(e.target.result);
-    };
-    fileReader.readAsDataURL(blob);
-  });
-};
 const canUseClipboard = function() {
   if (!window.ClipboardItem) {
     console.warn("window.ClipboardItem must be obtained in a secure environment, such as localhost, 127.0.0.1, or https, so the editor's copy, paste, and cut functions cannot be used");
@@ -1395,6 +1531,7 @@ const initEditorOptions = function(options) {
     customHtmlPaste: null,
     customImagePaste: null,
     customVideoPaste: null,
+    customFilePaste: null,
     customMerge: null,
     customParseNode: null
   };
@@ -1432,6 +1569,9 @@ const initEditorOptions = function(options) {
     if (typeof options.customVideoPaste == "function") {
       opts.customVideoPaste = options.customVideoPaste;
     }
+    if (typeof options.customFilePaste == "function") {
+      opts.customFilePaste = options.customFilePaste;
+    }
     if (typeof options.customMerge == "function") {
       opts.customMerge = options.customMerge;
     }
@@ -2805,18 +2945,126 @@ const handleCut = async function(e) {
     this.rangeRender();
   }
 };
+const doPaste = async function(html, text, files) {
+  if (html) {
+    if (this.allowPasteHtml) {
+      const elements = this.parseHtml(html).filter((el) => {
+        return !el.isEmpty();
+      });
+      if (typeof this.customHtmlPaste == "function") {
+        await this.customHtmlPaste.apply(this, [elements, html]);
+      } else {
+        for (let i = 0; i < elements.length; i++) {
+          this.insertElement(elements[i], false);
+        }
+        this.emit("pasteHtml", elements, html);
+      }
+    } else if (text) {
+      if (typeof this.customTextPaste == "function") {
+        await this.customTextPaste.apply(this, [text]);
+      } else {
+        this.insertText(text);
+        this.emit("pasteText", text);
+      }
+    }
+  } else {
+    if (text) {
+      if (typeof this.customTextPaste == "function") {
+        await this.customTextPaste.apply(this, [text]);
+      } else {
+        this.insertText(text);
+        this.emit("pasteText", text);
+      }
+    } else {
+      let length = files.length;
+      for (let i = 0; i < length; i++) {
+        const url = await file$1.dataFileToBase64(files[i]);
+        if (files[i].type.startsWith("image/")) {
+          if (typeof this.customImagePaste == "function") {
+            await this.customImagePaste.apply(this, [url]);
+          } else {
+            const image = new AlexElement(
+              "closed",
+              "img",
+              {
+                src: url
+              },
+              null,
+              null
+            );
+            this.insertElement(image);
+            this.emit("pasteImage", url);
+          }
+        } else if (files[i].type.startsWith("video/")) {
+          if (typeof this.customVideoPaste == "function") {
+            await this.customVideoPaste.apply(this, [url]);
+          } else {
+            const video = new AlexElement(
+              "closed",
+              "video",
+              {
+                src: url
+              },
+              null,
+              null
+            );
+            this.insertElement(video);
+            this.emit("pasteVideo", url);
+          }
+        } else {
+          if (typeof this.customFilePaste == "function") {
+            await this.customFilePaste.apply(this, [url]);
+          }
+        }
+      }
+    }
+  }
+};
 const handlePaste = async function(e) {
   e.preventDefault();
   if (this.disabled) {
     return;
   }
-  await this.paste();
-  this.formatElementStack();
-  this.domRender();
-  this.rangeRender();
+  if (!this.range) {
+    return;
+  }
+  if (!this.allowPaste) {
+    return;
+  }
+  const event2 = e;
+  if (event2.clipboardData) {
+    const html = event2.clipboardData.getData("text/html");
+    const text = event2.clipboardData.getData("text/plain");
+    const files = event2.clipboardData.files;
+    await doPaste.apply(this, [html, text, files]);
+    this.formatElementStack();
+    this.domRender();
+    this.rangeRender();
+  }
 };
-const handleDragDrop = function(e) {
+const handleDragDrop = async function(e) {
   e.preventDefault();
+  if (e.type == "drop") {
+    if (this.disabled) {
+      return;
+    }
+    if (!this.range) {
+      return;
+    }
+    if (!this.allowPaste) {
+      return;
+    }
+    const event2 = e;
+    if (event2.dataTransfer) {
+      const html = event2.dataTransfer.getData("text/html");
+      const text = event2.dataTransfer.getData("text/plain");
+      const files = event2.dataTransfer.files;
+      await doPaste.apply(this, [html, text, files]);
+      this.formatElementStack();
+      this.domRender();
+      this.rangeRender();
+    }
+  }
 };
 const handleFocus = function() {
   if (this.disabled) {
@@ -2844,6 +3092,7 @@ class AlexEditor {
     __publicField(this, "customHtmlPaste");
     __publicField(this, "customImagePaste");
     __publicField(this, "customVideoPaste");
+    __publicField(this, "customFilePaste");
     __publicField(this, "customMerge");
     __publicField(this, "customParseNode");
     __publicField(this, "useClipboard", canUseClipboard());
@@ -2869,6 +3118,7 @@ class AlexEditor {
     this.customHtmlPaste = options.customHtmlPaste;
     this.customImagePaste = options.customImagePaste;
     this.customVideoPaste = options.customVideoPaste;
+    this.customFilePaste = options.customFilePaste;
     this.customMerge = options.customMerge;
     this.customParseNode = options.customParseNode;
     this.stack = this.parseHtml(this.value);
@@ -2881,7 +3131,7 @@ class AlexEditor {
     event$1.on(this.$el, "cut.alex_editor", handleCut.bind(this));
     event$1.on(this.$el, "paste.alex_editor", handlePaste.bind(this));
     event$1.on(this.$el, "copy.alex_editor", handleCopy.bind(this));
-    event$1.on(this.$el, "dragstart.alex_editor drop.alex_editor ", handleDragDrop.bind(this));
+    event$1.on(this.$el, "dragstart.alex_editor drop.alex_editor", handleDragDrop.bind(this));
     event$1.on(this.$el, "focus.alex_editor", handleFocus.bind(this));
     event$1.on(this.$el, "blur.alex_editor", handleBlur.bind(this));
   }
@@ -2958,114 +3208,6 @@ class AlexEditor {
     }
     return result;
   }
-  /**
-   * 根据光标进行粘贴操作
-   */
-  async paste() {
-    if (this.disabled) {
-      return;
-    }
-    if (!this.range) {
-      return;
-    }
-    if (!this.useClipboard) {
-      return;
-    }
-    if (!this.allowPaste) {
-      return;
-    }
-    const clipboardItems = await navigator.clipboard.read();
-    const clipboardItem = clipboardItems[0];
-    const getTypeFunctions = [];
-    clipboardItem.types.forEach((type) => {
-      getTypeFunctions.push(clipboardItem.getType(type));
-    });
-    const blobs = await Promise.all(getTypeFunctions);
-    const length = blobs.length;
-    const hasHtml = blobs.some((blob) => {
-      return blob.type == "text/html";
-    });
-    if (hasHtml) {
-      for (let i = 0; i < length; i++) {
-        const blob = blobs[i];
-        if (blob.type == "text/plain" && !this.allowPasteHtml) {
-          const data2 = await blob.text();
-          if (data2) {
-            if (typeof this.customTextPaste == "function") {
-              await this.customTextPaste.apply(this, [data2]);
-            } else {
-              this.insertText(data2);
-              this.emit("pasteText", data2);
-            }
-          }
-        } else if (blob.type == "text/html" && this.allowPasteHtml) {
-          const data2 = await blob.text();
-          if (data2) {
-            const elements = this.parseHtml(data2).filter((el) => {
-              return !el.isEmpty();
-            });
-            if (typeof this.customHtmlPaste == "function") {
-              await this.customHtmlPaste.apply(this, [elements, data2]);
-            } else {
-              for (let i2 = 0; i2 < elements.length; i2++) {
-                this.insertElement(elements[i2], false);
-              }
-              this.emit("pasteHtml", elements, data2);
-            }
-          }
-        }
-      }
-    } else {
-      for (let i = 0; i < length; i++) {
-        const blob = blobs[i];
-        if (blob.type.startsWith("image/")) {
-          const url = await blobToBase64(blob);
-          if (typeof this.customImagePaste == "function") {
-            await this.customImagePaste.apply(this, [url]);
-          } else {
-            const image = new AlexElement(
-              "closed",
-              "img",
-              {
-                src: url
-              },
-              null,
-              null
-            );
-            this.insertElement(image);
-            this.emit("pasteImage", url);
-          }
-        } else if (blob.type.startsWith("video/")) {
-          const url = await blobToBase64(blob);
-          if (typeof this.customVideoPaste == "function") {
-            await this.customVideoPaste.apply(this, [url]);
-          } else {
-            const video = new AlexElement(
-              "closed",
-              "video",
-              {
-                src: url
-              },
-              null,
-              null
-            );
-            this.insertElement(video);
-            this.emit("pasteVideo", url);
-          }
-        } else if (blob.type == "text/plain") {
-          const data2 = await blob.text();
-          if (data2) {
-            if (typeof this.customTextPaste == "function") {
-              await this.customTextPaste.apply(this, [data2]);
-            } else {
-              this.insertText(data2);
-              this.emit("pasteText", data2);
-            }
-          }
-        }
-      }
-    }
-  }
   /**
    * 根据光标进行删除操作
    */
@@ -19655,6 +19797,15 @@ const tableHandle = function(editor, element2) {
     } else {
       element2.marks = marks;
     }
+    const styles = {
+      "white-space": "pre-wrap",
+      "word-break": "break-word"
+    };
+    if (element2.hasStyles()) {
+      Object.assign(element2.styles, styles);
+    } else {
+      element2.styles = styles;
+    }
     const elements = AlexElement.flatElements(element2.children);
     const rows = elements.filter((el) => {
       return el.parsedom == "tr";
@@ -20528,7 +20679,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           "show-triangle": "",
           color: "#fff",
           placement: "bottom",
-          animation: "fade"
+          animation: "fade",
+          "z-index": 10
         }, {
           default: withCtx(() => [
             createElementVNode("div", _hoisted_1$a, toDisplayString(_ctx.content), 1)
@@ -20539,7 +20691,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-638bc915"]]);
+const Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-8372de0b"]]);
 const IconProps = {
   //图标值
   value: {
@@ -21896,7 +22048,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         border: "",
         placement: "bottom-start",
         onShow: layerShow,
-        useRange: _ctx.type == "text"
+        useRange: _ctx.type == "text",
+        "z-index": 10
       }, {
         default: withCtx(() => [
           createElementVNode("div", {
@@ -22608,7 +22761,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-23266de7"]]);
+const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-44b03ca9"]]);
 const InsertLinkProps = {
   //主题色
   color: {
@@ -24558,7 +24711,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-e2dd8748"]]);
+const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-226bbacd"]]);
 const EditifyProps = {
   //国际化语言类型
   locale: {
@@ -24643,6 +24796,11 @@ const EditifyProps = {
     type: Function,
     default: null
   },
+  //自定义粘贴文件
+  customFilePaste: {
+    type: Function,
+    default: null
+  },
   //菜单栏配置
   menu: {
     type: Object,
@@ -25066,8 +25224,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         allowPaste: props.allowPaste,
         allowCut: props.allowCut,
         allowPasteHtml: props.allowPasteHtml,
-        customImagePaste: handleCustomImagePaste,
-        customVideoPaste: handleCustomVideoPaste,
+        customImagePaste: props.customImagePaste,
+        customVideoPaste: props.customVideoPaste,
+        customFilePaste: props.customFilePaste,
         customMerge: handleCustomMerge,
         customParseNode: handleCustomParseNode
       });
@@ -25197,18 +25356,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
     };
-    const handleCustomImagePaste = async (url) => {
-      const newUrl = await props.customImagePaste.apply(instance.proxy, [url]);
-      if (newUrl) {
-        insertImage(editor.value, newUrl);
-      }
-    };
-    const handleCustomVideoPaste = async (url) => {
-      const newUrl = await props.customVideoPaste.apply(instance.proxy, [url]);
-      if (newUrl) {
-        insertVideo(editor.value, newUrl);
-      }
-    };
     const handleCustomMerge = (ele, preEle) => {
       const uneditable = preEle.getUneditableElement();
       if (uneditable) {
@@ -25569,8 +25716,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Editify = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-99f85ef5"]]);
-const version = "0.1.13";
+const Editify = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fed58116"]]);
+const version = "0.1.16";
 const install = (app) => {
   app.component(Editify.name, Editify);
 };