@kaitify/core 0.0.1-beta.1

package/src/model/config/dom-observe.ts

@@ -0,0 +1,184 @@
+import { Editor } from '../Editor'
+import { updateSelection } from './function'
+
+/**
+ * 判断是否合法dom
+ */
+const isLegalDom = (editor: Editor, dom: Node) => {
+	let legal = true
+	//文本元素
+	if (dom.nodeType == 3) {
+		//存在父元素并且父元素只有这么一个子元素
+		if (dom.parentNode && dom.parentNode.childNodes.length == 1) {
+			try {
+				//查找父元素对应的节点
+				const node = editor.findNode(dom.parentNode as HTMLElement)
+				if (!node.isText()) {
+					legal = false
+				}
+			} catch (error) {
+				legal = false
+			}
+		} else {
+			legal = false
+		}
+	} else if (dom.nodeType == 1) {
+		//非文本元素
+		try {
+			//查找该元素对应的节点
+			editor.findNode(dom as HTMLElement)
+		} catch (error) {
+			legal = false
+		}
+	}
+	return legal
+}
+
+/**
+ * 移除对编辑器的dom监听
+ */
+export const removeDomObserve = (editor: Editor) => {
+	if (editor.domObserver) {
+		editor.domObserver.disconnect()
+		editor.domObserver = null
+	}
+}
+
+/**
+ * 设置对编辑器的dom监听，主要解决非法dom插入问题
+ * 中文输入和updateView时不会启用dom监听
+ */
+export const setDomObserve = (editor: Editor) => {
+	if (!window.MutationObserver) {
+		console.warn('The current browser does not support MutationObserver')
+	}
+	removeDomObserve(editor)
+	editor.domObserver = new MutationObserver(mutationList => {
+		//中文输入的情况下不处理
+		if (editor.isComposition) {
+			return
+		}
+		//是否发生更新
+		let hasUpdate = false
+		//非法dom数组
+		const illegalDoms: Node[] = []
+		//遍历
+		for (let i = 0; i < mutationList.length; i++) {
+			const mutationRecord = mutationList[i]
+			//文本变更
+			if (mutationRecord.type == 'characterData') {
+				//父元素
+				const parentElement = mutationRecord.target.parentNode! as HTMLElement
+				//获取对应的节点
+				const parentNode = editor.findNode(parentElement)
+				//是文本节点且文本不一致
+				if (parentNode.isText() && parentNode.textContent != mutationRecord.target.textContent) {
+					const textContent = parentNode.textContent || ''
+					//更新文本内容
+					parentNode.textContent = mutationRecord.target.textContent || ''
+					//更新光标
+					if (editor.isSelectionInNode(parentNode)) {
+						updateSelection.apply(editor)
+					}
+					//这里先取消dom监听
+					removeDomObserve(editor)
+					//移除非法的文本
+					mutationRecord.target.textContent = textContent
+					//重新设置dom监听
+					setDomObserve(editor)
+					//更新标识
+					hasUpdate = true
+				}
+				//不是文本节点
+				else if (!parentNode.isText()) {
+					//子元素在父元素中的位置
+					const index = Array.from(parentElement.childNodes).findIndex(item => item === mutationRecord.target)
+					//将子元素转为节点
+					const node = editor.domParseNode(mutationRecord.target)
+					//添加到编辑器内
+					parentNode.children!.splice(index, 0, node)
+					node.parent = parentNode
+					//删除非法dom
+					illegalDoms.push(mutationRecord.target)
+					//重置光标到节点后
+					if (editor.selection.focused()) {
+						editor.setSelectionAfter(node, 'all')
+					}
+					//更新标识
+					hasUpdate = true
+				}
+			}
+			//子元素变更
+			else if (mutationRecord.type == 'childList') {
+				//新增元素中存在非法的元素
+				const elements = Array.from(mutationRecord.addedNodes).filter(item => !isLegalDom(editor, item))
+				if (elements.length > 0) {
+					//非法元素的父元素
+					const parentElement = mutationRecord.target as HTMLElement
+					//父元素是编辑器容器
+					if (parentElement === editor.$el!) {
+						elements.forEach(el => {
+							//子元素在父元素中的位置
+							const index = Array.from(parentElement.childNodes).findIndex(item => item === el)
+							//将子元素转为节点
+							const node = editor.domParseNode(el)
+							//添加到编辑器内
+							editor.stackNodes.splice(index, 0, node)
+							//删除非法dom
+							illegalDoms.push(el)
+							//重置光标到节点后
+							if (editor.selection.focused()) {
+								editor.setSelectionAfter(node, 'all')
+							}
+							//更新标识
+							hasUpdate = true
+						})
+					}
+					//不是编辑器容器的情况
+					else {
+						//获取父元素对应的node
+						const parentNode = editor.findNode(parentElement)
+						elements.forEach(el => {
+							//子元素在父元素中的位置
+							const index = Array.from(parentElement.childNodes).findIndex(item => item === el)
+							//将子元素转为节点
+							const node = editor.domParseNode(el)
+							//添加到编辑器内
+							if (parentNode.hasChildren()) {
+								parentNode.children!.splice(index, 0, node)
+								node.parent = parentNode
+							} else {
+								parentNode.parent!.children!.splice(index, 0, node)
+								node.parent = parentNode.parent!
+							}
+							//删除非法dom
+							illegalDoms.push(el)
+							//重置光标到节点后
+							if (editor.selection.focused()) {
+								editor.setSelectionAfter(node, 'all')
+							}
+							//更新标识
+							hasUpdate = true
+						})
+					}
+				}
+			}
+		}
+		//有dom变化
+		if (hasUpdate) {
+			//删除非法dom
+			illegalDoms.forEach(item => {
+				item.parentNode?.removeChild(item)
+			})
+			//更新视图
+			editor.updateView()
+		}
+	})
+	editor.domObserver.observe(editor.$el!, {
+		attributes: false,
+		characterData: true,
+		characterDataOldValue: true,
+		childList: true,
+		subtree: true
+	})
+}

