@kaitify/react 0.0.1-beta.1

package/docs/guide/menu.md

@@ -0,0 +1,112 @@
+---
+title: Menu 菜单
+---
+
+# Menu 菜单
+
+`Menu` 组件是 `kaitify-react` 的重要 `UI` 组件，该组件与编辑器具体的功能无关，它仅仅提供了操作的事件和 `UI` 属性，让我们在做编辑器的功能栏时无需在 `UI` 方面花费心思
+
+`Menu` 组件必须放置在 `Wrapper` 组件的插槽中，无论是放在 `before`、`after` 还是 `children` 插槽都是可以的
+
+## 基本使用
+
+```tsx
+import { useState } from 'react'
+import { Wrapper, Menu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} placeholder='输入正文内容...' before={<Menu>菜单按钮</Menu>}></Wrapper>
+}
+```
+
+## Props 参数
+
+##### disabled <Badge type="danger" text="boolean" />
+
+是否禁用菜单，默认为 `false`
+
+##### active <Badge type="danger" text="boolean" />
+
+是否显示激活状态，默认为 `false`
+
+##### popover <Badge type="danger" text="boolean" />
+
+是否为带浮层的菜单，默认为 `false`
+
+##### popoverProps <Badge type="danger" text="PopoverPropsType" />
+
+浮层属性配置，包含以下属性：
+
+- width <Badge type="danger" text="string | number" />：浮层宽度，默认自适应
+- minWidth <Badge type="danger" text="string | number" />：浮层最小宽度
+- maxHeight <Badge type="danger" text="string | number" />：浮层最大高度
+- placement <Badge type="danger" text="PopoverPlacementType" /> 浮层默认显示位置，可取值 `'auto' | 'auto-start' | 'auto-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end'`，如果指定位置的空间不足以显示浮层，会自适应匹配其他位置
+- arrow <Badge type="danger" text="boolean" />：浮层是否显示三角形
+- trigger <Badge type="danger" text="hover | click | custom" />：浮层触发显示的方式，如果指定为 `custom`，则需要手动调用 `showPopover`/`hidePopover` 方法
+- animation <Badge type="danger" text="'fade' | 'translate' | string" />：浮层显示动画，默认支持 `fade` 和 `translate`，可以自定义其他动画名称，例如定义动画名称`'a'`，则对应的 `Transition` 组件 `name` 值为 `kaitify-popover-a`
+- zIndex <Badge type="danger" text="number" />：浮层的 `z-index` 层级，默认为 10
+- onShow <Badge type="danger" text="(el: Element) => void" />：浮层显示前触发的事件
+- onShowing <Badge type="danger" text="(el: Element) => void" />：浮层显示时触发的事件
+- onShown <Badge type="danger" text="(el: Element) => void" />：浮层显示后触发的事件
+- onHide <Badge type="danger" text="(el: Element) => void" />：浮层隐藏前触发的事件
+- onHiding <Badge type="danger" text="(el: Element) => void" />：浮层隐藏时触发的事件
+- onHidden <Badge type="danger" text="(el: Element) => void" />：浮层隐藏后触发的事件
+
+##### data <Badge type="danger" text="MenuDataType[]" />
+
+浮层显示的列表数据，是一个数组，数组中每一项包含如下属性：
+
+- label <Badge type="danger" text="string" />：选项内容
+- value <Badge type="danger" text="string | number" />：选项的值
+- icon <Badge type="danger" text="string | number" />：选项左侧显示的图标，只能是 `kaitify-react` 内置的图标名称，如果需要自定义图标只能通过 `icon` 插槽来实现
+
+##### itemDisabled <Badge type="danger" text="(item: MenuDataType) => boolean" />
+
+浮层选项是否禁用，该属性是一个函数，返回一个 `boolean` 值，回调参数为当前选项数据
+
+##### itemActive <Badge type="danger" text="(item: MenuDataType) => boolean" />
+
+浮层选项是否激活，该属性是一个函数，返回一个 `boolean` 值，回调参数为当前选项数据
+
+##### shortcut <Badge type="danger" text="((e: KeyboardEvent) => boolean) | { [key: MenuDataType['value']]: (e: KeyboardEvent) => boolean }" />
+
+菜单快捷键实现，如果该菜单是一个普通的按钮菜单，则该属性是一个函数，回调参数为键盘事件，需要返回一个 `boolean` 值，如果该菜单是一个带浮层的选项菜单，则该属性是一个对象，对象的 `key` 是选项的 `value` 值，对象的值是一个函数，回调参数为键盘事件，需要返回一个 `boolean` 值
+
+函数返回 `true` 值，表示触发菜单的 `operate` 或者 `select` 事件
+
+##### onOperate <Badge type="danger" text="() => void" />
+
+非浮层类型的菜单按钮点击触发的事件
+
+##### onSelect <Badge type="danger" text="(value: MenuDataType) => void" />
+
+浮层类型的菜单按钮点击选项触发的事件
+
+##### children <Badge type="danger" text="ReactNode" />
+
+菜单的子组件内容
+
+##### customPopover <Badge type="danger" text="ReactNode" />
+
+自定义浮层内容
+
+##### customIcon <Badge type="danger" text="ReactNode | ((option: MenuDataType) => ReactNode)" />
+
+自定义选项图标
+
+##### customLabel <Badge type="danger" text="ReactNode | ((option: MenuDataType) => ReactNode)" />
+
+自定义选项内容
+
+## API 组件属性/方法
+
+`Menu` 提供了部分属性/方法可以通过组件实例来调用
+
+##### showPopover <Badge type="danger" text="() => void" />
+
+显示浮层的方法
+
+##### hidePopover <Badge type="danger" text="() => void" />
+
+隐藏浮层的方法

