@kaitify/react 0.0.1-beta.1

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

@@ -0,0 +1,189 @@
+import { useEditor } from '@/hooks'
+import { file as DapFile } from 'dap-util'
+import { ImageMenuPropsType } from './props'
+import React, { useMemo, useRef, useState } from 'react'
+import { MenuRefType } from '../../props'
+import { SetImageOptionType, UpdateImageOptionType } from '@kaitify/core'
+import { Tabs, TabsPropsType } from '@/core/tabs'
+import Menu from '../../menu'
+import { Icon } from '@/core/icon'
+import styles from './style.module.less'
+import { Button } from '@/core/button'
+import classNames from 'classnames'
+
+export default function ImageMenu({
+  tabs = {
+    data: ['remote', 'upload'],
+    default: 'remote'
+  },
+  ...props
+}: ImageMenuPropsType) {
+  const { state, t, dark } = useEditor()
+
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+
+  //远程图片数据
+  const [remoteData, setRemoteData] = useState<Omit<SetImageOptionType, 'width'>>({
+    src: '',
+    alt: ''
+  })
+  //更新图片数据
+  const [updateData, setUpdateData] = useState<UpdateImageOptionType>({
+    src: '',
+    alt: ''
+  })
+
+  //选项卡数据
+  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.data])
+  //是否禁用
+  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 isActive = useMemo(() => {
+    return !!state.editor.value?.commands.getImage?.()
+  }, [state.editor])
+
+  //浮层显示
+  const menuShowing = () => {
+    const imageNode = state.editor.value?.commands.getImage?.()
+    if (imageNode) {
+      setUpdateData({
+        src: imageNode.marks!.src as string,
+        alt: (imageNode.marks!.alt as string) || ''
+      })
+    } else {
+      setRemoteData({
+        src: '',
+        alt: ''
+      })
+    }
+  }
+  //选择本地图片
+  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.setImage?.({
+      src: url,
+      alt: file.name || t('图片'),
+      width: typeof props.width == 'number' ? `${props.width}px` : props.width
+    })
+    menuRef.current?.hidePopover()
+  }
+  //插入远程图片
+  const insert = async () => {
+    if (!remoteData.src) {
+      return
+    }
+    state.editor.value?.commands.setImage?.({
+      src: remoteData.src,
+      alt: remoteData.alt,
+      width: typeof props.width == 'number' ? `${props.width}px` : props.width
+    })
+    menuRef.current?.hidePopover()
+  }
+  //更新图片
+  const update = async () => {
+    if (!updateData.src) {
+      return
+    }
+    state.editor.value?.commands.updateImage?.({
+      src: updateData.src,
+      alt: updateData.alt
+    })
+    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-image-update'], {
+              [styles['kaitify-dark']]: dark
+            })}
+          >
+            <input value={updateData.alt} onChange={e => setUpdateData(oldValue => ({ ...oldValue, alt: e.target.value }))} placeholder={t('图片名称')} type='text' />
+            <input value={updateData.src} onChange={e => setUpdateData(oldValue => ({ ...oldValue, src: e.target.value }))} placeholder={t('图片地址')} type='url' />
+            <div className={styles['kaitify-image-update-footer']}>
+              <Button onClick={update} disabled={!updateData.src}>
+                {t('更新')}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Tabs defaultValue={tabs.default} data={tabData}>
+            {current => (
+              <>
+                {current === 'remote' && (
+                  <div
+                    className={classNames(styles['kaitify-image-remote'], {
+                      [styles['kaitify-dark']]: dark
+                    })}
+                  >
+                    <input value={remoteData.alt} onChange={e => setRemoteData(oldValue => ({ ...oldValue, alt: e.target.value }))} placeholder={t('图片名称')} type='text' />
+                    <input value={remoteData.src} onChange={e => setRemoteData(oldValue => ({ ...oldValue, src: e.target.value }))} placeholder={t('图片地址')} type='url' />
+                    <div className={styles['kaitify-image-remote-footer']}>
+                      <Button onClick={insert} disabled={!remoteData.src}>
+                        {t('插入')}
+                      </Button>
+                    </div>
+                  </div>
+                )}
+                {current === 'upload' && (
+                  <div
+                    className={classNames(styles['kaitify-image-upload'], {
+                      [styles['kaitify-dark']]: dark
+                    })}
+                  >
+                    <input type='file' accept='*' onChange={fileChange} />
+                    <Icon name='kaitify-icon-upload' />
+                  </div>
+                )}
+              </>
+            )}
+          </Tabs>
+        )
+      }
+    >
+      <Icon name='kaitify-icon-image' />
+    </Menu>
+  )
+}

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

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

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

