@kaitify/core 0.0.1-beta.1

package/src/extensions/line-height/index.ts

@@ -0,0 +1,113 @@
+import { KNode, KNodeStylesType } from '@/model'
+import { getSelectionBlockNodes } from '@/model/config/function'
+import { deleteProperty } from '@/tools'
+import { Extension } from '../Extension'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    isLineHeight?: (value: string | number) => boolean
+    setLineHeight?: (value: string | number) => Promise<void>
+    unsetLineHeight?: (value: string | number) => Promise<void>
+  }
+}
+
+/**
+ * 删除指定块节点及以上块节点的行高样式
+ */
+const clearLineHeight = (blockNode: KNode, value: string | number) => {
+  const matchNode = blockNode.getMatchNode({ styles: { lineHeight: value } })
+  if (matchNode) {
+    matchNode.styles = deleteProperty(matchNode.styles!, 'lineHeight')
+    clearLineHeight(matchNode, value)
+  }
+}
+
+export const LineHeightExtension = () =>
+  Extension.create({
+    name: 'lineHeight',
+    pasteKeepStyles(node) {
+      const styles: KNodeStylesType = {}
+      if (node.isBlock() && node.hasStyles()) {
+        if (node.styles!.hasOwnProperty('lineHeight')) styles.lineHeight = node.styles!.lineHeight
+      }
+      return styles
+    },
+    addCommands() {
+      /**
+       * 光标所在的块节点是否都是符合的行高
+       */
+      const isLineHeight = (value: string | number) => {
+        if (!this.selection.focused()) {
+          return false
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const block = this.selection.start!.node.getBlock()
+          return !!block.getMatchNode({ styles: { lineHeight: value } })
+        }
+        //起点和终点不在一起
+        const blockNodes = getSelectionBlockNodes.apply(this)
+        return blockNodes.every(item => {
+          return !!item.getMatchNode({ styles: { lineHeight: value } })
+        })
+      }
+
+      /**
+       * 设置行高
+       */
+      const setLineHeight = async (value: string | number) => {
+        if (isLineHeight(value)) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const blockNode = this.selection.start!.node.getBlock()
+          const styles: KNodeStylesType = blockNode.hasStyles() ? blockNode.styles! : {}
+          blockNode.styles = {
+            ...styles,
+            lineHeight: value
+          }
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            const styles: KNodeStylesType = item.hasStyles() ? item.styles! : {}
+            item.styles = {
+              ...styles,
+              lineHeight: value
+            }
+          })
+        }
+        await this.updateView()
+      }
+
+      /**
+       * 取消行高
+       */
+      const unsetLineHeight = async (value: string | number) => {
+        if (!isLineHeight(value)) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const blockNode = this.selection.start!.node.getBlock()
+          clearLineHeight(blockNode, value)
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            clearLineHeight(item, value)
+          })
+        }
+        await this.updateView()
+      }
+
+      return {
+        isLineHeight,
+        setLineHeight,
+        unsetLineHeight
+      }
+    }
+  })

package/src/extensions/link/index.ts

