@kaitify/react 0.0.1-beta.1

package/src/editor/menu/built-in/font-family/font-family.tsx

@@ -0,0 +1,99 @@
+import { useCallback, useMemo, useRef } from 'react'
+import { useEditor } from '@/hooks'
+import { MenuDataType, MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { FontFamilyMenuPropsType } from './props'
+
+export default function FontFamilyMenu({
+  data = [
+    {
+      label: '黑体',
+      value: '黑体,黑体-简'
+    },
+    {
+      label: '华文仿宋',
+      value: '华文仿宋'
+    },
+    {
+      label: '楷体',
+      value: '楷体,楷体-简'
+    },
+    {
+      label: '华文楷体',
+      value: '华文楷体'
+    },
+    {
+      label: '宋体',
+      value: '宋体,宋体-简'
+    },
+    {
+      label: 'Arial',
+      value: 'Arial'
+    },
+    {
+      label: 'Consolas',
+      value: 'Consolas,monospace'
+    }
+  ],
+  ...props
+}: FontFamilyMenuPropsType) {
+  const { state, t } = useEditor()
+
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+
+  //选项
+  const options = useMemo<MenuDataType[]>(() => {
+    return [
+      {
+        label: t('默认字体'),
+        value: ''
+      },
+      ...data
+    ]
+  }, [data])
+  //是否禁用
+  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
+  }, [state.editor, props.disabled])
+  //选项是否激活
+  const isActive = useCallback(
+    (item: MenuDataType) => {
+      return state.editor.value?.commands.isFontFamily?.(item.value as string) ?? false
+    },
+    [state.editor]
+  )
+  //选择的值
+  const selectedData = useMemo<MenuDataType>(() => {
+    return options.find(item => isActive(item)) ?? options[0]
+  }, [options, isActive])
+
+  //选择选项
+  const onSelect = (item: MenuDataType) => {
+    if (item.value == '') {
+      state.editor.value?.commands.removeTextStyle?.(['fontFamily'])
+    } else if (isActive(item)) {
+      state.editor.value?.updateRealSelection()
+    } else {
+      state.editor.value?.commands.setFontFamily?.(item.value as string)
+    }
+  }
+
+  return (
+    <Menu ref={menuRef} disabled={isDisabled} active={false} popover data={options} itemActive={isActive} shortcut={props.shortcut} popoverProps={{ width: props.popoverProps?.width, maxHeight: props.popoverProps?.maxHeight ?? 240, minWidth: props.popoverProps?.minWidth ?? 90, animation: props.popoverProps?.animation, arrow: props.popoverProps?.arrow, placement: props.popoverProps?.placement, trigger: props.popoverProps?.trigger, zIndex: props.popoverProps?.zIndex }} onSelect={onSelect}>
+      {selectedData.label ?? ''}
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/font-family/index.ts

@@ -0,0 +1,3 @@
+import FontFamilyMenu from './font-family'
+export * from './props'
+export { FontFamilyMenu }

package/src/editor/menu/built-in/font-family/props.ts

@@ -0,0 +1,20 @@
+import { MenuDataType, MenuPropsType } from '@/editor/menu/props'
+
+export type FontFamilyMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 选项数组
+   */
+  data?: MenuDataType[]
+  /**
+   * 浮层属性
+   */
+  popoverProps?: Omit<NonNullable<MenuPropsType['popoverProps']>, 'onShow' | 'onShowing' | 'onShown' | 'onHide' | 'onHiding' | 'onHidden'>
+  /**
+   * 快捷键设置
+   */
+  shortcut?: { [key: MenuDataType['value']]: (e: KeyboardEvent) => boolean }
+}

package/src/editor/menu/built-in/font-size/font-size.tsx

