@kaitify/core 0.0.1-beta.1

package/src/extensions/code/index.ts

@@ -0,0 +1,295 @@
+import { KNode } from '@/model'
+import { splitNodeToNodes } from '@/model/config/function'
+import { Extension } from '../Extension'
+import './style.less'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    getCode?: () => KNode | null
+    hasCode?: () => boolean
+    allCode?: () => boolean
+    setCode?: () => Promise<void>
+    unsetCode?: () => Promise<void>
+  }
+}
+
+export const CodeExtension = () =>
+  Extension.create({
+    name: 'code',
+    extraKeepTags: ['code'],
+    domParseNodeCallback(node) {
+      if (node.isMatch({ tag: 'code' })) {
+        node.type = 'inline'
+      }
+      return node
+    },
+    formatRules: [
+      ({ editor, node }) => {
+        //行内代码只能是行内节点并且只能有文本节点和闭合节点
+        if (node.isMatch({ tag: 'code' }) && node.hasChildren()) {
+          node.type = 'inline'
+          node.children!.forEach(item => {
+            splitNodeToNodes.apply(editor, [item])
+          })
+        }
+      }
+    ],
+    addCommands() {
+      /**
+       * 获取光标所在的行内代码，如果光标不在一个行内代码内，返回null
+       */
+      const getCode = () => {
+        return this.getMatchNodeBySelection({
+          tag: 'code'
+        })
+      }
+
+      /**
+       * 判断光标范围内是否有行内代码
+       */
+      const hasCode = () => {
+        return this.isSelectionNodesSomeMatch({
+          tag: 'code'
+        })
+      }
+
+      /**
+       * 光标范围内是否都是行内代码
+       */
+      const allCode = () => {
+        return this.isSelectionNodesAllMatch({
+          tag: 'code'
+        })
+      }
+
+      /**
+       * 设置行内代码
+       */
+      const setCode = async () => {
+        if (allCode()) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const codeNode = KNode.create({
+            type: 'inline',
+            tag: 'code'
+          })
+          const zeroWidthText = KNode.createZeroWidthText()
+          this.addNode(zeroWidthText, codeNode)
+          this.insertNode(codeNode)
+          this.setSelectionAfter(zeroWidthText, 'all')
+        }
+        //起点和终点不在一起
+        else {
+          const focusNodes = this.getFocusSplitNodesBySelection('all')
+          const length = focusNodes.length
+          for (let i = 0; i < length; i++) {
+            const node = focusNodes[i]
+            const isExsitInCode = !!node.getMatchNode({
+              tag: 'code'
+            })
+            //该节点已经在行内代码内跳过本次循环
+            if (isExsitInCode) {
+              continue
+            }
+            //复制该节点
+            const newNode = node.clone(true)
+            //节点改为行内代码
+            node.type = 'inline'
+            node.tag = 'code'
+            node.marks = {}
+            node.styles = {}
+            node.textContent = undefined
+            node.children = [newNode]
+            newNode.parent = node
+            //重置光标位置
+            if (this.isSelectionInNode(node, 'start')) {
+              this.selection.start!.node = newNode
+            }
+            if (this.isSelectionInNode(node, 'end')) {
+              this.selection.end!.node = newNode
+            }
+          }
+        }
+        await this.updateView()
+      }
+
+      /**
+       * 取消行内代码
+       */
+      const unsetCode = async () => {
+        if (!allCode()) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          //光标所在节点
+          const node = this.selection.start!.node
+          //光标偏移值
+          const offset = this.selection.start!.offset
+          //光标所在的行内代码节点
+          const codeNode = node.getMatchNode({
+            tag: 'code'
+          })!
+          //行内代码内第一个可设置光标的节点
+          const firstSelectionNode = this.getFirstSelectionNodeInChildren(codeNode)!
+          //行内代码内最后一个可设置光标的节点
+          const lastSelectionNode = this.getLastSelectionNodeInChildren(codeNode)!
+          //光标在行内代码起点处
+          if (firstSelectionNode.isEqual(node) && offset == 0) {
+            const zeroWidthText = KNode.createZeroWidthText()
+            this.addNodeBefore(zeroWidthText, codeNode)
+            this.setSelectionAfter(zeroWidthText)
+          }
+          //光标在行内代码的末尾处
+          else if (lastSelectionNode.isEqual(node) && offset == (node.isText() ? node.textContent!.length : 1)) {
+            const zeroWidthText = KNode.createZeroWidthText()
+            this.addNodeAfter(zeroWidthText, codeNode)
+            this.setSelectionAfter(zeroWidthText)
+          }
+          //光标在行内代码的中间
+          else {
+            //将光标的起点移动到行内代码的起始处
+            this.setSelectionBefore(firstSelectionNode, 'start')
+            //创建新的行内代码
+            const newCodeNode = KNode.create({
+              type: 'inline',
+              tag: 'code'
+            })
+            //获取选区内的可聚焦节点并遍历
+            this.getFocusSplitNodesBySelection('all').forEach((item, i) => {
+              //获取可聚焦节点在父节点中的位置
+              const index = codeNode.children!.findIndex(n => n.isEqual(item))
+              //从父节点中移除
+              codeNode.children!.splice(index, 1)
+              //加入到新的行内代码里
+              this.addNode(item, newCodeNode, i)
+            })
+            //新的行内代码插入到当前行内代码前面
+            this.addNodeBefore(newCodeNode, codeNode)
+            //创建一个空白文本节点
+            const zeroWidthText = KNode.createZeroWidthText()
+            //加入到当前行内代码前面
+            this.addNodeBefore(zeroWidthText, codeNode)
+            //重置光标位置
+            this.setSelectionAfter(zeroWidthText, 'all')
+          }
+        }
+        //起点和终点不在一起
+        else {
+          const startNode = this.selection.start!.node
+          const endNode = this.selection.end!.node
+          const startCodeNode = startNode.getMatchNode({ tag: 'code' })!
+          const endCodeNode = endNode.getMatchNode({ tag: 'code' })!
+          //起点和终点在一个行内代码内
+          if (startCodeNode.isEqual(endCodeNode)) {
+            //获取选区内的可聚焦节点
+            const focusNodes = this.getFocusSplitNodesBySelection('all')
+            //获取选区内第一个可聚焦节点在行内代码中的序列
+            const firstIndex = startCodeNode.children!.findIndex(item => item.isEqual(focusNodes[0]))
+            //获取选区内最后一个可聚焦节点在行内代码中的序列
+            const lastIndex = startCodeNode.children!.findIndex(item => item.isEqual(focusNodes[focusNodes.length - 1]))
+            //行内代码的子节点数量
+            const length = startCodeNode.children!.length
+            //是第一个可聚焦节点和最后一个可聚焦节点，说明选区是整个行内代码
+            if (firstIndex == 0 && lastIndex == length - 1) {
+              startCodeNode.children!.forEach(item => {
+                this.addNodeBefore(item, startCodeNode)
+              })
+              startCodeNode.children = []
+            }
+            //是第一个可聚焦节点
+            else if (firstIndex == 0 && lastIndex == 0) {
+              const node = startCodeNode.children![0]
+              startCodeNode.children!.splice(0, 1)
+              this.addNodeBefore(node, startCodeNode)
+            }
+            //是最后一个可聚焦节点
+            else if (firstIndex == length - 1 && lastIndex == length - 1) {
+              const node = startCodeNode.children![length - 1]
+              startCodeNode.children!.splice(length - 1, 1)
+              this.addNodeAfter(node, startCodeNode)
+            }
+            //是同一个可聚焦节点但是在中间位置
+            else if (firstIndex == lastIndex) {
+              //获取该可聚焦节点
+              const node = startCodeNode.children![firstIndex]
+              //创建新的行内节点
+              const newCodeNode = KNode.create({ type: 'inline', tag: 'code' })
+              //将选区前的行内节点部份给新的行内节点
+              startCodeNode.children!.splice(0, firstIndex).forEach((item, index) => {
+                this.addNode(item, newCodeNode, index)
+              })
+              //将新的行内代码节点插入到原行内代码节点前
+              this.addNodeBefore(newCodeNode, startCodeNode)
+              //将选区内的节点插入到原来的行内节点前面
+              this.addNodeBefore(node, startCodeNode)
+              //从原来的行内代码中移出该节点
+              startCodeNode.children!.splice(0, 1)
+            }
+            //不是同一个可聚焦节点
+            else {
+              //创建新的行内节点
+              const newCodeNode = KNode.create({ type: 'inline', tag: 'code' })
+              //将选区前的行内节点部份给新的行内节点
+              startCodeNode.children!.splice(0, firstIndex).forEach((item, index) => {
+                this.addNode(item, newCodeNode, index)
+              })
+              //将新的行内代码节点插入到原行内代码节点前
+              this.addNodeBefore(newCodeNode, startCodeNode)
+              //将选区内的节点插入到原行内节点的前面
+              focusNodes.forEach(item => {
+                this.addNodeBefore(item, startCodeNode)
+              })
+              startCodeNode.children!.splice(0, lastIndex - firstIndex + 1)
+            }
+          }
+          //起点和终点不在一个行内代码里
+          else {
+            const startOffset = this.selection.start!.offset
+            //起点所在的行内代码内第一个可设置光标的节点
+            const firstStartSelectionNode = this.getFirstSelectionNodeInChildren(startCodeNode)!
+            //获取选区内的可聚焦节点
+            const focusNodes = this.getFocusSplitNodesBySelection('all')
+            const length = focusNodes.length
+            const map: { [key: number]: { nodes: KNode[]; code: KNode } } = {}
+            for (let i = 0; i < length; i++) {
+              const codeNode = focusNodes[i].getMatchNode({ tag: 'code' })!
+              const index = codeNode.children!.findIndex(item => item.isEqual(focusNodes[i]))
+              codeNode.children!.splice(index, 1)
+              //是起点所在的行内代码并且起点不在行内代码的起始处
+              if (codeNode.isEqual(startCodeNode) && !(firstStartSelectionNode.isEqual(startNode) && startOffset == 0)) {
+                if (map[codeNode.key]) {
+                  map[codeNode.key].nodes.push(focusNodes[i])
+                } else {
+                  map[codeNode.key] = {
+                    code: codeNode,
+                    nodes: [focusNodes[i]]
+                  }
+                }
+              }
+              //其他
+              else {
+                this.addNodeBefore(focusNodes[i], codeNode)
+              }
+            }
+            Object.values(map).forEach(item => {
+              item.nodes.reverse().forEach(node => {
+                this.addNodeAfter(node, item.code)
+              })
+            })
+          }
+        }
+        await this.updateView()
+      }
+
+      return {
+        getCode,
+        hasCode,
+        allCode,
+        setCode,
+        unsetCode
+      }
+    }
+  })