package/docs/guide/quick-start.md

@@ -0,0 +1,76 @@
+---
+title: 快速上手
+---
+
+# 快速上手
+
+## 构建一个编辑器
+
+直接使用 `kaitify-react` 提供的 `Wrapper` 组件来渲染编辑器
+
+```tsx
+import { useState } from 'react'
+import { Wrapper } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} placeholder='输入正文内容...'></Wrapper>
+}
+```
+
+## 基本组件
+
+我们提供了如下的基本组件，可以很好的帮助我们在 `React` 项目中使用 `kaitify-react`
+
+##### Wrapper
+
+`Wrapper` 组件是编辑器的核心组件，它直接渲染一个编辑器，是对 `kaitify` 的二次包装，无需我们使用原生 `js` 的方式去构建编辑器
+
+具体的属性配置和使用方法，参考 [Wrapper 组件](/guide/wrapper)
+
+```tsx
+import { useState } from 'react'
+import { Wrapper } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} placeholder='输入正文内容...'></Wrapper>
+}
+```
+
+##### Bubble
+
+`Bubble` 气泡栏组件是编辑器内置的组件，它会跟随编辑器光标进行浮动显示，我们可以通过直接引入 `Bubble` 组件并在 `Wrapper` 组件的 `default` 插槽中放置来使用
+
+具体的属性配置和使用方法，参考 [Bubble 组件](/guide/bubble)
+
+```tsx
+import { useState } from 'react'
+import { Wrapper, Bubble } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return (
+    <Wrapper value={content} onChange={v => setContent(v)} placeholder='输入正文内容...'>
+      <Bubble visible={true}>我是气泡栏</Bubble>
+    </Wrapper>
+  )
+}
+```
+
+##### Menu
+
+`Menu` 菜单组件是编辑器内置的组件，它提供了一个基本的菜单按钮的样式，可以节省我们的工作，Menu 组件必须在 `Wrapper` 组件的插槽中使用
+
+具体的属性配置和使用方法，参考 [Menu 组件](/guide/menu)
+
+```tsx
+import { useState } from 'react'
+import { Wrapper,Menu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} placeholder='输入正文内容...' before={<Menu>菜单按钮</Menu>}></Wrapper>
+}
+</script>
+```

package/docs/guide/shortcut.md