@@ -0,0 +1,110 @@
+import { useCallback, useMemo, useRef } from 'react'
+import { useEditor } from '@/hooks'
+import { MenuDataType, MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { FontSizeMenuPropsType } from './props'
+
+export default function FontSizeMenu({
+  data = [
+    {
+      label: '12px',
+      value: '12px'
+    },
+    {
+      label: '14px',
+      value: '14px'
+    },
+    {
+      label: '16px',
+      value: '16px'
+    },
+    {
+      label: '18px',
+      value: '18px'
+    },
+    {
+      label: '20px',
+      value: '20px'
+    },
+    {
+      label: '24px',
+      value: '24px'
+    },
+    {
+      label: '28px',
+      value: '28px'
+    },
+    {
+      label: '32px',
+      value: '32px'
+    },
+    {
+      label: '36px',
+      value: '36px'
+    },
+    {
+      label: '40px',
+      value: '40px'
+    }
+  ],
+  ...props
+}: FontSizeMenuPropsType) {
+  const { state, t } = useEditor()
+
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+  //选项
+  const options = useMemo<MenuDataType[]>(() => {
+    return [
+      {
+        label: t('默认字号'),
+        value: ''
+      },
+      ...data
+    ]
+  }, [data])
+  //是否禁用
+  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 isActive = useCallback(
+    (item: MenuDataType) => {
+      return state.editor.value?.commands.isFontSize?.(item.value as string) ?? false
+    },
+    [state.editor]
+  )
+  //选择的值
+  const selectedData = useMemo<MenuDataType>(() => {
+    return options.find(item => isActive(item)) ?? options[0]
+  }, [options, isActive])
+
+  //选择选项
+  const onSelect = (item: MenuDataType) => {
+    if (item.value == '') {
+      state.editor.value?.commands.removeTextStyle?.(['fontSize'])
+    } else if (isActive(item)) {
+      state.editor.value?.updateRealSelection()
+    } else {
+      state.editor.value?.commands.setFontSize?.(item.value as string)
+    }
+  }
+
+  return (
+    <Menu ref={menuRef} disabled={isDisabled} active={false} popover data={options} itemActive={isActive} shortcut={props.shortcut} popoverProps={{ width: props.popoverProps?.width, maxHeight: props.popoverProps?.maxHeight ?? 240, minWidth: props.popoverProps?.minWidth ?? 80, animation: props.popoverProps?.animation, arrow: props.popoverProps?.arrow, placement: props.popoverProps?.placement, trigger: props.popoverProps?.trigger, zIndex: props.popoverProps?.zIndex }} onSelect={onSelect}>
+      {selectedData.label ?? ''}
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/font-size/index.ts

@@ -0,0 +1,3 @@
+import FontSizeMenu from './font-size'
+export * from './props'
+export { FontSizeMenu }

package/src/editor/menu/built-in/font-size/props.ts

@@ -0,0 +1,20 @@
+import { MenuDataType, MenuPropsType } from '@/editor/menu/props'
+
+export type FontSizeMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 选项数组
+   */
+  data?: MenuDataType[]
+  /**
+   * 浮层属性
+   */
+  popoverProps?: Omit<NonNullable<MenuPropsType['popoverProps']>, 'onShow' | 'onShowing' | 'onShown' | 'onHide' | 'onHiding' | 'onHidden'>
+  /**
+   * 快捷键设置
+   */
+  shortcut?: { [key: MenuDataType['value']]: (e: KeyboardEvent) => boolean }
+}

package/src/editor/menu/built-in/full-screen/full-screen.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { FullScreenMenuPropsType } from './props'
+
+export default function FullScreenMenu({ zIndex = 100, ...props }: FullScreenMenuPropsType) {
+  const { state } = useEditor()
+
+  //绑定的全屏dom
+  const targetDom = useRef<HTMLElement | null>(null)
+
+  //是否全屏
+  const [isFullScreen, setIsFullScreen] = useState(false)
+
+  //是否激活
+  const isActive = useMemo(() => {
+    return !!targetDom.current && isFullScreen
+  }, [targetDom.current, isFullScreen])
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    if (isActive) {
+      if (targetDom.current) {
+        targetDom.current.style.setProperty('position', '')
+        targetDom.current.style.setProperty('left', '')
+        targetDom.current.style.setProperty('top', '')
+        targetDom.current.style.setProperty('z-index', '')
+        targetDom.current.style.setProperty('width', '')
+        targetDom.current.style.setProperty('height', '')
+        setIsFullScreen(false)
+      }
+    } else {
+      if (targetDom.current) {
+        targetDom.current.style.setProperty('position', 'fixed', 'important')
+        targetDom.current.style.setProperty('left', '0px', 'important')
+        targetDom.current.style.setProperty('top', '0px', 'important')
+        targetDom.current.style.setProperty('z-index', `${zIndex}`, 'important')
+        targetDom.current.style.setProperty('width', '100vw', 'important')
+        targetDom.current.style.setProperty('height', '100vh', 'important')
+        setIsFullScreen(true)
+      }
+    }
+  }
+
+  useEffect(() => {
+    targetDom.current = document.body.querySelector(props.target)
+    return () => {
+      targetDom.current = null
+    }
+  }, [])
+
+  return (
+    <Menu disabled={isDisabled} active={isActive} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-full-screen' />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/full-screen/index.ts

@@ -0,0 +1,3 @@
+import FullScreenMenu from './full-screen'
+export * from './props'
+export { FullScreenMenu }

package/src/editor/menu/built-in/full-screen/props.ts

@@ -0,0 +1,18 @@
+export type FullScreenMenuPropsType = {
+  /**
+   * 指定需要设置全屏的dom的选择器
+   */
+  target: string
+  /**
+   * 全屏层级
+   */
+  zIndex?: number
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}

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

@@ -0,0 +1,101 @@
+import { useCallback, useMemo, useRef } from 'react'
+import { HeadingLevelType } from '@kaitify/core'
+import { useEditor } from '@/hooks'
+import { MenuDataType, MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { HeadingMenuPropsType } from './props'
+
+export default function HeadingMenu(props: HeadingMenuPropsType) {
+  const { state, t } = useEditor()
+
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+  //选项
+  const options = useMemo<MenuDataType[]>(() => {
+    const baseOptions: MenuDataType[] = [
+      {
+        label: t('一级标题'),
+        value: 1
+      },
+      {
+        label: t('二级标题'),
+        value: 2
+      },
+      {
+        label: t('三级标题'),
+        value: 3
+      },
+      {
+        label: t('四级标题'),
+        value: 4
+      },
+      {
+        label: t('五级标题'),
+        value: 5
+      },
+      {
+        label: t('六级标题'),
+        value: 6
+      }
+    ]
+    return [
+      ...(props.data || baseOptions),
+      {
+        label: t('正文'),
+        value: 0
+      }
+    ]
+  }, [props.data])
+
+  //选项对应的字体大小
+  const fontSizeMap: Record<number, string> = {
+    0: '14px',
+    1: '24px',
+    2: '22px',
+    3: '20px',
+    4: '18px',
+    5: '16px',
+    6: '15px'
+  }
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+  //选项是否激活
+  const isActive = useCallback(
+    (value: HeadingLevelType) => {
+      //正文处理
+      if (value === 0) {
+        if (isActive(1) || isActive(2) || isActive(3) || isActive(4) || isActive(5) || isActive(6)) {
+          return false
+        }
+        return true
+      }
+      return state.editor.value?.commands.allHeading?.(value) ?? false
+    },
+    [state.editor]
+  )
+  //选择的值
+  const selectedData = useMemo<MenuDataType>(() => {
+    return options.find(item => isActive(item.value as HeadingLevelType)) ?? options[options.length - 1]
+  }, [options, isActive])
+
+  //选择选项
+  const onSelect = (item: MenuDataType) => {
+    if (isActive(item.value as HeadingLevelType)) {
+      state.editor.value?.commands.unsetHeading?.(item.value as HeadingLevelType)
+    } else {
+      state.editor.value?.commands.setHeading?.(item.value as HeadingLevelType)
+    }
+  }
+
+  return (
+    <Menu ref={menuRef} disabled={isDisabled} active={false} popover data={options} itemActive={item => isActive(item.value as HeadingLevelType)} shortcut={props.shortcut} popoverProps={{ width: props.popoverProps?.width, maxHeight: props.popoverProps?.maxHeight ?? 240, minWidth: props.popoverProps?.minWidth ?? 120, animation: props.popoverProps?.animation, arrow: props.popoverProps?.arrow, placement: props.popoverProps?.placement, trigger: props.popoverProps?.trigger, zIndex: props.popoverProps?.zIndex }} onSelect={onSelect} customLabel={option => <span style={{ fontSize: fontSizeMap[option.value as number] }}>{option.label}</span>}>
+      {selectedData.label ?? ''}
+    </Menu>
+  )
+}

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

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

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

@@ -0,0 +1,20 @@
+import { MenuDataType, MenuPropsType } from '@/editor/menu/props'
+
+export type HeadingMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 选项数组
+   */
+  data?: MenuDataType[]
+  /**
+   * 浮层属性
+   */
+  popoverProps?: Omit<NonNullable<MenuPropsType['popoverProps']>, 'onShow' | 'onShowing' | 'onShown' | 'onHide' | 'onHiding' | 'onHidden'>
+  /**
+   * 快捷键设置
+   */
+  shortcut?: { [key: MenuDataType['value']]: (e: KeyboardEvent) => boolean }
+}

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

@@ -0,0 +1,40 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { HorizontalMenuPropsType } from './props'
+
+export default function HorizontalMenu(props: HorizontalMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    if (state.editor.value.commands.hasAttachment?.()) {
+      return true
+    }
+    if (state.editor.value.commands.hasMath?.()) {
+      return true
+    }
+    if (state.editor.value.commands.hasLink?.()) {
+      return true
+    }
+    if (state.editor.value.commands.hasCodeBlock?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    state.editor.value?.commands.setHorizontal?.()
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={false} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-separator' />
+    </Menu>
+  )
+}

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

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

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

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