@kaitify/core 0.0.1-beta.1

package/src/extensions/text/index.ts

@@ -0,0 +1,359 @@
+import { common as DapCommon, string as DapString, color as DapColor } from 'dap-util'
+import { KNode, KNodeMarksType, KNodeStylesType } from '@/model'
+import { Extension } from '../Extension'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    isTextStyle?: (styleName: string, styleValue?: string | number) => boolean
+    isTextMark?: (markName: string, markValue?: string | number) => boolean
+    setTextStyle?: (styles: KNodeStylesType, updateView?: boolean) => Promise<void>
+    setTextMark?: (marks: KNodeMarksType, updateView?: boolean) => Promise<void>
+    removeTextStyle?: (styleNames?: string[], updateView?: boolean) => Promise<void>
+    removeTextMark?: (markNames?: string[], updateView?: boolean) => Promise<void>
+    clearFormat?: () => Promise<void>
+  }
+}
+
+/**
+ * 移除单个文本节点的标记
+ */
+const removeTextNodeMarks = (node: KNode, markNames?: string[]) => {
+  //删除指定标记
+  if (markNames && node.hasMarks()) {
+    const marks: KNodeMarksType = {}
+    Object.keys(node.marks!).forEach(key => {
+      if (!markNames.includes(key)) {
+        marks[key] = node.marks![key]
+      }
+    })
+    node.marks = marks
+  }
+  //删除所有的标记
+  else {
+    node.marks = {}
+  }
+}
+
+/**
+ * 移除单个文本节点的样式
+ */
+const removeTextNodeStyles = (node: KNode, styleNames?: string[]) => {
+  //删除指定样式
+  if (styleNames && node.hasStyles()) {
+    const styles: KNodeStylesType = {}
+    Object.keys(node.styles!).forEach(key => {
+      if (!styleNames.includes(key)) {
+        styles[key] = node.styles![key]
+      }
+    })
+    node.styles = styles
+  }
+  //删除所有的样式
+  else {
+    node.styles = {}
+  }
+}
+
+/**
+ * 判断单个文本节点是否拥有某个标记
+ */
+const isTextNodeMark = (node: KNode, markName: string, markValue?: string | number) => {
+  if (node.hasMarks()) {
+    if (markValue === undefined) {
+      return node.marks!.hasOwnProperty(markName)
+    }
+    return node.marks![markName] == markValue
+  }
+  return false
+}
+
+/**
+ * 判断单个文本节点是否拥有某个样式
+ */
+const isTextNodeStyle = (node: KNode, styleName: string, styleValue?: string | number) => {
+  if (node.hasStyles()) {
+    if (styleValue === undefined) {
+      return node.styles!.hasOwnProperty(styleName)
+    }
+    let ownValue = node.styles![styleName]
+    //是字符串先将值转为小写
+    if (typeof styleValue == 'string') {
+      styleValue = styleValue.toLocaleLowerCase()
+    }
+    if (typeof ownValue == 'string') {
+      ownValue = ownValue.toLocaleLowerCase()
+    }
+    //是rgb或者rgba格式，则去除空格
+    if (typeof styleValue == 'string' && styleValue && (DapCommon.matchingText(styleValue, 'rgb') || DapCommon.matchingText(styleValue, 'rgba'))) {
+      styleValue = DapString.trim(styleValue, true)
+    }
+    if (typeof ownValue == 'string' && ownValue && (DapCommon.matchingText(ownValue, 'rgb') || DapCommon.matchingText(ownValue, 'rgba'))) {
+      ownValue = DapString.trim(ownValue, true)
+    }
+    //是十六进制值，转为rgb值
+    if (typeof styleValue == 'string' && styleValue && DapCommon.matchingText(styleValue, 'hex')) {
+      const arr = DapColor.hex2rgb(styleValue)
+      styleValue = `rgb(${arr[0]},${arr[1]},${arr[2]})`
+    }
+    if (typeof ownValue == 'string' && ownValue && DapCommon.matchingText(ownValue, 'hex')) {
+      const arr = DapColor.hex2rgb(ownValue)
+      ownValue = `rgb(${arr[0]},${arr[1]},${arr[2]})`
+    }
+    return ownValue == styleValue
+  }
+  return false
+}
+
+export const TextExtension = () =>
+  Extension.create({
+    name: 'text',
+    addCommands() {
+      /**
+       * 判断光标所在文本是否具有某个样式
+       */
+      const isTextStyle = (styleName: string, styleValue?: string | number) => {
+        if (!this.selection.focused()) {
+          return false
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const node = this.selection.start!.node
+          //文本节点
+          if (node.isText()) {
+            return isTextNodeStyle(node, styleName, styleValue)
+          }
+          return false
+        }
+        //存在选区
+        const textArray = this.getFocusNodesBySelection('text')
+        return !!textArray.length && textArray.every(item => isTextNodeStyle(item, styleName, styleValue))
+      }
+
+      /**
+       * 判断光标所在文本是否具有某个标记
+       */
+      const isTextMark = (markName: string, markValue?: string | number) => {
+        if (!this.selection.focused()) {
+          return false
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const node = this.selection.start!.node
+          //文本节点
+          if (node.isText()) {
+            return isTextNodeMark(node, markName, markValue)
+          }
+          return false
+        }
+        //存在选区
+        const textArray = this.getFocusNodesBySelection('text')
+        return !!textArray.length && textArray.every(item => isTextNodeMark(item, markName, markValue))
+      }
+
+      /**
+       * 设置光标所在文本样式
+       */
+      const setTextStyle = async (styles: KNodeStylesType, updateView: boolean | undefined = true) => {
+        if (!this.selection.focused()) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const node = this.selection.start!.node
+          //空白文本节点直接设置样式
+          if (node.isZeroWidthText()) {
+            if (node.hasStyles()) {
+              Object.assign(node.styles!, DapCommon.clone(styles))
+            } else {
+              node.styles = DapCommon.clone(styles)
+            }
+          }
+          //文本节点
+          else if (node.isText()) {
+            //新建一个空白文本节点
+            const newTextNode = KNode.createZeroWidthText()
+            //继承文本节点的样式和标记
+            newTextNode.styles = DapCommon.clone(node.styles)
+            newTextNode.marks = DapCommon.clone(node.marks)
+            //设置样式
+            if (newTextNode.hasStyles()) {
+              Object.assign(newTextNode.styles!, DapCommon.clone(styles))
+            } else {
+              newTextNode.styles = DapCommon.clone(styles)
+            }
+            //插入空白文本节点
+            this.insertNode(newTextNode)
+          }
+          //闭合节点
+          else {
+            //新建一个空白文本节点
+            const newTextNode = KNode.createZeroWidthText()
+            //设置样式
+            newTextNode.styles = DapCommon.clone(styles)
+            //插入空白文本节点
+            this.insertNode(newTextNode)
+          }
+        }
+        //存在选区
+        else {
+          this.getFocusSplitNodesBySelection('text').forEach(item => {
+            if (item.hasStyles()) {
+              item.styles = { ...item.styles, ...styles }
+            } else {
+              item.styles = { ...styles }
+            }
+          })
+        }
+        //更新视图
+        if (updateView) await this.updateView()
+      }
+
+      /**
+       * 设置光标所在文本标记
+       */
+      const setTextMark = async (marks: KNodeMarksType, updateView: boolean | undefined = true) => {
+        if (!this.selection.focused()) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const node = this.selection.start!.node
+          //空白文本节点直接设置标记
+          if (node.isZeroWidthText()) {
+            if (node.hasMarks()) {
+              Object.assign(node.marks!, DapCommon.clone(marks))
+            } else {
+              node.marks = DapCommon.clone(marks)
+            }
+          }
+          //文本节点
+          else if (node.isText()) {
+            //新建一个空白文本节点
+            const newTextNode = KNode.createZeroWidthText()
+            //继承文本节点的样式和标记
+            newTextNode.styles = DapCommon.clone(node.styles)
+            newTextNode.marks = DapCommon.clone(node.marks)
+            //设置标记
+            if (newTextNode.hasMarks()) {
+              Object.assign(newTextNode.marks!, DapCommon.clone(marks))
+            } else {
+              newTextNode.marks = DapCommon.clone(marks)
+            }
+            //插入空白文本节点
+            this.insertNode(newTextNode)
+          }
+          //闭合节点
+          else {
+            //新建一个空白文本节点
+            const newTextNode = KNode.createZeroWidthText()
+            //设置样式
+            newTextNode.marks = DapCommon.clone(marks)
+            //插入空白文本节点
+            this.insertNode(newTextNode)
+          }
+        }
+        //存在选区
+        else {
+          this.getFocusSplitNodesBySelection('text').forEach(item => {
+            if (item.hasMarks()) {
+              item.marks = { ...item.marks, ...marks }
+            } else {
+              item.marks = { ...marks }
+            }
+          })
+        }
+        //更新视图
+        if (updateView) await this.updateView()
+      }
+
+      /**
+       * 移除光标所在文本样式
+       */
+      const removeTextStyle = async (styleNames?: string[], updateView: boolean | undefined = true) => {
+        if (!this.selection.focused()) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const node = this.selection.start!.node
+          //空白文本节点直接移除样式
+          if (node.isZeroWidthText()) {
+            removeTextNodeStyles(node, styleNames)
+          }
+          //文本节点则新建一个空白文本节点
+          else if (node.isText()) {
+            const newTextNode = KNode.createZeroWidthText()
+            //继承文本节点的样式和标记
+            newTextNode.styles = DapCommon.clone(node.styles)
+            newTextNode.marks = DapCommon.clone(node.marks)
+            //移除样式
+            removeTextNodeStyles(newTextNode, styleNames)
+            //插入
+            this.insertNode(newTextNode)
+          }
+        }
+        //存在选区
+        else {
+          this.getFocusSplitNodesBySelection('text').forEach(item => {
+            removeTextNodeStyles(item, styleNames)
+          })
+        }
+        //更新视图
+        if (updateView) await this.updateView()
+      }
+
+      /**
+       * 移除光标所在文本标记
+       */
+      const removeTextMark = async (markNames?: string[], updateView: boolean | undefined = true) => {
+        if (!this.selection.focused()) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const node = this.selection.start!.node
+          //空白文本节点直接移除标记
+          if (node.isZeroWidthText()) {
+            removeTextNodeMarks(node, markNames)
+          }
+          //文本节点则新建一个空白文本节点
+          else if (node.isText()) {
+            const newTextNode = KNode.createZeroWidthText()
+            //继承文本节点的样式和标记
+            newTextNode.styles = DapCommon.clone(node.styles)
+            newTextNode.marks = DapCommon.clone(node.marks)
+            //移除标记
+            removeTextNodeMarks(newTextNode, markNames)
+            //插入
+            this.insertNode(newTextNode)
+          }
+        }
+        //存在选区
+        else {
+          this.getFocusSplitNodesBySelection('text').forEach(item => {
+            removeTextNodeMarks(item, markNames)
+          })
+        }
+        //更新视图
+        if (updateView) await this.updateView()
+      }
+
+      /**
+       * 清除格式
+       */
+      const clearFormat = async () => {
+        await removeTextMark(undefined, false)
+        await removeTextStyle()
+      }
+
+      return {
+        isTextStyle,
+        isTextMark,
+        setTextStyle,
+        setTextMark,
+        removeTextStyle,
+        removeTextMark,
+        clearFormat
+      }
+    }
+  })

