@hufe921/canvas-editor 0.9.68 → 0.9.70

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.68";
+const version = "0.9.70";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -4074,6 +4074,22 @@ function zipElementList(payload) {
       listElement.valueList = zipElementList(valueList);
       element = listElement;
     } else if (element.type === ElementType.TABLE) {
+      if (element.pagingId) {
+        let tableIndex = e + 1;
+        let combineCount = 0;
+        while (tableIndex < elementList.length) {
+          const nextElement = elementList[tableIndex];
+          if (nextElement.pagingId === element.pagingId) {
+            element.height += nextElement.height;
+            element.trList.push(...nextElement.trList);
+            tableIndex++;
+            combineCount++;
+          } else {
+            break;
+          }
+        }
+        e += combineCount;
+      }
       if (element.trList) {
         for (let t = 0; t < element.trList.length; t++) {
           const tr = element.trList[t];
@@ -4295,22 +4311,57 @@ function splitListElement(elementList) {
 }
 function createDomFromElementList(elementList, options) {
   function buildDom(payload) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const clipboardDom = document.createElement("div");
     for (let e = 0; e < payload.length; e++) {
       const element = payload[e];
       if (element.type === ElementType.TABLE) {
         const tableDom = document.createElement("table");
+        tableDom.setAttribute("cellSpacing", "0");
+        tableDom.setAttribute("cellpadding", "0");
+        tableDom.setAttribute("border", "0");
+        const borderStyle = "1px solid #000000";
+        if (!element.borderType || element.borderType === TableBorder.ALL) {
+          tableDom.style.borderTop = borderStyle;
+          tableDom.style.borderLeft = borderStyle;
+        } else if (element.borderType === TableBorder.EXTERNAL) {
+          tableDom.style.border = borderStyle;
+        }
+        tableDom.style.width = `${element.width}px`;
+        const colgroupDom = document.createElement("colgroup");
+        for (let c = 0; c < element.colgroup.length; c++) {
+          const colgroup = element.colgroup[c];
+          const colDom = document.createElement("col");
+          colDom.setAttribute("width", `${colgroup.width}`);
+          colgroupDom.append(colDom);
+        }
+        tableDom.append(colgroupDom);
         const trList = element.trList;
         for (let t = 0; t < trList.length; t++) {
           const trDom = document.createElement("tr");
           const tr = trList[t];
+          trDom.style.height = `${tr.height}px`;
           for (let d = 0; d < tr.tdList.length; d++) {
             const tdDom = document.createElement("td");
-            tdDom.style.border = "1px solid";
+            if (!element.borderType || element.borderType === TableBorder.ALL) {
+              tdDom.style.borderBottom = tdDom.style.borderRight = "1px solid";
+            }
             const td = tr.tdList[d];
             tdDom.colSpan = td.colspan;
             tdDom.rowSpan = td.rowspan;
+            tdDom.style.verticalAlign = td.verticalAlign || "top";
+            if ((_a = td.borderTypes) == null ? void 0 : _a.includes(TdBorder.TOP)) {
+              tdDom.style.borderTop = borderStyle;
+            }
+            if ((_b = td.borderTypes) == null ? void 0 : _b.includes(TdBorder.RIGHT)) {
+              tdDom.style.borderRight = borderStyle;
+            }
+            if ((_c = td.borderTypes) == null ? void 0 : _c.includes(TdBorder.BOTTOM)) {
+              tdDom.style.borderBottom = borderStyle;
+            }
+            if ((_d = td.borderTypes) == null ? void 0 : _d.includes(TdBorder.LEFT)) {
+              tdDom.style.borderLeft = borderStyle;
+            }
             const childDom = buildDom(zipElementList(td.value));
             tdDom.innerHTML = childDom.innerHTML;
             if (td.backgroundColor) {
@@ -4361,30 +4412,30 @@ function createDomFromElementList(elementList, options) {
       } else if (element.type === ElementType.CHECKBOX) {
         const checkbox = document.createElement("input");
         checkbox.type = "checkbox";
-        if ((_a = element.checkbox) == null ? void 0 : _a.value) {
+        if ((_e = element.checkbox) == null ? void 0 : _e.value) {
           checkbox.setAttribute("checked", "true");
         }
         clipboardDom.append(checkbox);
       } else if (element.type === ElementType.TAB) {
-        const tab = document.createElement("span");
-        tab.innerHTML = `${NON_BREAKING_SPACE}${NON_BREAKING_SPACE}`;
-        clipboardDom.append(tab);
+        const tab2 = document.createElement("span");
+        tab2.innerHTML = `${NON_BREAKING_SPACE}${NON_BREAKING_SPACE}`;
+        clipboardDom.append(tab2);
       } else if (element.type === ElementType.CONTROL) {
         const controlElement = document.createElement("span");
-        const childDom = buildDom(zipElementList(((_b = element.control) == null ? void 0 : _b.value) || []));
+        const childDom = buildDom(zipElementList(((_f = element.control) == null ? void 0 : _f.value) || []));
         controlElement.innerHTML = childDom.innerHTML;
         clipboardDom.append(controlElement);
       } else if (!element.type || element.type === ElementType.LATEX || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
         let text = "";
         if (element.type === ElementType.DATE) {
-          text = ((_c = element.valueList) == null ? void 0 : _c.map((v) => v.value).join("")) || "";
+          text = ((_g = element.valueList) == null ? void 0 : _g.map((v) => v.value).join("")) || "";
         } else {
           text = element.value;
         }
         if (!text)
           continue;
         const dom = convertElementToDom(element, options);
-        if (((_d = payload[e - 1]) == null ? void 0 : _d.type) === ElementType.TITLE) {
+        if (((_h = payload[e - 1]) == null ? void 0 : _h.type) === ElementType.TITLE) {
           text = text.replace(/^\n/, "");
         }
         if (dom.tagName === "P") {
@@ -4684,6 +4735,9 @@ function writeClipboardItem(text, html, elementList) {
     document.body.append(fakeElement);
     const selection = window.getSelection();
     const range = document.createRange();
+    const br = document.createElement("span");
+    br.innerText = "\n";
+    fakeElement.append(br);
     range.selectNodeContents(fakeElement);
     selection == null ? void 0 : selection.removeAllRanges();
     selection == null ? void 0 : selection.addRange(range);
@@ -5057,9 +5111,9 @@ class Cursor {
       rect.right = window.innerWidth;
       rect.bottom = window.innerHeight;
     } else {
-      const { left, right, top, bottom } = scrollContainer.getBoundingClientRect();
-      rect.left = left;
-      rect.right = right;
+      const { left: left2, right: right2, top, bottom } = scrollContainer.getBoundingClientRect();
+      rect.left = left2;
+      rect.right = right2;
       rect.top = top;
       rect.bottom = bottom;
     }
@@ -5688,6 +5742,99 @@ var WordBreak;
   WordBreak2["BREAK_ALL"] = "break-all";
   WordBreak2["BREAK_WORD"] = "break-word";
 })(WordBreak || (WordBreak = {}));
+function backspace(evt, host) {
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const control = draw.getControl();
+  const activeControl = control.getActiveControl();
+  if (control.isPartRangeInControlOutside())
+    return;
+  const rangeManager = draw.getRange();
+  let curIndex;
+  if (activeControl) {
+    curIndex = control.keydown(evt);
+  } else {
+    const position = draw.getPosition();
+    const cursorPosition = position.getCursorPosition();
+    if (!cursorPosition)
+      return;
+    const { index: index2 } = cursorPosition;
+    const { startIndex, endIndex } = rangeManager.getRange();
+    const isCollapsed = rangeManager.getIsCollapsed();
+    const elementList = draw.getElementList();
+    if (isCollapsed && index2 === 0) {
+      const firstElement = elementList[index2];
+      if (firstElement.value === ZERO) {
+        if (firstElement.listId) {
+          draw.getListParticle().unsetList();
+        }
+        evt.preventDefault();
+        return;
+      }
+    }
+    const startElement = elementList[startIndex];
+    if (isCollapsed && startElement.rowFlex && startElement.value === ZERO) {
+      const rowList = draw.getRowList();
+      const positionList = position.getPositionList();
+      const rowNo = positionList[startIndex].rowNo;
+      const rowFlexElementList = rowList[rowNo].elementList;
+      rowFlexElementList.forEach((element) => {
+        delete element.rowFlex;
+      });
+    }
+    if (!isCollapsed) {
+      draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+    } else {
+      draw.spliceElementList(elementList, index2, 1);
+    }
+    curIndex = isCollapsed ? index2 - 1 : startIndex;
+  }
+  if (curIndex === null)
+    return;
+  draw.getGlobalEvent().setCanvasEventAbility();
+  rangeManager.setRange(curIndex, curIndex);
+  draw.render({ curIndex });
+}
+function del(evt, host) {
+  var _a;
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const control = draw.getControl();
+  const activeControl = control.getActiveControl();
+  if (control.isPartRangeInControlOutside())
+    return;
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  const elementList = draw.getElementList();
+  let curIndex;
+  if (activeControl) {
+    curIndex = control.keydown(evt);
+  } else if ((_a = elementList[endIndex + 1]) == null ? void 0 : _a.controlId) {
+    curIndex = control.removeControl(endIndex + 1);
+  } else {
+    const position = draw.getPosition();
+    const cursorPosition = position.getCursorPosition();
+    if (!cursorPosition)
+      return;
+    const { index: index2 } = cursorPosition;
+    const isCollapsed = rangeManager.getIsCollapsed();
+    if (!isCollapsed) {
+      draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+    } else {
+      draw.spliceElementList(elementList, index2 + 1, 1);
+    }
+    curIndex = isCollapsed ? index2 : startIndex;
+  }
+  if (curIndex === null)
+    return;
+  draw.getGlobalEvent().setCanvasEventAbility();
+  rangeManager.setRange(curIndex, curIndex);
+  draw.render({ curIndex });
+}
 function enter(evt, host) {
   var _a, _b;
   const draw = host.getDraw();
@@ -5747,277 +5894,408 @@ function enter(evt, host) {
   }
   evt.preventDefault();
 }
-function keydown(evt, host) {
-  var _a, _b, _c;
-  if (host.isComposing)
-    return;
+function left(evt, host) {
+  var _a;
   const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
   const position = draw.getPosition();
   const cursorPosition = position.getCursorPosition();
   if (!cursorPosition)
     return;
-  const isReadonly = draw.isReadonly();
-  const historyManager = draw.getHistoryManager();
-  const elementList = draw.getElementList();
-  const positionList = position.getPositionList();
+  const positionContext = position.getPositionContext();
   const { index: index2 } = cursorPosition;
+  if (index2 <= 0 && !positionContext.isTable)
+    return;
   const rangeManager = draw.getRange();
   const { startIndex, endIndex } = rangeManager.getRange();
-  const isCollapsed = startIndex === endIndex;
-  const control = draw.getControl();
-  const activeControl = control.getActiveControl();
-  if (evt.key === KeyMap.Backspace) {
-    if (isReadonly || control.isPartRangeInControlOutside())
-      return;
-    let curIndex;
-    if (activeControl) {
-      curIndex = control.keydown(evt);
-    } else {
-      if (isCollapsed && elementList[index2].value === ZERO && index2 === 0) {
-        evt.preventDefault();
-        return;
-      }
-      const startElement = elementList[startIndex];
-      if (isCollapsed && startElement.rowFlex && startElement.value === ZERO) {
-        const rowList = draw.getRowList();
-        const rowNo = positionList[startIndex].rowNo;
-        const rowFlexElementList = rowList[rowNo].elementList;
-        rowFlexElementList.forEach((element) => {
-          delete element.rowFlex;
-        });
-      }
-      if (!isCollapsed) {
-        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
-      } else {
-        draw.spliceElementList(elementList, index2, 1);
+  const isCollapsed = rangeManager.getIsCollapsed();
+  const elementList = draw.getElementList();
+  let moveCount = 1;
+  if (isMod(evt)) {
+    const LETTER_REG = draw.getLetterReg();
+    const moveStartIndex = evt.shiftKey && !isCollapsed && startIndex === (cursorPosition == null ? void 0 : cursorPosition.index) ? endIndex : startIndex;
+    if (LETTER_REG.test((_a = elementList[moveStartIndex]) == null ? void 0 : _a.value)) {
+      let i = moveStartIndex - 1;
+      while (i > 0) {
+        const element = elementList[i];
+        if (!LETTER_REG.test(element.value)) {
+          break;
+        }
+        moveCount++;
+        i--;
       }
-      curIndex = isCollapsed ? index2 - 1 : startIndex;
     }
-    if (curIndex === null)
-      return;
-    draw.getGlobalEvent().setCanvasEventAbility();
-    rangeManager.setRange(curIndex, curIndex);
-    draw.render({ curIndex });
-  } else if (evt.key === KeyMap.Delete) {
-    if (isReadonly || control.isPartRangeInControlOutside())
-      return;
-    let curIndex;
-    if (activeControl) {
-      curIndex = control.keydown(evt);
-    } else if ((_a = elementList[endIndex + 1]) == null ? void 0 : _a.controlId) {
-      curIndex = control.removeControl(endIndex + 1);
-    } else {
-      if (!isCollapsed) {
-        draw.spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
+  }
+  const curIndex = startIndex - moveCount;
+  let anchorStartIndex = curIndex;
+  let anchorEndIndex = curIndex;
+  if (evt.shiftKey && cursorPosition) {
+    if (startIndex !== endIndex) {
+      if (startIndex === cursorPosition.index) {
+        anchorStartIndex = startIndex;
+        anchorEndIndex = endIndex - moveCount;
       } else {
-        draw.spliceElementList(elementList, index2 + 1, 1);
+        anchorStartIndex = curIndex;
+        anchorEndIndex = endIndex;
       }
-      curIndex = isCollapsed ? index2 : startIndex;
+    } else {
+      anchorEndIndex = endIndex;
     }
-    if (curIndex === null)
-      return;
-    draw.getGlobalEvent().setCanvasEventAbility();
-    rangeManager.setRange(curIndex, curIndex);
-    draw.render({ curIndex });
-  } else if (evt.key === KeyMap.Enter) {
-    enter(evt, host);
-  } else if (evt.key === KeyMap.Left) {
-    if (isReadonly)
-      return;
-    if (index2 > 0) {
-      const cursorPosition2 = position.getCursorPosition();
-      let moveCount = 1;
-      if (isMod(evt)) {
-        const LETTER_REG = draw.getLetterReg();
-        const moveStartIndex = evt.shiftKey && !isCollapsed && startIndex === (cursorPosition2 == null ? void 0 : cursorPosition2.index) ? endIndex : startIndex;
-        if (LETTER_REG.test((_b = elementList[moveStartIndex]) == null ? void 0 : _b.value)) {
-          let i = moveStartIndex - 1;
-          while (i > 0) {
-            const element = elementList[i];
-            if (!LETTER_REG.test(element.value)) {
-              break;
-            }
-            moveCount++;
-            i--;
-          }
-        }
-      }
-      const curIndex = startIndex - moveCount;
-      let anchorStartIndex = curIndex;
-      let anchorEndIndex = curIndex;
-      if (evt.shiftKey && cursorPosition2) {
-        if (startIndex !== endIndex) {
-          if (startIndex === cursorPosition2.index) {
-            anchorStartIndex = startIndex;
-            anchorEndIndex = endIndex - moveCount;
-          } else {
-            anchorStartIndex = curIndex;
-            anchorEndIndex = endIndex;
-          }
-        } else {
-          anchorEndIndex = endIndex;
-        }
-      }
-      if (!~anchorStartIndex || !~anchorEndIndex)
-        return;
-      rangeManager.setRange(anchorStartIndex, anchorEndIndex);
-      const isAnchorCollapsed = anchorStartIndex === anchorEndIndex;
-      draw.render({
-        curIndex: isAnchorCollapsed ? anchorStartIndex : void 0,
-        isSetCursor: isAnchorCollapsed,
-        isSubmitHistory: false,
-        isCompute: false
+  }
+  if (!evt.shiftKey) {
+    const element = elementList[startIndex];
+    if (element.type === ElementType.TABLE) {
+      const trList = element.trList;
+      const lastTrIndex = trList.length - 1;
+      const lastTr = trList[lastTrIndex];
+      const lastTdIndex = lastTr.tdList.length - 1;
+      const lastTd = lastTr.tdList[lastTdIndex];
+      position.setPositionContext({
+        isTable: true,
+        index: startIndex,
+        trIndex: lastTrIndex,
+        tdIndex: lastTdIndex,
+        tdId: lastTd.id,
+        trId: lastTr.id,
+        tableId: element.id
       });
-      evt.preventDefault();
-    }
-  } else if (evt.key === KeyMap.Right) {
-    if (isReadonly)
-      return;
-    if (index2 < positionList.length) {
-      const cursorPosition2 = position.getCursorPosition();
-      let moveCount = 1;
-      if (isMod(evt)) {
-        const LETTER_REG = draw.getLetterReg();
-        const moveStartIndex = evt.shiftKey && !isCollapsed && startIndex === (cursorPosition2 == null ? void 0 : cursorPosition2.index) ? endIndex : startIndex;
-        if (LETTER_REG.test((_c = elementList[moveStartIndex + 1]) == null ? void 0 : _c.value)) {
-          let i = moveStartIndex + 2;
-          while (i < elementList.length) {
-            const element = elementList[i];
-            if (!LETTER_REG.test(element.value)) {
-              break;
+      anchorStartIndex = lastTd.value.length - 1;
+      anchorEndIndex = anchorStartIndex;
+      draw.getTableTool().render();
+    } else if (element.tableId) {
+      if (startIndex === 0) {
+        const originalElementList = draw.getOriginalElementList();
+        const trList = originalElementList[positionContext.index].trList;
+        for (let r = 0; r < trList.length; r++) {
+          const tr = trList[r];
+          if (tr.id !== element.trId)
+            continue;
+          const tdList = tr.tdList;
+          for (let d = 0; d < tdList.length; d++) {
+            const td = tdList[d];
+            if (td.id !== element.tdId)
+              continue;
+            if (r === 0 && d === 0) {
+              position.setPositionContext({
+                isTable: false
+              });
+              anchorStartIndex = positionContext.index - 1;
+              anchorEndIndex = anchorStartIndex;
+              draw.getTableTool().dispose();
+            } else {
+              let preTrIndex = r;
+              let preTdIndex = d - 1;
+              if (preTdIndex < 0) {
+                preTrIndex = r - 1;
+                preTdIndex = trList[preTrIndex].tdList.length - 1;
+              }
+              const preTr = trList[preTrIndex];
+              const preTd = preTr.tdList[preTdIndex];
+              position.setPositionContext({
+                isTable: true,
+                index: positionContext.index,
+                trIndex: preTrIndex,
+                tdIndex: preTdIndex,
+                tdId: preTr.id,
+                trId: preTd.id,
+                tableId: element.id
+              });
+              anchorStartIndex = preTd.value.length - 1;
+              anchorEndIndex = anchorStartIndex;
+              draw.getTableTool().render();
             }
-            moveCount++;
-            i++;
+            break;
           }
         }
       }
-      const curIndex = endIndex + moveCount;
-      let anchorStartIndex = curIndex;
-      let anchorEndIndex = curIndex;
-      if (evt.shiftKey && cursorPosition2) {
-        if (startIndex !== endIndex) {
-          if (startIndex === cursorPosition2.index) {
-            anchorStartIndex = startIndex;
-            anchorEndIndex = curIndex;
-          } else {
-            anchorStartIndex = startIndex + moveCount;
-            anchorEndIndex = endIndex;
-          }
-        } else {
-          anchorStartIndex = startIndex;
+    }
+  }
+  if (!~anchorStartIndex || !~anchorEndIndex)
+    return;
+  rangeManager.setRange(anchorStartIndex, anchorEndIndex);
+  const isAnchorCollapsed = anchorStartIndex === anchorEndIndex;
+  draw.render({
+    curIndex: isAnchorCollapsed ? anchorStartIndex : void 0,
+    isSetCursor: isAnchorCollapsed,
+    isSubmitHistory: false,
+    isCompute: false
+  });
+  evt.preventDefault();
+}
+function right(evt, host) {
+  var _a;
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!cursorPosition)
+    return;
+  const { index: index2 } = cursorPosition;
+  const positionList = position.getPositionList();
+  const positionContext = position.getPositionContext();
+  if (index2 > positionList.length - 1 && !positionContext.isTable)
+    return;
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  const isCollapsed = rangeManager.getIsCollapsed();
+  let elementList = draw.getElementList();
+  let moveCount = 1;
+  if (isMod(evt)) {
+    const LETTER_REG = draw.getLetterReg();
+    const moveStartIndex = evt.shiftKey && !isCollapsed && startIndex === (cursorPosition == null ? void 0 : cursorPosition.index) ? endIndex : startIndex;
+    if (LETTER_REG.test((_a = elementList[moveStartIndex + 1]) == null ? void 0 : _a.value)) {
+      let i = moveStartIndex + 2;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        if (!LETTER_REG.test(element.value)) {
+          break;
         }
+        moveCount++;
+        i++;
       }
-      const maxElementListIndex = elementList.length - 1;
-      if (anchorStartIndex > maxElementListIndex || anchorEndIndex > maxElementListIndex) {
-        return;
-      }
-      rangeManager.setRange(anchorStartIndex, anchorEndIndex);
-      const isAnchorCollapsed = anchorStartIndex === anchorEndIndex;
-      draw.render({
-        curIndex: isAnchorCollapsed ? anchorStartIndex : void 0,
-        isSetCursor: isAnchorCollapsed,
-        isSubmitHistory: false,
-        isCompute: false
-      });
-      evt.preventDefault();
     }
-  } else if (evt.key === KeyMap.Up || evt.key === KeyMap.Down) {
-    if (isReadonly)
-      return;
-    let anchorPosition = cursorPosition;
-    if (evt.shiftKey) {
+  }
+  const curIndex = endIndex + moveCount;
+  let anchorStartIndex = curIndex;
+  let anchorEndIndex = curIndex;
+  if (evt.shiftKey && cursorPosition) {
+    if (startIndex !== endIndex) {
       if (startIndex === cursorPosition.index) {
-        anchorPosition = positionList[endIndex];
+        anchorStartIndex = startIndex;
+        anchorEndIndex = curIndex;
       } else {
-        anchorPosition = positionList[startIndex];
+        anchorStartIndex = startIndex + moveCount;
+        anchorEndIndex = endIndex;
       }
+    } else {
+      anchorStartIndex = startIndex;
     }
-    const { index: index22, rowNo, rowIndex, coordinate: { leftTop: [curLeftX], rightTop: [curRightX] } } = anchorPosition;
-    const isUp = evt.key === KeyMap.Up;
-    if (isUp && rowIndex === 0 || !isUp && rowIndex === draw.getRowCount() - 1) {
-      return;
-    }
-    const probablePosition = [];
-    if (isUp) {
-      let p = index22 - 1;
-      while (p > 0) {
-        const position2 = positionList[p];
-        p--;
-        if (position2.rowNo === rowNo)
-          continue;
-        if (probablePosition[0] && probablePosition[0].rowNo !== position2.rowNo) {
-          break;
+  }
+  if (!evt.shiftKey) {
+    const element = elementList[endIndex];
+    const nextElement = elementList[endIndex + 1];
+    if ((nextElement == null ? void 0 : nextElement.type) === ElementType.TABLE) {
+      const trList = nextElement.trList;
+      const nextTr = trList[0];
+      const nextTd = nextTr.tdList[0];
+      position.setPositionContext({
+        isTable: true,
+        index: endIndex + 1,
+        trIndex: 0,
+        tdIndex: 0,
+        tdId: nextTd.id,
+        trId: nextTr.id,
+        tableId: nextElement.id
+      });
+      anchorStartIndex = 0;
+      anchorEndIndex = 0;
+      draw.getTableTool().render();
+    } else if (element.tableId) {
+      if (!nextElement) {
+        const originalElementList = draw.getOriginalElementList();
+        const trList = originalElementList[positionContext.index].trList;
+        for (let r = 0; r < trList.length; r++) {
+          const tr = trList[r];
+          if (tr.id !== element.trId)
+            continue;
+          const tdList = tr.tdList;
+          for (let d = 0; d < tdList.length; d++) {
+            const td = tdList[d];
+            if (td.id !== element.tdId)
+              continue;
+            if (r === trList.length - 1 && d === tdList.length - 1) {
+              position.setPositionContext({
+                isTable: false
+              });
+              anchorStartIndex = positionContext.index;
+              anchorEndIndex = anchorStartIndex;
+              elementList = draw.getElementList();
+              draw.getTableTool().dispose();
+            } else {
+              let nextTrIndex = r;
+              let nextTdIndex = d + 1;
+              if (nextTdIndex > tdList.length - 1) {
+                nextTrIndex = r + 1;
+                nextTdIndex = 0;
+              }
+              const preTr = trList[nextTrIndex];
+              const preTd = preTr.tdList[nextTdIndex];
+              position.setPositionContext({
+                isTable: true,
+                index: positionContext.index,
+                trIndex: nextTrIndex,
+                tdIndex: nextTdIndex,
+                tdId: preTr.id,
+                trId: preTd.id,
+                tableId: element.id
+              });
+              anchorStartIndex = 0;
+              anchorEndIndex = anchorStartIndex;
+              draw.getTableTool().render();
+            }
+            break;
+          }
         }
-        probablePosition.unshift(position2);
       }
+    }
+  }
+  const maxElementListIndex = elementList.length - 1;
+  if (anchorStartIndex > maxElementListIndex || anchorEndIndex > maxElementListIndex) {
+    return;
+  }
+  rangeManager.setRange(anchorStartIndex, anchorEndIndex);
+  const isAnchorCollapsed = anchorStartIndex === anchorEndIndex;
+  draw.render({
+    curIndex: isAnchorCollapsed ? anchorStartIndex : void 0,
+    isSetCursor: isAnchorCollapsed,
+    isSubmitHistory: false,
+    isCompute: false
+  });
+  evt.preventDefault();
+}
+function tab(evt, host) {
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const tabElement = {
+    type: ElementType.TAB,
+    value: ""
+  };
+  const rangeManager = draw.getRange();
+  const { startIndex } = rangeManager.getRange();
+  const elementList = draw.getElementList();
+  formatElementContext(elementList, [tabElement], startIndex);
+  draw.insertElementList([tabElement]);
+  evt.preventDefault();
+}
+function updown(evt, host) {
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!cursorPosition)
+    return;
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  const positionList = position.getPositionList();
+  let anchorPosition = cursorPosition;
+  if (evt.shiftKey) {
+    if (startIndex === cursorPosition.index) {
+      anchorPosition = positionList[endIndex];
     } else {
-      let p = index22 + 1;
-      while (p < positionList.length) {
-        const position2 = positionList[p];
-        p++;
-        if (position2.rowNo === rowNo)
-          continue;
-        if (probablePosition[0] && probablePosition[0].rowNo !== position2.rowNo) {
-          break;
-        }
-        probablePosition.push(position2);
-      }
+      anchorPosition = positionList[startIndex];
     }
-    let nextIndex = 0;
-    for (let p = 0; p < probablePosition.length; p++) {
-      const nextPosition = probablePosition[p];
-      const { coordinate: { leftTop: [nextLeftX], rightTop: [nextRightX] } } = nextPosition;
-      if (p === probablePosition.length - 1) {
-        nextIndex = nextPosition.index;
+  }
+  const { index: index2, rowNo, rowIndex, coordinate: { leftTop: [curLeftX], rightTop: [curRightX] } } = anchorPosition;
+  const isUp = evt.key === KeyMap.Up;
+  if (isUp && rowIndex === 0 || !isUp && rowIndex === draw.getRowCount() - 1) {
+    return;
+  }
+  const probablePosition = [];
+  if (isUp) {
+    let p = index2 - 1;
+    while (p > 0) {
+      const position2 = positionList[p];
+      p--;
+      if (position2.rowNo === rowNo)
+        continue;
+      if (probablePosition[0] && probablePosition[0].rowNo !== position2.rowNo) {
+        break;
       }
-      if (curRightX <= nextLeftX || curLeftX >= nextRightX)
+      probablePosition.unshift(position2);
+    }
+  } else {
+    let p = index2 + 1;
+    while (p < positionList.length) {
+      const position2 = positionList[p];
+      p++;
+      if (position2.rowNo === rowNo)
         continue;
+      if (probablePosition[0] && probablePosition[0].rowNo !== position2.rowNo) {
+        break;
+      }
+      probablePosition.push(position2);
+    }
+  }
+  let nextIndex = 0;
+  for (let p = 0; p < probablePosition.length; p++) {
+    const nextPosition = probablePosition[p];
+    const { coordinate: { leftTop: [nextLeftX], rightTop: [nextRightX] } } = nextPosition;
+    if (p === probablePosition.length - 1) {
       nextIndex = nextPosition.index;
-      break;
     }
-    if (!nextIndex)
-      return;
-    let anchorStartIndex = nextIndex;
-    let anchorEndIndex = nextIndex;
-    if (evt.shiftKey) {
-      if (startIndex !== endIndex) {
-        if (startIndex === cursorPosition.index) {
-          anchorStartIndex = startIndex;
-        } else {
-          anchorEndIndex = endIndex;
-        }
+    if (curRightX <= nextLeftX || curLeftX >= nextRightX)
+      continue;
+    nextIndex = nextPosition.index;
+    break;
+  }
+  if (!nextIndex)
+    return;
+  let anchorStartIndex = nextIndex;
+  let anchorEndIndex = nextIndex;
+  if (evt.shiftKey) {
+    if (startIndex !== endIndex) {
+      if (startIndex === cursorPosition.index) {
+        anchorStartIndex = startIndex;
       } else {
-        if (isUp) {
-          anchorEndIndex = endIndex;
-        } else {
-          anchorStartIndex = startIndex;
-        }
+        anchorEndIndex = endIndex;
+      }
+    } else {
+      if (isUp) {
+        anchorEndIndex = endIndex;
+      } else {
+        anchorStartIndex = startIndex;
       }
     }
-    if (anchorStartIndex > anchorEndIndex) {
-      [anchorStartIndex, anchorEndIndex] = [anchorEndIndex, anchorStartIndex];
-    }
-    rangeManager.setRange(anchorStartIndex, anchorEndIndex);
-    const isCollapsed2 = anchorStartIndex === anchorEndIndex;
-    draw.render({
-      curIndex: isCollapsed2 ? anchorStartIndex : void 0,
-      isSetCursor: isCollapsed2,
-      isSubmitHistory: false,
-      isCompute: false
-    });
-    draw.getCursor().moveCursorToVisible({
-      cursorPosition: positionList[isUp ? anchorStartIndex : anchorEndIndex],
-      direction: isUp ? MoveDirection.UP : MoveDirection.DOWN
-    });
+  }
+  if (anchorStartIndex > anchorEndIndex) {
+    [anchorStartIndex, anchorEndIndex] = [anchorEndIndex, anchorStartIndex];
+  }
+  rangeManager.setRange(anchorStartIndex, anchorEndIndex);
+  const isCollapsed = anchorStartIndex === anchorEndIndex;
+  draw.render({
+    curIndex: isCollapsed ? anchorStartIndex : void 0,
+    isSetCursor: isCollapsed,
+    isSubmitHistory: false,
+    isCompute: false
+  });
+  draw.getCursor().moveCursorToVisible({
+    cursorPosition: positionList[isUp ? anchorStartIndex : anchorEndIndex],
+    direction: isUp ? MoveDirection.UP : MoveDirection.DOWN
+  });
+}
+function keydown(evt, host) {
+  if (host.isComposing)
+    return;
+  const draw = host.getDraw();
+  if (evt.key === KeyMap.Backspace) {
+    backspace(evt, host);
+  } else if (evt.key === KeyMap.Delete) {
+    del(evt, host);
+  } else if (evt.key === KeyMap.Enter) {
+    enter(evt, host);
+  } else if (evt.key === KeyMap.Left) {
+    left(evt, host);
+  } else if (evt.key === KeyMap.Right) {
+    right(evt, host);
+  } else if (evt.key === KeyMap.Up || evt.key === KeyMap.Down) {
+    updown(evt, host);
   } else if (isMod(evt) && evt.key === KeyMap.Z) {
-    if (isReadonly && draw.getMode() !== EditorMode.FORM)
+    if (draw.isReadonly() && draw.getMode() !== EditorMode.FORM)
       return;
-    historyManager.undo();
+    draw.getHistoryManager().undo();
     evt.preventDefault();
   } else if (isMod(evt) && evt.key === KeyMap.Y) {
-    if (isReadonly && draw.getMode() !== EditorMode.FORM)
+    if (draw.isReadonly() && draw.getMode() !== EditorMode.FORM)
       return;
-    historyManager.redo();
+    draw.getHistoryManager().redo();
     evt.preventDefault();
   } else if (isMod(evt) && evt.key === KeyMap.C) {
     host.copy();
@@ -6029,7 +6307,7 @@ function keydown(evt, host) {
     host.selectAll();
     evt.preventDefault();
   } else if (isMod(evt) && evt.key === KeyMap.S) {
-    if (isReadonly)
+    if (draw.isReadonly())
       return;
     const listener = draw.getListener();
     if (listener.saved) {
@@ -6048,13 +6326,7 @@ function keydown(evt, host) {
     }
     evt.preventDefault();
   } else if (evt.key === KeyMap.TAB) {
-    const tabElement = {
-      type: ElementType.TAB,
-      value: ""
-    };
-    formatElementContext(elementList, [tabElement], startIndex);
-    draw.insertElementList([tabElement]);
-    evt.preventDefault();
+    tab(evt, host);
   }
 }
 function input(data2, host) {
@@ -6239,6 +6511,10 @@ function dblclick(host, evt) {
   if (draw.getIsPagingMode()) {
     if (!~positionContext.index && positionContext.zone) {
       draw.getZone().setZone(positionContext.zone);
+      draw.clearSideEffect();
+      position.setPositionContext({
+        isTable: false
+      });
       return;
     }
   }
@@ -6768,8 +7044,11 @@ class Position {
   setPositionList(payload) {
     this.positionList = payload;
   }
+  setFloatPositionList(payload) {
+    this.floatPositionList = payload;
+  }
   computePageRowPosition(payload) {
-    const { positionList, rowList, pageNo, startX, startY, startRowIndex, startIndex, innerWidth } = payload;
+    const { positionList, rowList, pageNo, startX, startY, startRowIndex, startIndex, innerWidth, zone: zone2 } = payload;
     const { scale, tdPadding } = this.options;
     let x = startX;
     let y = startY;
@@ -6816,6 +7095,12 @@ class Position {
             positionItem.metrics = prePosition.metrics;
             positionItem.coordinate = prePosition.coordinate;
           }
+          if (!element.imgFloatPosition) {
+            element.imgFloatPosition = {
+              x,
+              y
+            };
+          }
           this.floatPositionList.push({
             pageNo,
             element,
@@ -6824,7 +7109,8 @@ class Position {
             index: payload.index,
             tdIndex: payload.tdIndex,
             trIndex: payload.trIndex,
-            tdValueIndex: index2
+            tdValueIndex: index2,
+            zone: zone2
           });
         }
         positionList.push(positionItem);
@@ -6851,7 +7137,8 @@ class Position {
                 isTable: true,
                 index: index2 - 1,
                 tdIndex: d,
-                trIndex: t
+                trIndex: t,
+                zone: zone2
               });
               if (td.verticalAlign === VerticalAlign.MIDDLE || td.verticalAlign === VerticalAlign.BOTTOM) {
                 const rowsHeight = rowList2.reduce((pre, cur) => pre + cur.height, 0);
@@ -6883,7 +7170,6 @@ class Position {
   computePositionList() {
     var _a;
     this.positionList = [];
-    this.floatPositionList = [];
     const innerWidth = this.draw.getInnerWidth();
     const pageRowList = this.draw.getPageRowList();
     const margins = this.draw.getMargins();
@@ -6957,10 +7243,10 @@ class Position {
         return floatTopPosition;
     }
     for (let j = 0; j < positionList.length; j++) {
-      const { index: index2, pageNo, left, isFirstLetter, coordinate: { leftTop, rightTop, leftBottom } } = positionList[j];
+      const { index: index2, pageNo, left: left2, isFirstLetter, coordinate: { leftTop, rightTop, leftBottom } } = positionList[j];
       if (positionNo !== pageNo)
         continue;
-      if (leftTop[0] - left <= x && rightTop[0] >= x && leftTop[1] <= y && leftBottom[1] >= y) {
+      if (leftTop[0] - left2 <= x && rightTop[0] >= x && leftTop[1] <= y && leftBottom[1] >= y) {
         let curPositionIndex2 = j;
         const element = elementList[j];
         if (element.type === ElementType.TABLE) {
@@ -7121,9 +7407,10 @@ class Position {
   }
   getFloatPositionByXY(payload) {
     const { x, y } = payload;
+    const currentZone = this.draw.getZone().getZone();
     for (let f = 0; f < this.floatPositionList.length; f++) {
-      const { position, element, isTable, index: index2, trIndex, tdIndex, tdValueIndex } = this.floatPositionList[f];
-      if (element.type === ElementType.IMAGE && element.imgDisplay === payload.imgDisplay) {
+      const { position, element, isTable, index: index2, trIndex, tdIndex, tdValueIndex, zone: floatElementZone } = this.floatPositionList[f];
+      if (element.type === ElementType.IMAGE && element.imgDisplay === payload.imgDisplay && (!floatElementZone || floatElementZone === currentZone)) {
         const imgFloatPosition = element.imgFloatPosition;
         if (x >= imgFloatPosition.x && x <= imgFloatPosition.x + element.width && y >= imgFloatPosition.y && y <= imgFloatPosition.y + element.height) {
           if (isTable) {
@@ -9140,12 +9427,12 @@ class HyperlinkParticle {
     return { hyperlinkPopupContainer, hyperlinkDom };
   }
   drawHyperlinkPopup(element, position) {
-    const { coordinate: { leftTop: [left, top] }, lineHeight } = position;
+    const { coordinate: { leftTop: [left2, top] }, lineHeight } = position;
     const height = this.draw.getHeight();
     const pageGap = this.draw.getPageGap();
     const preY = this.draw.getPageNo() * (height + pageGap);
     this.hyperlinkPopupContainer.style.display = "block";
-    this.hyperlinkPopupContainer.style.left = `${left}px`;
+    this.hyperlinkPopupContainer.style.left = `${left2}px`;
     this.hyperlinkPopupContainer.style.top = `${top + preY + lineHeight}px`;
     const url = element.url || "#";
     this.hyperlinkDom.href = url;
@@ -9229,7 +9516,8 @@ class Header {
       startIndex: 0,
       startX,
       startY,
-      innerWidth
+      innerWidth,
+      zone: EditorZone.HEADER
     });
   }
   getHeaderTop() {
@@ -9691,9 +9979,9 @@ class SelectControl {
       ul.append(li);
     }
     selectPopupContainer.append(ul);
-    const { coordinate: { leftTop: [left, top] }, lineHeight } = position;
+    const { coordinate: { leftTop: [left2, top] }, lineHeight } = position;
     const preY = this.control.getPreY();
-    selectPopupContainer.style.left = `${left}px`;
+    selectPopupContainer.style.left = `${left2}px`;
     selectPopupContainer.style.top = `${top + preY + lineHeight}px`;
     const container = this.control.getContainer();
     container.append(selectPopupContainer);
@@ -10493,6 +10781,23 @@ class Control {
       isSetCursor: false
     });
   }
+  getList() {
+    const data2 = [
+      this.draw.getHeader().getElementList(),
+      this.draw.getOriginalMainElementList(),
+      this.draw.getFooter().getElementList()
+    ];
+    const controlElementList = [];
+    for (const elementList of data2) {
+      for (let e = 0; e < elementList.length; e++) {
+        const element = elementList[e];
+        if (element.controlId) {
+          controlElementList.push(element);
+        }
+      }
+    }
+    return zipElementList(controlElementList);
+  }
 }
 class CheckboxParticle {
   constructor(draw) {
@@ -10518,7 +10823,7 @@ class CheckboxParticle {
   render(ctx, element, x, y) {
     const { checkbox: { gap, lineWidth, fillStyle, fontStyle }, scale } = this.options;
     const { metrics, checkbox } = element;
-    const left = Math.round(x + gap * scale);
+    const left2 = Math.round(x + gap * scale);
     const top = Math.round(y - metrics.height + lineWidth);
     const width = metrics.width - gap * 2 * scale;
     const height = metrics.height;
@@ -10528,22 +10833,22 @@ class CheckboxParticle {
     if (checkbox == null ? void 0 : checkbox.value) {
       ctx.lineWidth = lineWidth;
       ctx.strokeStyle = fillStyle;
-      ctx.rect(left, top, width, height);
+      ctx.rect(left2, top, width, height);
       ctx.stroke();
       ctx.beginPath();
       ctx.fillStyle = fillStyle;
-      ctx.fillRect(left, top, width, height);
+      ctx.fillRect(left2, top, width, height);
       ctx.beginPath();
       ctx.strokeStyle = fontStyle;
       ctx.lineWidth = lineWidth * 2;
-      ctx.moveTo(left + 2 * scale, top + 7 * scale);
-      ctx.lineTo(left + 7 * scale, top + 11 * scale);
-      ctx.moveTo(left + 6.5 * scale, top + 11 * scale);
-      ctx.lineTo(left + 12 * scale, top + 3 * scale);
+      ctx.moveTo(left2 + 2 * scale, top + 7 * scale);
+      ctx.lineTo(left2 + 7 * scale, top + 11 * scale);
+      ctx.moveTo(left2 + 6.5 * scale, top + 11 * scale);
+      ctx.lineTo(left2 + 12 * scale, top + 3 * scale);
       ctx.stroke();
     } else {
       ctx.lineWidth = lineWidth;
-      ctx.rect(left, top, width, height);
+      ctx.rect(left2, top, width, height);
       ctx.stroke();
     }
     ctx.closePath();
@@ -10688,8 +10993,8 @@ class Previewer {
       x = element.imgFloatPosition.x;
       y = element.imgFloatPosition.y + preY;
     } else if (position) {
-      const { coordinate: { leftTop: [left, top] }, ascent } = position;
-      x = left;
+      const { coordinate: { leftTop: [left2, top] }, ascent } = position;
+      x = left2;
       y = top + preY + ascent;
     }
     return { x, y };
@@ -10952,9 +11257,9 @@ class Previewer {
     this.resizerSelection.style.width = `${width}px`;
     this.resizerSelection.style.height = `${height}px`;
     for (let i = 0; i < 8; i++) {
-      const left = i === 0 || i === 6 || i === 7 ? -handleSize : i === 1 || i === 5 ? width / 2 : width - handleSize;
+      const left2 = i === 0 || i === 6 || i === 7 ? -handleSize : i === 1 || i === 5 ? width / 2 : width - handleSize;
       const top = i === 0 || i === 1 || i === 2 ? -handleSize : i === 3 || i === 7 ? height / 2 - handleSize : height - handleSize;
-      this.resizerHandleList[i].style.left = `${left}px`;
+      this.resizerHandleList[i].style.left = `${left2}px`;
       this.resizerHandleList[i].style.top = `${top}px`;
     }
   }
@@ -11275,8 +11580,8 @@ class DatePicker {
   _setPosition() {
     if (!this.renderOptions)
       return;
-    const { position: { coordinate: { leftTop: [left, top] }, lineHeight }, startTop } = this.renderOptions;
-    this.dom.container.style.left = `${left}px`;
+    const { position: { coordinate: { leftTop: [left2, top] }, lineHeight }, startTop } = this.renderOptions;
+    this.dom.container.style.left = `${left2}px`;
     this.dom.container.style.top = `${top + (startTop || 0) + lineHeight}px`;
   }
   isInvalidDate(value) {
@@ -11620,15 +11925,6 @@ class DateParticle {
       startTop
     });
   }
-  render(ctx, element, x, y) {
-    ctx.save();
-    ctx.font = element.style;
-    if (element.color) {
-      ctx.fillStyle = element.color;
-    }
-    ctx.fillText(element.value, x, y);
-    ctx.restore();
-  }
 }
 var BlockType;
 (function(BlockType2) {
@@ -11992,10 +12288,10 @@ class ZoneTip {
       tipContent
     };
   }
-  _updateZoneTip(visible, left, top) {
+  _updateZoneTip(visible, left2, top) {
     if (visible) {
       this.tipContainer.classList.add("show");
-      this.tipContainer.style.left = `${left}px`;
+      this.tipContainer.style.left = `${left2}px`;
       this.tipContainer.style.top = `${top}px`;
       this.tipContent.innerText = this.i18n.t(`zone.${this.currentMoveZone === EditorZone.HEADER ? "headerTip" : "footerTip"}`);
     } else {
@@ -12188,7 +12484,8 @@ class Footer {
       startIndex: 0,
       startX,
       startY,
-      innerWidth
+      innerWidth,
+      zone: EditorZone.FOOTER
     });
   }
   getFooterBottom() {
@@ -13035,6 +13332,11 @@ class Draw {
       }
       this.spliceElementList(elementList, start, 0, ...payload);
       curIndex = startIndex + payload.length;
+      const preElement = elementList[start - 1];
+      if (payload[0].listId && preElement && !preElement.listId && (preElement == null ? void 0 : preElement.value) === ZERO && (!preElement.type || preElement.type === ElementType.TEXT)) {
+        elementList.splice(startIndex, 1);
+        curIndex -= 1;
+      }
     }
     if (~curIndex) {
       this.range.setRange(curIndex, curIndex);
@@ -13490,6 +13792,24 @@ class Draw {
       } else if (element.type === ElementType.TABLE) {
         const tdPaddingWidth = tdPadding[1] + tdPadding[3];
         const tdPaddingHeight = tdPadding[0] + tdPadding[2];
+        if (element.pagingId) {
+          let tableIndex = i + 1;
+          let combineCount = 0;
+          while (tableIndex < elementList.length) {
+            const nextElement2 = elementList[tableIndex];
+            if (nextElement2.pagingId === element.pagingId) {
+              element.trList.push(...nextElement2.trList);
+              element.height += nextElement2.height;
+              tableIndex++;
+              combineCount++;
+            } else {
+              break;
+            }
+          }
+          if (combineCount) {
+            elementList.splice(i + 1, combineCount);
+          }
+        }
         this.tableParticle.computeRowColInfo(element);
         const trList = element.trList;
         for (let t = 0; t < trList.length; t++) {
@@ -13567,6 +13887,9 @@ class Draw {
           }
         }
         const rowMarginHeight = rowMargin * 2 * scale;
+        if (curPagePreHeight + element.trList[0].height + rowMarginHeight > height2) {
+          curPagePreHeight = marginHeight;
+        }
         if (curPagePreHeight + rowMarginHeight + elementHeight > height2) {
           const trList2 = element.trList;
           let deleteStart = 0;
@@ -13591,17 +13914,39 @@ class Draw {
           if (deleteCount) {
             const cloneTrList = trList2.splice(deleteStart, deleteCount);
             const cloneTrHeight = cloneTrList.reduce((pre, cur) => pre + cur.height, 0);
+            const pagingId = element.pagingId || getUUID();
+            element.pagingId = pagingId;
             element.height -= cloneTrHeight;
             metrics.height -= cloneTrHeight;
             metrics.boundingBoxDescent -= cloneTrHeight;
             const cloneElement = deepClone(element);
+            cloneElement.pagingId = pagingId;
             cloneElement.trList = cloneTrList;
             cloneElement.id = getUUID();
             this.spliceElementList(elementList, i + 1, 0, cloneElement);
-            const positionContext = this.position.getPositionContext();
-            if (positionContext.isTable && positionContext.trIndex === deleteStart) {
-              positionContext.index += 1;
-              positionContext.trIndex = 0;
+          }
+        }
+        if (element.pagingId) {
+          const positionContext = this.position.getPositionContext();
+          if (positionContext.isTable) {
+            let newPositionContextIndex = -1;
+            let newPositionContextTrIndex = -1;
+            let tableIndex = i;
+            while (tableIndex < elementList.length) {
+              const curElement = elementList[tableIndex];
+              if (curElement.pagingId !== element.pagingId)
+                break;
+              const trIndex = curElement.trList.findIndex((r) => r.id === positionContext.trId);
+              if (~trIndex) {
+                newPositionContextIndex = tableIndex;
+                newPositionContextTrIndex = trIndex;
+                break;
+              }
+              tableIndex++;
+            }
+            if (~newPositionContextIndex) {
+              positionContext.index = newPositionContextIndex;
+              positionContext.trIndex = newPositionContextTrIndex;
               this.position.setPositionContext(positionContext);
             }
           }
@@ -13671,9 +14016,9 @@ class Draw {
           const extraWidth = rowElement.control.minWidth - controlRealWidth;
           if (extraWidth > 0) {
             const rowRemainingWidth = availableWidth - curRow.width - metrics.width;
-            const left = Math.min(rowRemainingWidth, extraWidth) * scale;
-            rowElement.left = left;
-            curRow.width += left;
+            const left2 = Math.min(rowRemainingWidth, extraWidth) * scale;
+            rowElement.left = left2;
+            curRow.width += left2;
           } else {
             rowElement.left = 0;
           }
@@ -13845,8 +14190,14 @@ class Draw {
           this._drawRichText(ctx);
           this.hyperlinkParticle.render(ctx, element, x, y + offsetY);
         } else if (element.type === ElementType.DATE) {
-          this._drawRichText(ctx);
-          this.dateParticle.render(ctx, element, x, y + offsetY);
+          const nextElement = curRow.elementList[j + 1];
+          if (!preElement || preElement.dateId !== element.dateId) {
+            this._drawRichText(ctx);
+          }
+          this.textParticle.record(ctx, element, x, y + offsetY);
+          if (!nextElement || nextElement.dateId !== element.dateId) {
+            this._drawRichText(ctx);
+          }
         } else if (element.type === ElementType.SUPERSCRIPT) {
           this._drawRichText(ctx);
           this.superscriptParticle.render(ctx, element, x, y + offsetY);
@@ -13973,7 +14324,7 @@ class Draw {
     for (let e = 0; e < floatPositionList.length; e++) {
       const floatPosition = floatPositionList[e];
       const element = floatPosition.element;
-      if (pageNo === floatPosition.pageNo && element.imgDisplay === imgDisplay && element.type === ElementType.IMAGE) {
+      if ((pageNo === floatPosition.pageNo || floatPosition.zone === EditorZone.HEADER || floatPosition.zone == EditorZone.FOOTER) && element.imgDisplay === imgDisplay && element.type === ElementType.IMAGE) {
         const imgFloatPosition = element.imgFloatPosition;
         this.imageParticle.render(ctx, element, imgFloatPosition.x, imgFloatPosition.y);
       }
@@ -14082,6 +14433,7 @@ class Draw {
     const innerWidth = this.getInnerWidth();
     const isPagingMode = this.getIsPagingMode();
     if (isCompute) {
+      this.position.setFloatPositionList([]);
       if (isPagingMode) {
         if (!header.disabled) {
           this.header.compute();
@@ -14302,6 +14654,7 @@ class Command {
     __publicField(this, "getLocale");
     __publicField(this, "getGroupIds");
     __publicField(this, "getControlValue");
+    __publicField(this, "getControlList");
     __publicField(this, "getContainer");
     this.executeMode = adapt.mode.bind(adapt);
     this.executeCut = adapt.cut.bind(adapt);
@@ -14410,6 +14763,7 @@ class Command {
     this.executeSetControlProperties = adapt.setControlProperties.bind(adapt);
     this.executeSetControlHighlight = adapt.setControlHighlight.bind(adapt);
     this.getControlValue = adapt.getControlValue.bind(adapt);
+    this.getControlList = adapt.getControlList.bind(adapt);
   }
 }
 const defaultWatermarkOption = {
@@ -14599,6 +14953,10 @@ class CommandAdapt {
     this.historyManager.redo();
   }
   painter(options) {
+    if (!options.isDblclick && this.draw.getPainterStyle()) {
+      this.canvasEvent.clearPainterStyle();
+      return;
+    }
     const selection = this.range.getSelection();
     if (!selection)
       return;
@@ -14934,7 +15292,11 @@ class CommandAdapt {
     const selection = this.range.getSelectionElementList();
     if (selection == null ? void 0 : selection.length) {
       selection.forEach((el) => {
-        el.color = payload;
+        if (payload) {
+          el.color = payload;
+        } else {
+          delete el.color;
+        }
       });
       this.draw.render({
         isSetCursor: false,
@@ -14945,7 +15307,11 @@ class CommandAdapt {
       const elementList = this.draw.getElementList();
       const enterElement = elementList[endIndex];
       if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
-        enterElement.color = payload;
+        if (payload) {
+          enterElement.color = payload;
+        } else {
+          delete enterElement.color;
+        }
         this.draw.render({ curIndex: endIndex, isCompute: false });
       }
     }
@@ -14957,7 +15323,11 @@ class CommandAdapt {
     const selection = this.range.getSelectionElementList();
     if (selection == null ? void 0 : selection.length) {
       selection.forEach((el) => {
-        el.highlight = payload;
+        if (payload) {
+          el.highlight = payload;
+        } else {
+          delete el.highlight;
+        }
       });
       this.draw.render({
         isSetCursor: false,
@@ -14968,7 +15338,11 @@ class CommandAdapt {
       const elementList = this.draw.getElementList();
       const enterElement = elementList[endIndex];
       if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
-        enterElement.highlight = payload;
+        if (payload) {
+          enterElement.highlight = payload;
+        } else {
+          delete enterElement.highlight;
+        }
         this.draw.render({ curIndex: endIndex, isCompute: false });
       }
     }
@@ -16523,6 +16897,9 @@ class CommandAdapt {
   setControlHighlight(payload) {
     this.draw.getControl().setHighlightList(payload);
   }
+  getControlList() {
+    return this.draw.getControl().getList();
+  }
   getContainer() {
     return this.draw.getContainer();
   }
@@ -17179,7 +17556,7 @@ class ContextMenu {
   }
   _render(payload) {
     var _a;
-    const { contextMenuList, left, top, parentMenuContainer } = payload;
+    const { contextMenuList, left: left2, top, parentMenuContainer } = payload;
     const contextMenuContainer = this._createContextMenuContainer();
     const contextMenuContent = document.createElement("div");
     contextMenuContent.classList.add(`${EDITOR_PREFIX}-contextmenu-content`);
@@ -17207,11 +17584,11 @@ class ContextMenu {
               this._setHoverStatus(menuItem, true);
               this._removeSubMenu(contextMenuContainer);
               const subMenuRect = menuItem.getBoundingClientRect();
-              const left2 = subMenuRect.left + subMenuRect.width;
+              const left22 = subMenuRect.left + subMenuRect.width;
               const top2 = subMenuRect.top;
               childMenuContainer = this._render({
                 contextMenuList: childMenus,
-                left: left2,
+                left: left22,
                 top: top2,
                 parentMenuContainer: contextMenuContainer
               });
@@ -17260,7 +17637,7 @@ class ContextMenu {
     const innerWidth = window.innerWidth;
     const contextmenuRect = contextMenuContainer.getBoundingClientRect();
     const contextMenuWidth = contextmenuRect.width;
-    const adjustLeft = left + contextMenuWidth > innerWidth ? left - contextMenuWidth : left;
+    const adjustLeft = left2 + contextMenuWidth > innerWidth ? left2 - contextMenuWidth : left2;
     contextMenuContainer.style.left = `${adjustLeft}px`;
     const innerHeight = window.innerHeight;
     const contextMenuHeight = contextmenuRect.height;