@hufe921/canvas-editor 0.9.76 → 0.9.78

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.76";
+const version = "0.9.78";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -509,6 +509,10 @@ const TEXTLIKE_ELEMENT_TYPE = [
   ElementType.CONTROL,
   ElementType.DATE
 ];
+const IMAGE_ELEMENT_TYPE = [
+  ElementType.IMAGE,
+  ElementType.LATEX
+];
 const INLINE_ELEMENT_TYPE = [
   ElementType.BLOCK,
   ElementType.PAGE_BREAK,
@@ -3812,12 +3816,13 @@ function formatElementList(elementList, options) {
       const tableId = getUUID();
       el.id = tableId;
       if (el.trList) {
+        const { defaultTrMinHeight } = editorOptions.table;
         for (let t = 0; t < el.trList.length; t++) {
           const tr = el.trList[t];
           const trId = getUUID();
           tr.id = trId;
-          if (!tr.minHeight || tr.minHeight < editorOptions.defaultTrMinHeight) {
-            tr.minHeight = editorOptions.defaultTrMinHeight;
+          if (!tr.minHeight || tr.minHeight < defaultTrMinHeight) {
+            tr.minHeight = defaultTrMinHeight;
           }
           if (tr.height < tr.minHeight) {
             tr.height = tr.minHeight;
@@ -4815,6 +4820,9 @@ function getSlimCloneElementList(elementList) {
     "style"
   ]);
 }
+function getIsInlineElement(element) {
+  return !!(element == null ? void 0 : element.type) && (INLINE_ELEMENT_TYPE.includes(element.type) || element.imgDisplay === ImageDisplay.INLINE);
+}
 function setClipboardData(data2) {
   localStorage.setItem(EDITOR_CLIPBOARD, JSON.stringify({
     text: data2.text,
@@ -5352,6 +5360,9 @@ class CheckboxControl {
     this.element = element;
     this.control = control;
   }
+  setElement(element) {
+    this.element = element;
+  }
   getElement() {
     return this.element;
   }
@@ -6354,11 +6365,11 @@ function tab(evt, host) {
 }
 function getNextPositionIndex(payload) {
   const { positionList, index: index2, isUp, rowNo, cursorX } = payload;
-  let nextIndex = 0;
+  let nextIndex = -1;
   const probablePosition = [];
   if (isUp) {
     let p = index2 - 1;
-    while (p > 0) {
+    while (p >= 0) {
       const position = positionList[p];
       p--;
       if (position.rowNo === rowNo)
@@ -6521,7 +6532,7 @@ function updown(evt, host) {
       isUp,
       cursorX: curRightX
     });
-    if (!nextIndex)
+    if (nextIndex < 0)
       return;
     anchorStartIndex = nextIndex;
     anchorEndIndex = nextIndex;
@@ -7288,11 +7299,15 @@ class GlobalEvent {
       }
     });
     __publicField(this, "_handleVisibilityChange", () => {
-      var _a;
-      if (document.visibilityState) {
-        const isCollapsed = this.range.getIsCollapsed();
-        (_a = this.cursor) == null ? void 0 : _a.drawCursor({
-          isShow: isCollapsed
+      if (document.visibilityState === "visible") {
+        const range = this.range.getRange();
+        const isSetCursor = !!~range.startIndex && !!~range.endIndex && range.startIndex === range.endIndex;
+        this.range.replaceRange(range);
+        this.draw.render({
+          isSetCursor,
+          isCompute: false,
+          isSubmitHistory: false,
+          curIndex: range.startIndex
         });
       }
     });
@@ -7392,6 +7407,9 @@ class HistoryManager {
     this.undoStack = [];
     this.redoStack = [];
   }
+  popUndo() {
+    return this.undoStack.pop();
+  }
 }
 class Position {
   constructor(draw) {
@@ -7454,7 +7472,7 @@ class Position {
   }
   computePageRowPosition(payload) {
     const { positionList, rowList, pageNo, startX, startY, startRowIndex, startIndex, innerWidth, zone: zone2 } = payload;
-    const { scale, tdPadding } = this.options;
+    const { scale, table: { tdPadding } } = this.options;
     let x = startX;
     let y = startY;
     let index2 = startIndex;
@@ -7876,12 +7894,14 @@ class Position {
         positionResult.index = newIndex;
       }
     }
-    const { index: index2, isCheckbox, isRadio, isControl, isTable, trIndex, tdIndex, tdId, trId, tableId } = positionResult;
+    const { index: index2, isCheckbox, isRadio, isControl, isImage, isDirectHit, isTable, trIndex, tdIndex, tdId, trId, tableId } = positionResult;
     this.setPositionContext({
       isTable: isTable || false,
       isCheckbox: isCheckbox || false,
       isRadio: isRadio || false,
       isControl: isControl || false,
+      isImage: isImage || false,
+      isDirectHit: isDirectHit || false,
       index: index2,
       trIndex,
       tdIndex,
@@ -9787,7 +9807,7 @@ class TableTool {
       if (order === TableOrder.ROW) {
         const trList = element.trList;
         const tr = trList[index2] || trList[index2 - 1];
-        const { defaultTrMinHeight } = this.options;
+        const { defaultTrMinHeight } = this.options.table;
         if (dy < 0 && tr.height + dy < defaultTrMinHeight) {
           dy = defaultTrMinHeight - tr.height;
         }
@@ -9809,23 +9829,25 @@ class TableTool {
             dx = nextColWidth - this.MIN_TD_WIDTH;
           }
           const moveColWidth = curColWidth + dx;
-          let moveTableWidth = 0;
-          for (let c = 0; c < colgroup.length; c++) {
-            const group2 = colgroup[c];
-            if (c === index2 + 1) {
-              moveTableWidth -= dx;
-            }
-            if (c === index2) {
-              moveTableWidth += moveColWidth;
+          if (index2 === colgroup.length - 1) {
+            let moveTableWidth = 0;
+            for (let c = 0; c < colgroup.length; c++) {
+              const group2 = colgroup[c];
+              if (c === index2 + 1) {
+                moveTableWidth -= dx;
+              }
+              if (c === index2) {
+                moveTableWidth += moveColWidth;
+              }
+              if (c !== index2) {
+                moveTableWidth += group2.width;
+              }
             }
-            if (c !== index2) {
-              moveTableWidth += group2.width;
+            if (moveTableWidth > innerWidth) {
+              const tableWidth = element.width;
+              dx = innerWidth - tableWidth;
             }
           }
-          if (moveTableWidth > innerWidth) {
-            const tableWidth = element.width;
-            dx = innerWidth - tableWidth;
-          }
           if (dx) {
             if (colgroup.length - 1 !== index2) {
               colgroup[index2 + 1].width -= dx / scale;
@@ -10300,9 +10322,15 @@ class SelectControl {
     this.isPopup = false;
     this.selectDom = null;
   }
+  setElement(element) {
+    this.element = element;
+  }
   getElement() {
     return this.element;
   }
+  getIsPopup() {
+    return this.isPopup;
+  }
   getCode() {
     var _a;
     return ((_a = this.element.control) == null ? void 0 : _a.code) || null;
@@ -10385,7 +10413,8 @@ class SelectControl {
     return this.clearSelect();
   }
   clearSelect(context = {}, options = {}) {
-    if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
+    const { isIgnoreDisabledRule = false, isAddPlaceholder = true } = options;
+    if (!isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
       return -1;
     }
     const elementList = context.elementList || this.control.getElementList();
@@ -10415,7 +10444,9 @@ class SelectControl {
       return -1;
     const draw = this.control.getDraw();
     draw.spliceElementList(elementList, leftIndex + 1, rightIndex - leftIndex);
-    this.control.addPlaceholder(preIndex, context);
+    if (isAddPlaceholder) {
+      this.control.addPlaceholder(preIndex, context);
+    }
     this.element.control.code = null;
     return preIndex;
   }
@@ -10423,21 +10454,35 @@ class SelectControl {
     if (!options.isIgnoreDisabledRule && this.control.getIsDisabledControl()) {
       return;
     }
+    const elementList = context.elementList || this.control.getElementList();
+    const range = context.range || this.control.getRange();
     const control = this.element.control;
+    const oldCode = control.code;
+    if (code === oldCode) {
+      this.control.repaintControl({
+        curIndex: range.startIndex,
+        isCompute: false,
+        isSubmitHistory: false
+      });
+      this.destroy();
+      return;
+    }
     const valueSets = control.valueSets;
     if (!Array.isArray(valueSets) || !valueSets.length)
       return;
     const valueSet = valueSets.find((v) => v.code === code);
     if (!valueSet)
       return;
-    const elementList = context.elementList || this.control.getElementList();
-    const range = context.range || this.control.getRange();
     const valueElement = this.getValue(context)[0];
     const styleElement = valueElement ? pickObject(valueElement, EDITOR_ELEMENT_STYLE_ATTR) : pickObject(elementList[range.startIndex], CONTROL_STYLE_ATTR);
-    const prefixIndex = this.clearSelect(context);
+    const prefixIndex = this.clearSelect(context, {
+      isAddPlaceholder: false
+    });
     if (!~prefixIndex)
       return;
-    this.control.removePlaceholder(prefixIndex, context);
+    if (!oldCode) {
+      this.control.removePlaceholder(prefixIndex, context);
+    }
     const propertyElement = omitObject(elementList[prefixIndex], EDITOR_ELEMENT_STYLE_ATTR);
     const start = prefixIndex + 1;
     const data2 = splitText(valueSet.value);
@@ -10451,10 +10496,12 @@ class SelectControl {
       formatElementContext(elementList, [newElement], prefixIndex);
       draw.spliceElementList(elementList, start + i, 0, newElement);
     }
-    this.element.control.code = code;
+    control.code = code;
     if (!context.range) {
       const newIndex = start + data2.length - 1;
-      this.control.repaintControl(newIndex);
+      this.control.repaintControl({
+        curIndex: newIndex
+      });
       this.destroy();
     }
   }
@@ -10519,6 +10566,9 @@ class TextControl {
     this.element = element;
     this.control = control;
   }
+  setElement(element) {
+    this.element = element;
+  }
   getElement() {
     return this.element;
   }
@@ -10869,19 +10919,36 @@ class Control {
       });
     }
   }
-  repaintControl(curIndex) {
+  repaintControl(options = {}) {
+    const { curIndex, isCompute = true, isSubmitHistory = true } = options;
     if (curIndex === void 0) {
       this.range.clearRange();
       this.draw.render({
+        isCompute,
+        isSubmitHistory,
         isSetCursor: false
       });
     } else {
       this.range.setRange(curIndex, curIndex);
       this.draw.render({
-        curIndex
+        curIndex,
+        isCompute,
+        isSubmitHistory
       });
     }
   }
+  reAwakeControl() {
+    if (!this.activeControl)
+      return;
+    const elementList = this.getElementList();
+    const range = this.getRange();
+    const element = elementList[range.startIndex];
+    this.activeControl.setElement(element);
+    if (this.activeControl instanceof SelectControl && this.activeControl.getIsPopup()) {
+      this.activeControl.destroy();
+      this.activeControl.awake();
+    }
+  }
   moveCursor(position) {
     const { index: index2, trIndex, tdIndex, tdValueIndex } = position;
     let elementList = this.draw.getOriginalElementList();
@@ -10980,13 +11047,19 @@ class Control {
     const startElement = elementList[startIndex];
     const nextElement = elementList[startIndex + 1];
     if (startElement.controlComponent === ControlComponent.PLACEHOLDER || nextElement.controlComponent === ControlComponent.PLACEHOLDER) {
+      let isHasSubmitHistory = false;
       let index2 = startIndex;
       while (index2 < elementList.length) {
         const curElement = elementList[index2];
         if (curElement.controlId !== startElement.controlId)
           break;
         if (curElement.controlComponent === ControlComponent.PLACEHOLDER) {
-          this.draw.spliceElementList(elementList, index2, 1);
+          if (!isHasSubmitHistory) {
+            isHasSubmitHistory = true;
+            this.draw.getHistoryManager().popUndo();
+            this.draw.submitHistory(startIndex);
+          }
+          elementList.splice(index2, 1);
         } else {
           index2++;
         }
@@ -11618,11 +11691,14 @@ class Previewer {
     const mousemoveFn = this._mousemove.bind(this);
     document.addEventListener("mousemove", mousemoveFn);
     document.addEventListener("mouseup", () => {
+      var _a;
       if (this.curElement) {
         this.curElement.width = this.width;
         this.curElement.height = this.height;
-        this.draw.render({ isSetCursor: false });
-        this.drawResizer(this.curElement, this.curPosition, this.previewerDrawOption);
+        this.draw.render({
+          isSetCursor: true,
+          curIndex: (_a = this.curPosition) == null ? void 0 : _a.index
+        });
       }
       this.resizerImageContainer.style.display = "none";
       document.removeEventListener("mousemove", mousemoveFn);
@@ -11833,6 +11909,11 @@ class Previewer {
   }
   drawResizer(element, position = null, options = {}) {
     this.previewerDrawOption = options;
+    this.curElementSrc = element[options.srcKey || "value"] || "";
+    this.updateResizer(element, position);
+    document.addEventListener("keydown", this._keydown);
+  }
+  updateResizer(element, position = null) {
     const { scale } = this.options;
     const elementWidth = element.width * scale;
     const elementHeight = element.height * scale;
@@ -11843,11 +11924,9 @@ class Previewer {
     this._updateResizerRect(elementWidth, elementHeight);
     this.resizerSelection.style.display = "block";
     this.curElement = element;
-    this.curElementSrc = element[options.srcKey || "value"] || "";
     this.curPosition = position;
-    this.width = this.curElement.width * scale;
-    this.height = this.curElement.height * scale;
-    document.addEventListener("keydown", this._keydown);
+    this.width = elementWidth;
+    this.height = elementHeight;
   }
   clearResizer() {
     this.resizerSelection.style.display = "none";
@@ -13814,7 +13893,7 @@ class Draw {
     return this.options.defaultBasicRowMarginHeight * this.options.scale;
   }
   getTdPadding() {
-    const { tdPadding, scale } = this.options;
+    const { table: { tdPadding }, scale } = this.options;
     return tdPadding.map((m) => m * scale);
   }
   getContainer() {
@@ -14398,9 +14477,9 @@ class Draw {
     return defaultBasicRowMarginHeight * (el.rowMargin || defaultRowMargin) * scale;
   }
   computeRowList(payload) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const { innerWidth, elementList, isPagingMode = false } = payload;
-    const { defaultSize, defaultRowMargin, scale, tdPadding, defaultTabWidth } = this.options;
+    const { defaultSize, defaultRowMargin, scale, table: { tdPadding }, defaultTabWidth } = this.options;
     const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight();
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
@@ -14465,7 +14544,8 @@ class Draw {
           while (tableIndex < elementList.length) {
             const nextElement2 = elementList[tableIndex];
             if (nextElement2.pagingId === element.pagingId) {
-              element.trList.push(...nextElement2.trList);
+              const nexTrList = nextElement2.trList.filter((tr) => !tr.pagingRepeat);
+              element.trList.push(...nexTrList);
               element.height += nextElement2.height;
               tableIndex++;
               combineCount++;
@@ -14477,6 +14557,7 @@ class Draw {
             elementList.splice(i + 1, combineCount);
           }
         }
+        element.pagingIndex = (_c = element.pagingIndex) != null ? _c : 0;
         this.tableParticle.computeRowColInfo(element);
         const trList = element.trList;
         for (let t = 0; t < trList.length; t++) {
@@ -14552,14 +14633,14 @@ class Draw {
           let curPagePreHeight = marginHeight;
           for (let r = 0; r < rowList.length; r++) {
             const row = rowList[r];
-            if (row.height + curPagePreHeight > height2 || ((_c = rowList[r - 1]) == null ? void 0 : _c.isPageBreak)) {
+            if (row.height + curPagePreHeight > height2 || ((_d = rowList[r - 1]) == null ? void 0 : _d.isPageBreak)) {
               curPagePreHeight = marginHeight + row.height;
             } else {
               curPagePreHeight += row.height;
             }
           }
           const rowMarginHeight = rowMargin * 2 * scale;
-          if (curPagePreHeight + element.trList[0].height + rowMarginHeight > height2) {
+          if (curPagePreHeight + element.trList[0].height + rowMarginHeight > height2 || element.pagingIndex !== 0 && element.trList[0].pagingRepeat) {
             curPagePreHeight = marginHeight;
           }
           if (curPagePreHeight + rowMarginHeight + elementHeight > height2) {
@@ -14573,7 +14654,7 @@ class Draw {
                 const trHeight = tr.height * scale;
                 if (curPagePreHeight + rowMarginHeight + preTrHeight + trHeight > height2) {
                   const rowColCount = tr.tdList.reduce((pre, cur) => pre + cur.colspan, 0);
-                  if (((_d = element.colgroup) == null ? void 0 : _d.length) !== rowColCount) {
+                  if (((_e = element.colgroup) == null ? void 0 : _e.length) !== rowColCount) {
                     deleteCount = 0;
                   }
                   break;
@@ -14594,6 +14675,13 @@ class Draw {
               metrics.boundingBoxDescent -= cloneTrHeight;
               const cloneElement = deepClone(element);
               cloneElement.pagingId = pagingId;
+              cloneElement.pagingIndex = element.pagingIndex + 1;
+              const repeatTrList = trList2.filter((tr) => tr.pagingRepeat);
+              if (repeatTrList.length) {
+                const cloneRepeatTrList = deepClone(repeatTrList);
+                cloneRepeatTrList.forEach((tr) => tr.id = getUUID());
+                cloneTrList.unshift(...cloneRepeatTrList);
+              }
               cloneElement.trList = cloneTrList;
               cloneElement.id = getUUID();
               this.spliceElementList(elementList, i + 1, 0, cloneElement);
@@ -14689,7 +14777,7 @@ class Draw {
         metrics,
         style: this.getElementFont(element, scale)
       });
-      if ((_e = rowElement.control) == null ? void 0 : _e.minWidth) {
+      if ((_f = rowElement.control) == null ? void 0 : _f.minWidth) {
         if (rowElement.controlComponent) {
           controlRealWidth += metrics.width;
         }
@@ -14733,19 +14821,6 @@ class Draw {
       const isForceBreak = element.type === ElementType.SEPARATOR || element.type === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.TABLE || (preElement == null ? void 0 : preElement.type) === ElementType.BLOCK || element.type === ElementType.BLOCK || (preElement == null ? void 0 : preElement.imgDisplay) === ImageDisplay.INLINE || element.imgDisplay === ImageDisplay.INLINE || (preElement == null ? void 0 : preElement.listId) !== element.listId || i !== 0 && element.value === ZERO;
       const isWidthNotEnough = curRowWidth > availableWidth;
       if (isForceBreak || isWidthNotEnough) {
-        curRow.isWidthNotEnough = isWidthNotEnough && !isForceBreak;
-        if (curRow.startIndex === 0 && curRow.elementList.length === 1 && INLINE_ELEMENT_TYPE.includes(element.type)) {
-          curRow.height = defaultBasicRowMarginHeight;
-        }
-        if ((preElement == null ? void 0 : preElement.rowFlex) === RowFlex.JUSTIFY || (preElement == null ? void 0 : preElement.rowFlex) === RowFlex.ALIGNMENT && isWidthNotEnough) {
-          const rowElementList = ((_f = curRow.elementList[0]) == null ? void 0 : _f.value) === ZERO ? curRow.elementList.slice(1) : curRow.elementList;
-          const gap = (availableWidth - curRow.width) / (rowElementList.length - 1);
-          for (let e = 0; e < rowElementList.length - 1; e++) {
-            const el = rowElementList[e];
-            el.metrics.width += gap;
-          }
-          curRow.width = availableWidth;
-        }
         const row = {
           width: metrics.width,
           height,
@@ -14776,12 +14851,27 @@ class Draw {
         rowList.push(row);
       } else {
         curRow.width += metrics.width;
-        if (curRow.height < height) {
+        if (i === 0 && getIsInlineElement(elementList[1])) {
+          curRow.height = defaultBasicRowMarginHeight;
+          curRow.ascent = defaultBasicRowMarginHeight;
+        } else if (curRow.height < height) {
           curRow.height = height;
           curRow.ascent = ascent;
         }
         curRow.elementList.push(rowElement);
       }
+      if (isForceBreak || isWidthNotEnough || i === elementList.length - 1) {
+        curRow.isWidthNotEnough = isWidthNotEnough && !isForceBreak;
+        if ((preElement == null ? void 0 : preElement.rowFlex) === RowFlex.JUSTIFY || (preElement == null ? void 0 : preElement.rowFlex) === RowFlex.ALIGNMENT && isWidthNotEnough) {
+          const rowElementList = ((_j = curRow.elementList[0]) == null ? void 0 : _j.value) === ZERO ? curRow.elementList.slice(1) : curRow.elementList;
+          const gap = (availableWidth - curRow.width) / (rowElementList.length - 1);
+          for (let e = 0; e < rowElementList.length - 1; e++) {
+            const el = rowElementList[e];
+            el.metrics.width += gap;
+          }
+          curRow.width = availableWidth;
+        }
+      }
     }
     return rowList;
   }
@@ -14846,7 +14936,7 @@ class Draw {
   drawRow(ctx, payload) {
     var _a, _b, _c, _d, _e, _f;
     this._drawHighlight(ctx, payload);
-    const { scale, tdPadding, group: group2, lineBreak } = this.options;
+    const { scale, table: { tdPadding }, group: group2, lineBreak } = this.options;
     const { rowList, pageNo, elementList, positionList, startIndex, zone: zone2, isDrawLineBreak = !lineBreak.disabled } = payload;
     const isPrintMode = this.mode === EditorMode.PRINT;
     const { isCrossRowCol, tableId } = this.range.getRange();
@@ -14893,7 +14983,6 @@ class Draw {
             this.textParticle.complete();
           }
         } else if (element.type === ElementType.SUPERSCRIPT) {
-          this.underline.render(ctx);
           this.textParticle.complete();
           this.superscriptParticle.render(ctx, element, x, y + offsetY);
         } else if (element.type === ElementType.SUBSCRIPT) {
@@ -14929,7 +15018,7 @@ class Draw {
             this.textParticle.complete();
           }
         }
-        if (isDrawLineBreak && !curRow.isWidthNotEnough && j === curRow.elementList.length - 1) {
+        if (isDrawLineBreak && !isPrintMode && this.mode !== EditorMode.CLEAN && !curRow.isWidthNotEnough && j === curRow.elementList.length - 1) {
           this.lineBreakParticle.render(ctx, element, x, y + curRow.height / 2);
         }
         if ((_a = element.control) == null ? void 0 : _a.border) {
@@ -14942,7 +15031,7 @@ class Draw {
           this.control.drawBorder(ctx);
         }
         if (element.underline || ((_d = element.control) == null ? void 0 : _d.underline)) {
-          if ((preElement == null ? void 0 : preElement.type) === ElementType.SUPERSCRIPT && element.type !== ElementType.SUPERSCRIPT || (preElement == null ? void 0 : preElement.type) === ElementType.SUBSCRIPT && element.type !== ElementType.SUBSCRIPT) {
+          if ((preElement == null ? void 0 : preElement.type) === ElementType.SUBSCRIPT && element.type !== ElementType.SUBSCRIPT) {
             this.underline.render(ctx);
           }
           const rowMargin = this.getElementRowMargin(element);
@@ -14950,8 +15039,6 @@ class Draw {
           let offsetY2 = 0;
           if (element.type === ElementType.SUBSCRIPT) {
             offsetY2 = this.subscriptParticle.getOffsetY(element);
-          } else if (element.type === ElementType.SUPERSCRIPT) {
-            offsetY2 = this.superscriptParticle.getOffsetY(element);
           }
           const color = element.controlComponent === ControlComponent.PLACEHOLDER ? void 0 : element.color;
           this.underline.recordFillInfo(ctx, x - offsetX, y + curRow.height - rowMargin + offsetY2, metrics.width + offsetX, 0, color, (_e = element.textDecoration) == null ? void 0 : _e.style);
@@ -14960,7 +15047,7 @@ class Draw {
         }
         if (element.strikeout) {
           if (!element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
-            if (preElement && this.getElementSize(preElement) !== this.getElementSize(element)) {
+            if (preElement && (preElement.type === ElementType.SUBSCRIPT && element.type !== ElementType.SUBSCRIPT || preElement.type === ElementType.SUPERSCRIPT && element.type !== ElementType.SUPERSCRIPT || this.getElementSize(preElement) !== this.getElementSize(element))) {
               this.strikeout.render(ctx);
             }
             const standardMetrics = this.textParticle.measureBasisWord(ctx, this.getElementFont(element));
@@ -15153,7 +15240,6 @@ class Draw {
     }
   }
   render(payload) {
-    var _a;
     const { header, footer } = this.options;
     const { isSubmitHistory = true, isSetCursor = true, isCompute = true, isLazy = true, isInit = false, isSourceHistory = false, isFirstRender = false } = payload || {};
     let { curIndex } = payload || {};
@@ -15201,48 +15287,17 @@ class Draw {
     } else {
       this._immediateRender();
     }
-    const positionContext = this.position.getPositionContext();
     if (isSetCursor) {
-      const positionList = this.position.getPositionList();
-      if (positionContext.isTable) {
-        const { index: index2, trIndex, tdIndex } = positionContext;
-        const elementList = this.getOriginalElementList();
-        const tablePositionList = (_a = elementList[index2].trList) == null ? void 0 : _a[trIndex].tdList[tdIndex].positionList;
-        if (curIndex === void 0 && tablePositionList) {
-          curIndex = tablePositionList.length - 1;
-        }
-        const tablePosition = tablePositionList == null ? void 0 : tablePositionList[curIndex];
-        this.position.setCursorPosition(tablePosition || null);
-      } else {
-        this.position.setCursorPosition(curIndex !== void 0 ? positionList[curIndex] : null);
-      }
-      this.cursor.drawCursor();
+      curIndex = this.setCursor(curIndex);
     }
     if (isSubmitHistory && !isFirstRender || curIndex !== void 0 && this.historyManager.isStackEmpty()) {
-      const oldElementList = getSlimCloneElementList(this.elementList);
-      const oldHeaderElementList = getSlimCloneElementList(this.header.getElementList());
-      const oldFooterElementList = getSlimCloneElementList(this.footer.getElementList());
-      const oldRange = deepClone(this.range.getRange());
-      const pageNo = this.pageNo;
-      const oldPositionContext = deepClone(positionContext);
-      const zone2 = this.zone.getZone();
-      this.historyManager.execute(() => {
-        this.zone.setZone(zone2);
-        this.setPageNo(pageNo);
-        this.position.setPositionContext(deepClone(oldPositionContext));
-        this.header.setElementList(deepClone(oldHeaderElementList));
-        this.footer.setElementList(deepClone(oldFooterElementList));
-        this.elementList = deepClone(oldElementList);
-        this.range.replaceRange(deepClone(oldRange));
-        this.render({
-          curIndex,
-          isSubmitHistory: false,
-          isSourceHistory: true
-        });
-      });
+      this.submitHistory(curIndex);
     }
     nextTick(() => {
-      if (isCompute && !this.isReadonly() && positionContext.isTable) {
+      if (isCompute && this.control.getActiveControl()) {
+        this.control.reAwakeControl();
+      }
+      if (isCompute && !this.isReadonly() && this.position.getPositionContext().isTable) {
         this.tableTool.render();
       }
       if (isCompute && !this.zone.isMainActive()) {
@@ -15264,6 +15319,61 @@ class Draw {
       }
     });
   }
+  setCursor(curIndex) {
+    var _a;
+    const positionContext = this.position.getPositionContext();
+    const positionList = this.position.getPositionList();
+    if (positionContext.isTable) {
+      const { index: index2, trIndex, tdIndex } = positionContext;
+      const elementList = this.getOriginalElementList();
+      const tablePositionList = (_a = elementList[index2].trList) == null ? void 0 : _a[trIndex].tdList[tdIndex].positionList;
+      if (curIndex === void 0 && tablePositionList) {
+        curIndex = tablePositionList.length - 1;
+      }
+      const tablePosition = tablePositionList == null ? void 0 : tablePositionList[curIndex];
+      this.position.setCursorPosition(tablePosition || null);
+    } else {
+      this.position.setCursorPosition(curIndex !== void 0 ? positionList[curIndex] : null);
+    }
+    let isShowCursor = true;
+    if (curIndex !== void 0 && positionContext.isImage && positionContext.isDirectHit) {
+      const elementList = this.getElementList();
+      const element = elementList[curIndex];
+      if (IMAGE_ELEMENT_TYPE.includes(element.type)) {
+        isShowCursor = false;
+        const position = this.position.getCursorPosition();
+        this.previewer.updateResizer(element, position);
+      }
+    }
+    this.cursor.drawCursor({
+      isShow: isShowCursor
+    });
+    return curIndex;
+  }
+  submitHistory(curIndex) {
+    const positionContext = this.position.getPositionContext();
+    const oldElementList = getSlimCloneElementList(this.elementList);
+    const oldHeaderElementList = getSlimCloneElementList(this.header.getElementList());
+    const oldFooterElementList = getSlimCloneElementList(this.footer.getElementList());
+    const oldRange = deepClone(this.range.getRange());
+    const pageNo = this.pageNo;
+    const oldPositionContext = deepClone(positionContext);
+    const zone2 = this.zone.getZone();
+    this.historyManager.execute(() => {
+      this.zone.setZone(zone2);
+      this.setPageNo(pageNo);
+      this.position.setPositionContext(deepClone(oldPositionContext));
+      this.header.setElementList(deepClone(oldHeaderElementList));
+      this.footer.setElementList(deepClone(oldFooterElementList));
+      this.elementList = deepClone(oldElementList);
+      this.range.replaceRange(deepClone(oldRange));
+      this.render({
+        curIndex,
+        isSubmitHistory: false,
+        isSourceHistory: true
+      });
+    });
+  }
   destroy() {
     this.container.remove();
     this.globalEvent.removeEvent();
@@ -15367,6 +15477,7 @@ class Command {
     __publicField(this, "executeSetControlExtension");
     __publicField(this, "executeSetControlProperties");
     __publicField(this, "executeSetControlHighlight");
+    __publicField(this, "executeUpdateOptions");
     __publicField(this, "getCatalog");
     __publicField(this, "getImage");
     __publicField(this, "getOptions");
@@ -15472,6 +15583,7 @@ class Command {
     this.executeDeleteGroup = adapt.deleteGroup.bind(adapt);
     this.executeLocationGroup = adapt.locationGroup.bind(adapt);
     this.executeSetZone = adapt.setZone.bind(adapt);
+    this.executeUpdateOptions = adapt.updateOptions.bind(adapt);
     this.getImage = adapt.getImage.bind(adapt);
     this.getOptions = adapt.getOptions.bind(adapt);
     this.getValue = adapt.getValue.bind(adapt);
@@ -15512,6 +15624,160 @@ var VerticalAlign;
   VerticalAlign2["MIDDLE"] = "middle";
   VerticalAlign2["BOTTOM"] = "bottom";
 })(VerticalAlign || (VerticalAlign = {}));
+const defaultBackground = {
+  color: "#FFFFFF",
+  image: "",
+  size: BackgroundSize.COVER,
+  repeat: BackgroundRepeat.NO_REPEAT
+};
+const defaultCheckboxOption = {
+  width: 14,
+  height: 14,
+  gap: 5,
+  lineWidth: 1,
+  fillStyle: "#5175f4",
+  strokeStyle: "#ffffff"
+};
+const defaultControlOption = {
+  placeholderColor: "#9c9b9b",
+  bracketColor: "#000000",
+  prefix: "{",
+  postfix: "}",
+  borderWidth: 1,
+  borderColor: "#000000"
+};
+const defaultFooterOption = {
+  bottom: 30,
+  maxHeightRadio: MaxHeightRatio.HALF,
+  disabled: false
+};
+const defaultGroupOption = {
+  opacity: 0.1,
+  backgroundColor: "#E99D00",
+  activeOpacity: 0.5,
+  activeBackgroundColor: "#E99D00",
+  disabled: false
+};
+const defaultHeaderOption = {
+  top: 30,
+  maxHeightRadio: MaxHeightRatio.HALF,
+  disabled: false
+};
+const defaultLineBreak = {
+  disabled: true,
+  color: "#CCCCCC",
+  lineWidth: 1.5
+};
+const defaultPageBreakOption = {
+  font: "Microsoft YaHei",
+  fontSize: 12,
+  lineDash: [3, 1]
+};
+const defaultPlaceholderOption = {
+  data: "",
+  color: "#DCDFE6",
+  opacity: 1,
+  size: 16,
+  font: "Microsoft YaHei"
+};
+const defaultRadioOption = {
+  width: 14,
+  height: 14,
+  gap: 5,
+  lineWidth: 1,
+  fillStyle: "#5175f4",
+  strokeStyle: "#000000"
+};
+const defaultSeparatorOption = {
+  lineWidth: 1,
+  strokeStyle: "#000000"
+};
+const defaultTableOption = {
+  tdPadding: [0, 5, 5, 5],
+  defaultTrMinHeight: 42,
+  defaultColMinWidth: 40
+};
+const defaultZoneOption = {
+  tipDisabled: true
+};
+function mergeOption(options = {}) {
+  const tableOptions = __spreadValues(__spreadValues({}, defaultTableOption), options.table);
+  const headerOptions = __spreadValues(__spreadValues({}, defaultHeaderOption), options.header);
+  const footerOptions = __spreadValues(__spreadValues({}, defaultFooterOption), options.footer);
+  const pageNumberOptions = __spreadValues(__spreadValues({}, defaultPageNumberOption), options.pageNumber);
+  const waterMarkOptions = __spreadValues(__spreadValues({}, defaultWatermarkOption), options.watermark);
+  const controlOptions = __spreadValues(__spreadValues({}, defaultControlOption), options.control);
+  const checkboxOptions = __spreadValues(__spreadValues({}, defaultCheckboxOption), options.checkbox);
+  const radioOptions = __spreadValues(__spreadValues({}, defaultRadioOption), options.radio);
+  const cursorOptions = __spreadValues(__spreadValues({}, defaultCursorOption), options.cursor);
+  const titleOptions = __spreadValues(__spreadValues({}, defaultTitleOption), options.title);
+  const placeholderOptions = __spreadValues(__spreadValues({}, defaultPlaceholderOption), options.placeholder);
+  const groupOptions = __spreadValues(__spreadValues({}, defaultGroupOption), options.group);
+  const pageBreakOptions = __spreadValues(__spreadValues({}, defaultPageBreakOption), options.pageBreak);
+  const zoneOptions = __spreadValues(__spreadValues({}, defaultZoneOption), options.zone);
+  const backgroundOptions = __spreadValues(__spreadValues({}, defaultBackground), options.background);
+  const lineBreakOptions = __spreadValues(__spreadValues({}, defaultLineBreak), options.lineBreak);
+  const separatorOptions = __spreadValues(__spreadValues({}, defaultSeparatorOption), options.separator);
+  return __spreadProps(__spreadValues({
+    mode: EditorMode.EDIT,
+    defaultType: "TEXT",
+    defaultColor: "#000000",
+    defaultFont: "Microsoft YaHei",
+    defaultSize: 16,
+    minSize: 5,
+    maxSize: 72,
+    defaultRowMargin: 1,
+    defaultBasicRowMarginHeight: 8,
+    defaultTabWidth: 32,
+    width: 794,
+    height: 1123,
+    scale: 1,
+    pageGap: 20,
+    underlineColor: "#000000",
+    strikeoutColor: "#FF0000",
+    rangeAlpha: 0.6,
+    rangeColor: "#AECBFA",
+    rangeMinWidth: 5,
+    searchMatchAlpha: 0.6,
+    searchMatchColor: "#FFFF00",
+    searchNavigateMatchColor: "#AAD280",
+    highlightAlpha: 0.6,
+    resizerColor: "#4182D9",
+    resizerSize: 5,
+    marginIndicatorSize: 35,
+    marginIndicatorColor: "#BABABA",
+    margins: [100, 120, 100, 120],
+    pageMode: PageMode.PAGING,
+    defaultHyperlinkColor: "#0000FF",
+    paperDirection: PaperDirection.VERTICAL,
+    inactiveAlpha: 0.6,
+    historyMaxRecordCount: 100,
+    wordBreak: WordBreak.BREAK_WORD,
+    printPixelRatio: 3,
+    maskMargin: [0, 0, 0, 0],
+    letterClass: [LETTER_CLASS.ENGLISH],
+    contextMenuDisableKeys: [],
+    scrollContainerSelector: ""
+  }, options), {
+    table: tableOptions,
+    header: headerOptions,
+    footer: footerOptions,
+    pageNumber: pageNumberOptions,
+    watermark: waterMarkOptions,
+    control: controlOptions,
+    checkbox: checkboxOptions,
+    radio: radioOptions,
+    cursor: cursorOptions,
+    title: titleOptions,
+    placeholder: placeholderOptions,
+    group: groupOptions,
+    pageBreak: pageBreakOptions,
+    zone: zoneOptions,
+    background: backgroundOptions,
+    lineBreak: lineBreakOptions,
+    separator: separatorOptions
+  });
+}
 function printImageBase64(base64List, options) {
   const { width, height, direction = PaperDirection.VERTICAL } = options;
   const iframe = document.createElement("iframe");
@@ -16167,6 +16433,7 @@ class CommandAdapt {
     const { startIndex, endIndex } = this.range.getRange();
     if (!~startIndex && !~endIndex)
       return;
+    const { defaultTrMinHeight } = this.options.table;
     const elementList = this.draw.getElementList();
     let offsetX = 0;
     if ((_a = elementList[startIndex]) == null ? void 0 : _a.listId) {
@@ -16188,7 +16455,7 @@ class CommandAdapt {
     for (let r = 0; r < row; r++) {
       const tdList = [];
       const tr = {
-        height: this.options.defaultTrMinHeight,
+        height: defaultTrMinHeight,
         tdList
       };
       for (let c = 0; c < col; c++) {
@@ -16372,7 +16639,7 @@ class CommandAdapt {
     }
     const colgroup = element.colgroup;
     colgroup.splice(curTdIndex, 0, {
-      width: this.options.defaultColMinWidth
+      width: this.options.table.defaultColMinWidth
     });
     const colgroupWidth = colgroup.reduce((pre, cur) => pre + cur.width, 0);
     const width = this.draw.getOriginalInnerWidth();
@@ -16428,7 +16695,7 @@ class CommandAdapt {
     }
     const colgroup = element.colgroup;
     colgroup.splice(curTdIndex, 0, {
-      width: this.options.defaultColMinWidth
+      width: this.options.table.defaultColMinWidth
     });
     const colgroupWidth = colgroup.reduce((pre, cur) => pre + cur.width, 0);
     const width = this.draw.getOriginalInnerWidth();
@@ -17403,7 +17670,15 @@ class CommandAdapt {
       });
     }
     const zone2 = this.draw.getZone().getZone();
-    const isTable = this.position.getPositionContext().isTable;
+    const { isTable, trIndex, tdIndex, index: index2 } = this.position.getPositionContext();
+    let tableElement = null;
+    if (isTable) {
+      const originalElementList = this.draw.getOriginalElementList();
+      const originTableElement = originalElementList[index2] || null;
+      if (originTableElement) {
+        tableElement = zipElementList([originTableElement])[0];
+      }
+    }
     return deepClone({
       isCollapsed,
       startElement,
@@ -17412,7 +17687,10 @@ class CommandAdapt {
       endPageNo,
       rangeRects,
       zone: zone2,
-      isTable
+      isTable,
+      trIndex: trIndex != null ? trIndex : null,
+      tdIndex: tdIndex != null ? tdIndex : null,
+      tableElement
     });
   }
   getRangeRow() {
@@ -17632,6 +17910,13 @@ class CommandAdapt {
   setControlHighlight(payload) {
     this.draw.getControl().setHighlightList(payload);
   }
+  updateOptions(payload) {
+    const newOption = mergeOption(payload);
+    Object.entries(newOption).forEach(([key, value]) => {
+      Reflect.set(this.options, key, value);
+    });
+    this.forceUpdate();
+  }
   getControlList() {
     return this.draw.getControl().getList();
   }
@@ -18324,9 +18609,16 @@ class ContextMenu {
     const { isCrossRowCol: crossRowCol, startIndex, endIndex } = this.range.getRange();
     const editorTextFocus = !!(~startIndex || ~endIndex);
     const editorHasSelection = editorTextFocus && startIndex !== endIndex;
-    const positionContext = this.position.getPositionContext();
-    const isInTable = positionContext.isTable;
-    const isCrossRowCol = isInTable && !!crossRowCol;
+    const { isTable, trIndex, tdIndex, index: index2 } = this.position.getPositionContext();
+    let tableElement = null;
+    if (isTable) {
+      const originalElementList = this.draw.getOriginalElementList();
+      const originTableElement = originalElementList[index2] || null;
+      if (originTableElement) {
+        tableElement = zipElementList([originTableElement])[0];
+      }
+    }
+    const isCrossRowCol = isTable && !!crossRowCol;
     const elementList = this.draw.getElementList();
     const startElement = elementList[startIndex] || null;
     const endElement = elementList[endIndex] || null;
@@ -18337,9 +18629,12 @@ class ContextMenu {
       isReadonly,
       editorHasSelection,
       editorTextFocus,
-      isInTable,
       isCrossRowCol,
-      zone: zone2
+      zone: zone2,
+      isInTable: isTable,
+      trIndex: trIndex != null ? trIndex : null,
+      tdIndex: tdIndex != null ? tdIndex : null,
+      tableElement
     };
   }
   _createContextMenuContainer() {
@@ -18480,35 +18775,6 @@ class ContextMenu {
     this.contextMenuRelationShip.clear();
   }
 }
-const defaultHeaderOption = {
-  top: 30,
-  maxHeightRadio: MaxHeightRatio.HALF,
-  disabled: false
-};
-const defaultControlOption = {
-  placeholderColor: "#9c9b9b",
-  bracketColor: "#000000",
-  prefix: "{",
-  postfix: "}",
-  borderWidth: 1,
-  borderColor: "#000000"
-};
-const defaultCheckboxOption = {
-  width: 14,
-  height: 14,
-  gap: 5,
-  lineWidth: 1,
-  fillStyle: "#5175f4",
-  strokeStyle: "#ffffff"
-};
-const defaultRadioOption = {
-  width: 14,
-  height: 14,
-  gap: 5,
-  lineWidth: 1,
-  fillStyle: "#5175f4",
-  strokeStyle: "#000000"
-};
 const richtextKeys = [
   {
     key: KeyMap.X_UPPERCASE,
@@ -18738,18 +19004,6 @@ class Shortcut {
     }
   }
 }
-const defaultFooterOption = {
-  bottom: 30,
-  maxHeightRadio: MaxHeightRatio.HALF,
-  disabled: false
-};
-const defaultPlaceholderOption = {
-  data: "",
-  color: "#DCDFE6",
-  opacity: 1,
-  size: 16,
-  font: "Microsoft YaHei"
-};
 class Plugin {
   constructor(editor) {
     __publicField(this, "editor");
@@ -18796,42 +19050,12 @@ class EventBus {
     return !!eventSet && eventSet.size > 0;
   }
 }
-const defaultGroupOption = {
-  opacity: 0.1,
-  backgroundColor: "#E99D00",
-  activeOpacity: 0.5,
-  activeBackgroundColor: "#E99D00",
-  disabled: false
-};
 class Override {
   constructor() {
     __publicField(this, "paste");
     __publicField(this, "copy");
   }
 }
-const defaultPageBreakOption = {
-  font: "Microsoft YaHei",
-  fontSize: 12,
-  lineDash: [3, 1]
-};
-const defaultZoneOption = {
-  tipDisabled: true
-};
-const defaultBackground = {
-  color: "#FFFFFF",
-  image: "",
-  size: BackgroundSize.COVER,
-  repeat: BackgroundRepeat.NO_REPEAT
-};
-const defaultLineBreak = {
-  disabled: true,
-  color: "#CCCCCC",
-  lineWidth: 1.5
-};
-const defaultSeparatorOption = {
-  lineWidth: 1,
-  strokeStyle: "#000000"
-};
 class Editor {
   constructor(container, data2, options = {}) {
     __publicField(this, "command");
@@ -18841,83 +19065,7 @@ class Editor {
     __publicField(this, "register");
     __publicField(this, "destroy");
     __publicField(this, "use");
-    const headerOptions = __spreadValues(__spreadValues({}, defaultHeaderOption), options.header);
-    const footerOptions = __spreadValues(__spreadValues({}, defaultFooterOption), options.footer);
-    const pageNumberOptions = __spreadValues(__spreadValues({}, defaultPageNumberOption), options.pageNumber);
-    const waterMarkOptions = __spreadValues(__spreadValues({}, defaultWatermarkOption), options.watermark);
-    const controlOptions = __spreadValues(__spreadValues({}, defaultControlOption), options.control);
-    const checkboxOptions = __spreadValues(__spreadValues({}, defaultCheckboxOption), options.checkbox);
-    const radioOptions = __spreadValues(__spreadValues({}, defaultRadioOption), options.radio);
-    const cursorOptions = __spreadValues(__spreadValues({}, defaultCursorOption), options.cursor);
-    const titleOptions = __spreadValues(__spreadValues({}, defaultTitleOption), options.title);
-    const placeholderOptions = __spreadValues(__spreadValues({}, defaultPlaceholderOption), options.placeholder);
-    const groupOptions = __spreadValues(__spreadValues({}, defaultGroupOption), options.group);
-    const pageBreakOptions = __spreadValues(__spreadValues({}, defaultPageBreakOption), options.pageBreak);
-    const zoneOptions = __spreadValues(__spreadValues({}, defaultZoneOption), options.zone);
-    const backgroundOptions = __spreadValues(__spreadValues({}, defaultBackground), options.background);
-    const lineBreakOptions = __spreadValues(__spreadValues({}, defaultLineBreak), options.lineBreak);
-    const separatorOptions = __spreadValues(__spreadValues({}, defaultSeparatorOption), options.separator);
-    const editorOptions = __spreadProps(__spreadValues({
-      mode: EditorMode.EDIT,
-      defaultType: "TEXT",
-      defaultColor: "#000000",
-      defaultFont: "Microsoft YaHei",
-      defaultSize: 16,
-      minSize: 5,
-      maxSize: 72,
-      defaultRowMargin: 1,
-      defaultBasicRowMarginHeight: 8,
-      defaultTabWidth: 32,
-      width: 794,
-      height: 1123,
-      scale: 1,
-      pageGap: 20,
-      underlineColor: "#000000",
-      strikeoutColor: "#FF0000",
-      rangeAlpha: 0.6,
-      rangeColor: "#AECBFA",
-      rangeMinWidth: 5,
-      searchMatchAlpha: 0.6,
-      searchMatchColor: "#FFFF00",
-      searchNavigateMatchColor: "#AAD280",
-      highlightAlpha: 0.6,
-      resizerColor: "#4182D9",
-      resizerSize: 5,
-      marginIndicatorSize: 35,
-      marginIndicatorColor: "#BABABA",
-      margins: [100, 120, 100, 120],
-      pageMode: PageMode.PAGING,
-      tdPadding: [0, 5, 5, 5],
-      defaultTrMinHeight: 42,
-      defaultColMinWidth: 40,
-      defaultHyperlinkColor: "#0000FF",
-      paperDirection: PaperDirection.VERTICAL,
-      inactiveAlpha: 0.6,
-      historyMaxRecordCount: 100,
-      wordBreak: WordBreak.BREAK_WORD,
-      printPixelRatio: 3,
-      maskMargin: [0, 0, 0, 0],
-      letterClass: [LETTER_CLASS.ENGLISH],
-      contextMenuDisableKeys: [],
-      scrollContainerSelector: ""
-    }, options), {
-      header: headerOptions,
-      footer: footerOptions,
-      pageNumber: pageNumberOptions,
-      watermark: waterMarkOptions,
-      control: controlOptions,
-      checkbox: checkboxOptions,
-      radio: radioOptions,
-      cursor: cursorOptions,
-      title: titleOptions,
-      placeholder: placeholderOptions,
-      group: groupOptions,
-      pageBreak: pageBreakOptions,
-      zone: zoneOptions,
-      background: backgroundOptions,
-      lineBreak: lineBreakOptions,
-      separator: separatorOptions
-    });
+    const editorOptions = mergeOption(options);
     data2 = deepClone(data2);
     let headerElementList = [];
     let mainElementList = [];