@@ -0,0 +1,77 @@
+---
+title: 菜单快捷键
+---
+
+# 菜单快捷键
+
+`shortcut` 是 `Menu` 组件的一个参数，这里我们单独讲一下如何设置菜单的快捷键
+
+## 普通菜单的快捷键绑定
+
+普通菜单的 `shortcut` 属性是一个函数，返回 `boolean` 值，当返回 `true` 时会触发 `operate` 事件
+
+```tsx
+import { useState } from 'react'
+import { Wrapper, Menu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+
+  const shortcut = (e: KeyboardEvent) => {
+    //按下ctrl + b 触发
+    return e => e.key == 'b' && e.ctrlKey
+  }
+
+  //除了点击触发此事件外，当你按下 ctrl + b 也会触发此事件
+  const onOperate = () => {
+    console.log('菜单点击')
+  }
+
+  return (
+    <Wrapper
+      value={content}
+      onChange={v => setContent(v)}
+      placeholder='输入正文内容...'
+      before={
+        <Menu onOperate={onOperate} shortcut={shortcut}>
+          菜单
+        </Menu>
+      }
+    ></Wrapper>
+  )
+}
+```
+
+## 有浮层的菜单的快捷键绑定
+
+浮层菜单的 `shortcut` 属性是一个对象，对象的 `key` 是 `data` 的 `value` 值，对象的值是一个函数，返回 `boolean` 值，当返回 `true` 时会触发 `operate` 事件
+
+如果是自定义浮层内容的菜单，即没有配置 `data` 属性，通过 `popover` 插槽设置内容，此时无法通过 `shortcut` 绑定快捷键
+
+```tsx
+import { useState } from 'react'
+import { Wrapper,Menu } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+
+  const shortcut = {
+    //按下 ctrl + b 选择第一项，触发select事件
+    0: e => e.key == 'b' && e.ctrlKey
+    //按下 ctrl + w 选择第二项，触发select事件
+    1: e => e.key == 'w' && e.ctrlKey
+    //按下 ctrl + e 选择第三项，触发select事件
+    2: e => e.key == 'e' && e.ctrlKey
+  }
+
+  const onSelect = (item) => {
+    console.log('选项选择',item)
+  }
+
+  return <Wrapper value={content} onChange={v => setContent(v)} placeholder='输入正文内容...' before={<Menu onOperate={onOperate} shortcut={shortcut} popover data={[
+    { label: '选项1', value: 0 },
+    { label: '选项2', value: 1 },
+    { label: '选项3', value: 2 }
+  ]}>菜单</Menu>}></Wrapper>
+}
+```

package/docs/guide/tabs.md

@@ -0,0 +1,42 @@
+---
+title: Tabs 选项卡
+---
+
+# Tabs 选项卡
+
+`Tabs` 组件是 `kaitify-react` 的一个 `UI` 组件，该组件与编辑器具体的功能无关，它一般用于带浮层的菜单中，用来分区域展示不同的内容
+
+## 基本使用
+
+```tsx
+import { Tabs } from '@kaitify/react'
+export default function App() {
+  return (
+    <Tabs
+      default-value='A'
+      data={[
+        { label: '我是A', value: 'A' },
+        { label: '我是B', value: 'B' }
+      ]}
+    >
+      {current => {
+        current
+      }}
+    </Tabs>
+  )
+}
+```
+
+## Props 参数
+
+##### data <Badge type="danger" text="{ label: string; value: string | number }[]" />
+
+选项卡数据配置，是一个数组，数组项的 `label` 表示选项卡显示的名称，`value` 表示选项卡对应的值
+
+##### defaultValue <Badge type="danger" text="string | number" />
+
+默认展示的选项卡，这里只需要设置其 `value` 对应的值即可
+
+##### children <Badge type="danger" text="ReactNode | ((current: string | number) => ReactNode)" />
+
+子组件内容

package/docs/guide/wrapper.md

