vue-editify 0.1.25 → 0.1.27

package/lib/editify.es.js

@@ -1494,17 +1494,6 @@ const isContains = function(parentNode, childNode) {
   }
   return element$1.isContains(parentNode, childNode);
 };
-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");
-    return false;
-  }
-  if (!navigator.clipboard) {
-    console.warn("navigator.clipboard 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");
-    return false;
-  }
-  return true;
-};
 const initEditorNode = function(node) {
   if (typeof node == "string" && node) {
     node = document.body.querySelector(node);
@@ -2649,6 +2638,98 @@ const isRedo = function(e) {
   }
   return e.key == "z" && e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey;
 };
+const setClipboardData = function(data2, result) {
+  let html = "";
+  let text = "";
+  result.forEach((item) => {
+    const newEl = item.element.clone();
+    if (item.offset) {
+      newEl.textContent = newEl.textContent.substring(item.offset[0], item.offset[1]);
+    }
+    newEl.__render();
+    html += newEl.elm.outerHTML;
+    text += newEl.elm.innerText;
+  });
+  data2.setData("text/plain", text);
+  data2.setData("text/html", html);
+  return { html, text };
+};
+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++) {
+        if (files[i].type.startsWith("image/")) {
+          if (typeof this.customImagePaste == "function") {
+            await this.customImagePaste.apply(this, [files[i]]);
+          } else {
+            const url = await file$1.dataFileToBase64(files[i]);
+            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, [files[i]]);
+          } else {
+            const url = await file$1.dataFileToBase64(files[i]);
+            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, [files[i]]);
+          }
+        }
+      }
+    }
+  }
+};
 const checkStack = function() {
   const elements = AlexElement.flatElements(this.stack).filter((el) => {
     return !el.isEmpty() && !AlexElement.VOID_NODES.includes(el.parsedom);
@@ -2906,124 +2987,76 @@ const handleChineseInput = function(e) {
     }, 0);
   }
 };
-const handleKeydown = function(e) {
+const handleKeyboard = function(e) {
   if (this.disabled) {
     return;
   }
   if (this.__isInputChinese) {
     return;
   }
-  if (isUndo(e)) {
-    e.preventDefault();
-    const historyRecord = this.history.get(-1);
-    if (historyRecord) {
-      this.history.current = historyRecord.current;
-      this.stack = historyRecord.stack;
-      this.range = historyRecord.range;
-      this.formatElementStack();
-      this.domRender(true);
-      this.rangeRender();
-    }
-  } else if (isRedo(e)) {
-    e.preventDefault();
-    const historyRecord = this.history.get(1);
-    if (historyRecord) {
-      this.history.current = historyRecord.current;
-      this.stack = historyRecord.stack;
-      this.range = historyRecord.range;
-      this.formatElementStack();
-      this.domRender(true);
-      this.rangeRender();
+  if (e.type == "keydown") {
+    if (isUndo(e)) {
+      e.preventDefault();
+      const historyRecord = this.history.get(-1);
+      if (historyRecord) {
+        this.history.current = historyRecord.current;
+        this.stack = historyRecord.stack;
+        this.range = historyRecord.range;
+        this.formatElementStack();
+        this.domRender(true);
+        this.rangeRender();
+      }
+    } else if (isRedo(e)) {
+      e.preventDefault();
+      const historyRecord = this.history.get(1);
+      if (historyRecord) {
+        this.history.current = historyRecord.current;
+        this.stack = historyRecord.stack;
+        this.range = historyRecord.range;
+        this.formatElementStack();
+        this.domRender(true);
+        this.rangeRender();
+      }
     }
+    this.emit("keydown", this.value, e);
+  } else if (e.type == "keyup") {
+    this.emit("keyup", this.value, e);
   }
 };
 const handleCopy = async function(e) {
   e.preventDefault();
-  await this.copy();
+  if (!this.range) {
+    return;
+  }
+  if (!this.allowCopy) {
+    return;
+  }
+  const event2 = e;
+  const result = this.getElementsByRange().list;
+  if (event2.clipboardData && result.length) {
+    const { text, html } = setClipboardData.apply(this, [event2.clipboardData, result]);
+    this.emit("copy", text, html);
+  }
 };
 const handleCut = async function(e) {
   e.preventDefault();
-  const result = await this.cut();
-  if (result && !this.disabled) {
-    this.formatElementStack();
-    this.domRender();
-    this.rangeRender();
+  if (!this.range) {
+    return;
   }
-};
-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++) {
-        if (files[i].type.startsWith("image/")) {
-          if (typeof this.customImagePaste == "function") {
-            await this.customImagePaste.apply(this, [files[i]]);
-          } else {
-            const url = await file$1.dataFileToBase64(files[i]);
-            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, [files[i]]);
-          } else {
-            const url = await file$1.dataFileToBase64(files[i]);
-            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, [files[i]]);
-          }
-        }
-      }
+  if (!this.allowCut) {
+    return;
+  }
+  const event2 = e;
+  const result = this.getElementsByRange().list;
+  if (event2.clipboardData && result.length) {
+    const { text, html } = setClipboardData.apply(this, [event2.clipboardData, result]);
+    if (!this.disabled) {
+      this.delete();
+      this.formatElementStack();
+      this.domRender();
+      this.rangeRender();
     }
+    this.emit("cut", text, html);
   }
 };
 const handlePaste = async function(e) {
@@ -3072,17 +3105,17 @@ const handleDragDrop = async function(e) {
     }
   }
 };
