@kaitify/react 0.0.1-beta.1

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

@@ -0,0 +1,46 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { UnderlineMenuPropsType } from './props'
+
+export default function UnderlineMenu(props: UnderlineMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否激活
+  const isActive = useMemo(() => {
+    return state.editor.value?.commands.isUnderline?.() ?? 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.unsetUnderline?.()
+    } else {
+      state.editor.value?.commands.setUnderline?.()
+    }
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={isActive} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-underline' />
+    </Menu>
+  )
+}

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

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

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

@@ -0,0 +1,6 @@
+export type UndoMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+}

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

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

package/src/editor/menu/built-in/unordered-list/index.ts

@@ -0,0 +1,3 @@
+import UnorderedListMenu from './unordered-list'
+export * from './props'
+export { UnorderedListMenu }

package/src/editor/menu/built-in/unordered-list/props.ts

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

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

@@ -0,0 +1,16 @@
+.kaitify-unordered-list {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  width: 100%;
+  padding: @small-padding;
+
+  .kaitify-unordered-list-item {
+    padding: @small-padding;
+
+    :deep(.kaitify-button) {
+      width: 40px;
+      padding: 0;
+    }
+  }
+}

package/src/editor/menu/built-in/unordered-list/unordered-list.tsx

@@ -0,0 +1,85 @@
+import { useCallback, useMemo, useRef } from 'react'
+import { UnorderListType } from '@kaitify/core'
+import { useEditor } from '@/hooks'
+import { Button } from '@/core/button'
+import { Icon } from '@/core/icon'
+import { MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { UnorderedListMenuPropsType } from './props'
+import styles from './style.module.less'
+
+export default function UnorderedListMenu(props: UnorderedListMenuPropsType) {
+  const { state } = useEditor()
+
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+  //有序列表序标列表
+  const listTypes: UnorderListType[] = ['disc', 'square', 'circle']
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //选项是否激活
+  const itemActive = useCallback(
+    (item: UnorderListType) => {
+      return (
+        state.editor.value?.commands.allList?.({
+          ordered: false,
+          listType: item
+        }) ?? false
+      )
+    },
+    [state.editor]
+  )
+  //菜单是否激活
+  const isActive = useMemo(() => {
+    return (
+      state.editor.value?.commands.allList?.({
+        ordered: false
+      }) ?? false
+    )
+  }, [state.editor])
+
+  //选择选项
+  const onSelect = (item: UnorderListType) => {
+    if (itemActive(item)) {
+      state.editor.value?.commands.unsetList?.({
+        ordered: false,
+        listType: item
+      })
+    } else {
+      state.editor.value?.commands.setList?.({
+        ordered: false,
+        listType: item
+      })
+    }
+    menuRef.current?.hidePopover()
+  }
+
+  return (
+    <Menu
+      ref={menuRef}
+      disabled={isDisabled}
+      active={isActive}
+      popover
+      popoverProps={{ width: props.popoverProps?.width ?? 160, 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-unordered-list']}>
+          {listTypes.map(item => (
+            <div key={item} className={styles['kaitify-unordered-list-item']}>
+              <Button large active={itemActive(item)} onClick={() => onSelect(item)}>
+                <Icon name={'kaitify-icon-list-' + item} />
+              </Button>
+            </div>
+          ))}
+        </div>
+      }
+    >
+      <Icon name='kaitify-icon-list-disc' />
+    </Menu>
+  )
+}

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

@@ -0,0 +1,6 @@
+import VideoMenu from './video'
+import VideoControlsMenu from './video-controls'
+import VideoMutedMenu from './video-muted'
+import VideoLoopMenu from './video-loop'
+export * from './props'
+export { VideoMenu, VideoControlsMenu, VideoMutedMenu, VideoLoopMenu }

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

@@ -0,0 +1,60 @@
+import { MenuPropsType } from '@/editor/menu/props'
+
+export type VideoMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 初始视频宽度
+   */
+  width?: string | number
+  /**
+   * tabs配置
+   */
+  tabs?: {
+    data: ('remote' | 'upload')[]
+    default: 'remote' | 'upload'
+  }
+  /**
+   * 自定义上传方法
+   */
+  customUpload?: (file: File) => string | Promise<string>
+  /**
+   * 浮层属性
+   */
+  popoverProps?: Omit<NonNullable<MenuPropsType['popoverProps']>, 'onShow' | 'onShowing' | 'onShown' | 'onHide' | 'onHiding' | 'onHidden'>
+}
+
+export type VideoControlsMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}
+
+export type VideoMutedMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}
+
+export type VideoLoopMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 快捷键设置
+   */
+  shortcut?: (e: KeyboardEvent) => boolean
+}

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

