@kaitify/react 0.0.1-beta.1

package/src/editor/menu/built-in/clear-format/props.ts

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

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

@@ -0,0 +1,49 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { CodeMenuPropsType } from './props'
+
+export default function CodeMenu(props: CodeMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否激活
+  const isActive = useMemo(() => {
+    return state.editor.value?.commands.allCode?.() ?? false
+  }, [state.editor])
+
+  //是否禁用
+  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 = () => {
+    if (isActive) {
+      state.editor.value?.commands.unsetCode?.()
+    } else {
+      state.editor.value?.commands.setCode?.()
+    }
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={isActive} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-code' />
+    </Menu>
+  )
+}

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

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

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

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

package/src/editor/menu/built-in/code-block/code-block-languages.tsx

@@ -0,0 +1,73 @@
+import { useCallback, useMemo, useRef } from 'react'
+import { HljsLanguages, HljsLanguageType } from '@kaitify/core'
+import { useEditor } from '@/hooks'
+import { MenuDataType, MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { CodeBlockLanguagesMenuPropsType } from './props'
+
+export default function CodeBlockLanguagesMenu({ languages = [...HljsLanguages], ...props }: CodeBlockLanguagesMenuPropsType) {
+  const { state, t } = useEditor()
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+  //选项
+  const options = useMemo<MenuDataType[]>(() => {
+    return [
+      {
+        label: t('自动识别'),
+        value: ''
+      },
+      ...languages.map(item => {
+        return {
+          label: item.charAt(0).toLocaleUpperCase() + item.slice(1),
+          value: item
+        }
+      })
+    ]
+  }, [languages])
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    if (!state.editor.value.commands.getCodeBlock?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+  //选项是否激活
+  const isActive = useCallback(
+    (item: MenuDataType) => {
+      if (!state.editor.value?.selection.focused()) {
+        return false
+      }
+      const codeBlockNode = state.editor.value.commands.getCodeBlock?.()
+      if (!codeBlockNode) {
+        return false
+      }
+      if (item.value == '') {
+        return !codeBlockNode.hasMarks() || !codeBlockNode.marks!['kaitify-hljs']
+      }
+      return codeBlockNode.marks!['kaitify-hljs'] === item.value
+    },
+    [state.editor]
+  )
+  //选择的值
+  const selectedData = useMemo<MenuDataType | undefined>(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return options[0]
+    }
+    return options.find(item => isActive(item)) ?? options[0]
+  }, [state.editor, options])
+
+  //选择选项
+  const onSelect = (item: MenuDataType) => {
+    state.editor.value?.commands.updateCodeBlockLanguage?.(item.value as HljsLanguageType)
+  }
+
+  return (
+    <Menu ref={menuRef} disabled={isDisabled} active={false} popover data={options} itemActive={isActive} onSelect={onSelect} 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 }}>
+      {selectedData?.label ?? ''}
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/code-block/code-block.tsx

@@ -0,0 +1,36 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { CodeBlockMenuPropsType } from './props'
+
+export default function CodeBlockMenu(props: CodeBlockMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否激活
+  const isActive = useMemo(() => {
+    return state.editor.value?.commands.allCodeBlock?.() ?? 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.unsetCodeBlock?.()
+    } else {
+      state.editor.value?.commands.setCodeBlock?.()
+    }
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={isActive} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-code-block' />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/code-block/index.ts

@@ -0,0 +1,4 @@
+import CodeBlockMenu from './code-block'
+import CodeBlockLanguagesMenu from './code-block-languages'
+export * from './props'
+export { CodeBlockMenu, CodeBlockLanguagesMenu }

package/src/editor/menu/built-in/code-block/props.ts

@@ -0,0 +1,32 @@
+import { HljsLanguageType } from '@kaitify/core'
+import { MenuDataType, MenuPropsType } from '@/editor/menu/props'
+
+export type CodeBlockMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}
+
+export type CodeBlockLanguagesMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 语言列表
+   */
+  languages?: HljsLanguageType[]
+  /**
+   * 浮层属性
+   */
+  popoverProps?: Omit<NonNullable<MenuPropsType['popoverProps']>, 'onShow' | 'onShowing' | 'onShown' | 'onHide' | 'onHiding' | 'onHidden'>
+  /**
+   * 快捷键设置
+   */
+  shortcut?: { [key: MenuDataType['value']]: (e: KeyboardEvent) => boolean }
+}

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