package/src/extensions/underline/index.ts

@@ -0,0 +1,78 @@
+import { KNodeStylesType } from '@/model'
+import { splitNodeToNodes } from '@/model/config/function'
+import { Extension } from '../Extension'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    isUnderline?: () => boolean
+    setUnderline?: () => Promise<void>
+    unsetUnderline?: () => Promise<void>
+  }
+}
+
+export const UnderlineExtension = () =>
+  Extension.create({
+    name: 'underline',
+    pasteKeepStyles(node) {
+      const styles: KNodeStylesType = {}
+      if (node.isText() && node.hasStyles()) {
+        if (node.styles!.hasOwnProperty('textDecoration')) styles.textDecoration = node.styles!.textDecoration
+        if (node.styles!.hasOwnProperty('textDecorationLine')) styles.textDecorationLine = node.styles!.textDecorationLine
+      }
+      return styles
+    },
+    extraKeepTags: ['u'],
+    domParseNodeCallback(node) {
+      if (node.isMatch({ tag: 'u' })) {
+        node.type = 'inline'
+      }
+      return node
+    },
+    formatRules: [
+      ({ editor, node }) => {
+        if (!node.isEmpty() && node.isMatch({ tag: 'u' })) {
+          const styles: KNodeStylesType = node.styles || {}
+          node.styles = {
+            ...styles,
+            textDecorationLine: 'underline'
+          }
+          node.tag = editor.textRenderTag
+          splitNodeToNodes.apply(editor, [node])
+        }
+      }
+    ],
+    addCommands() {
+      /**
+       * 光标所在文本是否下划线
+       */
+      const isUnderline = () => {
+        return this.commands.isTextStyle!('textDecoration', 'underline') || this.commands.isTextStyle!('textDecorationLine', 'underline')
+      }
+      /**
+       * 设置下划线
+       */
+      const setUnderline = async () => {
+        if (isUnderline()) {
+          return
+        }
+        await this.commands.setTextStyle!({
+          textDecorationLine: 'underline'
+        })
+      }
+      /**
+       * 取消下划线
+       */
+      const unsetUnderline = async () => {
+        if (!isUnderline()) {
+          return
+        }
+        await this.commands.removeTextStyle!(['textDecoration', 'textDecorationLine'])
+      }
+
+      return {
+        isUnderline,
+        setUnderline,
+        unsetUnderline
+      }
+    }
+  })

