@kaitify/react 0.0.1-beta.1

package/src/editor/menu/built-in/wrap-down/wrap-down.tsx

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+import { KNode } from '@kaitify/core'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { WrapDownMenuPropsType } from './props'
+
+export default function WrapDownMenu(props: WrapDownMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    const matchNode = state.editor.value?.getMatchNodeBySelection(props.match)
+    if (!matchNode || !matchNode.isBlock() || matchNode.void || matchNode.fixed || matchNode.nested) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    if (!props.match) {
+      return
+    }
+    const matchNode = state.editor.value?.getMatchNodeBySelection(props.match)
+    if (!matchNode || !matchNode.isBlock() || matchNode.void || matchNode.fixed || matchNode.nested) {
+      return
+    }
+    const paragraph = KNode.create({
+      type: 'block',
+      tag: state.editor.value?.blockRenderTag,
+      children: [
+        {
+          type: 'closed',
+          tag: 'br'
+        }
+      ]
+    })
+    state.editor.value?.addNodeAfter(paragraph, matchNode)
+    state.editor.value?.setSelectionBefore(paragraph, 'all')
+    state.editor.value?.updateView()
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={false} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-wrap-down' />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/wrap-up/index.ts

@@ -0,0 +1,3 @@
+import WrapUpMenu from './wrap-up'
+export * from './props'
+export { WrapUpMenu }

package/src/editor/menu/built-in/wrap-up/props.ts

@@ -0,0 +1,16 @@
+import { KNodeMatchOptionType } from '@/index'
+
+export type WrapUpMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 指定换行的块节点条件
+   */
+  match: KNodeMatchOptionType
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}

package/src/editor/menu/built-in/wrap-up/wrap-up.tsx

@@ -0,0 +1,52 @@
+import { useMemo } from 'react'
+import { KNode } from '@kaitify/core'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { WrapUpMenuPropsType } from './props'
+
+export default function WrapUpMenu(props: WrapUpMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused() || !props.match) {
+      return true
+    }
+    const matchNode = state.editor.value.getMatchNodeBySelection(props.match)
+    if (!matchNode || !matchNode.isBlock() || matchNode.void || matchNode.fixed || matchNode.nested) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    if (!props.match) {
+      return
+    }
+    const matchNode = state.editor.value?.getMatchNodeBySelection(props.match)
+    if (!matchNode || !matchNode.isBlock() || matchNode.void || matchNode.fixed || matchNode.nested) {
+      return
+    }
+    const paragraph = KNode.create({
+      type: 'block',
+      tag: state.editor.value?.blockRenderTag,
+      children: [
+        {
+          type: 'closed',
+          tag: 'br'
+        }
+      ]
+    })
+    state.editor.value?.addNodeBefore(paragraph, matchNode)
+    state.editor.value?.setSelectionBefore(paragraph, 'all')
+    state.editor.value?.updateView()
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={false} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-wrap-up' />
+    </Menu>
+  )
+}

package/src/editor/menu/index.ts

@@ -0,0 +1,4 @@
+import Menu from './menu'
+export * from './props'
+export * from './built-in'
+export { Menu }

package/src/editor/menu/menu.tsx

