@kaitify/core 0.0.1-beta.1

package/src/extensions/code-block/index.ts

@@ -0,0 +1,308 @@
+import { Editor, KNode, KNodeMarksType } from '@/model'
+import { getSelectionBlockNodes } from '@/model/config/function'
+import { Extension } from '../Extension'
+import { getHljsHtml, HljsLanguages, HljsLanguageType } from './hljs'
+import './style.less'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    getCodeBlock?: () => KNode | null
+    hasCodeBlock?: () => boolean
+    allCodeBlock?: () => boolean
+    setCodeBlock?: () => Promise<void>
+    unsetCodeBlock?: () => Promise<void>
+    updateCodeBlockLanguage?: (language: HljsLanguageType) => Promise<void>
+  }
+}
+
+/**
+ * 块节点转为代码块
+ */
+const toCodeBlock = (editor: Editor, node: KNode) => {
+  if (!node.isBlock()) {
+    return
+  }
+  //是固定的块节点或者内嵌套的块节点
+  if (node.fixed || node.nested) {
+    //创建代码块节点
+    const codeBlockNode = KNode.create({
+      type: 'block',
+      tag: 'pre',
+      children: []
+    })
+    //将块节点的子节点给代码块节点
+    node.children!.forEach((item, index) => {
+      editor.addNode(item, codeBlockNode, index)
+    })
+    //将代码块节点添加到块节点下
+    codeBlockNode.parent = node
+    node.children = [codeBlockNode]
+  }
+  //非固定块节点
+  else {
+    editor.toParagraph(node)
+    node.tag = 'pre'
+  }
+}
+
+/**
+ * 更新代码块内的光标位置
+ */
+const updateSelection = (editor: Editor, node: KNode, textNodes: KNode[], newNodes: KNode[]) => {
+  if (!editor.selection.focused()) {
+    return
+  }
+  //如果光标的起点在代码块内对光标的起点进行重新定位
+  if (editor.isSelectionInNode(node, 'start')) {
+    //获取起点所在文本节点的在所有文本节点中的序列
+    const startIndex = textNodes.findIndex(n => editor.selection.start!.node.isEqual(n))
+    //起点在整个代码内容中的位置
+    const offset = textNodes.filter((_n, i) => i < startIndex).reduce((total, item) => total + item.textContent!.length, 0) + editor.selection.start!.offset
+    //获取代码块下新的子孙节点中全部的文本节点
+    const newTextNodes = KNode.flat(newNodes).filter(n => n.isText() && !n.isEmpty())
+    let i = 0
+    let index = 0
+    //遍历
+    while (i < newTextNodes.length) {
+      let newIndex = index + newTextNodes[i].textContent!.length
+      if (offset >= index && offset <= newIndex) {
+        editor.selection.start!.node = newTextNodes[i]
+        editor.selection.start!.offset = offset - index
+        break
+      }
+      i++
+      index = newIndex
+    }
+  }
+  //如果光标的终点在代码块内对光标的终点进行重新定位
+  if (editor.isSelectionInNode(node, 'end')) {
+    //获取终点所在文本节点的在所有文本节点中的序列
+    const endIndex = textNodes.findIndex(n => editor.selection.end!.node.isEqual(n))
+    //终点在整个代码内容中的位置
+    const offset = textNodes.filter((_n, i) => i < endIndex).reduce((total, item) => total + item.textContent!.length, 0) + editor.selection.end!.offset
+    //获取全部的新文本节点
+    const newTextNodes = KNode.flat(newNodes).filter(n => n.isText() && !n.isEmpty())
+    let i = 0
+    let index = 0
+    //遍历
+    while (i < newTextNodes.length) {
+      let newIndex = index + newTextNodes[i].textContent!.length
+      if (offset >= index && offset <= newIndex) {
+        editor.selection.end!.node = newTextNodes[i]
+        editor.selection.end!.offset = offset - index
+        break
+      }
+      i++
+      index = newIndex
+    }
+  }
+}
+
+/**
+ * 判断代码块是否需要更新
+ */
+const isNeedUpdate = (editor: Editor, node: KNode, language: string, textContent: string) => {
+  try {
+    const domPre = editor.findDom(node)
+    if (domPre && domPre.nodeName.toLocaleLowerCase() == 'pre') {
+      //语言不一致
+      const oldLanguage = domPre.getAttribute('kaitify-hljs') || ''
+      if (oldLanguage != language) {
+        return true
+      }
+      //文本内容不一致
+      const oldTextContent = domPre.innerText
+      if (oldTextContent != textContent) {
+        return true
+      }
+      //子孙节点数量不一致（防止在代码块里插入非文本节点，比如图片等）
+      if (KNode.flat(node.children!).length != domPre.querySelectorAll('*').length) {
+        return true
+      }
+      return false
+    }
+    return true
+  } catch (error) {
+    return true
+  }
+}
+
+export const CodeBlockExtension = () =>
+  Extension.create({
+    name: 'codeBlock',
+    extraKeepTags: ['pre'],
+    domParseNodeCallback(node) {
+      if (node.isMatch({ tag: 'pre' })) {
+        node.type = 'block'
+      }
+      return node
+    },
+    pasteKeepMarks(node) {
+      const marks: KNodeMarksType = {}
+      if (node.isMatch({ tag: 'pre' }) && node.hasMarks()) {
+        if (node.marks!.hasOwnProperty('kaitify-hljs')) marks['kaitify-hljs'] = node.marks!['kaitify-hljs']
+      }
+      return marks
+    },
+    beforePatchNodeToFormat(node) {
+      const codeBlockNode = node.getMatchNode({ tag: 'pre' })
+      if (codeBlockNode) {
+        return codeBlockNode
+      }
+      return node
+    },
+    formatRules: [
+      //代码块高亮处理
+      ({ editor, node }) => {
+        if (node.isMatch({ tag: 'pre' }) && node.hasChildren()) {
+          //代码块必须是块节点
+          if (!node.isBlock()) node.type = 'block'
+          //获取语言类型
+          let language = (node.marks?.['kaitify-hljs'] || '') as string
+          //语言存在但不是列表内的
+          if (language && !HljsLanguages.some(item => item == language)) {
+            language = ''
+          }
+          //获取代码块内的所有文本节点
+          const textNodes = KNode.flat(node.children!).filter(item => item.isText() && !item.isEmpty())
+          //获取代码块内的代码文本值
+          const textContent = textNodes.reduce((val, item) => {
+            return val + item.textContent
+          }, '')
+          //只有代码块语言改变和内容改变才需要重新进行高亮处理
+          if (isNeedUpdate(editor, node, language, textContent)) {
+            //将文本节点的内容转为经过hljs处理的内容
+            const html = getHljsHtml(textContent, language)
+            if (html) {
+              //将经过hljs处理的内容转为节点数组
+              const nodes = editor.htmlParseNode(html)
+              //将新的文本节点全部加入到代码块的子节点数组中
+              node.children = nodes.map(item => {
+                item.parent = node
+                return item
+              })
+              //更新光标位置
+              updateSelection(editor, node, textNodes, nodes)
+            } else {
+              const selectionStartInNode = editor.isSelectionInNode(node, 'start')
+              const selectionEndInNode = editor.isSelectionInNode(node, 'end')
+              const placeholderNode = KNode.createPlaceholder()
+              node.children = [placeholderNode]
+              placeholderNode.parent = node
+              if (selectionStartInNode) {
+                editor.setSelectionBefore(placeholderNode, 'start')
+              }
+              if (selectionEndInNode) {
+                editor.setSelectionBefore(placeholderNode, 'end')
+              }
+            }
+          }
+        }
+      }
+    ],
+    addCommands() {
+      /**
+       * 获取光标所在的代码块节点，如果光标不在一个代码块节点内，返回null
+       */
+      const getCodeBlock = () => {
+        return this.getMatchNodeBySelection({
+          tag: 'pre'
+        })
+      }
+
+      /**
+       * 判断光标范围内是否有代码块节点
+       */
+      const hasCodeBlock = () => {
+        return this.isSelectionNodesSomeMatch({
+          tag: 'pre'
+        })
+      }
+
+      /**
+       * 光标范围内是否都是代码块节点
+       */
+      const allCodeBlock = () => {
+        return this.isSelectionNodesAllMatch({
+          tag: 'pre'
+        })
+      }
+
+      /**
+       * 设置代码块
+       */
+      const setCodeBlock = async () => {
+        if (allCodeBlock()) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const blockNode = this.selection.start!.node.getBlock()
+          toCodeBlock(this, blockNode)
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            toCodeBlock(this, item)
+          })
+        }
+        await this.updateView()
+      }
+
+      /**
+       * 取消代码块
+       */
+      const unsetCodeBlock = async () => {
+        if (!allCodeBlock()) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const matchNode = this.selection.start!.node.getMatchNode({ tag: 'pre' })
+          if (matchNode) this.toParagraph(matchNode)
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            const matchNode = item.getMatchNode({ tag: 'pre' })
+            if (matchNode) this.toParagraph(matchNode)
+          })
+        }
+        await this.updateView()
+      }
+
+      /**
+       * 更新光标所在代码块的语言类型
+       */
+      const updateCodeBlockLanguage = async (language?: HljsLanguageType) => {
+        if (!this.selection.focused()) {
+          return
+        }
+        const codeBlockNode = getCodeBlock()
+        if (!codeBlockNode) {
+          return
+        }
+        if (codeBlockNode.hasMarks()) {
+          codeBlockNode.marks!['kaitify-hljs'] = language || ''
+        } else {
+          codeBlockNode.marks = {
+            'kaitify-hljs': language || ''
+          }
+        }
+        await this.updateView()
+      }
+
+      return {
+        getCodeBlock,
+        hasCodeBlock,
+        allCodeBlock,
+        setCodeBlock,
+        unsetCodeBlock,
+        updateCodeBlockLanguage
+      }
+    }
+  })
+
+export * from './hljs'

