slate.js踩坑记录
Contents
基本没有实践文档
因为slate在0.5版本进行了break改动，插件基本重构，所以基本没有可参考文档。
解决方法
-
参考slate的Demo代码和slate-yjs的源码
value值限制
value中必须有text或children，否则报错。
解决方法：
插入一个空的line node。
const initialValue: Descendant[] = [
{
type: 'line',
children: [
{ text: '' },
{
type: 'SelectType',
items: [],
text: '',//必须存在
},
],
},
];
不能设置lineheight
必须被节点填充，否则点击会出现报错，认为是不可识别的node。
比如设置lineheight，width，height等都会报错
element类型
props.element的默认类型没有type，其实是有的。
const renderElement = useCallback((props: RenderElementProps) => {
switch ((props.element as any).type) {
default:
return <DefaultElement {...props} />;
}
}, []);
解决方法
自行declare
declare module 'slate' {
interface CustomTypes {
Editor: ReactEditor;
Element: CustomElement;
Text: CustomText;
}
}
默认值报错
value的默认值不能为空数组，否则会报错
解决方法
默认一个空文本节点。
const initialValue: Descendant[] = [{ children: [{ text: '' }], type: 'text' }];
单选在最后没有光标
当光标在单选时，光标就不会显示
解决办法
插入单选时，插入一个空文本
autoFocus
默认的autoFocus没有光标。
解决方法
useEffect(() => {
setTimeout(() => {
Transforms.setSelection(editor, {
anchor: {
path: [0, 0],
offset: 0,
},
focus: {
path: [0, 0],
offset: 0,
},
});
ReactEditor.focus(editor);
}, 100);
}, []);
slate 的value 只是默认值，不能联动
