@kaitify/react 0.0.1-beta.1

package/src/core/tabs/tabs.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+import classNames from 'classnames'
+import { useEditor } from '@/hooks'
+import { TabsPropsType } from './props'
+import styles from './style.module.less'
+
+export default function Tabs({ data = [], ...props }: TabsPropsType) {
+  const { dark } = useEditor()
+
+  //当前选项
+  const [current, setCurrent] = useState<string | number>(props.defaultValue)
+
+  return (
+    <div
+      className={classNames(styles['kaitify-tabs'], {
+        [styles['kaitify-dark']]: dark
+      })}
+    >
+      <div className={styles['kaitify-tabs-header']}>
+        {data.map(item => (
+          <div
+            key={item.value}
+            className={classNames(styles['kaitify-tabs-header-item'], {
+              [styles['kaitify-tabs-header-item-active']]: item.value === current
+            })}
+            onClick={() => setCurrent(item.value)}
+          >
+            {item.label}
+          </div>
+        ))}
+      </div>
+      <div className={styles['kaitify-tabs-content']}>{typeof props.children === 'function' ? props.children(current) : props.children}</div>
+    </div>
+  )
+}

package/src/core/teleport/index.ts

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

package/src/core/teleport/props.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react'
+
+export type TeleportPropsType = {
+  /**
+   * 目标容器
+   */
+  to?: string | HTMLElement
+  /**
+   * 子元素
+   */
+  children?: ReactNode
+}

package/src/core/teleport/teleport.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { TeleportPropsType } from "./props";
+
+/**
+ * 传送组件
+ */
+export default function Teleport(props: TeleportPropsType) {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (typeof props.to === "string") {
+      const el = document.querySelector(props.to);
+      if (el) setContainer(el as HTMLElement);
+    } else if (props.to instanceof HTMLElement) {
+      setContainer(props.to);
+    } else {
+      setContainer(document.body)
+    }
+  }, [props.to]);
+
+  return container ? createPortal(props.children, container) : null
+}

package/src/editor/bubble/bubble.tsx

