@hufe921/canvas-editor 0.9.42 → 0.9.44

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.42";
+const version = "0.9.44";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -244,6 +244,18 @@ function convertStringToBase64(input2) {
   const base64 = window.btoa(charArray.join(""));
   return base64;
 }
+function findScrollContainer(element) {
+  let parent = element.parentElement;
+  while (parent) {
+    const style = window.getComputedStyle(parent);
+    const overflowY = style.getPropertyValue("overflow-y");
+    if (parent.scrollHeight > parent.clientHeight && (overflowY === "auto" || overflowY === "scroll")) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return document.documentElement;
+}
 const CURSOR_AGENT_HEIGHT = 12;
 const defaultCursorOption = {
   width: 1,
@@ -253,6 +265,13 @@ const defaultCursorOption = {
 };
 const EDITOR_COMPONENT = "editor-component";
 const EDITOR_PREFIX = "ce";
+var MoveDirection;
+(function(MoveDirection2) {
+  MoveDirection2["UP"] = "top";
+  MoveDirection2["DOWN"] = "down";
+  MoveDirection2["LEFT"] = "left";
+  MoveDirection2["RIGHT"] = "right";
+})(MoveDirection || (MoveDirection = {}));
 var ElementType;
 (function(ElementType2) {
   ElementType2["TEXT"] = "text";
@@ -4076,6 +4095,32 @@ function convertElementToDom(element, options) {
   dom.innerText = element.value.replace(new RegExp(`${ZERO}`, "g"), "\n");
   return dom;
 }
+function splitListElement(elementList) {
+  let curListIndex = 0;
+  const listElementListMap = new Map();
+  for (let e = 0; e < elementList.length; e++) {
+    const element = elementList[e];
+    if (element.listWrap) {
+      const listElementList = listElementListMap.get(curListIndex) || [];
+      listElementList.push(element);
+      listElementListMap.set(curListIndex, listElementList);
+    } else {
+      const valueList = element.value.split("\n");
+      for (let c = 0; c < valueList.length; c++) {
+        if (c > 0) {
+          curListIndex += 1;
+        }
+        const value = valueList[c];
+        const listElementList = listElementListMap.get(curListIndex) || [];
+        listElementList.push(__spreadProps(__spreadValues({}, element), {
+          value
+        }));
+        listElementListMap.set(curListIndex, listElementList);
+      }
+    }
+  }
+  return listElementListMap;
+}
 function createDomFromElementList(elementList, options) {
   function buildDom(payload) {
     var _a, _b, _c, _d, _e;
@@ -4121,30 +4166,8 @@ function createDomFromElementList(elementList, options) {
         if (element.listStyle) {
           list.style.listStyleType = listStyleCSSMapping[element.listStyle];
         }
-        let curListIndex = 0;
-        const listElementListMap = new Map();
         const zipList = zipElementList(element.valueList);
-        for (let z = 0; z < zipList.length; z++) {
-          const zipElement = zipList[z];
-          if (zipElement.listWrap) {
-            const listElementList = listElementListMap.get(curListIndex) || [];
-            listElementList.push(zipElement);
-            listElementListMap.set(curListIndex, listElementList);
-          } else {
-            const zipValueList = zipElement.value.split("\n");
-            for (let c = 0; c < zipValueList.length; c++) {
-              if (c > 0) {
-                curListIndex += 1;
-              }
-              const value = zipValueList[c];
-              const listElementList = listElementListMap.get(curListIndex) || [];
-              listElementList.push(__spreadProps(__spreadValues({}, zipElement), {
-                value
-              }));
-              listElementListMap.set(curListIndex, listElementList);
-            }
-          }
-        }
+        const listElementListMap = splitListElement(zipList);
         listElementListMap.forEach((listElementList) => {
           const li = document.createElement("li");
           const childDom = buildDom(listElementList);
@@ -4387,6 +4410,58 @@ function getElementListByHTML(htmlText, options) {
   clipboardDom.remove();
   return elementList;
 }
+function getTextFromElementList(elementList) {
+  function buildText(payload) {
+    var _a, _b, _c, _d;
+    let text = "";
+    for (let e = 0; e < payload.length; e++) {
+      const element = payload[e];
+      if (element.type === ElementType.TABLE) {
+        text += `
+`;
+        const trList = element.trList;
+        for (let t = 0; t < trList.length; t++) {
+          const tr = trList[t];
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d];
+            const tdText = buildText(zipElementList(td.value));
+            const isFirst = d === 0;
+            const isLast = tr.tdList.length - 1 === d;
+            text += `${!isFirst ? `  ` : ``}${tdText}${isLast ? `
+` : ``}`;
+          }
+        }
+      } else if (element.type === ElementType.HYPERLINK) {
+        text += element.valueList.map((v) => v.value).join("");
+      } else if (element.type === ElementType.TITLE) {
+        text += `${buildText(zipElementList(element.valueList))}`;
+      } else if (element.type === ElementType.LIST) {
+        const zipList = zipElementList(element.valueList);
+        const listElementListMap = splitListElement(zipList);
+        listElementListMap.forEach((listElementList, listIndex) => {
+          const isLast = listElementListMap.size - 1 === listIndex;
+          text += `
+${listIndex + 1}.${buildText(listElementList)}${isLast ? `
+` : ``}`;
+        });
+      } else if (element.type === ElementType.CHECKBOX) {
+        text += ((_a = element.checkbox) == null ? void 0 : _a.value) ? `\u2611` : `\u25A1`;
+      } else if (!element.type || element.type === ElementType.LATEX || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
+        let textLike = "";
+        if (element.type === ElementType.CONTROL) {
+          textLike = ((_c = (_b = element.control.value) == null ? void 0 : _b[0]) == null ? void 0 : _c.value) || "";
+        } else if (element.type === ElementType.DATE) {
+          textLike = ((_d = element.valueList) == null ? void 0 : _d.map((v) => v.value).join("")) || "";
+        } else {
+          textLike = element.value;
+        }
+        text += textLike.replace(new RegExp(`${ZERO}`, "g"), "\n");
+      }
+    }
+    return text;
+  }
+  return buildText(zipElementList(elementList));
+}
 class CursorAgent {
   constructor(draw, canvasEvent) {
     __publicField(this, "draw");
@@ -4619,6 +4694,40 @@ class Cursor {
     this.cursorDom.style.display = "none";
     this._clearBlinkTimeout();
   }
+  moveCursorToVisible(payload) {
+    const { cursorPosition, direction } = payload;
+    if (!cursorPosition || !direction)
+      return;
+    const { pageNo, coordinate: { leftTop, leftBottom } } = cursorPosition;
+    const prePageY = pageNo * (this.draw.getHeight() + this.draw.getPageGap()) + this.container.getBoundingClientRect().top;
+    const isUp = direction === MoveDirection.UP;
+    const x = leftBottom[0];
+    const y = isUp ? leftTop[1] + prePageY : leftBottom[1] + prePageY;
+    const scrollContainer = findScrollContainer(this.container);
+    const rect = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    };
+    if (scrollContainer === document.documentElement) {
+      rect.right = window.innerWidth;
+      rect.bottom = window.innerHeight;
+    } else {
+      const { left, right, top, bottom } = scrollContainer.getBoundingClientRect();
+      rect.left = left;
+      rect.right = right;
+      rect.top = top;
+      rect.bottom = bottom;
+    }
+    const { maskMargin } = this.options;
+    rect.top += maskMargin[0];
+    rect.bottom -= maskMargin[2];
+    if (!(x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom)) {
+      const { scrollLeft, scrollTop } = scrollContainer;
+      isUp ? scrollContainer.scroll(scrollLeft, scrollTop - (rect.top - y)) : scrollContainer.scroll(scrollLeft, scrollTop + y - rect.bottom);
+    }
+  }
 }
 var MouseEventButton;
 (function(MouseEventButton2) {
@@ -4925,6 +5034,8 @@ function mouseup(evt, host) {
   var _a, _b, _c;
   if (host.isAllowDrop) {
     const draw = host.getDraw();
+    if (draw.isReadonly())
+      return;
     const position = draw.getPosition();
     const positionList = position.getPositionList();
     const rangeManager = draw.getRange();
@@ -5275,7 +5386,6 @@ function keydown(evt, host) {
     if (isReadonly)
       return;
     let anchorPosition = cursorPosition;
-    const isUp = evt.key === KeyMap.Up;
     if (evt.shiftKey) {
       if (startIndex === cursorPosition.index) {
         anchorPosition = positionList[endIndex];
@@ -5283,62 +5393,83 @@ function keydown(evt, host) {
         anchorPosition = positionList[startIndex];
       }
     }
-    const { rowNo, index: index22, pageNo, coordinate: { leftTop, rightTop } } = anchorPosition;
-    if (isUp && rowNo !== 0 || !isUp && rowNo !== draw.getRowCount()) {
-      const probablePosition = isUp ? positionList.slice(0, index22).filter((p) => p.rowNo === rowNo - 1 && pageNo === p.pageNo) : positionList.slice(index22, positionList.length - 1).filter((p) => p.rowNo === rowNo + 1 && pageNo === p.pageNo);
-      let maxIndex = 0;
-      let maxDistance = 0;
-      for (let p = 0; p < probablePosition.length; p++) {
-        const position2 = probablePosition[p];
-        if (position2.coordinate.leftTop[0] >= leftTop[0] && position2.coordinate.leftTop[0] <= rightTop[0]) {
-          const curDistance = rightTop[0] - position2.coordinate.leftTop[0];
-          if (curDistance > maxDistance) {
-            maxIndex = position2.index;
-            maxDistance = curDistance;
-            break;
-          }
-        } else if (position2.coordinate.leftTop[0] <= leftTop[0] && position2.coordinate.rightTop[0] >= leftTop[0]) {
-          const curDistance = position2.coordinate.rightTop[0] - leftTop[0];
-          if (curDistance > maxDistance) {
-            maxIndex = position2.index;
-            maxDistance = curDistance;
-            break;
-          }
+    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 (p === probablePosition.length - 1 && maxIndex === 0) {
-          maxIndex = position2.index;
+        probablePosition.unshift(position2);
+      }
+    } 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);
       }
-      const curIndex = maxIndex;
-      let anchorStartIndex = curIndex;
-      let anchorEndIndex = curIndex;
-      if (evt.shiftKey) {
-        if (startIndex !== endIndex) {
-          if (startIndex === cursorPosition.index) {
-            anchorStartIndex = startIndex;
-          } else {
-            anchorEndIndex = endIndex;
-          }
+    }
+    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;
+      }
+      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
-      });
     }
+    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
+    });
   } else if (isMod(evt) && evt.key === KeyMap.Z) {
     if (isReadonly)
       return;
@@ -6056,6 +6187,8 @@ var EditorMode;
   EditorMode2["EDIT"] = "edit";
   EditorMode2["CLEAN"] = "clean";
   EditorMode2["READONLY"] = "readonly";
+  EditorMode2["FORM"] = "form";
+  EditorMode2["PRINT"] = "print";
 })(EditorMode || (EditorMode = {}));
 var EditorZone;
 (function(EditorZone2) {
@@ -6419,11 +6552,10 @@ class Position {
     };
   }
   adjustPositionContext(payload) {
-    const isReadonly = this.draw.isReadonly();
     const positionResult = this.getPositionByXY(payload);
     if (!~positionResult.index)
       return null;
-    if (positionResult.isControl && !isReadonly) {
+    if (positionResult.isControl && this.draw.getMode() !== EditorMode.READONLY) {
       const { index: index22, isTable: isTable2, trIndex: trIndex2, tdIndex: tdIndex2, tdValueIndex } = positionResult;
       const control = this.draw.getControl();
       const { newIndex } = control.moveCursor({
@@ -6491,12 +6623,35 @@ class RangeManager {
     const elementList = this.draw.getElementList();
     return elementList.slice(startIndex + 1, endIndex + 1);
   }
+  getSelectionElementList() {
+    if (this.range.isCrossRowCol) {
+      const rowCol = this.draw.getTableParticle().getRangeRowCol();
+      if (!rowCol)
+        return null;
+      const elementList = [];
+      for (let r = 0; r < rowCol.length; r++) {
+        const row = rowCol[r];
+        for (let c = 0; c < row.length; c++) {
+          const col = row[c];
+          elementList.push(...col.value);
+        }
+      }
+      return elementList;
+    }
+    return this.getSelection();
+  }
   getTextLikeSelection() {
     const selection = this.getSelection();
     if (!selection)
       return null;
     return selection.filter((s) => !s.type || TEXTLIKE_ELEMENT_TYPE.includes(s.type));
   }
+  getTextLikeSelectionElementList() {
+    const selection = this.getSelectionElementList();
+    if (!selection)
+      return null;
+    return selection.filter((s) => !s.type || TEXTLIKE_ELEMENT_TYPE.includes(s.type));
+  }
   getRangeRow() {
     const { startIndex, endIndex } = this.range;
     if (!~startIndex && !~endIndex)
@@ -6516,6 +6671,30 @@ class RangeManager {
     }
     return rangeRow;
   }
+  getRangeRowElementList() {
+    const { startIndex, endIndex, isCrossRowCol } = this.range;
+    if (!~startIndex && !~endIndex)
+      return null;
+    if (isCrossRowCol) {
+      return this.getSelectionElementList();
+    }
+    const rangeRow = this.getRangeRow();
+    if (!rangeRow)
+      return null;
+    const positionList = this.position.getPositionList();
+    const elementList = this.draw.getElementList();
+    const rowElementList = [];
+    for (let p = 0; p < positionList.length; p++) {
+      const position = positionList[p];
+      const rowSet = rangeRow.get(position.pageNo);
+      if (!rowSet)
+        continue;
+      if (rowSet.has(position.rowNo)) {
+        rowElementList.push(elementList[p]);
+      }
+    }
+    return rowElementList;
+  }
   getRangeParagraph() {
     var _a, _b, _c;
     const { startIndex, endIndex } = this.range;
@@ -6810,7 +6989,7 @@ class RangeManager {
     ctx.restore();
   }
   toString() {
-    const selection = this.getSelection();
+    const selection = this.getTextLikeSelection();
     if (!selection)
       return "";
     return selection.map((s) => s.value).join("").replace(new RegExp(ZERO, "g"), "");
@@ -7409,13 +7588,6 @@ class ScrollObserver {
     };
   }
 }
-var MoveDirection;
-(function(MoveDirection2) {
-  MoveDirection2["UP"] = "top";
-  MoveDirection2["DOWN"] = "down";
-  MoveDirection2["LEFT"] = "left";
-  MoveDirection2["RIGHT"] = "right";
-})(MoveDirection || (MoveDirection = {}));
 class SelectionObserver {
   constructor(draw) {
     __publicField(this, "step", 5);
@@ -8661,6 +8833,17 @@ class Control {
   getDraw() {
     return this.draw;
   }
+  filterAssistElement(payload) {
+    const editorDataKeys = ["header", "main", "footer"];
+    editorDataKeys.forEach((key) => {
+      payload[key] = payload[key].filter((element) => {
+        if (element.type !== ElementType.CONTROL)
+          return true;
+        return element.controlComponent !== ControlComponent.PREFIX && element.controlComponent !== ControlComponent.POSTFIX && element.controlComponent !== ControlComponent.PLACEHOLDER;
+      });
+    });
+    return payload;
+  }
   isPartRangeInControlOutside() {
     const { startIndex, endIndex } = this.getRange();
     if (!~startIndex && !~endIndex)
@@ -8683,6 +8866,18 @@ class Control {
     const element = elementList[startIndex];
     return element.controlComponent === ControlComponent.POSTFIX;
   }
+  isRangeWithinControl() {
+    const { startIndex, endIndex } = this.getRange();
+    if (!~startIndex && !~endIndex)
+      return false;
+    const elementList = this.getElementList();
+    const startElement = elementList[startIndex];
+    const endElement = elementList[endIndex];
+    if ((startElement.type === ElementType.CONTROL || endElement.type === ElementType.CONTROL) && endElement.controlComponent !== ControlComponent.POSTFIX && startElement.controlId === endElement.controlId) {
+      return true;
+    }
+    return false;
+  }
   getContainer() {
     return this.draw.getContainer();
   }
@@ -10665,6 +10860,7 @@ class Draw {
     __publicField(this, "visiblePageNoList");
     __publicField(this, "intersectionPageNo");
     __publicField(this, "lazyRenderIntersectionObserver");
+    __publicField(this, "printModeData");
     this.container = this._wrapContainer(rootContainer);
     this.pageList = [];
     this.ctxList = [];
@@ -10726,6 +10922,7 @@ class Draw {
     this.visiblePageNoList = [];
     this.intersectionPageNo = 0;
     this.lazyRenderIntersectionObserver = null;
+    this.printModeData = null;
     this.render({
       isInit: true,
       isSetCursor: false
@@ -10735,10 +10932,36 @@ class Draw {
     return this.mode;
   }
   setMode(payload) {
+    if (this.mode === payload)
+      return;
+    if (payload === EditorMode.PRINT) {
+      this.printModeData = {
+        header: this.header.getElementList(),
+        main: this.elementList,
+        footer: this.footer.getElementList()
+      };
+      this.setEditorData(this.control.filterAssistElement(deepClone(this.printModeData)));
+    }
+    if (this.mode === EditorMode.PRINT && this.printModeData) {
+      this.setEditorData(this.printModeData);
+      this.printModeData = null;
+    }
     this.mode = payload;
+    this.render({
+      isSetCursor: false,
+      isSubmitHistory: false
+    });
   }
   isReadonly() {
-    return this.mode === EditorMode.READONLY;
+    switch (this.mode) {
+      case EditorMode.READONLY:
+      case EditorMode.PRINT:
+        return true;
+      case EditorMode.FORM:
+        return !this.control.isRangeWithinControl();
+      default:
+        return false;
+    }
   }
   getOriginalWidth() {
     const { paperDirection, width, height } = this.options;
@@ -11057,10 +11280,16 @@ class Draw {
   getRowCount() {
     return this.rowList.length;
   }
-  async getDataURL(pixelRatio) {
+  async getDataURL(payload = {}) {
+    const { pixelRatio, mode } = payload;
     if (pixelRatio) {
       this.setPagePixelRatio(pixelRatio);
     }
+    const currentMode = this.mode;
+    const isSwitchMode = !!mode && currentMode !== mode;
+    if (isSwitchMode) {
+      this.setMode(mode);
+    }
     this.render({
       isLazy: false,
       isCompute: false,
@@ -11072,6 +11301,9 @@ class Draw {
     if (pixelRatio) {
       this.setPagePixelRatio(null);
     }
+    if (isSwitchMode) {
+      this.setMode(currentMode);
+    }
     return dataUrlList;
   }
   getPainterStyle() {
@@ -11244,28 +11476,35 @@ class Draw {
     const { header, main, footer } = payload;
     if (!header && !main && !footer)
       return;
-    if (header) {
-      formatElementList(header, {
+    const pageComponentData = [header, main, footer];
+    pageComponentData.forEach((data2) => {
+      if (!data2)
+        return;
+      formatElementList(data2, {
         editorOptions: this.options
       });
+    });
+    this.setEditorData({
+      header,
+      main,
+      footer
+    });
+    this.historyManager.recovery();
+    this.render({
+      isSetCursor: false
+    });
+  }
+  setEditorData(payload) {
+    const { header, main, footer } = payload;
+    if (header) {
       this.header.setElementList(header);
     }
     if (main) {
-      formatElementList(main, {
-        editorOptions: this.options
-      });
       this.elementList = main;
     }
     if (footer) {
-      formatElementList(footer, {
-        editorOptions: this.options
-      });
       this.footer.setElementList(footer);
     }
-    this.historyManager.recovery();
-    this.render({
-      isSetCursor: false
-    });
   }
   _wrapContainer(rootContainer) {
     const container = document.createElement("div");
@@ -11647,6 +11886,7 @@ class Draw {
   }
   drawRow(ctx, payload) {
     const { rowList, pageNo, elementList, positionList, startIndex, zone } = payload;
+    const isPrintMode = this.mode === EditorMode.PRINT;
     const { scale, tdPadding } = this.options;
     const { isCrossRowCol, tableId } = this.range.getRange();
     let index2 = startIndex;
@@ -11700,7 +11940,7 @@ class Draw {
         } else if (element.type === ElementType.SEPARATOR) {
           this.separatorParticle.render(ctx, element, x, y);
         } else if (element.type === ElementType.PAGE_BREAK) {
-          if (this.mode !== EditorMode.CLEAN) {
+          if (this.mode !== EditorMode.CLEAN && !isPrintMode) {
             this.pageBreakParticle.render(ctx, element, x, y);
           }
         } else if (element.type === ElementType.CHECKBOX || element.controlComponent === ControlComponent.CHECKBOX) {
@@ -11777,13 +12017,15 @@ class Draw {
         this.listParticle.drawListStyle(ctx, curRow, positionList[curRow.startIndex]);
       }
       this._drawRichText(ctx);
-      if (rangeRecord.width && rangeRecord.height) {
-        const { x, y, width, height } = rangeRecord;
-        this.range.render(ctx, x, y, width, height);
-      }
-      if (isCrossRowCol && tableRangeElement && tableRangeElement.id === tableId) {
-        const { coordinate: { leftTop: [x, y] } } = positionList[curRow.startIndex];
-        this.tableParticle.drawRange(ctx, tableRangeElement, x, y);
+      if (!isPrintMode) {
+        if (rangeRecord.width && rangeRecord.height) {
+          const { x, y, width, height } = rangeRecord;
+          this.range.render(ctx, x, y, width, height);
+        }
+        if (isCrossRowCol && tableRangeElement && tableRangeElement.id === tableId) {
+          const { coordinate: { leftTop: [x, y] } } = positionList[curRow.startIndex];
+          this.tableParticle.drawRange(ctx, tableRangeElement, x, y);
+        }
       }
     }
   }
@@ -12023,6 +12265,7 @@ class Command {
     __publicField(this, "executeTableTdVerticalAlign");
     __publicField(this, "executeTableBorderType");
     __publicField(this, "executeTableTdBackgroundColor");
+    __publicField(this, "executeTableSelectAll");
     __publicField(this, "executeImage");
     __publicField(this, "executeHyperlink");
     __publicField(this, "executeDeleteHyperlink");
@@ -12059,6 +12302,7 @@ class Command {
     __publicField(this, "getImage");
     __publicField(this, "getValue");
     __publicField(this, "getHTML");
+    __publicField(this, "getText");
     __publicField(this, "getWordCount");
     __publicField(this, "getRangeText");
     __publicField(this, "getRangeContext");
@@ -12105,6 +12349,7 @@ class Command {
     this.executeTableTdVerticalAlign = adapt.tableTdVerticalAlign.bind(adapt);
     this.executeTableBorderType = adapt.tableBorderType.bind(adapt);
     this.executeTableTdBackgroundColor = adapt.tableTdBackgroundColor.bind(adapt);
+    this.executeTableSelectAll = adapt.tableSelectAll.bind(adapt);
     this.executeImage = adapt.image.bind(adapt);
     this.executeHyperlink = adapt.hyperlink.bind(adapt);
     this.executeDeleteHyperlink = adapt.deleteHyperlink.bind(adapt);
@@ -12140,6 +12385,7 @@ class Command {
     this.getImage = adapt.getImage.bind(adapt);
     this.getValue = adapt.getValue.bind(adapt);
     this.getHTML = adapt.getHTML.bind(adapt);
+    this.getText = adapt.getText.bind(adapt);
     this.getWordCount = adapt.getWordCount.bind(adapt);
     this.getRangeText = adapt.getRangeText.bind(adapt);
     this.getRangeContext = adapt.getRangeContext.bind(adapt);
@@ -12228,14 +12474,7 @@ class CommandAdapt {
     this.i18n = draw.getI18n();
   }
   mode(payload) {
-    const mode = this.draw.getMode();
-    if (mode === payload)
-      return;
     this.draw.setMode(payload);
-    this.draw.render({
-      isSetCursor: false,
-      isSubmitHistory: false
-    });
   }
   cut() {
     const isReadonly = this.draw.isReadonly();
@@ -12327,7 +12566,7 @@ class CommandAdapt {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const selection = this.range.getSelection();
+    const selection = this.range.getSelectionElementList();
     if (!selection)
       return;
     selection.forEach((el) => {
@@ -12344,7 +12583,7 @@ class CommandAdapt {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const selection = this.range.getSelection();
+    const selection = this.range.getSelectionElementList();
     if (!selection)
       return;
     selection.forEach((el) => {
@@ -12359,7 +12598,7 @@ class CommandAdapt {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const selection = this.range.getTextLikeSelection();
+    const selection = this.range.getTextLikeSelectionElementList();
     if (!selection || !selection.length)
       return;
     let isExistUpdate = false;
@@ -12378,7 +12617,7 @@ class CommandAdapt {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const selection = this.range.getTextLikeSelection();
+    const selection = this.range.getTextLikeSelectionElementList();
     if (!selection || !selection.length)
       return;
     const { defaultSize, maxSize } = this.options;
@@ -12404,7 +12643,7 @@ class CommandAdapt {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const selection = this.range.getTextLikeSelection();
+    const selection = this.range.getTextLikeSelectionElementList();
     if (!selection || !selection.length)
       return;
     const { defaultSize, minSize } = this.options;
@@ -12430,7 +12669,7 @@ class CommandAdapt {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const selection = this.range.getSelection();
+    const selection = this.range.getSelectionElementList();
     if (!selection)
       return;
     const noBoldIndex = selection.findIndex((s) => !s.bold);
@@ -12443,7 +12682,7 @@ class CommandAdapt {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const selection = this.range.getSelection();
+    const selection = this.range.getSelectionElementList();
     if (!selection)
       return;
     const noItalicIndex = selection.findIndex((s) => !s.italic);
@@ -12456,7 +12695,7 @@ class CommandAdapt {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const selection = this.range.getSelection();
+    const selection = this.range.getSelectionElementList();
     if (!selection)
       return;
     const noUnderlineIndex = selection.findIndex((s) => !s.underline);
@@ -12469,7 +12708,7 @@ class CommandAdapt {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const selection = this.range.getSelection();
+    const selection = this.range.getSelectionElementList();
     if (!selection)
       return;
     const noStrikeoutIndex = selection.findIndex((s) => !s.strikeout);
@@ -12485,7 +12724,7 @@ class CommandAdapt {
     const activeControl = this.control.getActiveControl();
     if (activeControl)
       return;
-    const selection = this.range.getSelection();
+    const selection = this.range.getSelectionElementList();
     if (!selection)
       return;
     const superscriptIndex = selection.findIndex((s) => s.type === ElementType.SUPERSCRIPT);
@@ -12510,7 +12749,7 @@ class CommandAdapt {
     const activeControl = this.control.getActiveControl();
     if (activeControl)
       return;
-    const selection = this.range.getSelection();
+    const selection = this.range.getSelectionElementList();
     if (!selection)
       return;
     const subscriptIndex = selection.findIndex((s) => s.type === ElementType.SUBSCRIPT);
@@ -12532,7 +12771,7 @@ class CommandAdapt {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const selection = this.range.getSelection();
+    const selection = this.range.getSelectionElementList();
     if (!selection)
       return;
     selection.forEach((el) => {
@@ -12547,7 +12786,7 @@ class CommandAdapt {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const selection = this.range.getSelection();
+    const selection = this.range.getSelectionElementList();
     if (!selection)
       return;
     selection.forEach((el) => {
@@ -12630,20 +12869,12 @@ class CommandAdapt {
     const { startIndex, endIndex } = this.range.getRange();
     if (!~startIndex && !~endIndex)
       return;
-    const rangeRow = this.range.getRangeRow();
-    if (!rangeRow)
+    const rowElementList = this.range.getRangeRowElementList();
+    if (!rowElementList)
       return;
-    const positionList = this.position.getPositionList();
-    const elementList = this.draw.getElementList();
-    for (let p = 0; p < positionList.length; p++) {
-      const position = positionList[p];
-      const rowSet = rangeRow.get(position.pageNo);
-      if (!rowSet)
-        continue;
-      if (rowSet.has(position.rowNo)) {
-        elementList[p].rowFlex = payload;
-      }
-    }
+    rowElementList.forEach((element) => {
+      element.rowFlex = payload;
+    });
     const isSetCursor = startIndex === endIndex;
     const curIndex = isSetCursor ? endIndex : startIndex;
     this.draw.render({ curIndex, isSetCursor });
@@ -12655,20 +12886,12 @@ class CommandAdapt {
     const { startIndex, endIndex } = this.range.getRange();
     if (!~startIndex && !~endIndex)
       return;
-    const rangeRow = this.range.getRangeRow();
-    if (!rangeRow)
+    const rowElementList = this.range.getRangeRowElementList();
+    if (!rowElementList)
       return;
-    const positionList = this.position.getPositionList();
-    const elementList = this.draw.getElementList();
-    for (let p = 0; p < positionList.length; p++) {
-      const position = positionList[p];
-      const rowSet = rangeRow.get(position.pageNo);
-      if (!rowSet)
-        continue;
-      if (rowSet.has(position.rowNo)) {
-        elementList[p].rowMargin = payload;
-      }
-    }
+    rowElementList.forEach((element) => {
+      element.rowMargin = payload;
+    });
     const isSetCursor = startIndex === endIndex;
     const curIndex = isSetCursor ? endIndex : startIndex;
     this.draw.render({ curIndex, isSetCursor });
@@ -13255,21 +13478,22 @@ class CommandAdapt {
     this.tableTool.render();
   }
   tableTdVerticalAlign(payload) {
-    var _a, _b, _c;
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
-    const positionContext = this.position.getPositionContext();
-    if (!positionContext.isTable)
-      return;
-    const { index: index2, trIndex, tdIndex } = positionContext;
-    const originalElementList = this.draw.getOriginalElementList();
-    const element = originalElementList[index2];
-    const curTd = (_c = (_b = (_a = element == null ? void 0 : element.trList) == null ? void 0 : _a[trIndex]) == null ? void 0 : _b.tdList) == null ? void 0 : _c[tdIndex];
-    if (!curTd || curTd.verticalAlign === payload || !curTd.verticalAlign && payload === VerticalAlign.TOP) {
+    const rowCol = this.draw.getTableParticle().getRangeRowCol();
+    if (!rowCol)
       return;
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r];
+      for (let c = 0; c < row.length; c++) {
+        const td = row[c];
+        if (!td || td.verticalAlign === payload || !td.verticalAlign && payload === VerticalAlign.TOP) {
+          continue;
+        }
+        td.verticalAlign = payload;
+      }
     }
-    curTd.verticalAlign = payload;
     const { endIndex } = this.range.getRange();
     this.draw.render({
       curIndex: endIndex
@@ -13314,6 +13538,30 @@ class CommandAdapt {
       isCompute: false
     });
   }
+  tableSelectAll() {
+    const positionContext = this.position.getPositionContext();
+    const { index: index2, tableId, isTable } = positionContext;
+    if (!isTable || !tableId)
+      return;
+    const { startIndex, endIndex } = this.range.getRange();
+    const originalElementList = this.draw.getOriginalElementList();
+    const trList = originalElementList[index2].trList;
+    const endTrIndex = trList.length - 1;
+    const endTdIndex = trList[endTrIndex].tdList.length - 1;
+    this.range.replaceRange({
+      startIndex,
+      endIndex,
+      tableId,
+      startTdIndex: 0,
+      endTdIndex,
+      startTrIndex: 0,
+      endTrIndex
+    });
+    this.draw.render({
+      isCompute: false,
+      isSubmitHistory: false
+    });
+  }
   hyperlink(payload) {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
@@ -13671,7 +13919,10 @@ class CommandAdapt {
     }
     const width = this.draw.getOriginalWidth();
     const height = this.draw.getOriginalHeight();
-    const base64List = await this.draw.getDataURL(printPixelRatio);
+    const base64List = await this.draw.getDataURL({
+      pixelRatio: printPixelRatio,
+      mode: EditorMode.PRINT
+    });
     printImageBase64(base64List, width, height);
     if (scale !== 1) {
       this.draw.setPageScale(scale);
@@ -13706,8 +13957,8 @@ class CommandAdapt {
       isSetCursor: false
     });
   }
-  getImage(pixelRatio) {
-    return this.draw.getDataURL(pixelRatio);
+  getImage(payload) {
+    return this.draw.getDataURL(payload);
   }
   getValue(options) {
     return this.draw.getValue(options);
@@ -13723,6 +13974,16 @@ class CommandAdapt {
       footer: createDomFromElementList(footerElementList, options).innerHTML
     };
   }
+  getText() {
+    const headerElementList = this.draw.getHeaderElementList();
+    const mainElementList = this.draw.getOriginalMainElementList();
+    const footerElementList = this.draw.getFooterElementList();
+    return {
+      header: getTextFromElementList(headerElementList),
+      main: getTextFromElementList(mainElementList),
+      footer: getTextFromElementList(footerElementList)
+    };
+  }
   getWordCount() {
     return this.workerManager.getWordCount();
   }
@@ -14808,7 +15069,8 @@ class Editor {
       inactiveAlpha: 0.6,
       historyMaxRecordCount: 100,
       wordBreak: WordBreak.BREAK_WORD,
-      printPixelRatio: 3
+      printPixelRatio: 3,
+      maskMargin: [0, 0, 0, 0]
     }, options), {
       header: headerOptions,
       footer: footerOptions,