@hufe921/canvas-editor 0.9.85 → 0.9.87

package/CHANGELOG.md

@@ -1,3 +1,43 @@
+## [0.9.87](https://github.com/Hufe921/canvas-editor/compare/v0.9.86...v0.9.87) (2024-07-26)
+
+
+### Bug Fixes
+
+* format of checkbox and radio control value ([72686fd](https://github.com/Hufe921/canvas-editor/commit/72686fda1bf12353699fd57273493d8a9b4caee4))
+* highlight checkbox and radio control #707 ([d939aa3](https://github.com/Hufe921/canvas-editor/commit/d939aa35ba7b19e5d1b5c4121fb873b2c579cc55)), closes [#707](https://github.com/Hufe921/canvas-editor/issues/707)
+* set control highlight limit component type ([e14fbd6](https://github.com/Hufe921/canvas-editor/commit/e14fbd622d1076cba5f34bd4fa29530af4f70261))
+* update punctuation width when scaling the page #712 ([83cb479](https://github.com/Hufe921/canvas-editor/commit/83cb47913195c43cde2b3ae344ff1d89a223e6a6)), closes [#712](https://github.com/Hufe921/canvas-editor/issues/712)
+* word breaking when scaling the page #666 ([2bd1f34](https://github.com/Hufe921/canvas-editor/commit/2bd1f34c15196968f69d4711613f1c81f1dade68)), closes [#666](https://github.com/Hufe921/canvas-editor/issues/666)
+
+
+### Features
+
+* add custom field to getValue api #699 ([67c63f8](https://github.com/Hufe921/canvas-editor/commit/67c63f856f2c0e3e8c0644e39694357639c18d7e)), closes [#699](https://github.com/Hufe921/canvas-editor/issues/699)
+* delete cell contents when selecting rows and columns #706 ([ccd0627](https://github.com/Hufe921/canvas-editor/commit/ccd0627a6fad975acb43e9f16dda3fa13972c908)), closes [#706](https://github.com/Hufe921/canvas-editor/issues/706)
+* optimize text selection at the beginning of a line #695 ([97ac2da](https://github.com/Hufe921/canvas-editor/commit/97ac2daaf8f0688b181cb8baea9ba74ae1664361)), closes [#695](https://github.com/Hufe921/canvas-editor/issues/695)
+* set control properties in read-only mode #679 ([26a3468](https://github.com/Hufe921/canvas-editor/commit/26a3468f66d67bf8249cdc1a679c740d7cf1a9c9)), closes [#679](https://github.com/Hufe921/canvas-editor/issues/679)
+* set the container scrollbar to automatically scroll #711 ([b226566](https://github.com/Hufe921/canvas-editor/commit/b226566e2bf6f1b4bc3ae11577c7a96ae3cbf2d0)), closes [#711](https://github.com/Hufe921/canvas-editor/issues/711)
+
+
+
+## [0.9.86](https://github.com/Hufe921/canvas-editor/compare/v0.9.85...v0.9.86) (2024-07-13)
+
+
+### Bug Fixes
+
+* add control placeholder boundary error #686 ([fac5c5c](https://github.com/Hufe921/canvas-editor/commit/fac5c5c045a30cb5e0c46ef027c83f21e07bcaa8)), closes [#686](https://github.com/Hufe921/canvas-editor/issues/686)
+* add control placeholder using default style #691 ([eb3ea5e](https://github.com/Hufe921/canvas-editor/commit/eb3ea5ed55cdedea0e281d45177c8661f674a280)), closes [#691](https://github.com/Hufe921/canvas-editor/issues/691)
+* delete table col boundary error #688 ([3f0a49f](https://github.com/Hufe921/canvas-editor/commit/3f0a49f56be7060d328a63c994f571b0a35a3521)), closes [#688](https://github.com/Hufe921/canvas-editor/issues/688)
+* refocus when cursor is not focused #685 ([0ac8ae7](https://github.com/Hufe921/canvas-editor/commit/0ac8ae7c4b0b47ee84a9c0f8c37ffde612849957)), closes [#685](https://github.com/Hufe921/canvas-editor/issues/685)
+* remove title and list properties from getControlList return value #683 ([b024050](https://github.com/Hufe921/canvas-editor/commit/b024050b3ef7f787079a74b062e5d83085be1a5f)), closes [#683](https://github.com/Hufe921/canvas-editor/issues/683)
+
+
+### Features
+
+* add executeInsertControl api ([e5b3d05](https://github.com/Hufe921/canvas-editor/commit/e5b3d05991a26dc186cdf63962ca3c7b50a32572))
+
+
+
 ## [0.9.85](https://github.com/Hufe921/canvas-editor/compare/v0.9.84...v0.9.85) (2024-07-07)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.85";
+const version = "0.9.87";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -3919,7 +3919,7 @@ function formatElementList(elementList, options) {
             let valueStyleIndex = 0;
             for (let v = 0; v < valueSets.length; v++) {
               const valueSet = valueSets[v];
-              elementList.splice(i, 0, __spreadProps(__spreadValues({}, controlContext), {
+              elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues({}, controlContext), controlDefaultStyle), {
                 controlId,
                 value: "",
                 type: el.type,
@@ -3953,7 +3953,7 @@ function formatElementList(elementList, options) {
             let valueStyleIndex = 0;
             for (let v = 0; v < valueSets.length; v++) {
               const valueSet = valueSets[v];
-              elementList.splice(i, 0, __spreadProps(__spreadValues({}, controlContext), {
+              elementList.splice(i, 0, __spreadProps(__spreadValues(__spreadValues({}, controlContext), controlDefaultStyle), {
                 controlId,
                 value: "",
                 type: el.type,
@@ -5290,8 +5290,10 @@ class Cursor {
     const agentCursorDom = this.cursorAgent.getAgentCursorDom();
     if (isFocus) {
       setTimeout(() => {
-        agentCursorDom.focus();
-        agentCursorDom.setSelectionRange(0, 0);
+        if (document.activeElement !== agentCursorDom) {
+          agentCursorDom.focus();
+          agentCursorDom.setSelectionRange(0, 0);
+        }
       });
     }
     const descent = metrics.boundingBoxDescent < 0 ? 0 : metrics.boundingBoxDescent;
@@ -5648,7 +5650,6 @@ function setRangeCache(host) {
   host.cachePositionContext = position.getPositionContext();
 }
 function mousedown(evt, host) {
-  var _a;
   if (evt.button === MouseEventButton.RIGHT)
     return;
   const draw = host.getDraw();
@@ -5700,7 +5701,7 @@ function mousedown(evt, host) {
       if (!control) {
         draw.getCheckboxParticle().setSelect(curElement);
       } else {
-        const codes = ((_a = control == null ? void 0 : control.code) == null ? void 0 : _a.split(",")) || [];
+        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);
@@ -6054,9 +6055,26 @@ function backspace(evt, host) {
   const rangeManager = draw.getRange();
   if (!rangeManager.getIsCanInput())
     return;
+  const { startIndex, endIndex, isCrossRowCol } = rangeManager.getRange();
   const control = draw.getControl();
   let curIndex;
-  if (control.getActiveControl() && control.getIsRangeCanCaptureEvent()) {
+  if (isCrossRowCol) {
+    const rowCol = draw.getTableParticle().getRangeRowCol();
+    if (!rowCol)
+      return;
+    let isDeleted = false;
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r];
+      for (let c = 0; c < row.length; c++) {
+        const col = row[c];
+        if (col.value.length > 1) {
+          draw.spliceElementList(col.value, 1, col.value.length - 1);
+          isDeleted = true;
+        }
+      }
+    }
+    curIndex = isDeleted ? 0 : null;
+  } else if (control.getActiveControl() && control.getIsRangeCanCaptureEvent()) {
     curIndex = control.keydown(evt);
   } else {
     const position = draw.getPosition();
@@ -6064,7 +6082,6 @@ function backspace(evt, host) {
     if (!cursorPosition)
       return;
     const { index: index2 } = cursorPosition;
-    const { startIndex, endIndex } = rangeManager.getRange();
     const isCollapsed = rangeManager.getIsCollapsed();
     const elementList = draw.getElementList();
     if (isCollapsed && index2 === 0) {
@@ -6094,11 +6111,19 @@ function backspace(evt, host) {
     }
     curIndex = isCollapsed ? index2 - 1 : startIndex;
   }
-  if (curIndex === null)
-    return;
   draw.getGlobalEvent().setCanvasEventAbility();
-  rangeManager.setRange(curIndex, curIndex);
-  draw.render({ curIndex });
+  if (curIndex === null) {
+    rangeManager.setRange(startIndex, startIndex);
+    draw.render({
+      curIndex: startIndex,
+      isSubmitHistory: false
+    });
+  } else {
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({
+      curIndex
+    });
+  }
 }
 function del(evt, host) {
   var _a;
@@ -6108,11 +6133,27 @@ function del(evt, host) {
   const rangeManager = draw.getRange();
   if (!rangeManager.getIsCanInput())
     return;
-  const { startIndex, endIndex } = rangeManager.getRange();
+  const { startIndex, endIndex, isCrossRowCol } = rangeManager.getRange();
   const elementList = draw.getElementList();
   const control = draw.getControl();
   let curIndex;
-  if (control.getActiveControl() && control.getIsRangeWithinControl()) {
+  if (isCrossRowCol) {
+    const rowCol = draw.getTableParticle().getRangeRowCol();
+    if (!rowCol)
+      return;
+    let isDeleted = false;
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r];
+      for (let c = 0; c < row.length; c++) {
+        const col = row[c];
+        if (col.value.length > 1) {
+          draw.spliceElementList(col.value, 1, col.value.length - 1);
+          isDeleted = true;
+        }
+      }
+    }
+    curIndex = isDeleted ? 0 : null;
+  } else if (control.getActiveControl() && control.getIsRangeWithinControl()) {
     curIndex = control.keydown(evt);
   } else if ((_a = elementList[endIndex + 1]) == null ? void 0 : _a.controlId) {
     curIndex = control.removeControl(endIndex + 1);
@@ -6138,11 +6179,19 @@ function del(evt, host) {
       curIndex = isCollapsed ? index2 : startIndex;
     }
   }
-  if (curIndex === null)
-    return;
   draw.getGlobalEvent().setCanvasEventAbility();
-  rangeManager.setRange(curIndex, curIndex);
-  draw.render({ curIndex });
+  if (curIndex === null) {
+    rangeManager.setRange(startIndex, startIndex);
+    draw.render({
+      curIndex: startIndex,
+      isSubmitHistory: false
+    });
+  } else {
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({
+      curIndex
+    });
+  }
 }
 function enter(evt, host) {
   var _a, _b;
@@ -7978,9 +8027,12 @@ class Position {
       const { index: index2, rowNo, coordinate: { leftTop, leftBottom } } = lastLetterList[j];
       if (y > leftTop[1] && y <= leftBottom[1]) {
         const headIndex = positionList.findIndex((p) => p.pageNo === positionNo && p.rowNo === rowNo);
-        if (x < this.options.margins[3]) {
+        const headElement = elementList[headIndex];
+        const headPosition = positionList[headIndex];
+        const headStartX = headElement.listStyle === ListStyle.CHECKBOX ? this.options.margins[3] : headPosition.coordinate.leftTop[0];
+        if (x < headStartX) {
           if (~headIndex) {
-            if (positionList[headIndex].value === ZERO) {
+            if (headPosition.value === ZERO) {
               curPositionIndex = headIndex;
             } else {
               curPositionIndex = headIndex - 1;
@@ -7990,7 +8042,7 @@ class Position {
             curPositionIndex = index2;
           }
         } else {
-          if (elementList[headIndex].listStyle === ListStyle.CHECKBOX && x < leftTop[0]) {
+          if (headElement.listStyle === ListStyle.CHECKBOX && x < leftTop[0]) {
             return {
               index: headIndex,
               isDirectHit: true,
@@ -9413,12 +9465,22 @@ class SelectionObserver {
   constructor(draw) {
     __publicField(this, "step", 5);
     __publicField(this, "thresholdPoints", [70, 40, 10, 20]);
+    __publicField(this, "selectionContainer");
     __publicField(this, "rangeManager");
     __publicField(this, "requestAnimationFrameId");
     __publicField(this, "isMousedown");
     __publicField(this, "isMoving");
+    __publicField(this, "clientWidth");
+    __publicField(this, "clientHeight");
+    __publicField(this, "containerRect");
     __publicField(this, "_mousedown", () => {
       this.isMousedown = true;
+      this.clientWidth = this.selectionContainer instanceof Document ? document.documentElement.clientWidth : this.selectionContainer.clientWidth;
+      this.clientHeight = this.selectionContainer instanceof Document ? document.documentElement.clientHeight : this.selectionContainer.clientHeight;
+      if (!(this.selectionContainer instanceof Document)) {
+        const rect = this.selectionContainer.getBoundingClientRect();
+        this.containerRect = rect;
+      }
     });
     __publicField(this, "_mouseup", () => {
       this.isMousedown = false;
@@ -9427,48 +9489,60 @@ class SelectionObserver {
     __publicField(this, "_mousemove", (evt) => {
       if (!this.isMousedown || this.rangeManager.getIsCollapsed())
         return;
-      const { x, y } = evt;
-      const clientWidth = document.documentElement.clientWidth;
-      const clientHeight = document.documentElement.clientHeight;
+      let { x, y } = evt;
+      if (this.containerRect) {
+        x = x - this.containerRect.x;
+        y = y - this.containerRect.y;
+      }
       if (y < this.thresholdPoints[0]) {
         this._startMove(MoveDirection.UP);
-      } else if (clientHeight - y <= this.thresholdPoints[1]) {
+      } else if (this.clientHeight - y <= this.thresholdPoints[1]) {
         this._startMove(MoveDirection.DOWN);
       } else if (x < this.thresholdPoints[2]) {
         this._startMove(MoveDirection.LEFT);
-      } else if (clientWidth - x < this.thresholdPoints[3]) {
+      } else if (this.clientWidth - x < this.thresholdPoints[3]) {
         this._startMove(MoveDirection.RIGHT);
       } else {
         this._stopMove();
       }
     });
+    this.rangeManager = draw.getRange();
+    const { scrollContainerSelector } = draw.getOptions();
+    this.selectionContainer = scrollContainerSelector ? document.querySelector(scrollContainerSelector) || document : document;
     this.requestAnimationFrameId = null;
     this.isMousedown = false;
     this.isMoving = false;
-    this.rangeManager = draw.getRange();
+    this.clientWidth = 0;
+    this.clientHeight = 0;
+    this.containerRect = null;
     this._addEvent();
   }
   _addEvent() {
-    document.addEventListener("mousedown", this._mousedown);
-    document.addEventListener("mousemove", this._mousemove);
-    document.addEventListener("mouseup", this._mouseup);
+    const container = this.selectionContainer;
+    container.addEventListener("mousedown", this._mousedown);
+    container.addEventListener("mousemove", this._mousemove);
+    container.addEventListener("mouseup", this._mouseup);
+    document.addEventListener("mouseleave", this._mouseup);
   }
   removeEvent() {
-    document.removeEventListener("mousedown", this._mousedown);
-    document.removeEventListener("mousemove", this._mousemove);
-    document.removeEventListener("mouseup", this._mouseup);
+    const container = this.selectionContainer;
+    container.removeEventListener("mousedown", this._mousedown);
+    container.removeEventListener("mousemove", this._mousemove);
+    container.removeEventListener("mouseup", this._mouseup);
+    document.removeEventListener("mouseleave", this._mouseup);
   }
   _move(direction) {
-    const x = window.scrollX;
-    const y = window.scrollY;
+    const container = this.selectionContainer instanceof Document ? window : this.selectionContainer;
+    const x = this.selectionContainer instanceof Document ? window.scrollX : container.scrollLeft;
+    const y = this.selectionContainer instanceof Document ? window.scrollY : container.scrollTop;
     if (direction === MoveDirection.DOWN) {
-      window.scrollTo(x, y + this.step);
+      container.scrollTo(x, y + this.step);
     } else if (direction === MoveDirection.UP) {
-      window.scrollTo(x, y - this.step);
+      container.scrollTo(x, y - this.step);
     } else if (direction === MoveDirection.LEFT) {
-      window.scrollTo(x - this.step, y);
+      container.scrollTo(x - this.step, y);
     } else {
-      window.scrollTo(x + this.step, y);
+      container.scrollTo(x + this.step, y);
     }
     this.requestAnimationFrameId = window.requestAnimationFrame(this._move.bind(this, direction));
   }
@@ -10474,7 +10548,7 @@ class ControlSearch {
           newEndIndex++;
         }
         i = newEndIndex;
-        const controlElementList = elementList.slice(startIndex, newEndIndex);
+        const controlElementList = elementList.slice(startIndex, newEndIndex).map((element2) => element2.controlComponent === ControlComponent.VALUE ? element2 : { value: ZERO });
         const highlight = this.highlightList[highlightIndex];
         const { ruleList } = highlight;
         for (let r = 0; r < ruleList.length; r++) {
@@ -10893,7 +10967,7 @@ class TextControl {
     this.control.getDraw().spliceElementList(elementList, startIndex + 1, endIndex - startIndex);
     const value = this.getValue(context);
     if (!value.length) {
-      this.control.addPlaceholder(startIndex);
+      this.control.addPlaceholder(startIndex, context);
     }
     return startIndex;
   }
@@ -12067,16 +12141,17 @@ class Control {
     if (!control.placeholder)
       return;
     const placeholderStrList = splitText(control.placeholder);
+    const anchorElementStyleAttr = pickObject(startElement, CONTROL_STYLE_ATTR);
     for (let p = 0; p < placeholderStrList.length; p++) {
       const value = placeholderStrList[p];
-      const newElement = {
+      const newElement = __spreadProps(__spreadValues({}, anchorElementStyleAttr), {
         value,
         controlId: startElement.controlId,
         type: ElementType.CONTROL,
         control: startElement.control,
         controlComponent: ControlComponent.PLACEHOLDER,
         color: this.controlOptions.placeholderColor
-      };
+      });
       formatElementContext(elementList, [newElement], startIndex);
       this.draw.spliceElementList(elementList, startIndex + p + 1, 0, newElement);
     }
@@ -12172,9 +12247,6 @@ class Control {
     return result;
   }
   setValueByConceptId(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
-      return;
     let isExistSet = false;
     const { conceptId, value } = payload;
     const setValue = (elementList) => {
@@ -12239,7 +12311,7 @@ class Control {
         } else if (type === ControlType.CHECKBOX) {
           const checkbox = new CheckboxControl(element, this);
           this.activeControl = checkbox;
-          const codes = (value == null ? void 0 : value.split(",")) || [];
+          const codes = value ? value.split(",") : [];
           checkbox.setSelect(codes, controlContext, controlRule);
         } else if (type === ControlType.RADIO) {
           const radio = new RadioControl(element, this);
@@ -12282,9 +12354,6 @@ class Control {
     }
   }
   setExtensionByConceptId(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
-      return;
     const { conceptId, extension } = payload;
     const setExtension = (elementList) => {
       var _a;
@@ -12325,9 +12394,6 @@ class Control {
     }
   }
   setPropertiesByConceptId(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
-      return;
     const { conceptId, properties } = payload;
     let isExistUpdate = false;
     function setProperties(elementList) {
@@ -12409,7 +12475,11 @@ class Control {
           }
         }
         if (element.controlId) {
-          controlElementList.push(element);
+          const controlElement = omitObject(element, [
+            ...TITLE_CONTEXT_ATTR,
+            ...LIST_CONTEXT_ATTR
+          ]);
+          controlElementList.push(controlElement);
         }
       }
     }
@@ -15227,15 +15297,21 @@ class Draw {
     });
   }
   getValue(options = {}) {
-    const { pageNo } = options;
+    const { pageNo, extraPickAttrs } = options;
     let mainElementList = this.elementList;
     if (Number.isInteger(pageNo) && pageNo >= 0 && pageNo < this.pageRowList.length) {
       mainElementList = this.pageRowList[pageNo].flatMap((row) => row.elementList);
     }
     const data2 = {
-      header: zipElementList(this.getHeaderElementList()),
-      main: zipElementList(mainElementList),
-      footer: zipElementList(this.getFooterElementList())
+      header: zipElementList(this.getHeaderElementList(), {
+        extraPickAttrs
+      }),
+      main: zipElementList(mainElementList, {
+        extraPickAttrs
+      }),
+      footer: zipElementList(this.getFooterElementList(), {
+        extraPickAttrs
+      })
     };
     return {
       version,
@@ -15657,12 +15733,14 @@ 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);
-            if (width <= availableWidth) {
-              curRowWidth += width;
+            const wordWidth = width * scale;
+            if (wordWidth <= availableWidth) {
+              curRowWidth += wordWidth;
               nextElement = endElement;
             }
           }
-          curRowWidth += this.textParticle.measurePunctuationWidth(ctx, nextElement);
+          const punctuationWidth = this.textParticle.measurePunctuationWidth(ctx, nextElement);
+          curRowWidth += punctuationWidth * scale;
         }
       }
       if (element.listId) {
@@ -16338,6 +16416,7 @@ class Command {
     __publicField(this, "executeSetControlProperties");
     __publicField(this, "executeSetControlHighlight");
     __publicField(this, "executeLocationControl");
+    __publicField(this, "executeInsertControl");
     __publicField(this, "executeUpdateOptions");
     __publicField(this, "executeInsertTitle");
     __publicField(this, "getCatalog");
@@ -16476,6 +16555,7 @@ class Command {
     this.getControlValue = adapt.getControlValue.bind(adapt);
     this.getControlList = adapt.getControlList.bind(adapt);
     this.executeLocationControl = adapt.locationControl.bind(adapt);
+    this.executeInsertControl = adapt.insertControl.bind(adapt);
   }
 }
 const defaultWatermarkOption = {
@@ -17667,27 +17747,15 @@ class CommandAdapt {
       const tr = curTrList[t];
       for (let d = 0; d < tr.tdList.length; d++) {
         const td = tr.tdList[d];
-        if (td.colspan > 1) {
-          const tdColIndex = td.colIndex;
-          if (tdColIndex <= curColIndex && tdColIndex + td.colspan - 1 >= curColIndex) {
-            td.colspan -= 1;
+        if (td.colIndex <= curColIndex && td.colIndex + td.colspan > curColIndex) {
+          if (td.colspan > 1) {
+            td.colspan--;
+          } else {
+            tr.tdList.splice(d, 1);
           }
         }
       }
     }
-    for (let t = 0; t < curTrList.length; t++) {
-      const tr = curTrList[t];
-      let start = -1;
-      for (let d = 0; d < tr.tdList.length; d++) {
-        const td = tr.tdList[d];
-        if (td.colIndex === curColIndex) {
-          start = d;
-        }
-      }
-      if (~start) {
-        tr.tdList.splice(start, 1);
-      }
-    }
     (_a = element.colgroup) == null ? void 0 : _a.splice(curColIndex, 1);
     this.position.setPositionContext({
       isTable: false
@@ -18804,21 +18872,12 @@ class CommandAdapt {
     return this.draw.getControl().getValueByConceptId(payload);
   }
   setControlValue(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
-      return;
     this.draw.getControl().setValueByConceptId(payload);
   }
   setControlExtension(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
-      return;
     this.draw.getControl().setExtensionByConceptId(payload);
   }
   setControlProperties(payload) {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
-      return;
     this.draw.getControl().setPropertiesByConceptId(payload);
   }
   setControlHighlight(payload) {
@@ -18911,6 +18970,24 @@ class CommandAdapt {
       }
     }
   }
+  insertControl(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const cloneElement = deepClone(payload);
+    const { startIndex } = this.range.getRange();
+    const elementList = this.draw.getElementList();
+    const copyElement = getAnchorElement(elementList, startIndex);
+    if (!copyElement)
+      return;
+    const cloneAttr = [
+      ...TABLE_CONTEXT_ATTR,
+      ...EDITOR_ROW_ATTR,
+      ...LIST_CONTEXT_ATTR
+    ];
+    cloneProperty(cloneAttr, copyElement, cloneElement);
+    this.draw.insertElementList([cloneElement]);
+  }
   getContainer() {
     return this.draw.getContainer();
   }