package/src/extensions/video/index.ts

@@ -0,0 +1,273 @@
+import interact from 'interactjs'
+import { event as DapEvent, data as DapData } from 'dap-util'
+import { Editor, KNode, KNodeMarksType, KNodeStylesType } from '@/model'
+import { Extension } from '../Extension'
+import './style.less'
+import { deleteProperty } from '@/tools'
+
+/**
+ * 插入视频方法入参类型
+ */
+export type SetVideoOptionType = {
+  src: string
+  width?: string
+  autoplay?: boolean
+}
+
+/**
+ * 更新视频方法入参类型
+ */
+export type UpdateVideoOptionType = {
+  controls?: boolean
+  muted?: boolean
+  loop?: boolean
+}
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    getVideo?: () => KNode | null
+    hasVideo?: () => boolean
+    setVideo?: (options: SetVideoOptionType) => Promise<void>
+    updateVideo?: (options: UpdateVideoOptionType) => Promise<void>
+  }
+}
+
+/**
+ * 设置视频选中
+ */
+const videoFocus = (editor: Editor) => {
+  DapEvent.off(editor.$el!, 'click.video_focus')
+  DapEvent.on(editor.$el!, 'click.video_focus', 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: 'video'
+    })
+    if (matchNode) {
+      editor.setSelectionBefore(matchNode, 'start')
+      editor.setSelectionAfter(matchNode, 'end')
+      editor.updateRealSelection()
+    }
+  })
+}
+/**
+ * 设置视频拖拽
+ */
+const videoResizable = (editor: Editor) => {
+  //设置拖拽改变大小的功能
+  interact('.Kaitify video').unset()
+  interact('.Kaitify video').resizable({
+    //是否启用
+    enabled: true,
+    //指定可以调整大小的边缘
+    edges: { left: false, right: true, bottom: false, top: false },
+    //设置鼠标样式
+    cursorChecker() {
+      return editor.isEditable() ? 'ew-resize' : 'default'
+    },
+    //启用惯性效果
+    inertia: false,
+    //调整大小时的自动滚动功能
+    autoScroll: true,
+    //保持图片的宽高比
+    preserveAspectRatio: true,
+    //水平调整
+    axis: 'x',
+    //事件
+    listeners: {
+      //开始拖拽
+      start(event) {
+        //不可编辑状态下不能拖拽
+        if (!editor.isEditable()) {
+          event.interaction.stop()
+          return
+        }
+        //禁用dragstart
+        DapEvent.on(event.target, 'dragstart', e => e.preventDefault())
+        //获取视频节点
+        const node = editor.findNode(event.target)
+        //暂存
+        DapData.set(event.target, 'node', node)
+      },
+      //拖拽
+      move(event) {
+        //获取宽度
+        const { width } = event.rect
+        //设置dom的宽度
+        event.target.style.width = `${width}px`
+      },
+      //结束拖拽
+      end(event) {
+        //恢复dragstart
+        DapEvent.off(event.target, 'dragstart')
+        //获取宽度
+        const { width } = event.rect
+        //设置百分比宽度
+        const percentWidth = Number(((width / event.target.parentElement.offsetWidth) * 100).toFixed(2))
+        //获取视频节点
+        const node = DapData.get(event.target, 'node')
+        //设置节点的styles
+        if (node.hasStyles()) {
+          node.styles!.width = `${percentWidth}%`
+        } else {
+          node.styles = {
+            width: `${percentWidth}%`
+          }
+        }
+        //更新视图
+        editor.updateView()
+      }
+    }
+  })
+}
+
+export const VideoExtension = () =>
+  Extension.create({
+    name: 'video',
+    extraKeepTags: ['video'],
+    domParseNodeCallback(node) {
+      if (node.isMatch({ tag: 'video' })) {
+        node.type = 'closed'
+      }
+      return node
+    },
+    pasteKeepMarks(node) {
+      const marks: KNodeMarksType = {}
+      if (node.isMatch({ tag: 'video' }) && node.hasMarks()) {
+        if (node.marks!.hasOwnProperty('src')) marks['src'] = node.marks!['src']
+        if (node.marks!.hasOwnProperty('autoplay')) marks['autoplay'] = node.marks!['autoplay']
+        if (node.marks!.hasOwnProperty('loop')) marks['loop'] = node.marks!['loop']
+        if (node.marks!.hasOwnProperty('muted')) marks['muted'] = node.marks!['muted']
+        if (node.marks!.hasOwnProperty('controls')) marks['controls'] = node.marks!['controls']
+      }
+      return marks
+    },
+    pasteKeepStyles(node) {
+      const styles: KNodeStylesType = {}
+      if (node.isMatch({ tag: 'video' }) && node.hasStyles()) {
+        styles['width'] = node.styles!['width'] || 'auto'
+      }
+      return styles
+    },
+    formatRules: [
+      ({ editor, node }) => {
+        if (node.isMatch({ tag: 'video' })) {
+          //视频必须是闭合节点
+          node.type = 'closed'
+          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)
+          }
+        }
+      }
+    ],
+    afterUpdateView() {
+      //视频选中
+      videoFocus(this)
+      //视频拖拽改变大小
+      videoResizable(this)
+    },
+    addCommands() {
+      /**
+       * 获取光标所在的视频，如果光标不在一个视频内，返回null
+       */
+      const getVideo = () => {
+        return this.getMatchNodeBySelection({
+          tag: 'video'
+        })
+      }
+      /**
+       * 判断光标范围内是否有视频
+       */
+      const hasVideo = () => {
+        return this.isSelectionNodesSomeMatch({
+          tag: 'video'
+        })
+      }
+      /**
+       * 插入视频
+       */
+      const setVideo = async (options: SetVideoOptionType) => {
+        if (!this.selection.focused()) {
+          return
+        }
+        if (!options.src) {
+          return
+        }
+        const marks: KNodeMarksType = {
+          src: options.src
+        }
+        if (options.autoplay) {
+          marks['autoplay'] = 'autoplay'
+          marks['muted'] = 'muted'
+        }
+        const videoNode = KNode.create({
+          type: 'closed',
+          tag: 'video',
+          marks,
+          styles: {
+            width: options.width || 'auto'
+          }
+        })
+        this.insertNode(videoNode)
+        this.setSelectionAfter(videoNode)
+        await this.updateView()
+      }
+
+      /**
+       * 更新视频
+       */
+      const updateVideo = async (options: UpdateVideoOptionType) => {
+        if (!this.selection.focused()) {
+          return
+        }
+        if (typeof options.controls != 'boolean' && typeof options.muted != 'boolean' && typeof options.loop != 'boolean') {
+          return
+        }
+        const videoNode = getVideo()
+        if (!videoNode) {
+          return
+        }
+        if (typeof options.controls == 'boolean') {
+          if (options.controls) {
+            videoNode.marks!['controls'] = 'controls'
+          } else {
+            videoNode.marks = deleteProperty(videoNode.marks!, 'controls')
+          }
+        }
+        if (typeof options.loop == 'boolean') {
+          if (options.loop) {
+            videoNode.marks!['loop'] = 'loop'
+          } else {
+            videoNode.marks = deleteProperty(videoNode.marks!, 'loop')
+          }
+        }
+        if (typeof options.muted == 'boolean') {
+          if (options.muted) {
+            videoNode.marks!['muted'] = 'muted'
+          } else {
+            videoNode.marks = deleteProperty(videoNode.marks!, 'muted')
+          }
+        }
+        await this.updateView()
+      }
+
+      return { getVideo, hasVideo, setVideo, updateVideo }
+    }
+  })