diff --git a/src/editor/utils/clipboard.ts b/src/editor/utils/clipboard.ts index f72624a..6316a55 100644 --- a/src/editor/utils/clipboard.ts +++ b/src/editor/utils/clipboard.ts @@ -38,8 +38,15 @@ export function writeClipboardItem(text: string, html: string) { } export function convertElementToDom(element: IElement, options: DeepRequired): HTMLElement { - const isBlock = element.rowFlex === RowFlex.CENTER || element.rowFlex === RowFlex.RIGHT - const dom = document.createElement(isBlock ? 'p' : 'span') + let tagName: keyof HTMLElementTagNameMap = 'span' + if (element.type === ElementType.SUPERSCRIPT) { + 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 @@ -191,6 +198,37 @@ export function writeElementList(elementList: IElement[], options: DeepRequired< writeClipboardItem(text, html) } +export function convertTextNodeToElement(textNode: Element | Node): IElement | null { + if (!textNode || textNode.nodeType !== 3) return null + const parentNode = textNode.parentNode + const rowFlex = getElementRowFlex(parentNode) + const value = textNode.textContent + const style = window.getComputedStyle(parentNode) + if (!value || parentNode.nodeName === 'STYLE') return null + const element: IElement = { + value, + color: style.color, + bold: Number(style.fontWeight) > 500, + italic: style.fontStyle.includes('italic'), + size: Math.floor(parseFloat(style.fontSize)) + } + // 元素类型-默认文本 + if (parentNode.nodeName === 'SUB') { + element.type = ElementType.SUBSCRIPT + } else if (parentNode.nodeName === 'SUP') { + element.type = ElementType.SUPERSCRIPT + } + // 行对齐 + if (rowFlex !== RowFlex.LEFT) { + element.rowFlex = rowFlex + } + // 高亮色 + if (style.backgroundColor !== 'rgba(0, 0, 0, 0)') { + element.highlight = style.backgroundColor + } + return element +} + interface IGetElementListByHTMLOption { innerWidth: number; } @@ -199,24 +237,8 @@ export function getElementListByHTML(htmlText: string, options: IGetElementListB const elementList: IElement[] = [] function findTextNode(dom: Element | Node) { if (dom.nodeType === 3) { - const parentNode = dom.parentNode - const rowFlex = getElementRowFlex(parentNode) - const value = dom.textContent - 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 - } - if (style.backgroundColor !== 'rgba(0, 0, 0, 0)') { - element.highlight = style.backgroundColor - } + const element = convertTextNodeToElement(dom) + if (element) { elementList.push(element) } } else if (dom.nodeType === 1) { diff --git a/src/editor/utils/element.ts b/src/editor/utils/element.ts index 43be8d0..28dc917 100644 --- a/src/editor/utils/element.ts +++ b/src/editor/utils/element.ts @@ -501,7 +501,12 @@ export function zipElementList(payload: IElement[]): IElement[] { } // 组合元素 const pickElement = pickElementAttr(element) - if (!element.type || element.type === ElementType.TEXT) { + if ( + !element.type + || element.type === ElementType.TEXT + || element.type === ElementType.SUBSCRIPT + || element.type === ElementType.SUPERSCRIPT + ) { while (e < elementList.length) { const nextElement = elementList[e + 1] e++