@kaitify/core 0.0.1-beta.1

package/src/extensions/attachment/index.ts

@@ -0,0 +1,293 @@
+import { event as DapEvent } from 'dap-util'
+import { Editor, KNode, KNodeMarksType, KNodeStylesType } from '@/model'
+import { Extension } from '../Extension'
+import defaultIcon from './icon.svg?raw'
+import './style.less'
+
+export type SetAttachmentOptionType = {
+  url: string
+  text: string
+  icon?: string
+}
+
+export type UpdateAttachmentOptionType = {
+  url?: string
+  text?: string
+  icon?: string
+}
+
+export type AttachmentExtensionPropsType = {
+  icon: string
+}
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    getAttachment?: () => KNode | null
+    hasAttachment?: () => boolean
+    setAttachment?: (options: SetAttachmentOptionType) => Promise<void>
+    updateAttachment?: (options: UpdateAttachmentOptionType) => Promise<void>
+    getAttachmentInfo?: () => { url: string; text: string; icon: string } | null
+  }
+}
+
+/**
+ * 下载附件
+ */
+const downloadAttachment = (editor: Editor) => {
+  DapEvent.off(editor.$el!, 'click.attachment')
+  DapEvent.on(editor.$el!, 'click.attachment', async e => {
+    //可编辑状态下无法下载
+    if (editor.isEditable()) {
+      return
+    }
+    const event = e as MouseEvent
+    const elm = event.target as HTMLElement
+    if (elm === editor.$el) {
+      return
+    }
+    const node = editor.findNode(elm)
+    const matchNode = node.getMatchNode({
+      tag: 'span',
+      marks: {
+        'kaitify-attachment': true
+      }
+    })
+    //点击的是附件
+    if (matchNode) {
+      //获取文件地址
+      const url = matchNode.marks!['kaitify-attachment'] as string
+      //使用fetch读取文件地址
+      const res = await fetch(url, {
+        method: 'GET'
+      })
+      //获取blob数据
+      const blob = await res.blob()
+      //创建a标签进行下载
+      const a = document.createElement('a')
+      a.setAttribute('target', '_blank')
+      a.setAttribute('href', URL.createObjectURL(blob))
+      a.setAttribute(
+        'download',
+        matchNode.children!.reduce((val, item) => {
+          return val + item.textContent
+        }, '')
+      )
+      a.click()
+    }
+  })
+}
+
+export const AttachmentExtension = (props?: AttachmentExtensionPropsType) =>
+  Extension.create({
+    name: 'attachment',
+    pasteKeepStyles(node) {
+      const styles: KNodeStylesType = {}
+      if (node.isMatch({ tag: 'span', marks: { 'kaitify-attachment': true } })) {
+        styles.backgroundImage = node.styles!.backgroundImage
+      }
+      return styles
+    },
+    pasteKeepMarks(node) {
+      const marks: KNodeMarksType = {}
+      if (node.isMatch({ tag: 'span', marks: { 'kaitify-attachment': true } })) {
+        marks['kaitify-attachment'] = node.marks!['kaitify-attachment']
+      }
+      return marks
+    },
+    domParseNodeCallback(node) {
+      if (node.isMatch({ tag: 'span', marks: { 'kaitify-attachment': true } })) {
+        //锁定节点
+        node.locked = true
+        //设为行内
+        node.type = 'inline'
+        //处理子孙节点
+        KNode.flat(node.children!).forEach(item => {
+          //锁定节点
+          item.locked = true
+          //非文本节点
+          if (!item.isText()) {
+            //有子节点转为行内
+            if (item.hasChildren()) {
+              item.type = 'inline'
+            }
+            //无子节点转为闭合
+            else {
+              item.type = 'closed'
+            }
+          }
+        })
+      }
+      return node
+    },
+    formatRules: [
+      ({ editor, node }) => {
+        if (
+          !node.isEmpty() &&
+          node.isMatch({
+            tag: 'span',
+            marks: {
+              'kaitify-attachment': true
+            }
+          })
+        ) {
+          //附件节点必须是锁定的
+          node.locked = true
+          //附件节点必须行内
+          node.type = 'inline'
+          //保持子孙节点的类型
+          KNode.flat(node.children!).forEach(item => {
+            //锁定节点
+            item.locked = true
+            //非文本节点
+            if (!item.isText()) {
+              //有子节点转为行内
+              if (item.hasChildren()) {
+                item.type = 'inline'
+              }
+              //无子节点转为闭合
+              else {
+                item.type = 'closed'
+              }
+            }
+          })
+          //没有不可编辑标记的话需要设置
+          if (node.marks!['contenteditable'] != 'false') {
+            node.marks!['contenteditable'] = 'false'
+          }
+          //两侧设置空白元素
+          const previousNode = node.getPrevious(node.parent ? node.parent!.children! : editor.stackNodes)
+          const nextNode = node.getNext(node.parent ? node.parent!.children! : editor.stackNodes)
+          //前一个节点不存在或者不是零宽度空白文本节点
+          if (!previousNode || !previousNode.isZeroWidthText()) {
+            const zeroWidthText = KNode.createZeroWidthText()
+            editor.addNodeBefore(zeroWidthText, node)
+          }
+          //后一个节点不存在或者不是零宽度空白文本节点
+          if (!nextNode || !nextNode.isZeroWidthText()) {
+            const zeroWidthText = KNode.createZeroWidthText()
+            editor.addNodeAfter(zeroWidthText, node)
+          }
+          //重置光标
+          if (editor.isSelectionInNode(node, 'start')) {
+            const newTextNode = node.getNext(node.parent ? node.parent!.children! : editor.stackNodes)
+            if (newTextNode) editor.setSelectionBefore(newTextNode, 'start')
+          }
+          if (editor.isSelectionInNode(node, 'end')) {
+            const newTextNode = node.getNext(node.parent ? node.parent!.children! : editor.stackNodes)
+            if (newTextNode) editor.setSelectionBefore(newTextNode, 'end')
+          }
+        }
+      }
+    ],
+    afterUpdateView() {
+      //下载附件
+      downloadAttachment(this)
+    },
+    addCommands() {
+      /**
+       * 获取光标所在的附件节点，如果光标不在一个附件节点内，返回null
+       */
+      const getAttachment = () => {
+        return this.getMatchNodeBySelection({
+          tag: 'span',
+          marks: {
+            'kaitify-attachment': true
+          }
+        })
+      }
+
+      /**
+       * 判断光标范围内是否有附件节点
+       */
+      const hasAttachment = () => {
+        return this.isSelectionNodesSomeMatch({
+          tag: 'span',
+          marks: {
+            'kaitify-attachment': true
+          }
+        })
+      }
+
+      /**
+       * 插入附件
+       */
+      const setAttachment = async (options: SetAttachmentOptionType) => {
+        if (!this.selection.focused() || hasAttachment()) {
+          return
+        }
+        if (!options.url || !options.text) {
+          return
+        }
+        const defaultIconBase64 = `data:image/svg+xml;base64,${btoa(defaultIcon)}`
+        //设置html内容
+        const html = `<span kaitify-attachment="${options.url}" contenteditable="false" style="background-image:url(${options.icon || props?.icon || defaultIconBase64})"><span>${options.text}</span></span>`
+        //html内容转为节点数组
+        const nodes = this.htmlParseNode(html)
+        //插入节点
+        this.insertNode(nodes[0])
+        //更新视图
+        await this.updateView()
+      }
+
+      /**
+       * 更新附件
+       */
+      const updateAttachment = async (options: UpdateAttachmentOptionType) => {
+        if (!this.selection.focused()) {
+          return
+        }
+        if (!options.url && !options.text && !options.icon) {
+          return
+        }
+        const attachmentNode = getAttachment()
+        if (!attachmentNode) {
+          return
+        }
+        //更新url
+        if (options.url) {
+          attachmentNode.marks!['kaitify-attachment'] = options.url
+        }
+        //更新text
+        if (options.text) {
+          const textNode = KNode.create({
+            type: 'text',
+            textContent: options.text
+          })
+          textNode.parent = attachmentNode
+          attachmentNode.children = [textNode]
+        }
+        if (options.icon) {
+          attachmentNode.styles!['backgroundImage'] = `url(${options.icon})`
+        }
+        //更新视图
+        await this.updateView()
+      }
+
+      /**
+       * 获取附件信息
+       */
+      const getAttachmentInfo = () => {
+        if (!this.selection.focused()) {
+          return null
+        }
+        const attachmentNode = getAttachment()
+        if (!attachmentNode) {
+          return null
+        }
+        const url = attachmentNode.marks!['kaitify-attachment'] as string
+        const text = attachmentNode.children!.reduce((val, item) => {
+          return val + item.textContent
+        }, '')
+        const icon = attachmentNode.styles!['backgroundImage']!.match(/url\(["']?(.*?)["']?\)/)?.[1]!
+        return { url, text, icon }
+      }
+
+      return {
+        getAttachment,
+        hasAttachment,
+        setAttachment,
+        updateAttachment,
+        getAttachmentInfo
+      }
+    }
+  })

package/src/extensions/attachment/style.less

@@ -0,0 +1,25 @@
+.Kaitify {
+  span[kaitify-attachment] {
+    display: inline-flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 0 var(--kaitify-sides-between);
+    color: #06c27c;
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-size: 20px;
+    padding-left: 25px;
+
+    &:hover {
+      cursor: pointer !important;
+    }
+  }
+
+  //非编辑状态下
+  &:not([contenteditable='true']) {
+    span[kaitify-attachment]:hover {
+      text-decoration: underline;
+    }
+  }
+}

package/src/extensions/back-color/index.ts

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

package/src/extensions/blockquote/index.ts

@@ -0,0 +1,144 @@
+import { Editor, KNode } from '@/model'
+import { getSelectionBlockNodes } from '@/model/config/function'
+import { Extension } from '../Extension'
+import './style.less'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    getBlockquote?: () => KNode | null
+    hasBlockquote?: () => boolean
+    allBlockquote?: () => boolean
+    setBlockquote?: () => Promise<void>
+    unsetBlockquote?: () => Promise<void>
+  }
+}
+
+/**
+ * 块节点转为引用
+ */
+const toBlockquote = (editor: Editor, node: KNode) => {
+  if (!node.isBlock()) {
+    return
+  }
+  //是固定的块节点或者内嵌套的块节点
+  if (node.fixed || node.nested) {
+    //创建引用节点
+    const blockquoteNode = KNode.create({
+      type: 'block',
+      tag: 'blockquote',
+      children: []
+    })
+    //将块节点的子节点给引用节点
+    node.children!.forEach((item, index) => {
+      editor.addNode(item, blockquoteNode, index)
+    })
+    //将引用节点添加到块节点下
+    blockquoteNode.parent = node
+    node.children = [blockquoteNode]
+  }
+  //非固定块节点
+  else {
+    editor.toParagraph(node)
+    node.tag = 'blockquote'
+  }
+}
+
+export const BlockquoteExtension = () =>
+  Extension.create({
+    name: 'blockquote',
+    extraKeepTags: ['blockquote'],
+    domParseNodeCallback(node) {
+      if (node.isMatch({ tag: 'blockquote' })) {
+        node.type = 'block'
+      }
+      return node
+    },
+    formatRules: [
+      ({ node }) => {
+        if (node.isMatch({ tag: 'blockquote' })) {
+          node.type = 'block'
+        }
+      }
+    ],
+    addCommands() {
+      /**
+       * 获取光标所在的引用节点，如果光标不在一个引用节点内，返回null
+       */
+      const getBlockquote = () => {
+        return this.getMatchNodeBySelection({
+          tag: 'blockquote'
+        })
+      }
+
+      /**
+       * 判断光标范围内是否有引用节点
+       */
+      const hasBlockquote = () => {
+        return this.isSelectionNodesSomeMatch({
+          tag: 'blockquote'
+        })
+      }
+
+      /**
+       * 光标范围内是否都是引用节点
+       */
+      const allBlockquote = () => {
+        return this.isSelectionNodesAllMatch({
+          tag: 'blockquote'
+        })
+      }
+
+      /**
+       * 设置引用
+       */
+      const setBlockquote = async () => {
+        if (allBlockquote()) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const blockNode = this.selection.start!.node.getBlock()
+          toBlockquote(this, blockNode)
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            toBlockquote(this, item)
+          })
+        }
+        await this.updateView()
+      }
+
+      /**
+       * 取消引用
+       */
+      const unsetBlockquote = async () => {
+        if (!allBlockquote()) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const matchNode = this.selection.start!.node.getMatchNode({ tag: 'blockquote' })
+          if (matchNode) this.toParagraph(matchNode)
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            const matchNode = item.getMatchNode({ tag: 'blockquote' })
+            if (matchNode) this.toParagraph(matchNode)
+          })
+        }
+        await this.updateView()
+      }
+
+      return {
+        getBlockquote,
+        hasBlockquote,
+        allBlockquote,
+        setBlockquote,
+        unsetBlockquote
+      }
+    }
+  })

