配置方法
扩展插件时，默认情况下所有属性都会进行深度合并，但有两个例外：数组会被完全替换，而options对象会进行浅合并。
.configure
.configure方法允许你覆盖插件的配置。
const ConfiguredPlugin = MyPlugin.configure({
options: {
myOption: 'new value',
},
});你也可以使用函数来访问当前配置：
const ConfiguredPlugin = MyPlugin.configure(({ getOptions }) => ({
options: {
...getOptions(),
myOption: `${getOptions().myOption} + extra`,
},
}));- 用于修改插件的现有属性
- 不会向插件添加新属性
- 最后应用的配置会被编辑器使用
- 不返回扩展类型，保持原始插件类型
.configurePlugin
.configurePlugin方法允许你配置嵌套插件的属性：
const TablePlugin = createPlatePlugin({
key: 'table',
plugins: [TableCellPlugin],
}).configurePlugin(TableCellPlugin, {
options: {
cellOption: 'modified',
},
});- 用于配置父插件中的嵌套插件
- 与
.configure类似，修改现有属性但不添加新属性 - 适合在不扩展子插件类型的情况下调整其行为
.extend
.extend方法允许你扩展插件的配置和功能。
const ExtendedPlugin = MyPlugin.extend({
options: {
newOption: 'new value',
},
});你也可以使用函数来访问当前配置和编辑器：
const ExtendedPlugin = MyPlugin.extend(({ editor, plugin }) => ({
options: {
newOption: 'new value',
},
handlers: {
onKeyDown: () => {
// 自定义按键逻辑
},
},
}));- 用于向插件添加新属性或修改现有属性
- 返回具有扩展类型的新插件实例
- 支持链式调用，允许多个扩展顺序应用
.extendPlugin
.extendPlugin方法允许你扩展嵌套插件的配置和功能：
const TablePlugin = createPlatePlugin({
key: 'table',
plugins: [TableCellPlugin],
}).extendPlugin(TableCellPlugin, {
options: {
newCellOption: 'added',
},
handlers: {
onKeyDown: () => {
// 表格单元格的自定义按键逻辑
},
},
});- 用于扩展父插件中的嵌套插件
- 可以向嵌套插件添加新属性并修改现有属性
- 返回包含扩展嵌套插件的新父插件实例
.configure与.extend的区别
虽然这两种方法都可以用于修改插件配置，但存在一些关键差异：
- 链式调用：
.extend支持链式调用，而.configure不支持 - 类型扩展：
.extend返回具有扩展类型的新插件实例，而.configure保持原始类型 - 新属性：
.extend可以向插件配置添加新属性，而.configure仅修改现有属性
根据是否需要扩展插件类型和功能（使用.extend）或仅修改现有配置（使用.configure）来选择适当的方法。
.extendSelectors
extendSelectors方法允许你向插件添加可订阅的选择器：
const CounterPlugin = createPlatePlugin({
key: 'counter',
options: {
count: 0,
},
}).extendSelectors(({ getOptions }) => ({
doubleCount: () => getOptions().count * 2,
isEven: () => getOptions().count % 2 === 0,
}));然后你可以在组件或其他插件方法中使用这些选择器：
const CounterComponent = () => {
const count = usePluginOption(CounterPlugin, 'count');
const doubleCount = usePluginOption(CounterPlugin, 'doubleCount');
const isEven = usePluginOption(CounterPlugin, 'isEven');
return (
<div>
<p>Count: {count}</p>
<p>Double Count: {doubleCount}</p>
<p>Is Even: {isEven ? 'Yes' : 'No'}</p>
</div>
);
};- 允许你从插件选项创建派生状态或计算值
- 使用
getOption读取值 - 使用
usePluginOption订阅值，当选项变化时重新计算，仅在结果变化时重新渲染。这是与.extendApi的主要区别
.withComponent
withComponent方法允许你设置或替换与插件关联的组件。
const ParagraphPlugin = createPlatePlugin({
key: 'p',
node: {
isElement: true,
type: 'p',
},
}).withComponent(ParagraphElement);API和转换方法
插件可以定义自己的API方法和转换方法，这些方法将被合并到编辑器的API和转换中。这是通过extendApi、extendEditorApi、extendTransforms和extendEditorTransforms方法实现的。
.extendApi
使用extendApi添加插件特定的API方法：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
}).extendApi(() => ({
pluginMethod: () => 'plugin method result',
}));
// 访问插件的API
editor.api.myPlugin.api.pluginMethod();.extendEditorApi
使用extendEditorApi添加根级API方法：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
}).extendEditorApi(({ getOptions }) => ({
editorMethod: () => getOptions().someOption,
}));
// 访问插件的API
editor.api.editorMethod();.extendTransforms
使用extendTransforms添加插件特定的转换方法：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
}).extendTransforms(() => ({
pluginTransform: () => {
// 自定义转换逻辑
},
}));
// 访问插件的转换方法
editor.tf.myPlugin.pluginTransform();
// 注意：`editor.tf`是`editor.transforms`的简写
editor.transforms.myPlugin.pluginTransform();.extendEditorTransforms
使用extendEditorTransforms添加根级转换方法：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
}).extendEditorTransforms(({ editor }) => ({
editorTransform: () => {
// 自定义编辑器转换逻辑
},
}));
// 访问插件的转换方法
editor.tf.editorTransform();.overrideEditor
overrideEditor方法专门用于在不改变插件类型的情况下覆盖现有的编辑器方法：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
}).overrideEditor(({ editor, tf: { insertText }, api: { isInline } }) => ({
transforms: {
insertText(text, options) {
// 覆盖insertText行为
insertText(text, options);
},
},
api: {
isInline(element) {
// 覆盖isInline行为
return isInline(element);
},
},
}));- 专门用于覆盖现有的编辑器方法
- 返回包装在
transforms或api对象中的重写方法 - 不能添加新方法（使用
extendEditorTransforms或extendEditorApi替代） - 通过上下文提供对原始方法的访问
API与转换方法的区别
虽然目前Plate中API和转换方法在核心上没有区别，但它们服务于不同的目的，并为未来的可扩展性而设计：
-
转换方法：
- 存储所有Slate转换和编辑器操作。结构设计为未来可能支持中间件，允许更复杂的转换管道和开发工具。
- 通常用于修改编辑器状态的操作，如插入、删除或转换内容。
- 示例：
editor.tf.toggleBlock()、editor.tf.toggleMark('bold')
-
API方法：
- 存储所有查询、实用函数和其他不直接修改编辑器状态的方法。
- 示例：
editor.api.save()、editor.api.debug.log()
链式扩展
你可以链式调用这些方法来创建全面的插件：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
options: {
baseValue: 5,
},
})
.extendApi(() => ({
pluginMethod: () => 'plugin method',
}))
.extendEditorApi(({ getOptions }) => ({
multiply: (factor: number) => getOptions().baseValue * factor,
}))
.extendTransforms(() => ({
pluginTransform: () => {
// 插件特定的转换
},
}))
.extendEditorTransforms(({ editor }) => ({
editorTransform: () => {
// 编辑器特定的转换
},
}));
editor.api.myPlugin.api.pluginMethod();
editor.api.multiply(3);
editor.tf.myPlugin.pluginTransform();
editor.tf.editorTransform();将Slate插件转换为Plate插件
要将类型化的Slate插件转换为Plate插件，可以使用toPlatePlugin：
const CodeBlockPlugin = toPlatePlugin(createSlatePlugin({ key: 'code_block' }), {
handlers: {},
options: { hotkey: ['mod+opt+8', 'mod+shift+8'] },
});