@@ -0,0 +1,303 @@
+---
+title: Wrapper 包裹器
+---
+
+# Wrapper 包裹器
+
+`Wrapper` 组件是 `kaitify-react` 的核心组件，顾名思义，它作为一个包裹器，在组件加载时，自动帮助我们创建一个编辑器实例，无需我们手动调用底层的方法去构建编辑器
+
+## 基本使用
+
+使用 `value` / `onChange` 来使得编辑器受控，通过 `placeholder` 属性设置占位符内容
+
+```tsx
+import { useState } from 'react'
+import { Wrapper } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper value={content} onChange={v => setContent(v)} placeholder='输入正文内容...'></Wrapper>
+}
+```
+
+使用 `disabled` 来禁用编辑器，此时编辑器不可编辑
+
+```tsx
+import { useState } from 'react'
+import { Wrapper } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper disabled value={content} onChange={v => setContent(v)} placeholder='输入正文内容...'></Wrapper>
+}
+```
+
+使用 `autofocus` 来设置编辑器在初始化后自动聚焦
+
+```tsx
+import { useState } from 'react'
+import { Wrapper } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper autofocus value={content} onChange={v => setContent(v)} placeholder='输入正文内容...'></Wrapper>
+}
+```
+
+使用 `dark` 来设置编辑器为深色风格
+
+```tsx
+import { useState } from 'react'
+import { Wrapper } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper dark value={content} onChange={v => setContent(v)} placeholder='输入正文内容...'></Wrapper>
+}
+```
+
+编辑器的宽度和高度可以直接通过 `css` 样式来设置
+
+```tsx
+import { useState } from 'react'
+import { Wrapper } from '@kaitify/react'
+
+export default function App() {
+  const [content, setContent] = useState('<p>hello</p>')
+  return <Wrapper style={{ width: 500, height: 500 }} value={content} onChange={v => setContent(v)} placeholder='输入正文内容...'></Wrapper>
+}
+```
+
+## Props 参数
+
+`Wrapper` 包裹器提供除了以上提到的属性以外， 具体完整的属性如下：
+
+##### value <Badge type="danger" text="string" />
+
+编辑器的字符串内容
+
+##### style <Badge type="danger" text="CSSProperties" />
+
+编辑器的样式
+
+##### className <Badge type="danger" text="string" />
+
+编辑器的样式类
+
+##### disabled <Badge type="danger" text="boolean" />
+
+是否禁用编辑器，禁用后编辑器不可编辑，默认为 `false`
+
+##### locale <Badge type="danger" text="LocaleType" />
+
+编辑器语言环境，取值范围是 `zh-CN` `en-US` `ko-KR` `ja-JP`，分别表示中文简体和英文语言、韩语、日语环境，默认为 `zh-CN`
+
+##### children <Badge type="danger" text="ReactNode | ((state: StateType) => ReactNode)" />
+
+编辑器的子元素，用于渲染气泡栏组件
+
+##### appendBeforeTo <Badge type="danger" text="string | HTMLElement" />
+
+`before` 插槽挂载的元素，如果不设置，则就放置在编辑器前面
+
+##### appendAfterTo <Badge type="danger" text="string | HTMLElement" />
+
+`after` 插槽挂载的元素，如果不设置，则就放置在编辑器后面
+
+##### before <Badge type="danger" text=" ReactNode | ((state: StateType) => ReactNode)" />
+
+展示在编辑器前面的内容
+
+##### after <Badge type="danger" text=" ReactNode | ((state: StateType) => ReactNode)" />
+
+展示在编辑器后面的内容
+
+##### autofocus <Badge type="danger" text="boolean" />
+
+编辑器渲染后是否自动聚焦，默认为 `false`
+
+##### placeholder <Badge type="danger" text="string" />
+
+编辑器内容仅有一个默认的段落时，用来占位的内容
+
+##### dark <Badge type="danger" text="boolean" />
+
+编辑器是否呈现深色风格，默认为 `false`，此属性对编辑器相关的所有组件都有影响
+
+##### allowCopy <Badge type="danger" text="boolean" />
+
+是否允许复制操作，默认为 `true`
+
+##### allowPaste <Badge type="danger" text="boolean" />
+
+是否允许粘贴操作，默认为 `true`
+
+##### allowCut <Badge type="danger" text="boolean" />
+
+是否允许剪切操作，默认为 `true`
+
+##### allowPasteHtml <Badge type="danger" text="boolean" />
+
+是否允许粘贴 `html`，即粘贴内容时是否携带样式，默认为 `false`
+
+##### priorityPasteFiles <Badge type="danger" text="boolean" />
+
+剪切板同时存在文件和 `html/text` 时，是否优先粘贴文件，默认为 `false`
+
+##### textRenderTag <Badge type="danger" text="string" />
+
+自定义编辑器内渲染文本节点的真实标签，默认为 `span`
+
+##### blockRenderTag <Badge type="danger" text="string" />
+
+自定义编辑内渲染默认块级节点的真实标签，即段落标签，默认为 `p`
+
+##### emptyRenderTags <Badge type="danger" text="string[]" />
+
+自定义编辑器内定义需要置空的标签
+
+##### extraKeepTags <Badge type="danger" text="string[]" />
+
+自定义编辑器内额外保留的标签
+
+##### extensions <Badge type="danger" text="Extension[]" />
+
+自定义插件数组
+
+##### formatRules <Badge type="danger" text="RuleFunctionType[]" />
+
+自定义节点数组格式化规则
+
+##### onChange <Badge type="danger" text="(value: string) => void" />
+
+编辑器值发生变更时触发的事件，回调参数为编辑器的字符串值，与 `value` 一起组成受控模式
+
+##### onCreated <Badge type="danger" text="(editor: Editor) => void" />
+
+编辑器创建完成后触发的事件，回调参数是编辑器实例对象
+
+##### onDomParseNode <Badge type="danger" text="(this: Editor, node: KNode) => KNode" />
+
+自定义 `dom` 转为非文本节点的后续处理
+
+##### onPasteKeepMarks <Badge type="danger" text="(this: Editor, node: KNode) => KNodeMarksType" />
+
+节点粘贴保留标记的自定义方法
+
+##### onPasteKeepStyles <Badge type="danger" text="(this: Editor, node: KNode) => KNodeStylesType" />
+
+节点粘贴保留样式的自定义方法
+
+##### onPasteText <Badge type="danger" text="(this: Editor, text: string) => boolean | Promise<boolean>" />
+
+编辑器粘贴纯文本时触发，如果返回 `true` 则表示继续使用默认逻辑，返回 `false` 则不走默认逻辑，需要进行自定义处理
+
+##### onPasteHtml <Badge type="danger" text="(this: Editor, nodes: KNode[], html: string) => boolean | Promise<boolean>" />
+
+编辑器粘贴 `html` 内容时触发，如果返回 `true` 则表示继续使用默认逻辑，返回 `false` 则不走默认逻辑，需要进行自定义处理
+
+##### onPasteImage <Badge type="danger" text="(this: Editor, file: File) => boolean | Promise<boolean>" />
+
+编辑器粘贴图片时触发，如果返回 `true` 则表示继续使用默认逻辑，返回 `false` 则不走默认逻辑，需要进行自定义处理
+
+##### onPasteVideo <Badge type="danger" text="(this: Editor, file: File) => boolean | Promise<boolean>" />
+
+编辑器粘贴视频时触发，如果返回 `true` 则表示继续使用默认逻辑，返回 `false` 则不走默认逻辑，需要进行自定义处理
+
+##### onPasteFile <Badge type="danger" text="(this: Editor, file: File) => void | Promise<void>" />
+
+编辑器粘贴除了图片和视频以外的文件时触发，需要自定义处理
+
+##### onDetachMentBlockFromParent <Badge type="danger" text="(this: Editor, node: KNode) => boolean" />
+
+在删除和换行操作中块节点节点从其父节点中抽离出去成为与父节点同级的节点后触发，如果返回 `true` 则表示继续使用默认逻辑，会将该节点转为段落，返回 `false` 则不走默认逻辑，需要自定义处理
+
+##### onBeforePatchNodeToFormat <Badge type="danger" text="(this: Editor, node: KNode) => KNode" />
+
+编辑器 `updateView` 执行时，通过比对新旧节点数组获取需要格式化的节点，在这些节点被格式化前，触发此方法，回调参数即当前需要被格式化的节点，该方法返回一个节点，返回的节点将会被格式化，如果你不需要任何特殊处理，返回入参提供的节点即可
+
+##### onSelectionUpdate <Badge type="danger" text="(this: Editor, selection: Selection) => void" />
+
+编辑器光标发生变化触发的事件，回调参数为编辑器的 `Selection` 对象实例
+
+##### onInsertParagraph <Badge type="danger" text="(this: Editor, node: KNode) => void" />
+
+编辑器进行换行时触发的事件，回调参数为换行后光标所在的块节点
+
+##### onDeleteComplete <Badge type="danger" text="(this: Editor) => void" />
+
+编辑器执行删除操作完成的时候触发的事件
+
+##### onKeydown <Badge type="danger" text="(this: Editor, event: KeyboardEvent) => void"  />
+
+编辑器内键盘按下触发的事件，回调参数为 `KeyboardEvent`
+
+##### onKeyup <Badge type="danger" text="(this: Editor, event: KeyboardEvent) => void"  />
+
+编辑器内键盘松开触发的事件，回调参数为 `KeyboardEvent`
+
+##### onFocus <Badge type="danger" text="(this: Editor, event: FocusEvent) => void"  />
+
+编辑器获取光标触发的事件，回调参数为 `FocusEvent`
+
+##### onBlur <Badge type="danger" text="(this: Editor, event: FocusEvent) => void"  />
+
+编辑器失去光标触发的事件，回调参数为 `FocusEvent`
+
+##### onBeforeUpdateView <Badge type="danger" text="(this: Editor) => void"  />
+
+编辑器视图更新前触发的事件
+
+##### onAfterUpdateView <Badge type="danger" text="(this: Editor) => void"  />
+
+编辑器视图更新后触发的事件
+
+> 上述的属性部分继承于 kaitify 的 Editor 构建属性（同名属性），如果需要深入了解，可以去查看 kaitify 的文档
+
+## API 组件属性/方法
+
+`Wrapper` 提供了部分属性/方法可以通过组件实例来调用
+
+##### elRef <Badge type="danger" text="React.MutableRefObject<HTMLDivElement | null>" />
+
+获取组件实例即编辑器的 `dom` 元素
+
+```tsx
+import { useRef, useState } from 'react'
+import { Wrapper, WrapperRefType } from '@kaitify/react'
+
+export default function App() {
+  const wrapperRef = useRef<WrapperRefType | null>(null)
+  const [content, setContent] = useState('<p>hello</p>')
+
+  useEffect(() => {
+    //获取编辑器的dom元素
+    console.log(wrapperRef.current?.elRef.current)
+  }, [])
+
+  return <Wrapper ref={wrapperRef} value={content} onChange={v => setContent(v)} placeholder='输入正文内容...'></Wrapper>
+}
+```
+
+##### state <Badge type="danger" text="StateType" />
+
+`Wrapper` 组件内部返回的关于编辑器状态的相关数据，包含 `editor` `selection` 两个属性，分别表示当前编辑器的 `Editor` 实例，当前编辑器的 `Selection` 实例
+
+该数据是响应式的数据，所以我们每次通过该数据的 `editor` 属性调用 `kaitify` 编辑器的方法都是响应式的效果
+
+```tsx
+import { useRef, useState } from 'react'
+import { Wrapper, WrapperRefType } from '@kaitify/react'
+
+export default function App() {
+  const wrapperRef = useRef<WrapperRefType | null>(null)
+  const [content, setContent] = useState('<p>hello</p>')
+
+  useEffect(() => {
+    //获取编辑器的实例
+    console.log(wrapperRef.current?.state.editor.value)
+  }, [wrapperRef.current?.state.editor])
+
+  return <Wrapper ref={wrapperRef} value={content} onChange={v => setContent(v)} placeholder='输入正文内容...'></Wrapper>
+}
+```

