@kaitify/core 0.0.1-beta.1

package/src/css/style.less

@@ -0,0 +1,56 @@
+.Kaitify {
+	display: block;
+	position: relative;
+	font-size: var(--kaitify-font-size);
+	font-family: var(--kaitify-font-family);
+	color: var(--kaitify-font-color);
+	-webkit-font-smoothing: antialiased;
+	text-size-adjust: none;
+	line-height: var(--kaitify-line-height);
+	border: 1px solid var(--kaitify-border-color);
+	border-radius: var(--kaitify-border-radius);
+	background: var(--kaitify-background-color);
+	padding: var(--kaitify-padding);
+	transition: border-color 500ms;
+	overflow-x: hidden;
+	overflow-y: auto;
+	outline: none;
+
+	::selection {
+		background-color: var(--kaitify-light-theme);
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+		-webkit-tap-highlight-color: transparent;
+		outline: none;
+	}
+
+	//编辑状态下才有的样式
+	&[contenteditable='true'] {
+		&:focus {
+			border-color: var(--kaitify-theme);
+		}
+
+		&[kaitify-placeholder].showPlaceholder::before {
+			content: attr(kaitify-placeholder);
+			position: absolute;
+			left: 0;
+			top: 0;
+			padding: var(--kaitify-padding);
+			line-height: var(--kaitify-line-height);
+			opacity: 0.5;
+			cursor: text;
+		}
+
+		[contenteditable='false']:hover {
+			cursor: not-allowed;
+		}
+	}
+}
+
+html[kaitify-dark] {
+	color-scheme: dark;
+}

package/src/css/var.less

@@ -0,0 +1,45 @@
+@theme: #308af3;
+
+:root {
+	//主题色
+	--kaitify-theme: @theme;
+	//最浅主题色，通常用于悬浮效果
+	--kaitify-lightest-theme: fade(@theme, 10);
+	//更浅主题色，通常用于激活效果
+	--kaitify-lighter-theme: fade(@theme, 20);
+	//浅主题色，用于选区颜色
+	--kaitify-light-theme: fade(@theme, 30);
+	//字体颜色
+	--kaitify-font-color: #505050;
+	//边框颜色
+	--kaitify-border-color: #dedede;
+	//背景色
+	--kaitify-background-color: #fff;
+	//行高
+	--kaitify-line-height: 1.5;
+	//字号
+	--kaitify-font-size: 14px;
+	//通用圆角大小
+	--kaitify-border-radius: 3px;
+	//外边距
+	--kaitify-margin: 10px;
+	--kaitify-small-margin: 5px;
+	--kaitify-large-margin: 15px;
+	//内边距
+	--kaitify-padding: 10px;
+	--kaitify-small-padding: 5px;
+	--kaitify-large-padding: 20px;
+	//节点两侧和其他节点的间距
+	--kaitify-sides-between: 2px;
+	//字体
+	--kaitify-font-family: PingFang SC, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Hiragino KaKu Gothic Pro, Microsoft YaHei, Arial, sans-serif;
+}
+
+:root[kaitify-dark] {
+	//字体颜色
+	--kaitify-font-color: #f5f5f5;
+	//边框颜色
+	--kaitify-border-color: #3b3b3b;
+	//背景色
+	--kaitify-background-color: #1b1b1f;
+}

package/src/extensions/Extension.ts