@@ -0,0 +1,244 @@
+import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef } from 'react'
+import { Instance, createPopper } from '@popperjs/core'
+import { event as DapEvent } from 'dap-util'
+import classNames from 'classnames'
+import { CSSTransition } from 'react-transition-group'
+import { Teleport } from '@/core/teleport'
+import { useEditor } from '@/hooks'
+import { BubblePropsType, BubbleRefType } from './props'
+import styles from './style.module.less'
+
+/**
+ * 气泡栏组件
+ */
+const Bubble = forwardRef<BubbleRefType, BubblePropsType>((props, ref) => {
+  //唯一id
+  const uid = useId()
+  //上下文数据
+  const { state, disabled, isMouseDown, el, dark } = useEditor()
+
+  //气泡元素
+  const elRef = useRef<HTMLDivElement | null>(null)
+  //popperjs实例
+  const popperInstance = useRef<Instance | null>(null)
+
+  //是否显示气泡栏
+  const shouldVisible = useMemo(() => {
+    if (disabled) {
+      return false
+    }
+    if (isMouseDown && props.hideOnMousedown) {
+      return false
+    }
+    return props.visible ?? false
+  }, [disabled, isMouseDown, props.hideOnMousedown, props.visible])
+
+  //销毁popperjs实例
+  const destroyPopperjs = () => {
+    if (popperInstance.current) {
+      popperInstance.current.destroy()
+      popperInstance.current = null
+    }
+  }
+  //获取编辑器内的光标位置
+  const getVirtualDomRect = () => {
+    if (!state.editor.value || !el) {
+      return null
+    }
+    if (state.editor.value.selection.focused()) {
+      if (props.match) {
+        const node = state.editor.value.getMatchNodeBySelection(props.match)
+        if (node) {
+          const dom = state.editor.value.findDom(node)
+          return dom.getBoundingClientRect()
+        }
+      }
+      const selection = window.getSelection()
+      if (!selection || !selection.rangeCount) return el.getBoundingClientRect()
+      const range = selection.getRangeAt(0)
+      const rects = range.getClientRects()
+      if (rects.length) {
+        const rect = rects[rects.length - 1]
+        return {
+          top: rect.top,
+          left: rect.left,
+          right: rect.left + rect.width,
+          bottom: rect.top + rect.height,
+          width: rect.width,
+          height: rect.height,
+          x: rect.left,
+          y: rect.top,
+          toJSON: () => {}
+        } as DOMRect
+      }
+    }
+    return el.getBoundingClientRect()
+  }
+  //更新气泡位置
+  const updatePosition = () => {
+    if (!shouldVisible || !elRef.current || !state.editor.value) {
+      return
+    }
+    const domRect = getVirtualDomRect()!
+    //销毁当前popperjs实例
+    destroyPopperjs()
+    //重新创建popperjs实例
+    popperInstance.current = createPopper(
+      {
+        getBoundingClientRect: () => domRect
+      },
+      elRef.current,
+      {
+        placement: 'bottom-start',
+        modifiers: [
+          //控制浮层的位置计算方式，包括使用 GPU 加速、是否启用自适应等
+          {
+            name: 'computeStyles',
+            options: {
+              adaptive: true, //启用自适应
+              gpuAcceleration: false //关闭GPU加速
+            }
+          },
+          //如果弹出框在预设的位置被页面边界或其他限制遮挡，popperjs会自动尝试翻转到其他位置。它会检查可用的视窗空间并自动调整位置，确保内容不会超出视窗或被遮挡。
+          {
+            name: 'flip',
+            options: {
+              enabled: true,
+              fallbackPlacements: ['bottom', 'bottom-end', 'top-start', 'top', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']
+            }
+          },
+          //控制offset为0
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 5]
+            }
+          },
+          //确保浮层不会超出指定的边界区域，通常用于当浮层过大或目标位置变化时自动修正浮层位置
+          {
+            name: 'preventOverflow',
+            options: {
+              enabled: true,
+              boundary: 'viewport',
+              padding: 5
+            }
+          }
+        ]
+      }
+    )
+  }
+  //滚动监听
+  const onScroll = (el: HTMLElement) => {
+    DapEvent.on(el, `scroll.kaitify_bubble_${uid}`, () => {
+      if (shouldVisible) {
+        updatePosition()
+      }
+    })
+    if (el.parentNode) {
+      onScroll(el.parentNode as HTMLElement)
+    }
+  }
+  //移除滚动监听
+  const removeScroll = (el: HTMLElement) => {
+    DapEvent.off(el, `scroll.kaitify_bubble_${uid}`)
+    if (el.parentNode) {
+      removeScroll(el.parentNode as HTMLElement)
+    }
+  }
+
+  //气泡栏显示前
+  const onShow = () => {
+    props.onShow?.(elRef.current as HTMLElement)
+  }
+  //气泡栏显示时
+  const onShowing = () => {
+    updatePosition()
+    props.onShowing?.(elRef.current as HTMLElement)
+  }
+  //气泡栏显示后
+  const onShown = () => {
+    props.onShown?.(elRef.current as HTMLElement)
+  }
+  //气泡栏隐藏前
+  const onHide = () => {
+    props.onHide?.(elRef.current as HTMLElement)
+  }
+  //气泡栏隐藏时
+  const onHiding = () => {
+    props.onHiding?.(elRef.current as HTMLElement)
+  }
+  //气泡栏隐藏后
+  const onHidden = () => {
+    destroyPopperjs()
+    props.onHidden?.(elRef.current as HTMLElement)
+  }
+
+  useImperativeHandle(ref, () => ({
+    elRef,
+    popperInstance
+  }))
+
+  //监听光标变化
+  useEffect(() => {
+    //更新气泡位置
+    updatePosition()
+  }, [state.selection])
+
+  //滚动监听设置
+  useEffect(() => {
+    if (el && shouldVisible) {
+      //先移滚动除监听
+      removeScroll(el)
+      //再设置滚动监听
+      onScroll(el)
+    }
+  }, [el, shouldVisible])
+
+  useEffect(() => {
+    return () => {
+      destroyPopperjs()
+      if (el) {
+        removeScroll(el)
+      }
+    }
+  }, [])
+
+  return (
+    <Teleport>
+      <CSSTransition
+        in={shouldVisible}
+        timeout={50}
+        classNames={{
+          enter: styles['kaitify-bubble-enter'],
+          enterActive: styles['kaitify-bubble-enter-active'],
+          exit: styles['kaitify-bubble-exit'],
+          exitActive: styles['kaitify-bubble-exit-active']
+        }}
+        unmountOnExit
+        nodeRef={elRef}
+        onEnter={onShow}
+        onEntering={onShowing}
+        onEntered={onShown}
+        onExit={onHide}
+        onExiting={onHiding}
+        onExited={onHidden}
+      >
+        <div
+          ref={elRef}
+          className={classNames(
+            styles['kaitify-bubble'],
+            {
+              [styles['kaitify-dark']]: dark
+            },
+            props.className
+          )}
+          style={{ zIndex: 5, ...props.style }}
+        >
+          {props.children}
+        </div>
+      </CSSTransition>
+    </Teleport>
+  )
+})
+
+export default Bubble