package/src/extensions/code/style.less

@@ -0,0 +1,14 @@
+.Kaitify code {
+	display: inline-block;
+	padding: 2px 4px;
+	margin: 0 var(--kaitify-sides-between);
+	border-radius: var(--kaitify-border-radius);
+	font-family: Consolas, monospace, Monaco, Andale Mono, Ubuntu Mono;
+	background: #f6f9ff;
+	border: 1px solid var(--kaitify-border-color);
+	color: var(--kaitify-font-color);
+}
+
+:root[kaitify-dark] .Kaitify code {
+	background: #29292d;
+}

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

@@ -0,0 +1,183 @@
+/**
+ * 这里是对highlight的主题样式的自定义设置
+ */
+
+.Kaitify pre {
+	.kaitify-hljs-doctag,
+	.kaitify-hljs-keyword,
+	.kaitify-hljs-meta .kaitify-hljs-keyword,
+	.kaitify-hljs-template-tag,
+	.kaitify-hljs-template-variable,
+	.kaitify-hljs-type,
+	.kaitify-hljs-variable.language_ {
+		/* prettylights-syntax-keyword */
+		color: #d73a49;
+	}
+	.kaitify-hljs-title,
+	.kaitify-hljs-title.class_,
+	.kaitify-hljs-title.class_.inherited__,
+	.kaitify-hljs-title.function_ {
+		/* prettylights-syntax-entity */
+		color: #6f42c1;
+	}
+	.kaitify-hljs-attr,
+	.kaitify-hljs-attribute,
+	.kaitify-hljs-literal,
+	.kaitify-hljs-meta,
+	.kaitify-hljs-number,
+	.kaitify-hljs-operator,
+	.kaitify-hljs-variable,
+	.kaitify-hljs-selector-attr,
+	.kaitify-hljs-selector-class,
+	.kaitify-hljs-selector-id {
+		/* prettylights-syntax-constant */
+		color: #005cc5;
+	}
+	.kaitify-hljs-regexp,
+	.kaitify-hljs-string,
+	.kaitify-hljs-meta .hljs-string {
+		/* prettylights-syntax-string */
+		color: #032f62;
+	}
+	.kaitify-hljs-built_in,
+	.kaitify-hljs-symbol {
+		/* prettylights-syntax-variable */
+		color: #e36209;
+	}
+	.kaitify-hljs-comment,
+	.kaitify-hljs-code,
+	.kaitify-hljs-formula {
+		/* prettylights-syntax-comment */
+		color: #6a737d;
+	}
+	.kaitify-hljs-name,
+	.kaitify-hljs-quote,
+	.kaitify-hljs-selector-tag,
+	.kaitify-hljs-selector-pseudo {
+		/* prettylights-syntax-entity-tag */
+		color: #22863a;
+	}
+	.kaitify-hljs-subst {
+		/* prettylights-syntax-storage-modifier-import */
+		color: #24292e;
+	}
+	.kaitify-hljs-section {
+		/* prettylights-syntax-markup-heading */
+		color: #005cc5;
+		font-weight: bold;
+	}
+	.kaitify-hljs-bullet {
+		/* prettylights-syntax-markup-list */
+		color: #735c0f;
+	}
+	.kaitify-hljs-emphasis {
+		/* prettylights-syntax-markup-italic */
+		color: #24292e;
+		font-style: italic;
+	}
+	.kaitify-hljs-strong {
+		/* prettylights-syntax-markup-bold */
+		color: #24292e;
+		font-weight: bold;
+	}
+	.kaitify-hljs-addition {
+		/* prettylights-syntax-markup-inserted */
+		color: #22863a;
+		background-color: #f0fff4;
+	}
+	.kaitify-hljs-deletion {
+		/* prettylights-syntax-markup-deleted */
+		color: #b31d28;
+		background-color: #ffeef0;
+	}
+}
+
+:root[kaitify-dark] .Kaitify pre {
+	.kaitify-hljs-doctag,
+	.kaitify-hljs-keyword,
+	.kaitify-hljs-meta .kaitify-hljs-keyword,
+	.kaitify-hljs-template-tag,
+	.kaitify-hljs-template-variable,
+	.kaitify-hljs-type,
+	.kaitify-hljs-variable.language_ {
+		/* prettylights-syntax-keyword */
+		color: #ff7b72;
+	}
+	.kaitify-hljs-title,
+	.kaitify-hljs-title.class_,
+	.kaitify-hljs-title.class_.inherited__,
+	.kaitify-hljs-title.function_ {
+		/* prettylights-syntax-entity */
+		color: #d2a8ff;
+	}
+	.kaitify-hljs-attr,
+	.kaitify-hljs-attribute,
+	.kaitify-hljs-literal,
+	.kaitify-hljs-meta,
+	.kaitify-hljs-number,
+	.kaitify-hljs-operator,
+	.kaitify-hljs-variable,
+	.kaitify-hljs-selector-attr,
+	.kaitify-hljs-selector-class,
+	.kaitify-hljs-selector-id {
+		/* prettylights-syntax-constant */
+		color: #79c0ff;
+	}
+	.kaitify-hljs-regexp,
+	.kaitify-hljs-string,
+	.kaitify-hljs-meta .kaitify-hljs-string {
+		/* prettylights-syntax-string */
+		color: #a5d6ff;
+	}
+	.kaitify-hljs-built_in,
+	.kaitify-hljs-symbol {
+		/* prettylights-syntax-variable */
+		color: #ffa657;
+	}
+	.kaitify-hljs-comment,
+	.kaitify-hljs-code,
+	.kaitify-hljs-formula {
+		/* prettylights-syntax-comment */
+		color: #8b949e;
+	}
+	.kaitify-hljs-name,
+	.kaitify-hljs-quote,
+	.kaitify-hljs-selector-tag,
+	.kaitify-hljs-selector-pseudo {
+		/* prettylights-syntax-entity-tag */
+		color: #7ee787;
+	}
+	.kaitify-hljs-subst {
+		/* prettylights-syntax-storage-modifier-import */
+		color: #c9d1d9;
+	}
+	.kaitify-hljs-section {
+		/* prettylights-syntax-markup-heading */
+		color: #1f6feb;
+		font-weight: bold;
+	}
+	.kaitify-hljs-bullet {
+		/* prettylights-syntax-markup-list */
+		color: #f2cc60;
+	}
+	.kaitify-hljs-emphasis {
+		/* prettylights-syntax-markup-italic */
+		color: #c9d1d9;
+		font-style: italic;
+	}
+	.kaitify-hljs-strong {
+		/* prettylights-syntax-markup-bold */
+		color: #c9d1d9;
+		font-weight: bold;
+	}
+	.kaitify-hljs-addition {
+		/* prettylights-syntax-markup-inserted */
+		color: #aff5b4;
+		background-color: #033a16;
+	}
+	.kaitify-hljs-deletion {
+		/* prettylights-syntax-markup-deleted */
+		color: #ffdcd7;
+		background-color: #67060c;
+	}
+}

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