@@ -0,0 +1,176 @@
+import { forwardRef, ReactNode, useEffect, useId, useImperativeHandle, useRef, useState } from 'react'
+import { event as DapEvent, common as DapCommon } from 'dap-util'
+import classNames from 'classnames'
+import { Popover, PopoverRefType } from '@/core/popover'
+import { Icon } from '@/core/icon'
+import { Button } from '@/core/button'
+import { useEditor } from '@/hooks'
+import { MenuDataType, MenuPropsType, MenuRefType } from './props'
+import styles from './style.module.less'
+
+/**
+ * 菜单组件
+ */
+const Menu = forwardRef<MenuRefType, MenuPropsType>(
+  (
+    {
+      data = [],
+      popover = false,
+      popoverProps = {
+        width: 'auto',
+        placement: 'bottom-start',
+        arrow: false,
+        trigger: 'click',
+        animation: 'translate'
+      },
+      ...props
+    }: MenuPropsType,
+    ref
+  ) => {
+    const uid = useId()
+    const { el, dark } = useEditor()
+    //popover组件实例
+    const popoverRef = useRef<PopoverRefType | null>(null)
+    //popover浮层是否显示
+    const [popoverVisible, setPopoverVisible] = useState(false)
+
+    //关闭浮层
+    const hidePopover = () => {
+      popoverRef.current?.hidePopover()
+    }
+    //显示浮层
+    const showPopover = () => {
+      popoverRef.current?.showPopover()
+    }
+    //浮层选项数据点击
+    const onSelect = (item: MenuDataType) => {
+      if (props.disabled || props.itemDisabled?.(item)) {
+        return
+      }
+      props.onSelect?.(item)
+      hidePopover()
+    }
+    //按钮点击
+    const onOperate = () => {
+      if (props.disabled || popover) {
+        return
+      }
+      props.onOperate?.()
+    }
+
+    //渲染插槽
+    const renderSlot = (option: MenuDataType, value?: ReactNode | ((option: MenuDataType) => ReactNode)) => {
+      if (typeof value === 'function') {
+        return value(option)
+      }
+      return value
+    }
+
+    useImperativeHandle(ref, () => ({
+      showPopover,
+      hidePopover
+    }))
+
+    //设置快捷键
+    useEffect(() => {
+      if (el && props.shortcut) {
+        DapEvent.off(el, `keydown.kaitify_menu_${uid}`)
+        DapEvent.on(el, `keydown.kaitify_menu_${uid}`, e => {
+          //popover的菜单
+          if (popover && DapCommon.isObject(props.shortcut)) {
+            const shortcut = props.shortcut as { [key: MenuDataType['value']]: (e: KeyboardEvent) => boolean }
+            data.forEach(item => {
+              if (typeof shortcut[item.value] == 'function') {
+                if (shortcut[item.value](e as KeyboardEvent)) {
+                  onSelect(item)
+                }
+              }
+            })
+          } else if (typeof props.shortcut == 'function') {
+            if (props.shortcut(e as KeyboardEvent)) {
+              onOperate()
+            }
+          }
+        })
+      }
+    }, [el])
+
+    useEffect(() => {
+      return () => {
+        if (el) {
+          DapEvent.off(el, `keydown.kaitify_menu_${uid}`)
+        }
+      }
+    }, [])
+
+    return (
+      <div className={styles['kaitify-menu']}>
+        <Popover
+          ref={popoverRef}
+          delay={100}
+          disabled={props.disabled || !popover}
+          zIndex={popoverProps.zIndex ?? 10}
+          animation={popoverProps.animation ?? 'translate'}
+          arrow={popoverProps.arrow}
+          placement={popoverProps.placement ?? 'bottom-start'}
+          trigger={popoverProps.trigger ?? 'click'}
+          width={popoverProps.width}
+          maxHeight={popoverProps.maxHeight}
+          minWidth={popoverProps.minWidth}
+          onShow={el => {
+            popoverProps.onShow?.(el)
+            setPopoverVisible(true)
+          }}
+          onShowing={popoverProps.onShowing}
+          onShown={popoverProps.onShown}
+          onHide={el => {
+            popoverProps.onHide?.(el)
+            setPopoverVisible(false)
+          }}
+          onHiding={popoverProps.onHiding}
+          onHidden={popoverProps.onHidden}
+          refer={
+            <Button onClick={onOperate} disabled={props.disabled} active={props.active}>
+              {props.children}
+              {popover && (
+                <Icon
+                  name='kaitify-icon-caret-down'
+                  className={classNames(styles['kaitify-menu-caret'], {
+                    [styles['kaitify-menu-caret-rotate']]: popoverVisible
+                  })}
+                />
+              )}
+            </Button>
+          }
+        >
+          {/* 自定义浮层内容 */}
+          {props.customPopover}
+          {/* 可选浮层内容 */}
+          {!props.customPopover && data.length > 0 && (
+            <div
+              className={classNames(styles['kaitify-menu-options'], {
+                [styles['kaitify-dark']]: dark
+              })}
+            >
+              {data.map(item => (
+                <div
+                  key={item.value}
+                  onClick={() => onSelect(item)}
+                  className={classNames(styles['kaitify-menu-option'], {
+                    [styles['kaitify-menu-option-active']]: props.itemActive?.(item),
+                    [styles['kaitify-disabled']]: props.itemDisabled?.(item)
+                  })}
+                >
+                  {props.customIcon ? renderSlot(item, props.customIcon) : !!item.icon && <Icon name={item.icon} className={styles['kaitify-menu-option-icon']} />}
+                  {props.customLabel ? renderSlot(item, props.customLabel) : <span>{item.label}</span>}
+                </div>
+              ))}
+            </div>
+          )}
+        </Popover>
+      </div>
+    )
+  }
+)
+
+export default Menu

