fix: error inserting image within control #422

src/editor/core/command/CommandAdapt.ts

@@ -1718,29 +1718,18 @@ export 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: IElement = {
-      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
+      }
+    ])
   }
 
   public search(payload: string | null) {

src/editor/core/draw/Draw.ts

@@ -551,9 +551,8 @@ export class Draw {
 
   public insertElementList(payload: IElement[]) {
     if (!payload.length) return
-    const isPartRangeInControlOutside =
-      this.control.isPartRangeInControlOutside()
-    if (isPartRangeInControlOutside) return
+    const isRangeCanInput = this.control.isRangeCanInput()
+    if (!isRangeCanInput) return
     const { startIndex, endIndex } = this.range.getRange()
     if (!~startIndex && !~endIndex) return
     formatElementList(payload, {
@@ -562,7 +561,12 @@ export class Draw {
     })
     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, undefined, {
         isIgnoreDisabledRule: true

src/editor/core/draw/control/Control.ts

@@ -158,6 +158,26 @@ export class Control {
     return false
   }
 
+  // 判断是否在控件可输入的地方
+  public isRangeCanInput(): boolean {
+    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)
+    )
+  }
+
   public isDisabledControl(): boolean {
     return !!this.activeControl?.getElement().control?.disabled
   }

src/editor/utils/element.ts

@@ -197,8 +197,13 @@ export function formatElementList(
       }
       i--
     } else if (el.type === ElementType.CONTROL) {
+      // 兼容控件内容类型错误
+      if (!el.control) {
+        i++
+        continue
+      }
       const { prefix, postfix, value, placeholder, code, type, valueSets } =
-        el.control!
+        el.control
       const {
         editorOptions: { control: controlOption, checkbox: checkboxOption }
       } = options