package/src/extensions/code-block/style.less

@@ -0,0 +1,20 @@
+.Kaitify pre {
+	background: #f6f9ff;
+	color: var(--kaitify-font-color);
+	border: 1px solid #f6f9ff;
+	border-radius: var(--kaitify-border-radius);
+	padding: var(--kaitify-padding);
+	line-height: var(--kaitify-line-height);
+	font-family: Consolas, monospace, Monaco, Andale Mono, Ubuntu Mono;
+	margin: 0 0 var(--kaitify-large-margin) 0 !important;
+	overflow-x: auto;
+
+	&:last-child {
+		margin-bottom: 0 !important;
+	}
+}
+
+:root[kaitify-dark] .Kaitify pre {
+	background: #29292d;
+	border-color: #29292d;
+}

package/src/extensions/color/index.ts

@@ -0,0 +1,56 @@
+import { KNodeStylesType } from '@/model'
+import { Extension } from '../Extension'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    isColor?: (value: string) => boolean
+    setColor?: (value: string) => Promise<void>
+    unsetColor?: (value: string) => Promise<void>
+  }
+}
+
+export const ColorExtension = () =>
+  Extension.create({
+    name: 'color',
+    pasteKeepStyles(node) {
+      const styles: KNodeStylesType = {}
+      if (node.isText() && node.hasStyles()) {
+        if (node.styles!.hasOwnProperty('color')) styles.color = node.styles!.color
+      }
+      return styles
+    },
+    addCommands() {
+      /**
+       * 光标所在文本的颜色是否与入参一致
+       */
+      const isColor = (value: string) => {
+        return this.commands.isTextStyle!('color', value)
+      }
+      /**
+       * 设置颜色
+       */
+      const setColor = async (value: string) => {
+        if (isColor(value)) {
+          return
+        }
+        await this.commands.setTextStyle!({
+          color: value
+        })
+      }
+      /**
+       * 取消颜色
+       */
+      const unsetColor = async (value: string) => {
+        if (!isColor(value)) {
+          return
+        }
+        await this.commands.removeTextStyle!(['color'])
+      }
+
+      return {
+        isColor,
+        setColor,
+        unsetColor
+      }
+    }
+  })

