@hufe921/canvas-editor 0.9.63 → 0.9.65

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+## [0.9.65](https://github.com/Hufe921/canvas-editor/compare/v0.9.64...v0.9.65) (2024-02-06)
+
+
+### Bug Fixes
+
+* cursor position error when scaling the page #434 ([e03feb2](https://github.com/Hufe921/canvas-editor/commit/e03feb210282779ecebb7af3d9a3801392b66979)), closes [#434](https://github.com/Hufe921/canvas-editor/issues/434)
+* insert image render error when scaling the page #433 ([acb0d3f](https://github.com/Hufe921/canvas-editor/commit/acb0d3fc47953c822b2daa5b1b437780a2c0f67e)), closes [#433](https://github.com/Hufe921/canvas-editor/issues/433)
+
+
+### Features
+
+* add getRange api #429 ([2a6a41c](https://github.com/Hufe921/canvas-editor/commit/2a6a41c8c9ebe8188de08d43f10db89c77016950)), closes [#429](https://github.com/Hufe921/canvas-editor/issues/429)
+* paste original elements by api ([7ab103e](https://github.com/Hufe921/canvas-editor/commit/7ab103edd9c3dbfa3c94b31167fc68487656a4d0))
+* set margin style when printing #431 ([4015707](https://github.com/Hufe921/canvas-editor/commit/4015707025689648be2d3082dfbcbe2e597b55d1)), closes [#431](https://github.com/Hufe921/canvas-editor/issues/431)
+
+
+
+## [0.9.64](https://github.com/Hufe921/canvas-editor/compare/v0.9.63...v0.9.64) (2024-01-28)
+
+
+### Bug Fixes
+
+* error inserting image within control #422 ([ea4ac33](https://github.com/Hufe921/canvas-editor/commit/ea4ac339c7de962845f639a1c5ac24d8e3640485)), closes [#422](https://github.com/Hufe921/canvas-editor/issues/422)
+* render error when row element is empty #420 ([8999f28](https://github.com/Hufe921/canvas-editor/commit/8999f283bb87d92fe58b1aa8330bf4d9d75b9064)), closes [#420](https://github.com/Hufe921/canvas-editor/issues/420)
+* zone tip position error in firefox browser #423 ([3cf911c](https://github.com/Hufe921/canvas-editor/commit/3cf911c501a0c0af85d994d5b50c657c6cd77692)), closes [#423](https://github.com/Hufe921/canvas-editor/issues/423)
+
+
+### Features
+
+* add executeSetControlProperties api #391 ([3ffb6b9](https://github.com/Hufe921/canvas-editor/commit/3ffb6b94b57a0d0fe81cc778a26d4e2a234e24ab)), closes [#391](https://github.com/Hufe921/canvas-editor/issues/391)
+* copy and paste original elements #397 (#426) ([2fc16de](https://github.com/Hufe921/canvas-editor/commit/2fc16de4e15578cdd181c4186b4cf978924b5207)), closes [#397](https://github.com/Hufe921/canvas-editor/issues/397) [#426](https://github.com/Hufe921/canvas-editor/issues/426)
+
+
+
 ## [0.9.63](https://github.com/Hufe921/canvas-editor/compare/v0.9.62...v0.9.63) (2024-01-19)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.63";
+const version = "0.9.65";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -327,6 +327,7 @@ const defaultCursorOption = {
 };
 const EDITOR_COMPONENT = "editor-component";
 const EDITOR_PREFIX = "ce";
+const EDITOR_CLIPBOARD = `${EDITOR_PREFIX}-clipboard`;
 var MoveDirection;
 (function(MoveDirection2) {
   MoveDirection2["UP"] = "top";
@@ -3747,6 +3748,10 @@ function formatElementList(elementList, options) {
       }
       i--;
     } else if (el.type === ElementType.CONTROL) {
+      if (!el.control) {
+        i++;
+        continue;
+      }
       const { prefix, postfix, value, placeholder, code, type, valueSets } = el.control;
       const { editorOptions: { control: controlOption, checkbox: checkboxOption } } = options;
       const controlId = getUUID();
@@ -4549,35 +4554,81 @@ ${listIndex + 1}.${buildText(listElementList)}${isLast ? `
   }
   return buildText(zipElementList(elementList));
 }
-function pastHTML(host, htmlText) {
+function setClipboardData(data2) {
+  localStorage.setItem(EDITOR_CLIPBOARD, JSON.stringify({
+    text: data2.text,
+    elementList: data2.elementList
+  }));
+}
+function getClipboardData() {
+  const clipboardText = localStorage.getItem(EDITOR_CLIPBOARD);
+  return clipboardText ? JSON.parse(clipboardText) : null;
+}
+function removeClipboardData() {
+  localStorage.removeItem(EDITOR_CLIPBOARD);
+}
+function writeClipboardItem(text, html, elementList) {
+  if (!text && !html && !elementList.length)
+    return;
+  const plainText = new Blob([text], { type: "text/plain" });
+  const htmlText = new Blob([html], { type: "text/html" });
+  if (window.ClipboardItem) {
+    const item = new ClipboardItem({
+      [plainText.type]: plainText,
+      [htmlText.type]: htmlText
+    });
+    window.navigator.clipboard.write([item]);
+  } else {
+    const fakeElement = document.createElement("div");
+    fakeElement.setAttribute("contenteditable", "true");
+    fakeElement.innerHTML = html;
+    document.body.append(fakeElement);
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(fakeElement);
+    selection == null ? void 0 : selection.removeAllRanges();
+    selection == null ? void 0 : selection.addRange(range);
+    document.execCommand("copy");
+    fakeElement.remove();
+  }
+  setClipboardData({ text, elementList });
+}
+function writeElementList(elementList, options) {
+  const clipboardDom = createDomFromElementList(elementList, options);
+  document.body.append(clipboardDom);
+  const text = clipboardDom.innerText;
+  clipboardDom.remove();
+  const html = clipboardDom.innerHTML;
+  if (!text && !html && !elementList.length)
+    return;
+  writeClipboardItem(text, html, zipElementList(elementList));
+}
+function pasteElement(host, elementList) {
   const draw = host.getDraw();
   const isReadonly = draw.isReadonly();
   if (isReadonly)
     return;
   const rangeManager = draw.getRange();
   const { startIndex } = rangeManager.getRange();
-  const elementList = draw.getElementList();
-  const pasteElementList = getElementListByHTML(htmlText, {
-    innerWidth: draw.getOriginalInnerWidth()
-  });
+  const originalElementList = draw.getElementList();
   if (~startIndex && !rangeManager.getIsSelectAll()) {
-    const anchorElement = elementList[startIndex];
+    const anchorElement = originalElementList[startIndex];
     if ((anchorElement == null ? void 0 : anchorElement.titleId) || (anchorElement == null ? void 0 : anchorElement.listId)) {
       let start = 0;
-      while (start < pasteElementList.length) {
-        const pasteElement = pasteElementList[start];
-        if (anchorElement.titleId && /^\n/.test(pasteElement.value)) {
+      while (start < elementList.length) {
+        const pasteElement2 = elementList[start];
+        if (anchorElement.titleId && /^\n/.test(pasteElement2.value)) {
           break;
         }
-        if (VIRTUAL_ELEMENT_TYPE.includes(pasteElement.type)) {
-          pasteElementList.splice(start, 1);
-          if (pasteElement.valueList) {
-            for (let v = 0; v < pasteElement.valueList.length; v++) {
-              const element = pasteElement.valueList[v];
+        if (VIRTUAL_ELEMENT_TYPE.includes(pasteElement2.type)) {
+          elementList.splice(start, 1);
+          if (pasteElement2.valueList) {
+            for (let v = 0; v < pasteElement2.valueList.length; v++) {
+              const element = pasteElement2.valueList[v];
               if (element.value === ZERO || element.value === "\n") {
                 continue;
               }
-              pasteElementList.splice(start, 0, element);
+              elementList.splice(start, 0, element);
               start++;
             }
           }
@@ -4586,11 +4637,21 @@ function pastHTML(host, htmlText) {
         start++;
       }
     }
-    formatElementContext(elementList, pasteElementList, startIndex, {
+    formatElementContext(originalElementList, elementList, startIndex, {
       isBreakWhenWrap: true
     });
   }
-  draw.insertElementList(pasteElementList);
+  draw.insertElementList(elementList);
+}
+function pasteHTML(host, htmlText) {
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const elementList = getElementListByHTML(htmlText, {
+    innerWidth: draw.getOriginalInnerWidth()
+  });
+  pasteElement(host, elementList);
 }
 function pasteImage(host, file) {
   const draw = host.getDraw();
@@ -4633,6 +4694,13 @@ function pasteByEvent(host, evt) {
     paste(evt);
     return;
   }
+  const clipboardText = clipboardData.getData("text");
+  const editorClipboardData = getClipboardData();
+  if (clipboardText === (editorClipboardData == null ? void 0 : editorClipboardData.text)) {
+    pasteElement(host, editorClipboardData.elementList);
+    return;
+  }
+  removeClipboardData();
   let isHTML = false;
   for (let i = 0; i < clipboardData.items.length; i++) {
     const item = clipboardData.items[i];
@@ -4652,7 +4720,7 @@ function pasteByEvent(host, evt) {
       }
       if (item.type === "text/html" && isHTML) {
         item.getAsString((htmlText) => {
-          pastHTML(host, htmlText);
+          pasteHTML(host, htmlText);
         });
         break;
       }
@@ -4676,10 +4744,16 @@ async function pasteByApi(host, options) {
     paste();
     return;
   }
+  const clipboardText = await navigator.clipboard.readText();
+  const editorClipboardData = getClipboardData();
+  if (clipboardText === (editorClipboardData == null ? void 0 : editorClipboardData.text)) {
+    pasteElement(host, editorClipboardData.elementList);
+    return;
+  }
+  removeClipboardData();
   if (options == null ? void 0 : options.isPlainText) {
-    const text = await navigator.clipboard.readText();
-    if (text) {
-      host.input(text);
+    if (clipboardText) {
+      host.input(clipboardText);
     }
   } else {
     const clipboardData = await navigator.clipboard.read();
@@ -4701,7 +4775,7 @@ async function pasteByApi(host, options) {
         const htmlTextBlob = await item.getType("text/html");
         const htmlText = await htmlTextBlob.text();
         if (htmlText) {
-          pastHTML(host, htmlText);
+          pasteHTML(host, htmlText);
         }
       } else if (item.types.some((type) => type.startsWith("image/"))) {
         const type = item.types.find((type2) => type2.startsWith("image/"));
@@ -5901,41 +5975,6 @@ function removeComposingInput(host) {
   rangeManager.setRange(startIndex, startIndex);
   host.compositionInfo = null;
 }
-function writeClipboardItem(text, html) {
-  if (!text || !html)
-    return;
-  const plainText = new Blob([text], { type: "text/plain" });
-  const htmlText = new Blob([html], { type: "text/html" });
-  if (window.ClipboardItem) {
-    const item = new ClipboardItem({
-      [plainText.type]: plainText,
-      [htmlText.type]: htmlText
-    });
-    window.navigator.clipboard.write([item]);
-  } else {
-    const fakeElement = document.createElement("div");
-    fakeElement.setAttribute("contenteditable", "true");
-    fakeElement.innerHTML = html;
-    document.body.append(fakeElement);
-    const selection = window.getSelection();
-    const range = document.createRange();
-    range.selectNodeContents(fakeElement);
-    selection == null ? void 0 : selection.removeAllRanges();
-    selection == null ? void 0 : selection.addRange(range);
-    document.execCommand("copy");
-    fakeElement.remove();
-  }
-}
-function writeElementList(elementList, options) {
-  const clipboardDom = createDomFromElementList(elementList, options);
-  document.body.append(clipboardDom);
-  const text = clipboardDom.innerText;
-  clipboardDom.remove();
-  const html = clipboardDom.innerHTML;
-  if (!text || !html)
-    return;
-  writeClipboardItem(text, html);
-}
 function cut(host) {
   const draw = host.getDraw();
   const rangeManager = draw.getRange();
@@ -6638,6 +6677,7 @@ class Position {
     return { x, y, index: index2 };
   }
   computePositionList() {
+    var _a;
     this.positionList = [];
     const innerWidth = this.draw.getInnerWidth();
     const pageRowList = this.draw.getPageRowList();
@@ -6649,7 +6689,7 @@ class Position {
     let startRowIndex = 0;
     for (let i = 0; i < pageRowList.length; i++) {
       const rowList = pageRowList[i];
-      const startIndex = rowList[0].startIndex;
+      const startIndex = (_a = rowList[0]) == null ? void 0 : _a.startIndex;
       this.computePageRowPosition({
         positionList: this.positionList,
         rowList,
@@ -8952,7 +8992,8 @@ class SeparatorParticle {
   }
   render(ctx, element, x, y) {
     ctx.save();
-    ctx.lineWidth = this.options.scale;
+    const { scale } = this.options;
+    ctx.lineWidth = scale;
     if (element.color) {
       ctx.strokeStyle = element.color;
     }
@@ -8962,7 +9003,7 @@ class SeparatorParticle {
     ctx.translate(0, 0.5);
     ctx.beginPath();
     ctx.moveTo(x, y);
-    ctx.lineTo(x + element.width, y);
+    ctx.lineTo(x + element.width * scale, y);
     ctx.stroke();
     ctx.restore();
   }
@@ -8981,7 +9022,7 @@ class PageBreakParticle {
     const displayName = this.i18n.t("pageBreak.displayName");
     const { scale, defaultRowMargin } = this.options;
     const size = fontSize * scale;
-    const elementWidth = element.width;
+    const elementWidth = element.width * scale;
     const offsetY = this.draw.getDefaultBasicRowMarginHeight() * defaultRowMargin;
     ctx.save();
     ctx.font = `${size}px ${font}`;
@@ -9600,6 +9641,17 @@ class Control {
     }
     return false;
   }
+  isRangeCanInput() {
+    const { startIndex, endIndex } = this.getRange();
+    if (!~startIndex && !~endIndex)
+      return false;
+    if (startIndex === endIndex)
+      return true;
+    const elementList = this.getElementList();
+    const startElement = elementList[startIndex];
+    const endElement = elementList[endIndex];
+    return !startElement.controlId && !endElement.controlId || (!startElement.controlId || startElement.controlComponent === ControlComponent.POSTFIX) && endElement.controlComponent === ControlComponent.POSTFIX || !!startElement.controlId && endElement.controlId === startElement.controlId && endElement.controlComponent !== ControlComponent.POSTFIX;
+  }
   isDisabledControl() {
     var _a, _b;
     return !!((_b = (_a = this.activeControl) == null ? void 0 : _a.getElement().control) == null ? void 0 : _b.disabled);
@@ -10066,6 +10118,55 @@ class Control {
       setExtension(elementList);
     }
   }
+  setPropertiesByConceptId(payload) {
+    var _a;
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    const { conceptId, properties } = payload;
+    let isExistUpdate = false;
+    const pageComponentData = {
+      header: this.draw.getHeaderElementList(),
+      main: this.draw.getOriginalMainElementList(),
+      footer: this.draw.getFooterElementList()
+    };
+    for (const key in pageComponentData) {
+      const elementList = pageComponentData[key];
+      let i = 0;
+      while (i < elementList.length) {
+        const element = elementList[i];
+        i++;
+        if (((_a = element == null ? void 0 : element.control) == null ? void 0 : _a.conceptId) !== conceptId)
+          continue;
+        isExistUpdate = true;
+        element.control = __spreadProps(__spreadValues(__spreadValues({}, element.control), properties), {
+          value: element.control.value
+        });
+        let newEndIndex = i;
+        while (newEndIndex < elementList.length) {
+          const nextElement = elementList[newEndIndex];
+          if (nextElement.controlId !== element.controlId)
+            break;
+          newEndIndex++;
+        }
+        i = newEndIndex;
+      }
+    }
+    if (!isExistUpdate)
+      return;
+    for (const key in pageComponentData) {
+      const pageComponentKey = key;
+      const elementList = zipElementList(pageComponentData[pageComponentKey]);
+      pageComponentData[pageComponentKey] = elementList;
+      formatElementList(elementList, {
+        editorOptions: this.options
+      });
+    }
+    this.draw.setEditorData(pageComponentData);
+    this.draw.render({
+      isSetCursor: false
+    });
+  }
 }
 class CheckboxParticle {
   constructor(draw) {
@@ -11519,6 +11620,8 @@ class ZoneTip {
     this.pageContainer.addEventListener("mousemove", throttle((evt) => {
       if (this.isDisableMouseMove)
         return;
+      if (!evt.offsetY)
+        return;
       if (evt.target instanceof HTMLCanvasElement) {
         const mousemoveZone = this.zone.getZoneByY(evt.offsetY);
         if (!watchZones.includes(mousemoveZone)) {
@@ -12564,8 +12667,8 @@ class Draw {
   insertElementList(payload) {
     if (!payload.length)
       return;
-    const isPartRangeInControlOutside = this.control.isPartRangeInControlOutside();
-    if (isPartRangeInControlOutside)
+    const isRangeCanInput = this.control.isRangeCanInput();
+    if (!isRangeCanInput)
       return;
     const { startIndex, endIndex } = this.range.getRange();
     if (!~startIndex && !~endIndex)
@@ -12575,7 +12678,11 @@ class Draw {
       editorOptions: this.options
     });
     let curIndex = -1;
-    const activeControl = this.control.getActiveControl();
+    let activeControl = this.control.getActiveControl();
+    if (!activeControl && this.control.isRangeWithinControl()) {
+      this.control.initControl();
+      activeControl = this.control.getActiveControl();
+    }
     if (activeControl && !this.control.isRangInPostfix()) {
       curIndex = activeControl.setValue(payload, void 0, {
         isIgnoreDisabledRule: true
@@ -12798,9 +12905,11 @@ class Draw {
       p.style.marginBottom = `${this.getPageGap()}px`;
       this._initPageContext(this.ctxList[i]);
     });
+    const cursorPosition = this.position.getCursorPosition();
     this.render({
       isSubmitHistory: false,
-      isSetCursor: false
+      isSetCursor: !!cursorPosition,
+      curIndex: cursorPosition == null ? void 0 : cursorPosition.index
     });
     if (this.listener.pageScaleChange) {
       this.listener.pageScaleChange(payload);
@@ -13021,11 +13130,12 @@ class Draw {
         if (curRowWidth2 + elementWidth > availableWidth) {
           const surplusWidth = availableWidth - curRowWidth2;
           const adaptiveWidth = surplusWidth > 0 ? surplusWidth : Math.min(elementWidth, availableWidth);
-          element.width = adaptiveWidth;
-          element.height = elementHeight * adaptiveWidth / elementWidth;
-          metrics.width = element.width;
-          metrics.height = element.height;
-          metrics.boundingBoxDescent = element.height;
+          const adaptiveHeight = elementHeight * adaptiveWidth / elementWidth;
+          element.width = adaptiveWidth / scale;
+          element.height = adaptiveHeight / scale;
+          metrics.width = adaptiveWidth;
+          metrics.height = adaptiveHeight;
+          metrics.boundingBoxDescent = adaptiveHeight;
         } else {
           metrics.width = elementWidth;
           metrics.height = elementHeight;
@@ -13152,20 +13262,20 @@ class Draw {
           }
         }
       } else if (element.type === ElementType.SEPARATOR) {
-        element.width = availableWidth;
+        element.width = availableWidth / scale;
         metrics.width = availableWidth;
         metrics.height = defaultSize;
         metrics.boundingBoxAscent = -rowMargin;
         metrics.boundingBoxDescent = -rowMargin;
       } else if (element.type === ElementType.PAGE_BREAK) {
-        element.width = availableWidth;
+        element.width = availableWidth / scale;
         metrics.width = availableWidth;
         metrics.height = defaultSize;
       } else if (element.type === ElementType.CHECKBOX || element.controlComponent === ControlComponent.CHECKBOX) {
         const { width, height: height2, gap } = this.options.checkbox;
-        const elementWidth = (width + gap * 2) * scale;
+        const elementWidth = width + gap * 2;
         element.width = elementWidth;
-        metrics.width = elementWidth;
+        metrics.width = elementWidth * scale;
         metrics.height = height2 * scale;
       } else if (element.type === ElementType.TAB) {
         metrics.width = defaultTabWidth * scale;
@@ -13517,7 +13627,7 @@ class Draw {
     this.blockParticle.clear();
   }
   _drawPage(payload) {
-    var _a;
+    var _a, _b;
     const { elementList, positionList, rowList, pageNo } = payload;
     const { inactiveAlpha, pageMode, header, footer, pageNumber } = this.options;
     const innerWidth = this.getInnerWidth();
@@ -13529,7 +13639,7 @@ class Draw {
       this.margin.render(ctx, pageNo);
     }
     this.control.renderHighlightList(ctx, pageNo);
-    const index2 = rowList[0].startIndex;
+    const index2 = (_a = rowList[0]) == null ? void 0 : _a.startIndex;
     this.drawRow(ctx, {
       elementList,
       positionList,
@@ -13556,7 +13666,7 @@ class Draw {
     if (pageMode !== PageMode.CONTINUITY && this.options.watermark.data) {
       this.waterMark.render(ctx);
     }
-    if (this.elementList.length <= 1 && !((_a = this.elementList[0]) == null ? void 0 : _a.listId)) {
+    if (this.elementList.length <= 1 && !((_b = this.elementList[0]) == null ? void 0 : _b.listId)) {
       this.placeholder.render(ctx);
     }
   }
@@ -13800,6 +13910,7 @@ class Command {
     __publicField(this, "executeSetZone");
     __publicField(this, "executeSetControlValue");
     __publicField(this, "executeSetControlExtension");
+    __publicField(this, "executeSetControlProperties");
     __publicField(this, "executeSetControlHighlight");
     __publicField(this, "getCatalog");
     __publicField(this, "getImage");
@@ -13808,6 +13919,7 @@ class Command {
     __publicField(this, "getHTML");
     __publicField(this, "getText");
     __publicField(this, "getWordCount");
+    __publicField(this, "getRange");
     __publicField(this, "getRangeText");
     __publicField(this, "getRangeContext");
     __publicField(this, "getRangeRow");
@@ -13909,6 +14021,7 @@ class Command {
     this.getHTML = adapt.getHTML.bind(adapt);
     this.getText = adapt.getText.bind(adapt);
     this.getWordCount = adapt.getWordCount.bind(adapt);
+    this.getRange = adapt.getRange.bind(adapt);
     this.getRangeText = adapt.getRangeText.bind(adapt);
     this.getRangeContext = adapt.getRangeContext.bind(adapt);
     this.getRangeRow = adapt.getRangeRow.bind(adapt);
@@ -13922,6 +14035,7 @@ class Command {
     this.getContainer = adapt.getContainer.bind(adapt);
     this.executeSetControlValue = adapt.setControlValue.bind(adapt);
     this.executeSetControlExtension = adapt.setControlExtension.bind(adapt);
+    this.executeSetControlProperties = adapt.setControlProperties.bind(adapt);
     this.executeSetControlHighlight = adapt.setControlHighlight.bind(adapt);
     this.getControlValue = adapt.getControlValue.bind(adapt);
   }
@@ -13961,7 +14075,7 @@ function printImageBase64(base64List, width, height) {
     container.append(image);
   });
   const style = document.createElement("style");
-  const stylesheet = `*{margin:0;padding:0;}`;
+  const stylesheet = `*{margin:0;padding:0;}@page{margin:0;}`;
   style.append(document.createTextNode(stylesheet));
   setTimeout(() => {
     doc.write(`${style.outerHTML}${container.innerHTML}`);
@@ -15473,26 +15587,19 @@ class CommandAdapt {
     const isDisabled = this.draw.isReadonly() || this.control.isDisabledControl();
     if (isDisabled)
       return;
-    const activeControl = this.control.getActiveControl();
-    if (activeControl)
-      return;
     const { startIndex, endIndex } = this.range.getRange();
     if (!~startIndex && !~endIndex)
       return;
-    const elementList = this.draw.getElementList();
     const { value, width, height } = payload;
-    const element = {
-      value,
-      width,
-      height,
-      id: getUUID(),
-      type: ElementType.IMAGE
-    };
-    const curIndex = startIndex + 1;
-    formatElementContext(elementList, [element], startIndex);
-    this.draw.spliceElementList(elementList, curIndex, startIndex === endIndex ? 0 : endIndex - startIndex, element);
-    this.range.setRange(curIndex, curIndex);
-    this.draw.render({ curIndex });
+    this.draw.insertElementList([
+      {
+        value,
+        width,
+        height,
+        id: getUUID(),
+        type: ElementType.IMAGE
+      }
+    ]);
   }
   search(payload) {
     this.searchManager.setSearchKeyword(payload);
@@ -15701,6 +15808,9 @@ class CommandAdapt {
   getWordCount() {
     return this.workerManager.getWordCount();
   }
+  getRange() {
+    return deepClone(this.range.getRange());
+  }
   getRangeText() {
     return this.range.toString();
   }
@@ -15975,6 +16085,12 @@ class CommandAdapt {
       return;
     this.draw.getControl().setExtensionByConceptId(payload);
   }
+  setControlProperties(payload) {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.draw.getControl().setPropertiesByConceptId(payload);
+  }
   setControlHighlight(payload) {
     this.draw.getControl().setHighlightList(payload);
   }