@hufe921/canvas-editor 0.9.78 → 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.78";
+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,8 +4896,8 @@ 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 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({
@@ -5204,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;
@@ -6083,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)
@@ -6100,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];
@@ -6214,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)
@@ -6232,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];
@@ -6352,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;
@@ -10837,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();
@@ -11228,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 {
@@ -11235,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 {
@@ -11242,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];
@@ -11259,6 +11366,7 @@ class Control {
         i = newEndIndex;
       }
     };
+    this.destroyControl();
     const data2 = [
       this.draw.getHeaderElementList(),
       this.draw.getOriginalMainElementList(),
@@ -11388,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) {
@@ -11618,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;
@@ -14256,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);
@@ -14518,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 {
@@ -14851,7 +15197,7 @@ class Draw {
         rowList.push(row);
       } else {
         curRow.width += metrics.width;
-        if (i === 0 && getIsInlineElement(elementList[1])) {
+        if (i === 0 && getIsBlockElement(elementList[1])) {
           curRow.height = defaultBasicRowMarginHeight;
           curRow.ascent = defaultBasicRowMarginHeight;
         } else if (curRow.height < height) {
@@ -15147,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) {
@@ -17378,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
       }
     ]);
   }
@@ -17562,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],
@@ -17575,7 +17922,8 @@ class CommandAdapt {
     }
     this.draw.getPreviewer().clearResizer();
     this.draw.render({
-      isSetCursor: false
+      isSetCursor: true,
+      curIndex: endIndex
     });
   }
   getImage(payload) {