vue-editify 0.1.26 → 0.1.27

package/lib/editify/editify.vue.d.ts

@@ -549,6 +549,7 @@ declare const _default: import('vue').DefineComponent<{
     blur: (...args: any[]) => void;
     focus: (...args: any[]) => void;
     keydown: (...args: any[]) => void;
+    keyup: (...args: any[]) => void;
     insertparagraph: (...args: any[]) => void;
     rangeupdate: (...args: any[]) => void;
     updateview: (...args: any[]) => void;
@@ -667,6 +668,7 @@ declare const _default: import('vue').DefineComponent<{
     onBlur?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
     onKeydown?: ((...args: any[]) => any) | undefined;
+    onKeyup?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onInsertparagraph?: ((...args: any[]) => any) | undefined;
     onRangeupdate?: ((...args: any[]) => any) | undefined;

package/lib/editify.es.js

@@ -2987,35 +2987,40 @@ 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) {
@@ -3100,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) {
@@ -3160,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));
@@ -4491,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 = {
   /**
    * 数字格式化
@@ -23268,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"
@@ -23344,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))
         ])
       ]);
     };
@@ -24941,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: "向上换行",
@@ -25034,9 +25042,10 @@ const zh_CN = {
   insertAttachment: "插入附件",
   uploadAttachment: "上传附件",
   remoteAttachment: "远程地址",
-  attachmentUrlPlaceholder: "请输入远程地址",
-  downloadAttachment: "点击下载附件",
-  attachmentDownloadName: "附件"
+  attachmentNamePlaceholder: "请输入附件名称",
+  attachmentUrlPlaceholder: "请输入附件地址",
+  attachmentDownloadTitle: "点击下载附件",
+  attachmentDefaultName: "附件"
 };
 const trans = (locale) => {
   return (key) => {
@@ -25053,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;
@@ -25283,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);
@@ -25475,7 +25486,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
       return ele;
     };
-    const handleEditorKeydown = (e) => {
+    const handleEditorKeydown = (val, e) => {
       if (props.disabled) {
         return;
       }
@@ -25486,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) {
@@ -25551,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);
@@ -25757,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),
@@ -25792,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: {
@@ -25842,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"
@@ -25859,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) {
@@ -25870,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) {
@@ -25927,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;
       }
@@ -25973,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,
@@ -26004,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 }
             ]
@@ -26022,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 = {};
@@ -26053,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, {
@@ -26067,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;
               }
             })
@@ -26097,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();
             });
           }
@@ -26122,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);
@@ -26143,7 +26168,8 @@ const attachment = (options) => {
 const install = (app) => {
   app.component(Editify.name, Editify);
 };
-const version = "0.1.26";
+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,