slate.js

[lxw15337674]

slate.js踩坑记录

基本没有实践文档

因为slate在0.5版本进行了break改动，插件基本重构，所以基本没有可参考文档。

解决方法

• 参考slate的Demo代码和[slate-yjs](https://github.com/BitPhinix/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，其实是有的。 ```TypeScript const renderElement = useCallback((props: RenderElementProps) => { switch ((props.element as any).type) { default: return ; } }, []); ``` #### 解决方法 自行declare ```TypeScript declare module 'slate' { interface CustomTypes { Editor: ReactEditor; Element: CustomElement; Text: CustomText; } } ``` ### 默认值 value的默认值不能为空数组，否则会报错  #### 解决方法 默认一个空文本节点。 ```TypeScript const initialValue: Descendant[] = [{ children: [{ text: '' }], type: 'text' }]; ``` ### 单选在最后没有光标 当光标在单选时，光标就不会显示 #### 解决办法 插入单选时，插入一个空文本 ### autoFocus 默认的autoFocus没有光标。 #### 解决方法 ```TypeScript useEffect(() => { setTimeout(() => { Transforms.setSelection(editor, { anchor: { path: [0, 0], offset: 0, }, focus: { path: [0, 0], offset: 0, }, }); ReactEditor.focus(editor); }, 100); }, []); ``` ### slate 的value 只是默认值，不能联动 [文档链接](https://docs.slatejs.org/walkthroughs/01-installing-slate) 

[lxw15337674]

解释

选区（Selection）

当前选中的区域，如果区域的起点和终点重合，那看到就是一个光标。

• 锚点（anchor） 选区的起点，反映了选区从哪个节点，哪个偏移位置开始。

• 焦点（focus） 选区的终点，反映了选区从哪个节点，哪个偏移位置结束

normalize

节点合并，这些相邻的节点可以通过 Node.normalize() 进行合并。

Void

空节点，指没有内容的节点。诸如 <input />、<link />

[lxw15337674]

参考： https://zhuanlan.zhihu.com/p/324209467