Plate 使用 jotai-x 来存储编辑器的状态。
Plate 存储
PlateStoreState 对象存储了 Plate 编辑器的状态。它包含了编辑器的 ID、当前值、插件以及其他设置的信息。
- 默认值:
createPlateFallbackEditor() - 默认值: 随机 ID
- 默认值:
true
Plate 编辑器的引用。
用作 provider 作用域的唯一 ID。如果在同一个 React 树中有多个 Plate,请使用它。
编辑器容器元素的引用。
用于装饰编辑器中范围的函数。
(options: { editor: PlateEditor; entry: NodeEntry }) => TRange[]Editable 是否已渲染,以便 slate DOM 可解析。
编辑器状态变化时的受控回调函数。
(options: { editor: PlateEditor; value: ValueOf<PlateEditor> }) => void编辑器选区变化时的受控回调函数。
(options: { editor: PlateEditor; selection: TSelection }) => void编辑器子节点变化时的受控回调函数。
(options: { editor: PlateEditor; value: ValueOf<PlateEditor> }) => void编辑器是否是主要的。如果没有活跃的编辑器,PlateController 将使用第一个挂载的主要编辑器。
编辑器是否为只读模式。
渲染编辑器中元素的函数。
渲染编辑器中叶子节点的函数。
调用 redecorate 时递增的版本号。这是 decorate 函数的依赖项。
每次编辑器变化时递增的版本号。
每次编辑器选区变化时递增的版本号。
每次编辑器子节点变化时递增的版本号。
访问存储
import { usePlateStore, useEditorRef, useEditorPlugin } from 'platejs/react'
// 直接访问存储
const store = usePlateStore(id?)
// 通过编辑器引用访问
const store = useEditorRef().store
// 通过插件上下文访问
const store = useEditorPlugin(myPlugin).store注意:id 参数是可选的,默认使用最近的编辑器。
存储钩子
以下钩子可用于与 Plate 存储交互:
import { usePlateState, usePlateValue, usePlateSet } from 'platejs/react'usePlateState
获取和设置存储属性的值。
const [readOnly, setReadOnly] = usePlateState('readOnly', id?)usePlateValue
订阅存储属性的值。
const readOnly = usePlateValue('readOnly', id?)usePlateSet
设置存储属性的值。
const setReadOnly = usePlateSet('readOnly', id?)事件编辑器存储
该存储是一个对象,其属性键是事件名称(例如 'focus'),属性值是编辑器 ID。
import { EventEditorStore, useEventEditorValue } from 'platejs'
// 获取值
const focusedId = EventEditorStore.get('focus')
// 设置值
EventEditorStore.set('focus', editorId)
// 订阅变化
const focusedId = useEventEditorValue('focus')useEventPlateId
获取最近的事件编辑器 ID。