@hufe921/canvas-editor 0.9.73 → 0.9.75

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.73";
+const version = "0.9.75";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -455,7 +455,8 @@ const EDITOR_ELEMENT_ZIP_ATTR = [
   "conceptId",
   "imgDisplay",
   "imgFloatPosition",
-  "textDecoration"
+  "textDecoration",
+  "extension"
 ];
 const TABLE_TD_ZIP_ATTR = [
   "verticalAlign",
@@ -479,6 +480,14 @@ const CONTROL_CONTEXT_ATTR = [
   "controlId",
   "controlComponent"
 ];
+const CONTROL_STYLE_ATTR = [
+  "font",
+  "size",
+  "bold",
+  "highlight",
+  "italic",
+  "strikeout"
+];
 const EDITOR_ELEMENT_CONTEXT_ATTR = [
   ...TABLE_CONTEXT_ATTR,
   ...TITLE_CONTEXT_ATTR,
@@ -3857,20 +3866,21 @@ function formatElementList(elementList, options) {
       const { editorOptions: { control: controlOption, checkbox: checkboxOption } } = options;
       const controlId = getUUID();
       elementList.splice(i, 1);
-      const thePrePostfixArgs = {};
-      if (editorOptions && editorOptions.control) {
-        thePrePostfixArgs.color = editorOptions.control.bracketColor;
-      }
+      const controlContext = pickObject(el, EDITOR_ELEMENT_CONTEXT_ATTR);
+      const controlDefaultStyle = pickObject(el.control, CONTROL_STYLE_ATTR);
+      const thePrePostfixArg = __spreadProps(__spreadValues({}, controlDefaultStyle), {
+        color: editorOptions.control.bracketColor
+      });
       const prefixStrList = splitText(prefix || controlOption.prefix);
       for (let p = 0; p < prefixStrList.length; p++) {
         const value2 = prefixStrList[p];
-        elementList.splice(i, 0, __spreadValues({
+        elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues({}, controlContext), thePrePostfixArg), {
           controlId,
           value: value2,
           type: el.type,
           control: el.control,
           controlComponent: ControlComponent.PREFIX
-        }, thePrePostfixArgs));
+        }));
         i++;
       }
       if (value && value.length || type === ControlType.CHECKBOX || type === ControlType.SELECT && code && (!value || !value.length)) {
@@ -3882,7 +3892,7 @@ function formatElementList(elementList, options) {
             let valueStyleIndex = 0;
             for (let v = 0; v < valueSets.length; v++) {
               const valueSet = valueSets[v];
-              elementList.splice(i, 0, {
+              elementList.splice(i, 0, __spreadProps(__spreadValues({}, controlContext), {
                 controlId,
                 value: "",
                 type: el.type,
@@ -3892,13 +3902,13 @@ function formatElementList(elementList, options) {
                   code: valueSet.code,
                   value: codeList.includes(valueSet.code)
                 }
-              });
+              }));
               i++;
               const valueStrList = splitText(valueSet.value);
               for (let e = 0; e < valueStrList.length; e++) {
                 const value2 = valueStrList[e];
                 const isLastLetter = e === valueStrList.length - 1;
-                elementList.splice(i, 0, __spreadProps(__spreadValues({}, valueStyleList[valueStyleIndex]), {
+                elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, controlContext), controlDefaultStyle), valueStyleList[valueStyleIndex]), {
                   controlId,
                   value: value2 === "\n" ? ZERO : value2,
                   letterSpacing: isLastLetter ? checkboxOption.gap : 0,
@@ -3929,7 +3939,7 @@ function formatElementList(elementList, options) {
           for (let v = 0; v < valueList.length; v++) {
             const element = valueList[v];
             const value2 = element.value;
-            elementList.splice(i, 0, __spreadProps(__spreadValues({}, element), {
+            elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, controlContext), controlDefaultStyle), element), {
               controlId,
               value: value2 === "\n" ? ZERO : value2,
               type: element.type || ElementType.TEXT,
@@ -3940,33 +3950,32 @@ function formatElementList(elementList, options) {
           }
         }
       } else if (placeholder) {
-        const thePlaceholderArgs = {};
-        if (editorOptions && editorOptions.control) {
-          thePlaceholderArgs.color = editorOptions.control.placeholderColor;
-        }
+        const thePlaceholderArgs = __spreadProps(__spreadValues({}, controlDefaultStyle), {
+          color: editorOptions.control.placeholderColor
+        });
         const placeholderStrList = splitText(placeholder);
         for (let p = 0; p < placeholderStrList.length; p++) {
           const value2 = placeholderStrList[p];
-          elementList.splice(i, 0, __spreadValues({
+          elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues({}, controlContext), thePlaceholderArgs), {
             controlId,
             value: value2 === "\n" ? ZERO : value2,
             type: el.type,
             control: el.control,
             controlComponent: ControlComponent.PLACEHOLDER
-          }, thePlaceholderArgs));
+          }));
           i++;
         }
       }
       const postfixStrList = splitText(postfix || controlOption.postfix);
       for (let p = 0; p < postfixStrList.length; p++) {
         const value2 = postfixStrList[p];
-        elementList.splice(i, 0, __spreadValues({
+        elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues({}, controlContext), thePrePostfixArg), {
           controlId,
           value: value2,
           type: el.type,
           control: el.control,
           controlComponent: ControlComponent.POSTFIX
-        }, thePrePostfixArgs));
+        }));
         i++;
       }
       i--;