@@ -0,0 +1,200 @@
+import { Editor, EditorCommandsType, KNode, KNodeMarksType, KNodeStylesType, RuleFunctionType, Selection } from '@/model'
+
+/**
+ * 创建扩展的入参类型
+ */
+export type ExtensionCreateOptionType = {
+  /**
+   * 扩展名称
+   */
+  name: string
+  /**
+   * 置空的标签
+   */
+  emptyRenderTags?: string[]
+  /**
+   * 额外保留的标签
+   */
+  extraKeepTags?: string[]
+  /**
+   * 自定义格式化规则
+   */
+  formatRules?: RuleFunctionType[]
+  /**
+   * 自定义dom转为非文本节点的后续处理
+   */
+  domParseNodeCallback?: (this: Editor, node: KNode) => KNode
+  /**
+   * 光标变化回调
+   */
+  onSelectionUpdate?: (this: Editor, selection: Selection) => void
+  /**
+   * 插入段落时回调
+   */
+  onInsertParagraph?: (this: Editor, node: KNode) => void
+  /**
+   * 完成删除回调
+   */
+  onDeleteComplete?: (this: Editor) => void
+  /**
+   * 光标在编辑器内时键盘按下回调
+   */
+  onKeydown?: (this: Editor, event: KeyboardEvent) => void
+  /**
+   * 光标在编辑器内时键盘松开回调
+   */
+  onKeyup?: (this: Editor, event: KeyboardEvent) => void
+  /**
+   * 编辑器聚焦时回调
+   */
+  onFocus?: (this: Editor, event: FocusEvent) => void
+  /**
+   * 编辑器失焦时回调
+   */
+  onBlur?: (this: Editor, event: FocusEvent) => void
+  /**
+   * 节点粘贴保留标记的自定义方法
+   */
+  pasteKeepMarks?: (this: Editor, node: KNode) => KNodeMarksType
+  /**
+   * 节点粘贴保留样式的自定义方法
+   */
+  pasteKeepStyles?: (this: Editor, node: KNode) => KNodeStylesType
+  /**
+   * 视频更新前回调
+   */
+  beforeUpdateView?: (this: Editor) => void
+  /**
+   * 视图更新后回调
+   */
+  afterUpdateView?: (this: Editor) => void
+  /**
+   * 在删除和换行操作中块节点节点从其父节点中抽离出去成为与父节点同级的节点后触发，如果返回true则表示继续使用默认逻辑，会将该节点转为段落，返回false则不走默认逻辑，需要自定义处理
+   */
+  onDetachMentBlockFromParentCallback?: (this: Editor, node: KNode) => boolean
+  /**
+   * 编辑器updateView执行时，通过比对新旧节点数组获取需要格式化的节点，在这些节点被格式化前，触发此方法，回调参数即当前需要被格式化的节点，该方法返回一个节点，返回的节点将会被格式化，如果你不需要任何特殊处理，返回入参提供的节点即可
+   */
+  beforePatchNodeToFormat?: (this: Editor, node: KNode) => KNode
+
+  /**
+   * 自定义命令
+   */
+  addCommands?: (this: Editor) => EditorCommandsType
+}
+
+/**
+ * 扩展
+ */
+export class Extension {
+  /**
+   * 扩展名称
+   */
+  name: string
+  /**
+   * 是否已注册
+   */
+  registered: boolean = false
+  /**
+   * 置空的标签
+   */
+  emptyRenderTags: string[] = []
+  /**
+   * 额外保留的标签
+   */
+  extraKeepTags: string[] = []
+  /**
+   * 自定义格式化规则
+   */
+  formatRules: RuleFunctionType[] = []
+  /**
+   * 自定义dom转为非文本节点的后续处理
+   */
+  domParseNodeCallback?: (this: Editor, node: KNode) => KNode
+  /**
+   * 光标变化回调
+   */
+  onSelectionUpdate?: (this: Editor, selection: Selection) => void
+  /**
+   * 插入段落时回调
+   */
+  onInsertParagraph?: (this: Editor, node: KNode) => void
+  /**
+   * 完成删除回调
+   */
+  onDeleteComplete?: (this: Editor) => void
+  /**
+   * 光标在编辑器内时键盘按下回调
+   */
+  onKeydown?: (this: Editor, event: KeyboardEvent) => void
+  /**
+   * 光标在编辑器内时键盘松开回调
+   */
+  onKeyup?: (this: Editor, event: KeyboardEvent) => void
+  /**
+   * 编辑器聚焦时回调
+   */
+  onFocus?: (this: Editor, event: FocusEvent) => void
+  /**
+   * 编辑器失焦时回调
+   */
+  onBlur?: (this: Editor, event: FocusEvent) => void
+  /**
+   * 节点粘贴保留标记的自定义方法
+   */
+  pasteKeepMarks?: (this: Editor, node: KNode) => KNodeMarksType
+  /**
+   * 节点粘贴保留样式的自定义方法
+   */
+  pasteKeepStyles?: (this: Editor, node: KNode) => KNodeStylesType
+  /**
+   * 视频更新前回调
+   */
+  beforeUpdateView?: (this: Editor) => void
+  /**
+   * 视图更新后回调
+   */
+  afterUpdateView?: (this: Editor) => void
+  /**
+   * 在删除和换行操作中块节点节点从其父节点中抽离出去成为与父节点同级的节点后触发，如果返回true则表示继续使用默认逻辑，会将该节点转为段落，返回false则不走默认逻辑，需要自定义处理
+   */
+  onDetachMentBlockFromParentCallback?: (this: Editor, node: KNode) => boolean
+  /**
+   * 编辑器updateView执行时，通过比对新旧节点数组获取需要格式化的节点，在这些节点被格式化前，触发此方法，回调参数即当前需要被格式化的节点，该方法返回一个节点，返回的节点将会被格式化，如果你不需要任何特殊处理，返回入参提供的节点即可
+   */
+  beforePatchNodeToFormat?: (this: Editor, node: KNode) => KNode
+  /**
+   * 自定义命令
+   */
+  addCommands?: (this: Editor) => EditorCommandsType
+
+  constructor(name: string) {
+    this.name = name
+  }
+
+  /**
+   * 创建扩展
+   */
+  static create(options: ExtensionCreateOptionType) {
+    const extension = new Extension(options.name)
+    if (options.emptyRenderTags) extension.emptyRenderTags = options.emptyRenderTags
+    if (options.extraKeepTags) extension.extraKeepTags = options.extraKeepTags
+    if (options.formatRules) extension.formatRules = options.formatRules
+    if (options.domParseNodeCallback) extension.domParseNodeCallback = options.domParseNodeCallback
+    if (options.onSelectionUpdate) extension.onSelectionUpdate = options.onSelectionUpdate
+    if (options.onInsertParagraph) extension.onInsertParagraph = options.onInsertParagraph
+    if (options.onDeleteComplete) extension.onDeleteComplete = options.onDeleteComplete
+    if (options.onKeydown) extension.onKeydown = options.onKeydown
+    if (options.onKeyup) extension.onKeyup = options.onKeyup
+    if (options.onFocus) extension.onFocus = options.onFocus
+    if (options.onBlur) extension.onBlur = options.onBlur
+    if (options.pasteKeepMarks) extension.pasteKeepMarks = options.pasteKeepMarks
+    if (options.pasteKeepStyles) extension.pasteKeepStyles = options.pasteKeepStyles
+    if (options.beforeUpdateView) extension.beforeUpdateView = options.beforeUpdateView
+    if (options.afterUpdateView) extension.afterUpdateView = options.afterUpdateView
+    if (options.onDetachMentBlockFromParentCallback) extension.onDetachMentBlockFromParentCallback = options.onDetachMentBlockFromParentCallback
+    if (options.beforePatchNodeToFormat) extension.beforePatchNodeToFormat = options.beforePatchNodeToFormat
+    if (options.addCommands) extension.addCommands = options.addCommands
+    return extension
+  }
+}

