From 4cd18c8c65b6954bf2029b165e2749640feb15c3 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Sat, 25 May 2024 21:42:15 +0800 Subject: [PATCH] fix: export HTML block elements row flex error #598 --- src/editor/core/draw/Draw.ts | 6 +-- src/editor/dataset/constant/Element.ts | 5 ++- src/editor/utils/element.ts | 59 +++++++++++++++++++------- 3 files changed, 49 insertions(+), 21 deletions(-) diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 38acbef..e51c423 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -64,7 +64,7 @@ import { } from '../../dataset/enum/Editor' import { Control } from './control/Control' import { - getIsInlineElement, + getIsBlockElement, getSlimCloneElementList, zipElementList } from '../../utils/element' @@ -1642,8 +1642,8 @@ export class Draw { rowList.push(row) } else { curRow.width += metrics.width - // 减小行元素前第一行空行行高 - if (i === 0 && getIsInlineElement(elementList[1])) { + // 减小块元素前第一行空行行高 + if (i === 0 && getIsBlockElement(elementList[1])) { curRow.height = defaultBasicRowMarginHeight curRow.ascent = defaultBasicRowMarginHeight } else if (curRow.height < height) { diff --git a/src/editor/dataset/constant/Element.ts b/src/editor/dataset/constant/Element.ts index c3f781c..7ef23b3 100644 --- a/src/editor/dataset/constant/Element.ts +++ b/src/editor/dataset/constant/Element.ts @@ -119,7 +119,8 @@ export const CONTROL_STYLE_ATTR: Array = [ export const EDITOR_ELEMENT_CONTEXT_ATTR: Array = [ ...TABLE_CONTEXT_ATTR, ...TITLE_CONTEXT_ATTR, - ...LIST_CONTEXT_ATTR + ...LIST_CONTEXT_ATTR, + ...EDITOR_ROW_ATTR ] export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [ @@ -136,7 +137,7 @@ export const IMAGE_ELEMENT_TYPE: ElementType[] = [ ElementType.LATEX ] -export const INLINE_ELEMENT_TYPE: ElementType[] = [ +export const BLOCK_ELEMENT_TYPE: ElementType[] = [ ElementType.BLOCK, ElementType.PAGE_BREAK, ElementType.SEPARATOR, diff --git a/src/editor/utils/element.ts b/src/editor/utils/element.ts index 49c97ac..fd3e112 100644 --- a/src/editor/utils/element.ts +++ b/src/editor/utils/element.ts @@ -21,11 +21,11 @@ import { import { LaTexParticle } from '../core/draw/particle/latex/LaTexParticle' import { NON_BREAKING_SPACE, ZERO } from '../dataset/constant/Common' import { + BLOCK_ELEMENT_TYPE, CONTROL_STYLE_ATTR, EDITOR_ELEMENT_CONTEXT_ATTR, EDITOR_ELEMENT_ZIP_ATTR, EDITOR_ROW_ATTR, - INLINE_ELEMENT_TYPE, INLINE_NODE_NAME, TABLE_CONTEXT_ATTR, TABLE_TD_ZIP_ATTR, @@ -234,10 +234,7 @@ export function formatElementList( // 移除父节点 elementList.splice(i, 1) // 控件上下文提取（压缩后的控件上下文无法提取） - const controlContext = pickObject(el, [ - ...EDITOR_ELEMENT_CONTEXT_ATTR, - ...EDITOR_ROW_ATTR - ]) + const controlContext = pickObject(el, EDITOR_ELEMENT_CONTEXT_ATTR) // 控件设置的默认样式（以前缀为基准） const controlDefaultStyle = pickObject( (el.control), @@ -752,6 +749,22 @@ 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) } @@ -797,14 +810,15 @@ export function formatElementContext( isBreakWarped = true } // 1. 即使换行停止也要处理表格上下文信息 - // 2. 定位元素非列表，无需处理粘贴列表的上下文，仅处理表格上下文信息 + // 2. 定位元素非列表，无需处理粘贴列表的上下文，仅处理表格及行上下文信息 if ( isBreakWarped || (!copyElement.listId && targetElement.type === ElementType.LIST) ) { - cloneProperty(TABLE_CONTEXT_ATTR, copyElement, targetElement) + const cloneAttr = [...TABLE_CONTEXT_ATTR, ...EDITOR_ROW_ATTR] + cloneProperty(cloneAttr, copyElement, targetElement) targetElement.valueList?.forEach(valueItem => { - cloneProperty(TABLE_CONTEXT_ATTR, copyElement, valueItem) + cloneProperty(cloneAttr, copyElement, valueItem) }) continue } @@ -914,8 +928,12 @@ export function groupElementListByRowFlex( for (let e = 1; e < elementList.length; e++) { const element = elementList[e] const rowFlex = element.rowFlex || null - // 行布局相同时追加数据，否则新增分组 - if (currentRowFlex === rowFlex) { + // 行布局相同&非块元素时追加数据，否则新增分组 + if ( + currentRowFlex === rowFlex && + !getIsBlockElement(element) && + !getIsBlockElement(elementList[e - 1]) + ) { const lastElementListGroup = elementListGroupList[elementListGroupList.length - 1] lastElementListGroup.data.push(element) @@ -1099,14 +1117,23 @@ export function createDomFromElementList( 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 + // 块元素使用flex否则使用text-align + const rowFlexDom = document.createElement('div') if (!isDefaultRowFlex) { - rowFlexDom.style.textAlign = convertRowFlexToTextAlign( - elementGroupRowFlex.rowFlex! - ) + 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! + ) + } } // 布局内容 rowFlexDom.innerHTML = buildDom(elementGroupRowFlex.data).innerHTML @@ -1444,10 +1471,10 @@ export function getSlimCloneElementList(elementList: IElement[]) { ]) } -export function getIsInlineElement(element?: IElement) { +export function getIsBlockElement(element?: IElement) { return ( !!element?.type && - (INLINE_ELEMENT_TYPE.includes(element.type) || + (BLOCK_ELEMENT_TYPE.includes(element.type) || element.imgDisplay === ImageDisplay.INLINE) ) }