定制 Block 节点

在之前的例子中，我们从实现一个段落开始，但是实际上我们从来没有告诉过 Slate 关于 paragraph block 节点的任何信息。我们仅仅是使用了内置的默认渲染器，它使用的是普通古老的 <div> 。

但是你能做到的不止如此。Slate 允许我们定义任何类型的自定义 block 节点，比如块引用，代码块，列表项等。

我们将给你展示如何做到。让我们从之前的应用程序继续吧：

  1. const App = () => {
  2.   const editor = useMemo(() => withReact(createEditor()), [])
  3.   const [value, setValue] = useState([
  4.     {
  5.       type: 'paragraph',
  6.       children: [{ text: '段落中的一段文本。' }],
  7.     },
  8.   ])
  10.   return (
  11.     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
  12.       <Editable
  13.         onKeyDown={event => {
  14.           if (event.key === '&') {
  15.             event.preventDefault()
  16.             editor.insertText("and")
  17.           }
  18.         }}
  19.       />
  20.     </Slate>
  21.   )
  22. }

现在让我们添加“代码块”到我们的编辑器中。

问题是，代码块不仅仅要渲染为一个普通的段落，它还需要以不同的方式渲染出来。为了做到这一点，我们需要为 code 元素节点定义一个特定的渲染器。

元素渲染器仅仅是一个简单的 React 组件。像是这样：

  1. // 为 code 节点定义一个 React 组件渲染器。
  2. const CodeElement = props => {
  3.   return (
  4.     <pre {...props.attributes}>
  5.       <code>{props.children}</code>
  6.     </pre>
  7.   )
  8. }

非常简单。

看到 props.attributes 参数了吗？Slate 将需要在 block 顶层元素上渲染的属性通过这种方式传入。这样你就不必自己去构建它们了。你必须在你的组件中传入这些属性。

另外，看到 props.children 参数了吗？Slate 会自动为你渲染 block 的所有子元素，并且就像在其他 React 组件中那样，通过 props.children 传递给你。这样你就不必去为如何正确渲染文本节点或其他类似的事情而费神了。你必须将这些子节点作为最终的叶子节点在你的组件中渲染。

下面是一个默认元素的组件：

  1. const DefaultElement = props => {
  2.   return <p {...props.attributes}>{props.children}</p>
  3. }

现在，让我们为 Editor 添加一些渲染器：

  1. const App = () => {
  2.   const editor = useMemo(() => withReact(createEditor()), [])
  3.   const [value, setValue] = useState([
  4.     {
  5.       type: 'paragraph',
  6.       children: [{ text: '段落中的一段文本。' }],
  7.     },
  8.   ])
  10.   // 基于传递的 `props` 定义一个渲染函数。
  11.   // 我们在这里使用 `useCallback` 在随后的渲染中记住这个函数。
  12.   const renderElement = useCallback(props => {
  13.     switch (props.element.type) {
  14.       case 'code':
  15.         return <CodeElement {...props} />
  16.       default:
  17.         return <DefaultElement {...props} />
  18.     }
  19.   }, [])
  21.   return (
  22.     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
  23.       <Editable
  24.         // 传递 `renderElement` 函数。
  25.         renderElement={renderElement}
  26.         onKeyDown={event => {
  27.           if (event.key === '&') {
  28.             event.preventDefault()
  29.             editor.insertText("and")
  30.           }
  31.         }}
  32.       />
  33.     </Slate>
  34.   )
  35. }
  37. const CodeElement = props => {
  38.   return (
  39.     <pre {...props.attributes}>
  40.       <code>{props.children}</code>
  41.     </pre>
  42.   )
  43. }
  45. const DefaultElement = props => {
  46.   return <p {...props.attributes}>{props.children}</p>
  47. }

好了，但是我们还需要一个办法让用户实际转换一个 block 为代码块。所以让我们修改 onKeyDown 函数，添加一个 Ctrl-` 快捷键来做这件事：

  1. // 从 Slate 导入 `Editor`
  2. import { Editor } from 'slate'
  4. const App = () => {
  5.   const editor = useMemo(() => withReact(createEditor()), [])
  6.   const [value, setValue] = useState([
  7.     {
  8.       type: 'paragraph',
  9.       children: [{ text: '段落中的一段文本。' }],
  10.     },
  11.   ])
  13.   const renderElement = useCallback(props => {
  14.     switch (props.element.type) {
  15.       case 'code':
  16.         return <CodeElement {...props} />
  17.       default:
  18.         return <DefaultElement {...props} />
  19.     }
  20.   }, [])
  22.   return (
  23.     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
  24.       <Editable
  25.         renderElement={renderElement}
  26.         onKeyDown={event => {
  27.           if (event.key === '`' && event.ctrlKey) {
  28.             // 阻止插入 "`" 的默认行为。 
  29.             event.preventDefault()
  30.             // 否则，把当前选择的 blocks 的类型设为 "code"。
  31.             Transforms.setNodes(
  32.               editor,
  33.               { type: 'code' },
  34.               { match: n => Editor.isBlock(editor, n) }
  35.             )
  36.           }
  37.         }}
  38.       />
  39.     </Slate>
  40.   )
  41. }
  43. const CodeElement = props => {
  44.   return (
  45.     <pre {...props.attributes}>
  46.       <code>{props.children}</code>
  47.     </pre>
  48.   )
  49. }
  51. const DefaultElement = props => {
  52.   return <p {...props.attributes}>{props.children}</p>
  53. }

现在，如果你按下 Ctrl-` ，你光标所在的块应该会转换为一个代码块！多么神奇！

但是我们忘记了一件事。当我们再次按下 Ctrl-` ，它应该从代码块变回普通段落。为了做到这点，我们需要添加一点点逻辑，基于我们当前选择的块是否已经是一个代码块来改变我们设置的类型：

  1. const App = () => {
  2.   const editor = useMemo(() => withReact(createEditor()), [])
  3.   const [selection, setSelection] = useState(null)
  4.   const [value, setValue] = useState([
  5.     {
  6.       type: 'paragraph',
  7.       children: [{ text: '段落中的一段文本。' }],
  8.     },
  9.   ])
  11.   const renderElement = useCallback(props => {
  12.     switch (props.element.type) {
  13.       case 'code':
  14.         return <CodeElement {...props} />
  15.       default:
  16.         return <DefaultElement {...props} />
  17.     }
  18.   }, [])
  20.   return (
  21.     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
  22.       <Editable
  23.         renderElement={renderElement}
  24.         onKeyDown={event => {
  25.           if (event.key === '`' && event.ctrlKey) {
  26.             event.preventDefault()
  27.             // 确定当前选中的块是否为任意的代码块。
  28.             const [match] = Editor.nodes(editor, {
  29.               match: n => n.type === 'code',
  30.             })
  31.             // 根据是否已经存在匹配项来切换 block 的类型。
  32.             Transforms.setNodes(
  33.               editor,
  34.               { type: match ? 'paragraph' : 'code' },
  35.               { match: n => Editor.isBlock(editor, n) }
  36.             )
  37.           }
  38.         }}
  39.       />
  40.     </Slate>
  41.   )
  42. }

现在你完成了！如果你在一个代码块中按下 Ctrl-` ，它将会变回一个段落！