@kaitify/core 0.0.1-beta.1 → 0.0.1-beta.2

package/src/extensions/heading/style.less

@@ -1,42 +0,0 @@
-.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

@@ -1,96 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,13 +0,0 @@
-.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

@@ -1,242 +0,0 @@
-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

@@ -1,8 +0,0 @@
-.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

@@ -1,98 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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
-      }
-    }
-  })