package/src/editor/menu/props.ts

@@ -0,0 +1,90 @@
+import { PopoverPropsType } from '@/core/popover'
+import { ReactNode } from 'react'
+
+/**
+ * 菜单可选数据的类型
+ */
+export type MenuDataType = {
+  /**
+   * 显示的文字
+   */
+  label: string
+  /**
+   * 表示的值
+   */
+  value: string | number
+  /**
+   * 左侧显示的图标
+   */
+  icon?: string
+}
+
+/**
+ * 菜单组件的属性类型
+ */
+export type MenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 是否激活
+   */
+  active?: boolean
+  /**
+   * 选项禁用
+   */
+  itemDisabled?: (item: MenuDataType) => boolean
+  /**
+   * 选项是否激活
+   */
+  itemActive?: (item: MenuDataType) => boolean
+  /**
+   * 是否有浮层
+   */
+  popover?: boolean
+  /**
+   * 浮层属性
+   */
+  popoverProps?: Omit<PopoverPropsType, 'disabled' | 'delay' | 'refer' | 'children'>
+  /**
+   * 可选数据
+   */
+  data?: MenuDataType[]
+  /**
+   * 快捷键设置
+   */
+  shortcut?: ((e: KeyboardEvent) => boolean) | { [key: MenuDataType['value']]: (e: KeyboardEvent) => boolean }
+  /**
+   * 非浮层类型的菜单按钮点击触发的事件
+   */
+  onOperate?: () => void
+  /**
+   * 浮层类型的菜单按钮点击选项触发的事件
+   */
+  onSelect?: (value: MenuDataType) => void
+  /**
+   * 默认插槽
+   */
+  children: ReactNode
+  /**
+   * 自定义浮层内容
+   */
+  customPopover?: ReactNode
+  /**
+   * 自定义选项图标
+   */
+  customIcon?: ReactNode | ((option: MenuDataType) => ReactNode)
+  /**
+   * 自定义选项内容
+   */
+  customLabel?: ReactNode | ((option: MenuDataType) => ReactNode)
+}
+
+/**
+ * 菜单组件实例类型
+ */
+export type MenuRefType = {
+  showPopover: () => void
+  hidePopover: () => void
+}

package/src/editor/menu/style.module.less

@@ -0,0 +1,80 @@
+.kaitify-menu {
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 2px;
+  position: relative;
+
+  &,
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    outline: none;
+  }
+
+  .kaitify-menu-caret {
+    font-size: 12px;
+    transform: scale(0.72);
+    margin-left: 4px;
+    transition: transform 300ms linear;
+
+    &.kaitify-menu-caret-rotate {
+      transform: scale(0.72) rotate(180deg);
+    }
+  }
+}
+
+.kaitify-menu-options {
+  padding: @small-padding 0;
+
+  &,
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    outline: none;
+  }
+
+  .kaitify-menu-option {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: @small-padding @padding;
+    font-size: @font-size;
+    line-height: @line-height;
+    color: @font-color;
+    transition: background 300ms, color 300ms;
+
+    .kaitify-menu-option-icon {
+      margin-right: 4px;
+    }
+
+    &:not(.kaitify-disabled):hover {
+      cursor: pointer;
+      background: @lightest-theme;
+      color: @theme;
+    }
+
+    &:not(.kaitify-disabled):active {
+      background: @lighter-theme;
+      color: @theme;
+    }
+
+    &:not(.kaitify-disabled).kaitify-menu-option-active {
+      background: @lighter-theme;
+      color: @theme;
+    }
+
+    &.kaitify-disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  &.kaitify-dark {
+    .kaitify-menu-option {
+      color: @font-color-dark;
+    }
+  }
+}

