@hufe921/canvas-editor 0.9.90 → 0.9.92

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.90";
+const version = "0.9.92";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -477,6 +477,8 @@ const EDITOR_ELEMENT_ZIP_ATTR = [
 ];
 const TABLE_TD_ZIP_ATTR = [
   "conceptId",
+  "extension",
+  "externalId",
   "verticalAlign",
   "backgroundColor",
   "borderTypes",
@@ -3768,11 +3770,9 @@ function unzipElementList(elementList) {
   return result;
 }
 function formatElementList(elementList, options) {
-  const { isHandleFirstElement, editorOptions } = __spreadValues({
-    isHandleFirstElement: true
-  }, options);
+  const { isHandleFirstElement = true, isForceCompensation = false, editorOptions } = options;
   const startElement = elementList[0];
-  if (isHandleFirstElement && (startElement == null ? void 0 : startElement.type) !== ElementType.LIST && ((startElement == null ? void 0 : startElement.type) && startElement.type !== ElementType.TEXT || !START_LINE_BREAK_REG.test(startElement == null ? void 0 : startElement.value))) {
+  if (isForceCompensation || isHandleFirstElement && (startElement == null ? void 0 : startElement.type) !== ElementType.LIST && ((startElement == null ? void 0 : startElement.type) && startElement.type !== ElementType.TEXT || !START_LINE_BREAK_REG.test(startElement == null ? void 0 : startElement.value))) {
     elementList.unshift({
       value: ZERO
     });
@@ -3784,7 +3784,8 @@ function formatElementList(elementList, options) {
       elementList.splice(i, 1);
       const valueList = el.valueList || [];
       formatElementList(valueList, __spreadProps(__spreadValues({}, options), {
-        isHandleFirstElement: false
+        isHandleFirstElement: false,
+        isForceCompensation: false
       }));
       if (valueList.length) {
         const titleId = getUUID();
@@ -3813,7 +3814,8 @@ function formatElementList(elementList, options) {
       elementList.splice(i, 1);
       const valueList = el.valueList || [];
       formatElementList(valueList, __spreadProps(__spreadValues({}, options), {
-        isHandleFirstElement: true
+        isHandleFirstElement: true,
+        isForceCompensation: false
       }));
       if (valueList.length) {
         const listId = getUUID();
@@ -3847,7 +3849,8 @@ function formatElementList(elementList, options) {
             const tdId = getUUID();
             td.id = tdId;
             formatElementList(td.value, __spreadProps(__spreadValues({}, options), {
-              isHandleFirstElement: true
+              isHandleFirstElement: true,
+              isForceCompensation: true
             }));
             for (let v = 0; v < td.value.length; v++) {
               const value = td.value[v];
@@ -4002,7 +4005,8 @@ function formatElementList(elementList, options) {
             }
           }
           formatElementList(valueList, __spreadProps(__spreadValues({}, options), {
-            isHandleFirstElement: false
+            isHandleFirstElement: false,
+            isForceCompensation: false
           }));
           for (let v = 0; v < valueList.length; v++) {
             const element = valueList[v];
@@ -4055,7 +4059,7 @@ function formatElementList(elementList, options) {
       }
       el = elementList[i];
     }
-    if (el.value === "\n") {
+    if (el.value === "\n" || el.value == "\r\n") {
       el.value = ZERO;
     }
     if (el.type === ElementType.IMAGE || el.type === ElementType.BLOCK) {
@@ -4354,10 +4358,11 @@ function formatElementContext(sourceElementList, formatElementList2, anchorIndex
   let copyElement = getAnchorElement(sourceElementList, anchorIndex);
   if (!copyElement)
     return;
-  if ((_a = copyElement.title) == null ? void 0 : _a.disabled) {
+  const { isBreakWhenWrap = false, editorOptions } = options || {};
+  const { mode } = editorOptions || {};
+  if (mode !== EditorMode.DESIGN && ((_a = copyElement.title) == null ? void 0 : _a.disabled)) {
     copyElement = omitObject(copyElement, TITLE_CONTEXT_ATTR);
   }
-  const { isBreakWhenWrap = false } = options || {};
   let isBreakWarped = false;
   for (let e = 0; e < formatElementList2.length; e++) {
     const targetElement = formatElementList2[e];
@@ -4373,7 +4378,7 @@ function formatElementContext(sourceElementList, formatElementList2, anchorIndex
       continue;
     }
     if ((_c = targetElement.valueList) == null ? void 0 : _c.length) {
-      formatElementContext(sourceElementList, targetElement.valueList, anchorIndex);
+      formatElementContext(sourceElementList, targetElement.valueList, anchorIndex, options);
     }
     const cloneAttr = [...EDITOR_ELEMENT_CONTEXT_ATTR];
     if (!getIsBlockElement(targetElement)) {
@@ -5026,7 +5031,8 @@ function pasteElement(host, elementList) {
       }
     }
     formatElementContext(originalElementList, elementList, startIndex, {
-      isBreakWhenWrap: true
+      isBreakWhenWrap: true,
+      editorOptions: draw.getOptions()
     });
   }
   draw.insertElementList(elementList);
@@ -5061,7 +5067,9 @@ function pasteImage(host, file) {
         height: image.height
       };
       if (~startIndex) {
-        formatElementContext(elementList, [imageElement], startIndex);
+        formatElementContext(elementList, [imageElement], startIndex, {
+          editorOptions: draw.getOptions()
+        });
       }
       draw.insertElementList([imageElement]);
     };
@@ -5389,6 +5397,7 @@ var EditorMode;
   EditorMode2["READONLY"] = "readonly";
   EditorMode2["FORM"] = "form";
   EditorMode2["PRINT"] = "print";
+  EditorMode2["DESIGN"] = "design";
 })(EditorMode || (EditorMode = {}));
 var EditorZone;
 (function(EditorZone2) {
@@ -5593,7 +5602,10 @@ class CheckboxControl {
       nextIndex++;
     }
     control.code = codes.join(",");
-    this.control.repaintControl();
+    this.control.repaintControl({
+      curIndex: startIndex,
+      isSetCursor: false
+    });
   }
   keydown(evt) {
     if (this.control.getIsDisabledControl()) {
@@ -5645,7 +5657,10 @@ class RadioControl extends CheckboxControl {
       nextIndex++;
     }
     control.code = codes.join(",");
-    this.control.repaintControl();
+    this.control.repaintControl({
+      curIndex: startIndex,
+      isSetCursor: false
+    });
   }
 }
 function setRangeCache(host) {
@@ -5658,7 +5673,40 @@ function setRangeCache(host) {
   host.cachePositionList = position.getPositionList();
   host.cachePositionContext = position.getPositionContext();
 }
+function hitCheckbox(element, draw) {
+  const { checkbox, control } = element;
+  if (!control) {
+    draw.getCheckboxParticle().setSelect(element);
+  } else {
+    const codes = (control == null ? void 0 : control.code) ? control.code.split(",") : [];
+    if (checkbox == null ? void 0 : checkbox.value) {
+      const codeIndex = codes.findIndex((c) => c === checkbox.code);
+      codes.splice(codeIndex, 1);
+    } else {
+      if (checkbox == null ? void 0 : checkbox.code) {
+        codes.push(checkbox.code);
+      }
+    }
+    const activeControl = draw.getControl().getActiveControl();
+    if (activeControl instanceof CheckboxControl) {
+      activeControl.setSelect(codes);
+    }
+  }
+}
+function hitRadio(element, draw) {
+  const { radio, control } = element;
+  if (!control) {
+    draw.getRadioParticle().setSelect(element);
+  } else {
+    const codes = (radio == null ? void 0 : radio.code) ? [radio.code] : [];
+    const activeControl = draw.getControl().getActiveControl();
+    if (activeControl instanceof RadioControl) {
+      activeControl.setSelect(codes);
+    }
+  }
+}
 function mousedown(evt, host) {
+  var _a, _b;
   if (evt.button === MouseEventButton.RIGHT)
     return;
   const draw = host.getDraw();
@@ -5719,37 +5767,22 @@ function mousedown(evt, host) {
     }
     rangeManager.setRange(startIndex, endIndex);
     position.setCursorPosition(positionList[curIndex]);
-    const isSetCheckbox = isDirectHitCheckbox && !isReadonly;
-    const isSetRadio = isDirectHitRadio && !isReadonly;
-    if (isSetCheckbox) {
-      const { checkbox, control } = curElement;
-      if (!control) {
-        draw.getCheckboxParticle().setSelect(curElement);
-      } else {
-        const codes = (control == null ? void 0 : control.code) ? control.code.split(",") : [];
-        if (checkbox == null ? void 0 : checkbox.value) {
-          const codeIndex = codes.findIndex((c) => c === checkbox.code);
-          codes.splice(codeIndex, 1);
-        } else {
-          if (checkbox == null ? void 0 : checkbox.code) {
-            codes.push(checkbox.code);
-          }
-        }
-        const activeControl = draw.getControl().getActiveControl();
-        if (activeControl instanceof CheckboxControl) {
-          activeControl.setSelect(codes);
-        }
-      }
-    } else if (isSetRadio) {
-      const { control, radio } = curElement;
-      if (!control) {
-        draw.getRadioParticle().setSelect(curElement);
-      } else {
-        const codes = (radio == null ? void 0 : radio.code) ? [radio.code] : [];
-        const activeControl = draw.getControl().getActiveControl();
-        if (activeControl instanceof RadioControl) {
-          activeControl.setSelect(codes);
+    if (isDirectHitCheckbox && !isReadonly) {
+      hitCheckbox(curElement, draw);
+    } else if (isDirectHitRadio && !isReadonly) {
+      hitRadio(curElement, draw);
+    } else if (curElement.controlComponent === ControlComponent.VALUE && (((_a = curElement.control) == null ? void 0 : _a.type) === ControlType.CHECKBOX || ((_b = curElement.control) == null ? void 0 : _b.type) === ControlType.RADIO)) {
+      let preIndex = curIndex;
+      while (preIndex > 0) {
+        const preElement = elementList[preIndex];
+        if (preElement.controlComponent === ControlComponent.CHECKBOX) {
+          hitCheckbox(preElement, draw);
+          break;
+        } else if (preElement.controlComponent === ControlComponent.RADIO) {
+          hitRadio(preElement, draw);
+          break;
         }
+        preIndex--;
       }
     } else {
       draw.render({
@@ -5915,7 +5948,9 @@ function mouseup(evt, host) {
         return newElement;
       }
     });
-    formatElementContext(elementList, replaceElementList, range.startIndex);
+    formatElementContext(elementList, replaceElementList, range.startIndex, {
+      editorOptions: draw.getOptions()
+    });
     const cacheStartElement = cacheElementList[cacheStartIndex];
     const cacheStartPosition = cachePositionList[cacheStartIndex];
     const cacheRangeStartId = createDragId(cacheElementList[cacheStartIndex]);
@@ -6244,7 +6279,8 @@ function enter(evt, host) {
     enterText.listWrap = true;
   }
   formatElementContext(elementList, [enterText], startIndex, {
-    isBreakWhenWrap: true
+    isBreakWhenWrap: true,
+    editorOptions: draw.getOptions()
   });
   if (!(endElement.titleId && endElement.titleId !== ((_b = elementList[endIndex + 1]) == null ? void 0 : _b.titleId))) {
     const copyElement = getAnchorElement(elementList, endIndex);
@@ -6584,7 +6620,9 @@ function tab(evt, host) {
     const rangeManager = draw.getRange();
     const { startIndex } = rangeManager.getRange();
     const elementList = draw.getElementList();
-    formatElementContext(elementList, [tabElement], startIndex);
+    formatElementContext(elementList, [tabElement], startIndex, {
+      editorOptions: draw.getOptions()
+    });
     draw.insertElementList([tabElement]);
   }
 }
@@ -6960,12 +6998,13 @@ function input(data2, host) {
   const copyElement = getAnchorElement(elementList, endIndex);
   if (!copyElement)
     return;
+  const isDesignMode = draw.isDesignMode();
   const inputData = splitText(text).map((value) => {
     var _a2, _b;
     const newElement = {
       value
     };
-    if (!((_a2 = copyElement.title) == null ? void 0 : _a2.disabled) && !((_b = copyElement.control) == null ? void 0 : _b.disabled)) {
+    if (isDesignMode || !((_a2 = copyElement.title) == null ? void 0 : _a2.disabled) && !((_b = copyElement.control) == null ? void 0 : _b.disabled)) {
       const nextElement = elementList[endIndex + 1];
       if (!copyElement.type || copyElement.type === TEXT || copyElement.type === HYPERLINK && (nextElement == null ? void 0 : nextElement.type) === HYPERLINK || copyElement.type === DATE && (nextElement == null ? void 0 : nextElement.type) === DATE || copyElement.type === SUBSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUBSCRIPT || copyElement.type === SUPERSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUPERSCRIPT) {
         EDITOR_ELEMENT_COPY_ATTR.forEach((attr) => {
@@ -6992,7 +7031,9 @@ function input(data2, host) {
     if (startIndex !== endIndex) {
       draw.spliceElementList(elementList, start, endIndex - startIndex);
     }
-    formatElementContext(elementList, inputData, startIndex);
+    formatElementContext(elementList, inputData, startIndex, {
+      editorOptions: draw.getOptions()
+    });
     draw.spliceElementList(elementList, start, 0, ...inputData);
     curIndex = startIndex + inputData.length;
   }
@@ -7695,6 +7736,7 @@ class Position {
     __publicField(this, "positionList");
     __publicField(this, "floatPositionList");
     __publicField(this, "draw");
+    __publicField(this, "eventBus");
     __publicField(this, "options");
     this.positionList = [];
     this.floatPositionList = [];
@@ -7704,6 +7746,7 @@ class Position {
       isControl: false
     };
     this.draw = draw;
+    this.eventBus = draw.getEventBus();
     this.options = draw.getOptions();
   }
   getFloatPositionList() {
@@ -7920,6 +7963,10 @@ class Position {
     return this.positionContext;
   }
   setPositionContext(payload) {
+    this.eventBus.emit("positionContextChange", {
+      value: payload,
+      oldValue: this.positionContext
+    });
     this.positionContext = payload;
   }
   getPositionByXY(payload) {
@@ -8526,7 +8573,7 @@ class RangeManager {
     this.setRange(range.startIndex, range.endIndex, range.tableId, range.startTdIndex, range.endTdIndex, range.startTrIndex, range.endTrIndex);
   }
   setRangeStyle() {
-    var _a;
+    var _a, _b;
     const rangeStyleChangeListener = this.listener.rangeStyleChange;
     const isSubscribeRangeStyleChange = this.eventBus.isSubscribe("rangeStyleChange");
     if (!rangeStyleChangeListener && !isSubscribeRangeStyleChange)
@@ -8560,7 +8607,7 @@ class RangeManager {
     const color = curElement.color || null;
     const highlight = curElement.highlight || null;
     const rowFlex = curElement.rowFlex || null;
-    const rowMargin = curElement.rowMargin || this.options.defaultRowMargin;
+    const rowMargin = (_a = curElement.rowMargin) != null ? _a : this.options.defaultRowMargin;
     const dashArray = curElement.dashArray || [];
     const level = curElement.level || null;
     const listType = curElement.listType || null;
@@ -8570,7 +8617,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 extension = (_b = curElement.extension) != null ? _b : null;
     const rangeStyle = {
       type,
       undo,
@@ -10681,6 +10728,8 @@ class SelectControl {
     __publicField(this, "control");
     __publicField(this, "isPopup");
     __publicField(this, "selectDom");
+    __publicField(this, "options");
+    this.options = control.getDraw().getOptions();
     this.element = element;
     this.control = control;
     this.isPopup = false;
@@ -10857,7 +10906,9 @@ class SelectControl {
         value: data2[i],
         controlComponent: ControlComponent.VALUE
       });
-      formatElementContext(elementList, [newElement], prefixIndex);
+      formatElementContext(elementList, [newElement], prefixIndex, {
+        editorOptions: this.options
+      });
       draw.spliceElementList(elementList, start + i, 0, newElement);
     }
     control.code = code;
@@ -10927,6 +10978,8 @@ class TextControl {
   constructor(element, control) {
     __publicField(this, "element");
     __publicField(this, "control");
+    __publicField(this, "options");
+    this.options = control.getDraw().getOptions();
     this.element = element;
     this.control = control;
   }
@@ -10990,7 +11043,9 @@ class TextControl {
       const newElement = __spreadProps(__spreadValues(__spreadValues({}, anchorElement), data2[i]), {
         controlComponent: ControlComponent.VALUE
       });
-      formatElementContext(elementList, [newElement], startIndex);
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      });
       draw.spliceElementList(elementList, start + i, 0, newElement);
     }
     return start + data2.length - 1;
@@ -11548,8 +11603,10 @@ class DateControl {
     __publicField(this, "control");
     __publicField(this, "isPopup");
     __publicField(this, "datePicker");
+    __publicField(this, "options");
     const draw = control.getDraw();
     this.draw = draw;
+    this.options = draw.getOptions();
     this.element = element;
     this.control = control;
     this.isPopup = false;
@@ -11628,7 +11685,9 @@ class DateControl {
       const newElement = __spreadProps(__spreadValues(__spreadValues({}, anchorElement), data2[i]), {
         controlComponent: ControlComponent.VALUE
       });
-      formatElementContext(elementList, [newElement], startIndex);
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      });
       draw.spliceElementList(elementList, start + i, 0, newElement);
     }
     return start + data2.length - 1;
@@ -11674,7 +11733,9 @@ class DateControl {
         value: date[i],
         controlComponent: ControlComponent.VALUE
       });
-      formatElementContext(elementList, [newElement], prefixIndex);
+      formatElementContext(elementList, [newElement], prefixIndex, {
+        editorOptions: this.options
+      });
       draw.spliceElementList(elementList, start + i, 0, newElement);
     }
     if (!context.range) {
@@ -11919,7 +11980,7 @@ class Control {
   }
   getIsDisabledControl(context = {}) {
     var _a, _b;
-    if (!this.activeControl)
+    if (this.draw.isDesignMode() || !this.activeControl)
       return false;
     const { startIndex, endIndex } = context.range || this.range.getRange();
     if (startIndex === endIndex && ~startIndex && ~endIndex) {
@@ -12036,7 +12097,7 @@ class Control {
     }
   }
   repaintControl(options = {}) {
-    const { curIndex, isCompute = true, isSubmitHistory = true } = options;
+    const { curIndex, isCompute = true, isSubmitHistory = true, isSetCursor = true } = options;
     if (curIndex === void 0) {
       this.range.clearRange();
       this.draw.render({
@@ -12049,6 +12110,7 @@ class Control {
       this.draw.render({
         curIndex,
         isCompute,
+        isSetCursor,
         isSubmitHistory
       });
     }
@@ -12126,9 +12188,11 @@ class Control {
   removeControl(startIndex, context = {}) {
     const elementList = context.elementList || this.getElementList();
     const startElement = elementList[startIndex];
-    const { deletable = true } = startElement.control;
-    if (!deletable)
-      return null;
+    if (!this.draw.isDesignMode()) {
+      const { deletable = true } = startElement.control;
+      if (!deletable)
+        return null;
+    }
     let leftIndex = -1;
     let rightIndex = -1;
     let preIndex = startIndex;
@@ -12200,7 +12264,9 @@ class Control {
         controlComponent: ControlComponent.PLACEHOLDER,
         color: this.controlOptions.placeholderColor
       });
-      formatElementContext(elementList, [newElement], startIndex);
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      });
       this.draw.spliceElementList(elementList, startIndex + p + 1, 0, newElement);
     }
   }
@@ -12506,7 +12572,8 @@ class Control {
       const elementList = zipElementList(pageComponentData[pageComponentKey]);
       pageComponentData[pageComponentKey] = elementList;
       formatElementList(elementList, {
-        editorOptions: this.options
+        editorOptions: this.options,
+        isForceCompensation: true
       });
     }
     this.draw.setEditorData(pageComponentData);
@@ -13088,10 +13155,12 @@ class Previewer {
     return { x, y };
   }
   _createResizerDom() {
+    const { scale } = this.options;
     const resizerSelection = document.createElement("div");
     resizerSelection.classList.add(`${EDITOR_PREFIX}-resizer-selection`);
     resizerSelection.style.display = "none";
     resizerSelection.style.borderColor = this.options.resizerColor;
+    resizerSelection.style.borderWidth = `${scale}px`;
     const resizerHandleList = [];
     for (let i = 0; i < 8; i++) {
       const handleDom = document.createElement("div");
@@ -13344,12 +13413,13 @@ class Previewer {
     document.body.style.overflow = "auto";
   }
   _updateResizerRect(width, height) {
-    const handleSize = this.options.resizerSize;
+    const { resizerSize: handleSize, scale } = this.options;
     this.resizerSelection.style.width = `${width}px`;
     this.resizerSelection.style.height = `${height}px`;
     for (let i = 0; i < 8; i++) {
       const left2 = i === 0 || i === 6 || i === 7 ? -handleSize : i === 1 || i === 5 ? width / 2 : width - handleSize;
       const top = i === 0 || i === 1 || i === 2 ? -handleSize : i === 3 || i === 7 ? height / 2 - handleSize : height - handleSize;
+      this.resizerHandleList[i].style.transform = `scale(${scale})`;
       this.resizerHandleList[i].style.left = `${left2}px`;
       this.resizerHandleList[i].style.top = `${top}px`;
     }
@@ -13375,6 +13445,7 @@ class Previewer {
     const { x: resizerLeft, y: resizerTop } = this._getElementPosition(element, position);
     this.resizerSelection.style.left = `${resizerLeft}px`;
     this.resizerSelection.style.top = `${resizerTop}px`;
+    this.resizerSelection.style.borderWidth = `${scale}px`;
     this._updateResizerRect(elementWidth, elementHeight);
     this.resizerSelection.style.display = "block";
     this.curElement = element;
@@ -13392,7 +13463,9 @@ class DateParticle {
     __publicField(this, "draw");
     __publicField(this, "range");
     __publicField(this, "datePicker");
+    __publicField(this, "options");
     this.draw = draw;
+    this.options = draw.getOptions();
     this.range = draw.getRange();
     this.datePicker = new DatePicker(draw, {
       onSubmit: this._setValue.bind(this)
@@ -13419,7 +13492,9 @@ class DateParticle {
         }
       ]
     };
-    formatElementContext(elementList, [dateElement], leftIndex);
+    formatElementContext(elementList, [dateElement], leftIndex, {
+      editorOptions: this.options
+    });
     this.draw.insertElementList([dateElement]);
   }
   getDateElementRange() {
@@ -14472,7 +14547,8 @@ class Placeholder {
       }
     ];
     formatElementList(this.elementList, {
-      editorOptions: this.options
+      editorOptions: this.options,
+      isForceCompensation: true
     });
     this._compute();
     const innerWidth = this.draw.getInnerWidth();
@@ -14715,6 +14791,53 @@ class LineNumber {
     ctx.restore();
   }
 }
+class PageBorder {
+  constructor(draw) {
+    __publicField(this, "draw");
+    __publicField(this, "header");
+    __publicField(this, "footer");
+    __publicField(this, "options");
+    this.draw = draw;
+    this.header = draw.getHeader();
+    this.footer = draw.getFooter();
+    this.options = draw.getOptions();
+  }
+  render(ctx) {
+    const { scale, pageBorder: { color, lineWidth, padding } } = this.options;
+    ctx.save();
+    ctx.translate(0.5, 0.5);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth * scale;
+    const margins = this.draw.getMargins();
+    const x = margins[3] - padding[3] * scale;
+    const y = margins[0] + this.header.getExtraHeight() - padding[0] * scale;
+    const width = this.draw.getInnerWidth() + (padding[1] + padding[3]) * scale;
+    const height = this.draw.getHeight() - y - this.footer.getExtraHeight() - margins[2] + padding[2] * scale;
+    ctx.rect(x, y, width, height);
+    ctx.stroke();
+    ctx.restore();
+  }
+}
+function positionContextChange(draw, payload) {
+  const { value, oldValue } = payload;
+  if (oldValue.isTable && !value.isTable) {
+    draw.getTableTool().dispose();
+  }
+}
+class Actuator {
+  constructor(draw) {
+    __publicField(this, "draw");
+    __publicField(this, "eventBus");
+    this.draw = draw;
+    this.eventBus = draw.getEventBus();
+    this.execute();
+  }
+  execute() {
+    this.eventBus.on("positionContextChange", (payload) => {
+      positionContextChange(this.draw, payload);
+    });
+  }
+}
 class Draw {
   constructor(rootContainer, options, data2, listener, eventBus, override) {
     __publicField(this, "container");
@@ -14768,6 +14891,7 @@ class Draw {
     __publicField(this, "listParticle");
     __publicField(this, "lineBreakParticle");
     __publicField(this, "control");
+    __publicField(this, "pageBorder");
     __publicField(this, "workerManager");
     __publicField(this, "scrollObserver");
     __publicField(this, "selectionObserver");
@@ -14832,6 +14956,7 @@ class Draw {
     this.listParticle = new ListParticle(this);
     this.lineBreakParticle = new LineBreakParticle(this);
     this.control = new Control(this);
+    this.pageBorder = new PageBorder(this);
     this.scrollObserver = new ScrollObserver(this);
     this.selectionObserver = new SelectionObserver(this);
     this.imageObserver = new ImageObserver();
@@ -14842,6 +14967,7 @@ class Draw {
     this.globalEvent = new GlobalEvent(this, this.canvasEvent);
     this.globalEvent.register();
     this.workerManager = new WorkerManager(this);
+    new Actuator(this);
     const { letterClass } = options;
     this.LETTER_REG = new RegExp(`[${letterClass.join("")}]`);
     this.WORD_LIKE_REG = new RegExp(`${letterClass.map((letter) => `[^${letter}][${letter}]`).join("|")}`);
@@ -14896,6 +15022,8 @@ class Draw {
   }
   isReadonly() {
     switch (this.mode) {
+      case EditorMode.DESIGN:
+        return false;
       case EditorMode.READONLY:
       case EditorMode.PRINT:
         return true;
@@ -14906,13 +15034,17 @@ class Draw {
     }
   }
   isDisabled() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
+    if (this.mode === EditorMode.DESIGN)
+      return false;
     const { startIndex, endIndex } = this.range.getRange();
     const elementList = this.getElementList();
+    if ((_a = this.getTd()) == null ? void 0 : _a.disabled)
+      return true;
     if (startIndex === endIndex) {
       const startElement = elementList[startIndex];
       const nextElement = elementList[startIndex + 1];
-      return !!(((_a = startElement == null ? void 0 : startElement.title) == null ? void 0 : _a.disabled) && ((_b = nextElement == null ? void 0 : nextElement.title) == null ? void 0 : _b.disabled) || ((_c = startElement == null ? void 0 : startElement.control) == null ? void 0 : _c.disabled) && ((_d = nextElement == null ? void 0 : nextElement.control) == null ? void 0 : _d.disabled));
+      return !!(((_b = startElement == null ? void 0 : startElement.title) == null ? void 0 : _b.disabled) && ((_c = nextElement == null ? void 0 : nextElement.title) == null ? void 0 : _c.disabled) || ((_d = startElement == null ? void 0 : startElement.control) == null ? void 0 : _d.disabled) && ((_e = nextElement == null ? void 0 : nextElement.control) == null ? void 0 : _e.disabled));
     }
     const selectionElementList = elementList.slice(startIndex + 1, endIndex + 1);
     return selectionElementList.some((element) => {
@@ -14920,6 +15052,9 @@ class Draw {
       return ((_a2 = element.title) == null ? void 0 : _a2.disabled) || ((_b2 = element.control) == null ? void 0 : _b2.disabled);
     });
   }
+  isDesignMode() {
+    return this.mode === EditorMode.DESIGN;
+  }
   getOriginalWidth() {
     const { paperDirection, width, height } = this.options;
     return paperDirection === PaperDirection.VERTICAL ? width : height;
@@ -15131,6 +15266,15 @@ class Draw {
   getFooterElementList() {
     return this.footer.getElementList();
   }
+  getTd() {
+    const positionContext = this.position.getPositionContext();
+    const { index: index2, trIndex, tdIndex, isTable } = positionContext;
+    if (isTable) {
+      const elementList = this.getOriginalElementList();
+      return elementList[index2].trList[trIndex].tdList[tdIndex];
+    }
+    return null;
+  }
   insertElementList(payload) {
     if (!payload.length || !this.range.getIsCanInput())
       return;
@@ -15195,7 +15339,8 @@ class Draw {
     });
   }
   spliceElementList(elementList, start, deleteCount, ...items) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
+    const isDesignMode = this.isDesignMode();
     if (deleteCount > 0) {
       const endIndex = start + deleteCount;
       const endElement = elementList[endIndex];
@@ -15214,10 +15359,11 @@ class Draw {
         }
       }
       if (!this.control.getActiveControl()) {
+        const tdDeletable = (_b = this.getTd()) == null ? void 0 : _b.deletable;
         let deleteIndex = endIndex - 1;
         while (deleteIndex >= start) {
           const deleteElement = elementList[deleteIndex];
-          if (((_b = deleteElement == null ? void 0 : deleteElement.control) == null ? void 0 : _b.deletable) !== false && ((_c = deleteElement == null ? void 0 : deleteElement.title) == null ? void 0 : _c.deletable) !== false) {
+          if (isDesignMode || tdDeletable !== false && ((_c = deleteElement == null ? void 0 : deleteElement.control) == null ? void 0 : _c.deletable) !== false && ((_d = deleteElement == null ? void 0 : deleteElement.title) == null ? void 0 : _d.deletable) !== false) {
             elementList.splice(deleteIndex, 1);
           }
           deleteIndex--;
@@ -15513,7 +15659,8 @@ class Draw {
       if (!data2)
         return;
       formatElementList(data2, {
-        editorOptions: this.options
+        editorOptions: this.options,
+        isForceCompensation: true
       });
     });
     this.setEditorData({
@@ -15597,11 +15744,12 @@ class Draw {
     return el.actualSize || el.size || this.options.defaultSize;
   }
   getElementRowMargin(el) {
+    var _a;
     const { defaultBasicRowMarginHeight, defaultRowMargin, scale } = this.options;
-    return defaultBasicRowMarginHeight * (el.rowMargin || defaultRowMargin) * scale;
+    return defaultBasicRowMarginHeight * ((_a = el.rowMargin) != null ? _a : defaultRowMargin) * scale;
   }
   computeRowList(payload) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const { innerWidth, elementList, isPagingMode = false } = payload;
     const { defaultSize, defaultRowMargin, scale, table: { tdPadding }, defaultTabWidth } = this.options;
     const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight();
@@ -15626,7 +15774,7 @@ class Draw {
     for (let i = 0; i < elementList.length; i++) {
       const curRow = rowList[rowList.length - 1];
       const element = elementList[i];
-      const rowMargin = defaultBasicRowMarginHeight * (element.rowMargin || defaultRowMargin);
+      const rowMargin = defaultBasicRowMarginHeight * ((_c = element.rowMargin) != null ? _c : defaultRowMargin);
       const metrics = {
         width: 0,
         height: 0,
@@ -15679,7 +15827,7 @@ class Draw {
             elementList.splice(i + 1, combineCount);
           }
         }
-        element.pagingIndex = (_c = element.pagingIndex) != null ? _c : 0;
+        element.pagingIndex = (_d = element.pagingIndex) != null ? _d : 0;
         this.tableParticle.computeRowColInfo(element);
         const trList = element.trList;
         for (let t = 0; t < trList.length; t++) {
@@ -15755,7 +15903,7 @@ class Draw {
           let curPagePreHeight = marginHeight;
           for (let r = 0; r < rowList.length; r++) {
             const row = rowList[r];
-            if (row.height + curPagePreHeight > height2 || ((_d = rowList[r - 1]) == null ? void 0 : _d.isPageBreak)) {
+            if (row.height + curPagePreHeight > height2 || ((_e = rowList[r - 1]) == null ? void 0 : _e.isPageBreak)) {
               curPagePreHeight = marginHeight + row.height;
             } else {
               curPagePreHeight += row.height;
@@ -15776,7 +15924,7 @@ class Draw {
                 const trHeight = tr.height * scale;
                 if (curPagePreHeight + rowMarginHeight + preTrHeight + trHeight > height2) {
                   const rowColCount = tr.tdList.reduce((pre, cur) => pre + cur.colspan, 0);
-                  if (((_e = element.colgroup) == null ? void 0 : _e.length) !== rowColCount) {
+                  if (((_f = element.colgroup) == null ? void 0 : _f.length) !== rowColCount) {
                     deleteCount = 0;
                   }
                   break;
@@ -15899,7 +16047,7 @@ class Draw {
         metrics,
         style: this.getElementFont(element, scale)
       });
-      if ((_f = rowElement.control) == null ? void 0 : _f.minWidth) {
+      if ((_g = rowElement.control) == null ? void 0 : _g.minWidth) {
         if (rowElement.controlComponent) {
           controlRealWidth += metrics.width;
         }
@@ -15952,10 +16100,10 @@ class Draw {
           elementList: [rowElement],
           ascent,
           rowIndex: curRow.rowIndex + 1,
-          rowFlex: ((_g = elementList[i]) == null ? void 0 : _g.rowFlex) || ((_h = elementList[i + 1]) == null ? void 0 : _h.rowFlex),
+          rowFlex: ((_h = elementList[i]) == null ? void 0 : _h.rowFlex) || ((_i = elementList[i + 1]) == null ? void 0 : _i.rowFlex),
           isPageBreak: element.type === ElementType.PAGE_BREAK
         };
-        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_i = rowElement.control) == null ? void 0 : _i.indentation) === ControlIndentation.VALUE_START) {
+        if (rowElement.controlComponent !== ControlComponent.PREFIX && ((_j = rowElement.control) == null ? void 0 : _j.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({
@@ -15988,7 +16136,7 @@ class Draw {
       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 rowElementList = ((_k = curRow.elementList[0]) == null ? void 0 : _k.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];
@@ -16043,18 +16191,22 @@ class Draw {
     return pageRowList;
   }
   _drawHighlight(ctx, payload) {
+    var _a;
+    const { control: { activeBackgroundColor } } = this.options;
     const { rowList, positionList } = payload;
+    const activeControlElement = (_a = this.control.getActiveControl()) == null ? void 0 : _a.getElement();
     for (let i = 0; i < rowList.length; i++) {
       const curRow = rowList[i];
       for (let j = 0; j < curRow.elementList.length; j++) {
         const element = curRow.elementList[j];
         const preElement = curRow.elementList[j - 1];
-        if (element.highlight) {
+        if (element.highlight || activeBackgroundColor && activeControlElement && element.controlId === activeControlElement.controlId && !this.control.getIsRangeInPostfix()) {
           if (preElement && preElement.highlight && preElement.highlight !== element.highlight) {
             this.highlight.render(ctx);
           }
           const { coordinate: { leftTop: [x, y] } } = positionList[curRow.startIndex + j];
-          this.highlight.recordFillInfo(ctx, x, y, element.metrics.width, curRow.height, element.highlight);
+          const offsetX = element.left || 0;
+          this.highlight.recordFillInfo(ctx, x - offsetX, y, element.metrics.width + offsetX, curRow.height, element.highlight || activeBackgroundColor);
         } else if (preElement == null ? void 0 : preElement.highlight) {
           this.highlight.render(ctx);
         }
@@ -16295,7 +16447,7 @@ class Draw {
   _drawPage(payload) {
     var _a, _b;
     const { elementList, positionList, rowList, pageNo } = payload;
-    const { inactiveAlpha, pageMode, header, footer, pageNumber, lineNumber } = this.options;
+    const { inactiveAlpha, pageMode, header, footer, pageNumber, lineNumber, pageBorder } = this.options;
     const innerWidth = this.getInnerWidth();
     const ctx = this.ctxList[pageNo];
     ctx.globalAlpha = !this.zone.isMainActive() ? inactiveAlpha : 1;
@@ -16346,6 +16498,9 @@ class Draw {
     if (!lineNumber.disabled) {
       this.lineNumber.render(ctx, pageNo);
     }
+    if (!pageBorder.disabled) {
+      this.pageBorder.render(ctx);
+    }
   }
   _disconnectLazyRender() {
     var _a;
@@ -16627,6 +16782,7 @@ class Command {
     __publicField(this, "executeInsertControl");
     __publicField(this, "executeUpdateOptions");
     __publicField(this, "executeInsertTitle");
+    __publicField(this, "executeFocus");
     __publicField(this, "getCatalog");
     __publicField(this, "getImage");
     __publicField(this, "getOptions");
@@ -16736,6 +16892,7 @@ class Command {
     this.executeSetZone = adapt.setZone.bind(adapt);
     this.executeUpdateOptions = adapt.updateOptions.bind(adapt);
     this.executeInsertTitle = adapt.insertTitle.bind(adapt);
+    this.executeFocus = adapt.focus.bind(adapt);
     this.getImage = adapt.getImage.bind(adapt);
     this.getOptions = adapt.getOptions.bind(adapt);
     this.getValue = adapt.getValue.bind(adapt);
@@ -16795,7 +16952,8 @@ const defaultControlOption = {
   prefix: "{",
   postfix: "}",
   borderWidth: 1,
-  borderColor: "#000000"
+  borderColor: "#000000",
+  activeBackgroundColor: ""
 };
 const defaultFooterOption = {
   bottom: 30,
@@ -16860,6 +17018,12 @@ const defaultLineNumberOption = {
   right: 20,
   type: LineNumberType.CONTINUITY
 };
+const defaultPageBorderOption = {
+  color: "#000000",
+  lineWidth: 1,
+  padding: [0, 5, 0, 5],
+  disabled: true
+};
 function mergeOption(options = {}) {
   const tableOptions = __spreadValues(__spreadValues({}, defaultTableOption), options.table);
   const headerOptions = __spreadValues(__spreadValues({}, defaultHeaderOption), options.header);
@@ -16879,6 +17043,7 @@ function mergeOption(options = {}) {
   const lineBreakOptions = __spreadValues(__spreadValues({}, defaultLineBreak), options.lineBreak);
   const separatorOptions = __spreadValues(__spreadValues({}, defaultSeparatorOption), options.separator);
   const lineNumberOptions = __spreadValues(__spreadValues({}, defaultLineNumberOption), options.lineNumber);
+  const pageBorderOptions = __spreadValues(__spreadValues({}, defaultPageBorderOption), options.pageBorder);
   return __spreadProps(__spreadValues({
     mode: EditorMode.EDIT,
     defaultType: "TEXT",
@@ -16938,7 +17103,8 @@ function mergeOption(options = {}) {
     background: backgroundOptions,
     lineBreak: lineBreakOptions,
     separator: separatorOptions,
-    lineNumber: lineNumberOptions
+    lineNumber: lineNumberOptions,
+    pageBorder: pageBorderOptions
   });
 }
 function convertPxToPaperSize(width, height) {
@@ -17045,8 +17211,8 @@ class CommandAdapt {
     this.draw.setMode(payload);
   }
   cut() {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     this.canvasEvent.cut();
   }
@@ -17054,8 +17220,8 @@ class CommandAdapt {
     this.canvasEvent.copy();
   }
   paste(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     pasteByApi(this.canvasEvent, payload);
   }
@@ -17063,8 +17229,8 @@ class CommandAdapt {
     this.canvasEvent.selectAll();
   }
   backspace() {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const elementList = this.draw.getElementList();
     const { startIndex, endIndex } = this.range.getRange();
@@ -17537,8 +17703,8 @@ class CommandAdapt {
     }
   }
   title(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const { startIndex, endIndex } = this.range.getRange();
     if (!~startIndex && !~endIndex)
@@ -17615,8 +17781,8 @@ class CommandAdapt {
   }
   insertTable(row, col) {
     var _a;
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const activeControl = this.control.getActiveControl();
     if (activeControl)
@@ -17653,7 +17819,7 @@ class CommandAdapt {
         tdList.push({
           colspan: 1,
           rowspan: 1,
-          value: [{ value: ZERO, size: 16 }]
+          value: []
         });
       }
       trList.push(tr);
@@ -17667,7 +17833,9 @@ class CommandAdapt {
     formatElementList([element], {
       editorOptions: this.options
     });
-    formatElementContext(elementList, [element], startIndex);
+    formatElementContext(elementList, [element], startIndex, {
+      editorOptions: this.options
+    });
     const curIndex = startIndex + 1;
     this.draw.spliceElementList(elementList, curIndex, startIndex === endIndex ? 0 : endIndex - startIndex, element);
     this.range.setRange(curIndex, curIndex);
@@ -18350,8 +18518,8 @@ class CommandAdapt {
     });
   }
   hyperlink(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const activeControl = this.control.getActiveControl();
     if (activeControl)
@@ -18371,7 +18539,9 @@ class CommandAdapt {
     if (!newElementList)
       return;
     const start = startIndex + 1;
-    formatElementContext(elementList, newElementList, startIndex);
+    formatElementContext(elementList, newElementList, startIndex, {
+      editorOptions: this.options
+    });
     this.draw.spliceElementList(elementList, start, startIndex === endIndex ? 0 : endIndex - startIndex, ...newElementList);
     const curIndex = start + newElementList.length - 1;
     this.range.setRange(curIndex, curIndex);
@@ -18413,8 +18583,8 @@ class CommandAdapt {
     return [leftIndex, rightIndex];
   }
   deleteHyperlink() {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const hyperRange = this.getHyperlinkRange();
     if (!hyperRange)
@@ -18430,8 +18600,8 @@ class CommandAdapt {
     });
   }
   cancelHyperlink() {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const hyperRange = this.getHyperlinkRange();
     if (!hyperRange)
@@ -18453,8 +18623,8 @@ class CommandAdapt {
     });
   }
   editHyperlink(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const hyperRange = this.getHyperlinkRange();
     if (!hyperRange)
@@ -18473,8 +18643,8 @@ class CommandAdapt {
     });
   }
   separator(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const activeControl = this.control.getActiveControl();
     if (activeControl)
@@ -18497,7 +18667,9 @@ class CommandAdapt {
         type: ElementType.SEPARATOR,
         dashArray: payload
       };
-      formatElementContext(elementList, [newElement], startIndex);
+      formatElementContext(elementList, [newElement], startIndex, {
+        editorOptions: this.options
+      });
       if (startIndex !== 0 && elementList[startIndex].value === ZERO) {
         this.draw.spliceElementList(elementList, startIndex, 1, newElement);
         curIndex = startIndex - 1;
@@ -18510,8 +18682,8 @@ class CommandAdapt {
     this.draw.render({ curIndex });
   }
   pageBreak() {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const activeControl = this.control.getActiveControl();
     if (activeControl)
@@ -18933,14 +19105,15 @@ class CommandAdapt {
   insertElementList(payload) {
     if (!payload.length)
       return;
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const cloneElementList = deepClone(payload);
     const { startIndex } = this.range.getRange();
     const elementList = this.draw.getElementList();
     formatElementContext(elementList, cloneElementList, startIndex, {
-      isBreakWhenWrap: true
+      isBreakWhenWrap: true,
+      editorOptions: this.options
     });
     this.draw.insertElementList(cloneElementList);
   }
@@ -19220,8 +19393,8 @@ class CommandAdapt {
     }
   }
   insertControl(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const cloneElement = deepClone(payload);
     const { startIndex } = this.range.getRange();
@@ -19346,8 +19519,8 @@ class CommandAdapt {
   }
   insertTitle(payload) {
     var _a;
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
+    if (isDisabled)
       return;
     const cloneElement = deepClone(payload);
     const { startIndex } = this.range.getRange();
@@ -19365,6 +19538,21 @@ class CommandAdapt {
     });
     this.draw.insertElementList([cloneElement]);
   }
+  focus(payload) {
+    const { position = LocationPosition.AFTER } = payload || {};
+    const curIndex = position === LocationPosition.BEFORE ? 0 : this.draw.getOriginalMainElementList().length - 1;
+    this.range.setRange(curIndex, curIndex);
+    this.draw.render({
+      curIndex,
+      isCompute: false,
+      isSubmitHistory: false
+    });
+    const positionList = this.draw.getPosition().getPositionList();
+    this.draw.getCursor().moveCursorToVisible({
+      cursorPosition: positionList[curIndex],
+      direction: MoveDirection.DOWN
+    });
+  }
 }
 class Listener {
   constructor() {
@@ -20470,7 +20658,8 @@ class Editor {
     ];
     pageComponentData.forEach((elementList) => {
       formatElementList(elementList, {
-        editorOptions
+        editorOptions,
+        isForceCompensation: true
       });
     });
     this.listener = new Listener();