package/src/extensions/font-family/index.ts

@@ -0,0 +1,80 @@
+import { KNodeMarksType, KNodeStylesType } from '@/model'
+import { splitNodeToNodes } from '@/model/config/function'
+import { deleteProperty } from '@/tools'
+import { Extension } from '../Extension'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    isFontFamily?: (value: string) => boolean
+    setFontFamily?: (value: string) => Promise<void>
+    unsetFontFamily?: (value: string) => Promise<void>
+  }
+}
+
+export const FontFamilyExtension = () =>
+  Extension.create({
+    name: 'fontFamily',
+    pasteKeepStyles(node) {
+      const styles: KNodeStylesType = {}
+      if (node.isText() && node.hasStyles()) {
+        if (node.styles!.hasOwnProperty('fontFamily')) styles.fontFamily = node.styles!.fontFamily
+      }
+      return styles
+    },
+    extraKeepTags: ['font'],
+    domParseNodeCallback(node) {
+      if (node.isMatch({ tag: 'font' })) {
+        node.type = 'inline'
+      }
+      return node
+    },
+    formatRules: [
+      ({ editor, node }) => {
+        if (!node.isEmpty() && node.isMatch({ tag: 'font' })) {
+          const marks: KNodeMarksType = node.marks || {}
+          const styles: KNodeStylesType = node.styles || {}
+          node.styles = {
+            ...styles,
+            fontFamily: (marks.face as string) || ''
+          }
+          node.marks = deleteProperty(marks, 'face')
+          node.tag = editor.textRenderTag
+          splitNodeToNodes.apply(editor, [node])
+        }
+      }
+    ],
+    addCommands() {
+      /**
+       * 光标所在文本的字体是否与入参一致
+       */
+      const isFontFamily = (value: string) => {
+        return this.commands.isTextStyle!('fontFamily', value)
+      }
+      /**
+       * 设置字体
+       */
+      const setFontFamily = async (value: string) => {
+        if (isFontFamily(value)) {
+          return
+        }
+        await this.commands.setTextStyle!({
+          fontFamily: value
+        })
+      }
+      /**
+       * 取消字体
+       */
+      const unsetFontFamily = async (value: string) => {
+        if (!isFontFamily(value)) {
+          return
+        }
+        await this.commands.removeTextStyle!(['fontFamily'])
+      }
+
+      return {
+        isFontFamily,
+        setFontFamily,
+        unsetFontFamily
+      }
+    }
+  })