@@ -0,0 +1,184 @@
+import { KNode, KNodeMarksType } from '@/model'
+import { splitNodeToNodes } from '@/model/config/function'
+import { Extension } from '../Extension'
+import './style.less'
+import { deleteProperty } from '@/tools'
+
+/**
+ * 插入链接方法入参类型
+ */
+export type SetLinkOptionType = {
+  href: string
+  text?: string
+  newOpen?: boolean
+}
+
+/**
+ * 更新链接方法入参类型
+ */
+export type UpdateLinkOptionType = {
+  href?: string
+  newOpen?: boolean
+}
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    getLink?: () => KNode | null
+    hasLink?: () => boolean
+    setLink?: (options: SetLinkOptionType) => Promise<void>
+    updateLink?: (options: UpdateLinkOptionType) => Promise<void>
+    unsetLink?: () => Promise<void>
+  }
+}
+
+export const LinkExtension = () =>
+  Extension.create({
+    name: 'link',
+    extraKeepTags: ['a'],
+    domParseNodeCallback(node) {
+      if (node.isMatch({ tag: 'a' })) {
+        node.type = 'inline'
+      }
+      return node
+    },
+    pasteKeepMarks(node) {
+      const marks: KNodeMarksType = {}
+      if (node.isMatch({ tag: 'a' }) && node.hasMarks()) {
+        if (node.marks!.hasOwnProperty('href')) marks['href'] = node.marks!['href']
+        if (node.marks!.hasOwnProperty('target')) marks['target'] = node.marks!['target']
+      }
+      return marks
+    },
+    formatRules: [
+      ({ editor, node }) => {
+        //链接只能是行内节点且只能有文本节点和闭合节点
+        if (node.isMatch({ tag: 'a' }) && node.hasChildren()) {
+          node.type = 'inline'
+          node.children!.forEach(item => {
+            splitNodeToNodes.apply(editor, [item])
+          })
+        }
+      }
+    ],
+    addCommands() {
+      /**
+       * 获取光标所在的链接，如果光标不在一个链接内，返回null
+       */
+      const getLink = () => {
+        return this.getMatchNodeBySelection({ tag: 'a' })
+      }
+
+      /**
+       * 判断光标范围内是否有链接
+       */
+      const hasLink = () => {
+        return this.isSelectionNodesSomeMatch({
+          tag: 'a'
+        })
+      }
+
+      /**
+       * 设置连接
+       */
+      const setLink = async (options: SetLinkOptionType) => {
+        if (!this.selection.focused() || hasLink()) {
+          return
+        }
+        if (!options.href) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          if (!options.text) {
+            return
+          }
+          const marks: KNodeMarksType = {
+            href: options.href
+          }
+          if (options.newOpen) {
+            marks.target = '_blank'
+          }
+          const linkNode = KNode.create({
+            type: 'inline',
+            tag: 'a',
+            marks,
+            children: [
+              {
+                type: 'text',
+                textContent: options.text
+              }
+            ]
+          })
+          this.insertNode(linkNode)
+        }
+        //起点和终点不在一起
+        else {
+          const marks: KNodeMarksType = {
+            href: options.href
+          }
+          if (options.newOpen) {
+            marks.target = '_blank'
+          }
+          const linkNode = KNode.create({
+            type: 'inline',
+            tag: 'a',
+            marks,
+            children: []
+          })
+          this.getFocusSplitNodesBySelection('all').forEach((item, index) => {
+            const newNode = item.clone(true)
+            this.addNode(newNode, linkNode, index)
+          })
+          this.insertNode(linkNode)
+        }
+        await this.updateView()
+      }
+
+      /**
+       * 更新链接
+       */
+      const updateLink = async (options: UpdateLinkOptionType) => {
+        if (!this.selection.focused()) {
+          return
+        }
+        if (!options.href && typeof options.newOpen != 'boolean') {
+          return
+        }
+        const linkNode = getLink()
+        if (!linkNode) {
+          return
+        }
+        if (options.href) {
+          linkNode.marks!.href = options.href
+        }
+        if (typeof options.newOpen == 'boolean') {
+          if (options.newOpen) {
+            linkNode.marks!.target = '_blank'
+          } else {
+            linkNode.marks = deleteProperty(linkNode.marks!, 'target')
+          }
+        }
+        await this.updateView()
+      }
+
+      /**
+       * 取消链接
+       */
+      const unsetLink = async () => {
+        if (!this.selection.focused()) {
+          return
+        }
+        const linkNode = getLink()
+        if (!linkNode) {
+          return
+        }
+        linkNode.children!.forEach(item => {
+          this.addNodeBefore(item, linkNode)
+        })
+        linkNode.children = []
+        await this.updateView()
+      }
+
+      return { getLink, hasLink, setLink, updateLink, unsetLink }
+    }
+  })

package/src/extensions/link/style.less

@@ -0,0 +1,19 @@
+.Kaitify {
+  a {
+    color: #06c27c;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  //非编辑状态下
+  &:not([contenteditable='true']) {
+    a {
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}