@kaitify/core 0.0.1-beta.1

package/src/extensions/heading/style.less

@@ -0,0 +1,42 @@
+.Kaitify {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    line-height: var(--kaitify-line-height);
+    margin: 0 0 var(--kaitify-large-margin) 0 !important;
+
+    &:last-child {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  //段落和标题
+  h1 {
+    font-size: 48px;
+    font-weight: bold;
+  }
+  h2 {
+    font-size: 36px;
+    font-weight: bold;
+  }
+  h3 {
+    font-size: 28px;
+    font-weight: bold;
+  }
+  h4 {
+    font-size: 24px;
+    font-weight: bold;
+  }
+  h5 {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  h6 {
+    font-size: 16px;
+    font-weight: bold;
+  }
+}

package/src/extensions/history/index.ts

@@ -0,0 +1,96 @@
+import { platform } from 'dap-util'
+import { Extension } from '../Extension'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    canUndo?: () => boolean
+    canRedo?: () => boolean
+    undo?: () => Promise<void>
+    redo?: () => Promise<void>
+  }
+}
+
+/**
+ * 键盘是否执行撤销操作
+ */
+const isUndo = function (e: KeyboardEvent) {
+  const { Mac } = platform.os()
+  if (Mac) {
+    return e.key.toLocaleLowerCase() == 'z' && e.metaKey && !e.shiftKey && !e.altKey && !e.ctrlKey
+  }
+  return e.key.toLocaleLowerCase() == 'z' && e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey
+}
+
+/**
+ * 键盘是否执行重做操作
+ */
+const isRedo = function (e: KeyboardEvent) {
+  const { Mac } = platform.os()
+  if (Mac) {
+    return e.key.toLocaleLowerCase() == 'z' && e.metaKey && e.shiftKey && !e.altKey && !e.ctrlKey
+  }
+  return e.key.toLocaleLowerCase() == 'y' && e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey
+}
+
+export const HistoryExtension = () =>
+  Extension.create({
+    name: 'history',
+    onKeydown(event) {
+      //撤销
+      if (isUndo(event)) {
+        event.preventDefault()
+        this.commands.undo?.()
+      }
+      //重做
+      else if (isRedo(event)) {
+        event.preventDefault()
+        this.commands.redo?.()
+      }
+    },
+    addCommands() {
+      /**
+       * 是否可以撤销
+       */
+      const canUndo = () => {
+        return this.history.records.length > 1
+      }
+
+      /**
+       * 是否可以重做
+       */
+      const canRedo = () => {
+        return this.history.redoRecords.length > 0
+      }
+
+      /**
+       * 撤销
+       */
+      const undo = async () => {
+        const record = this.history.setUndo()
+        if (record) {
+          this.stackNodes = record.nodes
+          this.selection = record.selection
+          await this.updateView(true, true)
+        }
+      }
+
+      /**
+       * 重做
+       */
+      const redo = async () => {
+        const record = this.history.setRedo()
+        if (record) {
+          this.stackNodes = record.nodes
+          this.selection = record.selection
+          await this.updateView(true, true)
+        }
+      }
+
+      return {
+        canUndo,
+        canRedo,
+        redo,
+        undo
+      }
+    }
+  })

package/src/extensions/horizontal/index.ts

@@ -0,0 +1,45 @@
+import { KNode } from '@/model'
+import { Extension } from '../Extension'
+import './style.less'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    setHorizontal?: () => Promise<void>
+  }
+}
+
+export const HorizontalExtension = () =>
+  Extension.create({
+    name: 'horizontal',
+    extraKeepTags: ['hr'],
+    domParseNodeCallback(node) {
+      if (node.isMatch({ tag: 'hr' })) {
+        node.type = 'closed'
+      }
+      return node
+    },
+    formatRules: [
+      ({ node }) => {
+        if (node.isMatch({ tag: 'hr' })) {
+          node.type = 'closed'
+        }
+      }
+    ],
+    addCommands() {
+      /**
+       * 设置分隔线
+       */
+      const setHorizontal = async () => {
+        const node = KNode.create({
+          type: 'closed',
+          tag: 'hr'
+        })
+        this.insertNode(node)
+        await this.updateView()
+      }
+
+      return {
+        setHorizontal
+      }
+    }
+  })

package/src/extensions/horizontal/style.less

