@kaitify/react 0.0.1-beta.1

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

@@ -0,0 +1,190 @@
+import React, { useMemo, useRef, useState } from 'react'
+import { file as DapFile } from 'dap-util'
+import classNames from 'classnames'
+import { SetAttachmentOptionType, UpdateAttachmentOptionType } from '@kaitify/core'
+import { Tabs, TabsPropsType } from '@/core/tabs'
+import { Button } from '@/core/button'
+import { Icon } from '@/core/icon'
+import { useEditor } from '@/hooks'
+import Menu from '../../menu'
+import { MenuRefType } from '../../props'
+import { AttachmentMenuPropsType } from './props'
+import styles from './style.module.less'
+
+export default function AttachmentMenu({
+  tabs = {
+    data: ['remote', 'upload'],
+    default: 'remote'
+  },
+  ...props
+}: AttachmentMenuPropsType) {
+  const { state, t, dark } = useEditor()
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+  //远程附件数据
+  const [remoteData, setRemoteData] = useState<Omit<SetAttachmentOptionType, 'icon'>>({
+    url: '',
+    text: ''
+  })
+  //更新附件数据
+  const [updateData, setUpdateData] = useState<UpdateAttachmentOptionType>({
+    url: '',
+    text: ''
+  })
+
+  //选项卡数据
+  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 isActive = useMemo(() => {
+    return !!state.editor.value?.commands.getAttachment?.()
+  }, [state.editor])
+  //是否禁用
+  const isDisabled = useMemo(() => {
+    if (!state.editor.value?.selection.focused()) {
+      return true
+    }
+    if (state.editor.value.commands.hasMath?.()) {
+      return true
+    }
+    if (state.editor.value.commands.hasCodeBlock?.()) {
+      return true
+    }
+    if (state.editor.value.commands.hasLink?.()) {
+      return true
+    }
+    if (state.editor.value.commands.hasAttachment?.() && !isActive) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled, isActive])
+
+  //浮层显示
+  const menuShowing = () => {
+    const info = state.editor.value?.commands.getAttachmentInfo?.()
+    if (info) {
+      setUpdateData({
+        text: info.text,
+        url: info.url
+      })
+    } else {
+      setRemoteData({
+        text: '',
+        url: ''
+      })
+    }
+  }
+  //选择本地文件
+  const fileChange = async (e: React.ChangeEvent) => {
+    const file = (e.currentTarget as HTMLInputElement).files?.[0]
+    if (!file || !state.editor.value) {
+      return
+    }
+    const url = typeof props.customUpload == 'function' ? await props.customUpload(file) : await DapFile.dataFileToBase64(file)
+    if (!url) {
+      return
+    }
+    state.editor.value.commands.setAttachment?.({
+      url: url,
+      text: file.name || t('附件'),
+      icon: props.iconUrl
+    })
+    menuRef.current?.hidePopover()
+  }
+  //插入远程附件
+  const insert = async () => {
+    if (!remoteData.url || !remoteData.text || !state.editor.value) {
+      return
+    }
+    state.editor.value.commands.setAttachment?.({
+      url: remoteData.url,
+      text: remoteData.text,
+      icon: props.iconUrl
+    })
+    menuRef.current?.hidePopover()
+  }
+  //更新远程附件
+  const update = async () => {
+    if (!updateData.url || !updateData.text || !state.editor.value) {
+      return
+    }
+    state.editor.value.commands.updateAttachment?.({
+      url: updateData.url,
+      text: updateData.text
+    })
+    menuRef.current?.hidePopover()
+  }
+
+  return (
+    <Menu
+      ref={menuRef}
+      disabled={isDisabled}
+      active={isActive}
+      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, onShowing: menuShowing }}
+      customPopover={
+        isActive ? (
+          <div
+            className={classNames(styles['kaitify-attachment-update'], {
+              [styles['kaitify-dark']]: dark
+            })}
+          >
+            <input value={updateData.text} onChange={e => setUpdateData(oldValue => ({ ...oldValue, text: e.target.value }))} placeholder={t('附件名称')} type='text' />
+            <input value={updateData.url} onChange={e => setUpdateData(oldValue => ({ ...oldValue, url: e.target.value }))} placeholder={t('附件地址')} type='url' />
+            <div className={styles['kaitify-attachment-update-footer']}>
+              <Button onClick={update} disabled={!updateData.url || !updateData.text}>
+                {t('更新')}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Tabs defaultValue={tabs.default} data={tabData}>
+            {current => (
+              <>
+                {current === 'remote' && (
+                  <div
+                    className={classNames(styles['kaitify-attachment-remote'], {
+                      [styles['kaitify-dark']]: dark
+                    })}
+                  >
+                    <input value={remoteData.text} onChange={e => setRemoteData(oldValue => ({ ...oldValue, text: e.target.value }))} placeholder={t('附件名称')} type='text' />
+                    <input value={remoteData.url} onChange={e => setRemoteData(oldValue => ({ ...oldValue, url: e.target.value }))} placeholder={t('附件地址')} type='url' />
+                    <div className={styles['kaitify-attachment-remote-footer']}>
+                      <Button onClick={insert} disabled={!remoteData.url || !remoteData.text}>
+                        {t('插入')}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+                {current === 'upload' && (
+                  <div
+                    className={classNames(styles['kaitify-attachment-upload'], {
+                      [styles['kaitify-dark']]: dark
+                    })}
+                  >
+                    <input type='file' accept='*' onChange={fileChange} />
+                    <Icon name='kaitify-icon-upload' />
+                  </div>
+                )}
+              </>
+            )}
+          </Tabs>
+        )
+      }
+    >
+      <Icon name='kaitify-icon-attachment' />
+    </Menu>
+  )
+}

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

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

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