@@ -0,0 +1,27 @@
+import { MenuPropsType } from '@/editor/menu/props'
+
+export type ImageMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  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'>
+}

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

@@ -0,0 +1,138 @@
+.kaitify-image-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-image-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-image-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-image-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-image-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/increase-indent/increase-indent.tsx

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import Menu from '../../menu'
+import { IncreaseIndentMenuPropsType } from './props'
+
+export default function IncreaseIndentMenu(props: IncreaseIndentMenuPropsType) {
+  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.setIncreaseIndent?.()
+  }
+
+  return (
+    <Menu disabled={isDisabled} active={false} onOperate={onOperate} shortcut={props.shortcut}>
+      <Icon name='kaitify-icon-indent-increase' />
+    </Menu>
+  )
+}

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

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

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

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

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

@@ -0,0 +1,38 @@
+export * from './align-center'
+export * from './align-justify'
+export * from './align-left'
+export * from './align-right'
+export * from './attachment'
+export * from './back-color'
+export * from './blockquote'
+export * from './bold'
+export * from './clear-format'
+export * from './code'
+export * from './code-block'
+export * from './color'
+export * from './decrease-indent'
+export * from './emoji'
+export * from './font-family'
+export * from './font-size'
+export * from './full-screen'
+export * from './heading'
+export * from './horizontal'
+export * from './image'
+export * from './increase-indent'
+export * from './italic'
+export * from './line-height'
+export * from './link'
+export * from './math'
+export * from './ordered-list'
+export * from './redo'
+export * from './strikethrough'
+export * from './subscript'
+export * from './superscript'
+export * from './table'
+export * from './task'
+export * from './underline'
+export * from './undo'
+export * from './unordered-list'
+export * from './video'
+export * from './wrap-up'
+export * from './wrap-down'

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

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

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

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

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

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

package/src/editor/menu/built-in/line-height/index.ts

@@ -0,0 +1,3 @@
+import LineHeightMenu from './line-height'
+export * from './props'
+export { LineHeightMenu }

package/src/editor/menu/built-in/line-height/line-height.tsx

@@ -0,0 +1,81 @@
+import { useCallback, useMemo, useRef } from 'react'
+import { useEditor } from '@/hooks'
+import { MenuDataType, MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { LineHeightMenuPropsType } from './props'
+
+export default function LineHeightMenu({
+  data = [
+    {
+      label: '1',
+      value: 1
+    },
+    {
+      label: '1.15',
+      value: 1.15
+    },
+    {
+      label: '2',
+      value: 2
+    },
+    {
+      label: '2.5',
+      value: 2.5
+    },
+    {
+      label: '3',
+      value: 3
+    }
+  ],
+  ...props
+}: LineHeightMenuPropsType) {
+  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
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+  //选项是否激活
+  const isActive = useCallback(
+    (item: MenuDataType) => {
+      return state.editor.value?.commands.isLineHeight?.(item.value) ?? false
+    },
+    [state.editor]
+  )
+  //选择的值
+  const selectedData = useMemo<MenuDataType>(() => {
+    return options.find(item => isActive(item)) || options[0]
+  }, [options, isActive])
+
+  //选择选项
+  const onSelect = (item: MenuDataType) => {
+    if (isActive(item)) {
+      state.editor.value?.updateRealSelection()
+    } else {
+      state.editor.value?.commands.setLineHeight?.(item.value)
+    }
+  }
+
+  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/line-height/props.ts

@@ -0,0 +1,20 @@
+import { MenuDataType, MenuPropsType } from '@/editor/menu/props'
+
+export type LineHeightMenuPropsType = {
+  /**
+   * 是否禁用
+   */
+  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/link/index.ts

@@ -0,0 +1,4 @@
+import LinkMenu from './link'
+import LinkUnsetMenu from './link-unset'
+export * from './props'
+export { LinkMenu, LinkUnsetMenu }

package/src/editor/menu/built-in/link/link-unset.tsx

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