-const handleFocus = function() {
+const handleFocus = function(e) {
   if (this.disabled) {
     return;
   }
-  this.emit("focus", this.value);
+  this.emit("focus", this.value, e);
 };
-const handleBlur = function() {
+const handleBlur = function(e) {
   if (this.disabled) {
     return;
   }
-  this.emit("blur", this.value);
+  this.emit("blur", this.value, e);
 };
 class AlexEditor {
   constructor(node, opts) {
@@ -3101,7 +3134,6 @@ class AlexEditor {
     __publicField(this, "customFilePaste");
     __publicField(this, "customMerge");
     __publicField(this, "customParseNode");
-    __publicField(this, "useClipboard", canUseClipboard());
     __publicField(this, "history", new AlexHistory());
     __publicField(this, "stack");
     __publicField(this, "range", null);
@@ -3133,7 +3165,7 @@ class AlexEditor {
     event$1.on(document, `selectionchange.alex_editor_${this.__guid}`, handleSelectionChange.bind(this));
     event$1.on(this.$el, "beforeinput.alex_editor", handleBeforeInput.bind(this));
     event$1.on(this.$el, "compositionstart.alex_editor compositionupdate.alex_editor compositionend.alex_editor", handleChineseInput.bind(this));
-    event$1.on(this.$el, "keydown.alex_editor", handleKeydown.bind(this));
+    event$1.on(this.$el, "keydown.alex_editor keyup.alex_editor", handleKeyboard.bind(this));
     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));
@@ -3153,67 +3185,6 @@ class AlexEditor {
     const focus = new AlexPoint(firstElement, 0);
     this.range = new AlexRange(anchor, focus);
   }
-  /**
-   * 根据光标执行复制操作
-   * isCut表示是否在执行剪切操作，默认为false，这个参数仅在内部使用
-   */
-  async copy(isCut = false) {
-    if (!this.useClipboard) {
-      return;
-    }
-    if (!this.range) {
-      return;
-    }
-    if (!this.allowCopy) {
-      return;
-    }
-    let result = this.getElementsByRange().list;
-    if (result.length == 0) {
-      return;
-    }
-    let html = "";
-    let text = "";
-    result.forEach((item) => {
-      const newEl = item.element.clone();
-      if (item.offset) {
-        newEl.textContent = newEl.textContent.substring(item.offset[0], item.offset[1]);
-      }
-      newEl.__render();
-      html += newEl.elm.outerHTML;
-      text += newEl.elm.innerText;
-    });
-    const clipboardItem = new window.ClipboardItem({
-      "text/html": new Blob([html], { type: "text/html" }),
-      "text/plain": new Blob([text], { type: "text/plain" })
-    });
-    await navigator.clipboard.write([clipboardItem]);
-    if (!isCut) {
-      this.emit("copy", text, html);
-    }
-    return { text, html };
-  }
-  /**
-   * 根据光标进行剪切操作
-   */
-  async cut() {
-    if (!this.useClipboard) {
-      return;
-    }
-    if (!this.range) {
-      return;
-    }
-    if (!this.allowCut) {
-      return;
-    }
-    const result = await this.copy(true);
-    if (result) {
-      if (!this.disabled) {
-        this.delete();
-      }
-      this.emit("cut", result.text, result.html);
-    }
-    return result;
-  }
   /**
    * 根据光标进行删除操作
    */
@@ -4525,6 +4496,8 @@ class AlexEditor {
     event$1.off(this.$el, "beforeinput.alex_editor compositionstart.alex_editor compositionupdate.alex_editor compositionend.alex_editor keydown.alex_editor cut.alex_editor paste.alex_editor copy.alex_editor dragstart.alex_editor drop.alex_editor focus.alex_editor blur.alex_editor");
   }
 }
+const version$2 = "1.3.32";
+console.log(`%c alex-editor %c v${version$2} `, "padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;", "padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;");
 const number = {
   /**
    * 数字格式化
@@ -23302,7 +23275,7 @@ const _hoisted_4$2 = [
 ];
 const _hoisted_5$1 = { class: "editify-table-footer" };
 const _hoisted_6$1 = { key: 0 };
-const _hoisted_7 = { key: 1 };
+const _hoisted_7$1 = { key: 1 };
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...{
     name: "InsertTable"
@@ -23378,7 +23351,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           }), 256))
         ]),
         createElementVNode("div", _hoisted_5$1, [
-          specification.value ? (openBlock(), createElementBlock("span", _hoisted_6$1, toDisplayString(specification.value.x) + " x " + toDisplayString(specification.value.y), 1)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(unref($editTrans)("insertTable")), 1))
+          specification.value ? (openBlock(), createElementBlock("span", _hoisted_6$1, toDisplayString(specification.value.x) + " x " + toDisplayString(specification.value.y), 1)) : (openBlock(), createElementBlock("span", _hoisted_7$1, toDisplayString(unref($editTrans)("insertTable")), 1))
         ])
       ]);
     };
@@ -24975,9 +24948,10 @@ const en_US = {
   insertAttachment: "Insert attachment",
   uploadAttachment: "Upload",
   remoteAttachment: "Remote",
+  attachmentNamePlaceholder: "Please enter the attachment name",
   attachmentUrlPlaceholder: "Please enter the attachment address",
-  downloadAttachment: "Click to download attachment",
-  attachmentDownloadName: "attachment"
+  attachmentDownloadTitle: "Click to download attachment",
+  attachmentDefaultName: "attachment"
 };
 const zh_CN = {
   textWrapUp: "向上换行",
@@ -25068,9 +25042,10 @@ const zh_CN = {
   insertAttachment: "插入附件",
   uploadAttachment: "上传附件",
   remoteAttachment: "远程地址",
-  attachmentUrlPlaceholder: "请输入远程地址",
-  downloadAttachment: "点击下载附件",
-  attachmentDownloadName: "附件"
+  attachmentNamePlaceholder: "请输入附件名称",
+  attachmentUrlPlaceholder: "请输入附件地址",
+  attachmentDownloadTitle: "点击下载附件",
+  attachmentDefaultName: "附件"
 };
 const trans = (locale) => {
   return (key) => {
@@ -25087,7 +25062,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   },
   __name: "editify",
   props: EditifyProps,
-  emits: ["update:modelValue", "focus", "blur", "change", "keydown", "insertparagraph", "rangeupdate", "updateview"],
+  emits: ["update:modelValue", "focus", "blur", "change", "keydown", "keyup", "insertparagraph", "rangeupdate", "updateview"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const instance = getCurrentInstance();
     const props = __props;
@@ -25317,6 +25292,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       editor.value.on("change", handleEditorChange);
       editor.value.on("focus", handleEditorFocus);
       editor.value.on("blur", handleEditorBlur);
+      editor.value.on("keydown", handleEditorKeydown);
+      editor.value.on("keyup", handleEditorKeyup);
       editor.value.on("insertParagraph", handleInsertParagraph);
       editor.value.on("rangeUpdate", handleRangeUpdate);
       editor.value.on("deleteInStart", handleDeleteInStart);
@@ -25509,7 +25486,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       return ele;
     };
-    const handleEditorKeydown = (e) => {
+    const handleEditorKeydown = (val, e) => {
       if (props.disabled) {
         return;
       }
@@ -25520,7 +25497,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         editor.value.domRender();
         editor.value.rangeRender();
       }
-      emits("keydown", e);
+      emits("keydown", val, e);
+    };
+    const handleEditorKeyup = (val, e) => {
+      if (props.disabled) {
+        return;
+      }
+      emits("keyup", val, e);
     };
     const handleEditorClick = (e) => {
       if (props.disabled || isSourceView.value) {
@@ -25585,7 +25568,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     const handleInsertParagraph = (element2, previousElement) => {
       if (!element2.isEqual(previousElement)) {
-        if (previousElement.isOnlyHasBreak() && element2.isOnlyHasBreak()) {
+        if (previousElement.isBlock() && element2.isBlock() && previousElement.isOnlyHasBreak() && element2.isOnlyHasBreak()) {
           if (previousElement.parsedom != AlexElement.BLOCK_NODE) {
             elementToParagraph(previousElement);
             editor.value.range.anchor.moveToStart(previousElement);
@@ -25791,7 +25774,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             ref_key: "contentRef",
             ref: contentRef,
             class: normalizeClass(["editify-content", { "editify-placeholder": showPlaceholder.value, "editify-disabled": _ctx.disabled }]),
-            onKeydown: handleEditorKeydown,
             onClick: handleEditorClick,
             onCompositionstart: _cache[0] || (_cache[0] = ($event) => isInputChinese.value = true),
             onCompositionend: _cache[1] || (_cache[1] = ($event) => isInputChinese.value = false),
@@ -25826,7 +25808,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-8737320e"]]);
+const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-3b2e5bbc"]]);
 const InsertAttachmentProps = {
   //主题色
   color: {
@@ -25876,11 +25858,13 @@ const _hoisted_3 = {
   class: "editify-attachment-remote"
 };
 const _hoisted_4 = ["placeholder"];
-const _hoisted_5 = {
+const _hoisted_5 = ["placeholder"];
+const _hoisted_6 = {
   key: 1,
   class: "editify-attachment-upload"
 };
-const _hoisted_6 = ["multiple", "accept"];
+const _hoisted_7 = ["placeholder"];
+const _hoisted_8 = ["multiple", "accept"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "InsertAttachment"
@@ -25893,7 +25877,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const emits = __emit;
     const $editTrans = inject("$editTrans");
     const current = ref("upload");
-    const remoteUrl = ref("");
+    const attachmentName = ref("");
+    const attachmentUrl = ref("");
+    const fileInputRef = ref(null);
     const activeStyle = computed(() => {
       return (name) => {
         if (current.value == name) {
@@ -25904,47 +25890,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return {};
       };
     });
-    const acceptValue = computed(() => {
-      if (props.accept === "rar") {
-        return "application/x-rar-compressed";
-      }
-      if (props.accept === "zip") {
-        return "application/x-zip-compressed";
-      }
-      if (props.accept === "txt") {
-        return "text/plain";
-      }
-      if (props.accept === "image") {
-        return "image/*";
-      }
-      if (props.accept === "video") {
-        return "video/*";
-      }
-      if (props.accept === "audio") {
-        return "aduio/*";
-      }
-      if (props.accept === "html") {
-        return "text/html";
-      }
-      if (props.accept === "doc") {
-        return "application/msword";
-      }
-      if (props.accept === "xml") {
-        return "text/xml";
-      }
-      if (props.accept === "js") {
-        return "text/javascript";
-      }
-      if (props.accept === "json") {
-        return "application/json";
-      }
-      if (props.accept === "ppt") {
-        return "application/vnd.ms-powerpoint";
-      }
-      if (props.accept === "pdf") {
-        return "application/pdf";
-      }
-    });
     const getSuffix = (file2) => {
       const index = file2.name.lastIndexOf(".");
       if (index <= 0) {
@@ -25961,11 +25906,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       e.currentTarget.style.borderColor = "";
     };
     const insertRemoteAttachment = () => {
-      emits("insert", remoteUrl.value);
+      emits("insert", attachmentName.value, attachmentUrl.value);
     };
-    const selectFile = async (e) => {
-      const inputEle = e.currentTarget;
-      const files = inputEle.files;
+    const triggerFileInput = () => {
+      fileInputRef.value.click();
+    };
+    const selectFile = async () => {
+      const files = fileInputRef.value.files;
       if (!files || !files.length) {
         return;
       }
@@ -26007,10 +25954,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }
         attachments.forEach((url) => {
-          emits("insert", url);
+          emits("insert", attachmentName.value, url);
         });
       }
-      inputEle.value = "";
+      fileInputRef.value.value = "";
     };
     watch(
       () => current.value,
@@ -26038,14 +25985,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         current.value == "remote" ? (openBlock(), createElementBlock("div", _hoisted_3, [
           withDirectives(createElementVNode("input", {
-            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => remoteUrl.value = $event),
-            placeholder: unref($editTrans)("attachmentUrlPlaceholder"),
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => attachmentName.value = $event),
+            placeholder: unref($editTrans)("attachmentNamePlaceholder"),
             onBlur: handleInputBlur,
-            onFocus: handleInputFocus
+            onFocus: handleInputFocus,
+            type: "text"
           }, null, 40, _hoisted_4), [
             [
               vModelText,
-              remoteUrl.value,
+              attachmentName.value,
+              void 0,
+              { trim: true }
+            ]
+          ]),
+          withDirectives(createElementVNode("input", {
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => attachmentUrl.value = $event),
+            placeholder: unref($editTrans)("attachmentUrlPlaceholder"),
+            onBlur: handleInputBlur,
+            onFocus: handleInputFocus,
+            type: "url"
+          }, null, 40, _hoisted_5), [
+            [
+              vModelText,
+              attachmentUrl.value,
               void 0,
               { trim: true }
             ]
@@ -26056,20 +26018,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }, [
             createElementVNode("span", { onClick: insertRemoteAttachment }, toDisplayString(unref($editTrans)("insert")), 1)
           ], 4)
-        ])) : (openBlock(), createElementBlock("div", _hoisted_5, [
-          createVNode(Icon, { value: "upload" }),
-          createElementVNode("input", {
-            multiple: _ctx.multiple,
-            accept: acceptValue.value,
-            onChange: selectFile,
-            type: "file"
-          }, null, 40, _hoisted_6)
+        ])) : (openBlock(), createElementBlock("div", _hoisted_6, [
+          withDirectives(createElementVNode("input", {
+            "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => attachmentName.value = $event),
+            placeholder: unref($editTrans)("attachmentNamePlaceholder"),
+            onBlur: handleInputBlur,
+            onFocus: handleInputFocus,
+            type: "text"
+          }, null, 40, _hoisted_7), [
+            [
+              vModelText,
+              attachmentName.value,
+              void 0,
+              { trim: true }
+            ]
+          ]),
+          createElementVNode("div", {
+            class: "editify-attachment-btn",
+            onClick: triggerFileInput
+          }, [
+            createVNode(Icon, { value: "upload" }),
+            createElementVNode("input", {
+              ref_key: "fileInputRef",
+              ref: fileInputRef,
+              multiple: _ctx.multiple,
+              accept: _ctx.accept,
+              onChange: selectFile,
+              type: "file"
+            }, null, 40, _hoisted_8)
+          ])
         ]))
       ]);
     };
   }
 });
-const InsertAttachment = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a2a6e2f3"]]);
+const InsertAttachment = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f995f4bd"]]);
 const attachment = (options) => {
   if (!common.isObject(options)) {
     options = {};
@@ -26087,6 +26070,7 @@ const attachment = (options) => {
             title: options.title || editTrans("insertAttachment"),
             leftBorder: options.leftBorder,
             rightBorder: options.rightBorder,
+            hideScroll: true,
             disabled: editifyInstance.exposed.editor.value ? hasPreInRange(editifyInstance.exposed.editor.value, editifyInstance.exposed.dataRangeCaches.value) : false,
             default: () => h(Icon, { value: "attachment" }),
             layer: (_name, btnInstance) => h(InsertAttachment, {
@@ -26101,24 +26085,26 @@ const attachment = (options) => {
               onChange: () => {
                 btnInstance.$refs.layerRef.setPosition();
               },
-              onInsert: (url) => {
-                const marks = {
-                  "data-attachment": url,
-                  "data-attachment-name": editTrans("attachmentDownloadName"),
-                  contenteditable: "false"
-                };
-                const attachmentElement = new AlexElement("closed", "span", marks, null, null);
-                const editor = editifyInstance.exposed.editor.value;
-                editor.insertElement(attachmentElement);
-                const beforeText = AlexElement.getSpaceElement();
-                const afterText = AlexElement.getSpaceElement();
-                editor.addElementAfter(afterText, attachmentElement);
-                editor.addElementBefore(beforeText, attachmentElement);
-                editor.range.anchor.moveToStart(afterText);
-                editor.range.focus.moveToStart(afterText);
-                editor.formatElementStack();
-                editor.domRender();
-                editor.rangeRender();
+              onInsert: (name, url) => {
+                if (url) {
+                  const marks = {
+                    "data-attachment": url,
+                    "data-attachment-name": name || editTrans("attachmentDefaultName"),
+                    contenteditable: "false"
+                  };
+                  const attachmentElement = new AlexElement("closed", "span", marks, null, null);
+                  const editor = editifyInstance.exposed.editor.value;
+                  editor.insertElement(attachmentElement);
+                  const beforeText = AlexElement.getSpaceElement();
+                  const afterText = AlexElement.getSpaceElement();
+                  editor.addElementAfter(afterText, attachmentElement);
+                  editor.addElementBefore(beforeText, attachmentElement);
+                  editor.range.anchor.moveToStart(afterText);
+                  editor.range.focus.moveToStart(afterText);
+                  editor.formatElementStack();
+                  editor.domRender();
+                  editor.rangeRender();
+                }
                 btnInstance.show = false;
               }
             })
@@ -26131,11 +26117,16 @@ const attachment = (options) => {
         AlexElement.flatElements(editor.stack).forEach((el) => {
           if (el.parsedom == "span" && el.hasMarks() && el.marks["data-attachment"]) {
             event.off(el.elm, "click");
-            event.on(el.elm, "click", () => {
+            event.on(el.elm, "click", async () => {
               const url = el.marks["data-attachment"];
+              const res = await fetch(url, {
+                method: "GET"
+              });
+              const blob = await res.blob();
               const a = document.createElement("a");
-              a.setAttribute("href", url);
-              a.setAttribute("download", editTrans("attachmentDownloadName"));
+              a.setAttribute("target", "_blank");
+              a.setAttribute("href", URL.createObjectURL(blob));
+              a.setAttribute("download", el.marks["data-attachment-name"]);
               a.click();
             });
           }
@@ -26156,7 +26147,7 @@ const attachment = (options) => {
       //自定义渲染规范
       renderRule: (el) => {
         if (el.type == "closed" && el.hasMarks() && el.marks["data-attachment"]) {
-          el.marks["title"] = editTrans("downloadAttachment");
+          el.marks["title"] = editTrans("attachmentDownloadTitle");
           const editor = editifyInstance.exposed.editor.value;
           const previousElement = editor.getPreviousElement(el);
           const newTextElement = editor.getNextElement(el);
@@ -26177,7 +26168,8 @@ const attachment = (options) => {
 const install = (app) => {
   app.component(Editify.name, Editify);
 };
-const version = "0.1.25";
+const version = "0.1.27";
+console.log(`%c vue-editify %c v${version} `, "padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;", "padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;");
 export {
   AlexElement,
   Editify,