vue-editify 0.1.36 → 0.1.37

package/examples/App.vue

@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import { h, ref } from 'vue'
 import { AlexElement, MenuConfigType, Editify, attachment, PluginType } from '../src/index'
-const val = ref<string>('<p><br></p>')
+const val = ref<string>('<p><span data-editify-attachment="xxxxx" ></span></p>')
 const editify = ref<InstanceType<typeof Editify> | null>(null)
 const menuConfig = ref<MenuConfigType>({
 	use: true,
@@ -25,6 +25,7 @@ const menuConfig = ref<MenuConfigType>({
 const plugins = ref<PluginType[]>([
 	attachment({
 		multiple: true,
+		leftBorder: true,
 		customUpload: (files: File[]) => {
 			return files.map(item => {
 				return 'xxx'

package/lib/core/function.d.ts

@@ -308,3 +308,10 @@ export declare const insertTable: (editor: AlexEditor, rowLength: number, colLen
  * @returns
  */
 export declare const insertCodeBlock: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => void;
+/**
+ * 插入分隔线
+ * @param editor
+ * @param dataRangeCaches
+ * @returns
+ */
+export declare const insertSeparator: (editor: AlexEditor) => void;

package/lib/core/rule.d.ts

@@ -14,11 +14,11 @@ export declare const parseList: (editor: AlexEditor, element: AlexElement) => vo
  */
 export declare const orderdListHandle: (editor: AlexEditor, element: AlexElement) => void;
 /**
- * 元素格式化时处理媒体元素和链接
+ * 元素格式化时处理常规元素（图片、视频、分隔线、行内代码）
  * @param editor
  * @param element
  */
-export declare const mediaHandle: (editor: AlexEditor, element: AlexElement) => void;
+export declare const commonElementHandle: (editor: AlexEditor, element: AlexElement) => void;
 /**
  * 元素格式化时处理表格
  * @param editor

package/lib/core/tool.d.ts

@@ -150,6 +150,7 @@ export type MenuConfigType = {
     heading?: MenuDisplayButtonType;
     indent?: MenuSelectButtonType;
     quote?: MenuButtonType;
+    separator?: MenuButtonType;
     align?: MenuSelectButtonType;
     orderList?: MenuButtonType;
     unorderList?: MenuButtonType;

package/lib/editify.es.js

@@ -3194,7 +3194,7 @@ class AlexEditor {
     event$1.on(this.$el, "blur.alex_editor", handleBlur.bind(this));
   }
   /**
-   * 初始化range
+   * 初始化设置默认的range
    */
   initRange() {
     const elements = AlexElement.flatElements(this.stack).filter((el) => {
@@ -4520,7 +4520,7 @@ 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.36";
+const version$2 = "1.3.37";
 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 = {
   /**
@@ -18393,30 +18393,31 @@ const getMenuConfig = function(editTrans, editLocale) {
       heading: 2,
       indent: 3,
       quote: 4,
-      align: 5,
-      orderList: 6,
-      unorderList: 7,
-      task: 8,
-      bold: 9,
-      underline: 10,
-      italic: 11,
-      strikethrough: 12,
-      code: 13,
-      super: 14,
-      sub: 15,
-      formatClear: 16,
-      fontSize: 17,
-      fontFamily: 18,
-      lineHeight: 19,
-      foreColor: 20,
-      backColor: 21,
-      link: 22,
-      image: 23,
-      video: 24,
-      table: 25,
-      codeBlock: 26,
-      sourceView: 27,
-      fullScreen: 28
+      separator: 5,
+      align: 6,
+      orderList: 7,
+      unorderList: 8,
+      task: 9,
+      bold: 10,
+      underline: 11,
+      italic: 12,
+      strikethrough: 13,
+      code: 14,
+      super: 15,
+      sub: 16,
+      formatClear: 17,
+      fontSize: 18,
+      fontFamily: 19,
+      lineHeight: 20,
+      foreColor: 21,
+      backColor: 22,
+      link: 23,
+      image: 24,
+      video: 25,
+      table: 26,
+      codeBlock: 27,
+      sourceView: 28,
+      fullScreen: 29
     },
     //撤销按钮配置
     undo: {
@@ -18468,7 +18469,7 @@ const getMenuConfig = function(editTrans, editLocale) {
       //右侧边框是否显示
       rightBorder: false
     },
-    //引用按钮配置
+    //引用
     quote: {
       //是否显示此按钮
       show: true,
@@ -18477,6 +18478,15 @@ const getMenuConfig = function(editTrans, editLocale) {
       //右侧边框是否显示
       rightBorder: false
     },
+    //分隔线
+    separator: {
+      //是否显示此按钮
+      show: true,
+      //左侧边框是否显示
+      leftBorder: false,
+      //右侧边框是否显示
+      rightBorder: false
+    },
     //对齐方式
     align: {
       //是否显示此工具
@@ -18492,7 +18502,7 @@ const getMenuConfig = function(editTrans, editLocale) {
       //右侧边框是否显示
       rightBorder: false
     },
-    //有序列表按钮配置
+    //有序列表
     orderList: {
       //是否显示此按钮
       show: true,
@@ -18501,7 +18511,7 @@ const getMenuConfig = function(editTrans, editLocale) {
       //右侧边框是否显示
       rightBorder: false
     },
-    //无序列表按钮配置
+    //无序列表
     unorderList: {
       //是否显示此按钮
       show: true,
@@ -18510,7 +18520,7 @@ const getMenuConfig = function(editTrans, editLocale) {
       //右侧边框是否显示
       rightBorder: false
     },
-    //任务列表按钮配置
+    //任务列表
     task: {
       //是否显示此按钮
       show: true,
@@ -18519,7 +18529,7 @@ const getMenuConfig = function(editTrans, editLocale) {
       //右侧边框是否显示
       rightBorder: false
     },
-    //粗体按钮配置
+    //粗体
     bold: {
       //是否显示此按钮
       show: true,
@@ -18528,7 +18538,7 @@ const getMenuConfig = function(editTrans, editLocale) {
       //右侧边框是否显示
       rightBorder: false
     },
-    //下划线按钮配置
+    //下划线
     underline: {
       //是否显示此按钮
       show: true,
@@ -18537,7 +18547,7 @@ const getMenuConfig = function(editTrans, editLocale) {
       //右侧边框是否显示
       rightBorder: false
     },
-    //斜体按钮配置
+    //斜体
     italic: {
       //是否显示此按钮
       show: true,
@@ -18546,7 +18556,7 @@ const getMenuConfig = function(editTrans, editLocale) {
       //右侧边框是否显示
       rightBorder: false
     },
-    //删除线按钮配置
+    //删除线
     strikethrough: {
       //是否显示此按钮
       show: true,
@@ -18555,7 +18565,7 @@ const getMenuConfig = function(editTrans, editLocale) {
       //右侧边框是否显示
       rightBorder: false
     },
-    //行内代码按钮配置
+    //行内代码
     code: {
       //是否显示此按钮
       show: true,
@@ -18742,7 +18752,7 @@ const getMenuConfig = function(editTrans, editLocale) {
       //是否显示此工具
       show: false,
       //左侧边框是否显示
-      leftBorder: false,
+      leftBorder: true,
       //右侧边框是否显示
       rightBorder: false
     },
@@ -19709,6 +19719,19 @@ const insertCodeBlock = (editor, dataRangeCaches) => {
     }
   }
 };
+const insertSeparator = (editor) => {
+  if (!editor.range) {
+    return;
+  }
+  const separator = new AlexElement("closed", "hr", null, null, null);
+  editor.insertElement(separator);
+  const leftSpace = AlexElement.getSpaceElement();
+  const rightSpace = AlexElement.getSpaceElement();
+  editor.addElementAfter(rightSpace, separator);
+  editor.addElementBefore(leftSpace, separator);
+  editor.range.anchor.moveToEnd(rightSpace);
+  editor.range.focus.moveToEnd(rightSpace);
+};
 const updateRangeInPre = (editor, element2, originalTextElements, newElements) => {
   if (!editor.range) {
     return;
@@ -19755,10 +19778,13 @@ const parseList = (editor, element2) => {
         const newEl = el.clone();
         newEl.parsedom = "div";
         newEl.type = element2.type;
-        if (!newEl.hasMarks()) {
-          newEl.marks = {};
+        if (newEl.hasMarks()) {
+          newEl.marks["data-editify-list"] = element2.parsedom;
+        } else {
+          newEl.marks = {
+            "data-editify-list": element2.parsedom
+          };
         }
-        newEl.marks["data-editify-list"] = element2.parsedom;
         editor.addElementBefore(newEl, element2);
       });
     }
@@ -19776,7 +19802,7 @@ const orderdListHandle = function(editor, element2) {
     }
   }
 };
-const mediaHandle = function(editor, element2) {
+const commonElementHandle = function(editor, element2) {
   if (element2.parsedom == "img" || element2.parsedom == "video" || element2.parsedom == "a") {
     const marks = {
       "data-editify-element": element2.key
@@ -19787,18 +19813,29 @@ const mediaHandle = function(editor, element2) {
       element2.marks = marks;
     }
   }
-  if (element2.parsedom == "video") {
+  if (element2.parsedom == "video" || element2.parsedom == "hr") {
     const previousElement = editor.getPreviousElement(element2);
     const newTextElement = editor.getNextElement(element2);
-    if (!previousElement || previousElement.isEmpty()) {
+    if (!previousElement || !previousElement.isSpaceText()) {
       const spaceText = AlexElement.getSpaceElement();
       editor.addElementBefore(spaceText, element2);
     }
-    if (!newTextElement || newTextElement.isEmpty()) {
+    if (!newTextElement || !newTextElement.isSpaceText()) {
       const spaceText = AlexElement.getSpaceElement();
       editor.addElementAfter(spaceText, element2);
     }
   }
+  if (element2.parsedom == "code") {
+    element2.parsedom = "span";
+    const marks = {
+      "data-editify-code": true
+    };
+    if (element2.hasMarks()) {
+      Object.assign(element2.marks, marks);
+    } else {
+      element2.marks = marks;
+    }
+  }
 };
 const tableHandle = function(editor, element2) {
   if (element2.parsedom == "table") {
@@ -23465,6 +23502,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       active: false,
       disabled: false
     });
+    const separatorConfig = ref({
+      show: props.config.separator.show,
+      leftBorder: props.config.separator.leftBorder,
+      rightBorder: props.config.separator.rightBorder,
+      active: false,
+      disabled: false
+    });
     const alignConfig = ref({
       show: props.config.align.show,
       selectConfig: {
@@ -23764,6 +23808,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         editor.value.formatElementStack();
         editor.value.domRender();
         editor.value.rangeRender();
+      } else if (name == "separator") {
+        insertSeparator(editor.value);
+        editor.value.formatElementStack();
+        editor.value.domRender();
+        editor.value.rangeRender();
       } else if (name == "align") {
         setAlign(editor.value, dataRangeCaches.value, val);
         editor.value.formatElementStack();
@@ -24186,6 +24235,22 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               () => h(Icon, { value: "quote" })
             );
           }
+          if (itemProps.name == "separator" && separatorConfig.value.show) {
+            return h(
+              Button,
+              {
+                ...itemProps,
+                title: $editTrans("separator"),
+                leftBorder: separatorConfig.value.leftBorder,
+                rightBorder: separatorConfig.value.rightBorder,
+                color: props.color,
+                disabled: separatorConfig.value.disabled || selfProps.disabled || disabled.value,
+                active: separatorConfig.value.active,
+                onOperate: handleOperate
+              },
+              () => h(Icon, { value: "separator" })
+            );
+          }
           if (itemProps.name == "align" && alignConfig.value.show) {
             return h(
               Button,
@@ -24789,7 +24854,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-98c51b8e"]]);
+const Menu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-13b11735"]]);
 const EditifyProps = {
   //国际化语言类型
   locale: {
@@ -24994,6 +25059,7 @@ const en_US = {
   undo: "Undo",
   redo: "Redo",
   quote: "Quote",
+  separator: "Separator",
   lineHeight: "Line height",
   indent: "Indent",
   insertLink: "Insert Link",
@@ -25088,6 +25154,7 @@ const zh_CN = {
   undo: "撤销",
   redo: "重做",
   quote: "引用",
+  separator: "分隔线",
   lineHeight: "行高",
   indent: "缩进",
   insertLink: "插入链接",
@@ -25330,7 +25397,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             orderdListHandle(editor.value, el);
           },
           (el) => {
-            mediaHandle(editor.value, el);
+            commonElementHandle(editor.value, el);
           },
           (el) => {
             tableHandle(editor.value, el);
@@ -25540,17 +25607,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     };
     const handleCustomParseNode = (ele) => {
-      if (ele.parsedom == "code") {
-        ele.parsedom = "span";
-        const marks = {
-          "data-editify-code": true
-        };
-        if (ele.hasMarks()) {
-          Object.assign(ele.marks, marks);
-        } else {
-          ele.marks = marks;
-        }
-      }
       pluginResultList.value.forEach((pluginResult) => {
         if (pluginResult.customParseNode) {
           ele = pluginResult.customParseNode(ele);
@@ -25885,7 +25941,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4c71ae18"]]);
+const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-21167e28"]]);
 const InsertAttachmentProps = {
   //主题色
   color: {
@@ -26132,7 +26188,7 @@ const isAttachment = (element2) => {
   if (element2.isEmpty()) {
     return false;
   }
-  return element2.parsedom == "span" && element2.type == "closed" && element2.hasMarks() && element2.marks["data-attachment"];
+  return element2.parsedom == "span" && element2.type == "closed" && element2.hasMarks() && element2.marks["data-editify-attachment"];
 };
 const hasAttachmentInRange = (editor, dataRangeCaches) => {
   if (!editor.range) {
@@ -26193,18 +26249,17 @@ const attachment = (options) => {
                 const editor = editifyInstance.exposed.editor.value;
                 urls.forEach((url) => {
                   const marks = {
-                    "data-attachment": url,
-                    "data-attachment-name": name || editTrans("attachmentDefaultName"),
-                    contenteditable: "false"
+                    "data-editify-attachment": url,
+                    "data-editify-attachment-name": name || editTrans("attachmentDefaultName")
                   };
                   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);
+                  const leftSpace = AlexElement.getSpaceElement();
+                  const rightSpace = AlexElement.getSpaceElement();
+                  editor.addElementBefore(leftSpace, attachmentElement);
+                  editor.addElementAfter(rightSpace, attachmentElement);
+                  editor.range.anchor.moveToEnd(rightSpace);
+                  editor.range.focus.moveToEnd(rightSpace);
                 });
                 editor.formatElementStack();
                 editor.domRender();
@@ -26219,10 +26274,10 @@ 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"]) {
+          if (el.parsedom == "span" && el.hasMarks() && el.marks["data-editify-attachment"]) {
             event.off(el.elm, "click");
             event.on(el.elm, "click", async () => {
-              const url = el.marks["data-attachment"];
+              const url = el.marks["data-editify-attachment"];
               const res = await fetch(url, {
                 method: "GET"
               });
@@ -26230,28 +26285,31 @@ const attachment = (options) => {
               const a = document.createElement("a");
               a.setAttribute("target", "_blank");
               a.setAttribute("href", URL.createObjectURL(blob));
-              a.setAttribute("download", el.marks["data-attachment-name"]);
+              a.setAttribute("download", el.marks["data-editify-attachment-name"]);
               a.click();
             });
           }
         });
       },
-      //span含有data-attachment的元素设为自闭合元素
+      //span含有data-editify-attachment的元素设为自闭合元素
       customParseNode: (el) => {
-        if (el.hasMarks() && el.marks["data-attachment"] && el.parsedom == "span") {
+        if (el.hasMarks() && el.marks["data-editify-attachment"] && el.parsedom == "span") {
           el.type = "closed";
         }
         return el;
       },
-      //span元素粘贴保留data-attachment
+      //span元素粘贴保留data-editify-attachment
       pasteKeepMarks: {
-        "data-attachment": ["span"],
-        "data-attachment-name": ["span"]
+        "data-editify-attachment": ["span"],
+        "data-editify-attachment-name": ["span"]
       },
       //自定义渲染规范
       renderRule: (el) => {
-        if (el.type == "closed" && el.hasMarks() && el.marks["data-attachment"]) {
+        if (el.hasMarks() && el.marks["data-editify-attachment"]) {
           el.marks["title"] = editTrans("attachmentDownloadTitle");
+          if (!el.marks["data-editify-attachment-name"]) {
+            el.marks["data-editify-attachment-name"] = editTrans("attachmentDefaultName");
+          }
           const editor = editifyInstance.exposed.editor.value;
           const previousElement = editor.getPreviousElement(el);
           const newTextElement = editor.getNextElement(el);
@@ -26272,7 +26330,7 @@ const attachment = (options) => {
 const install = (app) => {
   app.component(Editify.name, Editify);
 };
-const version = "0.1.36";
+const version = "0.1.37";
 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,