feat:add copy text align and separator feature

src/editor/core/event/CanvasEvent.ts

@@ -1,4 +1,4 @@
-import { ElementType } from '../..'
+import { ElementType, IEditorOption } from '../..'
 import { ZERO } from '../../dataset/constant/Common'
 import { EDITOR_ELEMENT_COPY_ATTR } from '../../dataset/constant/Element'
 import { ElementStyleKey } from '../../dataset/enum/ElementStyle'
@@ -20,6 +20,7 @@ import { Control } from '../draw/control/Control'
 import { CheckboxControl } from '../draw/control/checkbox/CheckboxControl'
 import { splitText } from '../../utils'
 import { Previewer } from '../draw/particle/previewer/Previewer'
+import { DeepRequired } from '../../interface/Common'
 
 export class CanvasEvent {
 
@@ -28,6 +29,7 @@ export class CanvasEvent {
   private mouseDownStartPosition: ICurrentPosition | null
 
   private draw: Draw
+  private options: DeepRequired<IEditorOption>
   private pageContainer: HTMLDivElement
   private pageList: HTMLCanvasElement[]
   private position: Position
@@ -48,6 +50,7 @@ export class CanvasEvent {
     this.pageContainer = draw.getPageContainer()
     this.pageList = draw.getPageList()
     this.draw = draw
+    this.options = draw.getOptions()
     this.cursor = null
     this.position = this.draw.getPosition()
     this.range = this.draw.getRange()
@@ -585,7 +588,7 @@ export class CanvasEvent {
     const { startIndex, endIndex } = this.range.getRange()
     const elementList = this.draw.getElementList()
     if (startIndex !== endIndex) {
-      writeElementList(elementList.slice(startIndex + 1, endIndex + 1))
+      writeElementList(elementList.slice(startIndex + 1, endIndex + 1), this.options)
       let curIndex: number
       if (activeControl) {
         curIndex = this.control.cut()
@@ -602,7 +605,7 @@ export class CanvasEvent {
     const { startIndex, endIndex } = this.range.getRange()
     const elementList = this.draw.getElementList()
     if (startIndex !== endIndex) {
-      writeElementList(elementList.slice(startIndex + 1, endIndex + 1))
+      writeElementList(elementList.slice(startIndex + 1, endIndex + 1), this.options)
     }
   }
 

src/editor/utils/clipboard.ts

@@ -1,7 +1,8 @@
-import { IElement } from '..'
+import { IEditorOption, IElement, RowFlex } from '..'
 import { ZERO } from '../dataset/constant/Common'
 import { TEXTLIKE_ELEMENT_TYPE } from '../dataset/constant/Element'
 import { ElementType } from '../dataset/enum/Element'
+import { DeepRequired } from '../interface/Common'
 import { zipElementList } from './element'
 
 export function writeClipboardItem(text: string, html: string) {
@@ -16,7 +17,7 @@ export function writeClipboardItem(text: string, html: string) {
   window.navigator.clipboard.write([item])
 }
 
-export function writeElementList(elementList: IElement[]) {
+export function writeElementList(elementList: IElement[], options: DeepRequired<IEditorOption>) {
   const clipboardDom: HTMLDivElement = document.createElement('div')
   function buildDomFromElementList(payload: IElement[]) {
     for (let e = 0; e < payload.length; e++) {
@@ -52,8 +53,10 @@ export function writeElementList(elementList: IElement[]) {
           img.height = element.height!
         }
         clipboardDom.append(img)
+      } else if (element.type === ElementType.SEPARATOR) {
+        const hr = document.createElement('hr')
+        clipboardDom.append(hr)
       } else if (!element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
-        const span = document.createElement('span')
         let text = ''
         if (element.type === ElementType.CONTROL) {
           text = element.control!.value?.[0]?.value || ''
@@ -61,20 +64,26 @@ export function writeElementList(elementList: IElement[]) {
           text = element.value
         }
         if (!text) continue
-        span.innerText = text.replace(new RegExp(`${ZERO}`, 'g'), '\n')
+        const isBlock = element.rowFlex === RowFlex.CENTER || element.rowFlex === RowFlex.RIGHT
+        const dom = document.createElement(isBlock ? 'p' : 'span')
+        dom.innerText = text.replace(new RegExp(`${ZERO}`, 'g'), '\n')
+        dom.style.fontFamily = element.font || options.defaultFont
+        if (element.rowFlex) {
+          dom.style.textAlign = element.rowFlex
+        }
         if (element.color) {
-          span.style.color = element.color
+          dom.style.color = element.color
         }
         if (element.bold) {
-          span.style.fontWeight = '600'
+          dom.style.fontWeight = '600'
         }
         if (element.italic) {
-          span.style.fontStyle = 'italic'
+          dom.style.fontStyle = 'italic'
         }
         if (element.size) {
-          span.style.fontSize = `${element.size}px`
+          dom.style.fontSize = `${element.size}px`
         }
-        clipboardDom.append(span)
+        clipboardDom.append(dom)
       }
     }
   }