package/src/model/config/event-handler.ts

@@ -0,0 +1,237 @@
+import { delay } from '@/tools'
+import { Editor } from '../Editor'
+import { handlerForPasteDrop, redressSelection, updateSelection } from './function'
+
+/**
+ * 监听外部改变selection
+ */
+export const onSelectionChange = async function (this: Editor) {
+  if (!this.$el) {
+    return
+  }
+  //正在输入中文
+  if (this.isComposition) {
+    return
+  }
+  //内部修改触发
+  if (this.internalCauseSelectionChange) {
+    return
+  }
+  //更新selection
+  const hasUpdate = updateSelection.apply(this)
+  //没有更新
+  if (!hasUpdate) {
+    return
+  }
+  //进行纠正
+  const hasRedress = redressSelection.apply(this)
+  //有纠正
+  if (hasRedress) {
+    //则渲染真实光标
+    await this.updateRealSelection()
+    return
+  }
+  //更新记录的selection
+  this.history.updateSelection(this.selection)
+  //触发事件
+  if (typeof this.onSelectionUpdate == 'function') {
+    this.onSelectionUpdate.apply(this, [this.selection])
+  }
+}
+
+/**
+ * 监听beforeinput
+ */
+export const onBeforeInput = async function (this: Editor, e: Event) {
+  const event = e as InputEvent
+  //中文输入相关保持默认行为
+  if (event.inputType === 'insertCompositionText' || event.inputType === 'insertFromComposition') {
+    return
+  }
+  //禁用系统默认行为
+  event.preventDefault()
+  //不可编辑
+  if (!this.isEditable()) {
+    return
+  }
+  //针对insertFromDrop的特殊处理
+  if (event.inputType == 'insertFromDrop') {
+    //延时，防止和deleteByDrag冲突
+    await delay()
+    //insertFromDrop触发时不会触发selectionchange，虚拟光标位置没有更新，这里主动更新一下
+    updateSelection.apply(this)
+  }
+  //光标没有聚焦
+  if (!this.selection.focused()) {
+    return
+  }
+  //插入文本
+  if (event.inputType == 'insertText' && event.data) {
+    this.insertText(event.data!)
+    this.updateView()
+  }
+  //删除内容
+  else if (event.inputType == 'deleteContentBackward' || event.inputType == 'deleteByCut' || event.inputType == 'deleteByDrag') {
+    //禁用剪切功能的情况
+    if (event.inputType == 'deleteByCut' && !this.allowCut) {
+      return
+    }
+    this.isUserDelection = true
+    this.delete()
+    await this.updateView()
+    this.isUserDelection = false
+  }
+  //插入段落
+  else if (event.inputType == 'insertParagraph' || event.inputType == 'insertLineBreak') {
+    this.insertParagraph()
+    this.updateView()
+  }
+  //粘贴和拖入
+  else if (event.inputType == 'insertFromPaste' || event.inputType == 'insertFromDrop') {
+    //存在粘贴数据且允许粘贴
+    if (event.dataTransfer && this.allowPaste) {
+      await handlerForPasteDrop.apply(this, [event.dataTransfer])
+      await this.updateView()
+    }
+  }
+}
+
+/**
+ * 监听中文输入
+ */
+export const onComposition = async function (this: Editor, e: Event) {
+  const event = e as InputEvent
+  //不可编辑
+  if (!this.isEditable()) {
+    return
+  }
+  //开始输入中文
+  if (event.type == 'compositionstart') {
+    //改变标识
+    this.isComposition = true
+  }
+  //输入中文结束后
+  else if (event.type == 'compositionend') {
+    //获取真实光标
+    const realSelection = window.getSelection()!
+    const range = realSelection.getRangeAt(0)
+    //获取真实光标所在的真实dom，一定是文本
+    const element = range.endContainer
+    //父元素
+    const parentElement = element.parentNode! as HTMLElement
+    //获取对应的节点
+    const parentNode = this.findNode(parentElement)
+    //是文本节点且文本不一致
+    if (parentNode.isText() && parentNode.textContent != element.textContent) {
+      const textContent = parentNode.textContent || ''
+      //更新文本内容
+      parentNode.textContent = element.textContent || ''
+      //更新光标
+      if (this.isSelectionInNode(parentNode)) {
+        updateSelection.apply(this)
+      }
+      //移除非法的文本
+      element.textContent = textContent
+      //更新视图
+      await this.updateView()
+    }
+    //不是文本节点
+    else if (!parentNode.isText()) {
+      //子元素在父元素中的位置
+      const index = Array.from(parentElement.childNodes).findIndex(item => item === element)
+      //将子元素转为节点
+      const node = this.domParseNode(element)
+      //添加到编辑器内
+      parentNode.children!.splice(index, 0, node)
+      node.parent = parentNode
+      //删除非法dom
+      parentElement.removeChild(element)
+      //重置光标到节点后
+      if (this.selection.focused()) {
+        this.setSelectionAfter(node, 'all')
+      }
+      //更新视图
+      await this.updateView()
+    }
+    //改变标识
+    this.isComposition = false
+  }
+}
+
+/**
+ * 监听键盘事件
+ */
+export const onKeyboard = function (this: Editor, e: Event) {
+  if (this.isComposition) {
+    return
+  }
+  const event = e as KeyboardEvent
+  //键盘按下
+  if (event.type == 'keydown') {
+    //不可编辑
+    if (!this.isEditable()) {
+      return
+    }
+    //触发keydown
+    if (typeof this.onKeydown == 'function') {
+      this.onKeydown.apply(this, [event])
+    }
+  }
+  //键盘松开
+  else if (event.type == 'keyup') {
+    //不可编辑
+    if (!this.isEditable()) {
+      return
+    }
+    //触发keyup
+    if (typeof this.onKeyup == 'function') {
+      this.onKeyup.apply(this, [event])
+    }
+  }
+}
+
+/**
+ * 监听编辑器获取焦点
+ */
+export const onFocus = function (this: Editor, e: Event) {
+  //不可编辑
+  if (!this.isEditable()) {
+    return
+  }
+  if (typeof this.onFocus == 'function') {
+    this.onFocus.apply(this, [e as FocusEvent])
+  }
+}
+
+/**
+ * 监听编辑器失去焦点
+ */
+export const onBlur = function (this: Editor, e: Event) {
+  //不可编辑
+  if (!this.isEditable()) {
+    return
+  }
+  if (typeof this.onBlur == 'function') {
+    this.onBlur.apply(this, [e as FocusEvent])
+  }
+}
+
+/**
+ * 监听编辑器复制
+ */
+export const onCopy = function (this: Editor, e: Event) {
+  const event = e as ClipboardEvent
+  if (!this.allowCopy) {
+    event.preventDefault()
+  }
+}
+
+/**
+ * 监听编辑器剪切
+ */
+export const onCut = function (this: Editor, e: Event) {
+  const event = e as ClipboardEvent
+  if (!this.allowCut) {
+    event.preventDefault()
+  }
+}

