vue-editify 0.1.47 → 0.1.49

package/src/core/function.ts

@@ -1,7 +1,7 @@
 /**
  * 这里的方法都是对编辑器内容元素进行判断或者操作的方法，不涉及到格式化、dom渲染和光标渲染
  */
-import { AlexElement, AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { AlexElement, AlexElementsRangeType, AlexEditor, AlexElementCreateConfigType } from 'alex-editor'
 import { common as DapCommon } from 'dap-util'
 import { cloneData, queryHasValue, getButtonOptionsConfig, ObjectType } from './tool'
 import { ButtonOptionsItemType } from '../components/button/props'
@@ -12,20 +12,16 @@ export type ElementMatchConfigType = {
 	styles?: ObjectType
 }
 
-export type CellMergeTypeResultType = {
-	crossRow: boolean
-	crossColumn: boolean
-	rowspan?: number
-	colspan?: number
-}
-
 /**
  * 清空单元格的内容并隐藏
  * @param editor
  * @param cell
  */
 export const setTableCellMerged = (cell: AlexElement) => {
-	const breakEl = new AlexElement('closed', 'br', null, null, null)
+	const breakEl = AlexElement.create({
+		type: 'closed',
+		parsedom: 'br'
+	})
 	cell.children = [breakEl]
 	breakEl.parent = cell
 	if (cell.hasMarks()) {
@@ -204,7 +200,13 @@ export const elementIsMatch = (element: AlexElement, config: ElementMatchConfigT
 	//如果存在marks判断
 	if (config.marks) {
 		const hasMarks = Object.keys(config.marks).every(key => {
-			return element.hasMarks() && element.marks![key] && element.marks![key] == config.marks![key]
+			if (element.hasMarks()) {
+				if (config.marks![key] === true) {
+					return element.marks!.hasOwnProperty(key)
+				}
+				return element.marks![key] == config.marks![key]
+			}
+			return false
 		})
 		//如果不是所有的mark都有
 		if (!hasMarks) {
@@ -214,7 +216,13 @@ export const elementIsMatch = (element: AlexElement, config: ElementMatchConfigT
 	//如果存在styles判断
 	if (config.styles) {
 		const hasStyles = Object.keys(config.styles).every(key => {
-			return element.hasStyles() && element.styles![key] && element.styles![key] == config.styles![key]
+			if (element.hasStyles()) {
+				if (config.styles![key] === true) {
+					return element.styles!.hasOwnProperty(key)
+				}
+				return element.styles![key] == config.styles![key]
+			}
+			return false
 		})
 		//如果不是所有的styles都有
 		if (!hasStyles) {
@@ -241,62 +249,47 @@ export const getMatchElementByElement = (element: AlexElement, config: ElementMa
 }
 
 /**
- * Open API：判断光标范围内的元素是否在符合条件的元素下，如果是所有的返回符合条件的元素，否则返回[]
+ * Open API：判断光标范围内的元素是否在同一个符合条件的元素下，如果是返回那个符合条件的元素，否则返回null
  * @param editor
  * @param dataRangeCaches
  * @param config
  * @returns
  */
-export const getMatchElementsByRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, config: ElementMatchConfigType) => {
-	let elements: AlexElement[] = []
+export const getMatchElementByRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, config: ElementMatchConfigType) => {
 	if (!editor.range) {
-		return elements
+		return null
 	}
 	if (editor.range.anchor.element.isEqual(editor.range.focus.element)) {
-		const element = getMatchElementByElement(editor.range.anchor.element, config)
-		if (element) {
-			elements = [element]
-		}
-		return elements
+		return getMatchElementByElement(editor.range.anchor.element, config)
 	}
-	dataRangeCaches.flatList.forEach(item => {
-		const element = getMatchElementByElement(item.element, config)
-		if (element && !elements.some(el => el.isEqual(element))) {
-			elements.push(element)
-		}
+	const arr = dataRangeCaches.list.map(item => {
+		return getMatchElementByElement(item.element, config)
 	})
-	return elements
-}
-
-/**
- * Open API：判断元素是否在有序列表或者无序列表下
- * @param element
- * @param ordered
- * @returns
- */
-export const elementIsInList = (element: AlexElement, ordered: boolean): boolean => {
-	if (isList(element, ordered)) {
-		return true
-	}
-	if (element.parent) {
-		return elementIsInList(element.parent, ordered)
-	}
-	return false
-}
-
-/**
- * Open API：判断元素是否在任务列表下
- * @param element
- * @returns
- */
-export const elementIsInTask = (element: AlexElement): boolean => {
-	if (isTask(element)) {
-		return true
+	let hasNull = arr.some(el => {
+		return el == null
+	})
+	//如果存在null，则表示有的选区元素不在符合条件的元素下，返回null
+	if (hasNull) {
+		return null
+	}
+	//如果只有一个元素，则返回该元素
+	if (arr.length == 1) {
+		return arr[0]!
+	}
+	//默认数组中的元素都相等
+	let flag = true
+	for (let i = 1; i < arr.length; i++) {
+		if (!arr[i]!.isEqual(arr[0]!)) {
+			flag = false
+			break
+		}
 	}
-	if (element.parent) {
-		return elementIsInTask(element.parent)
+	//如果相等，则返回该元素
+	if (flag) {
+		return arr[0]
 	}
-	return false
+	//不相等返回null
+	return null
 }
 
 /**
@@ -325,37 +318,50 @@ export const isTask = (element: AlexElement) => {
 }
 
 /**
- * Open API：选区是否含有代码块
- * @param editor
- * @param dataRangeCaches
+ * Open API：判断元素是否在有序列表或者无序列表下
+ * @param element
+ * @param ordered
  * @returns
  */
-export const hasPreInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
-	if (!editor.range) {
-		return false
+export const elementIsInList = (element: AlexElement, ordered: boolean): boolean => {
+	if (isList(element, ordered)) {
+		return true
 	}
-	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'pre' })
+	if (element.parent) {
+		return elementIsInList(element.parent, ordered)
 	}
-	return dataRangeCaches.flatList.some(item => {
-		return !!getMatchElementByElement(item.element, { parsedom: 'pre' })
-	})
+	return false
+}
+
+/**
+ * Open API：判断元素是否在任务列表下
+ * @param element
+ * @returns
+ */
+export const elementIsInTask = (element: AlexElement): boolean => {
+	if (isTask(element)) {
+		return true
+	}
+	if (element.parent) {
+		return elementIsInTask(element.parent)
+	}
+	return false
 }
 
 /**
- * Open API：选区是否全部在代码块内
+ * Open API：选区是否含有代码块
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const isRangeInPre = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const hasPreInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
 		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'pre' })
 	}
-	return dataRangeCaches.list.every(item => {
+	return dataRangeCaches.flatList.some(item => {
 		return !!getMatchElementByElement(item.element, { parsedom: 'pre' })
 	})
 }
@@ -379,166 +385,166 @@ export const hasQuoteInRange = (editor: AlexEditor, dataRangeCaches: AlexElement
 }
 
 /**
- * Open API：选区是否全部在引用内
+ * Open API：选区是否含有有序列表或者无序列表
  * @param editor
  * @param dataRangeCaches
+ * @param ordered
  * @returns
  */
-export const isRangeInQuote = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const hasListInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered: boolean | undefined = false) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'blockquote' })
+		return elementIsInList(editor.range.anchor.element, ordered)
 	}
-	return dataRangeCaches.list.every(item => {
-		return !!getMatchElementByElement(item.element, { parsedom: 'blockquote' })
+	return dataRangeCaches.flatList.some(item => {
+		return elementIsInList(item.element, ordered)
 	})
 }
 
 /**
- * Open API：选区是否含有有序列表或者无序列表
+ * Open API：选区是否含有任务列表
  * @param editor
  * @param dataRangeCaches
- * @param ordered
  * @returns
  */
-export const hasListInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered: boolean | undefined = false) => {
+export const hasTaskInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return elementIsInList(editor.range.anchor.element, ordered)
+		return elementIsInTask(editor.range.anchor.element)
 	}
 	return dataRangeCaches.flatList.some(item => {
-		return elementIsInList(item.element, ordered)
+		return elementIsInTask(item.element)
 	})
 }
 
 /**
- * Open API：选区是否全部在有序列表或者无序列表内
+ * Open API：选区是否含有链接
  * @param editor
  * @param dataRangeCaches
- * @param ordered
  * @returns
  */
-export const isRangeInList = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered: boolean | undefined = false) => {
+export const hasLinkInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return elementIsInList(editor.range.anchor.element, ordered)
+		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'a' })
 	}
-	return dataRangeCaches.list.every(item => {
-		return elementIsInList(item.element, ordered)
+	return dataRangeCaches.flatList.some(item => {
+		return !!getMatchElementByElement(item.element, { parsedom: 'a' })
 	})
 }
 
 /**
- * Open API：选区是否含有任务列表
+ * Open API：选区是否含有表格
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const hasTaskInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const hasTableInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return elementIsInTask(editor.range.anchor.element)
+		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'table' })
 	}
 	return dataRangeCaches.flatList.some(item => {
-		return elementIsInTask(item.element)
+		return !!getMatchElementByElement(item.element, { parsedom: 'table' })
 	})
 }
 
 /**
- * Open API：选区是否全部在任务列表里
+ * Open API：选区是否含有图片
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const isRangeInTask = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const hasImageInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return elementIsInTask(editor.range.anchor.element)
+		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'img' })
 	}
-	return dataRangeCaches.list.every(item => {
-		return elementIsInTask(item.element)
+	return dataRangeCaches.flatList.some(item => {
+		return !!getMatchElementByElement(item.element, { parsedom: 'img' })
 	})
 }
 
 /**
- * Open API：选区是否含有链接
+ * Open API：选区是否含有视频
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const hasLinkInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const hasVideoInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'a' })
+		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'video' })
 	}
 	return dataRangeCaches.flatList.some(item => {
-		return !!getMatchElementByElement(item.element, { parsedom: 'a' })
+		return !!getMatchElementByElement(item.element, { parsedom: 'video' })
 	})
 }
 
 /**
- * Open API：选区是否含有表格
+ * Open API：选区是否全部在引用内
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const hasTableInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const isRangeInQuote = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'table' })
+		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'blockquote' })
 	}
-	return dataRangeCaches.flatList.some(item => {
-		return !!getMatchElementByElement(item.element, { parsedom: 'table' })
+	return dataRangeCaches.list.every(item => {
+		return !!getMatchElementByElement(item.element, { parsedom: 'blockquote' })
 	})
 }
 
 /**
- * Open API：选区是否含有图片
+ * Open API：选区是否全部在有序列表或者无序列表内
  * @param editor
  * @param dataRangeCaches
+ * @param ordered
  * @returns
  */
-export const hasImageInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const isRangeInList = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered: boolean | undefined = false) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'img' })
+		return elementIsInList(editor.range.anchor.element, ordered)
 	}
