feat:format control data

src/editor/dataset/enum/Control.ts

@@ -1,4 +1,11 @@
 export enum ControlType {
   TEXT = 'text',
   SELECT = 'select'
+}
+
+export enum ControlComponent {
+  SUFFIX = 'suffix',
+  POSTFIX = 'postfix',
+  PLACEHOLDER = 'placeholder',
+  VALUE = 'value'
 }

src/editor/interface/Control.ts

@@ -6,16 +6,21 @@ export interface IValueSet {
   code: string;
 }
 
-export interface IControl {
+export interface IControlSelect {
+  valueSets: IValueSet[];
+}
+
+export interface IControlBasic {
   type: ControlType;
   value: IElement[] | null;
   placeholder: string;
   conceptId?: string;
   prefix?: string;
   postfix?: string;
-  valueSets?: IValueSet[];
 }
 
+export type IControl = IControlBasic & Partial<IControlSelect>
+
 export interface IControlOption {
   placeholderColor?: string;
   bracketColor?: string;

src/editor/interface/Element.ts

@@ -1,3 +1,4 @@
+import { ControlComponent } from '../dataset/enum/Control'
 import { ElementType } from '../dataset/enum/Element'
 import { RowFlex } from '../dataset/enum/Row'
 import { IControl } from './Control'
@@ -52,13 +53,19 @@ export interface ISeparator {
   dashArray?: number[];
 }
 
+export interface IControlElement {
+  control?: IControl;
+  controlId?: string;
+  controlComponent?: ControlComponent;
+}
+
 export type IElement = IElementBasic
   & IElementStyle
   & ITable
   & IHyperlinkElement
   & ISuperscriptSubscript
   & ISeparator
-  & { control?: IControl }
+  & IControlElement
 
 export interface IElementMetrics {
   width: number;

src/editor/utils/element.ts

@@ -2,6 +2,7 @@ import { deepClone, getUUID } from '.'
 import { ElementType, IElement } from '..'
 import { ZERO } from '../dataset/constant/Common'
 import { EDITOR_ELEMENT_ZIP_ATTR } from '../dataset/constant/Element'
+import { ControlComponent } from '../dataset/enum/Control'
 
 export function formatElementList(elementList: IElement[], isHandleFirstElement = true) {
   if (isHandleFirstElement && elementList[0]?.value !== ZERO) {
@@ -59,6 +60,74 @@ export function formatElementList(elementList: IElement[], isHandleFirstElement
         }
       }
       i--
+    } else if (el.type === ElementType.CONTROL) {
+      const { prefix, postfix, value, placeholder } = el.control!
+      const controlId = getUUID()
+      // 移除父节点
+      elementList.splice(i, 1)
+      // 前缀
+      if (prefix) {
+        const prefixStrList = prefix.split('')
+        for (let p = 0; p < prefixStrList.length; p++) {
+          const value = prefixStrList[p]
+          elementList.splice(i, 0, {
+            controlId,
+            value,
+            type: el.type,
+            control: el.control,
+            controlComponent: ControlComponent.SUFFIX
+          })
+          i++
+        }
+      }
+      // 值
+      if (value && value.length) {
+        for (let v = 0; v < value.length; v++) {
+          const element = value[v]
+          const valueStrList = element.value.split('')
+          for (let e = 0; e < valueStrList.length; e++) {
+            const value = valueStrList[e]
+            elementList.splice(i, 0, {
+              controlId,
+              value,
+              type: el.type,
+              control: el.control,
+              controlComponent: ControlComponent.VALUE
+            })
+            i++
+          }
+        }
+      } else {
+        // placeholder
+        const placeholderStrList = placeholder.split('')
+        for (let p = 0; p < placeholderStrList.length; p++) {
+          const value = placeholderStrList[p]
+          elementList.splice(i, 0, {
+            controlId,
+            value,
+            type: el.type,
+            control: el.control,
+            controlComponent: ControlComponent.PLACEHOLDER
+          })
+          i++
+        }
+      }
+      // 后缀
+      if (postfix) {
+        const postfixStrList = postfix.split('')
+        for (let p = 0; p < postfixStrList.length; p++) {
+          const value = postfixStrList[p]
+          elementList.splice(i, 0, {
+            controlId,
+            value,
+            type: el.type,
+            control: el.control,
+            controlComponent: ControlComponent.POSTFIX
+          })
+          i++
+        }
+      }
+      i--
     } else if ((!el.type || el.type === ElementType.TEXT) && el.value.length > 1) {
       elementList.splice(i, 1)
       const valueList = el.value.split('')