@@ -0,0 +1,95 @@
+//引入核心库
+import hljs from 'highlight.js/lib/core'
+//引入语言支持
+import plaintext from 'highlight.js/lib/languages/plaintext'
+import json from 'highlight.js/lib/languages/json'
+import javascript from 'highlight.js/lib/languages/javascript'
+import java from 'highlight.js/lib/languages/java'
+import typescript from 'highlight.js/lib/languages/typescript'
+import python from 'highlight.js/lib/languages/python'
+import php from 'highlight.js/lib/languages/php'
+import css from 'highlight.js/lib/languages/css'
+import less from 'highlight.js/lib/languages/less'
+import scss from 'highlight.js/lib/languages/scss'
+import html from 'highlight.js/lib/languages/xml'
+import markdown from 'highlight.js/lib/languages/markdown'
+import objectivec from 'highlight.js/lib/languages/objectivec'
+import swift from 'highlight.js/lib/languages/swift'
+import dart from 'highlight.js/lib/languages/dart'
+import nginx from 'highlight.js/lib/languages/nginx'
+import go from 'highlight.js/lib/languages/go'
+import http from 'highlight.js/lib/languages/http'
+import ruby from 'highlight.js/lib/languages/ruby'
+import c from 'highlight.js/lib/languages/c'
+import cpp from 'highlight.js/lib/languages/cpp'
+import csharp from 'highlight.js/lib/languages/csharp'
+import sql from 'highlight.js/lib/languages/sql'
+import shell from 'highlight.js/lib/languages/shell'
+import r from 'highlight.js/lib/languages/r'
+import kotlin from 'highlight.js/lib/languages/kotlin'
+import rust from 'highlight.js/lib/languages/rust'
+//引入css样式主题
+import './hljs.less'
+//import 'highlight.js/styles/github.css'
+//import 'highlight.js/styles/atom-one-light.css'
+//import 'highlight.js/styles/lightfair.css'
+//import 'highlight.js/styles/color-brewer.css'
+
+//注册语言
+hljs.registerLanguage('plaintext', plaintext)
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('java', java)
+hljs.registerLanguage('typescript', typescript)
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('php', php)
+hljs.registerLanguage('css', css)
+hljs.registerLanguage('less', less)
+hljs.registerLanguage('scss', scss)
+hljs.registerLanguage('html', html)
+hljs.registerLanguage('markdown', markdown)
+hljs.registerLanguage('objectivec', objectivec)
+hljs.registerLanguage('swift', swift)
+hljs.registerLanguage('dart', dart)
+hljs.registerLanguage('nginx', nginx)
+hljs.registerLanguage('go', go)
+hljs.registerLanguage('http', http)
+hljs.registerLanguage('ruby', ruby)
+hljs.registerLanguage('c', c)
+hljs.registerLanguage('cpp', cpp)
+hljs.registerLanguage('csharp', csharp)
+hljs.registerLanguage('sql', sql)
+hljs.registerLanguage('shell', shell)
+hljs.registerLanguage('r', r)
+hljs.registerLanguage('kotlin', kotlin)
+hljs.registerLanguage('rust', rust)
+
+/**
+ * 支持的语言列表
+ */
+export const HljsLanguages = ['plaintext', 'json', 'javascript', 'java', 'typescript', 'python', 'php', 'css', 'less', 'scss', 'html', 'markdown', 'objectivec', 'swift', 'dart', 'nginx', 'http', 'go', 'ruby', 'c', 'cpp', 'csharp', 'sql', 'shell', 'r', 'kotlin', 'rust'] as const
+
+//全局设置
+hljs.configure({
+	cssSelector: 'pre',
+	classPrefix: 'kaitify-hljs-',
+	languages: [...HljsLanguages],
+	ignoreUnescapedHTML: true
+})
+
+/**
+ * 语言类型
+ */
+export type HljsLanguageType = (typeof HljsLanguages)[number]
+/**
+ * 获取经过hljs处理的html元素
+ */
+export const getHljsHtml = function (code: string, language: string) {
+	if (language) {
+		return hljs.highlight(code, {
+			language: language,
+			ignoreIllegals: true
+		}).value
+	}
+	return hljs.highlightAuto(code).value
+}