feat: copy and paste sub and sup elements

src/editor/utils/clipboard.ts

@@ -38,8 +38,15 @@ export function writeClipboardItem(text: string, html: string) {
 }
 
 export function convertElementToDom(element: IElement, options: DeepRequired<IEditorOption>): HTMLElement {
-  const isBlock = element.rowFlex === RowFlex.CENTER || element.rowFlex === RowFlex.RIGHT
+  let tagName: keyof HTMLElementTagNameMap = 'span'
-  const dom = document.createElement(isBlock ? 'p' : '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,32 +198,47 @@ export function writeElementList(elementList: IElement[], options: DeepRequired<
   writeClipboardItem(text, html)
 }
 
-interface IGetElementListByHTMLOption {
+export function convertTextNodeToElement(textNode: Element | Node): IElement | null {
-  innerWidth: number;
+  if (!textNode || textNode.nodeType !== 3) return null
-}
+  const parentNode = <HTMLElement>textNode.parentNode
-
-export function getElementListByHTML(htmlText: string, options: IGetElementListByHTMLOption): IElement[] {
-  const elementList: IElement[] = []
-  function findTextNode(dom: Element | Node) {
-    if (dom.nodeType === 3) {
-      const parentNode = <HTMLElement>dom.parentNode
   const rowFlex = getElementRowFlex(parentNode)
-      const value = dom.textContent
+  const value = textNode.textContent
   const style = window.getComputedStyle(parentNode)
-      if (value && parentNode.nodeName !== 'STYLE') {
+  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(Number(style.fontSize.replace('px', '')))
+    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;
+}
+
+export function getElementListByHTML(htmlText: string, options: IGetElementListByHTMLOption): IElement[] {
+  const elementList: IElement[] = []
+  function findTextNode(dom: Element | Node) {
+    if (dom.nodeType === 3) {
+      const element = convertTextNodeToElement(dom)
+      if (element) {
         elementList.push(element)
       }
     } else if (dom.nodeType === 1) {

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++