@kaitify/core 0.0.1-beta.1

package/src/extensions/table/style.less

@@ -0,0 +1,71 @@
+.Kaitify {
+  table {
+    display: table;
+    width: 100%;
+    border: 1px solid var(--kaitify-border-color);
+    border-collapse: collapse;
+    margin: 0 0 var(--kaitify-large-margin) 0;
+
+    td {
+      border: 1px solid var(--kaitify-border-color);
+      padding: var(--kaitify-padding);
+      vertical-align: middle;
+      max-width: 100%;
+      min-width: 50px;
+    }
+
+    tr:first-child {
+      background: #f1f2f3;
+
+      td {
+        font-weight: bold;
+      }
+    }
+
+    tr:nth-child(2n + 3) {
+      background: fade(#f1f2f3, 20);
+    }
+  }
+
+  //非编辑状态下
+  &:not([contenteditable='true']) {
+    table {
+      tr:not(:first-child) {
+        transition: background 300ms;
+
+        &:hover {
+          background: fade(#f1f2f3, 50);
+        }
+      }
+    }
+  }
+}
+
+:root[kaitify-dark] .Kaitify {
+  table {
+    tr:first-child {
+      background: #2a2a2a;
+
+      td {
+        font-weight: bold;
+      }
+    }
+
+    tr:nth-child(2n + 3) {
+      background: fade(#2a2a2a, 20);
+    }
+  }
+
+  //非编辑状态下
+  &:not([contenteditable='true']) {
+    table {
+      tr:not(:first-child) {
+        transition: background 300ms;
+
+        &:hover {
+          background: fade(#2a2a2a, 50);
+        }
+      }
+    }
+  }
+}

package/src/extensions/task/index.ts

@@ -0,0 +1,243 @@
+import { event as DapEvent, element as DapElement } from 'dap-util'
+import { Editor, KNode, KNodeMarksType } from '@/model'
+import { getSelectionBlockNodes } from '@/model/config/function'
+import { Extension } from '../Extension'
+import './style.less'
+
+declare module '../../model' {
+  interface EditorCommandsType {
+    getTask?: () => KNode | null
+    hasTask?: () => boolean
+    allTask?: () => boolean
+    setTask?: () => Promise<void>
+    unsetTask?: () => Promise<void>
+  }
+}
+
+/**
+ * 块节点转为待办
+ */
+const toTask = (editor: Editor, node: KNode) => {
+  if (!node.isBlock()) {
+    return
+  }
+  //是固定的块节点或者内嵌套的块节点
+  if (node.fixed || node.nested) {
+    //创建待办节点
+    const taskNode = KNode.create({
+      type: 'block',
+      tag: 'div',
+      marks: {
+        'kaitify-task': 'undo'
+      },
+      children: []
+    })
+    //将块节点的子节点给待办节点
+    node.children!.forEach((item, index) => {
+      editor.addNode(item, taskNode, index)
+    })
+    //清空原来的块节点
+    node.children = []
+    //将待办节点添加到块节点下
+    taskNode.parent = node
+    node.children = [taskNode]
+  }
+  //非固定块节点
+  else {
+    editor.toParagraph(node)
+    node.tag = 'div'
+    node.marks = {
+      'kaitify-task': 'undo'
+    }
+  }
+}
+
+/**
+ * 编辑器点击切换待办状态
+ */
+const toggleTaskStatus = function (editor: Editor) {
+  DapEvent.off(editor.$el!, `click.task`)
+  DapEvent.on(editor.$el!, `click.task`, 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: 'div',
+      marks: {
+        'kaitify-task': true
+      }
+    })
+    //点击的元素是待办
+    if (matchNode) {
+      const dom = editor.findDom(matchNode)
+      const rect = DapElement.getElementBounding(dom)
+      //在复选框范围内
+      if (event.clientX >= Math.abs(rect.left) && event.clientX <= Math.abs(rect.left + 16) && event.clientY >= Math.abs(rect.top + elm.offsetHeight / 2 - 8) && event.clientY <= Math.abs(rect.top + elm.offsetHeight / 2 + 8)) {
+        if (matchNode.marks!['kaitify-task'] == 'undo') {
+          matchNode.marks!['kaitify-task'] = 'done'
+        } else {
+          matchNode.marks!['kaitify-task'] = 'undo'
+        }
+        editor.setSelectionAfter(matchNode, 'all')
+        editor.updateView()
+      }
+    }
+  })
+}
+
+export const TaskExtension = () =>
+  Extension.create({
+    name: 'task',
+    pasteKeepMarks(node) {
+      const marks: KNodeMarksType = {}
+      if (
+        node.isMatch({
+          tag: 'div',
+          marks: {
+            'kaitify-task': true
+          }
+        })
+      ) {
+        marks['kaitify-task'] = node.marks!['kaitify-task']
+      }
+      return marks
+    },
+    afterUpdateView() {
+      //切换待办状态
+      toggleTaskStatus(this)
+    },
+    onInsertParagraph(node) {
+      if (
+        node.isMatch({
+          tag: 'div',
+          marks: {
+            'kaitify-task': true
+          }
+        })
+      ) {
+        node.marks!['kaitify-task'] = 'undo'
+      }
+    },
+    formatRules: [
+      //待办列表必须是块节点
+      ({ node }) => {
+        if (
+          node.isMatch({
+            tag: 'div',
+            marks: {
+              'kaitify-task': true
+            }
+          })
+        ) {
+          node.type = 'block'
+        }
+      }
+    ],
+    addCommands() {
+      /**
+       * 获取光标所在的待办节点，如果光标不在一个待办节点内，返回null
+       */
+      const getTask = () => {
+        return this.getMatchNodeBySelection({
+          tag: 'div',
+          marks: {
+            'kaitify-task': true
+          }
+        })
+      }
+
+      /**
+       * 判断光标范围内是否有待办节点
+       */
+      const hasTask = () => {
+        return this.isSelectionNodesSomeMatch({
+          tag: 'div',
+          marks: {
+            'kaitify-task': true
+          }
+        })
+      }
+
+      /**
+       * 光标范围内是否都是待办节点
+       */
+      const allTask = () => {
+        return this.isSelectionNodesAllMatch({
+          tag: 'div',
+          marks: {
+            'kaitify-task': true
+          }
+        })
+      }
+
+      /**
+       * 设置待办
+       */
+      const setTask = async () => {
+        if (allTask()) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const blockNode = this.selection.start!.node.getBlock()
+          toTask(this, blockNode)
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            toTask(this, item)
+          })
+        }
+        await this.updateView()
+      }
+
+      /**
+       * 取消待办
+       */
+      const unsetTask = async () => {
+        if (!allTask()) {
+          return
+        }
+        //起点和终点在一起
+        if (this.selection.collapsed()) {
+          const matchNode = this.selection.start!.node.getMatchNode({
+            tag: 'div',
+            marks: {
+              'kaitify-task': true
+            }
+          })
+          if (matchNode) this.toParagraph(matchNode)
+        }
+        //起点和终点不在一起
+        else {
+          const blockNodes = getSelectionBlockNodes.apply(this)
+          blockNodes.forEach(item => {
+            const matchNode = item.getMatchNode({
+              tag: 'div',
+              marks: {
+                'kaitify-task': true
+              }
+            })
+            if (matchNode) this.toParagraph(matchNode)
+          })
+        }
+        await this.updateView()
+      }
+
+      return {
+        getTask,
+        hasTask,
+        allTask,
+        setTask,
+        unsetTask
+      }
+    }
+  })

package/src/extensions/task/style.less

@@ -0,0 +1,59 @@
+.Kaitify {
+  div[kaitify-task] {
+    display: block;
+    position: relative;
+    margin: 0 0 var(--kaitify-large-margin) 0;
+    padding: 0 0 0 26px;
+    width: 100%;
+
+    &:last-child {
+      margin-bottom: 0 !important;
+    }
+
+    &::before {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      content: '';
+      width: 16px;
+      height: 16px;
+      border: 1px solid var(--kaitify-theme);
+      border-radius: var(--kaitify-border-radius);
+      user-select: none;
+      touch-action: none;
+    }
+
+    &[kaitify-task='done'] {
+      text-decoration: line-through;
+
+      &::before {
+        background: var(--kaitify-theme);
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 2px;
+        top: 50%;
+        width: 5px;
+        height: 10px;
+        margin-top: -2.5px;
+        border: solid var(--kaitify-theme);
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg) translateY(-50%);
+        border-color: #fff;
+        user-select: none;
+        touch-action: none;
+      }
+    }
+  }
+
+  &[contenteditable='true'] {
+    div[kaitify-task] {
+      &::before {
+        cursor: pointer;
+      }
+    }
+  }
+}