package/docs/index.md

@@ -0,0 +1,41 @@
+---
+lastUpdated: false
+aside: false
+layout: home
+title: 主页
+
+hero:
+  name: kaitify for react
+  text: 一个简单的react富文本编辑器核心库
+  tagline: 轻松构建一个L1级别的react富文本编辑器...
+  image:
+    src: https://www.so-better.cn/docs/kaitify-core/logo.png
+    width: 288
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/introduction
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/so-better/kaitify-react
+
+features:
+  - title: '@kaitify/core'
+    details: 基于原生JS的富文本编辑器核心库
+    link: https://www.so-better.cn/docs/kaitify-core/
+  - title: '@kaitify/vue'
+    details: 基于kaitify开发的vue富文本编辑器核心库
+    link: https://www.so-better.cn/docs/kaitify-vue/
+  - title: dap-util
+    details: 一个轻量的前端JavaScript工具库，专注于JavaScript，不关心UI
+    link: https://www.so-better.cn/docs/dap-util/
+  - title: animator-clip
+    details: 一个基于 JavaScript 的 requestAnimationFrame API 封装的轻量级 JS 动画插件
+    link: https://www.so-better.cn/docs/animator-clip/
+  - title: rem-fit
+    details: 一款使用rem适配web页面的轻量级插件
+    link: https://www.so-better.cn/docs/rem-fit/
+  - title: ruax
+    details: 一个轻量级的Javascript异步数据请求库
+    link: https://www.so-better.cn/docs/ruax/
+---

package/docs/menus/built-in/align-center.md

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