@kaitify/react 0.0.1-beta.1

package/src/editor/menu/built-in/superscript/index.ts

@@ -0,0 +1,3 @@
+import SuperscriptMenu from './superscript'
+export * from './props'
+export { SuperscriptMenu }

package/src/editor/menu/built-in/superscript/props.ts

@@ -0,0 +1,10 @@
+export type SuperscriptMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}

package/src/editor/menu/built-in/superscript/superscript.tsx

@@ -0,0 +1,45 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { SuperscriptMenuPropsType } from './props'
+
+export default function SuperscriptMenu(props: SuperscriptMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否激活
+  const isActive = useMemo(() => {
+    return state.editor.value?.commands.isSuperscript?.() ?? false
+  }, [state.editor])
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    if (!state.editor.value.selection.collapsed() && !state.editor.value.getFocusNodesBySelection('text').length) {
+      return true
+    }
+    if (state.editor.value.selection.collapsed() && (!!state.editor.value.commands.getAttachment?.() || !!state.editor.value.commands.getMath?.())) {
+      return true
+    }
+    if (!!state.editor.value.commands.getCodeBlock?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    if (isActive) {
+      state.editor.value?.commands.unsetSuperscript?.()
+    } else {
+      state.editor.value?.commands.setSuperscript?.()
+    }
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={isActive} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-superscript' />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/table/index.ts

@@ -0,0 +1,9 @@
+import TableMenu from './table'
+import TableUnsetMenu from './table-unset'
+import TableDeleteRowMenu from './table-delete-row'
+import TableDeleteColumnMenu from './table-delete-column'
+import TableAddRowMenu from './table-add-row'
+import TableAddColumnMenu from './table-add-column'
+import TableMergeCellMenu from './table-merge-cell'
+export * from './props'
+export { TableMenu, TableUnsetMenu, TableDeleteRowMenu, TableDeleteColumnMenu, TableAddRowMenu, TableAddColumnMenu, TableMergeCellMenu }

package/src/editor/menu/built-in/table/props.ts

@@ -0,0 +1,105 @@
+import { TableCellsMergeDirectionType } from '@kaitify/core'
+import { MenuPropsType } from '@/editor/menu/props'
+
+export type TableGridType = {
+  x: number
+  y: number
+  inside: boolean
+}
+
+export type TableMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 表格最大行数
+   */
+  maxRows?: number
+  /**
+   * 表格最大列数
+   */
+  maxColumns?: number
+  /**
+   * 浮层属性
+   */
+  popoverProps?: Omit<NonNullable<MenuPropsType['popoverProps']>, 'onShow' | 'onShowing' | 'onShown' | 'onHide' | 'onHiding' | 'onHidden'>
+}
+
+export type TableUnsetMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}
+
+export type TableDeleteRowMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}
+
+export type TableDeleteColumnMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}
+
+export type TableAddRowMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 插入类型
+   */
+  type?: 'top' | 'bottom'
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}
+
+export type TableAddColumnMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 插入类型
+   */
+  type?: 'left' | 'right'
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}
+
+export type TableMergeCellMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 合并方向
+   */
+  direction: TableCellsMergeDirectionType
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}

package/src/editor/menu/built-in/table/style.module.less

