@hufe921/canvas-editor 0.9.77 → 0.9.79

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.77";
+const version = "0.9.79";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -177,19 +177,27 @@ function getUUID() {
 }
 function splitText(text) {
   const data2 = [];
-  const symbolMap = new Map();
-  for (const match of text.matchAll(UNICODE_SYMBOL_REG)) {
-    symbolMap.set(match.index, match[0]);
-  }
-  let t = 0;
-  while (t < text.length) {
-    const symbol = symbolMap.get(t);
-    if (symbol) {
-      data2.push(symbol);
-      t += symbol.length;
-    } else {
-      data2.push(text[t]);
-      t++;
+  if (Intl.Segmenter) {
+    const segmenter = new Intl.Segmenter();
+    const segments = segmenter.segment(text);
+    for (const { segment } of segments) {
+      data2.push(segment);
+    }
+  } else {
+    const symbolMap = new Map();
+    for (const match of text.matchAll(UNICODE_SYMBOL_REG)) {
+      symbolMap.set(match.index, match[0]);
+    }
+    let t = 0;
+    while (t < text.length) {
+      const symbol = symbolMap.get(t);
+      if (symbol) {
+        data2.push(symbol);
+        t += symbol.length;
+      } else {
+        data2.push(text[t]);
+        t++;
+      }
     }
   }
   return data2;
@@ -421,7 +429,6 @@ const EDITOR_ELEMENT_COPY_ATTR = [
   "dateId",
   "dateFormat",
   "groupIds",
-  "rowFlex",
   "rowMargin",
   "textDecoration"
 ];
@@ -460,7 +467,8 @@ const EDITOR_ELEMENT_ZIP_ATTR = [
   "imgDisplay",
   "imgFloatPosition",
   "textDecoration",
-  "extension"
+  "extension",
+  "externalId"
 ];
 const TABLE_TD_ZIP_ATTR = [
   "verticalAlign",
@@ -499,7 +507,8 @@ const CONTROL_STYLE_ATTR = [
 const EDITOR_ELEMENT_CONTEXT_ATTR = [
   ...TABLE_CONTEXT_ATTR,
   ...TITLE_CONTEXT_ATTR,
-  ...LIST_CONTEXT_ATTR
+  ...LIST_CONTEXT_ATTR,
+  ...EDITOR_ROW_ATTR
 ];
 const TEXTLIKE_ELEMENT_TYPE = [
   ElementType.TEXT,
@@ -513,7 +522,7 @@ const IMAGE_ELEMENT_TYPE = [
   ElementType.IMAGE,
   ElementType.LATEX
 ];
-const INLINE_ELEMENT_TYPE = [
+const BLOCK_ELEMENT_TYPE = [
   ElementType.BLOCK,
   ElementType.PAGE_BREAK,
   ElementType.SEPARATOR,
@@ -4235,11 +4244,11 @@ function zipElementList(payload) {
       if (controlId) {
         const controlDefaultStyle = pickObject(element, CONTROL_STYLE_ATTR);
         const control = __spreadValues(__spreadValues({}, element.control), controlDefaultStyle);
-        const controlElement = {
+        const controlElement = __spreadProps(__spreadValues({}, pickObject(element, EDITOR_ROW_ATTR)), {
           type: ElementType.CONTROL,
           value: "",
           control
-        };
+        });
         const valueList = [];
         while (e < elementList.length) {
           const controlE = elementList[e];
@@ -4277,7 +4286,7 @@ function zipElementList(payload) {
   }
   return zipElementListData;
 }
-function getElementRowFlex(node) {
+function convertTextAlignToRowFlex(node) {
   const textAlign = window.getComputedStyle(node).textAlign;
   switch (textAlign) {
     case "left":
@@ -4296,6 +4305,24 @@ function getElementRowFlex(node) {
       return RowFlex.LEFT;
   }
 }
+function convertRowFlexToTextAlign(rowFlex) {
+  return rowFlex === RowFlex.ALIGNMENT ? "justify" : rowFlex;
+}
+function convertRowFlexToJustifyContent(rowFlex) {
+  switch (rowFlex) {
+    case RowFlex.LEFT:
+      return "flex-start";
+    case RowFlex.CENTER:
+      return "center";
+    case RowFlex.RIGHT:
+      return "flex-end";
+    case RowFlex.ALIGNMENT:
+    case RowFlex.JUSTIFY:
+      return "space-between";
+    default:
+      return "flex-start";
+  }
+}
 function isTextLikeElement(element) {
   return !element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type);
 }
@@ -4319,9 +4346,10 @@ function formatElementContext(sourceElementList, formatElementList2, anchorIndex
       isBreakWarped = true;
     }
     if (isBreakWarped || !copyElement.listId && targetElement.type === ElementType.LIST) {
-      cloneProperty(TABLE_CONTEXT_ATTR, copyElement, targetElement);
+      const cloneAttr = [...TABLE_CONTEXT_ATTR, ...EDITOR_ROW_ATTR];
+      cloneProperty(cloneAttr, copyElement, targetElement);
       (_a = targetElement.valueList) == null ? void 0 : _a.forEach((valueItem) => {
-        cloneProperty(TABLE_CONTEXT_ATTR, copyElement, valueItem);
+        cloneProperty(cloneAttr, copyElement, valueItem);
       });
       continue;
     }
@@ -4337,14 +4365,11 @@ function convertElementToDom(element, options) {
     tagName = "sup";
   } else if (element.type === ElementType.SUBSCRIPT) {
     tagName = "sub";
-  } else if (element.rowFlex === RowFlex.CENTER || element.rowFlex === RowFlex.RIGHT) {
-    tagName = "p";
   }
   const dom = document.createElement(tagName);
   dom.style.fontFamily = element.font || options.defaultFont;
   if (element.rowFlex) {
-    const isAlignment = element.rowFlex === RowFlex.ALIGNMENT;
-    dom.style.textAlign = isAlignment ? "justify" : element.rowFlex;
+    dom.style.textAlign = convertRowFlexToTextAlign(element.rowFlex);
   }
   if (element.color) {
     dom.style.color = element.color;
@@ -4399,10 +4424,40 @@ function splitListElement(elementList) {
   }
   return listElementListMap;
 }
+function groupElementListByRowFlex(elementList) {
+  var _a;
+  const elementListGroupList = [];
+  if (!elementList.length)
+    return elementListGroupList;
+  let currentRowFlex = ((_a = elementList[0]) == null ? void 0 : _a.rowFlex) || null;
+  elementListGroupList.push({
+    rowFlex: currentRowFlex,
+    data: [elementList[0]]
+  });
+  for (let e = 1; e < elementList.length; e++) {
+    const element = elementList[e];
+    const rowFlex = element.rowFlex || null;
+    if (currentRowFlex === rowFlex && !getIsBlockElement(element) && !getIsBlockElement(elementList[e - 1])) {
+      const lastElementListGroup = elementListGroupList[elementListGroupList.length - 1];
+      lastElementListGroup.data.push(element);
+    } else {
+      elementListGroupList.push({
+        rowFlex,
+        data: [element]
+      });
+      currentRowFlex = rowFlex;
+    }
+  }
+  for (let g = 0; g < elementListGroupList.length; g++) {
+    const elementListGroup = elementListGroupList[g];
+    elementListGroup.data = zipElementList(elementListGroup.data);
+  }
+  return elementListGroupList;
+}
 function createDomFromElementList(elementList, options) {
   function buildDom(payload) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-    const clipboardDom = document.createElement("div");
+    const clipboardDom2 = document.createElement("div");
     for (let e = 0; e < payload.length; e++) {
       const element = payload[e];
       if (element.type === ElementType.TABLE) {
@@ -4452,7 +4507,7 @@ function createDomFromElementList(elementList, options) {
             if ((_d = td.borderTypes) == null ? void 0 : _d.includes(TdBorder.LEFT)) {
               tdDom.style.borderLeft = borderStyle;
             }
-            const childDom = buildDom(zipElementList(td.value));
+            const childDom = createDomFromElementList(td.value, options);
             tdDom.innerHTML = childDom.innerHTML;
             if (td.backgroundColor) {
               tdDom.style.backgroundColor = td.backgroundColor;
@@ -4461,19 +4516,19 @@ function createDomFromElementList(elementList, options) {
           }
           tableDom.append(trDom);
         }
-        clipboardDom.append(tableDom);
+        clipboardDom2.append(tableDom);
       } else if (element.type === ElementType.HYPERLINK) {
         const a = document.createElement("a");
         a.innerText = element.valueList.map((v) => v.value).join("");
         if (element.url) {
           a.href = element.url;
         }
-        clipboardDom.append(a);
+        clipboardDom2.append(a);
       } else if (element.type === ElementType.TITLE) {
         const h = document.createElement(`h${titleOrderNumberMapping[element.level]}`);
-        const childDom = buildDom(zipElementList(element.valueList));
+        const childDom = buildDom(element.valueList);
         h.innerHTML = childDom.innerHTML;
-        clipboardDom.append(h);
+        clipboardDom2.append(h);
       } else if (element.type === ElementType.LIST) {
         const list = document.createElement(listTypeElementMapping[element.listType]);
         if (element.listStyle) {
@@ -4487,7 +4542,7 @@ function createDomFromElementList(elementList, options) {
           li.innerHTML = childDom.innerHTML;
           list.append(li);
         });
-        clipboardDom.append(list);
+        clipboardDom2.append(list);
       } else if (element.type === ElementType.IMAGE) {
         const img = document.createElement("img");
         if (element.value) {
@@ -4495,33 +4550,33 @@ function createDomFromElementList(elementList, options) {
           img.width = element.width;
           img.height = element.height;
         }
-        clipboardDom.append(img);
+        clipboardDom2.append(img);
       } else if (element.type === ElementType.SEPARATOR) {
         const hr = document.createElement("hr");
-        clipboardDom.append(hr);
+        clipboardDom2.append(hr);
       } else if (element.type === ElementType.CHECKBOX) {
         const checkbox = document.createElement("input");
         checkbox.type = "checkbox";
         if ((_e = element.checkbox) == null ? void 0 : _e.value) {
           checkbox.setAttribute("checked", "true");
         }
-        clipboardDom.append(checkbox);
+        clipboardDom2.append(checkbox);
       } else if (element.type === ElementType.RADIO) {
         const radio = document.createElement("input");
         radio.type = "radio";
         if ((_f = element.radio) == null ? void 0 : _f.value) {
           radio.setAttribute("checked", "true");
         }
-        clipboardDom.append(radio);
+        clipboardDom2.append(radio);
       } else if (element.type === ElementType.TAB) {
         const tab2 = document.createElement("span");
         tab2.innerHTML = `${NON_BREAKING_SPACE}${NON_BREAKING_SPACE}`;
-        clipboardDom.append(tab2);
+        clipboardDom2.append(tab2);
       } else if (element.type === ElementType.CONTROL) {
         const controlElement = document.createElement("span");
-        const childDom = buildDom(zipElementList(((_g = element.control) == null ? void 0 : _g.value) || []));
+        const childDom = buildDom(((_g = element.control) == null ? void 0 : _g.value) || []);
         controlElement.innerHTML = childDom.innerHTML;
-        clipboardDom.append(controlElement);
+        clipboardDom2.append(controlElement);
       } else if (!element.type || element.type === ElementType.LATEX || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
         let text = "";
         if (element.type === ElementType.DATE) {
@@ -4535,23 +4590,44 @@ function createDomFromElementList(elementList, options) {
         if (((_i = payload[e - 1]) == null ? void 0 : _i.type) === ElementType.TITLE) {
           text = text.replace(/^\n/, "");
         }
-        if (dom.tagName === "P") {
-          text = text.replace(/\n$/, "");
-        }
         dom.innerText = text.replace(new RegExp(`${ZERO}`, "g"), "\n");
-        clipboardDom.append(dom);
+        clipboardDom2.append(dom);
       }
     }
-    return clipboardDom;
+    return clipboardDom2;
   }
-  return buildDom(zipElementList(elementList));
+  const clipboardDom = document.createElement("div");
+  const groupElementList = groupElementListByRowFlex(elementList);
+  for (let g = 0; g < groupElementList.length; g++) {
+    const elementGroupRowFlex = groupElementList[g];
+    const isDefaultRowFlex = !elementGroupRowFlex.rowFlex || elementGroupRowFlex.rowFlex === RowFlex.LEFT;
+    const rowFlexDom = document.createElement("div");
+    if (!isDefaultRowFlex) {
+      const firstElement = elementGroupRowFlex.data[0];
+      if (getIsBlockElement(firstElement)) {
+        rowFlexDom.style.display = "flex";
+        rowFlexDom.style.justifyContent = convertRowFlexToJustifyContent(firstElement.rowFlex);
+      } else {
+        rowFlexDom.style.textAlign = convertRowFlexToTextAlign(elementGroupRowFlex.rowFlex);
+      }
+    }
+    rowFlexDom.innerHTML = buildDom(elementGroupRowFlex.data).innerHTML;
+    if (!isDefaultRowFlex) {
+      clipboardDom.append(rowFlexDom);
+    } else {
+      rowFlexDom.childNodes.forEach((child) => {
+        clipboardDom.append(child.cloneNode(true));
+      });
+    }
+  }
+  return clipboardDom;
 }
 function convertTextNodeToElement(textNode) {
   if (!textNode || textNode.nodeType !== 3)
     return null;
   const parentNode = textNode.parentNode;
   const anchorNode = parentNode.nodeName === "FONT" ? parentNode.parentNode : parentNode;
-  const rowFlex = getElementRowFlex(anchorNode);
+  const rowFlex = convertTextAlignToRowFlex(anchorNode);
   const value = textNode.textContent;
   const style = window.getComputedStyle(anchorNode);
   if (!value || anchorNode.nodeName === "STYLE")
@@ -4820,6 +4896,9 @@ function getSlimCloneElementList(elementList) {
     "style"
   ]);
 }
+function getIsBlockElement(element) {
+  return !!(element == null ? void 0 : element.type) && (BLOCK_ELEMENT_TYPE.includes(element.type) || element.imgDisplay === ImageDisplay.INLINE);
+}
 function setClipboardData(data2) {
   localStorage.setItem(EDITOR_CLIPBOARD, JSON.stringify({
     text: data2.text,
@@ -5201,8 +5280,10 @@ class Cursor {
     const cursorLeft = hitLineStartIndex ? leftTop[0] : rightTop[0];
     agentCursorDom.style.left = `${cursorLeft}px`;
     agentCursorDom.style.top = `${cursorTop + cursorHeight - defaultOffsetHeight}px`;
-    if (!isShow)
+    if (!isShow) {
+      this.recoveryCursor();
       return;
+    }
     const isReadonly = this.draw.isReadonly();
     this.cursorDom.style.width = `${width * scale}px`;
     this.cursorDom.style.backgroundColor = color;
@@ -5357,6 +5438,9 @@ class CheckboxControl {
     this.element = element;
     this.control = control;
   }
+  setElement(element) {
+    this.element = element;
+  }
   getElement() {
     return this.element;
   }
@@ -6077,7 +6161,7 @@ function enter(evt, host) {
   evt.preventDefault();
 }
 function left(evt, host) {
-  var _a;
+  var _a, _b;
   const draw = host.getDraw();
   const isReadonly = draw.isReadonly();
   if (isReadonly)
@@ -6094,11 +6178,18 @@ function left(evt, host) {
   const { startIndex, endIndex } = rangeManager.getRange();
   const isCollapsed = rangeManager.getIsCollapsed();
   const elementList = draw.getElementList();
+  const control = draw.getControl();
+  if (draw.getMode() === EditorMode.FORM && control.getActiveControl() && ((_a = elementList[index2]) == null ? void 0 : _a.controlComponent) === ControlComponent.PREFIX) {
+    control.initNextControl({
+      direction: MoveDirection.UP
+    });
+    return;
+  }
   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)) {
+    if (LETTER_REG.test((_b = elementList[moveStartIndex]) == null ? void 0 : _b.value)) {
       let i = moveStartIndex - 1;
       while (i > 0) {
         const element = elementList[i];
@@ -6208,7 +6299,7 @@ function left(evt, host) {
   evt.preventDefault();
 }
 function right(evt, host) {
-  var _a;
+  var _a, _b;
   const draw = host.getDraw();
   const isReadonly = draw.isReadonly();
   if (isReadonly)
@@ -6226,11 +6317,18 @@ function right(evt, host) {
   const { startIndex, endIndex } = rangeManager.getRange();
   const isCollapsed = rangeManager.getIsCollapsed();
   let elementList = draw.getElementList();
+  const control = draw.getControl();
+  if (draw.getMode() === EditorMode.FORM && control.getActiveControl() && ((_a = elementList[index2 + 1]) == null ? void 0 : _a.controlComponent) === ControlComponent.POSTFIX) {
+    control.initNextControl({
+      direction: MoveDirection.DOWN
+    });
+    return;
+  }
   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)) {
+    if (LETTER_REG.test((_b = elementList[moveStartIndex + 1]) == null ? void 0 : _b.value)) {
       let i = moveStartIndex + 2;
       while (i < elementList.length) {
         const element = elementList[i];
@@ -6346,16 +6444,24 @@ function tab(evt, host) {
   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();
+  const control = draw.getControl();
+  const activeControl = control.getActiveControl();
+  if (activeControl) {
+    control.initNextControl({
+      direction: evt.shiftKey ? MoveDirection.UP : MoveDirection.DOWN
+    });
+  } else {
+    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]);
+  }
 }
 function getNextPositionIndex(payload) {
   const { positionList, index: index2, isUp, rowNo, cursorX } = payload;
@@ -7293,11 +7399,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
         });
       }
     });
@@ -9819,23 +9929,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;
@@ -10310,9 +10422,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;
@@ -10395,7 +10513,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();
@@ -10425,7 +10544,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;
   }
@@ -10433,21 +10554,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);
@@ -10461,10 +10596,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();
     }
   }
@@ -10529,6 +10666,9 @@ class TextControl {
     this.element = element;
     this.control = control;
   }
+  setElement(element) {
+    this.element = element;
+  }
   getElement() {
     return this.element;
   }
@@ -10797,9 +10937,11 @@ class Control {
     return positionList[endIndex] || null;
   }
   getPreY() {
+    var _a, _b;
     const height = this.draw.getHeight();
     const pageGap = this.draw.getPageGap();
-    return this.draw.getPageNo() * (height + pageGap);
+    const pageNo = (_b = (_a = this.getPosition()) == null ? void 0 : _a.pageNo) != null ? _b : this.draw.getPageNo();
+    return pageNo * (height + pageGap);
   }
   getRange() {
     return this.range.getRange();
@@ -10879,19 +11021,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();
@@ -11171,6 +11330,7 @@ class Control {
             editorOptions: this.options
           });
           const text = new TextControl(element, this);
+          this.activeControl = text;
           if (value) {
             text.setValue(formatValue, controlContext, controlRule);
           } else {
@@ -11178,6 +11338,7 @@ class Control {
           }
         } else if (type === ControlType.SELECT) {
           const select = new SelectControl(element, this);
+          this.activeControl = select;
           if (value) {
             select.setSelect(value, controlContext, controlRule);
           } else {
@@ -11185,13 +11346,16 @@ class Control {
           }
         } else if (type === ControlType.CHECKBOX) {
           const checkbox = new CheckboxControl(element, this);
+          this.activeControl = checkbox;
           const codes = (value == null ? void 0 : value.split(",")) || [];
           checkbox.setSelect(codes, controlContext, controlRule);
         } else if (type === ControlType.RADIO) {
           const radio = new RadioControl(element, this);
+          this.activeControl = radio;
           const codes = value ? [value] : [];
           radio.setSelect(codes, controlContext, controlRule);
         }
+        this.activeControl = null;
         let newEndIndex = i;
         while (newEndIndex < elementList.length) {
           const nextElement = elementList[newEndIndex];
@@ -11202,6 +11366,7 @@ class Control {
         i = newEndIndex;
       }
     };
+    this.destroyControl();
     const data2 = [
       this.draw.getHeaderElementList(),
       this.draw.getOriginalMainElementList(),
@@ -11331,6 +11496,237 @@ class Control {
   drawBorder(ctx) {
     this.controlBorder.render(ctx);
   }
+  getPreControlContext() {
+    if (!this.activeControl)
+      return null;
+    const position = this.draw.getPosition();
+    const positionContext = position.getPositionContext();
+    if (!positionContext)
+      return null;
+    const controlElement = this.activeControl.getElement();
+    function getPreContext(elementList2, start) {
+      for (let e = start; e > 0; e--) {
+        const element = elementList2[e];
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList || [];
+          for (let r = trList.length - 1; r >= 0; r--) {
+            const tr = trList[r];
+            const tdList = tr.tdList;
+            for (let d = tdList.length - 1; d >= 0; d--) {
+              const td = tdList[d];
+              const context2 = getPreContext(td.value, td.value.length - 1);
+              if (context2) {
+                return {
+                  positionContext: {
+                    isTable: true,
+                    index: e,
+                    trIndex: r,
+                    tdIndex: d,
+                    tdId: td.id,
+                    trId: tr.id,
+                    tableId: element.id
+                  },
+                  nextIndex: context2.nextIndex
+                };
+              }
+            }
+          }
+        }
+        if (!element.controlId || element.controlId === controlElement.controlId) {
+          continue;
+        }
+        let nextIndex = e;
+        while (nextIndex > 0) {
+          const nextElement = elementList2[nextIndex];
+          if (nextElement.controlComponent === ControlComponent.VALUE || nextElement.controlComponent === ControlComponent.PREFIX) {
+            break;
+          }
+          nextIndex--;
+        }
+        return {
+          positionContext: {
+            isTable: false
+          },
+          nextIndex
+        };
+      }
+      return null;
+    }
+    const { startIndex } = this.range.getRange();
+    const elementList = this.getElementList();
+    const context = getPreContext(elementList, startIndex);
+    if (context) {
+      return {
+        positionContext: positionContext.isTable ? positionContext : context.positionContext,
+        nextIndex: context.nextIndex
+      };
+    }
+    if (controlElement.tableId) {
+      const originalElementList = this.draw.getOriginalElementList();
+      const { index: index2, trIndex, tdIndex } = positionContext;
+      const trList = originalElementList[index2].trList;
+      for (let r = trIndex; r >= 0; r--) {
+        const tr = trList[r];
+        const tdList = tr.tdList;
+        for (let d = tdList.length - 1; d >= 0; d--) {
+          if (trIndex === r && d >= tdIndex)
+            continue;
+          const td = tdList[d];
+          const context3 = getPreContext(td.value, td.value.length - 1);
+          if (context3) {
+            return {
+              positionContext: {
+                isTable: true,
+                index: positionContext.index,
+                trIndex: r,
+                tdIndex: d,
+                tdId: td.id,
+                trId: tr.id,
+                tableId: controlElement.tableId
+              },
+              nextIndex: context3.nextIndex
+            };
+          }
+        }
+      }
+      const context2 = getPreContext(originalElementList, index2 - 1);
+      if (context2) {
+        return {
+          positionContext: {
+            isTable: false
+          },
+          nextIndex: context2.nextIndex
+        };
+      }
+    }
+    return null;
+  }
+  getNextControlContext() {
+    if (!this.activeControl)
+      return null;
+    const position = this.draw.getPosition();
+    const positionContext = position.getPositionContext();
+    if (!positionContext)
+      return null;
+    const controlElement = this.activeControl.getElement();
+    function getNextContext(elementList2, start) {
+      for (let e = start; e < elementList2.length; e++) {
+        const element = elementList2[e];
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList || [];
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            const tdList = tr.tdList;
+            for (let d = 0; d < tdList.length; d++) {
+              const td = tdList[d];
+              const context2 = getNextContext(td.value, 0);
+              if (context2) {
+                return {
+                  positionContext: {
+                    isTable: true,
+                    index: e,
+                    trIndex: r,
+                    tdIndex: d,
+                    tdId: td.id,
+                    trId: tr.id,
+                    tableId: element.id
+                  },
+                  nextIndex: context2.nextIndex
+                };
+              }
+            }
+          }
+        }
+        if (!element.controlId || element.controlId === controlElement.controlId) {
+          continue;
+        }
+        return {
+          positionContext: {
+            isTable: false
+          },
+          nextIndex: e
+        };
+      }
+      return null;
+    }
+    const { endIndex } = this.range.getRange();
+    const elementList = this.getElementList();
+    const context = getNextContext(elementList, endIndex);
+    if (context) {
+      return {
+        positionContext: positionContext.isTable ? positionContext : context.positionContext,
+        nextIndex: context.nextIndex
+      };
+    }
+    if (controlElement.tableId) {
+      const originalElementList = this.draw.getOriginalElementList();
+      const { index: index2, trIndex, tdIndex } = positionContext;
+      const trList = originalElementList[index2].trList;
+      for (let r = trIndex; r < trList.length; r++) {
+        const tr = trList[r];
+        const tdList = tr.tdList;
+        for (let d = 0; d < tdList.length; d++) {
+          if (trIndex === r && d <= tdIndex)
+            continue;
+          const td = tdList[d];
+          const context3 = getNextContext(td.value, 0);
+          if (context3) {
+            return {
+              positionContext: {
+                isTable: true,
+                index: positionContext.index,
+                trIndex: r,
+                tdIndex: d,
+                tdId: td.id,
+                trId: tr.id,
+                tableId: controlElement.tableId
+              },
+              nextIndex: context3.nextIndex
+            };
+          }
+        }
+      }
+      const context2 = getNextContext(originalElementList, index2 + 1);
+      if (context2) {
+        return {
+          positionContext: {
+            isTable: false
+          },
+          nextIndex: context2.nextIndex
+        };
+      }
+    }
+    return null;
+  }
+  initNextControl(option = {}) {
+    const { direction = MoveDirection.DOWN } = option;
+    let context = null;
+    if (direction === MoveDirection.UP) {
+      context = this.getPreControlContext();
+    } else {
+      context = this.getNextControlContext();
+    }
+    if (!context)
+      return;
+    const { nextIndex, positionContext } = context;
+    const position = this.draw.getPosition();
+    position.setPositionContext(positionContext);
+    this.draw.getRange().replaceRange({
+      startIndex: nextIndex,
+      endIndex: nextIndex
+    });
+    this.draw.render({
+      curIndex: nextIndex,
+      isCompute: false,
+      isSetCursor: true,
+      isSubmitHistory: false
+    });
+    const positionList = position.getPositionList();
+    this.draw.getCursor().moveCursorToVisible({
+      cursorPosition: positionList[nextIndex],
+      direction
+    });
+  }
 }
 class CheckboxParticle {
   constructor(draw) {
@@ -11561,11 +11957,13 @@ class Previewer {
     this.previewerImage = null;
   }
   _getElementPosition(element, position = null) {
+    var _a;
     let x = 0;
     let y = 0;
     const height = this.draw.getHeight();
     const pageGap = this.draw.getPageGap();
-    const preY = this.draw.getPageNo() * (height + pageGap);
+    const pageNo = (_a = position == null ? void 0 : position.pageNo) != null ? _a : this.draw.getPageNo();
+    const preY = pageNo * (height + pageGap);
     if (element.imgFloatPosition) {
       x = element.imgFloatPosition.x;
       y = element.imgFloatPosition.y + preY;
@@ -11634,11 +12032,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);
@@ -14196,10 +14597,18 @@ class Draw {
       this.footer.recovery();
       this.zone.setZone(EditorZone.MAIN);
     }
+    const { startIndex } = this.range.getRange();
+    const isCollapsed = this.range.getIsCollapsed();
     this.render({
-      isSubmitHistory: false,
-      isSetCursor: false
+      isSetCursor: true,
+      curIndex: startIndex,
+      isSubmitHistory: false
     });
+    if (!isCollapsed) {
+      this.cursor.drawCursor({
+        isShow: false
+      });
+    }
     setTimeout(() => {
       if (this.listener.pageModeChange) {
         this.listener.pageModeChange(payload);
@@ -14458,14 +14867,11 @@ class Draw {
         } else {
           const elementWidth = element.width * scale;
           const elementHeight = element.height * scale;
-          const curRowWidth2 = element.imgDisplay === ImageDisplay.INLINE ? 0 : curRow.width;
-          if (curRowWidth2 + elementWidth > availableWidth) {
-            const surplusWidth = availableWidth - curRowWidth2;
-            const adaptiveWidth = surplusWidth > 0 ? surplusWidth : Math.min(elementWidth, availableWidth);
-            const adaptiveHeight = elementHeight * adaptiveWidth / elementWidth;
-            element.width = adaptiveWidth / scale;
+          if (elementWidth > availableWidth) {
+            const adaptiveHeight = elementHeight * availableWidth / elementWidth;
+            element.width = availableWidth / scale;
             element.height = adaptiveHeight / scale;
-            metrics.width = adaptiveWidth;
+            metrics.width = availableWidth;
             metrics.height = adaptiveHeight;
             metrics.boundingBoxDescent = adaptiveHeight;
           } else {
@@ -14761,29 +15167,16 @@ 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 = ((_g = curRow.elementList[0]) == null ? void 0 : _g.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,
           startIndex: i,
           elementList: [rowElement],
           ascent,
-          rowFlex: ((_h = elementList[i]) == null ? void 0 : _h.rowFlex) || ((_i = elementList[i + 1]) == null ? void 0 : _i.rowFlex),
+          rowFlex: ((_g = elementList[i]) == null ? void 0 : _g.rowFlex) || ((_h = elementList[i + 1]) == null ? void 0 : _h.rowFlex),
           isPageBreak: element.type === ElementType.PAGE_BREAK
         };
-        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_j = rowElement.control) == null ? void 0 : _j.indentation) === ControlIndentation.VALUE_START) {
+        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_i = rowElement.control) == null ? void 0 : _i.indentation) === ControlIndentation.VALUE_START) {
           const preStartIndex = curRow.elementList.findIndex((el) => el.controlId === rowElement.controlId && el.controlComponent !== ControlComponent.PREFIX);
           if (~preStartIndex) {
             const preRowPositionList = this.position.computeRowPosition({
@@ -14804,12 +15197,27 @@ class Draw {
         rowList.push(row);
       } else {
         curRow.width += metrics.width;
-        if (curRow.height < height) {
+        if (i === 0 && getIsBlockElement(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;
   }
@@ -14956,7 +15364,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) {
@@ -15085,7 +15493,7 @@ class Draw {
   _clearPage(pageNo) {
     const ctx = this.ctxList[pageNo];
     const pageDom = this.pageList[pageNo];
-    ctx.clearRect(0, 0, pageDom.width, pageDom.height);
+    ctx.clearRect(0, 0, Math.max(pageDom.width, this.getWidth()), Math.max(pageDom.height, this.getHeight()));
     this.blockParticle.clear();
   }
   _drawPage(payload) {
@@ -15232,6 +15640,9 @@ class Draw {
       this.submitHistory(curIndex);
     }
     nextTick(() => {
+      if (isCompute && this.control.getActiveControl()) {
+        this.control.reAwakeControl();
+      }
       if (isCompute && !this.isReadonly() && this.position.getPositionContext().isTable) {
         this.tableTool.render();
       }
@@ -15412,6 +15823,7 @@ class Command {
     __publicField(this, "executeSetControlExtension");
     __publicField(this, "executeSetControlProperties");
     __publicField(this, "executeSetControlHighlight");
+    __publicField(this, "executeUpdateOptions");
     __publicField(this, "getCatalog");
     __publicField(this, "getImage");
     __publicField(this, "getOptions");
@@ -15517,6 +15929,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);
@@ -15557,6 +15970,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");
@@ -17157,14 +17724,15 @@ class CommandAdapt {
     const { startIndex, endIndex } = this.range.getRange();
     if (!~startIndex && !~endIndex)
       return;
-    const { value, width, height } = payload;
+    const { value, width, height, imgDisplay } = payload;
     this.insertElementList([
       {
         value,
         width,
         height,
         id: getUUID(),
-        type: ElementType.IMAGE
+        type: ElementType.IMAGE,
+        imgDisplay
       }
     ]);
   }
@@ -17341,9 +17909,9 @@ class CommandAdapt {
     if (element.imgDisplay === display)
       return;
     element.imgDisplay = display;
+    const { startIndex, endIndex } = this.range.getRange();
     if (display === ImageDisplay.FLOAT_TOP || display === ImageDisplay.FLOAT_BOTTOM) {
       const positionList = this.position.getPositionList();
-      const { startIndex } = this.range.getRange();
       const { coordinate: { leftTop } } = positionList[startIndex];
       element.imgFloatPosition = {
         x: leftTop[0],
@@ -17354,7 +17922,8 @@ class CommandAdapt {
     }
     this.draw.getPreviewer().clearResizer();
     this.draw.render({
-      isSetCursor: false
+      isSetCursor: true,
+      curIndex: endIndex
     });
   }
   getImage(payload) {
@@ -17449,7 +18018,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,
@@ -17458,7 +18035,10 @@ class CommandAdapt {
       endPageNo,
       rangeRects,
       zone: zone2,
-      isTable
+      isTable,
+      trIndex: trIndex != null ? trIndex : null,
+      tdIndex: tdIndex != null ? tdIndex : null,
+      tableElement
     });
   }
   getRangeRow() {
@@ -17678,6 +18258,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();
   }
@@ -18370,9 +18957,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;
@@ -18383,9 +18977,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() {
@@ -18526,35 +19123,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,
@@ -18784,18 +19352,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");
@@ -18842,47 +19398,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"
-};
-const defaultTableOption = {
-  tdPadding: [0, 5, 5, 5],
-  defaultTrMinHeight: 42,
-  defaultColMinWidth: 40
-};
 class Editor {
   constructor(container, data2, options = {}) {
     __publicField(this, "command");
@@ -18892,82 +19413,7 @@ class Editor {
     __publicField(this, "register");
     __publicField(this, "destroy");
     __publicField(this, "use");
-    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);
-    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,
-      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
-    });
+    const editorOptions = mergeOption(options);
     data2 = deepClone(data2);
     let headerElementList = [];
     let mainElementList = [];