@@ -0,0 +1,13 @@
+.Kaitify hr {
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: 2px;
+  background: fade(#000, 20);
+  border: none;
+  margin: var(--kaitify-large-margin) 0;
+}
+
+:root[kaitify-dark] .Kaitify hr {
+  background: fade(#fff, 20);
+}

package/src/extensions/image/index.ts

@@ -0,0 +1,242 @@
+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 SetImageOptionType = {
+  src: string
+  alt?: string
+  width?: string
+}
+
+/**
+ * 更新图片方法入参类型
+ */
+export type UpdateImageOptionType = {
+  src?: string
+  alt?: string
+}
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    getImage?: () => KNode | null
+    hasImage?: () => boolean
+    setImage?: (options: SetImageOptionType) => Promise<void>
+    updateImage?: (options: UpdateImageOptionType) => Promise<void>
+  }
+}
+
+/**
+ * 设置图片选中
+ */
+const imageFocus = (editor: Editor) => {
+  DapEvent.off(editor.$el!, 'click.image_focus')
+  DapEvent.on(editor.$el!, 'click.image_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: 'img'
+    })
+    if (matchNode) {
+      editor.setSelectionBefore(matchNode, 'start')
+      editor.setSelectionAfter(matchNode, 'end')
+      editor.updateRealSelection()
+    }
+  })
+}
+/**
+ * 设置图片拖拽
+ */
+const imageResizable = (editor: Editor) => {
+  //设置拖拽改变大小的功能
+  interact('.Kaitify img').unset()
+  interact('.Kaitify img').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 ImageExtension = () =>
+  Extension.create({
+    name: 'image',
+    extraKeepTags: ['img'],
+    domParseNodeCallback(node) {
+      if (node.isMatch({ tag: 'img' })) {
+        node.type = 'closed'
+      }
+      return node
+    },
+    formatRules: [
+      ({ node }) => {
+        if (node.isMatch({ tag: 'img' })) {
+          node.type = 'closed'
+        }
+      }
+    ],
+    pasteKeepMarks(node) {
+      const marks: KNodeMarksType = {}
+      if (node.isMatch({ tag: 'img' }) && node.hasMarks()) {
+        if (node.marks!.hasOwnProperty('alt')) marks['alt'] = node.marks!['alt']
+        if (node.marks!.hasOwnProperty('src')) marks['src'] = node.marks!['src']
+      }
+      return marks
+    },
+    pasteKeepStyles(node) {
+      const styles: KNodeStylesType = {}
+      if (node.isMatch({ tag: 'img' }) && node.hasStyles()) {
+        styles['width'] = node.styles!['width'] || 'auto'
+      }
+      return styles
+    },
+    afterUpdateView() {
+      //图片选中
+      imageFocus(this)
+      //图片拖拽改变大小
+      imageResizable(this)
+    },
+    addCommands() {
+      /**
+       * 获取光标所在的图片，如果光标不在一张图片内，返回null
+       */
+      const getImage = () => {
+        return this.getMatchNodeBySelection({
+          tag: 'img'
+        })
+      }
+
+      /**
+       * 判断光标范围内是否有图片
+       */
+      const hasImage = () => {
+        return this.isSelectionNodesSomeMatch({
+          tag: 'img'
+        })
+      }
+
+      /**
+       * 插入图片
+       */
+      const setImage = async (options: SetImageOptionType) => {
+        if (!this.selection.focused()) {
+          return
+        }
+        if (!options.src) {
+          return
+        }
+        const imageNode = KNode.create({
+          type: 'closed',
+          tag: 'img',
+          marks: {
+            src: options.src,
+            alt: options.alt || ''
+          },
+          styles: {
+            width: options.width || 'auto'
+          }
+        })
+        this.insertNode(imageNode)
+        this.setSelectionAfter(imageNode)
+        await this.updateView()
+      }
+
+      /**
+       * 更新图片
+       */
+      const updateImage = async (options: UpdateImageOptionType) => {
+        if (!this.selection.focused()) {
+          return
+        }
+        if (!options.src && !options.alt) {
+          return
+        }
+        const imageNode = getImage()
+        if (!imageNode) {
+          return
+        }
+        //更新url
+        if (options.src) {
+          imageNode.marks!.src = options.src
+        }
+        //更新alt
+        if (options.alt) {
+          imageNode.marks!.alt = options.alt
+        } else {
+          imageNode.marks = deleteProperty(imageNode.marks!, 'alt')
+        }
+        await this.updateView()
+      }
+
+      return { getImage, hasImage, setImage, updateImage }
+    }
+  })

package/src/extensions/image/style.less

@@ -0,0 +1,8 @@
+.Kaitify img {
+  display: inline-block;
+  position: relative;
+  width: auto;
+  min-width: 20px;
+  max-width: 100%;
+  padding: 0 var(--kaitify-sides-between);
+}

package/src/extensions/indent/index.ts

@@ -0,0 +1,98 @@
+import { KNodeStylesType } from '@/model'
+import { getSelectionBlockNodes } from '@/model/config/function'
+import { Extension } from '../Extension'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    setIncreaseIndent?: () => Promise<void>
+    setDecreaseIndent?: () => Promise<void>
+  }
+}
+
+export const IndentExtension = () =>
+  Extension.create({
+    name: 'indent',
+    pasteKeepStyles(node) {
+      const styles: KNodeStylesType = {}
+      if (node.isBlock() && node.hasStyles()) {
+        if (node.styles!.hasOwnProperty('textIndent')) styles.textIndent = node.styles!.textIndent
+      }
+      return styles
+    },
+    addCommands() {
+      /**
+       * 增加缩进
+       */
+      const setIncreaseIndent = async () => {
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const blockNode = this.selection.start!.node.getBlock()
+          const styles: KNodeStylesType = blockNode.hasStyles() ? blockNode.styles! : {}
+          let oldVal = 0
+          if (styles.textIndent && typeof styles.textIndent == 'string' && styles.textIndent.endsWith('em')) {
+            oldVal = parseFloat(styles.textIndent)
+          }
+          blockNode.styles = {
+            ...styles,
+            textIndent: `${oldVal + 2}em`
+          }
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            const styles: KNodeStylesType = item.hasStyles() ? item.styles! : {}
+            let oldVal = 0
+            if (styles.textIndent && typeof styles.textIndent == 'string' && styles.textIndent.endsWith('em')) {
+              oldVal = parseFloat(styles.textIndent)
+            }
+            item.styles = {
+              ...styles,
+              textIndent: `${oldVal + 2}em`
+            }
+          })
+        }
+        await this.updateView()
+      }
+
+      /**
+       * 减少缩进
+       */
+      const setDecreaseIndent = async () => {
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const blockNode = this.selection.start!.node.getBlock()
+          const styles: KNodeStylesType = blockNode.hasStyles() ? blockNode.styles! : {}
+          let oldVal = 0
+          if (styles.textIndent && typeof styles.textIndent == 'string' && styles.textIndent.endsWith('em')) {
+            oldVal = parseFloat(styles.textIndent)
+          }
+          blockNode.styles = {
+            ...styles,
+            textIndent: `${oldVal - 2 > 0 ? oldVal - 2 : 0}em`
+          }
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            const styles: KNodeStylesType = item.hasStyles() ? item.styles! : {}
+            let oldVal = 0
+            if (styles.textIndent && typeof styles.textIndent == 'string' && styles.textIndent.endsWith('em')) {
+              oldVal = parseFloat(styles.textIndent)
+            }
+            item.styles = {
+              ...styles,
+              textIndent: `${oldVal - 2 > 0 ? oldVal - 2 : 0}em`
+            }
+          })
+        }
+        await this.updateView()
+      }
+
+      return {
+        setDecreaseIndent,
+        setIncreaseIndent
+      }
+    }
+  })