package/src/extensions/blockquote/style.less

@@ -0,0 +1,16 @@
+.Kaitify blockquote {
+  line-height: var(--kaitify-line-height);
+  margin: 0 0 var(--kaitify-large-margin) 0 !important;
+  padding: 0 0 0 var(--kaitify-large-padding);
+  border-left: 6px solid fade(#000, 10);
+  color: #666;
+
+  &:last-child {
+    margin-bottom: 0 !important;
+  }
+}
+
+:root[kaitify-dark] .Kaitify blockquote {
+  color: fade(#fff, 90);
+  border-left-color: fade(#fff, 30);
+}

package/src/extensions/bold/index.ts

@@ -0,0 +1,77 @@
+import { KNodeStylesType } from '@/model'
+import { splitNodeToNodes } from '@/model/config/function'
+import { Extension } from '../Extension'
+
+declare module '../../model' {
+	interface EditorCommandsType {
+		isBold?: () => boolean
+		setBold?: () => Promise<void>
+		unsetBold?: () => Promise<void>
+	}
+}
+
+export const BoldExtension = () =>
+	Extension.create({
+		name: 'bold',
+		extraKeepTags: ['b', 'strong'],
+		domParseNodeCallback(node) {
+			if (node.isMatch({ tag: 'b' }) || node.isMatch({ tag: 'strong' })) {
+				node.type = 'inline'
+			}
+			return node
+		},
+		pasteKeepStyles(node) {
+			const styles: KNodeStylesType = {}
+			if (node.isText() && node.hasStyles()) {
+				if (node.styles!.hasOwnProperty('fontWeight')) styles.fontWeight = node.styles!.fontWeight
+			}
+			return styles
+		},
+		formatRules: [
+			({ editor, node }) => {
+				if (!node.isEmpty() && (node.isMatch({ tag: 'b' }) || node.isMatch({ tag: 'strong' }))) {
+					const styles: KNodeStylesType = node.styles || {}
+					node.styles = {
+						...styles,
+						fontWeight: 'bold'
+					}
+					node.tag = editor.textRenderTag
+					splitNodeToNodes.apply(editor, [node])
+				}
+			}
+		],
+		addCommands() {
+			/**
+			 * 光标所在文本是否加粗
+			 */
+			const isBold = () => {
+				return this.commands.isTextStyle!('fontWeight', 'bold') || this.commands.isTextStyle!('fontWeight', 'bolder') || this.commands.isTextStyle!('fontWeight', '700') || this.commands.isTextStyle!('fontWeight', '800') || this.commands.isTextStyle!('fontWeight', '900')
+			}
+			/**
+			 * 设置加粗
+			 */
+			const setBold = async () => {
+				if (isBold()) {
+					return
+				}
+				await this.commands.setTextStyle!({
+					fontWeight: 'bold'
+				})
+			}
+			/**
+			 * 取消加粗
+			 */
+			const unsetBold = async () => {
+				if (!isBold()) {
+					return
+				}
+				await this.commands.removeTextStyle!(['fontWeight'])
+			}
+
+			return {
+				isBold,
+				setBold,
+				unsetBold
+			}
+		}
+	})