@@ -0,0 +1,92 @@
+.kaitify-video-upload {
+  display: block;
+  width: 100%;
+
+  .kaitify-video-upload-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 80px;
+    font-size: 30px;
+    position: relative;
+    opacity: 0.7;
+    transition: all 300ms;
+
+    input[type='file'] {
+      opacity: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+    }
+
+    &:hover {
+      opacity: 1;
+
+      input[type='file'] {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .kaitify-video-upload-footer {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    padding: @padding;
+  }
+}
+
+.kaitify-video-remote {
+  display: block;
+  width: 100%;
+  padding: @small-padding @padding;
+
+  input[type='url'] {
+    display: block;
+    width: 100%;
+    border: none;
+    border-bottom: 1px solid @border-color;
+    font-size: @font-size;
+    font-family: @font-family;
+    line-height: @line-height;
+    color: @font-color;
+    background: transparent;
+    padding: @small-padding 0;
+    margin-bottom: @margin;
+    transition: all 300ms;
+
+    &:focus {
+      border-bottom-color: @theme;
+    }
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      opacity: 0.5;
+      font-family: @font-family;
+      color: inherit;
+    }
+  }
+
+  .kaitify-video-remote-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  &.kaitify-dark {
+    input[type='url'] {
+      border-bottom-color: @border-color-dark;
+      color: @font-color-dark;
+
+      &:focus {
+        border-bottom-color: @theme;
+      }
+    }
+  }
+}

package/src/editor/menu/built-in/video/video-controls.tsx

@@ -0,0 +1,44 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { VideoControlsMenuPropsType } from './props'
+
+export default function VideoControlsMenu(props: VideoControlsMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否激活
+  const isActive = useMemo(() => {
+    const videoNode = state.editor.value?.commands.getVideo?.()
+    if (!videoNode) {
+      return false
+    }
+    return videoNode.hasMarks() && videoNode.marks!.hasOwnProperty('controls')
+  }, [state.editor])
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.commands.getVideo?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    if (isActive) {
+      state.editor.value?.commands.updateVideo?.({
+        controls: false
+      })
+    } else {
+      state.editor.value?.commands.updateVideo?.({
+        controls: true
+      })
+    }
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={isActive} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-controls' />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/video/video-loop.tsx

@@ -0,0 +1,47 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { VideoLoopMenuPropsType } from './props'
+
+export default function VideoLoopMenu(props: VideoLoopMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否激活
+  const isActive = useMemo(() => {
+    const videoNode = state.editor.value?.commands.getVideo?.()
+    if (!videoNode) {
+      return false
+    }
+    return videoNode.hasMarks() && videoNode.marks!.hasOwnProperty('loop')
+  }, [state.editor])
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    if (!state.editor.value.commands.getVideo?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    if (isActive) {
+      state.editor.value?.commands.updateVideo?.({
+        loop: false
+      })
+    } else {
+      state.editor.value?.commands.updateVideo?.({
+        loop: true
+      })
+    }
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={isActive} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-loop' />
+    </Menu>
+  )
+}

package/src/editor/menu/built-in/video/video-muted.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { VideoMutedMenuPropsType } from './props'
+
+export default function VideoMutedMenu(props: VideoMutedMenuPropsType) {
+  const { state } = useEditor()
+
+  //是否激活
+  const isActive = useMemo(() => {
+    const videoNode = state.editor.value?.commands.getVideo?.()
+    if (!videoNode) {
+      return false
+    }
+    return videoNode.hasMarks() && videoNode.marks!.hasOwnProperty('muted')
+  }, [state.editor])
+
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    if (!state.editor.value.commands.getVideo?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //方法
+  const onOperate = () => {
+    if (isActive) {
+      state.editor.value?.commands.updateVideo?.({
+        muted: false
+      })
+    } else {
+      state.editor.value?.commands.updateVideo?.({
+        muted: true
+      })
+    }
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={isActive} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-muted' />
+    </Menu>
+  )
+}

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

@@ -0,0 +1,138 @@
+import React, { useMemo, useRef, useState } from 'react'
+import { file as DapFile } from 'dap-util'
+import { useEditor } from '@/hooks'
+import { SetVideoOptionType } from '@kaitify/core'
+import { Tabs, TabsPropsType } from '@/core/tabs'
+import { Checkbox } from '@/core/checkbox'
+import { Button } from '@/core/button'
+import { Icon } from '@/core/icon'
+import { MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { VideoMenuPropsType } from './props'
+import styles from './style.module.less'
+import classNames from 'classnames'
+
+export default function VideoMenu({
+  tabs = {
+    data: ['remote', 'upload'],
+    default: 'remote'
+  },
+  ...props
+}: VideoMenuPropsType) {
+  const { state, t, dark } = useEditor()
+
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+  //远程视频数据
+  const [remoteData, setRemoteData] = useState<SetVideoOptionType>({
+    src: '',
+    autoplay: false
+  })
+  //选项卡数据
+  const tabData = useMemo<TabsPropsType['data']>(() => {
+    return tabs.data.map(item => {
+      return [
+        {
+          label: t('远程地址'),
+          value: 'remote'
+        },
+        {
+          label: t('本地上传'),
+          value: 'upload'
+        }
+      ].find(v => v.value == item)!
+    })
+  }, [tabs])
+  //是否禁用
+  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.hasCodeBlock?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //选择本地视频
+  const fileChange = async (e: React.ChangeEvent) => {
+    const file = (e.currentTarget as HTMLInputElement).files?.[0]
+    if (!file) {
+      return
+    }
+    const url = typeof props.customUpload == 'function' ? await props.customUpload(file) : await DapFile.dataFileToBase64(file)
+    if (!url) {
+      return
+    }
+    state.editor.value?.commands.setVideo?.({
+      src: url,
+      width: typeof props.width == 'number' ? `${props.width}px` : props.width,
+      autoplay: remoteData.autoplay
+    })
+    menuRef.current?.hidePopover()
+  }
+  //插入远程视频
+  const insert = async () => {
+    if (!remoteData.src) {
+      return
+    }
+    state.editor.value?.commands.setVideo?.({
+      src: remoteData.src,
+      width: typeof props.width == 'number' ? `${props.width}px` : props.width,
+      autoplay: remoteData.autoplay
+    })
+    menuRef.current?.hidePopover()
+  }
+
+  return (
+    <Menu
+      ref={menuRef}
+      disabled={isDisabled}
+      active={false}
+      popover
+      popoverProps={{ width: props.popoverProps?.width ?? 300, 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={
+        <Tabs defaultValue={tabs.default} data={tabData}>
+          {current => (
+            <>
+              {current === 'remote' && (
+                <div
+                  className={classNames(styles['kaitify-video-remote'], {
+                    [styles['kaitify-dark']]: dark
+                  })}
+                >
+                  <input value={remoteData.src} onChange={e => setRemoteData(oldValue => ({ ...oldValue, src: e.target.value }))} placeholder={t('视频地址')} type='url' />
+                  <div className={styles['kaitify-video-remote-footer']}>
+                    <Checkbox checked={remoteData.autoplay} onChange={v => setRemoteData(oldValue => ({ ...oldValue, autoplay: v }))} label={t('是否自动播放')} />
+                    <Button onClick={insert} disabled={!remoteData.src}>
+                      {t('插入')}
+                    </Button>
+                  </div>
+                </div>
+              )}
+              {current === 'upload' && (
+                <div className={styles['kaitify-video-upload']}>
+                  <div className={styles['kaitify-video-upload-wrapper']}>
+                    <input type='file' accept='video/*' onChange={fileChange} />
+                    <Icon name='kaitify-icon-upload' />
+                  </div>
+                  <div className={styles['kaitify-video-upload-footer']}>
+                    <Checkbox checked={remoteData.autoplay} onChange={v => setRemoteData(oldValue => ({ ...oldValue, autoplay: v }))} label={t('是否自动播放')} />
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </Tabs>
+      }
+    >
+      <Icon name='kaitify-icon-video' />
+    </Menu>
+  )
+}

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

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

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

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