package/src/extensions/align/index.ts

@@ -0,0 +1,115 @@
+import { KNode, KNodeStylesType } from '@/model'
+import { deleteProperty } from '@/tools'
+import { Extension } from '../Extension'
+import { getSelectionBlockNodes } from '@/model/config/function'
+
+export type AlignValueType = 'left' | 'right' | 'center' | 'justify'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    isAlign?: (value: AlignValueType) => boolean
+    setAlign?: (value: AlignValueType) => Promise<void>
+    unsetAlign?: (value: AlignValueType) => Promise<void>
+  }
+}
+
+/**
+ * 删除指定块节点及以上块节点的对齐方式
+ */
+const clearAlign = (blockNode: KNode, value: AlignValueType) => {
+  const matchNode = blockNode.getMatchNode({ styles: { textAlign: value } })
+  if (matchNode) {
+    matchNode.styles = deleteProperty(matchNode.styles!, 'textAlign')
+    clearAlign(matchNode, value)
+  }
+}
+
+export const AlignExtension = () =>
+  Extension.create({
+    name: 'align',
+    pasteKeepStyles(node) {
+      const styles: KNodeStylesType = {}
+      if (node.isBlock() && node.hasStyles()) {
+        if (node.styles!.hasOwnProperty('textAlign')) styles.textAlign = node.styles!.textAlign
+      }
+      return styles
+    },
+    addCommands() {
+      /**
+       * 光标所在的块节点是否都是符合的对齐方式
+       */
+      const isAlign = (value: AlignValueType) => {
+        if (!this.selection.focused()) {
+          return false
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const block = this.selection.start!.node.getBlock()
+          return !!block.getMatchNode({ styles: { textAlign: value } })
+        }
+        //起点和终点不在一起
+        const blockNodes = getSelectionBlockNodes.apply(this)
+        return blockNodes.every(item => {
+          return !!item.getMatchNode({ styles: { textAlign: value } })
+        })
+      }
+
+      /**
+       * 设置对齐方式
+       */
+      const setAlign = async (value: AlignValueType) => {
+        if (isAlign(value)) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const blockNode = this.selection.start!.node.getBlock()
+          const styles: KNodeStylesType = blockNode.hasStyles() ? blockNode.styles! : {}
+          blockNode.styles = {
+            ...styles,
+            textAlign: value
+          }
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            const styles: KNodeStylesType = item.hasStyles() ? item.styles! : {}
+            item.styles = {
+              ...styles,
+              textAlign: value
+            }
+          })
+        }
+        await this.updateView()
+      }
+
+      /**
+       * 取消对齐方式
+       */
+      const unsetAlign = async (value: AlignValueType) => {
+        if (!isAlign(value)) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const blockNode = this.selection.start!.node.getBlock()
+          clearAlign(blockNode, value)
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            clearAlign(item, value)
+          })
+        }
+        await this.updateView()
+      }
+
+      return {
+        isAlign,
+        setAlign,
+        unsetAlign
+      }
+    }
+  })

package/src/extensions/attachment/icon.svg

@@ -0,0 +1 @@
+<svg t="1728556328694" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1473" width="200" height="200"><path d="M960 448c0 88-72 160-160 160H352c-52.8 0-96-43.2-96-96s43.2-96 96-96h416v64H352c-17.6 0-32 14.4-32 32s14.4 32 32 32h448c52.8 0 96-43.2 96-96s-43.2-96-96-96H288c-88 0-160 72-160 160s72 160 160 160h352v64H288C164 736 64 636 64 512s100-224 224-224h512c88 0 160 72 160 160z" p-id="1474" fill="#06c27c"></path></svg>