vue-editify 0.1.31 → 0.1.33

package/examples/App.vue

@@ -14,35 +14,23 @@ const menuConfig = ref<MenuConfigType>({
 	sourceView: {
 		show: true
 	},
+	video: {
+		multiple: true
+	},
 	fullScreen: {
 		show: true
 	}
 })
 
-//自定义插件
-const redPlugin = () => {
-	const plugin: PluginType = () => {
-		return {
-			name: 'red',
-			renderRule: (el: AlexElement) => {
-				if (el.hasStyles()) {
-					el.styles!['color'] = 'red'
-				} else {
-					el.styles = {
-						color: 'red'
-					}
-				}
-				return el
-			}
-		}
-	}
-	return plugin
-}
 const plugins = ref<PluginType[]>([
 	attachment({
-		multiple: true
-	}),
-	redPlugin()
+		multiple: true,
+		customUpload: (files: File[]) => {
+			return files.map(item => {
+				return 'xxx'
+			})
+		}
+	})
 ])
 </script>
 <style lang="less">

package/lib/core/tool.d.ts

@@ -190,7 +190,7 @@ export type PluginResultType = {
     pasteKeepStyles?: ObjectType;
     pasteKeepMarks?: ObjectType;
 };
-export type PluginType = (editifyInstance: ComponentInternalInstance, color: string | null, editTrans: (key: string) => any) => PluginResultType;
+export type PluginType = (editifyInstance: ComponentInternalInstance, editTrans: (key: string) => any) => PluginResultType;
 /**
  * 粘贴html时保留的数据
  */

package/lib/editify.es.js

@@ -22967,7 +22967,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       e.currentTarget.style.borderColor = "";
     };
     const insertRemoteImage = () => {
-      emits("insert", remoteUrl.value);
+      emits("insert", [remoteUrl.value]);
     };
     const selectFile = async (e) => {
       const inputEle = e.currentTarget;
@@ -23012,9 +23012,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             images.push(url);
           }
         }
-        images.forEach((url) => {
-          emits("insert", url);
-        });
+        emits("insert", images);
       }
       inputEle.value = "";
     };
@@ -23075,7 +23073,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InsertImage = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-17d0a9c4"]]);
+const InsertImage = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-1d6646fd"]]);
 const InsertVideoProps = {
   //主题色
   color: {
@@ -23164,7 +23162,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       e.currentTarget.style.borderColor = "";
     };
     const insertRemoteVideo = () => {
-      emits("insert", remoteUrl.value);
+      emits("insert", [remoteUrl.value]);
     };
     const selectFile = async (e) => {
       const inputEle = e.currentTarget;
@@ -23209,9 +23207,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             videos.push(url);
           }
         }
-        videos.forEach((url) => {
-          emits("insert", url);
-        });
+        emits("insert", videos);
       }
       inputEle.value = "";
     };
