feat:paste html with textAlign info

src/editor/utils/clipboard.ts

@@ -6,7 +6,7 @@ import { ElementType } from '../dataset/enum/Element'
 import { DeepRequired } from '../interface/Common'
 import { ITd } from '../interface/table/Td'
 import { ITr } from '../interface/table/Tr'
-import { zipElementList } from './element'
+import { getElementRowFlex, zipElementList } from './element'
 
 export function writeClipboardItem(text: string, html: string) {
   if (!text || !html) return
@@ -103,7 +103,8 @@ export function writeElementList(elementList: IElement[], options: DeepRequired<
         dom.innerText = text.replace(new RegExp(`${ZERO}`, 'g'), '\n')
         dom.style.fontFamily = element.font || options.defaultFont
         if (element.rowFlex) {
-          dom.style.textAlign = element.rowFlex
+          const isAlignment = element.rowFlex === RowFlex.ALIGNMENT
+          dom.style.textAlign = isAlignment ? 'justify' : element.rowFlex
         }
         if (element.color) {
           dom.style.color = element.color
@@ -140,16 +141,22 @@ export function getElementListByHTML(htmlText: string, options: IGetElementListB
   const elementList: IElement[] = []
   function findTextNode(dom: Element | Node) {
     if (dom.nodeType === 3) {
-      const style = window.getComputedStyle(dom.parentNode as Element)
+      const parentNode = <HTMLElement>dom.parentNode
+      const rowFlex = getElementRowFlex(parentNode)
       const value = dom.textContent
-      if (value && dom.parentNode?.nodeName !== 'STYLE') {
-        elementList.push({
+      const style = window.getComputedStyle(parentNode)
+      if (value && parentNode.nodeName !== 'STYLE') {
+        const element: IElement = {
           value,
           color: style.color,
           bold: Number(style.fontWeight) > 500,
           italic: style.fontStyle.includes('italic'),
           size: Math.floor(Number(style.fontSize.replace('px', '')))
-        })
+        }
+        if (rowFlex !== RowFlex.LEFT) {
+          element.rowFlex = rowFlex
+        }
+        elementList.push(element)
       }
     } else if (dom.nodeType === 1) {
       const childNodes = dom.childNodes

src/editor/utils/element.ts

@@ -1,5 +1,5 @@
 import { deepClone, getUUID, splitText } from '.'
-import { ElementType, IEditorOption, IElement } from '..'
+import { ElementType, IEditorOption, IElement, RowFlex } from '..'
 import { LaTexParticle } from '../core/draw/particle/latex/LaTexParticle'
 import { defaultCheckboxOption } from '../dataset/constant/Checkbox'
 import { ZERO } from '../dataset/constant/Common'
@@ -397,3 +397,21 @@ export function zipElementList(payload: IElement[]): IElement[] {
   }
   return zipElementListData
 }
+
+export function getElementRowFlex(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
+    default:
+      return RowFlex.LEFT
+  }
+}