-	return dataRangeCaches.flatList.some(item => {
-		return !!getMatchElementByElement(item.element, { parsedom: 'img' })
+	return dataRangeCaches.list.every(item => {
+		return elementIsInList(item.element, ordered)
 	})
 }
 
 /**
- * Open API：选区是否含有视频
+ * Open API：选区是否全部在任务列表里
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const hasVideoInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const isRangeInTask = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'video' })
+		return elementIsInTask(editor.range.anchor.element)
 	}
-	return dataRangeCaches.flatList.some(item => {
-		return !!getMatchElementByElement(item.element, { parsedom: 'video' })
+	return dataRangeCaches.list.every(item => {
+		return elementIsInTask(item.element)
 	})
 }
 
@@ -931,13 +937,13 @@ export const setQuote = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeT
 }
 
 /**
- * Open API：设置对齐方式，参数取值justify/left/right/center
+ * Open API：设置对齐方式
  * @param editor
  * @param dataRangeCaches
- * @param value
+ * @param value 取值justify/left/right/center
  * @returns
  */
-export const setAlign = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, value: string) => {
+export const setAlign = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, value: 'justify' | 'left' | 'right' | 'center') => {
 	if (!editor.range) {
 		return
 	}
@@ -997,10 +1003,10 @@ export const setAlign = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeT
 }
 
 /**
- * Open API：插入或者取消 有序或者无序列表 ordered为true表示有序列表
+ * Open API：插入或者取消 有序或者无序列表
  * @param editor
  * @param dataRangeCaches
- * @param ordered
+ * @param ordered 为true表示有序列表
  * @returns
  */
 export const setList = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered: boolean) => {
@@ -1080,10 +1086,10 @@ export const setTask = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeTy
 }
 
 /**
- * Open API：设置文本元素的样式，styles为{ 'font-weight':'bold' }这类格式
+ * Open API：设置文本元素的样式
  * @param editor
  * @param dataRangeCaches
- * @param styles
+ * @param styles 值为{ 'font-weight':'bold' }这类格式
  * @returns
  */
 export const setTextStyle = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, styles: ObjectType) => {
@@ -1139,10 +1145,10 @@ export const setTextStyle = (editor: AlexEditor, dataRangeCaches: AlexElementsRa
 }
 
 /**
- * Open API：设置文本元素的标记，marks为{ 'class':'a' }这类格式
+ * Open API：设置文本元素的标记
  * @param editor
  * @param dataRangeCaches
- * @param marks
+ * @param marks 值为{ 'class':'a' }这类格式
  * @returns
  */
 export const setTextMark = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, marks: ObjectType) => {
@@ -1201,10 +1207,10 @@ export const setTextMark = (editor: AlexEditor, dataRangeCaches: AlexElementsRan
 }
 
 /**
- * Open API：移除文本元素的样式，styleNames是样式名称数组，如果不存在则移除全部样式
+ * Open API：移除文本元素的样式
  * @param editor
  * @param dataRangeCaches
- * @param styleNames
+ * @param styleNames 样式名称数组，如果不存在则移除全部样式
  * @returns
  */
 export const removeTextStyle = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, styleNames?: string[]) => {
@@ -1260,10 +1266,10 @@ export const removeTextStyle = (editor: AlexEditor, dataRangeCaches: AlexElement
 }
 
 /**
- * Open API：移除文本元素的标记，markNames是标记名称数组，如果不存在则移除全部标记
+ * Open API：移除文本元素的标记
  * @param editor
  * @param dataRangeCaches
- * @param markNames
+ * @param markNames 标记名称数组，如果不存在则移除全部标记
  * @returns
  */
 export const removeTextMark = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, markNames?: string[]) => {
@@ -1387,9 +1393,9 @@ export const setLineHeight = (editor: AlexEditor, dataRangeCaches: AlexElementsR
 /**
  * Open API：插入链接
  * @param editor
- * @param text
- * @param url
- * @param newOpen
+ * @param text 链接名称
+ * @param url 链接地址
+ * @param newOpen 是否新窗口打开
  * @returns
  */
 export const insertLink = (editor: AlexEditor, text: string, url: string, newOpen: boolean) => {
@@ -1405,53 +1411,57 @@ export const insertLink = (editor: AlexEditor, text: string, url: string, newOpe
 	if (newOpen) {
 		marks.target = '_blank'
 	}
-	const linkEle = new AlexElement('inline', 'a', marks, null, null)
-	const textEle = new AlexElement('text', null, null, null, text)
-	editor.addElementTo(textEle, linkEle)
+	const linkEle = AlexElement.create({
+		type: 'inline',
+		parsedom: 'a',
+		marks,
+		children: [
+			{
+				type: 'text',
+				textcontent: text
+			}
+		]
+	})
 	editor.insertElement(linkEle)
 }
 
 /**
  * Open API：插入图片
  * @param editor
- * @param value
+ * @param value 图片地址
  * @returns
  */
 export const insertImage = (editor: AlexEditor, value: string) => {
 	if (!editor.range) {
 		return
 	}
-	const image = new AlexElement(
-		'closed',
-		'img',
-		{
+	const image = AlexElement.create({
+		type: 'closed',
+		parsedom: 'img',
+		marks: {
 			src: value
-		},
-		null,
-		null
-	)
+		}
+	})
 	editor.insertElement(image)
 }
 
 /**
  * Open API：插入视频
  * @param editor
- * @param value
+ * @param value 视频地址
  * @returns
  */
 export const insertVideo = (editor: AlexEditor, value: string) => {
 	if (!editor.range) {
 		return
 	}
-	const video = new AlexElement(
-		'closed',
-		'video',
-		{
+	const video = AlexElement.create({
+		type: 'closed',
+		parsedom: 'video',
+		marks: {
 			src: value
-		},
-		null,
-		null
-	)
+		}
+	})
 	editor.insertElement(video)
 	editor.range.anchor.moveToEnd(video)
 	editor.range.focus.moveToEnd(video)
@@ -1460,35 +1470,61 @@ export const insertVideo = (editor: AlexEditor, value: string) => {
 /**
  * Open API：插入表格
  * @param editor
- * @param rowLength
- * @param colLength
+ * @param rowLength 表格行数
+ * @param colLength 表格列数
  * @returns
  */
 export const insertTable = (editor: AlexEditor, rowLength: number, colLength: number) => {
 	if (!editor.range) {
 		return
 	}
-	const table = new AlexElement('block', 'table', null, null, null)
-	const tbody = new AlexElement('inblock', 'tbody', null, null, null)
-	editor.addElementTo(tbody, table)
+	const rows: AlexElementCreateConfigType[] = []
 	for (let i = 0; i < rowLength; i++) {
-		const row = new AlexElement('inblock', 'tr', null, null, null)
+		const columns: AlexElementCreateConfigType[] = []
 		for (let j = 0; j < colLength; j++) {
-			const column = new AlexElement('inblock', 'td', null, null, null)
-			const breakEl = new AlexElement('closed', 'br', null, null, null)
-			editor.addElementTo(breakEl, column)
-			editor.addElementTo(column, row)
+			columns.push({
+				type: 'inblock',
+				parsedom: 'td',
+				children: [
+					{
+						type: 'closed',
+						parsedom: 'br'
+					}
+				]
+			})
 		}
-		editor.addElementTo(row, tbody)
+		rows.push({
+			type: 'inblock',
+			parsedom: 'tr',
+			children: columns
+		})
 	}
+	const table = AlexElement.create({
+		type: 'block',
+		parsedom: 'table',
+		children: [
+			{
+				type: 'inblock',
+				parsedom: 'tbody',
+				children: rows
+			}
+		]
+	})
 	editor.insertElement(table)
 	//在表格后创建一个段落
-	const paragraph = new AlexElement('block', AlexElement.BLOCK_NODE, null, null, null)
-	const breakEl = new AlexElement('closed', 'br', null, null, null)
-	editor.addElementTo(breakEl, paragraph)
+	const paragraph = AlexElement.create({
+		type: 'block',
+		parsedom: AlexElement.BLOCK_NODE,
+		children: [
+			{
+				type: 'closed',
+				parsedom: 'br'
+			}
+		]
+	})
 	editor.addElementAfter(paragraph, table)
-	editor.range.anchor.moveToStart(tbody)
-	editor.range.focus.moveToStart(tbody)
+	editor.range.anchor.moveToStart(table)
+	editor.range.focus.moveToStart(table)
 }
 
 /**
@@ -1501,10 +1537,10 @@ export const insertCodeBlock = (editor: AlexEditor, dataRangeCaches: AlexElement
 	if (!editor.range) {
 		return
 	}
-	const pres = getMatchElementsByRange(editor, dataRangeCaches, { parsedom: 'pre' })
-	if (pres.length == 1) {
+	const pre = getMatchElementByRange(editor, dataRangeCaches, { parsedom: 'pre' })
+	if (pre) {
 		let content = ''
-		AlexElement.flatElements(pres[0].children!)
+		AlexElement.flatElements(pre.children!)
 			.filter(item => {
 				return item.isText()
 			})
@@ -1513,21 +1549,35 @@ export const insertCodeBlock = (editor: AlexEditor, dataRangeCaches: AlexElement
 			})
 		const splits = content.split('\n')
 		splits.forEach(item => {
-			const paragraph = new AlexElement('block', AlexElement.BLOCK_NODE, null, null, null)
-			const text = new AlexElement('text', null, null, null, item)
-			editor.addElementTo(text, paragraph)
-			editor.addElementBefore(paragraph, pres[0])
+			const paragraph = AlexElement.create({
+				type: 'block',
+				parsedom: AlexElement.BLOCK_NODE,
+				children: [
+					{
+						type: 'text',
+						textcontent: item
+					}
+				]
+			})
+			editor.addElementBefore(paragraph, pre)
 		})
-		pres[0].toEmpty()
+		pre.toEmpty()
 	} else {
 		//起点和终点在一起
 		if (editor.range.anchor.isEqual(editor.range.focus)) {
 			const block = editor.range.anchor.element.getBlock()
 			elementToParagraph(block)
 			block.parsedom = 'pre'
-			const paragraph = new AlexElement('block', AlexElement.BLOCK_NODE, null, null, null)
-			const breakEl = new AlexElement('closed', 'br', null, null, null)
-			editor.addElementTo(breakEl, paragraph)
+			const paragraph = AlexElement.create({
+				type: 'block',
+				parsedom: AlexElement.BLOCK_NODE,
+				children: [
+					{
+						type: 'closed',
+						parsedom: 'br'
+					}
+				]
+			})
 			editor.addElementAfter(paragraph, block)
 		}
 		//起点和终点不在一起
@@ -1543,10 +1593,16 @@ export const insertCodeBlock = (editor: AlexEditor, dataRangeCaches: AlexElement
 					obj[el.element.getBlock().key] = [el.element.clone()]
 				}
 			})
-			const pre = new AlexElement('block', 'pre', null, null, null)
+			const pre = AlexElement.create({
+				type: 'block',
+				parsedom: 'pre'
+			})
 			Object.keys(obj).forEach((key, index) => {
 				if (index > 0) {
-					const text = new AlexElement('text', null, null, null, '\n')
+					const text = AlexElement.create({
+						type: 'text',
+						textcontent: '\n'
+					})
 					if (pre.hasChildren()) {
 						editor.addElementTo(text, pre, pre.children!.length)
 					} else {
@@ -1563,9 +1619,16 @@ export const insertCodeBlock = (editor: AlexEditor, dataRangeCaches: AlexElement
 			})
 			editor.delete()
 			editor.insertElement(pre)
-			const paragraph = new AlexElement('block', AlexElement.BLOCK_NODE, null, null, null)
-			const breakEl = new AlexElement('closed', 'br', null, null, null)
-			editor.addElementTo(breakEl, paragraph)
+			const paragraph = AlexElement.create({
+				type: 'block',
+				parsedom: AlexElement.BLOCK_NODE,
+				children: [
+					{
+						type: 'closed',
+						parsedom: 'br'
+					}
+				]
+			})
 			editor.addElementAfter(paragraph, pre)
 		}
 	}
@@ -1581,7 +1644,10 @@ export const insertSeparator = (editor: AlexEditor) => {
 	if (!editor.range) {
 		return
 	}
-	const separator = new AlexElement('closed', 'hr', null, null, null)
+	const separator = AlexElement.create({
+		type: 'closed',
+		parsedom: 'hr'
+	})
 	editor.insertElement(separator)
 	editor.range.anchor.moveToEnd(separator)
 	editor.range.focus.moveToEnd(separator)