@kaitify/react 0.0.1-beta.1

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

@@ -0,0 +1,147 @@
+import { useMemo, useRef, useState } from 'react'
+import { SetLinkOptionType, UpdateLinkOptionType } from '@kaitify/core'
+import { useEditor } from '@/hooks'
+import { Checkbox } from '@/core/checkbox'
+import { Button } from '@/core/button'
+import { Icon } from '@/core/icon'
+import { MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { LinkMenuPropsType } from './props'
+import styles from './style.module.less'
+import classNames from 'classnames'
+
+export default function LinkMenu(props: LinkMenuPropsType) {
+  const { state, t, dark } = useEditor()
+
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+  //链接数据
+  const [formData, setFormData] = useState<SetLinkOptionType>({
+    href: '',
+    text: '',
+    newOpen: false
+  })
+  //更新链接数据
+  const [updateData, setUpdateData] = useState<UpdateLinkOptionType>({
+    href: '',
+    newOpen: false
+  })
+
+  //是否激活
+  const isActive = useMemo(() => {
+    return !!state.editor.value?.commands.getLink?.()
+  }, [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?.() && !isActive) {
+      return true
+    }
+    if (state.editor.value.commands.hasCodeBlock?.()) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //浮层显示
+  const menuShow = () => {
+    const linkNode = state.editor.value?.commands.getLink?.()
+    if (linkNode) {
+      setUpdateData({
+        href: linkNode.marks!.href as string,
+        newOpen: linkNode.marks!.target == '_blank'
+      })
+    } else {
+      setFormData({
+        href: '',
+        text: '',
+        newOpen: false
+      })
+    }
+  }
+  //插入链接
+  const insert = async () => {
+    if (!formData.href) {
+      return
+    }
+    if (state.editor.value?.selection.collapsed()) {
+      if (!formData.text) {
+        return
+      }
+      state.editor.value.commands.setLink?.({
+        href: formData.href,
+        text: formData.text,
+        newOpen: formData.newOpen
+      })
+    } else {
+      state.editor.value?.commands.setLink?.({
+        href: formData.href,
+        newOpen: formData.newOpen
+      })
+    }
+    menuRef.current?.hidePopover()
+  }
+  //更新链接
+  const update = async () => {
+    if (!updateData.href) {
+      return
+    }
+    state.editor.value?.commands.updateLink?.({
+      href: updateData.href,
+      newOpen: updateData.newOpen
+    })
+    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, onShow: menuShow }}
+      customPopover={
+        <div
+          className={classNames(styles['kaitify-link'], {
+            [styles['kaitify-dark']]: dark
+          })}
+        >
+          {isActive ? (
+            // 修改链接
+            <>
+              <input value={updateData.href} onChange={e => setUpdateData(oldValue => ({ ...oldValue, href: e.target.value }))} placeholder={t('链接地址')} type='url' />
+              <div className={styles['kaitify-link-footer']}>
+                <Checkbox checked={updateData.newOpen} onChange={v => setUpdateData(oldValue => ({ ...oldValue, newOpen: v }))} label={t('新窗口打开')} />
+                <Button onClick={update} disabled={!updateData.href}>
+                  {t('更新')}
+                </Button>
+              </div>
+            </>
+          ) : (
+            // 插入链接
+            <>
+              {state.editor.value?.selection.collapsed() && <input value={formData.text} onChange={e => setFormData(oldValue => ({ ...oldValue, text: e.target.value }))} placeholder={t('链接文字')} type='text' />}
+              <input value={formData.href} onChange={e => setFormData(oldValue => ({ ...oldValue, href: e.target.value }))} placeholder={t('链接地址')} type='url' />
+              <div className={styles['kaitify-link-footer']}>
+                <Checkbox checked={formData.newOpen} onChange={v => setFormData(oldValue => ({ ...oldValue, newOpen: v }))} label={t('新窗口打开')} />
+                <Button onClick={insert} disabled={!formData.href || (state.editor.value?.selection.collapsed() && !formData.text)}>
+                  {t('插入')}
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      }
+    >
+      <Icon name='kaitify-icon-link' />
+    </Menu>
+  )
+}

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

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

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

@@ -0,0 +1,51 @@
+.kaitify-link {
+  display: block;
+  width: 100%;
+  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: 10px;
+    transition: all 300ms;
+
+    &:focus {
+      border-bottom-color: @theme;
+    }
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      opacity: 0.5;
+      font-family: @font-family;
+      color: inherit;
+    }
+  }
+
+  .kaitify-link-footer {
+    display: flex;
+    justify-content: space-between;
+    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/math/index.ts

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

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

@@ -0,0 +1,98 @@
+import { useMemo, useRef, useState } from 'react'
+import { useEditor } from '@/hooks'
+import { Button } from '@/core/button'
+import { Icon } from '@/core/icon'
+import { MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { MathMenuPropsType } from './props'
+import styles from './style.module.less'
+import classNames from 'classnames'
+
+//  \sum_{i=1}^{n} i = \frac{n(n+1)}{2}
+
+export default function MathMenu(props: MathMenuPropsType) {
+  const { state, t, dark } = useEditor()
+
+  //菜单组件实例
+  const menuRef = useRef<MenuRefType | null>(null)
+  //数学公式内容
+  const [mathText, setMathText] = useState('')
+  //是否激活
+  const isActive = useMemo(() => {
+    return !!state.editor.value?.commands.getMath?.()
+  }, [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.hasLink?.()) {
+      return true
+    }
+    if (state.editor.value.commands.hasCodeBlock?.()) {
+      return true
+    }
+    if (state.editor.value.commands.hasMath?.() && !isActive) {
+      return true
+    }
+    return props.disabled ?? false
+  }, [state.editor, props.disabled])
+
+  //浮层显示
+  const menuShowing = () => {
+    const mathNode = state.editor.value?.commands.getMath?.()
+    setMathText(mathNode ? (mathNode.marks!['kaitify-math'] as string) || '' : '')
+  }
+  //插入数学公式
+  const insert = () => {
+    if (!mathText) {
+      return
+    }
+    state.editor.value?.commands.setMath?.(mathText)
+    menuRef.current?.hidePopover()
+  }
+  //更新数学公式
+  const update = async () => {
+    if (!mathText) {
+      return
+    }
+    state.editor.value?.commands.updateMath?.(mathText)
+    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={
+        <div
+          className={classNames(styles['kaitify-math'], {
+            [styles['kaitify-dark']]: dark
+          })}
+        >
+          <textarea className={styles['kaitify-math-textarea']} value={mathText} onChange={e => setMathText(e.target.value)} placeholder={t('输入Latex数学公式')} />
+          <div className={styles['kaitify-math-footer']}>
+            {isActive ? (
+              <Button key='update' disabled={!mathText} onClick={update}>
+                {t('更新')}
+              </Button>
+            ) : (
+              <Button key='insert' disabled={!mathText} onClick={insert}>
+                {t('插入')}
+              </Button>
+            )}
+          </div>
+        </div>
+      }
+    >
+      <Icon name='kaitify-icon-mathformula' />
+    </Menu>
+  )
+}

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

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

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

@@ -0,0 +1,54 @@
+.kaitify-math {
+  display: block;
+  width: 100%;
+  padding: @padding;
+
+  .kaitify-math-textarea {
+    display: block;
+    width: 100%;
+    height: 100px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    font-family: Consolas, monospace, Monaco, Andale Mono, Ubuntu Mono;
+    border: 1px solid @border-color;
+    appearance: none;
+    border-radius: @border-radius;
+    padding: @padding;
+    font-size: @font-size;
+    line-height: @line-height;
+    color: @font-color;
+    margin-bottom: 10px;
+    transition: all 300ms;
+    resize: none;
+    background: transparent;
+
+    &:focus {
+      border-color: @theme;
+    }
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      opacity: 0.5;
+      font-family: @font-family;
+      color: inherit;
+    }
+  }
+
+  .kaitify-math-footer {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    width: 100%;
+  }
+
+  &.kaitify-dark {
+    .kaitify-math-textarea {
+      border-color: @border-color-dark;
+      color: @font-color-dark;
+
+      &:focus {
+        border-color: @theme;
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,85 @@
+import { useCallback, useMemo, useRef } from 'react'
+import { OrderedListType } from '@kaitify/core'
+import { useEditor } from '@/hooks'
+import { Icon } from '@/core/icon'
+import { Button } from '@/core/button'
+import { MenuRefType } from '../../props'
+import Menu from '../../menu'
+import { OrderedListMenuPropsType } from './props'
+import styles from './style.module.less'
+
+export default function OrderedListMenu(props: OrderedListMenuPropsType) {
+  const { state } = useEditor()
+  //有序列表序标列表
+  const listTypes: OrderedListType[] = ['decimal', 'lower-alpha', 'upper-alpha', 'lower-roman', 'upper-roman', 'lower-greek', 'cjk-ideographic']
+
+  //菜单组件实例
+  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 itemActive = useCallback(
+    (item: OrderedListType) => {
+      return (
+        state.editor.value?.commands.allList?.({
+          ordered: true,
+          listType: item
+        }) ?? false
+      )
+    },
+    [state.editor]
+  )
+  //菜单是否激活
+  const isActive = useMemo(() => {
+    return (
+      state.editor.value?.commands.allList?.({
+        ordered: true
+      }) ?? false
+    )
+  }, [state.editor])
+
+  //选择选项
+  const onSelect = (item: OrderedListType) => {
+    if (itemActive(item)) {
+      state.editor.value?.commands.unsetList?.({
+        ordered: true,
+        listType: item
+      })
+    } else {
+      state.editor.value?.commands.setList?.({
+        ordered: true,
+        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-ordered-list']}>
+          {listTypes.map(item => (
+            <div key={item} className={styles['kaitify-ordered-list-item']}>
+              <Button className={styles['kaitify-ordered-list-item-button']} active={itemActive(item)} onClick={() => onSelect(item)}>
+                <Icon name={'kaitify-icon-list-' + item} />
+              </Button>
+            </div>
+          ))}
+        </div>
+      }
+    >
+      <Icon name='kaitify-icon-list-decimal' />
+    </Menu>
+  )
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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