@@ -4172,7 +4181,8 @@ function zipElementList(payload) {
     } else if (element.controlId) {
       const controlId = element.controlId;
       if (controlId) {
-        const control = element.control;
+        const controlDefaultStyle = pickObject(element, CONTROL_STYLE_ATTR);
+        const control = __spreadValues(__spreadValues({}, element.control), controlDefaultStyle);
         const controlElement = {
           type: ElementType.CONTROL,
           value: "",
@@ -5724,6 +5734,12 @@ function mousemove(evt, host) {
     }
     if (start === end)
       return;
+    const elementList = draw.getElementList();
+    const startElement = elementList[start + 1];
+    const endElement = elementList[end];
+    if ((startElement == null ? void 0 : startElement.controlComponent) === ControlComponent.PLACEHOLDER && (endElement == null ? void 0 : endElement.controlComponent) === ControlComponent.PLACEHOLDER && startElement.controlId === endElement.controlId) {
+      return;
+    }
     rangeManager.setRange(start, end);
   }
   draw.render({
@@ -6723,7 +6739,7 @@ function getWordRangeBySegmenter(host) {
   const paragraphInfo = rangeManager.getRangeParagraphInfo();
   if (!paragraphInfo)
     return null;
-  const paragraphText = ((_a = paragraphInfo == null ? void 0 : paragraphInfo.elementList) == null ? void 0 : _a.map((e) => !e.type || TEXTLIKE_ELEMENT_TYPE.includes(e.type) && e.controlComponent !== ControlComponent.CHECKBOX ? e.value : ZERO).join("")) || "";
+  const paragraphText = ((_a = paragraphInfo == null ? void 0 : paragraphInfo.elementList) == null ? void 0 : _a.map((e) => !e.type || e.type !== ElementType.CONTROL && TEXTLIKE_ELEMENT_TYPE.includes(e.type) ? e.value : ZERO).join("")) || "";
   if (!paragraphText)
     return null;
   const cursorStartIndex = cursorPosition.index;
@@ -7239,6 +7255,9 @@ class HistoryManager {
   isCanRedo() {
     return !!this.redoStack.length;
   }
+  isStackEmpty() {
+    return !this.undoStack.length && !this.redoStack.length;
+  }
   recovery() {
     this.undoStack = [];
     this.redoStack = [];
@@ -7311,10 +7330,11 @@ class Position {
     let index2 = startIndex;
     for (let i = 0; i < rowList.length; i++) {
       const curRow = rowList[i];
+      const curRowWidth = curRow.width + (curRow.offsetX || 0);
       if (curRow.rowFlex === RowFlex.CENTER) {
-        x += (innerWidth - curRow.width) / 2;
+        x += (innerWidth - curRowWidth) / 2;
       } else if (curRow.rowFlex === RowFlex.RIGHT) {
-        x += innerWidth - curRow.width;
+        x += innerWidth - curRowWidth;
       }
       x += curRow.offsetX || 0;
       const tablePreX = x;
@@ -8020,6 +8040,7 @@ class RangeManager {
     this.setRange(range.startIndex, range.endIndex, range.tableId, range.startTdIndex, range.endTdIndex, range.startTrIndex, range.endTrIndex);
   }
   setRangeStyle() {
+    var _a;
     const rangeStyleChangeListener = this.listener.rangeStyleChange;
     const isSubscribeRangeStyleChange = this.eventBus.isSubscribe("rangeStyleChange");
     if (!rangeStyleChangeListener && !isSubscribeRangeStyleChange)
@@ -8046,8 +8067,8 @@ class RangeManager {
     const bold = !~curElementList.findIndex((el) => !el.bold);
     const italic = !~curElementList.findIndex((el) => !el.italic);
     const underline = !~curElementList.findIndex((el) => {
-      var _a;
-      return !el.underline && !((_a = el.control) == null ? void 0 : _a.underline);
+      var _a2;
+      return !el.underline && !((_a2 = el.control) == null ? void 0 : _a2.underline);
     });
     const strikeout = !~curElementList.findIndex((el) => !el.strikeout);
     const color = curElement.color || null;
@@ -8063,6 +8084,7 @@ class RangeManager {
     const undo = this.historyManager.isCanUndo();
     const redo = this.historyManager.isCanRedo();
     const groupIds = curElement.groupIds || null;
+    const extension = (_a = curElement.extension) != null ? _a : null;
     const rangeStyle = {
       type,
       undo,
@@ -8083,7 +8105,8 @@ class RangeManager {
       listType,
       listStyle,
       groupIds,
-      textDecoration
+      textDecoration,
+      extension
     };
     if (rangeStyleChangeListener) {
       rangeStyleChangeListener(rangeStyle);
@@ -8123,7 +8146,8 @@ class RangeManager {
       listType: null,
       listStyle: null,
       groupIds: null,
-      textDecoration: null
+      textDecoration: null,
+      extension: null
     };
     if (rangeStyleChangeListener) {
       rangeStyleChangeListener(rangeStyle);
@@ -8553,7 +8577,7 @@ class Search {
       let index2 = text.indexOf(payload2);
       while (index2 !== -1) {
         matchStartIndexList.push(index2);
-        index2 = text.indexOf(payload2, index2 + 1);
+        index2 = text.indexOf(payload2, index2 + payload2.length);
       }
       for (let m = 0; m < matchStartIndexList.length; m++) {
         const startIndex = matchStartIndexList[m];
@@ -10085,6 +10109,47 @@ class ControlSearch {
     ctx.restore();
   }
 }
+class ControlBorder {
+  constructor(draw) {
+    __publicField(this, "borderRect");
+    __publicField(this, "options");
+    this.borderRect = this.clearBorderInfo();
+    this.options = draw.getOptions();
+  }
+  clearBorderInfo() {
+    this.borderRect = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    return this.borderRect;
+  }
+  recordBorderInfo(x, y, width, height) {
+    const isFirstRecord = !this.borderRect.width;
+    if (isFirstRecord) {
+      this.borderRect.x = x;
+      this.borderRect.y = y;
+      this.borderRect.height = height;
+    }
+    this.borderRect.width += width;
+  }
+  render(ctx) {
+    if (!this.borderRect.width)
+      return;
+    const { scale, control: { borderWidth, borderColor } } = this.options;
+    const { x, y, width, height } = this.borderRect;
+    ctx.save();
+    ctx.translate(0, 1 * scale);
+    ctx.lineWidth = borderWidth * scale;
+    ctx.strokeStyle = borderColor;
+    ctx.beginPath();
+    ctx.rect(x, y, width, height);
+    ctx.stroke();
+    ctx.restore();
+    this.clearBorderInfo();
+  }
+}
 class SelectControl {
   constructor(element, control) {
     __publicField(this, "element");
@@ -10227,7 +10292,9 @@ class SelectControl {
     if (!valueSet)
       return;
     const elementList = context.elementList || this.control.getElementList();
-    const styleElement = pickObject(this.getValue(context)[0], EDITOR_ELEMENT_STYLE_ATTR);
+    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);
     if (!~prefixIndex)
       return;
@@ -10360,7 +10427,11 @@ class TextControl {
       this.control.removePlaceholder(startIndex, context);
     }
     const startElement = elementList[startIndex];
-    const anchorElement = startElement.type && !TEXTLIKE_ELEMENT_TYPE.includes(startElement.type) || startElement.controlComponent === ControlComponent.PREFIX ? pickObject(startElement, ["control", "controlId"]) : omitObject(startElement, ["type"]);
+    const anchorElement = startElement.type && !TEXTLIKE_ELEMENT_TYPE.includes(startElement.type) || startElement.controlComponent === ControlComponent.PREFIX ? pickObject(startElement, [
+      "control",
+      "controlId",
+      ...CONTROL_STYLE_ATTR
+    ]) : omitObject(startElement, ["type"]);
     const start = range.startIndex + 1;
     for (let i = 0; i < data2.length; i++) {
       const newElement = __spreadProps(__spreadValues(__spreadValues({}, anchorElement), data2[i]), {
@@ -10461,6 +10532,7 @@ class TextControl {
 }
 class Control {
   constructor(draw) {
+    __publicField(this, "controlBorder");
     __publicField(this, "draw");
     __publicField(this, "range");
     __publicField(this, "listener");
@@ -10469,6 +10541,7 @@ class Control {
     __publicField(this, "options");
     __publicField(this, "controlOptions");
     __publicField(this, "activeControl");
+    this.controlBorder = new ControlBorder(draw);
     this.draw = draw;
     this.range = draw.getRange();
     this.listener = draw.getListener();
@@ -11091,6 +11164,12 @@ class Control {
     }
     return zipElementList(controlElementList);
   }
+  recordBorderInfo(x, y, width, height) {
+    this.controlBorder.recordBorderInfo(x, y, width, height);
+  }
+  drawBorder(ctx) {
+    this.controlBorder.render(ctx);
+  }
 }
 class CheckboxParticle {
   constructor(draw) {
@@ -12229,25 +12308,36 @@ const _IFrameBlock = class {
     __publicField(this, "element");
     this.element = element;
   }
+  _defineIframeProperties(iframeWindow) {
+    Object.defineProperties(iframeWindow, {
+      parent: {
+        get: () => null
+      },
+      __POWERED_BY_CANVAS_EDITOR__: {
+        get: () => true
+      }
+    });
+  }
   render(blockItemContainer) {
-    var _a;
+    var _a, _b;
     const block = this.element.block;
     const iframe = document.createElement("iframe");
+    iframe.setAttribute("data-id", this.element.id);
     iframe.sandbox.add(..._IFrameBlock.sandbox);
     iframe.style.border = "none";
     iframe.style.width = "100%";
     iframe.style.height = "100%";
-    iframe.src = ((_a = block.iframeBlock) == null ? void 0 : _a.src) || "";
+    if ((_a = block.iframeBlock) == null ? void 0 : _a.src) {
+      iframe.src = block.iframeBlock.src;
+    } else if ((_b = block.iframeBlock) == null ? void 0 : _b.srcdoc) {
+      iframe.srcdoc = block.iframeBlock.srcdoc;
+    }
     blockItemContainer.append(iframe);
+    this._defineIframeProperties(iframe.contentWindow);
   }
 };
 let IFrameBlock = _IFrameBlock;
-__publicField(IFrameBlock, "sandbox", [
-  "allow-forms",
-  "allow-scripts",
-  "allow-same-origin",
-  "allow-popups"
-]);
+__publicField(IFrameBlock, "sandbox", ["allow-scripts", "allow-same-origin"]);
 class VideoBlock {
   constructor(element) {
     __publicField(this, "element");
@@ -13001,6 +13091,41 @@ class ListParticle {
     }
   }
 }
+const _LineBreakParticle = class {
+  constructor(draw) {
+    __publicField(this, "options");
+    this.options = draw.getOptions();
+  }
+  render(ctx, element, x, y) {
+    const { scale, lineBreak: { color, lineWidth } } = this.options;
+    ctx.save();
+    ctx.beginPath();
+    const top = y - _LineBreakParticle.HEIGHT * scale / 2;
+    const left2 = x + element.metrics.width;
+    ctx.translate(left2, top);
+    ctx.scale(scale, scale);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(8, 0);
+    ctx.lineTo(12, 0);
+    ctx.lineTo(12, 6);
+    ctx.lineTo(3, 6);
+    ctx.moveTo(3, 6);
+    ctx.lineTo(6, 3);
+    ctx.moveTo(3, 6);
+    ctx.lineTo(6, 9);
+    ctx.stroke();
+    ctx.closePath();
+    ctx.restore();
+  }
+};
+let LineBreakParticle = _LineBreakParticle;
+__publicField(LineBreakParticle, "WIDTH", 12);
+__publicField(LineBreakParticle, "HEIGHT", 9);
+__publicField(LineBreakParticle, "GAP", 3);
 class Placeholder {
   constructor(draw) {
     __publicField(this, "draw");
@@ -13033,10 +13158,14 @@ class Placeholder {
     });
   }
   _computePositionList() {
+    const { lineBreak, scale } = this.options;
     const headerExtraHeight = this.draw.getHeader().getExtraHeight();
     const innerWidth = this.draw.getInnerWidth();
     const margins = this.draw.getMargins();
-    const startX = margins[3];
+    let startX = margins[3];
+    if (!lineBreak.disabled) {
+      startX += (LineBreakParticle.WIDTH + LineBreakParticle.GAP) * scale;
+    }
     const startY = margins[0] + headerExtraHeight;
     this.position.computePageRowPosition({
       positionList: this.positionList,
@@ -13075,7 +13204,8 @@ class Placeholder {
       rowList: this.rowList,
       pageNo: 0,
       startIndex: 0,
-      innerWidth
+      innerWidth,
+      isDrawLineBreak: false
     });
     ctx.restore();
   }
@@ -13290,6 +13420,7 @@ class Draw {
     __publicField(this, "checkboxParticle");
     __publicField(this, "blockParticle");
     __publicField(this, "listParticle");
+    __publicField(this, "lineBreakParticle");
     __publicField(this, "control");
     __publicField(this, "workerManager");
     __publicField(this, "scrollObserver");
@@ -13351,6 +13482,7 @@ class Draw {
     this.checkboxParticle = new CheckboxParticle(this);
     this.blockParticle = new BlockParticle(this);
     this.listParticle = new ListParticle(this);
+    this.lineBreakParticle = new LineBreakParticle(this);
     this.control = new Control(this);
     this.scrollObserver = new ScrollObserver(this);
     this.selectionObserver = new SelectionObserver(this);
@@ -13374,7 +13506,8 @@ class Draw {
     this.printModeData = null;
     this.render({
       isInit: true,
-      isSetCursor: false
+      isSetCursor: false,
+      isFirstRender: true
     });
   }
   getLetterReg() {
@@ -13403,6 +13536,7 @@ class Draw {
       this.setEditorData(this.printModeData);
       this.printModeData = null;
     }
+    this.range.clearRange();
     this.mode = payload;
     this.render({
       isSetCursor: false,
@@ -13580,6 +13714,9 @@ class Draw {
   getRange() {
     return this.range;
   }
+  getLineBreakParticle() {
+    return this.lineBreakParticle;
+  }
   getHeaderElementList() {
     return this.header.getElementList();
   }
@@ -13991,7 +14128,8 @@ class Draw {
     });
     this.historyManager.recovery();
     this.render({
-      isSetCursor: false
+      isSetCursor: false,
+      isFirstRender: true
     });
   }
   setEditorData(payload) {
@@ -14058,6 +14196,10 @@ class Draw {
   getElementSize(el) {
     return el.actualSize || el.size || this.options.defaultSize;
   }
+  getElementRowMargin(el) {
+    const { defaultBasicRowMarginHeight, defaultRowMargin, scale } = this.options;
+    return defaultBasicRowMarginHeight * (el.rowMargin || defaultRowMargin) * scale;
+  }
   computeRowList(payload) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { innerWidth, elementList, isPagingMode = false } = payload;
@@ -14368,8 +14510,10 @@ class Draw {
           const word = `${(preElement == null ? void 0 : preElement.value) || ""}${element.value}`;
           if (this.WORD_LIKE_REG.test(word)) {
             const { width, endElement } = this.textParticle.measureWord(ctx, elementList, i);
-            curRowWidth += width;
-            nextElement = endElement;
+            if (width <= availableWidth) {
+              curRowWidth += width;
+              nextElement = endElement;
+            }
           }
           curRowWidth += this.textParticle.measurePunctuationWidth(ctx, nextElement);
         }
@@ -14382,7 +14526,10 @@ class Draw {
         }
       }
       listId = element.listId;
-      if (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 || curRowWidth > availableWidth || i !== 0 && element.value === ZERO || (preElement == null ? void 0 : preElement.listId) !== element.listId) {
+      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;
         }
@@ -14492,11 +14639,11 @@ class Draw {
     }
   }
   drawRow(ctx, payload) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     this._drawHighlight(ctx, payload);
-    const { rowList, pageNo, elementList, positionList, startIndex, zone: zone2 } = payload;
+    const { scale, 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 { scale, tdPadding, defaultBasicRowMarginHeight, defaultRowMargin, group: group2 } = this.options;
     const { isCrossRowCol, tableId } = this.range.getRange();
     let index2 = startIndex;
     for (let i = 0; i < rowList.length; i++) {
@@ -14574,11 +14721,23 @@ class Draw {
             this.textParticle.complete();
           }
         }
-        if (element.underline || ((_a = element.control) == null ? void 0 : _a.underline)) {
+        if (isDrawLineBreak && !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) {
+          if (((_b = preElement == null ? void 0 : preElement.control) == null ? void 0 : _b.border) && preElement.controlId !== element.controlId) {
+            this.control.drawBorder(ctx);
+          }
+          const rowMargin = this.getElementRowMargin(element);
+          this.control.recordBorderInfo(x, y + rowMargin, element.metrics.width, curRow.height - 2 * rowMargin);
+        } else if ((_c = preElement == null ? void 0 : preElement.control) == null ? void 0 : _c.border) {
+          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) {
             this.underline.render(ctx);
           }
-          const rowMargin = defaultBasicRowMarginHeight * (element.rowMargin || defaultRowMargin) * scale;
+          const rowMargin = this.getElementRowMargin(element);
           const offsetX = element.left || 0;
           let offsetY2 = 0;
           if (element.type === ElementType.SUBSCRIPT) {
@@ -14587,8 +14746,8 @@ class Draw {
             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, (_b = element.textDecoration) == null ? void 0 : _b.style);
-        } else if ((preElement == null ? void 0 : preElement.underline) || ((_c = preElement == null ? void 0 : preElement.control) == null ? void 0 : _c.underline)) {
+          this.underline.recordFillInfo(ctx, x - offsetX, y + curRow.height - rowMargin + offsetY2, metrics.width + offsetX, 0, color, (_e = element.textDecoration) == null ? void 0 : _e.style);
+        } else if ((preElement == null ? void 0 : preElement.underline) || ((_f = preElement == null ? void 0 : preElement.control) == null ? void 0 : _f.underline)) {
           this.underline.render(ctx);
         }
         if (element.strikeout) {
@@ -14651,7 +14810,8 @@ class Draw {
                 pageNo,
                 startIndex: 0,
                 innerWidth: (td.width - tdPaddingWidth) * scale,
-                zone: zone2
+                zone: zone2,
+                isDrawLineBreak
               });
             }
           }
@@ -14661,6 +14821,7 @@ class Draw {
         this.listParticle.drawListStyle(ctx, curRow, positionList[curRow.startIndex]);
       }
       this.textParticle.complete();
+      this.control.drawBorder(ctx);
       this.underline.render(ctx);
       this.strikeout.render(ctx);
       this.group.render(ctx);
@@ -14786,7 +14947,7 @@ class Draw {
   render(payload) {
     var _a;
     const { header, footer } = this.options;
-    const { isSubmitHistory = true, isSetCursor = true, isCompute = true, isLazy = true, isInit = false, isSourceHistory = false } = payload || {};
+    const { isSubmitHistory = true, isSetCursor = true, isCompute = true, isLazy = true, isInit = false, isSourceHistory = false, isFirstRender = false } = payload || {};
     let { curIndex } = payload || {};
     const innerWidth = this.getInnerWidth();
     const isPagingMode = this.getIsPagingMode();
@@ -14849,7 +15010,7 @@ class Draw {
       }
       this.cursor.drawCursor();
     }
-    if (isSubmitHistory) {
+    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());
@@ -16741,7 +16902,7 @@ class CommandAdapt {
     if (!~startIndex && !~endIndex)
       return;
     const { value, width, height } = payload;
-    this.draw.insertElementList([
+    this.insertElementList([
       {
         value,
         width,
@@ -18058,7 +18219,9 @@ const defaultControlOption = {
   placeholderColor: "#9c9b9b",
   bracketColor: "#000000",
   prefix: "{",
-  postfix: "}"
+  postfix: "}",
+  borderWidth: 1,
+  borderColor: "#000000"
 };
 const defaultCheckboxOption = {
   width: 14,
@@ -18374,6 +18537,11 @@ const defaultBackground = {
   size: BackgroundSize.COVER,
   repeat: BackgroundRepeat.NO_REPEAT
 };
+const defaultLineBreak = {
+  disabled: true,
+  color: "#CCCCCC",
+  lineWidth: 1.5
+};
 class Editor {
   constructor(container, data2, options = {}) {
     __publicField(this, "command");
@@ -18396,6 +18564,7 @@ class Editor {
     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 editorOptions = __spreadProps(__spreadValues({
       mode: EditorMode.EDIT,
       defaultType: "TEXT",
@@ -18452,7 +18621,8 @@ class Editor {
       group: groupOptions,
       pageBreak: pageBreakOptions,
       zone: zoneOptions,
-      background: backgroundOptions
+      background: backgroundOptions,
+      lineBreak: lineBreakOptions
     });
     data2 = deepClone(data2);
     let headerElementList = [];