@@ -0,0 +1,27 @@
+import { MenuPropsType } from '@/editor/menu/props'
+
+export type AttachmentMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * tabs配置
+   */
+  tabs?: {
+    data: ('remote' | 'upload')[]
+    default: 'remote' | 'upload'
+  }
+  /**
+   * 浮层属性
+   */
+  popoverProps?: Omit<NonNullable<MenuPropsType['popoverProps']>, 'onShow' | 'onShowing' | 'onShown' | 'onHide' | 'onHiding' | 'onHidden'>
+  /**
+   * 附件logo图片地址
+   */
+  iconUrl?: string
+  /**
+   * 自定义上传方法
+   */
+  customUpload?: (file: File) => string | Promise<string>
+}

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

@@ -0,0 +1,138 @@
+.kaitify-attachment-upload {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100px;
+  font-size: 30px;
+  color: @font-color;
+  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-dark {
+    color: @font-color-dark;
+  }
+}
+
+.kaitify-attachment-remote {
+  display: block;
+  width: 100%;
+  padding: @small-padding @padding;
+
+  input[type='text'],
+  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-attachment-remote-footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+  }
+
+  &.kaitify-dark {
+    input[type='text'],
+    input[type='url'] {
+      border-bottom-color: @border-color-dark;
+      color: @font-color-dark;
+
+      &:focus {
+        border-bottom-color: @theme;
+      }
+    }
+  }
+}
+
+.kaitify-attachment-update {
+  display: block;
+  width: 100%;
+  padding: @padding @padding @small-padding @padding;
+
+  input[type='text'],
+  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-attachment-update-footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+  }
+
+  &.kaitify-dark {
+    input[type='text'],
+    input[type='url'] {
+      border-bottom-color: @border-color-dark;
+      color: @font-color-dark;
+
+      &:focus {
+        border-bottom-color: @theme;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,97 @@
+import { useEditor } from '@/hooks'
+import { useCallback, useMemo, useRef } from 'react'
+import classNames from 'classnames'
+import { Icon } from '@/core/icon'
+import { Button } from '@/core/button'
+import { MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { BackColorMenuPropsType } 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 BackColorMenu({ colors = defaultColors, ...props }: BackColorMenuPropsType) {
+  const { state, t, dark } = useEditor()
+
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+
+  //颜色是否激活
+  const isActive = useCallback(
+    (item: string) => {
+      return state.editor.value?.commands.isBackColor?.(item) ?? 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 setBackColor = (val: string) => {
+    if (!state.editor.value || state.editor.value.commands.isBackColor?.(val)) {
+      return
+    }
+    state.editor.value.commands.setBackColor?.(val)
+    menuRef.current?.hidePopover()
+  }
+  //移除颜色
+  const unsetBackColor = () => {
+    if (!state.editor.value) {
+      return
+    }
+    state.editor.value.commands.removeTextStyle?.(['backgroundColor', 'background'])
+    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={unsetBackColor} 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={() => setBackColor(item)} />
+              </div>
+            ))}
+          </div>
+        </div>
+      }
+    >
+      <Icon name='kaitify-icon-brush' />
+    </Menu>
+  )
+}

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

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

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

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

package/src/editor/menu/built-in/back-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/blockquote/blockquote.tsx

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

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

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

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

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

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

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

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

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

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

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

package/src/editor/menu/built-in/clear-format/clear-format.tsx

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

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

@@ -0,0 +1,3 @@
+import ClearFormatMenu from './clear-format'
+export * from './props'
+export { ClearFormatMenu }