editor-svg 1.0.0

package/src/editor/utils/element.ts

@@ -0,0 +1,1877 @@
+import {
+  cloneProperty,
+  deepClone,
+  deepCloneOmitKeys,
+  deleteProperty,
+  getUUID,
+  isArrayEqual,
+  omitObject,
+  pickObject,
+  splitText
+} from '.'
+import { IFrameBlock } from '../core/draw/particle/block/modules/IFrameBlock'
+import { LaTexParticle } from '../core/draw/particle/latex/LaTexParticle'
+import { NON_BREAKING_SPACE, ZERO } from '../dataset/constant/Common'
+import {
+  AREA_CONTEXT_ATTR,
+  BLOCK_ELEMENT_TYPE,
+  CONTROL_STYLE_ATTR,
+  EDITOR_ELEMENT_CONTEXT_ATTR,
+  EDITOR_ELEMENT_ZIP_ATTR,
+  EDITOR_ROW_ATTR,
+  INLINE_NODE_NAME,
+  TABLE_CONTEXT_ATTR,
+  TABLE_TD_ZIP_ATTR,
+  TEXTLIKE_ELEMENT_TYPE,
+  TITLE_CONTEXT_ATTR
+} from '../dataset/constant/Element'
+import {
+  listStyleCSSMapping,
+  listTypeElementMapping,
+  ulStyleMapping
+} from '../dataset/constant/List'
+import { START_LINE_BREAK_REG } from '../dataset/constant/Regular'
+import {
+  titleNodeNameMapping,
+  titleOrderNumberMapping,
+  titleSizeMapping
+} from '../dataset/constant/Title'
+import { BlockType } from '../dataset/enum/Block'
+import { ImageDisplay, LocationPosition } from '../dataset/enum/Common'
+import { ControlComponent, ControlType } from '../dataset/enum/Control'
+import { EditorMode } from '../dataset/enum/Editor'
+import { ElementType } from '../dataset/enum/Element'
+import { ListStyle, ListType, UlStyle } from '../dataset/enum/List'
+import { RowFlex } from '../dataset/enum/Row'
+import { TableBorder, TdBorder } from '../dataset/enum/table/Table'
+import { VerticalAlign } from '../dataset/enum/VerticalAlign'
+import { DeepRequired } from '../interface/Common'
+import { IControlSelect } from '../interface/Control'
+import { IEditorOption } from '../interface/Editor'
+import { IElement } from '../interface/Element'
+import { IRowElement } from '../interface/Row'
+import { ITd } from '../interface/table/Td'
+import { ITr } from '../interface/table/Tr'
+import { mergeOption } from './option'
+
+export function unzipElementList(elementList: IElement[]): IElement[] {
+  const result: IElement[] = []
+  for (let v = 0; v < elementList.length; v++) {
+    const valueItem = elementList[v]
+    const textList = splitText(valueItem.value)
+    for (let d = 0; d < textList.length; d++) {
+      result.push({ ...valueItem, value: textList[d] })
+    }
+  }
+  return result
+}
+
+interface IFormatElementListOption {
+  isHandleFirstElement?: boolean // 根据上下文确定首字符处理逻辑（处理首字符补偿）
+  isForceCompensation?: boolean // 强制补偿字符
+  editorOptions: DeepRequired<IEditorOption>
+}
+
+export function formatElementList(
+  elementList: IElement[],
+  options: IFormatElementListOption
+) {
+  const {
+    isHandleFirstElement = true,
+    isForceCompensation = false,
+    editorOptions
+  } = options
+  const startElement = elementList[0]
+  // 非首字符零宽节点文本元素则补偿-列表元素内部会补偿此处忽略
+  if (
+    isForceCompensation ||
+    (isHandleFirstElement &&
+      startElement?.type !== ElementType.LIST &&
+      ((startElement?.type && startElement.type !== ElementType.TEXT) ||
+        !START_LINE_BREAK_REG.test(startElement?.value)))
+  ) {
+    elementList.unshift({
+      value: ZERO
+    })
+  }
+  let i = 0
+  while (i < elementList.length) {
+    let el = elementList[i]
+    // 优先处理虚拟元素
+    if (el.type === ElementType.TITLE) {
+      // 移除父节点
+      elementList.splice(i, 1)
+      // 格式化元素
+      const valueList = el.valueList || []
+      formatElementList(valueList, {
+        ...options,
+        isHandleFirstElement: false,
+        isForceCompensation: false
+      })
+      // 追加节点
+      if (valueList.length) {
+        const titleId = el.titleId || getUUID()
+        const titleOptions = editorOptions.title
+        for (let v = 0; v < valueList.length; v++) {
+          const value = valueList[v]
+          value.title = el.title
+          if (el.level) {
+            value.titleId = titleId
+            value.level = el.level
+          }
+          // 文本型元素设置字体及加粗
+          if (isTextLikeElement(value)) {
+            if (!value.size) {
+              value.size = titleOptions[titleSizeMapping[value.level!]]
+            }
+            if (value.bold === undefined) {
+              value.bold = true
+            }
+          }
+          elementList.splice(i, 0, value)
+          i++
+        }
+      }
+      i--
+    } else if (el.type === ElementType.LIST) {
+      // 移除父节点
+      elementList.splice(i, 1)
+      // 格式化元素
+      const valueList = el.valueList || []
+      formatElementList(valueList, {
+        ...options,
+        isHandleFirstElement: true,
+        isForceCompensation: false
+      })
+      // 追加节点
+      if (valueList.length) {
+        const listId = getUUID()
+        for (let v = 0; v < valueList.length; v++) {
+          const value = valueList[v]
+          value.listId = listId
+          value.listType = el.listType
+          value.listStyle = el.listStyle
+          elementList.splice(i, 0, value)
+          i++
+        }
+      }
+      i--
+    } else if (el.type === ElementType.AREA) {
+      // 移除父节点
+      elementList.splice(i, 1)
+      // 格式化元素
+      const valueList = el?.valueList || []
+      formatElementList(valueList, {
+        ...options,
+        isHandleFirstElement: true,
+        isForceCompensation: true
+      })
+      if (valueList.length) {
+        const areaId = getUUID()
+        for (let v = 0; v < valueList.length; v++) {
+          const value = valueList[v]
+          value.areaId = el.areaId || areaId
+          value.area = el.area
+          value.areaIndex = v
+          if (value.type === ElementType.TABLE) {
+            const trList = value.trList!
+            for (let r = 0; r < trList.length; r++) {
+              const tr = trList[r]
+              for (let d = 0; d < tr.tdList.length; d++) {
+                const td = tr.tdList[d]
+                const tdValueList = td.value
+                for (let t = 0; t < tdValueList.length; t++) {
+                  const tdValue = tdValueList[t]
+                  tdValue.areaId = el.areaId || areaId
+                  tdValue.area = el.area
+                }
+              }
+            }
+          }
+          elementList.splice(i, 0, value)
+          i++
+        }
+      }
+      i--
+    } else if (el.type === ElementType.TABLE) {
+      const tableId = el.id || getUUID()
+      el.id = tableId
+      if (el.trList) {
+        const { defaultTrMinHeight } = editorOptions.table
+        for (let t = 0; t < el.trList.length; t++) {
+          const tr = el.trList[t]
+          const trId = tr.id || getUUID()
+          tr.id = trId
+          if (!tr.minHeight || tr.minHeight < defaultTrMinHeight) {
+            tr.minHeight = defaultTrMinHeight
+          }
+          if (tr.height < tr.minHeight) {
+            tr.height = tr.minHeight
+          }
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d]
+            const tdId = td.id || getUUID()
+            td.id = tdId
+            formatElementList(td.value, {
+              ...options,
+              isHandleFirstElement: true,
+              isForceCompensation: true
+            })
+            // 首字符字体大小默认使用首个字符元素字体大小
+            if (
+              !td.value[0].size &&
+              td.value[1]?.size &&
+              isTextLikeElement(td.value[1])
+            ) {
+              td.value[0].size = td.value[1].size
+            }
+            for (let v = 0; v < td.value.length; v++) {
+              const value = td.value[v]
+              value.tdId = tdId
+              value.trId = trId
+              value.tableId = tableId
+            }
+          }
+        }
+      }
+    } else if (el.type === ElementType.HYPERLINK) {
+      // 移除父节点
+      elementList.splice(i, 1)
+      // 元素展开
+      const valueList = unzipElementList(el.valueList || [])
+      // 追加节点
+      if (valueList.length) {
+        const hyperlinkId = getUUID()
+        for (let v = 0; v < valueList.length; v++) {
+          const value = valueList[v]
+          value.type = el.type
+          value.url = el.url
+          value.hyperlinkId = hyperlinkId
+          elementList.splice(i, 0, value)
+          i++
+        }
+      }
+      i--
+    } else if (el.type === ElementType.DATE) {
+      // 移除父节点
+      elementList.splice(i, 1)
+      // 元素展开
+      const valueList = unzipElementList(el.valueList || [])
+      // 追加节点
+      if (valueList.length) {
+        const dateId = getUUID()
+        for (let v = 0; v < valueList.length; v++) {
+          const value = valueList[v]
+          value.type = el.type
+          value.dateFormat = el.dateFormat
+          value.dateId = dateId
+          elementList.splice(i, 0, value)
+          i++
+        }
+      }
+      i--
+    } else if (el.type === ElementType.CONTROL) {
+      // 兼容控件内容类型错误
+      if (!el.control) {
+        i++
+        continue
+      }
+      const {
+        prefix,
+        postfix,
+        preText,
+        postText,
+        value,
+        placeholder,
+        code,
+        type,
+        valueSets
+      } = el.control
+      const {
+        editorOptions: {
+          control: controlOption,
+          checkbox: checkboxOption,
+          radio: radioOption
+        }
+      } = options
+      const controlId = el.controlId || getUUID()
+      // 移除父节点
+      elementList.splice(i, 1)
+      // 控件上下文提取（压缩后的控件上下文无法提取）
+      const controlContext = pickObject(el, [
+        ...EDITOR_ELEMENT_CONTEXT_ATTR,
+        ...EDITOR_ROW_ATTR
+      ])
+      // 控件设置的默认样式（以前缀为基准）
+      const controlDefaultStyle = pickObject(
+        <IElement>(<unknown>el.control),
+        CONTROL_STYLE_ATTR
+      )
+      // 前后缀个性化设置
+      const thePrePostfixArg: Omit<IElement, 'value'> = {
+        ...controlDefaultStyle,
+        color: editorOptions.control.bracketColor
+      }
+      // 前缀
+      const prefixStrList = splitText(prefix || controlOption.prefix)
+      for (let p = 0; p < prefixStrList.length; p++) {
+        const value = prefixStrList[p]
+        elementList.splice(i, 0, {
+          ...controlContext,
+          ...thePrePostfixArg,
+          controlId,
+          value,
+          type: el.type,
+          control: el.control,
+          controlComponent: ControlComponent.PREFIX
+        })
+        i++
+      }
+      // 前文本
+      if (preText) {
+        const preTextStrList = splitText(preText)
+        for (let p = 0; p < preTextStrList.length; p++) {
+          const value = preTextStrList[p]
+          elementList.splice(i, 0, {
+            ...controlContext,
+            ...controlDefaultStyle,
+            controlId,
+            value,
+            type: el.type,
+            control: el.control,
+            controlComponent: ControlComponent.PRE_TEXT
+          })
+          i++
+        }
+      }
+      // 值
+      if (
+        (value && value.length) ||
+        type === ControlType.CHECKBOX ||
+        type === ControlType.RADIO ||
+        (type === ControlType.SELECT && code && (!value || !value.length))
+      ) {
+        let valueList: IElement[] = value ? deepClone(value) : []
+        if (type === ControlType.CHECKBOX) {
+          const codeList = code ? code.split(',') : []
+          if (Array.isArray(valueSets) && valueSets.length) {
+            // 拆分valueList优先使用其属性
+            const valueStyleList = valueList.reduce(
+              (pre, cur) =>
+                pre.concat(
+                  cur.value.split('').map(v => ({ ...cur, value: v }))
+                ),
+              [] as IElement[]
+            )
+            let valueStyleIndex = 0
+            for (let v = 0; v < valueSets.length; v++) {
+              const valueSet = valueSets[v]
+              // checkbox组件
+              elementList.splice(i, 0, {
+                ...controlContext,
+                ...controlDefaultStyle,
+                controlId,
+                value: '',
+                type: el.type,
+                control: el.control,
+                controlComponent: ControlComponent.CHECKBOX,
+                checkbox: {
+                  code: valueSet.code,
+                  value: codeList.includes(valueSet.code)
+                }
+              })
+              i++
+              // 文本
+              const valueStrList = splitText(valueSet.value)
+              for (let e = 0; e < valueStrList.length; e++) {
+                const value = valueStrList[e]
+                const isLastLetter = e === valueStrList.length - 1
+                elementList.splice(i, 0, {
+                  ...controlContext,
+                  ...controlDefaultStyle,
+                  ...valueStyleList[valueStyleIndex],
+                  controlId,
+                  value: value === '\n' ? ZERO : value,
+                  letterSpacing: isLastLetter ? checkboxOption.gap : 0,
+                  control: el.control,
+                  controlComponent: ControlComponent.VALUE
+                })
+                valueStyleIndex++
+                i++
+              }
+            }
+          }
+        } else if (type === ControlType.RADIO) {
+          if (Array.isArray(valueSets) && valueSets.length) {
+            // 拆分valueList优先使用其属性
+            const valueStyleList = valueList.reduce(
+              (pre, cur) =>
+                pre.concat(
+                  cur.value.split('').map(v => ({ ...cur, value: v }))
+                ),
+              [] as IElement[]
+            )
+            let valueStyleIndex = 0
+            for (let v = 0; v < valueSets.length; v++) {
+              const valueSet = valueSets[v]
+              // radio组件
+              elementList.splice(i, 0, {
+                ...controlContext,
+                ...controlDefaultStyle,
+                controlId,
+                value: '',
+                type: el.type,
+                control: el.control,
+                controlComponent: ControlComponent.RADIO,
+                radio: {
+                  code: valueSet.code,
+                  value: code === valueSet.code
+                }
+              })
+              i++
+              // 文本
+              const valueStrList = splitText(valueSet.value)
+              for (let e = 0; e < valueStrList.length; e++) {
+                const value = valueStrList[e]
+                const isLastLetter = e === valueStrList.length - 1
+                elementList.splice(i, 0, {
+                  ...controlContext,
+                  ...controlDefaultStyle,
+                  ...valueStyleList[valueStyleIndex],
+                  controlId,
+                  value: value === '\n' ? ZERO : value,
+                  letterSpacing: isLastLetter ? radioOption.gap : 0,
+                  control: el.control,
+                  controlComponent: ControlComponent.VALUE
+                })
+                valueStyleIndex++
+                i++
+              }
+            }
+          }
+        } else {
+          if (!value || !value.length) {
+            if (Array.isArray(valueSets) && valueSets.length) {
+              const valueSet = valueSets.find(v => v.code === code)
+              if (valueSet) {
+                valueList = [
+                  {
+                    value: valueSet.value
+                  }
+                ]
+              }
+            }
+          }
+          formatElementList(valueList, {
+            ...options,
+            isHandleFirstElement: false,
+            isForceCompensation: false
+          })
+          for (let v = 0; v < valueList.length; v++) {
+            const element = valueList[v]
+            const value = element.value
+            elementList.splice(i, 0, {
+              ...controlContext,
+              ...controlDefaultStyle,
+              ...element,
+              controlId,
+              value: value === '\n' ? ZERO : value,
+              type: element.type || ElementType.TEXT,
+              control: el.control,
+              controlComponent: ControlComponent.VALUE
+            })
+            i++
+          }
+        }
+      } else if (placeholder) {
+        // placeholder
+        const thePlaceholderArgs: Omit<IElement, 'value'> = {
+          ...controlDefaultStyle,
+          color: editorOptions.control.placeholderColor
+        }
+        const placeholderStrList = splitText(placeholder)
+        for (let p = 0; p < placeholderStrList.length; p++) {
+          const value = placeholderStrList[p]
+          elementList.splice(i, 0, {
+            ...controlContext,
+            ...thePlaceholderArgs,
+            controlId,
+            value: value === '\n' ? ZERO : value,
+            type: el.type,
+            control: el.control,
+            controlComponent: ControlComponent.PLACEHOLDER
+          })
+          i++
+        }
+      }
+      // 后文本
+      if (postText) {
+        const postTextStrList = splitText(postText)
+        for (let p = 0; p < postTextStrList.length; p++) {
+          const value = postTextStrList[p]
+          elementList.splice(i, 0, {
+            ...controlContext,
+            ...controlDefaultStyle,
+            controlId,
+            value,
+            type: el.type,
+            control: el.control,
+            controlComponent: ControlComponent.POST_TEXT
+          })
+          i++
+        }
+      }
+      // 后缀
+      const postfixStrList = splitText(postfix || controlOption.postfix)
+      for (let p = 0; p < postfixStrList.length; p++) {
+        const value = postfixStrList[p]
+        elementList.splice(i, 0, {
+          ...controlContext,
+          ...thePrePostfixArg,
+          controlId,
+          value,
+          type: el.type,
+          control: el.control,
+          controlComponent: ControlComponent.POSTFIX
+        })
+        i++
+      }
+      i--
+    } else if (
+      (!el.type || TEXTLIKE_ELEMENT_TYPE.includes(el.type)) &&
+      el.value?.length > 1
+    ) {
+      elementList.splice(i, 1)
+      const valueList = splitText(el.value)
+      for (let v = 0; v < valueList.length; v++) {
+        elementList.splice(i + v, 0, { ...el, value: valueList[v] })
+      }
+      el = elementList[i]
+    }
+    if (el.value === '\n' || el.value == '\r\n') {
+      el.value = ZERO
+    }
+    if (el.type === ElementType.IMAGE || el.type === ElementType.BLOCK) {
+      el.id = el.id || getUUID()
+    }
+    if (el.type === ElementType.LATEX) {
+      const { svg, width, height } = LaTexParticle.convertLaTextToSVG(el.value)
+      el.width = el.width || width
+      el.height = el.height || height
+      el.laTexSVG = svg
+      el.id = el.id || getUUID()
+    }
+    i++
+  }
+}
+
+export function isSameElementExceptValue(
+  source: IElement,
+  target: IElement
+): boolean {
+  const sourceKeys = Object.keys(source)
+  const targetKeys = Object.keys(target)
+  if (sourceKeys.length !== targetKeys.length) return false
+  for (let s = 0; s < sourceKeys.length; s++) {
+    const key = sourceKeys[s] as never
+    // 值不需要校验
+    if (key === 'value') continue
+    // groupIds数组需特殊校验数组是否相等
+    if (
+      key === 'groupIds' &&
+      Array.isArray(source[key]) &&
+      Array.isArray(target[key]) &&
+      isArrayEqual(source[key], target[key])
+    ) {
+      continue
+    }
+    if (source[key] !== target[key]) {
+      return false
+    }
+  }
+  return true
+}
+interface IPickElementOption {
+  extraPickAttrs?: Array<keyof IElement>
+}
+export function pickElementAttr(
+  payload: IElement,
+  option: IPickElementOption = {}
+): IElement {
+  const { extraPickAttrs } = option
+  const zipAttrs = [...EDITOR_ELEMENT_ZIP_ATTR]
+  if (extraPickAttrs) {
+    zipAttrs.push(...extraPickAttrs)
+  }
+  const element: IElement = {
+    value: payload.value === ZERO ? `\n` : payload.value
+  }
+  zipAttrs.forEach(attr => {
+    const value = payload[attr] as never
+    if (value !== undefined) {
+      element[attr] = value
+    }
+  })
+  return element
+}
+
+interface IZipElementListOption {
+  extraPickAttrs?: Array<keyof IElement>
+  isClassifyArea?: boolean
+  isClone?: boolean
+}
+export function zipElementList(
+  payload: IElement[],
+  options: IZipElementListOption = {}
+): IElement[] {
+  const { extraPickAttrs, isClassifyArea = false, isClone = true } = options
+  const elementList = isClone ? deepClone(payload) : payload
+  const zipElementListData: IElement[] = []
+  let e = 0
+  while (e < elementList.length) {
+    let element = elementList[e]
+    // 上下文首字符（占位符）-列表首字符要保留避免是复选框
+    if (
+      e === 0 &&
+      element.value === ZERO &&
+      !element.listId &&
+      (!element.type || element.type === ElementType.TEXT)
+    ) {
+      e++
+      continue
+    }
+    // 优先处理虚拟元素，后表格、超链接、日期、控件特殊处理
+    if (element.areaId) {
+      const areaId = element.areaId
+      const area = element.area
+      // 收集并压缩数据
+      const valueList: IElement[] = []
+      while (e < elementList.length) {
+        const areaE = elementList[e]
+        if (areaId !== areaE.areaId) {
+          e--
+          break
+        }
+        delete areaE.area
+        delete areaE.areaId
+        valueList.push(areaE)
+        e++
+      }
+      const areaElementList = zipElementList(valueList, options)
+      // 不归类区域元素
+      if (isClassifyArea) {
+        const areaElement: IElement = {
+          type: ElementType.AREA,
+          value: '',
+          areaId,
+          area
+        }
+        areaElement.valueList = areaElementList
+        element = areaElement
+      } else {
+        zipElementListData.splice(e, 0, ...areaElementList)
+        continue
+      }
+    } else if (element.titleId && element.level) {
+      // 标题处理
+      const titleId = element.titleId
+      if (titleId) {
+        const level = element.level
+        const titleElement: IElement = {
+          type: ElementType.TITLE,
+          title: element.title,
+          titleId,
+          value: '',
+          level
+        }
+        const valueList: IElement[] = []
+        while (e < elementList.length) {
+          const titleE = elementList[e]
+          if (titleId !== titleE.titleId) {
+            e--
+            break
+          }
+          delete titleE.level
+          delete titleE.title
+          valueList.push(titleE)
+          e++
+        }
+        titleElement.valueList = zipElementList(valueList, options)
+        element = titleElement
+      }
+    } else if (element.listId && element.listType) {
+      // 列表处理
+      const listId = element.listId
+      if (listId) {
+        const listType = element.listType
+        const listStyle = element.listStyle
+        const listElement: IElement = {
+          type: ElementType.LIST,
+          value: '',
+          listId,
+          listType,
+          listStyle
+        }
+        const valueList: IElement[] = []
+        while (e < elementList.length) {
+          const listE = elementList[e]
+          if (listId !== listE.listId) {
+            e--
+            break
+          }
+          delete listE.listType
+          delete listE.listStyle
+          valueList.push(listE)
+          e++
+        }
+        listElement.valueList = zipElementList(valueList, options)
+        element = listElement
+      }
+    } else if (element.type === ElementType.TABLE) {
+      // 分页表格先进行合并
+      if (element.pagingId) {
+        let tableIndex = e + 1
+        let combineCount = 0
+        while (tableIndex < elementList.length) {
+          const nextElement = elementList[tableIndex]
+          if (nextElement.pagingId === element.pagingId) {
+            element.height! += nextElement.height!
+            element.trList!.push(...nextElement.trList!)
+            tableIndex++
+            combineCount++
+          } else {
+            break
+          }
+        }
+        e += combineCount
+      }
+      if (element.trList) {
+        for (let t = 0; t < element.trList.length; t++) {
+          const tr = element.trList[t]
+          delete tr.id
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d]
+            const zipTd: ITd = {
+              colspan: td.colspan,
+              rowspan: td.rowspan,
+              value: zipElementList(td.value, {
+                ...options,
+                isClassifyArea: false
+              })
+            }
+            // 压缩单元格属性
+            TABLE_TD_ZIP_ATTR.forEach(attr => {
+              const value = td[attr] as never
+              if (value !== undefined) {
+                zipTd[attr] = value
+              }
+            })
+            tr.tdList[d] = zipTd
+          }
+        }
+      }
+    } else if (element.type === ElementType.HYPERLINK) {
+      // 超链接处理
+      const hyperlinkId = element.hyperlinkId
+      if (hyperlinkId) {
+        const hyperlinkElement: IElement = {
+          type: ElementType.HYPERLINK,
+          value: '',
+          url: element.url
+        }
+        const valueList: IElement[] = []
+        while (e < elementList.length) {
+          const hyperlinkE = elementList[e]
+          if (hyperlinkId !== hyperlinkE.hyperlinkId) {
+            e--
+            break
+          }
+          delete hyperlinkE.type
+          delete hyperlinkE.url
+          valueList.push(hyperlinkE)
+          e++
+        }
+        hyperlinkElement.valueList = zipElementList(valueList, options)
+        element = hyperlinkElement
+      }
+    } else if (element.type === ElementType.DATE) {
+      const dateId = element.dateId
+      if (dateId) {
+        const dateElement: IElement = {
+          type: ElementType.DATE,
+          value: '',
+          dateFormat: element.dateFormat
+        }
+        const valueList: IElement[] = []
+        while (e < elementList.length) {
+          const dateE = elementList[e]
+          if (dateId !== dateE.dateId) {
+            e--
+            break
+          }
+          delete dateE.type
+          delete dateE.dateFormat
+          valueList.push(dateE)
+          e++
+        }
+        dateElement.valueList = zipElementList(valueList, options)
+        element = dateElement
+      }
+    } else if (element.controlId) {
+      const controlId = element.controlId
+      // 控件包含前后缀则转换为控件
+      if (element.controlComponent === ControlComponent.PREFIX) {
+        const valueList: IElement[] = []
+        let isFull = false
+        let start = e
+        while (start < elementList.length) {
+          const controlE = elementList[start]
+          if (controlId !== controlE.controlId) break
+          if (controlE.controlComponent === ControlComponent.VALUE) {
+            delete controlE.control
+            delete controlE.controlId
+            valueList.push(controlE)
+          }
+          if (controlE.controlComponent === ControlComponent.POSTFIX) {
+            isFull = true
+          }
+          start++
+        }
+        if (isFull) {
+          // 以前缀为基准更新控件默认样式
+          const controlDefaultStyle = <IControlSelect>(
+            (<unknown>pickObject(element, CONTROL_STYLE_ATTR))
+          )
+          const control = {
+            ...element.control!,
+            ...controlDefaultStyle
+          }
+          const controlElement: IElement = {
+            ...pickObject(element, EDITOR_ROW_ATTR),
+            type: ElementType.CONTROL,
+            value: '',
+            control,
+            controlId
+          }
+          controlElement.control!.value = zipElementList(valueList, options)
+          element = pickElementAttr(controlElement, { extraPickAttrs })
+          // 控件元素数量 - 1（当前元素）
+          e += start - e - 1
+        }
+      }
+      // 不完整的控件元素不转化为控件，如果不是文本则直接忽略
+      if (element.controlComponent) {
+        delete element.control
+        delete element.controlId
+        if (
+          element.controlComponent !== ControlComponent.VALUE &&
+          element.controlComponent !== ControlComponent.PRE_TEXT &&
+          element.controlComponent !== ControlComponent.POST_TEXT
+        ) {
+          e++
+          continue
+        }
+      }
+    }
+    // 组合元素
+    const pickElement = pickElementAttr(element, { extraPickAttrs })
+    if (
+      !element.type ||
+      element.type === ElementType.TEXT ||
+      element.type === ElementType.SUBSCRIPT ||
+      element.type === ElementType.SUPERSCRIPT
+    ) {
+      while (e < elementList.length) {
+        const nextElement = elementList[e + 1]
+        e++
+        if (
+          nextElement &&
+          isSameElementExceptValue(
+            pickElement,
+            pickElementAttr(nextElement, { extraPickAttrs })
+          )
+        ) {
+          const nextValue =
+            nextElement.value === ZERO ? '\n' : nextElement.value
+          pickElement.value += nextValue
+        } else {
+          break
+        }
+      }
+    } else {
+      e++
+    }
+    zipElementListData.push(pickElement)
+  }
+  return zipElementListData
+}
+
+export function convertTextAlignToRowFlex(node: HTMLElement) {
+  const textAlign = window.getComputedStyle(node).textAlign
+  switch (textAlign) {
+    case 'left':
+    case 'start':
+      return RowFlex.LEFT
+    case 'center':
+      return RowFlex.CENTER
+    case 'right':
+    case 'end':
+      return RowFlex.RIGHT
+    case 'justify':
+      return RowFlex.ALIGNMENT
+    case 'justify-all':
+      return RowFlex.JUSTIFY
+    default:
+      return RowFlex.LEFT
+  }
+}
+
+export function convertRowFlexToTextAlign(rowFlex: RowFlex) {
+  return rowFlex === RowFlex.ALIGNMENT ? 'justify' : rowFlex
+}
+
+export function convertRowFlexToJustifyContent(rowFlex: RowFlex) {
+  switch (rowFlex) {
+    case RowFlex.LEFT:
+      return 'flex-start'
+    case RowFlex.CENTER:
+      return 'center'
+    case RowFlex.RIGHT:
+      return 'flex-end'
+    case RowFlex.ALIGNMENT:
+    case RowFlex.JUSTIFY:
+      return 'space-between'
+    default:
+      return 'flex-start'
+  }
+}
+
+export function isTextLikeElement(element: IElement): boolean {
+  return !element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type)
+}
+
+export function isTextElement(element: IElement): boolean {
+  return !element.type || element.type === ElementType.TEXT
+}
+
+export function getElementListText(elementList: IElement[]): string {
+  return elementList
+    .filter(el => isTextLikeElement(el))
+    .map(el => el.value)
+    .join('')
+    .replace(new RegExp(ZERO, 'g'), '')
+}
+
+export function getAnchorElement(
+  elementList: IElement[],
+  anchorIndex: number
+): IElement | null {
+  const anchorElement = elementList[anchorIndex]
+  if (!anchorElement) return null
+  const anchorNextElement = elementList[anchorIndex + 1]
+  // 非列表元素 && 当前元素是换行符 && 下一个元素不是换行符 && 区域相同 => 则以下一个元素作为参考元素
+  return !anchorElement.listId &&
+    anchorElement.value === ZERO &&
+    anchorNextElement &&
+    anchorNextElement.value !== ZERO &&
+    anchorElement.areaId === anchorNextElement.areaId
+    ? anchorNextElement
+    : anchorElement
+}
+
+export interface IFormatElementContextOption {
+  isBreakWhenWrap?: boolean
+  ignoreContextKeys?: Array<keyof IElement>
+  editorOptions?: DeepRequired<IEditorOption>
+}
+
+export function formatElementContext(
+  sourceElementList: IElement[],
+  formatElementList: IElement[],
+  anchorIndex: number,
+  options?: IFormatElementContextOption
+) {
+  let copyElement = getAnchorElement(sourceElementList, anchorIndex)
+  if (!copyElement) return
+  const {
+    isBreakWhenWrap = false,
+    editorOptions,
+    ignoreContextKeys = []
+  } = options || {}
+  const { mode } = editorOptions || {}
+  // 非设计模式时：标题元素禁用时不复制标题属性
+  if (mode !== EditorMode.DESIGN && copyElement.title?.disabled) {
+    copyElement = omitObject(copyElement, TITLE_CONTEXT_ATTR)
+  }
+  // 是否已经换行
+  let isBreakWarped = false
+  for (let e = 0; e < formatElementList.length; e++) {
+    const targetElement = formatElementList[e]
+    if (
+      isBreakWhenWrap &&
+      !copyElement.listId &&
+      START_LINE_BREAK_REG.test(targetElement.value)
+    ) {
+      isBreakWarped = true
+    }
+    // 1. 即使换行停止也要处理表格上下文信息
+    // 2. 定位元素非列表，无需处理粘贴列表的上下文，仅处理表格及行上下文信息
+    if (
+      isBreakWarped ||
+      (!copyElement.listId && targetElement.type === ElementType.LIST)
+    ) {
+      const cloneAttr = [
+        ...TABLE_CONTEXT_ATTR,
+        ...EDITOR_ROW_ATTR,
+        ...AREA_CONTEXT_ATTR
+      ]
+      deleteProperty(cloneAttr, ignoreContextKeys)
+      cloneProperty<IElement>(cloneAttr, copyElement!, targetElement)
+      targetElement.valueList?.forEach(valueItem => {
+        cloneProperty<IElement>(cloneAttr, copyElement!, valueItem)
+      })
+      continue
+    }
+    if (targetElement.valueList?.length) {
+      formatElementContext(
+        sourceElementList,
+        targetElement.valueList,
+        anchorIndex,
+        options
+      )
+    }
+    // 非块类元素，需处理行属性
+    const cloneAttr = [...EDITOR_ELEMENT_CONTEXT_ATTR]
+    if (!getIsBlockElement(targetElement)) {
+      cloneAttr.push(...EDITOR_ROW_ATTR)
+    }
+    deleteProperty(cloneAttr, ignoreContextKeys)
+    cloneProperty<IElement>(cloneAttr, copyElement, targetElement)
+  }
+}
+
+export function convertElementToDom(
+  element: IElement,
+  options: DeepRequired<IEditorOption>
+): HTMLElement {
+  let tagName: keyof HTMLElementTagNameMap = 'span'
+  if (element.type === ElementType.SUPERSCRIPT) {
+    tagName = 'sup'
+  } else if (element.type === ElementType.SUBSCRIPT) {
+    tagName = 'sub'
+  }
+  const dom = document.createElement(tagName)
+  dom.style.fontFamily = element.font || options.defaultFont
+  if (element.rowFlex) {
+    dom.style.textAlign = convertRowFlexToTextAlign(element.rowFlex)
+  }
+  if (element.color) {
+    dom.style.color = element.color
+  }
+  if (element.bold) {
+    dom.style.fontWeight = '600'
+  }
+  if (element.italic) {
+    dom.style.fontStyle = 'italic'
+  }
+  dom.style.fontSize = `${element.size || options.defaultSize}px`
+  if (element.highlight) {
+    dom.style.backgroundColor = element.highlight
+  }
+  if (element.underline) {
+    dom.style.textDecoration = 'underline'
+    dom.style.textDecorationStyle = element.textDecoration?.style || 'solid'
+  }
+  if (element.strikeout) {
+    dom.style.textDecoration += ' line-through'
+  }
+  if (element.type) {
+    dom.setAttribute('data-type', element.type)
+  }
+  if (element.rowMargin) {
+    dom.style.lineHeight = (
+      element.rowMargin ?? options.defaultRowMargin
+    ).toString()
+  }
+  dom.innerText = element.value.replace(new RegExp(`${ZERO}`, 'g'), '\n')
+  return dom
+}
+
+export function splitListElement(
+  elementList: IElement[]
+): Map<number, IElement[]> {
+  let curListIndex = 0
+  const listElementListMap: Map<number, IElement[]> = new Map()
+  for (let e = 0; e < elementList.length; e++) {
+    const element = elementList[e]
+    // 移除列表首行换行字符-如果是复选框直接忽略
+    if (e === 0) {
+      if (element.checkbox) continue
+      element.value = element.value.replace(START_LINE_BREAK_REG, '')
+    }
+    if (element.listWrap) {
+      const listElementList = listElementListMap.get(curListIndex) || []
+      listElementList.push(element)
+      listElementListMap.set(curListIndex, listElementList)
+    } else {
+      const valueList = element.value.split('\n')
+      for (let c = 0; c < valueList.length; c++) {
+        if (c > 0) {
+          curListIndex += 1
+        }
+        const value = valueList[c]
+        const listElementList = listElementListMap.get(curListIndex) || []
+        listElementList.push({
+          ...element,
+          value
+        })
+        listElementListMap.set(curListIndex, listElementList)
+      }
+    }
+  }
+  return listElementListMap
+}
+
+export interface IElementListGroupRowFlex {
+  rowFlex: RowFlex | null
+  data: IElement[]
+}
+
+export function groupElementListByRowFlex(
+  elementList: IElement[]
+): IElementListGroupRowFlex[] {
+  const elementListGroupList: IElementListGroupRowFlex[] = []
+  if (!elementList.length) return elementListGroupList
+  let currentRowFlex: RowFlex | null = elementList[0]?.rowFlex || null
+  elementListGroupList.push({
+    rowFlex: currentRowFlex,
+    data: [elementList[0]]
+  })
+  for (let e = 1; e < elementList.length; e++) {
+    const element = elementList[e]
+    const rowFlex = element.rowFlex || null
+    // 行布局相同&非块元素时追加数据，否则新增分组
+    if (
+      currentRowFlex === rowFlex &&
+      !getIsBlockElement(element) &&
+      !getIsBlockElement(elementList[e - 1])
+    ) {
+      const lastElementListGroup =
+        elementListGroupList[elementListGroupList.length - 1]
+      lastElementListGroup.data.push(element)
+    } else {
+      elementListGroupList.push({
+        rowFlex,
+        data: [element]
+      })
+      currentRowFlex = rowFlex
+    }
+  }
+  // 压缩数据
+  for (let g = 0; g < elementListGroupList.length; g++) {
+    const elementListGroup = elementListGroupList[g]
+    elementListGroup.data = zipElementList(elementListGroup.data)
+  }
+  return elementListGroupList
+}
+
+export function createDomFromElementList(
+  elementList: IElement[],
+  options?: IEditorOption
+) {
+  const editorOptions = mergeOption(options)
+  function buildDom(payload: IElement[]): HTMLDivElement {
+    const clipboardDom = document.createElement('div')
+    for (let e = 0; e < payload.length; e++) {
+      const element = payload[e]
+      // 构造表格
+      if (element.type === ElementType.TABLE) {
+        const tableDom: HTMLTableElement = document.createElement('table')
+        tableDom.setAttribute('cellSpacing', '0')
+        tableDom.setAttribute('cellpadding', '0')
+        tableDom.setAttribute('border', '0')
+        const borderStyle = '1px solid #000000'
+        // 表格边框
+        if (!element.borderType || element.borderType === TableBorder.ALL) {
+          tableDom.style.borderTop = borderStyle
+          tableDom.style.borderLeft = borderStyle
+        } else if (element.borderType === TableBorder.EXTERNAL) {
+          tableDom.style.border = borderStyle
+        }
+        tableDom.style.width = `${element.width}px`
+        // colgroup
+        const colgroupDom = document.createElement('colgroup')
+        for (let c = 0; c < element.colgroup!.length; c++) {
+          const colgroup = element.colgroup![c]
+          const colDom = document.createElement('col')
+          colDom.setAttribute('width', `${colgroup.width}`)
+          colgroupDom.append(colDom)
+        }
+        tableDom.append(colgroupDom)
+        // tr
+        const trList = element.trList!
+        for (let t = 0; t < trList.length; t++) {
+          const trDom = document.createElement('tr')
+          const tr = trList[t]
+          trDom.style.height = `${tr.height}px`
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const tdDom = document.createElement('td')
+            if (!element.borderType || element.borderType === TableBorder.ALL) {
+              tdDom.style.borderBottom = tdDom.style.borderRight = '1px solid'
+            }
+            const td = tr.tdList[d]
+            tdDom.colSpan = td.colspan
+            tdDom.rowSpan = td.rowspan
+            tdDom.style.verticalAlign = td.verticalAlign || 'top'
+            // 单元格边框
+            if (td.borderTypes?.includes(TdBorder.TOP)) {
+              tdDom.style.borderTop = borderStyle
+            }
+            if (td.borderTypes?.includes(TdBorder.RIGHT)) {
+              tdDom.style.borderRight = borderStyle
+            }
+            if (td.borderTypes?.includes(TdBorder.BOTTOM)) {
+              tdDom.style.borderBottom = borderStyle
+            }
+            if (td.borderTypes?.includes(TdBorder.LEFT)) {
+              tdDom.style.borderLeft = borderStyle
+            }
+            const childDom = createDomFromElementList(td.value!, options)
+            tdDom.innerHTML = childDom.innerHTML
+            if (td.backgroundColor) {
+              tdDom.style.backgroundColor = td.backgroundColor
+            }
+            trDom.append(tdDom)
+          }
+          tableDom.append(trDom)
+        }
+        clipboardDom.append(tableDom)
+      } else if (element.type === ElementType.HYPERLINK) {
+        const a = document.createElement('a')
+        a.innerText = element.valueList!.map(v => v.value).join('')
+        if (element.url) {
+          a.href = element.url
+        }
+        clipboardDom.append(a)
+      } else if (element.type === ElementType.TITLE) {
+        const h = document.createElement(
+          `h${titleOrderNumberMapping[element.level!]}`
+        )
+        const childDom = buildDom(element.valueList!)
+        h.innerHTML = childDom.innerHTML
+        clipboardDom.append(h)
+      } else if (element.type === ElementType.LIST) {
+        const list = document.createElement(
+          listTypeElementMapping[element.listType!]
+        )
+        if (element.listStyle) {
+          list.style.listStyleType = listStyleCSSMapping[element.listStyle]
+        }
+        // 按照换行符拆分
+        const zipList = zipElementList(element.valueList!)
+        const listElementListMap = splitListElement(zipList)
+        listElementListMap.forEach(listElementList => {
+          const li = document.createElement('li')
+          const childDom = buildDom(listElementList)
+          li.innerHTML = childDom.innerHTML
+          list.append(li)
+        })
+        clipboardDom.append(list)
+      } else if (element.type === ElementType.IMAGE) {
+        const img = document.createElement('img')
+        if (element.value) {
+          img.src = element.value
+          img.width = element.width!
+          img.height = element.height!
+        }
+        clipboardDom.append(img)
+      } else if (element.type === ElementType.BLOCK) {
+        if (element.block?.type === BlockType.VIDEO) {
+          const src = element.block.videoBlock?.src
+          if (src) {
+            const video = document.createElement('video')
+            video.style.display = 'block'
+            video.controls = true
+            video.src = src
+            video.width = element.width! || options?.width || window.innerWidth
+            video.height = element.height!
+            clipboardDom.append(video)
+          }
+        } else if (element.block?.type === BlockType.IFRAME) {
+          const { src, srcdoc, sandbox, allow } =
+            element.block.iframeBlock || {}
+          if (src || srcdoc) {
+            const iframe = document.createElement('iframe')
+            iframe.sandbox.add(...(sandbox || IFrameBlock.sandbox))
+            iframe.setAttribute('allow', [allow || IFrameBlock.allow].join(' '))
+            iframe.style.display = 'block'
+            iframe.style.border = 'none'
+            if (src) {
+              iframe.src = src
+            } else if (srcdoc) {
+              iframe.srcdoc = srcdoc
+            }
+            iframe.width = `${
+              element.width || options?.width || window.innerWidth
+            }`
+            iframe.height = `${element.height!}`
+            clipboardDom.append(iframe)
+          }
+        }
+      } else if (element.type === ElementType.SEPARATOR) {
+        const hr = document.createElement('hr')
+        if (element.dashArray?.length) {
+          hr.setAttribute('data-dash-array', element.dashArray.join(','))
+        }
+        clipboardDom.append(hr)
+      } else if (element.type === ElementType.CHECKBOX) {
+        const checkbox = document.createElement('input')
+        checkbox.type = 'checkbox'
+        if (element.checkbox?.value) {
+          checkbox.setAttribute('checked', 'true')
+        }
+        clipboardDom.append(checkbox)
+      } else if (element.type === ElementType.RADIO) {
+        const radio = document.createElement('input')
+        radio.type = 'radio'
+        if (element.radio?.value) {
+          radio.setAttribute('checked', 'true')
+        }
+        clipboardDom.append(radio)
+      } else if (element.type === ElementType.TAB) {
+        const tab = document.createElement('span')
+        tab.innerHTML = `${NON_BREAKING_SPACE}${NON_BREAKING_SPACE}`
+        clipboardDom.append(tab)
+      } else if (element.type === ElementType.CONTROL) {
+        const controlElement = document.createElement('span')
+        const childDom = buildDom(element.control?.value || [])
+        controlElement.innerHTML = childDom.innerHTML
+        clipboardDom.append(controlElement)
+      } else if (element.type === ElementType.PAGE_BREAK) {
+        const pageBreakElement = document.createElement('div')
+        pageBreakElement.style.breakAfter = 'page'
+        clipboardDom.append(pageBreakElement)
+      } else if (
+        !element.type ||
+        element.type === ElementType.LATEX ||
+        TEXTLIKE_ELEMENT_TYPE.includes(element.type)
+      ) {
+        let text = ''
+        if (element.type === ElementType.DATE) {
+          text = element.valueList?.map(v => v.value).join('') || ''
+        } else {
+          text = element.value
+        }
+        if (!text) continue
+        const dom = convertElementToDom(element, editorOptions)
+        // 前一个元素是标题，移除首行换行符
+        if (payload[e - 1]?.type === ElementType.TITLE) {
+          text = text.replace(/^\n/, '')
+        }
+        dom.innerText = text.replace(new RegExp(`${ZERO}`, 'g'), '\n')
+        clipboardDom.append(dom)
+      }
+    }
+    return clipboardDom
+  }
+  // 按行布局分类创建dom
+  const clipboardDom = document.createElement('div')
+  const groupElementList = groupElementListByRowFlex(elementList)
+  for (let g = 0; g < groupElementList.length; g++) {
+    const elementGroupRowFlex = groupElementList[g]
+    // 行布局样式设置
+    const isDefaultRowFlex =
+      !elementGroupRowFlex.rowFlex ||
+      elementGroupRowFlex.rowFlex === RowFlex.LEFT
+    // 块元素使用flex否则使用text-align
+    const rowFlexDom = document.createElement('div')
+    if (!isDefaultRowFlex) {
+      const firstElement = elementGroupRowFlex.data[0]
+      if (getIsBlockElement(firstElement)) {
+        rowFlexDom.style.display = 'flex'
+        rowFlexDom.style.justifyContent = convertRowFlexToJustifyContent(
+          firstElement.rowFlex!
+        )
+      } else {
+        rowFlexDom.style.textAlign = convertRowFlexToTextAlign(
+          elementGroupRowFlex.rowFlex!
+        )
+        if (elementGroupRowFlex.rowFlex === 'justify') {
+          rowFlexDom.style.textAlignLast = 'justify'
+        }
+      }
+    }
+    // 布局内容
+    rowFlexDom.innerHTML = buildDom(elementGroupRowFlex.data).innerHTML
+    // 未设置行布局时无需行布局容器
+    if (!isDefaultRowFlex) {
+      clipboardDom.append(rowFlexDom)
+    } else {
+      rowFlexDom.childNodes.forEach(child => {
+        clipboardDom.append(child.cloneNode(true))
+      })
+    }
+  }
+  return clipboardDom
+}
+
+export function convertTextNodeToElement(
+  textNode: Element | Node
+): IElement | null {
+  if (!textNode || textNode.nodeType !== 3) return null
+  const parentNode = <HTMLElement>textNode.parentNode
+  const anchorNode =
+    parentNode.nodeName === 'FONT'
+      ? <HTMLElement>parentNode.parentNode
+      : parentNode
+  const rowFlex = convertTextAlignToRowFlex(anchorNode)
+  const value = textNode.textContent
+  const style = window.getComputedStyle(anchorNode)
+  if (!value || anchorNode.nodeName === 'STYLE') return null
+  const element: IElement = {
+    value,
+    color: style.color,
+    bold: Number(style.fontWeight) > 500,
+    italic: style.fontStyle.includes('italic'),
+    size: Math.floor(parseFloat(style.fontSize))
+  }
+  // 元素类型-默认文本
+  if (anchorNode.nodeName === 'SUB' || style.verticalAlign === 'sub') {
+    element.type = ElementType.SUBSCRIPT
+  } else if (anchorNode.nodeName === 'SUP' || style.verticalAlign === 'super') {
+    element.type = ElementType.SUPERSCRIPT
+  }
+  // 行对齐
+  if (rowFlex !== RowFlex.LEFT) {
+    element.rowFlex = rowFlex
+  }
+  // 高亮色
+  if (style.backgroundColor !== 'rgba(0, 0, 0, 0)') {
+    element.highlight = style.backgroundColor
+  }
+  // 下划线
+  if (style.textDecorationLine.includes('underline')) {
+    element.underline = true
+  }
+  // 删除线
+  if (style.textDecorationLine.includes('line-through')) {
+    element.strikeout = true
+  }
+  return element
+}
+
+export interface IGetElementListByHTMLOption {
+  innerWidth: number
+}
+
+export function getElementListByHTML(
+  htmlText: string,
+  options: IGetElementListByHTMLOption
+): IElement[] {
+  const elementList: IElement[] = []
+  function findTextNode(dom: Element | Node) {
+    if (dom.nodeType === 3) {
+      const element = convertTextNodeToElement(dom)
+      if (element) {
+        elementList.push(element)
+      }
+    } else if (dom.nodeType === 1) {
+      const childNodes = dom.childNodes
+      for (let n = 0; n < childNodes.length; n++) {
+        const node = childNodes[n]
+        // br元素与display:block元素需换行
+        if (node.nodeName === 'BR') {
+          elementList.push({
+            value: '\n'
+          })
+        } else if (node.nodeName === 'A') {
+          const aElement = node as HTMLLinkElement
+          const value = aElement.innerText
+          if (value) {
+            elementList.push({
+              type: ElementType.HYPERLINK,
+              value: '',
+              valueList: [
+                {
+                  value
+                }
+              ],
+              url: aElement.href
+            })
+          }
+        } else if (/H[1-6]/.test(node.nodeName)) {
+          const hElement = node as HTMLTitleElement
+          const valueList = getElementListByHTML(
+            replaceHTMLElementTag(hElement, 'div').outerHTML,
+            options
+          )
+          elementList.push({
+            value: '',
+            type: ElementType.TITLE,
+            level: titleNodeNameMapping[node.nodeName],
+            valueList
+          })
+          if (
+            node.nextSibling &&
+            !INLINE_NODE_NAME.includes(node.nextSibling.nodeName)
+          ) {
+            elementList.push({
+              value: '\n'
+            })
+          }
+        } else if (node.nodeName === 'UL' || node.nodeName === 'OL') {
+          const listNode = node as HTMLOListElement | HTMLUListElement
+          const listElement: IElement = {
+            value: '',
+            type: ElementType.LIST,
+            valueList: []
+          }
+          if (node.nodeName === 'OL') {
+            listElement.listType = ListType.OL
+          } else {
+            listElement.listType = ListType.UL
+            listElement.listStyle = <ListStyle>(
+              (<unknown>listNode.style.listStyleType)
+            )
+          }
+          listNode.querySelectorAll('li').forEach(li => {
+            const liValueList = getElementListByHTML(li.innerHTML, options)
+            liValueList.forEach(list => {
+              if (list.value === '\n') {
+                list.listWrap = true
+              }
+            })
+            liValueList.unshift({
+              value: '\n'
+            })
+            listElement.valueList!.push(...liValueList)
+          })
+          elementList.push(listElement)
+        } else if (node.nodeName === 'HR') {
+          elementList.push({
+            value: '\n',
+            type: ElementType.SEPARATOR
+          })
+        } else if (node.nodeName === 'IMG') {
+          const { src, width, height } = node as HTMLImageElement
+          if (src && width && height) {
+            elementList.push({
+              width,
+              height,
+              value: src,
+              type: ElementType.IMAGE,
+              rowFlex: convertTextAlignToRowFlex(node.parentElement!)
+            })
+          }
+        } else if (node.nodeName === 'VIDEO') {
+          const { src, width, height } = node as HTMLVideoElement
+          if (src && width && height) {
+            elementList.push({
+              value: '',
+              type: ElementType.BLOCK,
+              block: {
+                type: BlockType.VIDEO,
+                videoBlock: {
+                  src
+                }
+              },
+              width,
+              height
+            })
+          }
+        } else if (node.nodeName === 'IFRAME') {
+          const { src, srcdoc, width, height } = node as HTMLIFrameElement
+          if ((src || srcdoc) && width && height) {
+            elementList.push({
+              value: '',
+              type: ElementType.BLOCK,
+              block: {
+                type: BlockType.IFRAME,
+                iframeBlock: {
+                  src,
+                  srcdoc
+                }
+              },
+              width: parseInt(width),
+              height: parseInt(height)
+            })
+          }
+        } else if (node.nodeName === 'TABLE') {
+          const tableElement = node as HTMLTableElement
+          const element: IElement = {
+            type: ElementType.TABLE,
+            value: '\n',
+            colgroup: [],
+            trList: []
+          }
+          // colgroup
+          const colElements = tableElement.querySelectorAll('colgroup col')
+          // 基础数据
+          tableElement.querySelectorAll('tr').forEach(trElement => {
+            const trHeightStr = Number(
+              window.getComputedStyle(trElement).height.replace('px', '')
+            )
+            const tr: ITr = {
+              height: trHeightStr,
+              minHeight: trHeightStr,
+              tdList: []
+            }
+            trElement.querySelectorAll('th,td').forEach(tdElement => {
+              const tableCell = <HTMLTableCellElement>tdElement
+              const valueList = getElementListByHTML(
+                tableCell.innerHTML,
+                options
+              )
+              const td: ITd = {
+                colspan: tableCell.colSpan,
+                rowspan: tableCell.rowSpan,
+                value: valueList,
+                verticalAlign: window.getComputedStyle(tdElement)
+                  .verticalAlign as VerticalAlign,
+                width: parseFloat(window.getComputedStyle(tdElement).width)
+              }
+              if (tableCell.style.backgroundColor) {
+                td.backgroundColor = tableCell.style.backgroundColor
+              }
+              tr.tdList.push(td)
+            })
+            element.trList!.push(tr)
+          })
+          if (element.trList!.length) {
+            // 列选项数据
+            const tdCount = element.trList![0].tdList.reduce(
+              (pre, cur) => pre + cur.colspan,
+              0
+            )
+            const width = Math.ceil(options.innerWidth / tdCount)
+            for (let i = 0; i < tdCount; i++) {
+              const colElement = colElements[i]?.getAttribute('width')
+              element.colgroup!.push({
+                width: colElement ? parseFloat(colElement) : width
+              })
+            }
+            elementList.push(element)
+          }
+        } else if (
+          node.nodeName === 'INPUT' &&
+          (<HTMLInputElement>node).type === ControlComponent.CHECKBOX
+        ) {
+          elementList.push({
+            type: ElementType.CHECKBOX,
+            value: '',
+            checkbox: {
+              value: (<HTMLInputElement>node).checked
+            }
+          })
+        } else if (
+          node.nodeName === 'INPUT' &&
+          (<HTMLInputElement>node).type === ControlComponent.RADIO
+        ) {
+          elementList.push({
+            type: ElementType.RADIO,
+            value: '',
+            radio: {
+              value: (<HTMLInputElement>node).checked
+            }
+          })
+        } else {
+          findTextNode(node)
+          if (node.nodeType === 1 && n !== childNodes.length - 1) {
+            const nodeElement = node as Element
+            const display = window.getComputedStyle(nodeElement).display
+            if (
+              display === 'block' &&
+              !/(\n|\r\n)$/.test(nodeElement.textContent!)
+            ) {
+              elementList.push({
+                value: '\n'
+              })
+            }
+          }
+        }
+      }
+    }
+  }
+  // 追加dom - 使用Shadow DOM隔离外部样式影响
+  const clipboardHost = document.createElement('div')
+  document.body.appendChild(clipboardHost)
+  const shadowRoot = clipboardHost.attachShadow({ mode: 'open' })
+  const clipboardDom = document.createElement('div')
+  clipboardDom.innerHTML = htmlText
+  shadowRoot.appendChild(clipboardDom)
+  const deleteNodes: ChildNode[] = []
+  clipboardDom.childNodes.forEach(child => {
+    if (child.nodeType !== 1 && !child.textContent?.trim()) {
+      deleteNodes.push(child)
+    }
+  })
+  deleteNodes.forEach(node => node.remove())
+  // 搜索文本节点
+  findTextNode(clipboardDom)
+  // 移除dom
+  clipboardHost.remove()
+  return elementList
+}
+
+export function getTextFromElementList(elementList: IElement[]) {
+  function buildText(payload: IElement[]): string {
+    let text = ''
+    for (let e = 0; e < payload.length; e++) {
+      const element = payload[e]
+      // 构造表格
+      if (element.type === ElementType.TABLE) {
+        text += `\n`
+        const trList = element.trList!
+        for (let t = 0; t < trList.length; t++) {
+          const tr = trList[t]
+          for (let d = 0; d < tr.tdList.length; d++) {
+            const td = tr.tdList[d]
+            const tdText = buildText(zipElementList(td.value!))
+            const isFirst = d === 0
+            const isLast = tr.tdList.length - 1 === d
+            text += `${!isFirst ? `  ` : ``}${tdText}${isLast ? `\n` : ``}`
+          }
+        }
+      } else if (element.type === ElementType.TAB) {
+        text += `\t`
+      } else if (element.type === ElementType.HYPERLINK) {
+        text += element.valueList!.map(v => v.value).join('')
+      } else if (element.type === ElementType.TITLE) {
+        text += `${buildText(zipElementList(element.valueList!))}`
+      } else if (element.type === ElementType.LIST) {
+        // 按照换行符拆分
+        const zipList = zipElementList(element.valueList!)
+        const listElementListMap = splitListElement(zipList)
+        // 无序列表前缀
+        let ulListStyleText = ''
+        if (element.listType === ListType.UL) {
+          ulListStyleText =
+            ulStyleMapping[<UlStyle>(<unknown>element.listStyle)]
+        }
+        listElementListMap.forEach((listElementList, listIndex) => {
+          const isLast = listElementListMap.size - 1 === listIndex
+          text += `\n${ulListStyleText || `${listIndex + 1}.`}${buildText(
+            listElementList
+          )}${isLast ? `\n` : ``}`
+        })
+      } else if (element.type === ElementType.CHECKBOX) {
+        text += element.checkbox?.value ? `☑` : `□`
+      } else if (element.type === ElementType.RADIO) {
+        text += element.radio?.value ? `☉` : `○`
+      } else if (
+        !element.type ||
+        element.type === ElementType.LATEX ||
+        TEXTLIKE_ELEMENT_TYPE.includes(element.type)
+      ) {
+        let textLike = ''
+        if (element.type === ElementType.CONTROL) {
+          const controlValue = element.control!.value?.[0]?.value || ''
+          textLike = controlValue
+            ? `${element.control?.preText || ''}${controlValue}${
+                element.control?.postText || ''
+              }`
+            : ''
+        } else if (element.type === ElementType.DATE) {
+          textLike = element.valueList?.map(v => v.value).join('') || ''
+        } else {
+          textLike = element.value
+        }
+        text += textLike.replace(new RegExp(`${ZERO}`, 'g'), '\n')
+      }
+    }
+    return text
+  }
+  return buildText(zipElementList(elementList))
+}
+
+export function getSlimCloneElementList(elementList: IElement[]) {
+  return deepCloneOmitKeys<IElement[], IRowElement>(elementList, [
+    'metrics',
+    'style'
+  ])
+}
+
+export function getIsBlockElement(element?: IElement) {
+  return (
+    !!element?.type &&
+    (BLOCK_ELEMENT_TYPE.includes(element.type) ||
+      element.imgDisplay === ImageDisplay.INLINE)
+  )
+}
+
+export function replaceHTMLElementTag(
+  oldDom: HTMLElement,
+  tagName: keyof HTMLElementTagNameMap
+): HTMLElement {
+  const newDom = document.createElement(tagName)
+  for (let i = 0; i < oldDom.attributes.length; i++) {
+    const attr = oldDom.attributes[i]
+    newDom.setAttribute(attr.name, attr.value)
+  }
+  newDom.innerHTML = oldDom.innerHTML
+  return newDom
+}
+
+export function pickSurroundElementList(elementList: IElement[]) {
+  const surroundElementList = []
+  for (let e = 0; e < elementList.length; e++) {
+    const element = elementList[e]
+    if (element.imgDisplay === ImageDisplay.SURROUND) {
+      surroundElementList.push(element)
+    }
+  }
+  return surroundElementList
+}
+
+export function deleteSurroundElementList(
+  elementList: IElement[],
+  pageNo: number
+) {
+  for (let s = elementList.length - 1; s >= 0; s--) {
+    const surroundElement = elementList[s]
+    if (surroundElement.imgFloatPosition?.pageNo === pageNo) {
+      elementList.splice(s, 1)
+    }
+  }
+}
+
+export function getNonHideElementIndex(
+  elementList: IElement[],
+  index: number,
+  position: LocationPosition = LocationPosition.BEFORE
+) {
+  if (
+    !elementList[index]?.hide &&
+    !elementList[index]?.control?.hide &&
+    !elementList[index]?.area?.hide
+  ) {
+    return index
+  }
+  let i = index
+  if (position === LocationPosition.BEFORE) {
+    i = index - 1
+    while (i > 0) {
+      if (
+        !elementList[i]?.hide &&
+        !elementList[i]?.control?.hide &&
+        !elementList[i]?.area?.hide
+      ) {
+        return i
+      }
+      i--
+    }
+  } else {
+    i = index + 1
+    while (i < elementList.length) {
+      if (
+        !elementList[i]?.hide &&
+        !elementList[i]?.control?.hide &&
+        !elementList[i]?.area?.hide
+      ) {
+        return i
+      }
+      i++
+    }
+  }
+  return i
+}