package/src/extensions/font-size/index.ts

@@ -0,0 +1,56 @@
+import { KNodeStylesType } from '@/model'
+import { Extension } from '../Extension'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    isFontSize?: (value: string) => boolean
+    setFontSize?: (value: string) => Promise<void>
+    unsetFontSize?: (value: string) => Promise<void>
+  }
+}
+
+export const FontSizeExtension = () =>
+  Extension.create({
+    name: 'fontSize',
+    pasteKeepStyles(node) {
+      const styles: KNodeStylesType = {}
+      if (node.isText() && node.hasStyles()) {
+        if (node.styles!.hasOwnProperty('fontSize')) styles.fontSize = node.styles!.fontSize
+      }
+      return styles
+    },
+    addCommands() {
+      /**
+       * 光标所在文本的字号大小是否与入参一致
+       */
+      const isFontSize = (value: string) => {
+        return this.commands.isTextStyle!('fontSize', value)
+      }
+      /**
+       * 设置字号
+       */
+      const setFontSize = async (value: string) => {
+        if (isFontSize(value)) {
+          return
+        }
+        await this.commands.setTextStyle!({
+          fontSize: value
+        })
+      }
+      /**
+       * 取消字号
+       */
+      const unsetFontSize = async (value: string) => {
+        if (!isFontSize(value)) {
+          return
+        }
+        await this.commands.removeTextStyle!(['fontSize'])
+      }
+
+      return {
+        isFontSize,
+        setFontSize,
+        unsetFontSize
+      }
+    }
+  })

package/src/extensions/heading/index.ts

