vue-editify 0.1.43 → 0.1.45

package/lib/editify.es.js

@@ -1498,6 +1498,7 @@ const initEditorNode = function(node) {
   if (typeof node == "string" && node) {
     node = document.body.querySelector(node);
   }
+  node = node;
   if (!element$1.isElement(node)) {
     throw new Error("You must specify a dom container to initialize the editor");
   }
@@ -1666,7 +1667,7 @@ const _AlexElement = class _AlexElement2 {
     return this.isText() && !this.isEmpty() && isSpaceText(this.textContent);
   }
   /**
-   * 获取设置不可编辑的元素，如果是null，说明元素是可编辑的
+   * 获取不可编辑的元素，如果是null，说明元素是可编辑的
    */
   getUneditableElement() {
     if (this.hasMarks() && this.marks["contenteditable"] == "false") {
@@ -2162,9 +2163,7 @@ class AlexHistory {
     if (this.current < this.records.length - 1) {
       this.records.length = this.current + 1;
     }
-    const newStack = stack.map((ele) => {
-      return ele.__fullClone();
-    });
+    const newStack = stack.map((ele) => ele.__fullClone());
     const newRange = this.__cloneRange(newStack, range);
     this.records.push({
       stack: newStack,
@@ -2189,9 +2188,7 @@ class AlexHistory {
       current += 1;
     }
     const { stack, range } = this.records[current];
-    const newStack = stack.map((ele) => {
-      return ele.__fullClone();
-    });
+    const newStack = stack.map((ele) => ele.__fullClone());
     const newRange = this.__cloneRange(newStack, range);
     return {
       current,
@@ -2789,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);
   }
 };
@@ -2983,24 +2980,25 @@ const handleSelectionChange = function() {
   }
 };
 const handleBeforeInput = function(e) {
+  const event2 = e;
   if (this.disabled) {
     return;
   }
-  if (e.inputType == "deleteByCut" || e.inputType == "insertFromPaste" || e.inputType == "deleteByDrag" || e.inputType == "insertFromDrop") {
+  if (event2.inputType == "deleteByCut" || event2.inputType == "insertFromPaste" || event2.inputType == "deleteByDrag" || event2.inputType == "insertFromDrop") {
     return;
   }
-  e.preventDefault();
-  if (e.inputType == "insertText" && e.data) {
-    this.insertText(e.data);
+  event2.preventDefault();
+  if (event2.inputType == "insertText" && event2.data) {
+    this.insertText(event2.data);
     this.formatElementStack();
     this.domRender();
     this.rangeRender();
-  } else if (e.inputType == "insertParagraph" || e.inputType == "insertLineBreak") {
+  } else if (event2.inputType == "insertParagraph" || event2.inputType == "insertLineBreak") {
     this.insertParagraph();
     this.formatElementStack();
     this.domRender();
     this.rangeRender();
-  } else if (e.inputType == "deleteContentBackward") {
+  } else if (event2.inputType == "deleteContentBackward") {
     this.delete();
     this.formatElementStack();
     this.domRender();
@@ -3011,16 +3009,17 @@ const handleChineseInput = function(e) {
   if (this.disabled) {
     return;
   }
-  e.preventDefault();
-  if (e.type == "compositionstart") {
+  const event2 = e;
+  event2.preventDefault();
+  if (event2.type == "compositionstart") {
     if (this.__chineseInputTimer) {
       clearTimeout(this.__chineseInputTimer);
       this.__chineseInputTimer = null;
     }
     this.__isInputChinese = true;
-  } else if (e.type == "compositionend") {
-    if (e.data) {
-      this.insertText(e.data);
+  } else if (event2.type == "compositionend") {
+    if (event2.data) {
+      this.insertText(event2.data);
       this.formatElementStack();
       this.domRender();
       this.rangeRender();
@@ -3037,9 +3036,10 @@ const handleKeyboard = function(e) {
   if (this.__isInputChinese) {
     return;
   }
-  if (e.type == "keydown") {
-    if (isUndo(e)) {
-      e.preventDefault();
+  const event2 = e;
+  if (event2.type == "keydown") {
+    if (isUndo(event2)) {
+      event2.preventDefault();
       const historyRecord = this.history.get(-1);
       if (historyRecord) {
         this.history.current = historyRecord.current;
@@ -3049,8 +3049,8 @@ const handleKeyboard = function(e) {
         this.domRender(true);
         this.rangeRender();
       }
-    } else if (isRedo(e)) {
-      e.preventDefault();
+    } else if (isRedo(event2)) {
+      event2.preventDefault();
       const historyRecord = this.history.get(1);
       if (historyRecord) {
         this.history.current = historyRecord.current;
@@ -3061,20 +3061,20 @@ const handleKeyboard = function(e) {
         this.rangeRender();
       }
     }
-    this.emit("keydown", this.value, e);
-  } else if (e.type == "keyup") {
-    this.emit("keyup", this.value, e);
+    this.emit("keydown", this.value, event2);
+  } else if (event2.type == "keyup") {
+    this.emit("keyup", this.value, event2);
   }
 };
 const handleCopy = async function(e) {
-  e.preventDefault();
+  const event2 = e;
+  event2.preventDefault();
   if (!this.range) {
     return;
   }
   if (!this.allowCopy) {
     return;
   }
-  const event2 = e;
   const result = this.getElementsByRange().list;
   if (event2.clipboardData && result.length) {
     const { text: text2, html } = setClipboardData.apply(this, [event2.clipboardData, result]);
@@ -3082,14 +3082,14 @@ const handleCopy = async function(e) {
   }
 };
 const handleCut = async function(e) {
-  e.preventDefault();
+  const event2 = e;
+  event2.preventDefault();
   if (!this.range) {
     return;
   }
   if (!this.allowCut) {
     return;
   }
-  const event2 = e;
   const result = this.getElementsByRange().list;
   if (event2.clipboardData && result.length) {
     const { text: text2, html } = setClipboardData.apply(this, [event2.clipboardData, result]);
@@ -3103,7 +3103,8 @@ const handleCut = async function(e) {
   }
 };
 const handlePaste = async function(e) {
-  e.preventDefault();
+  const event2 = e;
+  event2.preventDefault();
   if (this.disabled) {
     return;
   }
@@ -3113,7 +3114,6 @@ const handlePaste = async function(e) {
   if (!this.allowPaste) {
     return;
   }
-  const event2 = e;
   if (event2.clipboardData) {
     const html = event2.clipboardData.getData("text/html");
     const text2 = event2.clipboardData.getData("text/plain");
@@ -3876,48 +3876,50 @@ class AlexEditor {
    * 根据range来设置真实的光标
    */
   rangeRender() {
-    if (this.disabled) {
-      return;
-    }
-    if (this.range) {
-      const handler = (point) => {
-        let node = null;
-        let offset = null;
-        if (point.element.isText()) {
-          node = point.element.elm.childNodes[0];
-          offset = point.offset;
-        } else {
-          node = point.element.parent.elm;
-          const index = point.element.parent.children.findIndex((item) => {
-            return point.element.isEqual(item);
-          });
-          offset = point.offset + index;
-        }
-        return { node, offset };
-      };
-      this.__innerSelectionChange = true;
-      const anchorResult = handler(this.range.anchor);
-      const focusResult = handler(this.range.focus);
-      const selection = window.getSelection();
-      if (selection) {
-        selection.removeAllRanges();
-        const range = document.createRange();
-        range.setStart(anchorResult.node, anchorResult.offset);
-        range.setEnd(focusResult.node, focusResult.offset);
-        selection.addRange(range);
+    return new Promise((resolve) => {
+      if (this.disabled) {
+        resolve();
+        return;
       }
-    } else {
-      const selection = window.getSelection();
-      if (selection) {
-        selection.removeAllRanges();
+      if (this.range) {
+        const handler = (point) => {
+          let node = null;
+          let offset = null;
+          if (point.element.isText()) {
+            node = point.element.elm.childNodes[0];
+            offset = point.offset;
+          } else {
+            node = point.element.parent.elm;
+            const index = point.element.parent.children.findIndex((item) => point.element.isEqual(item));
+            offset = point.offset + index;
+          }
+          return { node, offset };
+        };
+        this.__innerSelectionChange = true;
+        const anchorResult = handler(this.range.anchor);
+        const focusResult = handler(this.range.focus);
+        const selection = window.getSelection();
+        if (selection) {
+          selection.removeAllRanges();
+          const range = document.createRange();
+          range.setStart(anchorResult.node, anchorResult.offset);
+          range.setEnd(focusResult.node, focusResult.offset);
+          selection.addRange(range);
+        }
+      } else {
+        const selection = window.getSelection();
+        if (selection) {
+          selection.removeAllRanges();
+        }
       }
-    }
-    setTimeout(() => {
-      setRangeInVisible.apply(this);
-      this.__innerSelectionChange = false;
-      this.history.updateCurrentRange(this.range);
-      this.emit("rangeUpdate", this.range);
-    }, 0);
+      setTimeout(() => {
+        setRangeInVisible.apply(this);
+        this.__innerSelectionChange = false;
+        this.history.updateCurrentRange(this.range);
+        this.emit("rangeUpdate", this.range);
+        resolve();
+      }, 0);
+    });
   }
   /**
    * 将html转为元素
@@ -3988,11 +3990,12 @@ class AlexEditor {
       if (inline.parse) {
         config.parsedom = AlexElement.TEXT_NODE;
         if (common$1.isObject(inline.parse)) {
-          for (let key in inline.parse) {
-            if (typeof inline.parse[key] == "function") {
-              config.styles[key] = inline.parse[key].apply(this, [node]);
+          const inlineParse2 = inline.parse;
+          for (let key in inlineParse2) {
+            if (typeof inlineParse2[key] == "function") {
+              config.styles[key] = inlineParse2[key].apply(this, [node]);
             } else {
-              config.styles[key] = inline.parse[key];
+              config.styles[key] = inlineParse2[key];
             }
           }
         }
@@ -4197,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;
@@ -4214,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;
         }
@@ -4549,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.6";
+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 = {
   /**
@@ -17875,7 +17884,7 @@ const languages = [
     value: "rust"
   }
 ];
-const mergeObject = function(o1, o2) {
+const mergeObject = (o1, o2) => {
   if (!common.isObject(o1) && common.isObject(o2)) {
     return null;
   }
@@ -17888,7 +17897,7 @@ const mergeObject = function(o1, o2) {
   }
   return o1;
 };
-const queryHasValue = function(obj, name, value) {
+const queryHasValue = (obj, name, value) => {
   if (value == null || value == void 0) {
     return obj.hasOwnProperty(name);
   }
@@ -17918,13 +17927,13 @@ const queryHasValue = function(obj, name, value) {
   }
   return ownValue == value;
 };
-const cloneData = function(data2) {
+const cloneData = (data2) => {
   if (common.isObject(data2) || Array.isArray(data2)) {
     return JSON.parse(JSON.stringify(data2));
   }
   return data2;
 };
-const getButtonOptionsConfig = function(editTrans) {
+const getButtonOptionsConfig = (editTrans) => {
   return {
     //标题配置
     heading: [
@@ -18118,7 +18127,7 @@ const getButtonOptionsConfig = function(editTrans) {
     backColor: ["#000000", "#505050", "#808080", "#BBBBBB", "#CCCCCC", "#EEEEEE", "#F7F7F7", "#FFFFFF", "#EC1A0A", "#FF9900", "#FFFF00", "#07C160", "#00FFFF", "#0B73DE", "#9C00FF", "#FF00FF", "#F7C6CE", "#FFE7CE", "#FFEFC6", "#D6EFD6", "#CEDEE7", "#CEE7F7", "#D6D6E7", "#E7D6DE", "#E79C9C", "#FFC69C", "#FFE79C", "#B5D6A5", "#A5C6CE", "#9CC6EF", "#B5A5D6", "#D6A5BD", "#e45649", "#F7AD6B", "#FFD663", "#94BD7B", "#73A5AD", "#6BADDE", "#8C7BC6", "#C67BA5", "#CE0000", "#E79439", "#EFC631", "#50a14f", "#4A7B8C", "#03A8F3", "#634AA5", "#A54A7B", "#9C0000", "#B56308", "#BD9400", "#397B21", "#104A5A", "#085294", "#311873", "#731842", "#630000", "#7B3900", "#986801", "#295218", "#083139", "#003163", "#21104A", "#4A1031"]
   };
 };
-const getToolbarConfig = function(editTrans, editLocale) {
+const getToolbarConfig = (editTrans, editLocale) => {
   return {
     //是否使用工具条
     use: true,
@@ -18361,7 +18370,7 @@ const getToolbarConfig = function(editTrans, editLocale) {
     extraDisabled: null
   };
 };
-const getMenuConfig = function(editTrans, editLocale) {
+const getMenuConfig = (editTrans, editLocale) => {
   return {
     //是否使用菜单栏
     use: true,
@@ -18756,6 +18765,128 @@ const getMenuConfig = function(editTrans, editLocale) {
     extends: {}
   };
 };
+const setTableCellMerged = (cell) => {
+  const breakEl = new AlexElement("closed", "br", null, null, null);
+  cell.children = [breakEl];
+  breakEl.parent = cell;
+  if (cell.hasMarks()) {
+    cell.marks["data-editify-merged"] = "true";
+  } else {
+    cell.marks = {
+      "data-editify-merged": "true"
+    };
+  }
+};
+const getCellMergeElement = (editor, cell) => {
+  const queryLeft = () => {
+    let crossColumnElement = null;
+    let el = editor.getPreviousElement(cell);
+    let temIndex = 1;
+    while (el) {
+      const { colspan } = getCellSpanNumber(el);
+      const isMergedCell = el.hasMarks() && el.marks["data-editify-merged"];
+      if (!isMergedCell && colspan > temIndex) {
+        crossColumnElement = el;
+        break;
+      } else {
+        el = editor.getPreviousElement(el);
+        temIndex++;
+      }
+    }
+    return crossColumnElement;
+  };
+  const queryUp = () => {
+    let crossRowElement = null;
+    const index = cell.parent.children.findIndex((item) => item.isEqual(cell));
+    let el = editor.getPreviousElement(cell.parent);
+    let temIndex = 1;
+    while (el) {
+      const column = el.children[index];
+      const { rowspan } = getCellSpanNumber(column);
+      const isMergedCell = column.hasMarks() && column.marks["data-editify-merged"];
+      if (!isMergedCell && rowspan > temIndex) {
+        crossRowElement = column;
+        break;
+      } else {
+        el = editor.getPreviousElement(el);
+        temIndex++;
+      }
+    }
+    return crossRowElement;
+  };
+  return {
+    crossRowElement: queryUp(),
+    crossColumnElement: queryLeft()
+  };
+};
+const getCellSpanNumber = (cell) => {
+  let rowspan = 1;
+  let colspan = 1;
+  if (cell.hasMarks()) {
+    if (cell.marks["rowspan"]) {
+      const num = Number(cell.marks["rowspan"]);
+      rowspan = isNaN(num) ? 1 : num;
+    }
+    if (cell.marks["colspan"]) {
+      const num = Number(cell.marks["colspan"]);
+      colspan = isNaN(num) ? 1 : num;
+    }
+  }
+  return {
+    rowspan,
+    colspan
+  };
+};
+const getTableSize = (rowElements) => {
+  const columns = [];
+  const rows = [];
+  rowElements.forEach((rowElement, rowIndex) => {
+    rowElement.children.forEach((colElement, colIndex) => {
+      if (Array.isArray(rows[rowIndex])) {
+        rows[rowIndex].push(colElement);
+      } else {
+        rows[rowIndex] = [colElement];
+      }
+      if (Array.isArray(columns[colIndex])) {
+        columns[colIndex].push(colElement);
+      } else {
+        columns[colIndex] = [colElement];
+      }
+    });
+  });
+  const rowNumbers = columns.map((item) => {
+    return item.reduce((total, current) => {
+      if (current.hasMarks()) {
+        if (!!current.marks["data-editify-merged"]) {
+          return total + 0;
+        }
+        if (!!current.marks["rowspan"]) {
+          const num = Number(current.marks["rowspan"]);
+          return total + (isNaN(num) ? 1 : num);
+        }
+      }
+      return total + 1;
+    }, 0);
+  });
+  const columnNumbers = rows.map((item) => {
+    return item.reduce((total, current) => {
+      if (current.hasMarks()) {
+        if (!!current.marks["data-editify-merged"]) {
+          return total + 0;
+        }
+        if (!!current.marks["colspan"]) {
+          const num = Number(current.marks["colspan"]);
+          return total + (isNaN(num) ? 1 : num);
+        }
+      }
+      return total + 1;
+    }, 0);
+  });
+  return {
+    rowNumber: Math.max(...rowNumbers),
+    columnNumber: Math.max(...columnNumbers)
+  };
+};
 const elementIsMatch = (element2, config) => {
   let isMatch = true;
   if (config.parsedom && (element2.isText() || config.parsedom != element2.parsedom)) {
@@ -19723,6 +19854,139 @@ const insertSeparator = (editor) => {
   editor.range.anchor.moveToEnd(separator);
   editor.range.focus.moveToEnd(separator);
 };
+const autocompleteTableCells = (editor, rowElements, rowNumber, columnNumber) => {
+  AlexElement.flatElements(rowElements).forEach((item) => {
+    if (item.parsedom == "td" && item.hasMarks()) {
+      if (item.marks["data-editify-merged"]) {
+        delete item.marks["data-editify-merged"];
+      }
+      const colspan = isNaN(Number(item.marks["colspan"])) ? 1 : Number(item.marks["colspan"]);
+      const rowspan = isNaN(Number(item.marks["rowspan"])) ? 1 : Number(item.marks["rowspan"]);
+      if (colspan > 1) {
+        let i = 1;
+        while (i < colspan && item.parent.children.length < columnNumber) {
+          const column = new AlexElement(
+            "inblock",
+            "td",
+            {
+              "data-editify-merged": "true"
+            },
+            null,
+            null
+          );
+          const breakElement = new AlexElement("closed", "br", null, null, null);
+          editor.addElementTo(breakElement, column);
+          editor.addElementAfter(column, item);
+          i++;
+        }
+      }
+      if (rowspan > 1) {
+        let el = item;
+        let i = 1;
+        while (i < rowspan && editor.getNextElement(el.parent) && editor.getNextElement(el.parent).children.length < columnNumber) {
+          const nextRow = editor.getNextElement(el.parent);
+          const index = el.parent.children.findIndex((item2) => item2.isEqual(el));
+          const nextCell = nextRow.children[index];
+          for (let j = 0; j < colspan; j++) {
+            const column = new AlexElement(
+              "inblock",
+              "td",
+              {
+                "data-editify-merged": "true"
+              },
+              null,
+              null
+            );
+            const breakElement = new AlexElement("closed", "br", null, null, null);
+            editor.addElementTo(breakElement, column);
+            if (nextCell) {
+              editor.addElementBefore(column, nextCell);
+            } else {
+              editor.addElementTo(column, nextRow, nextRow.children.length);
+            }
+          }
+          el = nextRow.children[index];
+          i++;
+        }
+      }
+    }
+  });
+  rowElements.forEach((rowElement) => {
+    const number2 = rowElement.children.length;
+    if (number2 < columnNumber) {
+      for (let i = 0; i < columnNumber - number2; i++) {
+        const column = new AlexElement("inblock", "td", null, null, null);
+        const breakElement = new AlexElement("closed", "br", null, null, null);
+        editor.addElementTo(breakElement, column);
+        editor.addElementTo(column, rowElement, rowElement.children.length);
+      }
+    }
+  });
+  const length = rowElements.length;
+  if (length < rowNumber) {
+    for (let i = 0; i < rowNumber - length; i++) {
+      const row = new AlexElement("inblock", "tr", null, null, null);
+      for (let j = 0; j < columnNumber; j++) {
+        const column = new AlexElement("inblock", "td", null, null, null);
+        const breakElement = new AlexElement("closed", "br", null, null, null);
+        editor.addElementTo(breakElement, column);
+        editor.addElementTo(column, row);
+      }
+      rowElements.push(row);
+    }
+  }
+};
+const autoHideMergedTableCells = (editor, rowElements) => {
+  const cells = AlexElement.flatElements(rowElements).filter((item) => item.parsedom == "td");
+  cells.forEach((cell) => {
+    if (cell.hasMarks() && !cell.marks["data-editify-merged"]) {
+      const colspan = isNaN(Number(cell.marks["colspan"])) ? 1 : Number(cell.marks["colspan"]);
+      const rowspan = isNaN(Number(cell.marks["rowspan"])) ? 1 : Number(cell.marks["rowspan"]);
+      if (colspan > 1) {
+        let el = cell;
+        let i = 1;
+        while (i < colspan) {
+          const nextCell = editor.getNextElement(el);
+          if (nextCell) {
+            if (nextCell.hasMarks()) {
+              nextCell.marks["data-editify-merged"] = "true";
+            } else {
+              nextCell.marks = {
+                "data-editify-merged": "true"
+              };
+            }
+            el = nextCell;
+            i++;
+          } else {
+            break;
+          }
+        }
+      }
+      if (rowspan > 1) {
+        const index = cell.parent.children.findIndex((item) => item.isEqual(cell));
+        let el = cell;
+        let i = 1;
+        while (i < rowspan && el && editor.getNextElement(el.parent)) {
+          const nextRow = editor.getNextElement(el.parent);
+          for (let j = index; j < index + colspan; j++) {
+            const current = nextRow.children[j];
+            if (current) {
+              if (current.hasMarks()) {
+                current.marks["data-editify-merged"] = "true";
+              } else {
+                current.marks = {
+                  "data-editify-merged": "true"
+                };
+              }
+            }
+          }
+          el = nextRow.children[index];
+          i++;
+        }
+      }
+    }
+  });
+};
 const updateRangeInPre = (editor, element2, originalTextElements, newElements) => {
   if (!editor.range) {
     return;
@@ -19782,7 +20046,7 @@ const parseList = (editor, element2) => {
     element2.toEmpty();
   }
 };
-const orderdListHandle = function(editor, element2) {
+const orderdListHandle = (editor, element2) => {
   if (isList(element2, true)) {
     const previousElement = editor.getPreviousElement(element2);
     if (previousElement && isList(previousElement, true)) {
@@ -19793,7 +20057,7 @@ const orderdListHandle = function(editor, element2) {
     }
   }
 };
-const commonElementHandle = function(editor, element2) {
+const commonElementHandle = (editor, element2) => {
   if (element2.parsedom == "img" || element2.parsedom == "video" || element2.parsedom == "a") {
     const marks = {
       "data-editify-element": element2.key
@@ -19834,7 +20098,12 @@ const commonElementHandle = function(editor, element2) {
     }
   }
 };
-const tableHandle = function(editor, element2) {
+const tableThTdHandle = (_editor, element2) => {
+  if (element2.parsedom == "th") {
+    element2.parsedom = "td";
+  }
+};
+const tableFormatHandle = (editor, element2) => {
   if (element2.parsedom == "table") {
     const marks = {
       "data-editify-element": element2.key
@@ -19857,14 +20126,10 @@ const tableHandle = function(editor, element2) {
     const rows = elements.filter((el) => {
       return el.parsedom == "tr";
     });
+    const { rowNumber, columnNumber } = getTableSize(rows);
     let colgroup = elements.find((el) => {
       return el.parsedom == "colgroup";
     });
-    const colNumber = Math.max(
-      ...rows.map((row) => {
-        return row.children.length;
-      })
-    );
     if (colgroup) {
       colgroup.children.forEach((col) => {
         if (!col.hasMarks()) {
@@ -19876,8 +20141,8 @@ const tableHandle = function(editor, element2) {
         }
       });
       const length = colgroup.children.length;
-      if (length < colNumber) {
-        for (let i = 0; i < colNumber - length; i++) {
+      if (length < columnNumber) {
+        for (let i = 0; i < columnNumber - length; i++) {
           const col = new AlexElement(
             "closed",
             "col",
@@ -19892,7 +20157,7 @@ const tableHandle = function(editor, element2) {
       }
     } else {
       colgroup = new AlexElement("inblock", "colgroup", null, null, null);
-      for (let i = colNumber - 1; i >= 0; i--) {
+      for (let i = columnNumber - 1; i >= 0; i--) {
         const col = new AlexElement(
           "closed",
           "col",
@@ -19905,43 +20170,79 @@ const tableHandle = function(editor, element2) {
         editor.addElementTo(col, colgroup);
       }
     }
+    autocompleteTableCells(editor, rows, rowNumber, columnNumber);
     element2.children = [];
     const tbody = new AlexElement("inblock", "tbody", null, null, null);
-    rows.reverse().forEach((row) => {
-      const length = row.children.length;
-      if (length < colNumber) {
-        for (let i = 0; i < colNumber - length; i++) {
-          const column = new AlexElement("inblock", "td", null, null, null);
-          const breakElement = new AlexElement("closed", "br", null, null, null);
-          editor.addElementTo(breakElement, column);
-          editor.addElementTo(column, row, row.children.length);
-        }
-      }
-      editor.addElementTo(row, tbody);
+    rows.forEach((row) => {
+      const index = tbody.hasChildren() ? tbody.children.length : 0;
+      editor.addElementTo(row, tbody, index);
     });
     editor.addElementTo(tbody, element2);
     editor.addElementTo(colgroup, element2);
-  }
-  if (element2.parsedom == "th") {
-    element2.parsedom = "td";
-  }
-  if (element2.parsedom == "td") {
-    if (element2.hasMarks()) {
-      if (element2.marks["rowspan"]) {
-        delete element2.marks["rowspan"];
+    autoHideMergedTableCells(editor, rows);
+  }
+};
+const tableRangeMergedHandle = (editor, element2) => {
+  if (element2.parsedom == "td" && element2.hasMarks() && element2.marks["data-editify-merged"] && editor.range) {
+    const queryLeftSetRange = (_element, callback) => {
+      let success = false;
+      let el = editor.getPreviousElement(_element);
+      let tempIndex = 1;
+      while (el) {
+        const { colspan } = getCellSpanNumber(el);
+        if (el.hasMarks() && !el.marks["data-editify-merged"] && colspan > tempIndex) {
+          success = true;
+          callback(el);
+          break;
+        } else {
+          el = editor.getPreviousElement(el);
+          tempIndex++;
+        }
+      }
+      return success;
+    };
+    const queryUpSetRange = (_element, callback) => {
+      let success = false;
+      const index = _element.parent.children.findIndex((item) => item.isEqual(_element));
+      let el = editor.getPreviousElement(_element.parent);
+      let tempIndex = 1;
+      while (el) {
+        const previousColumn = el.children[index];
+        const { rowspan } = getCellSpanNumber(previousColumn);
+        if (previousColumn.hasMarks() && !previousColumn.marks["data-editify-merged"] && rowspan > tempIndex) {
+          success = true;
+          callback(previousColumn);
+          break;
+        } else {
+          el = editor.getPreviousElement(el);
+          tempIndex++;
+        }
       }
-      if (element2.marks["colspan"]) {
-        delete element2.marks["colspan"];
+      return success;
+    };
+    if (element2.isContains(editor.range.anchor.element)) {
+      const success = queryLeftSetRange(element2, (ele) => {
+        editor.range.anchor.moveToEnd(ele);
+      });
+      if (!success) {
+        queryUpSetRange(element2, (ele) => {
+          editor.range.anchor.moveToEnd(ele);
+        });
       }
     }
-    if (element2.hasStyles()) {
-      if (element2.styles["display"]) {
-        delete element2.styles["display"];
+    if (element2.isContains(editor.range.focus.element)) {
+      const success = queryLeftSetRange(element2, (ele) => {
+        editor.range.focus.moveToEnd(ele);
+      });
+      if (!success) {
+        queryUpSetRange(element2, (ele) => {
+          editor.range.focus.moveToEnd(ele);
+        });
       }
     }
   }
 };
-const preHandle = function(editor, element2, highlight2, languages2) {
+const preHandle = (editor, element2, highlight2, languages2) => {
   if (element2.parsedom == "pre") {
     const marks = {
       "data-editify-element": element2.key
@@ -19988,7 +20289,7 @@ const preHandle = function(editor, element2, highlight2, languages2) {
     }
   }
 };
-const specialInblockHandle = function(editor, element2) {
+const specialInblockHandle = (editor, element2) => {
   if (element2.hasChildren()) {
     element2.children.forEach((el) => {
       if (isList(el, true) || isList(el, false) || isTask(el) || ["blockquote", "pre", "table", "h1", "h2", "h3", "h4", "h5", "h6", "p"].includes(el.parsedom)) {
@@ -21595,6 +21896,100 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         emits("update:modelValue", val);
       }
     });
+    const canMergeCells = computed(() => {
+      return (type) => {
+        if (!editor.value.range) {
+          return false;
+        }
+        const cell = getMatchElementByElement(editor.value.range.focus.element, {
+          parsedom: "td"
+        });
+        if (!cell) {
+          return false;
+        }
+        if (type == "left") {
+          let flag = false;
+          const cellSpanNum = getCellSpanNumber(cell);
+          const previousColumn = editor.value.getPreviousElement(cell);
+          if (previousColumn) {
+            if (previousColumn.hasMarks() && previousColumn.marks["data-editify-merged"]) {
+              const { crossColumnElement } = getCellMergeElement(editor.value, previousColumn);
+              if (crossColumnElement) {
+                const { rowspan } = getCellSpanNumber(crossColumnElement);
+                flag = rowspan == cellSpanNum.rowspan;
+              }
+            } else {
+              const { rowspan } = getCellSpanNumber(previousColumn);
+              flag = rowspan == cellSpanNum.rowspan;
+            }
+          }
+          return flag;
+        }
+        if (type == "right") {
+          let flag = false;
+          const cellSpanNum = getCellSpanNumber(cell);
+          let nextColumn = editor.value.getNextElement(cell);
+          while (nextColumn) {
+            if (nextColumn.hasMarks() && nextColumn.marks["data-editify-merged"]) {
+              const { crossColumnElement } = getCellMergeElement(editor.value, nextColumn);
+              if (crossColumnElement) {
+                nextColumn = editor.value.getNextElement(nextColumn);
+              } else {
+                break;
+              }
+            } else {
+              const { rowspan } = getCellSpanNumber(nextColumn);
+              flag = rowspan == cellSpanNum.rowspan;
+              break;
+            }
+          }
+          return flag;
+        }
+        if (type == "up") {
+          let flag = false;
+          const cellSpanNum = getCellSpanNumber(cell);
+          const index = cell.parent.children.findIndex((item) => item.isEqual(cell));
+          const previousRow = editor.value.getPreviousElement(cell.parent);
+          if (previousRow) {
+            const column = previousRow.children[index];
+            if (column.hasMarks() && column.marks["data-editify-merged"]) {
+              const { crossRowElement } = getCellMergeElement(editor.value, column);
+              if (crossRowElement) {
+                const { colspan } = getCellSpanNumber(crossRowElement);
+                flag = colspan == cellSpanNum.colspan;
+              }
+            } else {
+              const { colspan } = getCellSpanNumber(column);
+              flag = colspan == cellSpanNum.colspan;
+            }
+          }
+          return flag;
+        }
+        if (type == "down") {
+          let flag = false;
+          const cellSpanNum = getCellSpanNumber(cell);
+          const index = cell.parent.children.findIndex((item) => item.isEqual(cell));
+          let nextRow = editor.value.getNextElement(cell.parent);
+          while (nextRow) {
+            const column = nextRow.children[index];
+            if (column.hasMarks() && column.marks["data-editify-merged"]) {
+              const { crossRowElement } = getCellMergeElement(editor.value, column);
+              if (crossRowElement) {
+                nextRow = editor.value.getNextElement(nextRow);
+              } else {
+                break;
+              }
+            } else {
+              const { colspan } = getCellSpanNumber(column);
+              flag = colspan == cellSpanNum.colspan;
+              break;
+            }
+          }
+          return flag;
+        }
+        return false;
+      };
+    });
     const handleInputFocus = (e) => {
       if (props.color) {
         e.currentTarget.style.borderColor = props.color;
@@ -21855,25 +22250,26 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         editor.value.range.anchor.element = editor.value.range.focus.element;
         editor.value.range.anchor.offset = editor.value.range.focus.offset;
       }
-      const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "table" });
       const columns = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "td" });
-      const tbodys = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "tbody" });
-      if (tables.length == 1 && tbodys.length == 1 && columns.length == 1) {
-        const rows = tbodys[0].children;
-        const index = columns[0].parent.children.findIndex((item) => {
+      if (columns.length == 1) {
+        const row = columns[0].parent;
+        const tbody = row.parent;
+        const table = tbody.parent;
+        const rows = tbody.children;
+        const index = row.children.findIndex((item) => {
           return item.isEqual(columns[0]);
         });
-        rows.forEach((row) => {
-          const newColumn = columns[0].clone(false);
+        rows.forEach((item) => {
+          const newColumn = new AlexElement("inblock", "td", null, null, null);
           const breakEl = new AlexElement("closed", "br", null, null, null);
           editor.value.addElementTo(breakEl, newColumn);
           if (type == "left") {
-            editor.value.addElementTo(newColumn, row, index);
+            editor.value.addElementTo(newColumn, item, index);
           } else {
-            editor.value.addElementTo(newColumn, row, index + 1);
+            editor.value.addElementTo(newColumn, item, index + 1);
           }
         });
-        const colgroup = tables[0].children.find((item) => {
+        const colgroup = table.children.find((item) => {
           return item.parsedom == "colgroup";
         });
         const col = new AlexElement("closed", "col", null, null, null);
@@ -21882,7 +22278,6 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         } else {
           editor.value.addElementTo(col, colgroup, index + 1);
         }
-        editor.value.formatElementStack();
         if (type == "left") {
           const previousColumn = editor.value.getPreviousElement(columns[0]);
           editor.value.range.anchor.moveToStart(previousColumn);
@@ -21892,6 +22287,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           editor.value.range.anchor.moveToStart(nextColumn);
           editor.value.range.focus.moveToStart(nextColumn);
         }
+        editor.value.formatElementStack();
         editor.value.domRender();
         editor.value.rangeRender();
       }
@@ -21901,23 +22297,25 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         editor.value.range.anchor.element = editor.value.range.focus.element;
         editor.value.range.anchor.offset = editor.value.range.focus.offset;
       }
-      const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "table" });
       const rows = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "tr" });
-      if (tables.length == 1 && rows.length == 1) {
-        const newRow = rows[0].clone();
-        newRow.children.forEach((column) => {
-          column.children = [];
+      if (rows.length == 1) {
+        const tbody = rows[0].parent;
+        const { columnNumber } = getTableSize(tbody.children);
+        const newRow = new AlexElement("inblock", "tr", null, null, null);
+        for (let i = 0; i < columnNumber; i++) {
+          const column = new AlexElement("inblock", "td", null, null, null);
           const breakEl = new AlexElement("closed", "br", null, null, null);
           editor.value.addElementTo(breakEl, column);
-        });
+          editor.value.addElementTo(column, newRow);
+        }
         if (type == "up") {
           editor.value.addElementBefore(newRow, rows[0]);
         } else {
           editor.value.addElementAfter(newRow, rows[0]);
         }
-        editor.value.formatElementStack();
         editor.value.range.anchor.moveToStart(newRow);
         editor.value.range.focus.moveToStart(newRow);
+        editor.value.formatElementStack();
         editor.value.domRender();
         editor.value.rangeRender();
         setTimeout(() => {
@@ -21957,25 +22355,52 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         editor.value.range.anchor.element = editor.value.range.focus.element;
         editor.value.range.anchor.offset = editor.value.range.focus.offset;
       }
-      const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "table" });
-      const rows = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "tr" });
-      if (tables.length == 1 && rows.length == 1) {
-        const parent = rows[0].parent;
-        if (parent.children.length == 1) {
+      const columns = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "td" });
+      if (columns.length == 1) {
+        const row = columns[0].parent;
+        if (row.parent.children.length == 1) {
           deleteElement("table");
           return;
         }
-        const previousRow = editor.value.getPreviousElement(rows[0]);
-        const nextRow = editor.value.getNextElement(rows[0]);
-        rows[0].toEmpty();
-        editor.value.formatElementStack();
+        const index = row.children.findIndex((item) => {
+          return item.isEqual(columns[0]);
+        });
+        const previousRow = editor.value.getPreviousElement(row);
+        const nextRow = editor.value.getNextElement(row);
+        row.children.forEach((item, i) => {
+          const itemSpanNum = getCellSpanNumber(item);
+          if (item.hasMarks() && item.marks["data-editify-merged"]) {
+            const { crossRowElement } = getCellMergeElement(editor.value, item);
+            if (crossRowElement) {
+              const { rowspan } = getCellSpanNumber(crossRowElement);
+              if (rowspan - 1 == 1) {
+                delete crossRowElement.marks["rowspan"];
+              } else {
+                crossRowElement.marks["rowspan"] = rowspan - 1;
+              }
+            }
+          } else if (itemSpanNum.rowspan > 1) {
+            let el = editor.value.getNextElement(row);
+            if (el && itemSpanNum.rowspan - 1 > 1) {
+              if (el.children[i].hasMarks()) {
+                el.children[i].marks["rowspan"] = itemSpanNum.rowspan - 1;
+              } else {
+                el.children[i].marks = {
+                  rowspan: itemSpanNum.rowspan - 1
+                };
+              }
+            }
+          }
+        });
+        row.toEmpty();
         if (previousRow) {
-          editor.value.range.anchor.moveToEnd(previousRow.children[0]);
-          editor.value.range.focus.moveToEnd(previousRow.children[0]);
+          editor.value.range.anchor.moveToEnd(previousRow.children[index]);
+          editor.value.range.focus.moveToEnd(previousRow.children[index]);
         } else {
-          editor.value.range.anchor.moveToEnd(nextRow.children[0]);
-          editor.value.range.focus.moveToEnd(nextRow.children[0]);
+          editor.value.range.anchor.moveToEnd(nextRow.children[index]);
+          editor.value.range.focus.moveToEnd(nextRow.children[index]);
         }
+        editor.value.formatElementStack();
         editor.value.domRender();
         editor.value.rangeRender();
         setTimeout(() => {
@@ -21989,28 +22414,50 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         editor.value.range.anchor.offset = editor.value.range.focus.offset;
       }
       const columns = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "td" });
-      const tbodys = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "tbody" });
-      const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "table" });
-      if (tables.length == 1 && tbodys.length == 1 && columns.length == 1) {
-        const rows = tbodys[0].children;
-        const parent = columns[0].parent;
-        if (parent.children.length == 1) {
+      if (columns.length == 1) {
+        const row = columns[0].parent;
+        const rows = row.parent.children;
+        const table = row.parent.parent;
+        if (row.children.length == 1) {
           deleteElement("table");
           return;
         }
-        const previousColumn = editor.value.getPreviousElement(columns[0]);
-        const nextColumn = editor.value.getNextElement(columns[0]);
-        const index = columns[0].parent.children.findIndex((item) => {
+        const index = row.children.findIndex((item) => {
           return item.isEqual(columns[0]);
         });
-        rows.forEach((row) => {
-          row.children[index].toEmpty();
+        const previousColumn = editor.value.getPreviousElement(columns[0]);
+        const nextColumn = editor.value.getNextElement(columns[0]);
+        rows.forEach((item) => {
+          const cell = item.children[index];
+          const cellSpanNum = getCellSpanNumber(cell);
+          if (cell.hasMarks() && cell.marks["data-editify-merged"]) {
+            const { crossColumnElement } = getCellMergeElement(editor.value, cell);
+            if (crossColumnElement) {
+              const { colspan } = getCellSpanNumber(crossColumnElement);
+              if (colspan - 1 == 1) {
+                delete crossColumnElement.marks["colspan"];
+              } else {
+                crossColumnElement.marks["colspan"] = colspan - 1;
+              }
+            }
+          } else if (cellSpanNum.colspan > 1) {
+            let el = editor.value.getNextElement(cell);
+            if (el && cellSpanNum.colspan - 1 > 1) {
+              if (el.hasMarks()) {
+                el.marks["colspan"] = cellSpanNum.colspan - 1;
+              } else {
+                el.marks = {
+                  colspan: cellSpanNum.colspan - 1
+                };
+              }
+            }
+          }
+          cell.toEmpty();
         });
-        const colgroup = tables[0].children.find((item) => {
+        const colgroup = table.children.find((item) => {
           return item.parsedom == "colgroup";
         });
         colgroup.children[index].toEmpty();
-        editor.value.formatElementStack();
         if (previousColumn) {
           editor.value.range.anchor.moveToEnd(previousColumn);
           editor.value.range.focus.moveToEnd(previousColumn);
@@ -22018,10 +22465,188 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           editor.value.range.anchor.moveToEnd(nextColumn);
           editor.value.range.focus.moveToEnd(nextColumn);
         }
+        editor.value.formatElementStack();
         editor.value.domRender();
         editor.value.rangeRender();
       }
     };
+    const mergeCells = (type) => {
+      if (!canMergeCells.value(type)) {
+        return;
+      }
+      if (!editor.value.range.anchor.isEqual(editor.value.range.focus)) {
+        editor.value.range.anchor.element = editor.value.range.focus.element;
+        editor.value.range.anchor.offset = editor.value.range.focus.offset;
+      }
+      const columns = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "td" });
+      if (columns.length == 1) {
+        if (type == "left") {
+          const cellSpanNum = getCellSpanNumber(columns[0]);
+          const previousColumn = editor.value.getPreviousElement(columns[0]);
+          if (previousColumn) {
+            if (previousColumn.hasMarks() && previousColumn.marks["data-editify-merged"]) {
+              const { crossColumnElement } = getCellMergeElement(editor.value, previousColumn);
+              if (crossColumnElement) {
+                const { rowspan, colspan } = getCellSpanNumber(crossColumnElement);
+                if (rowspan == cellSpanNum.rowspan) {
+                  crossColumnElement.marks["colspan"] = colspan + cellSpanNum.colspan;
+                  columns[0].children.forEach((item) => {
+                    crossColumnElement.children.push(item);
+                    item.parent = crossColumnElement;
+                  });
+                  setTableCellMerged(columns[0]);
+                  editor.value.range.anchor.moveToEnd(crossColumnElement);
+                  editor.value.range.focus.moveToEnd(crossColumnElement);
+                  editor.value.formatElementStack();
+                  editor.value.domRender();
+                  editor.value.rangeRender();
+                }
+              }
+            } else {
+              const { rowspan, colspan } = getCellSpanNumber(previousColumn);
+              if (rowspan == cellSpanNum.rowspan) {
+                if (previousColumn.hasMarks()) {
+                  previousColumn.marks["colspan"] = colspan + cellSpanNum.colspan;
+                } else {
+                  previousColumn.marks = {
+                    colspan: colspan + cellSpanNum.colspan
+                  };
+                }
+                columns[0].children.forEach((item) => {
+                  previousColumn.children.push(item);
+                  item.parent = previousColumn;
+                });
+                setTableCellMerged(columns[0]);
+                editor.value.range.anchor.moveToEnd(previousColumn);
+                editor.value.range.focus.moveToEnd(previousColumn);
+                editor.value.formatElementStack();
+                editor.value.domRender();
+                editor.value.rangeRender();
+              }
+            }
+          }
+        } else if (type == "right") {
+          const cellSpanNum = getCellSpanNumber(columns[0]);
+          let nextColumn = editor.value.getNextElement(columns[0]);
+          while (nextColumn) {
+            if (nextColumn.hasMarks() && nextColumn.marks["data-editify-merged"]) {
+              const { crossColumnElement } = getCellMergeElement(editor.value, nextColumn);
+              if (crossColumnElement) {
+                nextColumn = editor.value.getNextElement(nextColumn);
+              } else {
+                break;
+              }
+            } else {
+              const { rowspan, colspan } = getCellSpanNumber(nextColumn);
+              if (rowspan == cellSpanNum.rowspan) {
+                if (columns[0].hasMarks()) {
+                  columns[0].marks["colspan"] = cellSpanNum.colspan + colspan;
+                } else {
+                  columns[0].marks = {
+                    colspan: cellSpanNum.colspan + colspan
+                  };
+                }
+                nextColumn.children.forEach((item) => {
+                  columns[0].children.push(item);
+                  item.parent = columns[0];
+                });
+                setTableCellMerged(nextColumn);
+                editor.value.range.anchor.moveToEnd(columns[0]);
+                editor.value.range.focus.moveToEnd(columns[0]);
+                editor.value.formatElementStack();
+                editor.value.domRender();
+                editor.value.rangeRender();
+              }
+              break;
+            }
+          }
+        } else if (type == "up") {
+          const cellSpanNum = getCellSpanNumber(columns[0]);
+          const index = columns[0].parent.children.findIndex((item) => item.isEqual(columns[0]));
+          const previousRow = editor.value.getPreviousElement(columns[0].parent);
+          if (previousRow) {
+            const previousColumn = previousRow.children[index];
+            if (previousColumn.hasMarks() && previousColumn.marks["data-editify-merged"]) {
+              const { crossRowElement } = getCellMergeElement(editor.value, previousColumn);
+              if (crossRowElement) {
+                const { rowspan, colspan } = getCellSpanNumber(crossRowElement);
+                if (colspan == cellSpanNum.colspan) {
+                  crossRowElement.marks["rowspan"] = rowspan + cellSpanNum.rowspan;
+                  columns[0].children.forEach((item) => {
+                    crossRowElement.children.push(item);
+                    item.parent = crossRowElement;
+                  });
+                  setTableCellMerged(columns[0]);
+                  editor.value.range.anchor.moveToEnd(crossRowElement);
+                  editor.value.range.focus.moveToEnd(crossRowElement);
+                  editor.value.formatElementStack();
+                  editor.value.domRender();
+                  editor.value.rangeRender();
+                }
+              }
+            } else {
+              const { rowspan, colspan } = getCellSpanNumber(previousColumn);
+              if (colspan == cellSpanNum.colspan) {
+                if (previousColumn.hasMarks()) {
+                  previousColumn.marks["rowspan"] = rowspan + cellSpanNum.rowspan;
+                } else {
+                  previousColumn.marks = {
+                    rowspan: rowspan + cellSpanNum.rowspan
+                  };
+                }
+                columns[0].children.forEach((item) => {
+                  previousColumn.children.push(item);
+                  item.parent = previousColumn;
+                });
+                setTableCellMerged(columns[0]);
+                editor.value.range.anchor.moveToEnd(previousColumn);
+                editor.value.range.focus.moveToEnd(previousColumn);
+                editor.value.formatElementStack();
+                editor.value.domRender();
+                editor.value.rangeRender();
+              }
+            }
+          }
+        } else if (type == "down") {
+          const cellSpanNum = getCellSpanNumber(columns[0]);
+          const index = columns[0].parent.children.findIndex((item) => item.isEqual(columns[0]));
+          let nextRow = editor.value.getNextElement(columns[0].parent);
+          while (nextRow) {
+            const nextColumn = nextRow.children[index];
+            if (nextColumn.hasMarks() && nextColumn.marks["data-editify-merged"]) {
+              const { crossRowElement } = getCellMergeElement(editor.value, nextColumn);
+              if (crossRowElement) {
+                nextRow = editor.value.getNextElement(nextRow);
+              } else {
+                break;
+              }
+            } else {
+              const { rowspan, colspan } = getCellSpanNumber(nextColumn);
+              if (colspan == cellSpanNum.colspan) {
+                if (columns[0].hasMarks()) {
+                  columns[0].marks["rowspan"] = cellSpanNum.rowspan + rowspan;
+                } else {
+                  columns[0].marks = {
+                    rowspan: cellSpanNum.rowspan + rowspan
+                  };
+                }
+                nextColumn.children.forEach((item) => {
+                  columns[0].children.push(item);
+                  item.parent = columns[0];
+                });
+                setTableCellMerged(nextColumn);
+                editor.value.range.anchor.moveToEnd(columns[0]);
+                editor.value.range.focus.moveToEnd(columns[0]);
+                editor.value.formatElementStack();
+                editor.value.domRender();
+                editor.value.rangeRender();
+              }
+              break;
+            }
+          }
+        }
+      }
+    };
     const layerShow = () => {
       if (props.type == "link") {
         const links = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "a" });
@@ -22143,7 +22768,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Layer, {
         modelValue: show.value,
-        "onUpdate:modelValue": _cache[21] || (_cache[21] = ($event) => show.value = $event),
+        "onUpdate:modelValue": _cache[25] || (_cache[25] = ($event) => show.value = $event),
         ref_key: "layerRef",
         ref: layerRef,
         node: _ctx.node,
@@ -22478,7 +23103,63 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                 _: 1
               }, 8, ["title", "tooltip", "color"]),
               createVNode(Button, {
-                onOperate: _cache[18] || (_cache[18] = ($event) => deleteElement("table")),
+                disabled: !canMergeCells.value("left"),
+                onOperate: _cache[18] || (_cache[18] = ($event) => mergeCells("left")),
+                rightBorder: "",
+                name: "mergeCellsLeft",
+                title: unref($editTrans)("mergeCellsLeft"),
+                tooltip: _ctx.config.tooltip,
+                color: _ctx.color
+              }, {
+                default: withCtx(() => [
+                  createVNode(Icon, { value: "merge-cells-left" })
+                ]),
+                _: 1
+              }, 8, ["disabled", "title", "tooltip", "color"]),
+              createVNode(Button, {
+                disabled: !canMergeCells.value("right"),
+                onOperate: _cache[19] || (_cache[19] = ($event) => mergeCells("right")),
+                rightBorder: "",
+                name: "mergeCellsRight",
+                title: unref($editTrans)("mergeCellsRight"),
+                tooltip: _ctx.config.tooltip,
+                color: _ctx.color
+              }, {
+                default: withCtx(() => [
+                  createVNode(Icon, { value: "merge-cells-right" })
+                ]),
+                _: 1
+              }, 8, ["disabled", "title", "tooltip", "color"]),
+              createVNode(Button, {
+                disabled: !canMergeCells.value("up"),
+                onOperate: _cache[20] || (_cache[20] = ($event) => mergeCells("up")),
+                rightBorder: "",
+                name: "mergeCellsUp",
+                title: unref($editTrans)("mergeCellsUp"),
+                tooltip: _ctx.config.tooltip,
+                color: _ctx.color
+              }, {
+                default: withCtx(() => [
+                  createVNode(Icon, { value: "merge-cells-up" })
+                ]),
+                _: 1
+              }, 8, ["disabled", "title", "tooltip", "color"]),
+              createVNode(Button, {
+                disabled: !canMergeCells.value("down"),
+                onOperate: _cache[21] || (_cache[21] = ($event) => mergeCells("down")),
+                rightBorder: "",
+                name: "mergeCellsDown",
+                title: unref($editTrans)("mergeCellsDown"),
+                tooltip: _ctx.config.tooltip,
+                color: _ctx.color
+              }, {
+                default: withCtx(() => [
+                  createVNode(Icon, { value: "merge-cells-down" })
+                ]),
+                _: 1
+              }, 8, ["disabled", "title", "tooltip", "color"]),
+              createVNode(Button, {
+                onOperate: _cache[22] || (_cache[22] = ($event) => deleteElement("table")),
                 leftBorder: "",
                 name: "deleteTable",
                 title: unref($editTrans)("deleteTable"),
@@ -22493,7 +23174,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             ], 64)) : createCommentVNode("", true),
             _ctx.type == "codeBlock" ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
               createVNode(Button, {
-                onOperate: _cache[19] || (_cache[19] = ($event) => insertParagraphWithPre("up")),
+                onOperate: _cache[23] || (_cache[23] = ($event) => insertParagraphWithPre("up")),
                 name: "textWrapUp",
                 title: unref($editTrans)("textWrapUp"),
                 tooltip: _ctx.config.tooltip,
@@ -22508,7 +23189,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                 _: 1
               }, 8, ["title", "tooltip", "color"]),
               createVNode(Button, {
-                onOperate: _cache[20] || (_cache[20] = ($event) => insertParagraphWithPre("down")),
+                onOperate: _cache[24] || (_cache[24] = ($event) => insertParagraphWithPre("down")),
                 name: "textWrapDown",
                 title: unref($editTrans)("textWrapDown"),
                 tooltip: _ctx.config.tooltip,
@@ -22864,7 +23545,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-f6219d4c"]]);
+const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-c1aa741f"]]);
 const InsertLinkProps = {
   //主题色
   color: {
@@ -25058,6 +25739,10 @@ const en_US = {
   insertColumnRight: "Insert column backward",
   deleteRow: "Delete rows",
   deleteColumn: "Delete column",
+  mergeCellsLeft: "Merge cells to the left",
+  mergeCellsRight: "Merge cells to the right",
+  mergeCellsUp: "Merge cells up",
+  mergeCellsDown: "Merge cells down",
   deleteTable: "Delete table",
   selectLanguages: "Select language",
   autoRecognize: "Auto",
@@ -25158,6 +25843,10 @@ const zh_CN = {
   insertColumnRight: "向后插入列",
   deleteRow: "删除行",
   deleteColumn: "删除列",
+  mergeCellsLeft: "向左合并单元格",
+  mergeCellsRight: "向右合并单元格",
+  mergeCellsUp: "向上合并单元格",
+  mergeCellsDown: "向下合并单元格",
   deleteTable: "删除表格",
   selectLanguages: "选择语言",
   autoRecognize: "自动识别",
@@ -25273,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
@@ -25470,7 +26159,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             commonElementHandle(editor.value, el);
           },
           (el) => {
-            tableHandle(editor.value, el);
+            tableThTdHandle(editor.value, el);
+          },
+          (el) => {
+            tableFormatHandle(editor.value, el);
+          },
+          (el) => {
+            tableRangeMergedHandle(editor.value, el);
           },
           (el) => {
             var _a, _b, _c, _d, _e, _f, _g;
@@ -25521,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) || event2.pageX >= Math.abs(rect.left) && event2.pageX <= Math.abs(rect.left + 10)) {
+                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;
       }
     };
@@ -25547,63 +26251,99 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       if (props.disabled) {
         return;
       }
-      if (!tableColumnResizeParams.value.element) {
+      if (!resizeParams.value.element) {
         return;
       }
-      const tables = getMatchElementsByRange(editor.value, dataRangeCaches.value, { parsedom: "table" });
-      if (tables.length != 1) {
-        return;
+      const event2 = e;
+      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 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;
     };
     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 {
@@ -25637,6 +26377,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"];
             }
@@ -25670,8 +26413,23 @@ 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"];
+            }
+            if (["td", "th"].includes(el.parsedom) && el.marks["rowspan"]) {
+              marks["rowspan"] = el.marks["rowspan"];
+            }
+            if (["td", "th"].includes(el.parsedom) && el.marks["data-editify-merged"]) {
+              marks["data-editify-merged"] = el.marks["data-editify-merged"];
+            }
           }
           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"];
             }
@@ -25760,9 +26518,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) {
@@ -26061,7 +26819,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-fcc910d9"]]);
+const Editify = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-ee554bc1"]]);
 const InsertAttachmentProps = {
   //主题色
   color: {
@@ -41185,7 +41943,7 @@ const attachment = (options) => {
 const install = (app) => {
   app.component(Editify.name, Editify);
 };
-const version = "0.1.43";
+const version = "0.1.45";
 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,
@@ -41213,6 +41971,7 @@ export {
   insertCodeBlock,
   insertImage,
   insertLink,
+  insertSeparator,
   insertTable,
   insertVideo,
   install,