package/src/editor/bubble/index.ts

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

package/src/editor/bubble/props.ts

@@ -0,0 +1,65 @@
+import { KNodeMatchOptionType } from '@/index'
+import { Instance } from '@popperjs/core'
+import { CSSProperties, ReactNode } from 'react'
+
+/**
+ * 气泡栏组件的属性类型
+ */
+export type BubblePropsType = {
+  /**
+   * 是否显示
+   */
+  visible: boolean
+  /**
+   * 指定条件，每次更新气泡位置时会光标是否在符合条件的节点下，如果符合则根据该节点的真实dom进行定位
+   */
+  match?: KNodeMatchOptionType
+  /**
+   * 鼠标按下时是否不显示气泡栏
+   */
+  hideOnMousedown?: boolean
+  /**
+   * 默认插槽
+   */
+  children?: ReactNode
+  /**
+   * 样式
+   */
+  style?: CSSProperties
+  /**
+   * 样式类名
+   */
+  className?: string
+  /**
+   * 气泡栏显示前触发的事件
+   */
+  onShow?: (el: Element) => void
+  /**
+   * 气泡栏显示时触发的事件
+   */
+  onShowing?: (el: Element) => void
+  /**
+   * 气泡栏显示后触发的事件
+   */
+  onShown?: (el: Element) => void
+  /**
+   * 气泡栏隐藏前触发的事件
+   */
+  onHide?: (el: Element) => void
+  /**
+   * 气泡栏隐藏时触发的事件
+   */
+  onHiding?: (el: Element) => void
+  /**
+   * 气泡栏隐藏后触发的事件
+   */
+  onHidden?: (el: Element) => void
+}
+
+/**
+ * 气泡栏组件实例类型
+ */
+export type BubbleRefType = {
+  elRef: React.MutableRefObject<HTMLDivElement | null>
+  popperInstance: React.MutableRefObject<Instance | null>
+}

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

@@ -0,0 +1,33 @@
+.kaitify-bubble {
+  display: block;
+  background: @background-color;
+  border: 1px solid @border-color;
+  color: @font-color;
+  font-size: @font-size;
+  font-family: @font-family;
+  line-height: @line-height;
+  border-radius: @border-radius;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.06);
+
+  &.kaitify-dark {
+    background: @background-color-dark;
+    border-color: @border-color-dark;
+    color: @font-color-dark;
+    box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.04);
+  }
+}
+
+.kaitify-bubble-enter {
+  opacity: 0;
+}
+.kaitify-bubble-exit {
+  opacity: 1;
+}
+.kaitify-bubble-enter-active {
+  opacity: 1;
+  transition: opacity 50ms linear;
+}
+.kaitify-bubble-exit-active {
+  opacity: 0;
+  transition: opacity 50ms linear;
+}

package/src/editor/menu/built-in/align-center/align-center.tsx

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

package/src/editor/menu/built-in/align-center/index.ts

@@ -0,0 +1,3 @@
+import AlignCenterMenu from './align-center'
+export * from './props'
+export { AlignCenterMenu }

package/src/editor/menu/built-in/align-center/props.ts

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

package/src/editor/menu/built-in/align-justify/align-justify.tsx

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

package/src/editor/menu/built-in/align-justify/index.ts

@@ -0,0 +1,3 @@
+import AlignJustifyMenu from './align-justify'
+export * from './props'
+export { AlignJustifyMenu }

package/src/editor/menu/built-in/align-justify/props.ts

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

package/src/editor/menu/built-in/align-left/align-left.tsx

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

package/src/editor/menu/built-in/align-left/index.ts

@@ -0,0 +1,3 @@
+import AlignLeftMenu from './align-left'
+export * from './props'
+export { AlignLeftMenu }

package/src/editor/menu/built-in/align-left/props.ts

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

package/src/editor/menu/built-in/align-right/align-right.tsx

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

package/src/editor/menu/built-in/align-right/index.ts

@@ -0,0 +1,3 @@
+import AlignRightMenu from './align-right'
+export * from './props'
+export { AlignRightMenu }

package/src/editor/menu/built-in/align-right/props.ts

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