package/src/editor/wrapper/index.ts

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

package/src/editor/wrapper/props.ts

@@ -0,0 +1,209 @@
+import { LocaleType } from '@/locale'
+import { Editor, Selection, EditorConfigureOptionType } from '@kaitify/core'
+import { CSSProperties, ReactNode } from 'react'
+
+/**
+ * 编辑器参数类型
+ */
+export type WrapperPropsType = {
+  /**
+   * 编辑器的值
+   */
+  value?: string
+  /**
+   * 样式
+   */
+  style?: CSSProperties
+  /**
+   * 样式类
+   */
+  className?: string
+  /**
+   * 编辑器是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 语言环境
+   */
+  locale?: LocaleType
+  /**
+   * 子元素，用于渲染气泡栏组件
+   */
+  children?: ReactNode | ((state: StateType) => ReactNode)
+  /**
+   * before插槽挂载的元素，如果不设置，则就放置在编辑器前面
+   */
+  appendBeforeTo?: string | HTMLElement
+  /**
+   * after插槽挂载的元素，如果不设置，则就放置在编辑器后面
+   */
+  appendAfterTo?: string | HTMLElement
+  /**
+   * before插槽
+   */
+  before?: ReactNode | ((state: StateType) => ReactNode)
+  /**
+   * after插槽
+   */
+  after?: ReactNode | ((state: StateType) => ReactNode)
+  /**
+   * 是否自动聚焦
+   */
+  autofocus?: EditorConfigureOptionType['autofocus']
+  /**
+   * 编辑器内容只有一个段落时的默认文本
+   */
+  placeholder?: EditorConfigureOptionType['placeholder']
+  /**
+   * 是否深色模式
+   */
+  dark?: EditorConfigureOptionType['dark']
+  /**
+   * 是否允许复制
+   */
+  allowCopy?: EditorConfigureOptionType['allowCopy']
+  /**
+   * 是否允许粘贴
+   */
+  allowPaste?: EditorConfigureOptionType['allowPaste']
+  /**
+   * 是否允许剪切
+   */
+  allowCut?: EditorConfigureOptionType['allowCut']
+  /**
+   * 是否允许粘贴html
+   */
+  allowPasteHtml?: EditorConfigureOptionType['allowPasteHtml']
+  /**
+   * 剪切板同时存在文件和html/text时，是否优先粘贴文件
+   */
+  priorityPasteFiles?: EditorConfigureOptionType['priorityPasteFiles']
+  /**
+   * 自定义编辑器内渲染文本节点的真实标签
+   */
+  textRenderTag?: EditorConfigureOptionType['textRenderTag']
+  /**
+   * 自定义编辑内渲染默认块级节点的真实标签，即段落标签
+   */
+  blockRenderTag?: EditorConfigureOptionType['blockRenderTag']
+  /**
+   * 自定义编辑器内定义需要置空的标签
+   */
+  emptyRenderTags?: EditorConfigureOptionType['emptyRenderTags']
+  /**
+   * 自定义编辑器内额外保留的标签
+   */
+  extraKeepTags?: EditorConfigureOptionType['extraKeepTags']
+  /**
+   * 自定义插件数组
+   */
+  extensions?: EditorConfigureOptionType['extensions']
+  /**
+   * 自定义节点数组格式化规则
+   */
+  formatRules?: EditorConfigureOptionType['formatRules']
+  /**
+   * 编辑器值改变事件
+   */
+  onChange?: (value: string) => void
+  /**
+   * 编辑器创建完成后触发的事件
+   */
+  onCreated?: (editor: Editor) => void
+  /**
+   * 自定义dom转为非文本节点的后续处理
+   */
+  onDomParseNode?: EditorConfigureOptionType['onDomParseNode']
+  /**
+   * 节点粘贴保留标记的自定义方法
+   */
+  onPasteKeepMarks?: EditorConfigureOptionType['onPasteKeepMarks']
+  /**
+   * 节点粘贴保留样式的自定义方法
+   */
+  onPasteKeepStyles?: EditorConfigureOptionType['onPasteKeepStyles']
+  /**
+   * 编辑器粘贴纯文本时触发，如果返回true则表示继续使用默认逻辑，返回false则不走默认逻辑，需要进行自定义处理
+   */
+  onPasteText?: EditorConfigureOptionType['onPasteText']
+  /**
+   * 编辑器粘贴html内容时触发，如果返回true则表示继续使用默认逻辑，返回false则不走默认逻辑，需要进行自定义处理
+   */
+  onPasteHtml?: EditorConfigureOptionType['onPasteHtml']
+  /**
+   * 编辑器粘贴图片时触发，如果返回true则表示继续使用默认逻辑，返回false则不走默认逻辑，需要进行自定义处理
+   */
+  onPasteImage?: EditorConfigureOptionType['onPasteImage']
+  /**
+   * 编辑器粘贴视频时触发，如果返回true则表示继续使用默认逻辑，返回false则不走默认逻辑，需要进行自定义处理
+   */
+  onPasteVideo?: EditorConfigureOptionType['onPasteVideo']
+  /**
+   * 编辑器粘贴除了图片和视频以外的文件时触发，需要自定义处理
+   */
+  onPasteFile?: EditorConfigureOptionType['onPasteFile']
+  /**
+   * 在删除和换行操作中块节点节点从其父节点中抽离出去成为与父节点同级的节点后触发，如果返回true则表示继续使用默认逻辑，会将该节点转为段落，返回false则不走默认逻辑，需要自定义处理
+   */
+  onDetachMentBlockFromParent?: EditorConfigureOptionType['onDetachMentBlockFromParent']
+  /**
+   * 编辑器updateView执行时，通过比对新旧节点数组获取需要格式化的节点，在这些节点被格式化前，触发此方法，回调参数即当前需要被格式化的节点，该方法返回一个节点，返回的节点将会被格式化，如果你不需要任何特殊处理，返回入参提供的节点即可
+   */
+  onBeforePatchNodeToFormat?: EditorConfigureOptionType['onBeforePatchNodeToFormat']
+  /**
+   * 编辑器光标发生变化触发的事件
+   */
+  onSelectionUpdate?: EditorConfigureOptionType['onSelectionUpdate']
+  /**
+   * 编辑器进行换行时触发的事件
+   */
+  onInsertParagraph?: EditorConfigureOptionType['onInsertParagraph']
+  /**
+   * 编辑器执行删除操作完成的时候触发的事件
+   */
+  onDeleteComplete?: EditorConfigureOptionType['onDeleteComplete']
+  /**
+   * 编辑器内键盘按下触发的事件
+   */
+  onKeydown?: EditorConfigureOptionType['onKeydown']
+  /**
+   * 编辑器内键盘松开触发的事件
+   */
+  onKeyup?: EditorConfigureOptionType['onKeyup']
+  /**
+   * 编辑器获取光标触发的事件
+   */
+  onFocus?: EditorConfigureOptionType['onFocus']
+  /**
+   * 编辑器失去光标触发的事件
+   */
+  onBlur?: EditorConfigureOptionType['onBlur']
+  /**
+   * 编辑器视图更新前触发的事件
+   */
+  onBeforeUpdateView?: EditorConfigureOptionType['onBeforeUpdateView']
+  /**
+   * 编辑器视图更新后触发的事件
+   */
+  onAfterUpdateView?: EditorConfigureOptionType['onAfterUpdateView']
+}
+
+/**
+ * 编辑器状态对象
+ */
+export type StateType = {
+  editor: {
+    value?: Editor
+  }
+  selection: {
+    value?: Selection
+  }
+}
+
+/**
+ * 编辑器实例对象
+ */
+export type WrapperRefType = {
+  elRef: React.MutableRefObject<HTMLDivElement | null>
+  state: StateType
+}