@@ -0,0 +1,96 @@
+import { useCallback, useMemo, useRef } from 'react'
+import classNames from 'classnames'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import { Button } from '@/core/button'
+import { MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { ColorMenuPropsType } from './props'
+import styles from './style.module.less'
+
+const defaultColors: string[] = ['#000000', '#505050', '#808080', '#BBBBBB', '#CCCCCC', '#EEEEEE', '#F7F7F7', '#FFFFFF', '#EC1A0A', '#FF9900', '#FFFF00', '#07C160', '#00FFFF', '#0B73DE', '#9C00FF', '#FF00FF', '#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE', '#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD', '#e45649', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5', '#CE0000', '#E79439', '#EFC631', '#50a14f', '#4A7B8C', '#03A8F3', '#634AA5', '#A54A7B', '#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842', '#630000', '#7B3900', '#986801', '#295218', '#083139', '#003163', '#21104A', '#4A1031']
+
+export default function ColorMenu({ colors = defaultColors, ...props }: ColorMenuPropsType) {
+  const { state, t, dark } = useEditor()
+
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+  //是否禁用
+  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: string) => {
+      return state.editor.value?.commands.isColor?.(item) ?? false
+    },
+    [state.editor]
+  )
+
+  //设置颜色
+  const setColor = (val: string) => {
+    if (isActive(val)) {
+      return
+    }
+    state.editor.value?.commands.setColor?.(val)
+    menuRef.current?.hidePopover()
+  }
+  //移除颜色
+  const unsetColor = () => {
+    state.editor.value?.commands.removeTextStyle?.(['color'])
+    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-colors-panel'], {
+              [styles['kaitify-dark']]: dark
+            })}
+          >
+            <div className={styles['kaitify-colors-header']}>
+              <Button onClick={unsetColor} block large>
+                <Icon name='kaitify-icon-remove' />
+                <span className={styles['kaitify-colors-header-text']}>{t('默认颜色')}</span>
+              </Button>
+            </div>
+            <div className={styles['kaitify-colors-content']}>
+              {colors.map(item => (
+                <div
+                  key={item}
+                  className={classNames(styles['kaitify-colors-el'], {
+                    [styles['kaitify-color-el-active']]: isActive(item)
+                  })}
+                >
+                  <div style={{ background: item }} onClick={() => setColor(item)}></div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </>
+      }
+    >
+      <Icon name='kaitify-icon-font-color' />
+    </Menu>
+  )
+}

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

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

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

@@ -0,0 +1,16 @@
+import { MenuPropsType } from '@/editor/menu/props'
+
+export type ColorMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 颜色数组
+   */
+  colors?: string[]
+  /**
+   * 浮层属性
+   */
+  popoverProps?: Omit<NonNullable<MenuPropsType['popoverProps']>, 'onShow' | 'onShowing' | 'onShown' | 'onHide' | 'onHiding' | 'onHidden'>
+}

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

@@ -0,0 +1,62 @@
+.kaitify-colors-panel {
+  display: block;
+  width: 100%;
+  padding: @small-padding;
+
+  .kaitify-colors-header {
+    display: block;
+    width: 100%;
+    padding-bottom: @small-padding;
+    margin-bottom: @margin;
+    border-bottom: 1px solid @border-color;
+
+    .kaitify-colors-header-text {
+      margin-left: 10px;
+    }
+  }
+
+  .kaitify-colors-content {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 2px;
+
+    .kaitify-colors-el {
+      padding: 2px;
+      border: 1px solid transparent;
+      border-radius: 1px;
+
+      &.kaitify-color-el-active {
+        border-color: @theme;
+      }
+
+      & > div {
+        display: block;
+        width: 16px;
+        height: 16px;
+        border: 1px solid @border-color;
+        border-radius: 1px;
+        transition: all 300ms;
+
+        &:hover {
+          cursor: pointer;
+          transform: scale(1.2);
+        }
+      }
+    }
+  }
+
+  &.kaitify-dark {
+    .kaitify-colors-header {
+      border-bottom-color: @border-color-dark;
+    }
+
+    .kaitify-colors-content {
+      .kaitify-colors-el {
+        & > div {
+          border-color: @border-color-dark;
+        }
+      }
+    }
+  }
+}

package/src/editor/menu/built-in/decrease-indent/decrease-indent.tsx

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

package/src/editor/menu/built-in/decrease-indent/index.ts

@@ -0,0 +1,3 @@
+import DecreaseIndentMenu from './decrease-indent'
+export * from './props'
+export { DecreaseIndentMenu }

package/src/editor/menu/built-in/decrease-indent/props.ts

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

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

