fix: control setting row flex data error #586

2024-05-21 22:15:01 +08:00
parent 65255229c5
commit 8f36d1fb4f
2 changed files with 82 additions and 19 deletions
@@ -33,7 +33,6 @@ export const EDITOR_ELEMENT_COPY_ATTR: Array<keyof IElement> = [
  'dateId',
  'dateFormat',
  'groupIds',
-  'rowFlex',
  'rowMargin',
  'textDecoration'
 ]
@@ -24,6 +24,7 @@ import {
  CONTROL_STYLE_ATTR,
  EDITOR_ELEMENT_CONTEXT_ATTR,
  EDITOR_ELEMENT_ZIP_ATTR,
+  EDITOR_ROW_ATTR,
  INLINE_ELEMENT_TYPE,
  INLINE_NODE_NAME,
  TABLE_CONTEXT_ATTR,
@@ -233,7 +234,10 @@ export function formatElementList(
      // 移除父节点
      elementList.splice(i, 1)
      // 控件上下文提取（压缩后的控件上下文无法提取）
-      const controlContext = pickObject(el, EDITOR_ELEMENT_CONTEXT_ATTR)
+      const controlContext = pickObject(el, [
+        ...EDITOR_ELEMENT_CONTEXT_ATTR,
+        ...EDITOR_ROW_ATTR
+      ])
      // 控件设置的默认样式（以前缀为基准）
      const controlDefaultStyle = pickObject(
        <IElement>(<unknown>el.control),
@@ -671,6 +675,7 @@ export function zipElementList(payload: IElement[]): IElement[] {
          ...controlDefaultStyle
        }
        const controlElement: IElement = {
+          ...pickObject(element, EDITOR_ROW_ATTR),
          type: ElementType.CONTROL,
          value: '',
          control
@@ -723,7 +728,7 @@ export function zipElementList(payload: IElement[]): IElement[] {
  return zipElementListData
 }

-export function getElementRowFlex(node: HTMLElement) {
+export function convertTextAlignToRowFlex(node: HTMLElement) {
  const textAlign = window.getComputedStyle(node).textAlign
  switch (textAlign) {
    case 'left':
@@ -743,6 +748,10 @@ export function getElementRowFlex(node: HTMLElement) {
  }
 }

+export function convertRowFlexToTextAlign(rowFlex: RowFlex) {
+  return rowFlex === RowFlex.ALIGNMENT ? 'justify' : rowFlex
+}
+
 export function isTextLikeElement(element: IElement): boolean {
  return !element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type)
 }
@@ -823,17 +832,11 @@ export function convertElementToDom(
    tagName = 'sup'
  } else if (element.type === ElementType.SUBSCRIPT) {
    tagName = 'sub'
-  } else if (
-    element.rowFlex === RowFlex.CENTER ||
-    element.rowFlex === RowFlex.RIGHT
-  ) {
-    tagName = 'p'
  }
  const dom = document.createElement(tagName)
  dom.style.fontFamily = element.font || options.defaultFont
  if (element.rowFlex) {
-    const isAlignment = element.rowFlex === RowFlex.ALIGNMENT
-    dom.style.textAlign = isAlignment ? 'justify' : element.rowFlex
+    dom.style.textAlign = convertRowFlexToTextAlign(element.rowFlex)
  }
  if (element.color) {
    dom.style.color = element.color
@@ -893,6 +896,45 @@ export function splitListElement(
  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) {
+      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: DeepRequired<IEditorOption>
@@ -953,7 +995,7 @@ export function createDomFromElementList(
            if (td.borderTypes?.includes(TdBorder.LEFT)) {
              tdDom.style.borderLeft = borderStyle
            }
-            const childDom = buildDom(zipElementList(td.value!))
+            const childDom = createDomFromElementList(td.value!, options)
            tdDom.innerHTML = childDom.innerHTML
            if (td.backgroundColor) {
              tdDom.style.backgroundColor = td.backgroundColor
@@ -974,7 +1016,7 @@ export function createDomFromElementList(
        const h = document.createElement(
          `h${titleOrderNumberMapping[element.level!]}`
        )
-        const childDom = buildDom(zipElementList(element.valueList!))
+        const childDom = buildDom(element.valueList!)
        h.innerHTML = childDom.innerHTML
        clipboardDom.append(h)
      } else if (element.type === ElementType.LIST) {
@@ -1025,7 +1067,7 @@ export function createDomFromElementList(
        clipboardDom.append(tab)
      } else if (element.type === ElementType.CONTROL) {
        const controlElement = document.createElement('span')
-        const childDom = buildDom(zipElementList(element.control?.value || []))
+        const childDom = buildDom(element.control?.value || [])
        controlElement.innerHTML = childDom.innerHTML
        clipboardDom.append(controlElement)
      } else if (
@@ -1045,17 +1087,39 @@ export function createDomFromElementList(
        if (payload[e - 1]?.type === ElementType.TITLE) {
          text = text.replace(/^\n/, '')
        }
-        // 块元素移除尾部换行符
-        if (dom.tagName === 'P') {
-          text = text.replace(/\n$/, '')
-        }
        dom.innerText = text.replace(new RegExp(`${ZERO}`, 'g'), '\n')
        clipboardDom.append(dom)
      }
    }
    return clipboardDom
  }
-  return buildDom(zipElementList(elementList))
+  // 按行布局分类创建dom
+  const clipboardDom = document.createElement('div')
+  const groupElementList = groupElementListByRowFlex(elementList)
+  for (let g = 0; g < groupElementList.length; g++) {
+    const elementGroupRowFlex = groupElementList[g]
+    // 行布局样式设置
+    const rowFlexDom = document.createElement('div')
+    const isDefaultRowFlex =
+      !elementGroupRowFlex.rowFlex ||
+      elementGroupRowFlex.rowFlex === RowFlex.LEFT
+    if (!isDefaultRowFlex) {
+      rowFlexDom.style.textAlign = convertRowFlexToTextAlign(
+        elementGroupRowFlex.rowFlex!
+      )
+    }
+    // 布局内容
+    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(
@@ -1067,7 +1131,7 @@ export function convertTextNodeToElement(
    parentNode.nodeName === 'FONT'
      ? <HTMLElement>parentNode.parentNode
      : parentNode
-  const rowFlex = getElementRowFlex(anchorNode)
+  const rowFlex = convertTextAlignToRowFlex(anchorNode)
  const value = textNode.textContent
  const style = window.getComputedStyle(anchorNode)
  if (!value || anchorNode.nodeName === 'STYLE') return null