feat: support for insert more elements into control #306

src/editor/core/command/CommandAdapt.ts

@@ -366,8 +366,6 @@ export class CommandAdapt {
   public superscript() {
     const isReadonly = this.draw.isReadonly()
     if (isReadonly) return
-    const activeControl = this.control.getActiveControl()
-    if (activeControl) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
     const superscriptIndex = selection.findIndex(
@@ -397,8 +395,6 @@ export class CommandAdapt {
   public subscript() {
     const isReadonly = this.draw.isReadonly()
     if (isReadonly) return
-    const activeControl = this.control.getActiveControl()
-    if (activeControl) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
     const subscriptIndex = selection.findIndex(
@@ -1947,7 +1943,7 @@ export class CommandAdapt {
     if (startIndex !== endIndex) return
     const elementList = this.draw.getElementList()
     const element = elementList[startIndex]
-    if (element.type !== ElementType.CONTROL) return
+    if (!element.controlId) return
     // 删除控件
     const control = this.draw.getControl()
     const newIndex = control.removeControl(startIndex)

src/editor/core/contextmenu/menus/controlMenus.ts

@@ -1,5 +1,4 @@
 import { INTERNAL_CONTEXT_MENU_KEY } from '../../../dataset/constant/ContextMenu'
-import { ElementType } from '../../../dataset/enum/Element'
 import { IRegisterContextMenu } from '../../../interface/contextmenu/ContextMenu'
 import { Command } from '../../command/Command'
 const {
@@ -14,7 +13,7 @@ export const controlMenus: IRegisterContextMenu[] = [
       return (
         !payload.isReadonly &&
         !payload.editorHasSelection &&
-        payload.startElement?.type === ElementType.CONTROL
+        !!payload.startElement?.controlId
       )
     },
     callback: (command: Command) => {

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

@@ -68,7 +68,7 @@ export class Control {
           }
         }
       }
-      if (element.type !== ElementType.CONTROL || element.control?.minWidth) {
+      if (!element.controlId || element.control?.minWidth) {
         return true
       }
       return (
@@ -87,8 +87,7 @@ export class Control {
     const startElement = elementList[startIndex]
     const endElement = elementList[endIndex]
     if (
-      (startElement?.type === ElementType.CONTROL ||
+      startElement.controlId &&
-        endElement?.type === ElementType.CONTROL) &&
       startElement.controlId !== endElement.controlId
     ) {
       return true
@@ -114,10 +113,9 @@ export class Control {
     const startElement = elementList[startIndex]
     const endElement = elementList[endIndex]
     if (
-      (startElement.type === ElementType.CONTROL ||
+      startElement.controlId &&
-        endElement.type === ElementType.CONTROL) &&
+      startElement.controlId === endElement.controlId &&
-      endElement.controlComponent !== ControlComponent.POSTFIX &&
+      endElement.controlComponent !== ControlComponent.POSTFIX
-      startElement.controlId === endElement.controlId
     ) {
       return true
     }

src/editor/core/draw/control/text/TextControl.ts

@@ -1,4 +1,4 @@
-import { EDITOR_ELEMENT_STYLE_ATTR } from '../../../../dataset/constant/Element'
+import { TEXTLIKE_ELEMENT_TYPE } from '../../../../dataset/constant/Element'
 import { ControlComponent } from '../../../../dataset/enum/Control'
 import { KeyMap } from '../../../../dataset/enum/KeyMap'
 import {
@@ -6,7 +6,7 @@ import {
   IControlInstance
 } from '../../../../interface/Control'
 import { IElement } from '../../../../interface/Element'
-import { omitObject } from '../../../../utils'
+import { omitObject, pickObject } from '../../../../utils'
 import { formatElementContext } from '../../../../utils/element'
 import { Control } from '../Control'
 
@@ -75,12 +75,15 @@ export class TextControl implements IControlInstance {
       // 移除空白占位符
       this.control.removePlaceholder(startIndex, context)
     }
-    // 插入
+    // 非文本类元素或前缀过渡掉样式属性
     const startElement = elementList[startIndex]
     const anchorElement =
+      (startElement.type &&
+        !TEXTLIKE_ELEMENT_TYPE.includes(startElement.type)) ||
       startElement.controlComponent === ControlComponent.PREFIX
-        ? omitObject(startElement, EDITOR_ELEMENT_STYLE_ATTR)
+        ? pickObject(startElement, ['control', 'controlId'])
-        : startElement
+        : omitObject(startElement, ['type'])
+    // 插入起始位置
     const start = range.startIndex + 1
     for (let i = 0; i < data.length; i++) {
       const newElement: IElement = {

src/editor/core/event/handlers/keydown.ts

@@ -65,7 +65,7 @@ export function keydown(evt: KeyboardEvent, host: CanvasEvent) {
     let curIndex: number | null
     if (activeControl) {
       curIndex = control.keydown(evt)
-    } else if (elementList[endIndex + 1]?.type === ElementType.CONTROL) {
+    } else if (elementList[endIndex + 1]?.controlId) {
       curIndex = control.removeControl(endIndex + 1)
     } else {
       if (!isCollapsed) {

src/editor/core/event/handlers/mousedown.ts

@@ -97,7 +97,7 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
   // 预览工具组件
   const previewer = draw.getPreviewer()
   previewer.clearResizer()
-  if (isDirectHitImage && !isReadonly) {
+  if (isDirectHitImage) {
     previewer.drawResizer(
       curElement,
       positionList[curIndex],

src/editor/core/event/handlers/mouseup.ts

@@ -50,17 +50,15 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
       cacheRange.startIndex + 1,
       cacheRange.endIndex + 1
     )
-    const isContainControl = dragElementList.find(
+    const isContainControl = dragElementList.find(element => element.controlId)
-      element => element.type === ElementType.CONTROL
-    )
     if (isContainControl) {
       // 仅允许 (最前/后元素不是控件 || 在控件前后 || 文本控件且是值) 拖拽
       const cacheStartElement = cacheElementList[cacheRange.startIndex + 1]
       const cacheEndElement = cacheElementList[cacheRange.endIndex]
       const isAllowDragControl =
-        ((cacheStartElement.type !== ElementType.CONTROL ||
+        ((!cacheStartElement.controlId ||
           cacheStartElement.controlComponent === ControlComponent.PREFIX) &&
-          (cacheEndElement.type !== ElementType.CONTROL ||
+          (!cacheEndElement.controlId ||
             cacheEndElement.controlComponent === ControlComponent.POSTFIX)) ||
         (cacheStartElement.controlId === cacheEndElement.controlId &&
           cacheStartElement.controlComponent === ControlComponent.PREFIX &&
@@ -152,7 +150,7 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
     )
     const cacheEndElement = cacheElementList[cacheRangeEndIndex]
     if (
-      cacheEndElement.type === ElementType.CONTROL &&
+      cacheEndElement.controlId &&
       cacheEndElement.controlComponent !== ControlComponent.POSTFIX
     ) {
       rangeManager.replaceRange({

src/editor/core/position/Position.ts

@@ -315,7 +315,7 @@ export class Position {
                     tdValueElement.type === ElementType.CHECKBOX ||
                     tdValueElement.controlComponent ===
                       ControlComponent.CHECKBOX,
-                  isControl: tdValueElement.type === ElementType.CONTROL,
+                  isControl: !!tdValueElement.controlId,
                   isImage: tablePosition.isImage,
                   isDirectHit: tablePosition.isDirectHit,
                   isTable: true,
@@ -366,7 +366,7 @@ export class Position {
         return {
           hitLineStartIndex,
           index: curPositionIndex,
-          isControl: element.type === ElementType.CONTROL
+          isControl: !!element.controlId
         }
       }
     }
@@ -471,7 +471,7 @@ export class Position {
     return {
       hitLineStartIndex,
       index: curPositionIndex,
-      isControl: elementList[curPositionIndex]?.type === ElementType.CONTROL
+      isControl: !!elementList[curPositionIndex]?.controlId
     }
   }
 

src/editor/core/range/RangeManager.ts

@@ -275,7 +275,7 @@ export class RangeManager {
     if (~startIndex && ~endIndex) {
       const elementList = this.draw.getElementList()
       const element = elementList[startIndex]
-      if (element?.type === ElementType.CONTROL) {
+      if (element?.controlId) {
         control.initControl()
         return
       }

src/editor/core/worker/works/wordCount.ts

@@ -44,7 +44,7 @@ function pickText(elementList: IElement[]): string {
         e++
       }
       text += pickText(valueList)
-    } else if (element.type === ElementType.CONTROL) {
+    } else if (element.controlId) {
       const controlId = element.controlId
       const valueList: IElement[] = []
       while (e < elementList.length) {
@@ -54,7 +54,7 @@ function pickText(elementList: IElement[]): string {
           break
         }
         if (controlE.controlComponent === ControlComponent.VALUE) {
-          delete controlE.type
+          delete controlE.controlId
           valueList.push(controlE)
         }
         e++

src/editor/utils/element.ts

@@ -538,7 +538,7 @@ export function zipElementList(payload: IElement[]): IElement[] {
       }
       dateElement.valueList = zipElementList(valueList)
       element = dateElement
-    } else if (element.type === ElementType.CONTROL) {
+    } else if (element.controlId) {
       // 控件处理
       const controlId = element.controlId
       const control = element.control!
@@ -555,8 +555,8 @@ export function zipElementList(payload: IElement[]): IElement[] {
           break
         }
         if (controlE.controlComponent === ControlComponent.VALUE) {
-          delete controlE.type
           delete controlE.control
+          delete controlE.controlId
           valueList.push(controlE)
         }
         e++
@@ -837,8 +837,14 @@ export function createDomFromElementList(
         TEXTLIKE_ELEMENT_TYPE.includes(element.type)
       ) {
         let text = ''
-        if (element.type === ElementType.CONTROL) {
+        if (element.controlId) {
-          text = element.control!.value?.[0]?.value || ''
+          text =
+            element
+              .control!.value?.filter(
+                v => !v.type || TEXTLIKE_ELEMENT_TYPE.includes(v.type)
+              )
+              .map(v => v.value)
+              .join('') || ''
         } else if (element.type === ElementType.DATE) {
           text = element.valueList?.map(v => v.value).join('') || ''
         } else {

src/main.ts

@@ -1481,16 +1481,10 @@ window.onload = function () {
 
   instance.listener.controlChange = function (payload) {
     const disableMenusInControlContext = [
-      'superscript',
-      'subscript',
       'table',
-      'image',
       'hyperlink',
       'separator',
-      'codeblock',
+      'page-break'
-      'page-break',
-      'control',
-      'checkbox'
     ]
     // 菜单操作权限
     disableMenusInControlContext.forEach(menu => {