package/src/extensions/index.ts

@@ -0,0 +1,29 @@
+export * from './Extension'
+export * from './text'
+export * from './history'
+export * from './image'
+export * from './video'
+export * from './bold'
+export * from './italic'
+export * from './strikethrough'
+export * from './underline'
+export * from './superscript'
+export * from './subscript'
+export * from './code'
+export * from './font-size'
+export * from './font-family'
+export * from './color'
+export * from './back-color'
+export * from './link'
+export * from './align'
+export * from './line-height'
+export * from './indent'
+export * from './horizontal'
+export * from './blockquote'
+export * from './heading'
+export * from './list'
+export * from './task'
+export * from './math'
+export * from './code-block'
+export * from './attachment'
+export * from './table'

package/src/extensions/italic/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 {
+    isItalic?: () => boolean
+    setItalic?: () => Promise<void>
+    unsetItalic?: () => Promise<void>
+  }
+}
+
+export const ItalicExtension = () =>
+  Extension.create({
+    name: 'italic',
+    pasteKeepStyles(node) {
+      const styles: KNodeStylesType = {}
+      if (node.isText() && node.hasStyles()) {
+        if (node.styles!.hasOwnProperty('fontStyle')) styles.fontStyle = node.styles!.fontStyle
+      }
+      return styles
+    },
+    extraKeepTags: ['i'],
+    domParseNodeCallback(node) {
+      if (node.isMatch({ tag: 'i' })) {
+        node.type = 'inline'
+      }
+      return node
+    },
+    formatRules: [
+      ({ editor, node }) => {
+        if (!node.isEmpty() && node.isMatch({ tag: 'i' })) {
+          const styles: KNodeStylesType = node.styles || {}
+          node.styles = {
+            ...styles,
+            fontStyle: 'italic'
+          }
+          node.tag = editor.textRenderTag
+          splitNodeToNodes.apply(editor, [node])
+        }
+      }
+    ],
+    addCommands() {
+      /**
+       * 光标所在文本是否斜体
+       */
+      const isItalic = () => {
+        return this.commands.isTextStyle!('fontStyle', 'italic')
+      }
+      /**
+       * 设置斜体
+       */
+      const setItalic = async () => {
+        if (isItalic()) {
+          return
+        }
+        await this.commands.setTextStyle!({
+          fontStyle: 'italic'
+        })
+      }
+      /**
+       * 取消斜体
+       */
+      const unsetItalic = async () => {
+        if (!isItalic()) {
+          return
+        }
+        await this.commands.removeTextStyle!(['fontStyle'])
+      }
+
+      return {
+        isItalic,
+        setItalic,
+        unsetItalic
+      }
+    }
+  })