feat: format title element value

src/editor/core/command/CommandAdapt.ts

@@ -19,7 +19,7 @@ import { ITd } from '../../interface/table/Td'
 import { ITr } from '../../interface/table/Tr'
 import { IWatermark } from '../../interface/Watermark'
 import { downloadFile, getUUID } from '../../utils'
-import { formatElementList } from '../../utils/element'
+import { formatElementList, isTextLikeElement } from '../../utils/element'
 import { printImageBase64 } from '../../utils/print'
 import { Control } from '../draw/control/Control'
 import { Draw } from '../draw/Draw'
@@ -405,26 +405,19 @@ export class CommandAdapt {
     } else {
       changeElementList = elementList.slice(startIndex + 1, endIndex + 1)
     }
-    // 检验数据合法性
-    const isExistNotTextElement = !!changeElementList.find(el =>
-      el.type &&
-      el.type !== ElementType.TEXT &&
-      el.type !== ElementType.TITLE
-    )
-    if (isExistNotTextElement) return
     // 设置值
     const titleId = getUUID()
     const titleOptions = this.draw.getOptions().title
     changeElementList.forEach(el => {
       if (payload) {
-        el.type = ElementType.TITLE
         el.level = payload
         el.titleId = titleId
-        el.size = titleOptions[titleSizeMapping[payload]]
-        el.bold = true
+        if (isTextLikeElement(el)) {
+          el.size = titleOptions[titleSizeMapping[payload]]
+          el.bold = true
+        }
       } else {
-        if (el.type === ElementType.TITLE) {
-          delete el.type
+        if (el.titleId) {
           delete el.titleId
           delete el.level
           delete el.size

src/editor/core/event/handlers/input.ts

@@ -27,7 +27,7 @@ export function input(data: string, host: CanvasEvent) {
     cursor.clearAgentDomValue()
   }
   const activeControl = control.getActiveControl()
-  const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT, DATE, TITLE } = ElementType
+  const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT, DATE } = ElementType
   const text = data.replaceAll(`\n`, ZERO)
   const rangeManager = draw.getRange()
   const { startIndex, endIndex } = rangeManager.getRange()
@@ -55,7 +55,6 @@ export function input(data: string, host: CanvasEvent) {
       || (!copyElement.type && copyElement.value !== ZERO)
       || (copyElement.type === HYPERLINK && nextElement?.type === HYPERLINK)
       || (copyElement.type === DATE && nextElement?.type === DATE)
-      || copyElement.type === TITLE
       || (copyElement.type === SUBSCRIPT && nextElement?.type === SUBSCRIPT)
       || (copyElement.type === SUPERSCRIPT && nextElement?.type === SUPERSCRIPT)
     ) {

src/editor/dataset/constant/Element.ts

@@ -64,8 +64,7 @@ export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [
   ElementType.SUBSCRIPT,
   ElementType.SUPERSCRIPT,
   ElementType.CONTROL,
-  ElementType.DATE,
-  ElementType.TITLE
+  ElementType.DATE
 ]
 
 export const INLINE_ELEMENT_TYPE: ElementType[] = [

src/editor/utils/clipboard.ts

@@ -64,8 +64,8 @@ export function convertElementToDom(element: IElement, options: DeepRequired<IEd
 }
 
 export function writeElementList(elementList: IElement[], options: DeepRequired<IEditorOption>) {
-  const clipboardDom: HTMLDivElement = document.createElement('div')
-  function buildDomFromElementList(payload: IElement[]) {
+  function buildDomFromElementList(payload: IElement[]): HTMLDivElement {
+    const clipboardDom = document.createElement('div')
     for (let e = 0; e < payload.length; e++) {
       const element = payload[e]
       // 构造表格
@@ -96,10 +96,8 @@ export function writeElementList(elementList: IElement[], options: DeepRequired<
         clipboardDom.append(a)
       } else if (element.type === ElementType.TITLE) {
         const h = document.createElement(`h${titleOrderNumberMapping[element.level!]}`)
-        element.valueList!.forEach(el => {
-          const dom = convertElementToDom(el, options)
-          h.append(dom)
-        })
+        const childDom = buildDomFromElementList(zipElementList(element.valueList!))
+        h.innerHTML = childDom.innerHTML
         clipboardDom.append(h)
       } else if (element.type === ElementType.IMAGE) {
         const img = document.createElement('img')
@@ -142,8 +140,9 @@ export function writeElementList(elementList: IElement[], options: DeepRequired<
         clipboardDom.append(dom)
       }
     }
+    return clipboardDom
   }
-  buildDomFromElementList(zipElementList(elementList))
+  const clipboardDom = buildDomFromElementList(zipElementList(elementList))
   // 写入剪贴板
   document.body.append(clipboardDom)
   const text = clipboardDom.innerText
@@ -207,7 +206,6 @@ export function getElementListByHTML(htmlText: string, options: IGetElementListB
         } else if (/H[1-6]/.test(node.nodeName)) {
           const hElement = node as HTMLTitleElement
           const valueList = getElementListByHTML(hElement.innerHTML, options)
-            .filter(el => !el.type || el.type === ElementType.TEXT)
           elementList.push({
             value: '',
             type: ElementType.TITLE,

src/editor/utils/element.ts

@@ -4,7 +4,7 @@ import { LaTexParticle } from '../core/draw/particle/latex/LaTexParticle'
 import { defaultCheckboxOption } from '../dataset/constant/Checkbox'
 import { ZERO } from '../dataset/constant/Common'
 import { defaultControlOption } from '../dataset/constant/Control'
-import { EDITOR_ELEMENT_ZIP_ATTR } from '../dataset/constant/Element'
+import { EDITOR_ELEMENT_ZIP_ATTR, TEXTLIKE_ELEMENT_TYPE } from '../dataset/constant/Element'
 import { titleSizeMapping } from '../dataset/constant/Title'
 import { ControlComponent, ControlType } from '../dataset/enum/Control'
 import { ITd } from '../interface/table/Td'
@@ -109,8 +109,12 @@ export function formatElementList(elementList: IElement[], options: IFormatEleme
     } else if (el.type === ElementType.TITLE) {
       // 移除父节点
       elementList.splice(i, 1)
-      // 元素展开
-      const valueList = unzipElementList(el.valueList || [])
+      // 格式化元素
+      const valueList = el.valueList || []
+      formatElementList(valueList, {
+        ...options,
+        isHandleFirstElement: false
+      })
       // 追加节点
       if (valueList.length) {
         const titleId = getUUID()
@@ -118,13 +122,15 @@ export function formatElementList(elementList: IElement[], options: IFormatEleme
         for (let v = 0; v < valueList.length; v++) {
           const value = valueList[v]
           value.titleId = titleId
-          value.type = el.type
           value.level = el.level
-          if (!value.size) {
-            value.size = titleOptions[titleSizeMapping[value.level!]]
-          }
-          if (value.bold === undefined) {
-            value.bold = true
+          // 文本型元素设置字体及加粗
+          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++
@@ -394,7 +400,7 @@ export function zipElementList(payload: IElement[]): IElement[] {
       }
       dateElement.valueList = zipElementList(valueList)
       element = dateElement
-    } else if (element.type === ElementType.TITLE) {
+    } else if (element.titleId && element.level) {
       // 标题处理
       const titleId = element.titleId
       const level = element.level
@@ -410,7 +416,6 @@ export function zipElementList(payload: IElement[]): IElement[] {
           e--
           break
         }
-        delete titleE.type
         delete titleE.level
         valueList.push(titleE)
         e++
@@ -483,4 +488,8 @@ export function getElementRowFlex(node: HTMLElement) {
     default:
       return RowFlex.LEFT
   }
+}
+
+export function isTextLikeElement(element: IElement): boolean {
+  return !element.type || TEXTLIKE_ELEMENT_TYPE.includes(element.type)
 }