package/src/model/config/format-patch.ts

@@ -0,0 +1,215 @@
+import { KNode } from '../KNode'
+/**
+ * 这里的比对结果仅进行格式化处理，只需要判断节点是否变化
+ */
+
+/**
+ * 节点数组比对结果类型
+ */
+export type NodePatchResultType = {
+	/**
+	 * 新节点
+	 */
+	newNode: KNode | null
+	/**
+	 * 旧节点
+	 */
+	oldNode: KNode | null
+}
+
+/**
+ * 对新旧两个节点数组进行比对
+ */
+export const patchNodes = (newNodes: KNode[], oldNodes: (KNode | null)[]) => {
+	//两个数组都为空，无需操作
+	if (newNodes.length == 0 && oldNodes.length == 0) {
+		return []
+	}
+	//旧节点全部移除
+	if (newNodes.length === 0) {
+		return oldNodes
+			.filter(node => !node)
+			.map(oldNode => ({
+				oldNode,
+				newNode: null
+			})) as NodePatchResultType[]
+	}
+	//新节点全部插入
+	if (oldNodes.length === 0) {
+		return newNodes.map(newNode => ({
+			newNode,
+			oldNode: null
+		})) as NodePatchResultType[]
+	}
+	//比对结果数组
+	const result: NodePatchResultType[] = []
+	// 创建一个 Map 存储旧节点 key 对应的索引，提升查找效率
+	const oldKeyMap = new Map<number, number>()
+	oldNodes.forEach((node, index) => {
+		if (node) {
+			oldKeyMap.set(node.key, index)
+		}
+	})
+	// 双端遍历
+	let newStartIndex = 0
+	let oldStartIndex = 0
+	let newEndIndex = newNodes.length - 1
+	let oldEndIndex = oldNodes.length - 1
+	while (newStartIndex <= newEndIndex && oldStartIndex <= oldEndIndex) {
+		const newStartNode = newNodes[newStartIndex]
+		const oldStartNode = oldNodes[oldStartIndex]
+		const newEndNode = newNodes[newEndIndex]
+		const oldEndNode = oldNodes[oldEndIndex]
+		//跳过已被处理的旧节点
+		if (!oldStartNode) {
+			oldStartIndex++
+		}
+		//跳过已被处理的旧节点
+		else if (!oldEndNode) {
+			oldEndIndex--
+		}
+		//起始节点 key 匹配，进行比对
+		else if (newStartNode.key == oldStartNode!.key) {
+			result.push(...patchNode(newStartNode, oldStartNode!))
+			newStartIndex++
+			oldStartIndex++
+		}
+		//终点节点 key 匹配，进行比对
+		else if (newEndNode.key == oldEndNode!.key) {
+			result.push(...patchNode(newEndNode, oldEndNode!))
+			newEndIndex--
+			oldEndIndex--
+		}
+		//新起点和旧终点匹配，说明节点被移动
+		else if (newStartNode.key == oldEndNode!.key) {
+			result.push({
+				newNode: newStartNode,
+				oldNode: oldEndNode
+			})
+			newStartIndex++
+			oldEndIndex--
+		}
+		//新终点和旧起点匹配，说明节点被移动
+		else if (newEndNode.key == oldStartNode!.key) {
+			result.push({
+				newNode: newEndNode,
+				oldNode: oldStartNode
+			})
+			newEndIndex--
+			oldStartIndex++
+		}
+		//其他情况
+		else {
+			//查找新起点节点在旧节点数组中的位置
+			const idxInOld = oldKeyMap.get(newStartNode.key)
+			if (idxInOld !== undefined) {
+				//说明找到了同key节点，进行移动
+				result.push({
+					newNode: newStartNode,
+					oldNode: oldNodes[idxInOld]
+				})
+				//标记节点已处理
+				oldNodes[idxInOld] = null
+			} else {
+				//没有找到相同 key，则是新插入的节点
+				result.push({
+					newNode: newStartNode,
+					oldNode: null
+				})
+			}
+			newStartIndex++
+		}
+	}
+	//处理剩余的新节点（全部为插入）
+	while (newStartIndex <= newEndIndex) {
+		result.push({
+			newNode: newNodes[newStartIndex],
+			oldNode: null
+		})
+		newStartIndex++
+	}
+	//处理剩余的旧节点（全部为移除）
+	while (oldStartIndex <= oldEndIndex) {
+		if (oldNodes[oldStartIndex]) {
+			result.push({
+				oldNode: oldNodes[oldStartIndex]!,
+				newNode: null
+			})
+		}
+		oldStartIndex++
+	}
+	return result
+}
+
+/**
+ * 对新旧两个节点进行比对
+ */
+export const patchNode = (newNode: KNode, oldNode: KNode) => {
+	//比对结果数组
+	const result: NodePatchResultType[] = []
+	//空节点
+	if (newNode.isEmpty() || oldNode.isEmpty()) {
+		result.push({
+			oldNode,
+			newNode
+		})
+	}
+	//type和locked、fixed、nested变更
+	else if (newNode.type != oldNode.type || newNode.locked != oldNode.locked || newNode.fixed != oldNode.fixed || newNode.nested != oldNode.nested) {
+		result.push({
+			newNode,
+			oldNode
+		})
+	}
+	//非文本节点的tag变化
+	else if (!newNode.isText() && newNode.tag != oldNode.tag) {
+		result.push({
+			newNode,
+			oldNode
+		})
+	}
+	//新节点有子节点而旧节点没有
+	else if (newNode.hasChildren() && !oldNode.hasChildren()) {
+		result.push({
+			newNode,
+			oldNode
+		})
+	}
+	//旧节点有子节点而新节点没有
+	else if (oldNode.hasChildren() && !newNode.hasChildren()) {
+		result.push({
+			newNode,
+			oldNode
+		})
+	}
+	//以下是更新节点的情况
+	else {
+		//文本节点的textContent变更
+		if (newNode.isText() && newNode.textContent != oldNode.textContent) {
+			result.push({
+				oldNode,
+				newNode
+			})
+		}
+		//节点的marks变更
+		else if (!newNode.isEqualMarks(oldNode)) {
+			result.push({
+				newNode,
+				oldNode
+			})
+		}
+		//节点的styles变更
+		else if (!newNode.isEqualStyles(oldNode)) {
+			result.push({
+				newNode,
+				oldNode
+			})
+		}
+		//子节点
+		else if (newNode.hasChildren() && oldNode.hasChildren()) {
+			result.push(...patchNodes(newNode.children!, oldNode.children!))
+		}
+	}
+
+	return result
+}