@@ -23272,7 +23268,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InsertVideo = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-a54e06d0"]]);
+const InsertVideo = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-46f99390"]]);
 const InsertTableProps = {
   //主题色
   color: {
@@ -23907,7 +23903,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         if (!val) {
           return;
         }
-        insertImage(editor.value, val);
+        const urls = val.filter((url) => {
+          return !!url;
+        });
+        if (urls.length == 0) {
+          return;
+        }
+        urls.forEach((url) => {
+          insertImage(editor.value, url);
+        });
         editor.value.formatElementStack();
         editor.value.domRender();
         editor.value.rangeRender();
@@ -23915,7 +23919,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         if (!val) {
           return;
         }
-        insertVideo(editor.value, val);
+        const urls = val.filter((url) => {
+          return !!url;
+        });
+        if (urls.length == 0) {
+          return;
+        }
+        urls.forEach((url) => {
+          insertVideo(editor.value, url);
+        });
         editor.value.formatElementStack();
         editor.value.domRender();
         editor.value.rangeRender();
@@ -24538,8 +24550,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     const layer = btn.$refs.layerRef;
                     layer.setPosition();
                   },
-                  onInsert: (url) => {
-                    handleOperate("image", url);
+                  onInsert: (urls) => {
+                    handleOperate("image", urls);
                     const btn = itemInstance.proxy.$refs.btnRef;
                     btn.show = false;
                   }
@@ -24579,8 +24591,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     const layer = btn.$refs.layerRef;
                     layer.setPosition();
                   },
-                  onInsert: (url) => {
-                    handleOperate("video", url);
+                  onInsert: (urls) => {
+                    handleOperate("video", urls);
                     const btn = itemInstance.proxy.$refs.btnRef;
                     btn.show = false;
                   }
@@ -24768,7 +24780,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-fbf50ae5"]]);
+const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-98c51b8e"]]);
 const EditifyProps = {
   //国际化语言类型
   locale: {
@@ -25184,7 +25196,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const pluginResultList = computed(() => {
       const pluginResultList2 = [];
       props.plugins.forEach((plugin) => {
-        let pluginResult = plugin(instance, props.color, $editTrans);
+        let pluginResult = plugin(instance, $editTrans);
         pluginResultList2.push(pluginResult);
       });
       return pluginResultList2;
@@ -25858,7 +25870,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-306d3e9a"]]);
+const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4a3bc815"]]);
 const InsertAttachmentProps = {
   //主题色
   color: {
@@ -25956,7 +25968,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       e.currentTarget.style.borderColor = "";
     };
     const insertRemoteAttachment = () => {
-      emits("insert", attachmentName.value, attachmentUrl.value);
+      emits("insert", attachmentName.value, [attachmentUrl.value]);
     };
     const triggerFileInput = () => {
       fileInputRef.value.click();
@@ -26003,9 +26015,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             attachments.push(url);
           }
         }
-        attachments.forEach((url) => {
-          emits("insert", attachmentName.value, url);
-        });
+        emits("insert", attachmentName.value, attachments);
       }
       fileInputRef.value.value = "";
     };
@@ -26102,7 +26112,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const InsertAttachment = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f995f4bd"]]);
+const InsertAttachment = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-71f31c71"]]);
 const isAttachment = (element2) => {
   if (element2.isEmpty()) {
     return false;
@@ -26124,7 +26134,7 @@ const attachment = (options) => {
   if (!common.isObject(options)) {
     options = {};
   }
-  const plugin = (editifyInstance, color2, editTrans) => {
+  const plugin = (editifyInstance, editTrans) => {
     let isDisabled = false;
     if (editifyInstance.exposed.editor.value) {
       isDisabled = hasPreInRange(editifyInstance.exposed.editor.value, editifyInstance.exposed.dataRangeCaches.value) || hasLinkInRange(editifyInstance.exposed.editor.value, editifyInstance.exposed.dataRangeCaches.value) || hasQuoteInRange(editifyInstance.exposed.editor.value, editifyInstance.exposed.dataRangeCaches.value);
@@ -26149,7 +26159,7 @@ const attachment = (options) => {
           disabled: isDisabled,
           default: () => h(Icon, { value: "attachment" }),
           layer: (_name, btnInstance) => h(InsertAttachment, {
-            color: color2,
+            color: editifyInstance.props.color,
             accept: options.accept,
             allowedFileType: options.allowedFileType || [],
             multiple: !!options.multiple,
@@ -26160,22 +26170,27 @@ const attachment = (options) => {
             onChange: () => {
               btnInstance.$refs.layerRef.setPosition();
             },
-            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);
+            onInsert: (name, urls) => {
+              const filterUrls = urls.filter((url) => {
+                return !!url;
+              });
+              if (filterUrls.length) {
                 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);
+                filterUrls.forEach((url) => {
+                  const marks = {
+                    "data-attachment": url,
+                    "data-attachment-name": name || editTrans("attachmentDefaultName"),
+                    contenteditable: "false"
+                  };
+                  const attachmentElement = new AlexElement("closed", "span", marks, null, null);
+                  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();
@@ -26242,7 +26257,7 @@ const attachment = (options) => {
 const install = (app) => {
   app.component(Editify.name, Editify);
 };
-const version = "0.1.31";
+const version = "0.1.33";
 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,