vue-editify 0.1.44 → 0.1.46

package/examples/App.vue

@@ -45,7 +45,7 @@
 <script setup lang="ts">
 import { h, ref } from 'vue'
 import { AlexElement, MenuConfigType, Editify, attachment, PluginType, mathformula, ToolbarConfigType, getMatchElementsByRange } from '../src/index'
-const val = ref<string>('<table><tbody><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table>')
+const val = ref<string>('<img src="https://www.ling0523.cn/images/image_1_1701871044699.jpg" /><table><colgroup><col width="10000px" /><col/><col/><col/><col/></colgroup><tbody><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td><td><br></td><td><br></td><td><br></td></tr></tbody></table>')
 
 const editify = ref<InstanceType<typeof Editify> | null>(null)
 const menuConfig = ref<MenuConfigType>({

package/lib/editify/props.d.ts

@@ -3,7 +3,7 @@ import { PluginType, MenuConfigType, ObjectType, ToolbarConfigType } from '../co
 import { AlexElement } from 'alex-editor';
 import { LocaleType } from '../locale';
 
-export type EditifyTableColumnResizeParamsType = {
+export type EditifyResizeParamsType = {
     element: AlexElement | null;
     start: number;
 };

package/lib/editify.es.js

@@ -2786,17 +2786,17 @@ const setRecentlyPoint = function(point) {
   const nextElement = this.getNextElementOfPoint(point);
   const block = point.element.getBlock();
   const inblock = point.element.getInblock();
-  if (previousElement && !AlexElement.VOID_NODES.includes(previousElement.parsedom) && inblock && inblock.isContains(previousElement)) {
+  if (previousElement && inblock && inblock.isContains(previousElement)) {
     point.moveToEnd(previousElement);
-  } else if (nextElement && !AlexElement.VOID_NODES.includes(nextElement.parsedom) && inblock && inblock.isContains(nextElement)) {
+  } else if (nextElement && inblock && inblock.isContains(nextElement)) {
     point.moveToStart(nextElement);
-  } else if (previousElement && !AlexElement.VOID_NODES.includes(previousElement.parsedom) && block.isContains(previousElement)) {
+  } else if (previousElement && block.isContains(previousElement)) {
     point.moveToEnd(previousElement);
-  } else if (nextElement && !AlexElement.VOID_NODES.includes(nextElement.parsedom) && block.isContains(nextElement)) {
+  } else if (nextElement && block.isContains(nextElement)) {
     point.moveToStart(nextElement);
-  } else if (previousElement && !AlexElement.VOID_NODES.includes(previousElement.parsedom)) {
+  } else if (previousElement) {
     point.moveToEnd(previousElement);
-  } else if (nextElement && !AlexElement.VOID_NODES.includes(nextElement.parsedom)) {
+  } else if (nextElement) {
     point.moveToStart(nextElement);
   }
 };
@@ -4200,6 +4200,9 @@ class AlexEditor {
         if (child.isEmpty()) {
           continue;
         }
+        if (!child.isText() && AlexElement.VOID_NODES.includes(child.parsedom)) {
+          continue;
+        }
         if (child.isText() || child.isClosed()) {
           el = child;
           break;
@@ -4217,6 +4220,9 @@ class AlexEditor {
         if (nextElement.isEmpty()) {
           return fn(nextElement);
         }
+        if (!nextElement.isText() && AlexElement.VOID_NODES.includes(nextElement.parsedom)) {
+          return fn(nextElement);
+        }
         if (nextElement.isText() || nextElement.isClosed()) {
           return nextElement;
         }
@@ -4552,7 +4558,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.4.7";
+const version$2 = "1.4.8";
 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 = {
   /**
@@ -25956,7 +25962,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const isModelChange = ref(false);
     const isInputChinese = ref(false);
     const rangeUpdateTimer = ref(null);
-    const tableColumnResizeParams = ref({
+    const resizeParams = ref({
       element: null,
       //被拖拽的td
       start: 0
@@ -26210,25 +26216,34 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if (props.disabled) {
         return;
       }
-      if (element.isContains(contentRef.value, e.target)) {
-        const elm = e.target;
+      const elm = e.target;
+      const event2 = e;
+      if (element.isContains(contentRef.value, elm)) {
         const key = data.get(elm, "data-alex-editor-key");
         if (key) {
           const element$12 = editor.value.getElementByKey(key);
-          if (element$12 && element$12.parsedom == "td") {
-            const length = element$12.parent.children.length;
-            if (element$12.parent.children[length - 1].isEqual(element$12)) {
-              return;
-            }
-            const rect = element.getElementBounding(elm);
-            if (e.pageX >= Math.abs(rect.left + elm.offsetWidth - 5) && e.pageX <= Math.abs(rect.left + elm.offsetWidth + 5)) {
-              tableColumnResizeParams.value.element = element$12;
-              tableColumnResizeParams.value.start = e.pageX;
+          if (element$12) {
+            if (element$12.parsedom == "td") {
+              const length = element$12.parent.children.length;
+              if (element$12.parent.children[length - 1].isEqual(element$12)) {
+                return;
+              }
+              const rect = element.getElementBounding(elm);
+              if (event2.pageX >= Math.abs(rect.left + elm.offsetWidth - 5) && event2.pageX <= Math.abs(rect.left + elm.offsetWidth + 5)) {
+                resizeParams.value.element = element$12;
+                resizeParams.value.start = event2.pageX;
+              }
+            } else if (["img", "video"].includes(element$12.parsedom)) {
+              const rect = element.getElementBounding(elm);
+              if (event2.pageX >= Math.abs(rect.left + elm.offsetWidth - 10) && event2.pageX <= Math.abs(rect.left + elm.offsetWidth)) {
+                resizeParams.value.element = element$12;
+                resizeParams.value.start = event2.pageX;
+              }
             }
           }
         }
       }
-      if (!element.isContains(elRef.value, e.target) && !isSourceView.value) {
+      if (!element.isContains(elRef.value, elm) && !isSourceView.value) {
         canUseMenu.value = false;
       }
     };
@@ -26236,63 +26251,108 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if (props.disabled) {
         return;
       }
-      if (!tableColumnResizeParams.value.element) {
-        return;
+      const event2 = e;
+      const elm = e.target;
+      if (element.isContains(contentRef.value, elm) && ["img", "video"].includes(elm.tagName.toLocaleLowerCase())) {
+        const rect = element.getElementBounding(elm);
+        if (event2.pageX >= Math.abs(rect.left + elm.offsetWidth - 10) && event2.pageX <= Math.abs(rect.left + elm.offsetWidth)) {
+          elm.style.cursor = "col-resize";
+        } else {
+          elm.style.cursor = "";
+        }
       }
-      const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "table" });
-      if (tables.length != 1) {
+      if (!resizeParams.value.element) {
         return;
       }
-      const colgroup = tables[0].children.find((item) => {
-        return item.parsedom == "colgroup";
-      });
-      const index = tableColumnResizeParams.value.element.parent.children.findIndex((el) => {
-        return el.isEqual(tableColumnResizeParams.value.element);
-      });
-      const width = `${tableColumnResizeParams.value.element.elm.offsetWidth + e.pageX - tableColumnResizeParams.value.start}`;
-      colgroup.children[index].marks["width"] = width;
-      colgroup.children[index].elm.setAttribute("width", width);
-      tableColumnResizeParams.value.start = e.pageX;
+      if (resizeParams.value.element.parsedom == "td") {
+        const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "table" });
+        if (tables.length != 1) {
+          return;
+        }
+        const colgroup = tables[0].children.find((item) => {
+          return item.parsedom == "colgroup";
+        });
+        const index = resizeParams.value.element.parent.children.findIndex((el) => {
+          return el.isEqual(resizeParams.value.element);
+        });
+        const width = `${resizeParams.value.element.elm.offsetWidth + event2.pageX - resizeParams.value.start}`;
+        colgroup.children[index].marks["width"] = width;
+        colgroup.children[index].elm.setAttribute("width", width);
+        resizeParams.value.start = event2.pageX;
+      } else if (["img", "video"].includes(resizeParams.value.element.parsedom)) {
+        const width = `${resizeParams.value.element.elm.offsetWidth + event2.pageX - resizeParams.value.start}px`;
+        if (resizeParams.value.element.hasStyles()) {
+          resizeParams.value.element.styles["width"] = width;
+        } else {
+          resizeParams.value.element.styles = {
+            width
+          };
+        }
+        resizeParams.value.element.elm.style.width = width;
+        if (resizeParams.value.element.parsedom == "video") {
+          setVideoHeight();
+        }
+        resizeParams.value.start = event2.pageX;
+      }
     };
     const documentMouseUp = () => {
       if (props.disabled) {
         return;
       }
-      if (!tableColumnResizeParams.value.element) {
-        return;
-      }
-      const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "table" });
-      if (tables.length != 1) {
+      if (!resizeParams.value.element) {
         return;
       }
-      const colgroup = tables[0].children.find((item) => {
-        return item.parsedom == "colgroup";
-      });
-      const index = tableColumnResizeParams.value.element.parent.children.findIndex((el) => {
-        return el.isEqual(tableColumnResizeParams.value.element);
-      });
-      const width = Number(colgroup.children[index].marks["width"]);
-      if (!isNaN(width)) {
-        colgroup.children[index].marks["width"] = `${Number((width / tableColumnResizeParams.value.element.parent.elm.offsetWidth * 100).toFixed(2))}%`;
-        editor.value.formatElementStack();
-        editor.value.domRender();
-        editor.value.rangeRender();
+      if (resizeParams.value.element.parsedom == "td") {
+        const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "table" });
+        if (tables.length != 1) {
+          return;
+        }
+        const colgroup = tables[0].children.find((item) => {
+          return item.parsedom == "colgroup";
+        });
+        const index = resizeParams.value.element.parent.children.findIndex((el) => {
+          return el.isEqual(resizeParams.value.element);
+        });
+        const width = parseFloat(colgroup.children[index].marks["width"]);
+        if (!isNaN(width)) {
+          colgroup.children[index].marks["width"] = `${Number((width / resizeParams.value.element.parent.elm.offsetWidth * 100).toFixed(2))}%`;
+          editor.value.formatElementStack();
+          editor.value.domRender();
+          editor.value.rangeRender();
+        }
+        resizeParams.value.element = null;
+        resizeParams.value.start = 0;
+      } else if (["img", "video"].includes(resizeParams.value.element.parsedom)) {
+        const width = parseFloat(resizeParams.value.element.styles["width"]);
+        if (!isNaN(width)) {
+          if (resizeParams.value.element.hasStyles()) {
+            resizeParams.value.element.styles["width"] = `${Number((width / element.width(contentRef.value) * 100).toFixed(2))}%`;
+          } else {
+            resizeParams.value.element.styles = {
+              width: `${Number((width / element.width(contentRef.value) * 100).toFixed(2))}%`
+            };
+          }
+          editor.value.formatElementStack();
+          editor.value.domRender();
+          editor.value.rangeRender();
+        }
+        resizeParams.value.element = null;
+        resizeParams.value.start = 0;
       }
-      tableColumnResizeParams.value.element = null;
-      tableColumnResizeParams.value.start = 0;
     };
     const documentClick = (e) => {
       if (props.disabled) {
         return;
       }
-      if (element.isContains(contentRef.value, e.target)) {
-        const elm = e.target;
+      const elm = e.target;
+      const event2 = e;
+      if (element.isContains(contentRef.value, elm)) {
         const key = data.get(elm, "data-alex-editor-key");
         if (key) {
           const element$12 = editor.value.getElementByKey(key);
           if (isTask(element$12)) {
             const rect = element.getElementBounding(elm);
-            if (e.pageX >= Math.abs(rect.left) && e.pageX <= Math.abs(rect.left + 16) && e.pageY >= Math.abs(rect.top + elm.offsetHeight / 2 - 8) && e.pageY <= Math.abs(rect.top + elm.offsetHeight / 2 + 8)) {
+            if (event2.pageX >= Math.abs(rect.left) && event2.pageX <= Math.abs(rect.left + 16) && event2.pageY >= Math.abs(rect.top + elm.offsetHeight / 2 - 8) && event2.pageY <= Math.abs(rect.top + elm.offsetHeight / 2 + 8)) {
               if (element$12.marks["data-editify-task"] == "checked") {
                 element$12.marks["data-editify-task"] = "uncheck";
               } else {
@@ -26326,6 +26386,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             if (el.marks["disabled"]) {
               marks["disabled"] = el.marks["disabled"];
             }
+            if (el.parsedom == "img" && el.marks["alt"]) {
+              marks["alt"] = el.marks["alt"];
+            }
             if (["img", "video"].includes(el.parsedom) && el.marks["src"]) {
               marks["src"] = el.marks["src"];
             }
@@ -26359,6 +26422,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             if (el.parsedom == "div" && el.marks["data-editify-task"]) {
               marks["data-editify-task"] = el.marks["data-editify-task"];
             }
+            if (el.parsedom == "col" && el.marks["width"]) {
+              marks["width"] = el.marks["width"];
+            }
             if (["td", "th"].includes(el.parsedom) && el.marks["colspan"]) {
               marks["colspan"] = el.marks["colspan"];
             }
@@ -26370,6 +26436,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             }
           }
           if (el.hasStyles()) {
+            if (["img", "video"].includes(el.parsedom) && el.styles["width"]) {
+              styles2["width"] = el.styles["width"];
+            }
             if ((el.isBlock() || el.isInblock()) && el.styles["text-indent"]) {
               styles2["text-indent"] = el.styles["text-indent"];
             }
@@ -26458,9 +26527,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if (props.disabled || isSourceView.value) {
         return;
       }
-      const node = e.target;
-      if (node.nodeName.toLocaleLowerCase() == "img" || node.nodeName.toLocaleLowerCase() == "video") {
-        const key = Number(node.getAttribute("data-editify-element"));
+      const elm = e.target;
+      if (elm.nodeName.toLocaleLowerCase() == "img" || elm.nodeName.toLocaleLowerCase() == "video") {
+        const key = Number(elm.getAttribute("data-editify-element"));
         if (number.isNumber(key)) {
           const element2 = editor.value.getElementByKey(key);
           if (!editor.value.range) {
@@ -26759,7 +26828,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-57a3c1ea"]]);
+const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-b4790a4c"]]);
 const InsertAttachmentProps = {
   //主题色
   color: {
@@ -41883,7 +41952,7 @@ const attachment = (options) => {
 const install = (app) => {
   app.component(Editify.name, Editify);
 };
-const version = "0.1.44";
+const version = "0.1.46";
 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,