@@ -0,0 +1,63 @@
+.kaitify-table {
+  display: block;
+  position: relative;
+  padding: @padding;
+
+  table {
+    border: 1px solid @border-color;
+    margin: 0;
+    padding: 0;
+    border-collapse: collapse;
+
+    tr {
+      margin: 0;
+      padding: 0;
+
+      td {
+        margin: 0;
+        padding: 0;
+        border: 1px solid @border-color;
+
+        span {
+          display: block;
+          width: 15px;
+          height: 15px;
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        &.kaitify-table-inside {
+          background-color: #f1f2f3;
+        }
+      }
+    }
+  }
+
+  .kaitify-table-footer {
+    display: block;
+    width: 100%;
+    text-align: center;
+    color: @font-color;
+    line-height: 1;
+    margin-top: @margin;
+    opacity: 0.8;
+  }
+
+  &.kaitify-dark {
+    table {
+      border-color: @border-color-dark;
+
+      tr {
+        td {
+          border-color: @border-color-dark;
+
+          &.kaitify-table-inside {
+            background-color: #2a2a2a;
+          }
+        }
+      }
+    }
+  }
+}

package/src/editor/menu/built-in/table/table-add-column.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { TableAddColumnMenuPropsType } from './props'
+
+export default function TableAddColumnMenu(props: TableAddColumnMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    if (!state.editor.value.commands.getTable?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    state.editor.value?.commands.addTableColumn?.(props.type ?? 'right')
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={false} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name={`kaitify-icon-insert-column-${props.type ?? 'right'}`} />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/table/table-add-row.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { TableAddRowMenuPropsType } from './props'
+
+export default function TableAddRowMenu(props: TableAddRowMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    if (!state.editor.value.commands.getTable?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    state.editor.value?.commands.addTableRow?.(props.type ?? 'bottom')
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={false} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name={`kaitify-icon-insert-row-${props.type ?? 'bottom'}`} />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/table/table-delete-column.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { TableDeleteColumnMenuPropsType } from './props'
+
+export default function TableDeleteColumnMenu(props: TableDeleteColumnMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    if (!state.editor.value.commands.getTable?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    state.editor.value?.commands.deleteTableColumn?.()
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={false} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-delete-column' />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/table/table-delete-row.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { TableAddRowMenuPropsType } from './props'
+
+export default function TableDeleteRowMenu(props: TableAddRowMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    if (!state.editor.value.commands.getTable?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    state.editor.value?.commands.deleteTableRow?.()
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={false} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-delete-row' />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/table/table-merge-cell.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { TableMergeCellMenuPropsType } from './props'
+
+export default function TableMergeCellMenu(props: TableMergeCellMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    if (!state.editor.value.commands.getTable?.()) {
+      return true
+    }
+    if (!state.editor.value.commands.canMergeTableCells?.(props.direction)) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    state.editor.value?.commands.mergeTableCell?.(props.direction)
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={false} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name={`kaitify-icon-merge-cells-${props.direction}`} />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/table/table-unset.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { TableUnsetMenuPropsType } from './props'
+
+export default function TableUnsetMenu(props: TableUnsetMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    if (!state.editor.value.commands.getTable?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    state.editor.value?.commands.unsetTable?.()
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={false} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-delete-table' />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/table/table.tsx

@@ -0,0 +1,144 @@
+import { useMemo, useRef, useState } from 'react'
+import classNames from 'classnames'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import { MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { TableGridType, TableMenuPropsType } from './props'
+import styles from './style.module.less'
+
+export default function TableMenu({ maxRows = 10, maxColumns = 10, ...props }: TableMenuPropsType) {
+  const { state, dark } = useEditor()
+
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+
+  //获取表格尺寸数据
+  const getTableGrids = () => {
+    const grids: TableGridType[][] = []
+    for (let i = 1; i <= maxRows; i++) {
+      let row: TableGridType[] = []
+      for (let j = 1; j <= maxColumns; j++) {
+        row.push({
+          x: i,
+          y: j,
+          inside: false //是否被选中
+        })
+      }
+      grids.push(row)
+    }
+    return grids
+  }
+
+  const [tableGrids, setTableGrids] = useState<TableGridType[][]>(getTableGrids())
+
+  //表格规格
+  const specification = useMemo<TableGridType>(() => {
+    return tableGrids
+      .flat()
+      .filter(item => {
+        return item.inside
+      })
+      .sort((a, b) => {
+        if (a.x > b.x && a.y > b.y) {
+          return -1
+        }
+        if (a.x > b.x) {
+          return -1
+        }
+        if (a.y > b.y) {
+          return -1
+        }
+        return 1
+      })[0]
+  }, [tableGrids])
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    if (state.editor.value.commands.hasTable?.()) {
+      return true
+    }
+    if (state.editor.value.commands.hasCodeBlock?.()) {
+      return true
+    }
+    if (state.editor.value.commands.hasAttachment?.()) {
+      return true
+    }
+    if (state.editor.value.commands.hasMath?.()) {
+      return true
+    }
+    if (state.editor.value.commands.hasCodeBlock?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //改变表格大小
+  const changeTableSize = (data: TableGridType) => {
+    for (let i = 0; i < tableGrids.length; i++) {
+      const grid = tableGrids[i]
+      for (let j = 0; j < grid.length; j++) {
+        setTableGrids(oldValue => [...oldValue.slice(0, i), [...oldValue[i].slice(0, j), { ...oldValue[i][j], inside: grid[j].x <= data.x && grid[j].y <= data.y }, ...oldValue[i].slice(j + 1)], ...oldValue.slice(i + 1)])
+      }
+    }
+  }
+  //插入表格
+  const insert = async (data: TableGridType) => {
+    if (maxRows < 1 || maxColumns < 1) {
+      return
+    }
+    state.editor.value?.commands.setTable?.({
+      rows: data.x,
+      columns: data.y
+    })
+    menuRef.current?.hidePopover()
+  }
+
+  return (
+    <Menu
+      ref={menuRef}
+      disabled={isDisabled}
+      active={false}
+      popover
+      popoverProps={{ width: props.popoverProps?.width, maxHeight: props.popoverProps?.maxHeight, minWidth: props.popoverProps?.minWidth, animation: props.popoverProps?.animation, arrow: props.popoverProps?.arrow, placement: props.popoverProps?.placement, trigger: props.popoverProps?.trigger, zIndex: props.popoverProps?.zIndex }}
+      customPopover={
+        <div
+          className={classNames(styles['kaitify-table'], {
+            [styles['kaitify-dark']]: dark
+          })}
+        >
+          <table>
+            <tbody>
+              {tableGrids.map((row, rowIndex) => (
+                <tr key={rowIndex}>
+                  {row.map((column, colIndex) => (
+                    <td
+                      key={`${rowIndex}-${colIndex}`}
+                      className={classNames({
+                        [styles['kaitify-table-inside']]: column.inside
+                      })}
+                      onMouseEnter={() => changeTableSize(column)}
+                      onClick={() => insert(column)}
+                    >
+                      <span />
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {specification && (
+            <div className={styles['kaitify-table-footer']}>
+              {specification.x} x {specification.y}
+            </div>
+          )}
+        </div>
+      }
+    >
+      <Icon name='kaitify-icon-table' />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/task/index.ts

@@ -0,0 +1,3 @@
+import TaskMenu from './task'
+export * from './props'
+export { TaskMenu }

package/src/editor/menu/built-in/task/props.ts

@@ -0,0 +1,10 @@
+export type TaskMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}

package/src/editor/menu/built-in/task/task.tsx

@@ -0,0 +1,36 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { TaskMenuPropsType } from './props'
+
+export default function TaskMenu(props: TaskMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否激活
+  const isActive = useMemo(() => {
+    return state.editor.value?.commands.allTask?.() ?? false
+  }, [state.editor])
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    if (isActive) {
+      state.editor.value?.commands.unsetTask?.()
+    } else {
+      state.editor.value?.commands.setTask?.()
+    }
+  }
+  return (
+    <Menu disabled={isDisabled} active={isActive} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-task' />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/underline/index.ts

@@ -0,0 +1,3 @@
+import UnderlineMenu from './underline'
+export * from './props'
+export { UnderlineMenu }

package/src/editor/menu/built-in/underline/props.ts

@@ -0,0 +1,10 @@
+export type UnderlineMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}