@@ -0,0 +1,143 @@
+import { useMemo, useRef } from 'react'
+import { Icon } from '@/core/icon'
+import { useEditor } from '@/hooks'
+import { MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { EmojiMenuPropsType } from './props'
+import styles from './style.module.less'
+
+/**
+ * ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇', '😉', '😍', '😘', '😗', '😚', '🥰', '😋', '😜', '🤪', '🤨', '😭', '😢', '😔', '😞', '😰', '😱', '😨', '😳', '😡', '😠', '🤬', '👍', '👎', '👏', '🙌', '👐', '🤝', '✌', '🤞', '🤘', '❤️', '💕', '💖', '💗', '💘', '💔', '❣', '🖤', '💙', '💚', '🍏', '🍎', '🍌', '🍉', '🍇', '🍓', '🍒', '🍑', '🍕', '🍔', '🍟', '🌭', '🍗', '🍞', '🚗', '🚕', '🚙', '🚌', '🚑', '🚓', '🚚', '🚲', '🚜', '🚂', '✈️', '🚀', '🎉', '🎊', '🎁', '🔥', '🌈', '⭐', '💡', '⏰', '📅', '📌', '🎶', '🎵']
+ */
+const defaultEmoji: string[] = [
+  '\u{1F600}',
+  '\u{1F603}',
+  '\u{1F604}',
+  '\u{1F601}',
+  '\u{1F606}',
+  '\u{1F605}',
+  '\u{1F602}',
+  '\u{1F923}',
+  '\u{1F60A}',
+  '\u{1F607}',
+  '\u{1F609}',
+  '\u{1F60D}',
+  '\u{1F618}',
+  '\u{1F617}',
+  '\u{1F61A}',
+  '\u{1F970}',
+  '\u{1F60B}',
+  '\u{1F61C}',
+  '\u{1F92A}',
+  '\u{1F928}',
+  '\u{1F62D}',
+  '\u{1F622}',
+  '\u{1F614}',
+  '\u{1F61E}',
+  '\u{1F630}',
+  '\u{1F631}',
+  '\u{1F628}',
+  '\u{1F633}',
+  '\u{1F621}',
+  '\u{1F620}',
+  '\u{1F92C}',
+  '\u{1F44D}',
+  '\u{1F44E}',
+  '\u{1F44F}',
+  '\u{1F64C}',
+  '\u{1F450}',
+  '\u{1F91D}',
+  '\u{270C}',
+  '\u{1F91E}',
+  '\u{1F918}',
+  '\u{2764}\u{FE0F}',
+  '\u{1F495}',
+  '\u{1F496}',
+  '\u{1F497}',
+  '\u{1F498}',
+  '\u{1F494}',
+  '\u{2763}',
+  '\u{1F5A4}',
+  '\u{1F499}',
+  '\u{1F49A}',
+  '\u{1F34F}',
+  '\u{1F34E}',
+  '\u{1F34C}',
+  '\u{1F349}',
+  '\u{1F347}',
+  '\u{1F353}',
+  '\u{1F352}',
+  '\u{1F351}',
+  '\u{1F355}',
+  '\u{1F354}',
+  '\u{1F35F}',
+  '\u{1F32D}',
+  '\u{1F357}',
+  '\u{1F35E}',
+  '\u{1F697}',
+  '\u{1F695}',
+  '\u{1F699}',
+  '\u{1F68C}',
+  '\u{1F691}',
+  '\u{1F693}',
+  '\u{1F69A}',
+  '\u{1F6B2}',
+  '\u{1F69C}',
+  '\u{1F682}',
+  '\u{2708}\u{FE0F}',
+  '\u{1F680}',
+  '\u{1F389}',
+  '\u{1F38A}',
+  '\u{1F381}',
+  '\u{1F525}',
+  '\u{1F308}',
+  '\u{2B50}',
+  '\u{1F4A1}',
+  '\u{23F0}',
+  '\u{1F4C5}',
+  '\u{1F4CC}',
+  '\u{1F3B6}',
+  '\u{1F3B5}'
+]
+
+export default function EmojiMenu({ data = defaultEmoji, ...props }: EmojiMenuPropsType) {
+  const { state } = useEditor()
+
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //插入标签
+  const setEmoji = (val: string) => {
+    state.editor.value?.insertText(val)
+    state.editor.value?.updateView()
+    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={styles['kaitify-emoji-panel']}>
+          {data.map((item, index) => (
+            <div key={index} className={styles['kaitify-emoji-el']}>
+              <div onClick={() => setEmoji(item)}>{item}</div>
+            </div>
+          ))}
+        </div>
+      }
+    >
+      <Icon name='kaitify-icon-emoji' />
+    </Menu>
+  )
+}

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

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

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

@@ -0,0 +1,16 @@
+import { MenuPropsType } from '@/editor/menu/props'
+
+export type EmojiMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 表情数组
+   */
+  data?: string[]
+  /**
+   * 浮层属性
+   */
+  popoverProps?: Omit<NonNullable<MenuPropsType['popoverProps']>, 'onShow' | 'onShowing' | 'onShown' | 'onHide' | 'onHiding' | 'onHidden'>
+}

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

@@ -0,0 +1,26 @@
+.kaitify-emoji-panel {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 2px;
+  width: 100%;
+  padding: @small-padding;
+
+  .kaitify-emoji-el {
+    padding: 2px;
+
+    & > div {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 18px;
+      width: 20px;
+      height: 20px;
+      transition: all 300ms;
+
+      &:hover {
+        cursor: pointer;
+        transform: scale(1.2);
+      }
+    }
+  }
+}