@kaitify/react 0.0.1-beta.1

package/docs/menus/built-in/underline.md

@@ -0,0 +1,29 @@
+---
+title: underline 下划线
+---
+
+# underline 下划线
+
+设置/取消文本下划线
+
+## 使用方法
+
+```tsx
+import { useState } from 'react'
+import { Wrapper, UnderlineMenu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} before={<UnderlineMenu />}></Wrapper>
+}
+```
+
+## Props 参数
+
+##### disabled <Badge type="danger" text="boolean" />
+
+是否禁用该菜单，默认为 `false`
+
+##### shortcut <Badge type="danger" text="(e: KeyboardEvent) => boolean" />
+
+菜单快捷键实现，继承自 `Menu` 组件的同名属性，具体使用可参考 [Menu 组件的 shortcut](/guide/menu#shortcut)

package/docs/menus/built-in/undo.md

@@ -0,0 +1,25 @@
+---
+title: undo 撤销
+---
+
+# undo 撤销
+
+执行撤销操作
+
+## 使用方法
+
+```tsx
+import { useState } from 'react'
+import { Wrapper, UndoMenu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} before={<UndoMenu />}></Wrapper>
+}
+```
+
+## Props 参数
+
+##### disabled <Badge type="danger" text="boolean" />
+
+是否禁用该菜单，默认为 `false`

package/docs/menus/built-in/unordered-list.md

@@ -0,0 +1,29 @@
+---
+title: unordered-list 无序列表
+---
+
+# unordered-list 无序列表
+
+插入无序列表
+
+## 使用方法
+
+```tsx
+import { useState } from 'react'
+import { Wrapper, UnorderedListMenu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} before={<UnorderedListMenu />}></Wrapper>
+}
+```
+
+## Props 参数
+
+##### disabled <Badge type="danger" text="boolean" />
+
+是否禁用该菜单，默认为 `false`
+
+##### popoverProps <Badge type="danger" text="Omit<NonNullable<MenuPropsType['popoverProps']>, 'onShow' | 'onShowing' | 'onShown' | 'onHide' | 'onHiding' | 'onHidden'>" />
+
+浮层属性配置，参考 `Menu` 的 `popoverProps` 属性

package/docs/menus/built-in/video-controls.md

@@ -0,0 +1,29 @@
+---
+title: video-controls 视频显示器控制
+---
+
+# video-controls 视频显示器控制
+
+设置/取消视频的显示器
+
+## 使用方法
+
+```tsx
+import { useState } from 'react'
+import { Wrapper, VideoControlsMenu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} before={<VideoControlsMenu />}></Wrapper>
+}
+```
+
+## Props 参数
+
+##### disabled <Badge type="danger" text="boolean" />
+
+是否禁用该菜单，默认为 `false`
+
+##### shortcut <Badge type="danger" text="(e: KeyboardEvent) => boolean" />
+
+菜单快捷键实现，继承自 `Menu` 组件的同名属性，具体使用可参考 [Menu 组件的 shortcut](/guide/menu#shortcut)

package/docs/menus/built-in/video-loop.md

@@ -0,0 +1,29 @@
+---
+title: video-loop 视频循环控制
+---
+
+# video-loop 视频循环控制
+
+设置/取消视频的循环
+
+## 使用方法
+
+```tsx
+import { useState } from 'react'
+import { Wrapper, VideoLoopMenu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} before={<VideoLoopMenu />}></Wrapper>
+}
+```
+
+## Props 参数
+
+##### disabled <Badge type="danger" text="boolean" />
+
+是否禁用该菜单，默认为 `false`
+
+##### shortcut <Badge type="danger" text="(e: KeyboardEvent) => boolean" />
+
+菜单快捷键实现，继承自 `Menu` 组件的同名属性，具体使用可参考 [Menu 组件的 shortcut](/guide/menu#shortcut)

package/docs/menus/built-in/video-muted.md

@@ -0,0 +1,29 @@
+---
+title: video-muted 视频静音控制
+---
+
+# video-muted 视频静音控制
+
+设置/取消视频的静音
+
+## 使用方法
+
+```tsx
+import { useState } from 'react'
+import { Wrapper, VideoMutedMenu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} before={<VideoMutedMenu />}></Wrapper>
+}
+```
+
+## Props 参数
+
+##### disabled <Badge type="danger" text="boolean" />
+
+是否禁用该菜单，默认为 `false`
+
+##### shortcut <Badge type="danger" text="(e: KeyboardEvent) => boolean" />
+
+菜单快捷键实现，继承自 `Menu` 组件的同名属性，具体使用可参考 [Menu 组件的 shortcut](/guide/menu#shortcut)

package/docs/menus/built-in/video.md

@@ -0,0 +1,41 @@
+---
+title: video 视频
+---
+
+# video 视频
+
+插入视频
+
+## 使用方法
+
+```tsx
+import { useState } from 'react'
+import { Wrapper, VideoMenu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} before={<VideoMenu />}></Wrapper>
+}
+```
+
+## Props 参数
+
+##### disabled <Badge type="danger" text="boolean" />
+
+是否禁用该菜单，默认为 `false`
+
+##### tabs <Badge type="danger" text="{ data: ('remote' | 'upload')[]; default: 'remote' | 'upload'}" />
+
+配置浮层内的选项卡，目前支持 `upload`（本地上传）和 `remote`（远程视频），`data` 表示选项卡的数据，`default` 表示默认展示的选项卡
+
+##### popoverProps <Badge type="danger" text="Omit<NonNullable<MenuPropsType['popoverProps']>, 'onShow' | 'onShowing' | 'onShown' | 'onHide' | 'onHiding' | 'onHidden'>" />
+
+浮层属性配置，参考 `Menu` 的 `popoverProps` 属性
+
+##### width <Badge type="danger" text="string | number" />
+
+初始视频宽度
+
+##### customUpload <Badge type="danger" text="(file: File) => string | Promise<string>" />
+
+自定义本地视频上传的方法，该方法返回一个字符串值，表示上传后的视频文件地址，回调参数为 `File` 文件，如果不设置该方法，视频默认以 `base64` 字符串的形式插入编辑器中

package/docs/menus/built-in/wrap-down.md

@@ -0,0 +1,33 @@
+---
+title: wrap-down 向下换行
+---
+
+# wrap-down 向下换行
+
+在匹配的节点位置向下换行
+
+## 使用方法
+
+```tsx
+import { useState } from 'react'
+import { Wrapper, WrapDownMenu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} before={<WrapDownMenu />}></Wrapper>
+}
+```
+
+## Props 参数
+
+##### disabled <Badge type="danger" text="boolean" />
+
+是否禁用该菜单，默认为 `false`
+
+##### match <Badge type="danger" text="KNodeMatchOptionType" />
+
+匹配相关的节点，如果匹配上了，则会在点击菜单时向下换行，关于该属性的释义，同 [kaitify 中的 Editor 的 getMatchNodeBySelection 方法中的入参](https://www.so-better.cn/docs/kaitify-core/apis/editor-function#getmatchnodebyselection)
+
+##### shortcut <Badge type="danger" text="(e: KeyboardEvent) => boolean" />
+
+菜单快捷键实现，继承自 `Menu` 组件的同名属性，具体使用可参考 [Menu 组件的 shortcut](/guide/menu#shortcut)

package/docs/menus/built-in/wrap-up.md

@@ -0,0 +1,33 @@
+---
+title: wrap-up 向上换行
+---
+
+# wrap-up 向上换行
+
+在匹配的节点位置向上换行
+
+## 使用方法
+
+```tsx
+import { useState } from 'react'
+import { Wrapper, WrapUpMenu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} before={<WrapUpMenu />}></Wrapper>
+}
+```
+
+## Props 参数
+
+##### disabled <Badge type="danger" text="boolean" />
+
+是否禁用该菜单，默认为 `false`
+
+##### match <Badge type="danger" text="KNodeMatchOptionType" />
+
+匹配相关的节点，如果匹配上了，则会在点击菜单时向上换行，关于该属性的释义，同 [kaitify 中的 Editor 的 getMatchNodeBySelection 方法中的入参](https://www.so-better.cn/docs/kaitify-core/apis/editor-function#getmatchnodebyselection)
+
+##### shortcut <Badge type="danger" text="(e: KeyboardEvent) => boolean" />
+
+菜单快捷键实现，继承自 `Menu` 组件的同名属性，具体使用可参考 [Menu 组件的 shortcut](/guide/menu#shortcut)

package/docs/menus/introduction.md

@@ -0,0 +1,27 @@
+---
+title: 简介
+---
+
+# 简介
+
+## 基本介绍
+
+内置菜单是 `kaitify-react` 内部使用 `Menu` 组件封装的一系列具有实际操作功能的菜单组件，每一个内置菜单的操作都是已经实现完成的了
+
+内置菜单已经定义好了菜单各种情况下的状态，无需我们去关心什么时候该禁用、什么时候该激活，你可以直接拿来使用
+
+除此之外，这些菜单也会提供一些参数让你可以进行灵活配置
+
+## 使用示例
+
+以加粗菜单为例：
+
+```tsx
+import { useState } from 'react'
+import { Wrapper, BoldMenu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} placeholder='输入正文内容...' before={<BoldMenu />}></Wrapper>
+}
+```

package/examples/App.tsx

@@ -0,0 +1,179 @@
+import { useMemo, useState } from 'react'
+import { Wrapper as EditorWrapper, BoldMenu, AlignLeftMenu, AlignCenterMenu, AlignRightMenu, AlignJustifyMenu, AttachmentMenu, BackColorMenu, BlockquoteMenu, CodeMenu, CodeBlockMenu, ColorMenu, FontFamilyMenu, FontSizeMenu, HeadingMenu, RedoMenu, UndoMenu, HorizontalMenu, ImageMenu, IncreaseIndentMenu, DecreaseIndentMenu, ItalicMenu, LineHeightMenu, LinkMenu, OrderedListMenu, UnorderedListMenu, MathMenu, StrikethroughMenu, SubscriptMenu, SuperscriptMenu, TableMenu, UnderlineMenu, VideoMenu, TaskMenu, ClearFormatMenu, Divider, FullScreenMenu, EmojiMenu, Editor, StateType, KNodeMatchOptionType, Bubble, VideoControlsMenu, VideoMutedMenu, VideoLoopMenu, WrapUpMenu, CodeBlockLanguagesMenu, WrapDownMenu, LinkUnsetMenu, TableAddRowMenu, TableDeleteRowMenu, TableAddColumnMenu, TableDeleteColumnMenu, TableMergeCellMenu, TableUnsetMenu } from '../src/index'
+import './style.less'
+
+export default function App() {
+  const [content, setContent] = useState(
+    '<p kaitify-node="91"><span kaitify-node="92" style="font-weight: bold; font-size: 18px;">Publications</span></p ><p kaitify-node="93" style="line-height: 2.5;"><span kaitify-node="94" style="font-size: 14px; font-weight: bold;">Lastest metaRLK article</span><span kaitify-node="95"> </span></p ><p kaitify-node="96" style="line-height: 2;"><span kaitify-node="98">Curation,&nbsp;nomenclature,&nbsp;and&nbsp;topological&nbsp;classification&nbsp;of&nbsp;receptor&nbsp;like&nbsp;kinases&nbsp;from&nbsp;528&nbsp;plant&nbsp;species&nbsp;for&nbsp;novel&nbsp;domain&nbsp;discovery&nbsp;and&nbsp;functional&nbsp;inference[J].&nbsp;Molecular&nbsp;Plant,&nbsp;2024,&nbsp;17(4):&nbsp;658-671.&nbsp;&nbsp; </span></p><p kaitify-node="91"><span kaitify-node="92" style="font-weight: bold; font-size: 18px;">Publications</span></p ><p kaitify-node="93" style="line-height: 2.5;"><span kaitify-node="94" style="font-size: 14px; font-weight: bold;">Lastest metaRLK article</span><span kaitify-node="95"> </span></p ><p kaitify-node="96" style="line-height: 2;"><span kaitify-node="98">Curation, nomenclature, and topological classification of receptor like kinases from 528 plant species for novel domain discovery and functional inference[J]. Molecular Plant, 2024, 17(4): 658-671. </span></p>'
+  )
+  const [show, setShow] = useState(true)
+  const [dark, setDark] = useState(false)
+  const [disabled] = useState(false)
+  const [state, setState] = useState<StateType | undefined>(undefined)
+
+  const shouldBubble = useMemo<{ visible: boolean; match?: KNodeMatchOptionType; type?: number }>(() => {
+    if (!!state?.editor.value?.commands.getVideo?.()) {
+      return { visible: true, match: { tag: 'video' }, type: 0 }
+    }
+    if (!!state?.editor.value?.commands.getCodeBlock?.()) {
+      return { visible: true, match: { tag: 'pre' }, type: 1 }
+    }
+    if (!!state?.editor.value?.getFocusNodesBySelection('text').length) {
+      return { visible: true, match: undefined, type: 2 }
+    }
+    if (!!state?.editor.value?.commands.getLink?.()) {
+      return { visible: true, match: { tag: 'a' }, type: 3 }
+    }
+    if (!!state?.editor.value?.commands.getTable?.()) {
+      return { visible: true, match: { tag: 'table' }, type: 4 }
+    }
+    return { visible: false }
+  }, [state?.editor])
+
+  const onCreated = async (editor: Editor) => {
+    console.log(editor.selection)
+  }
+
+  return (
+    <>
+      <div style={{ padding: 10 }}>
+        <div style={{ padding: 5 }}>
+          <button onClick={() => setDark(!dark)}>深色/浅色主题</button>
+          <button onClick={() => setShow(!show)}>显示/隐藏编辑器</button>
+          <button
+            onClick={() => {
+              console.log(state?.editor.value?.getHTML())
+            }}
+          >
+            获取HTML
+          </button>
+        </div>
+        <div id='area'>
+          <div id='before' style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', flexWrap: 'wrap', height: 100, background: dark ? '#1b1b1f' : '#fff' }}></div>
+          {show && (
+            <EditorWrapper
+              autofocus
+              ref={v => setState(v?.state)}
+              locale='zh-CN'
+              disabled={disabled}
+              dark={dark}
+              style={{ width: '100%', height: 500 }}
+              allow-paste-html
+              placeholder='输入正文内容...'
+              value={content}
+              onChange={setContent}
+              onCreated={onCreated}
+              appendBeforeTo={'#before'}
+              before={
+                <>
+                  <UndoMenu />
+                  <RedoMenu />
+                  <Divider />
+                  <EmojiMenu />
+                  <DecreaseIndentMenu />
+                  <IncreaseIndentMenu />
+                  <Divider />
+                  <ClearFormatMenu />
+                  <BoldMenu />
+                  <ItalicMenu />
+                  <StrikethroughMenu />
+                  <SubscriptMenu />
+                  <SuperscriptMenu />
+                  <UnderlineMenu />
+                  <CodeMenu />
+                  <Divider />
+                  <ColorMenu />
+                  <BackColorMenu />
+                  <FontFamilyMenu />
+                  <FontSizeMenu />
+                  <Divider />
+                  <HeadingMenu popoverProps={{ trigger: 'hover' }} shortcut={{ 1: (e: KeyboardEvent) => e.key == '1' && e.metaKey }} />
+                  <LineHeightMenu />
+                  <OrderedListMenu />
+                  <UnorderedListMenu />
+                  <TaskMenu />
+                  <Divider />
+                  <AlignLeftMenu />
+                  <AlignCenterMenu shortcut={e => e.key == 'b' && e.metaKey} />
+                  <AlignRightMenu />
+                  <AlignJustifyMenu />
+                  <Divider />
+                  <BlockquoteMenu />
+                  <CodeBlockMenu />
+                  <HorizontalMenu />
+                  <LinkMenu />
+                  <AttachmentMenu popoverProps={{ zIndex: 100, arrow: true }} />
+                  <ImageMenu tabs={{ data: ['remote', 'upload'], default: 'upload' }} />
+                  <VideoMenu tabs={{ data: ['remote', 'upload'], default: 'upload' }} popoverProps={{ zIndex: 100, arrow: true }} />
+                  <MathMenu />
+                  <TableMenu />
+                  <FullScreenMenu target='#area' zIndex={2} />
+                </>
+              }
+              after={<>总字数：{state?.editor.value?.getContent().length ?? 0}</>}
+            >
+              <Bubble visible={shouldBubble.visible} match={shouldBubble.match} style={{ padding: 5 }}>
+                {shouldBubble.type === 0 && (
+                  <>
+                    <VideoControlsMenu />
+                    <VideoMutedMenu />
+                    <VideoLoopMenu />
+                  </>
+                )}
+                {shouldBubble.type === 1 && (
+                  <>
+                    <WrapUpMenu match={{ tag: 'pre' }} />
+                    <Divider />
+                    <CodeBlockLanguagesMenu />
+                    <Divider />
+                    <WrapDownMenu match={{ tag: 'pre' }} />
+                  </>
+                )}
+                {shouldBubble.type === 2 && (
+                  <>
+                    <ClearFormatMenu />
+                    <EmojiMenu />
+                    <BoldMenu />
+                    <ItalicMenu />
+                    <StrikethroughMenu />
+                    <SubscriptMenu />
+                    <SuperscriptMenu />
+                    <UnderlineMenu />
+                    <Divider />
+                    <ColorMenu />
+                    <BackColorMenu />
+                    <CodeMenu />
+                    <FontFamilyMenu />
+                    <FontSizeMenu />
+                  </>
+                )}
+                {shouldBubble.type === 3 && <LinkUnsetMenu />}
+                {shouldBubble.type === 4 && (
+                  <>
+                    <WrapUpMenu match={{ tag: 'table' }} />
+                    <Divider />
+                    <TableAddRowMenu type='top' />
+                    <TableAddRowMenu type='bottom' />
+                    <TableDeleteRowMenu />
+                    <TableAddColumnMenu type='left' />
+                    <TableAddColumnMenu type='right' />
+                    <TableDeleteColumnMenu />
+                    <Divider />
+                    <TableMergeCellMenu direction='left' />
+                    <TableMergeCellMenu direction='right' />
+                    <TableMergeCellMenu direction='top' />
+                    <TableMergeCellMenu direction='bottom' />
+                    <Divider />
+                    <TableUnsetMenu />
+                    <Divider />
+                    <WrapDownMenu match={{ tag: 'table' }} />
+                  </>
+                )}
+              </Bubble>
+            </EditorWrapper>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}

package/examples/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)

package/examples/style.less

@@ -0,0 +1,21 @@
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  outline: none;
+}
+
+#root {
+  height: 100%;
+  overflow-y: auto;
+}

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="https://www.so-better.cn/docs/kaitify-core/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>基于@kaitify/core开发的react富文本编辑器核心库</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/examples/main.tsx"></script>
+  </body>
+</html>

package/lib/core/button/button.d.ts

@@ -0,0 +1,5 @@
+import { ButtonPropsType } from './props';
+/**
+ * 菜单按钮组件
+ */
+export default function Button(props: ButtonPropsType): import("react/jsx-runtime").JSX.Element;

package/lib/core/button/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Button } from './button';
+export * from './props';
+export { Button };

package/lib/core/button/props.d.ts

@@ -0,0 +1,38 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * 按钮组件的属性类型
+ */
+export type ButtonPropsType = {
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 是否激活
+     */
+    active?: boolean;
+    /**
+     * 是否块级展示
+     */
+    block?: boolean;
+    /**
+     * 是否更大的按钮
+     */
+    large?: boolean;
+    /**
+     * 默认插槽
+     */
+    children?: ReactNode;
+    /**
+     * 样式
+     */
+    style?: CSSProperties;
+    /**
+     * 样式类
+     */
+    className?: string;
+    /**
+     * 点击
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};

package/lib/core/checkbox/checkbox.d.ts

@@ -0,0 +1,5 @@
+import { CheckboxPropsType } from './props';
+/**
+ * 复选框
+ */
+export default function Checkbox(props: CheckboxPropsType): import("react/jsx-runtime").JSX.Element;

package/lib/core/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Checkbox } from './checkbox';
+export type * from './props';
+export { Checkbox };

package/lib/core/checkbox/props.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 复选框组件属性类型
+ */
+export type CheckboxPropsType = {
+    /**
+     * 是否选中
+     */
+    checked?: boolean;
+    /**
+     * 复选框选择事件
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * label文字
+     */
+    label?: string;
+};

package/lib/core/divider/divider.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 分隔线
+ */
+export default function Divider(): import("react/jsx-runtime").JSX.Element;

package/lib/core/divider/index.d.ts

@@ -0,0 +1,2 @@
+import { default as Divider } from './divider';
+export { Divider };

package/lib/core/icon/icon.d.ts

@@ -0,0 +1,5 @@
+import { IconPropsType } from './props';
+/**
+ * 图标组件
+ */
+export default function Icon(props: IconPropsType): import("react/jsx-runtime").JSX.Element;

package/lib/core/icon/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Icon } from './icon';
+export * from './props';
+export { Icon };