vue-editify 0.1.24 → 0.1.26

package/examples/App.vue

@@ -21,7 +21,7 @@ const menuConfig = ref<MenuConfigType>({
 
 const plugins = ref<PluginType[]>([
 	attachment({
-		leftBorder: true
+		multiple: true
 	})
 ])
 </script>

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

@@ -128,7 +128,6 @@ declare const _default: import('vue').DefineComponent<{
         customFilePaste: ((file: File) => void | Promise<void>) | null;
         customMerge: ((mergeElement: AlexElement, targetElement: AlexElement) => void | Promise<void>) | null;
         customParseNode: ((el: AlexElement) => AlexElement) | null;
-        useClipboard: boolean;
         history: {
             records: {
                 stack: {
@@ -419,14 +418,6 @@ declare const _default: import('vue').DefineComponent<{
         __innerSelectionChange: boolean;
         __chineseInputTimer: any;
         initRange: () => void;
-        copy: (isCut?: boolean | undefined) => Promise<{
-            text: string;
-            html: string;
-        } | undefined>;
-        cut: () => Promise<{
-            text: string;
-            html: string;
-        } | undefined>;
         delete: () => void;
         insertText: (data: string) => void;
         insertParagraph: () => void;

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);
@@ -2466,73 +2455,6 @@ const breakFormat = function(element2) {
     }
   }
 };
-const mergeWithParentElement = function(element2) {
-  const canMerge = (parent, child) => {
-    if (child.isText() && parent.isInline()) {
-      return parent.parsedom == AlexElement.TEXT_NODE;
-    }
-    if (parent.isInline() && child.isInline() || parent.isInblock() && child.isInblock()) {
-      return parent.parsedom == child.parsedom;
-    }
-    return false;
-  };
-  const merge = (parent, child) => {
-    if (child.isText()) {
-      parent.type = "text";
-      parent.parsedom = null;
-      if (child.hasMarks()) {
-        if (parent.hasMarks()) {
-          Object.assign(parent.marks, cloneData$1(child.marks));
-        } else {
-          parent.marks = cloneData$1(child.marks);
-        }
-      }
-      if (child.hasStyles()) {
-        if (parent.hasStyles()) {
-          Object.assign(parent.styles, cloneData$1(child.styles));
-        } else {
-          parent.styles = cloneData$1(child.styles);
-        }
-      }
-      parent.textContent = child.textContent;
-      parent.children = null;
-      if (this.range && child.isContains(this.range.anchor.element)) {
-        this.range.anchor.element = parent;
-      }
-      if (this.range && child.isContains(this.range.focus.element)) {
-        this.range.focus.element = parent;
-      }
-    } else {
-      if (child.hasMarks()) {
-        if (parent.hasMarks()) {
-          Object.assign(parent.marks, cloneData$1(child.marks));
-        } else {
-          parent.marks = cloneData$1(child.marks);
-        }
-      }
-      if (child.hasStyles()) {
-        if (parent.hasStyles()) {
-          Object.assign(parent.styles, cloneData$1(child.styles));
-        } else {
-          parent.styles = cloneData$1(child.styles);
-        }
-      }
-      if (child.hasChildren()) {
-        parent.children = [...child.children];
-        parent.children.forEach((item) => {
-          item.parent = parent;
-        });
-      }
-      mergeElement(parent);
-    }
-  };
-  const mergeElement = (ele) => {
-    if (ele.hasChildren() && ele.children.length == 1 && ele.children[0] && canMerge(ele, ele.children[0])) {
-      merge(ele, ele.children[0]);
-    }
-  };
-  mergeElement(element2);
-};
 const mergeWithBrotherElement = function(element2) {
   const canMerge = (pel, nel) => {
     if (pel.isEmpty() || nel.isEmpty()) {
@@ -2631,6 +2553,78 @@ const mergeWithBrotherElement = function(element2) {
   };
   mergeElement(element2);
 };
+const mergeWithParentElement = function(element2) {
+  const canMerge = (parent, child) => {
+    if (child.isText() && parent.isInline()) {
+      return parent.parsedom == AlexElement.TEXT_NODE;
+    }
+    if (parent.isInline() && child.isInline() || parent.isInblock() && child.isInblock()) {
+      return parent.parsedom == child.parsedom;
+    }
+    return false;
+  };
+  const merge = (parent, child) => {
+    if (child.isText()) {
+      parent.type = "text";
+      parent.parsedom = null;
+      if (child.hasMarks()) {
+        if (parent.hasMarks()) {
+          Object.assign(parent.marks, cloneData$1(child.marks));
+        } else {
+          parent.marks = cloneData$1(child.marks);
+        }
+      }
+      if (child.hasStyles()) {
+        if (parent.hasStyles()) {
+          Object.assign(parent.styles, cloneData$1(child.styles));
+        } else {
+          parent.styles = cloneData$1(child.styles);
+        }
+      }
+      parent.textContent = child.textContent;
+      parent.children = null;
+      if (this.range && child.isContains(this.range.anchor.element)) {
+        this.range.anchor.element = parent;
+      }
+      if (this.range && child.isContains(this.range.focus.element)) {
+        this.range.focus.element = parent;
+      }
+    } else {
+      if (child.hasMarks()) {
+        if (parent.hasMarks()) {
+          Object.assign(parent.marks, cloneData$1(child.marks));
+        } else {
+          parent.marks = cloneData$1(child.marks);
+        }
+      }
+      if (child.hasStyles()) {
+        if (parent.hasStyles()) {
+          Object.assign(parent.styles, cloneData$1(child.styles));
+        } else {
+          parent.styles = cloneData$1(child.styles);
+        }
+      }
+      if (child.hasChildren()) {
+        parent.children = [...child.children];
+        parent.children.forEach((item) => {
+          item.parent = parent;
+        });
+      }
+      mergeElement(parent);
+    }
+  };
+  const mergeElement = (ele) => {
+    if (ele.hasChildren() && ele.children.length == 1 && ele.children[0] && canMerge(ele, ele.children[0])) {
+      merge(ele, ele.children[0]);
+    }
+  };
+  mergeElement(element2);
+};
+const mergeWithSpaceTextElement = function(element2) {
+  if (element2.isText()) {
+    element2.textContent = element2.textContent.replace(/[\uFEFF]+/, "\uFEFF");
+  }
+};
 const { Mac } = platform.os();
 const isUndo = function(e) {
   if (Mac) {
@@ -2644,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);
@@ -2934,91 +3020,38 @@ const handleKeydown = function(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) {
@@ -3096,7 +3129,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);
@@ -3148,67 +3180,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;
-  }
   /**
    * 根据光标进行删除操作
    */
@@ -3818,7 +3789,7 @@ class AlexEditor {
     let renderRules = this.renderRules.filter((fn) => {
       return typeof fn == "function";
     });
-    [handleNotStackBlock, handleInblockWithOther, handleInlineChildrenNotInblock, breakFormat, mergeWithParentElement, mergeWithBrotherElement, mergeWithParentElement, ...renderRules].forEach((fn) => {
+    [handleNotStackBlock, handleInblockWithOther, handleInlineChildrenNotInblock, breakFormat, mergeWithParentElement, mergeWithBrotherElement, mergeWithParentElement, mergeWithSpaceTextElement, ...renderRules].forEach((fn) => {
       format(this.stack, fn, true);
     });
     handleStackEmpty.apply(this);
@@ -25625,6 +25596,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     };
     const handleDeleteComplete = () => {
+      const uneditable = editor.value.range.anchor.element.getUneditableElement();
+      if (uneditable) {
+        uneditable.toEmpty();
+      }
     };
     const handleAfterRender = () => {
       setVideoHeight();
@@ -25817,7 +25792,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-2e9e8fac"]]);
+const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-8737320e"]]);
 const InsertAttachmentProps = {
   //主题色
   color: {
@@ -26066,8 +26041,6 @@ const attachment = (options) => {
     options = {};
   }
   const plugin = (editifyInstance, color2, editTrans) => {
-    const editor = editifyInstance.exposed.editor.value;
-    const dataRangeCaches = editifyInstance.exposed.dataRangeCaches.value;
     return {
       //附件菜单项配置
       menu: {
@@ -26080,7 +26053,7 @@ const attachment = (options) => {
             title: options.title || editTrans("insertAttachment"),
             leftBorder: options.leftBorder,
             rightBorder: options.rightBorder,
-            disabled: editor ? hasPreInRange(editor, dataRangeCaches) : false,
+            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, {
               color: color2,
@@ -26095,10 +26068,20 @@ const attachment = (options) => {
                 btnInstance.$refs.layerRef.setPosition();
               },
               onInsert: (url) => {
-                const attachmentElement = new AlexElement("closed", "span", { "data-attachment": url, contenteditable: "false" }, null, null);
+                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);
-                editor.range.anchor.moveToEnd(attachmentElement);
-                editor.range.focus.moveToEnd(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();
@@ -26110,6 +26093,7 @@ const attachment = (options) => {
       },
       //找到附件元素点击下载
       updateView: () => {
+        const editor = editifyInstance.exposed.editor.value;
         AlexElement.flatElements(editor.stack).forEach((el) => {
           if (el.parsedom == "span" && el.hasMarks() && el.marks["data-attachment"]) {
             event.off(el.elm, "click");
@@ -26132,12 +26116,24 @@ const attachment = (options) => {
       },
       //span元素粘贴保留data-attachment
       pasteKeepMarks: {
-        "data-attachment": ["span"]
+        "data-attachment": ["span"],
+        "data-attachment-name": ["span"]
       },
-      //设置元素的title属性标记
+      //自定义渲染规范
       renderRule: (el) => {
         if (el.type == "closed" && el.hasMarks() && el.marks["data-attachment"]) {
           el.marks["title"] = editTrans("downloadAttachment");
+          const editor = editifyInstance.exposed.editor.value;
+          const previousElement = editor.getPreviousElement(el);
+          const newTextElement = editor.getNextElement(el);
+          if (!previousElement || !previousElement.isSpaceText()) {
+            const spaceText = AlexElement.getSpaceElement();
+            editor.addElementBefore(spaceText, el);
+          }
+          if (!newTextElement || !newTextElement.isSpaceText()) {
+            const spaceText = AlexElement.getSpaceElement();
+            editor.addElementAfter(spaceText, el);
+          }
         }
       }
     };
@@ -26147,7 +26143,7 @@ const attachment = (options) => {
 const install = (app) => {
   app.component(Editify.name, Editify);
 };
-const version = "0.1.24";
+const version = "0.1.26";
 export {
   AlexElement,
   Editify,