@@ -0,0 +1,164 @@
+import { Editor, KNode } from '@/model'
+import { getSelectionBlockNodes } from '@/model/config/function'
+import { Extension } from '../Extension'
+import './style.less'
+
+export type HeadingLevelType = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    getHeading?: (level: HeadingLevelType) => KNode | null
+    hasHeading?: (level: HeadingLevelType) => boolean
+    allHeading?: (level: HeadingLevelType) => boolean
+    setHeading?: (level: HeadingLevelType) => Promise<void>
+    unsetHeading?: (level: HeadingLevelType) => Promise<void>
+  }
+}
+
+/**
+ * 块节点转为标题
+ */
+const toHeading = (editor: Editor, node: KNode, level: HeadingLevelType) => {
+  if (!node.isBlock()) {
+    return
+  }
+  const headingLevelMap = {
+    0: editor.blockRenderTag,
+    1: 'h1',
+    2: 'h2',
+    3: 'h3',
+    4: 'h4',
+    5: 'h5',
+    6: 'h6'
+  }
+  //是固定的块节点或者内嵌套的块节点
+  if (node.fixed || node.nested) {
+    //创建标题节点
+    const headingNode = KNode.create({
+      type: 'block',
+      tag: headingLevelMap[level],
+      children: []
+    })
+    //将块节点的子节点给标题节点
+    node.children!.forEach((item, index) => {
+      editor.addNode(item, headingNode, index)
+    })
+    //将标题节点添加到块节点下
+    headingNode.parent = node
+    node.children = [headingNode]
+  }
+  //非固定块节点
+  else {
+    editor.toParagraph(node)
+    node.tag = headingLevelMap[level]
+  }
+}
+
+export const HeadingExtension = () =>
+  Extension.create({
+    name: 'heading',
+    extraKeepTags: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+    domParseNodeCallback(node) {
+      if (node.isMatch({ tag: 'h1' }) || node.isMatch({ tag: 'h2' }) || node.isMatch({ tag: 'h3' }) || node.isMatch({ tag: 'h4' }) || node.isMatch({ tag: 'h5' }) || node.isMatch({ tag: 'h6' })) {
+        node.type = 'block'
+      }
+      return node
+    },
+    formatRules: [
+      ({ node }) => {
+        if (node.isMatch({ tag: 'h1' }) || node.isMatch({ tag: 'h2' }) || node.isMatch({ tag: 'h3' }) || node.isMatch({ tag: 'h4' }) || node.isMatch({ tag: 'h5' }) || node.isMatch({ tag: 'h6' })) {
+          node.type = 'block'
+        }
+      }
+    ],
+    addCommands() {
+      const headingLevelMap = {
+        0: this.blockRenderTag,
+        1: 'h1',
+        2: 'h2',
+        3: 'h3',
+        4: 'h4',
+        5: 'h5',
+        6: 'h6'
+      }
+      /**
+       * 获取光标所在的标题，如果光标不在一个标题内，返回null
+       */
+      const getHeading = (level: HeadingLevelType) => {
+        return this.getMatchNodeBySelection({
+          tag: headingLevelMap[level]
+        })
+      }
+
+      /**
+       * 判断光标范围内是否有标题
+       */
+      const hasHeading = (level: HeadingLevelType) => {
+        return this.isSelectionNodesSomeMatch({
+          tag: headingLevelMap[level]
+        })
+      }
+
+      /**
+       * 光标范围内是否都是标题
+       */
+      const allHeading = (level: HeadingLevelType) => {
+        return this.isSelectionNodesAllMatch({
+          tag: headingLevelMap[level]
+        })
+      }
+
+      /**
+       * 设置标题
+       */
+      const setHeading = async (level: HeadingLevelType) => {
+        if (allHeading(level)) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const blockNode = this.selection.start!.node.getBlock()
+          toHeading(this, blockNode, level)
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            toHeading(this, item, level)
+          })
+        }
+        await this.updateView()
+      }
+
+      /**
+       * 取消标题
+       */
+      const unsetHeading = async (level: HeadingLevelType) => {
+        if (!allHeading(level)) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const matchNode = this.selection.start!.node.getMatchNode({ tag: headingLevelMap[level] })
+          if (matchNode) this.toParagraph(matchNode)
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            const matchNode = item.getMatchNode({ tag: headingLevelMap[level] })
+            if (matchNode) this.toParagraph(matchNode)
+          })
+        }
+        await this.updateView()
+      }
+
+      return {
+        getHeading,
+        hasHeading,
+        allHeading,
+        setHeading,
+        unsetHeading
+      }
+    }
+  })