使用命令

直到现在为止，我们已经学到的所有事情就是如何为定制的 Slate 编辑器写一次性的逻辑。但是 Slate 最强大的功能之一在于 Slate 可以让你按照喜好去定制富文本“域”模型，并减少一次性代码的编写。

在之前的指南中我们已经编写了一些有用的代码用来处理代码块和加粗格式。我们使用 onKeyDown 事件处理函数来调用这些代码。但是我们总是直接使用 Editor 内置的帮助器（helpers）来完成它们，而不是使用命令（commands）。

Slate 允许你增加内置的 editor 对象来处理定制的富文本命令。你甚至可以使用预先打包的插件（plugins）来添加一组给定的功能。

让我们看看如何编写吧。

我们还是从之前的应用程序继续：

  1. const App = () => {
  2.   const editor = useMemo(() => withReact(createEditor()), [])
  3.   const [value, setValue] = useState([
  4.     {
  5.       type: 'paragraph',
  6.       children: [{ text: '段落中的一段文本。' }],
  7.     },
  8.   ])
  10.   const renderElement = useCallback(props => {
  11.     switch (props.element.type) {
  12.       case 'code':
  13.         return <CodeElement {...props} />
  14.       default:
  15.         return <DefaultElement {...props} />
  16.     }
  17.   }, [])
  19.   const renderLeaf = useCallback(props => {
  20.     return <Leaf {...props} />
  21.   }, [])
  23.   return (
  24.     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
  25.       <Editable
  26.         renderElement={renderElement}
  27.         renderLeaf={renderLeaf}
  28.         onKeyDown={event => {
  29.           if (!event.ctrlKey) {
  30.             return
  31.           }
  33.           switch (event.key) {
  34.             case '`': {
  35.               event.preventDefault()
  36.               const [match] = Editor.nodes(editor, {
  37.                 match: n => n.type === 'code',
  38.               })
  39.               Transforms.setNodes(
  40.                 editor,
  41.                 { type: match ? null : 'code' },
  42.                 { match: n => Editor.isBlock(editor, n) }
  43.               )
  44.               break
  45.             }
  47.             case 'b': {
  48.               event.preventDefault()
  49.               Transforms.setNodes(
  50.                 editor,
  51.                 { bold: true },
  52.                 { match: n => Text.isText(n), split: true }
  53.               )
  54.               break
  55.             }
  56.           }
  57.         }}
  58.       />
  59.     </Slate>
  60.   )
  61. }

它已经有了代码块和加粗格式的概念。但是这些都是在 onKeyDown 事件处理程序中一次性定义的。如果你想要在其他地方重用这些逻辑，你需要把它们提取出来。

我们可以通过创建自定义的帮助函数来实现这些特定于域的概念：

  1. // 定义一个我们自己的帮助函数。
  2. const CustomEditor = {
  3.   isBoldMarkActive(editor) {
  4.     const [match] = Editor.nodes(editor, {
  5.       match: n => n.bold === true,
  6.       universal: true,
  7.     })
  9.     return !!match
  10.   },
  12.   isCodeBlockActive(editor) {
  13.     const [match] = Editor.nodes(editor, {
  14.       match: n => n.type === 'code',
  15.     })
  17.     return !!match
  18.   },
  20.   toggleBoldMark(editor) {
  21.     const isActive = CustomEditor.isBoldMarkActive(editor)
  22.     Transforms.setNodes(
  23.       editor,
  24.       { bold: isActive ? null : true },
  25.       { match: n => Text.isText(n), split: true }
  26.     )
  27.   },
  29.   toggleCodeBlock(editor) {
  30.     const isActive = CustomEditor.isCodeBlockActive(editor)
  31.     Transforms.setNodes(
  32.       editor,
  33.       { type: isActive ? null : 'code' },
  34.       { match: n => Editor.isBlock(editor, n) }
  35.     )
  36.   },
  37. }
  39. const App = () => {
  40.   const editor = useMemo(() => withReact(createEditor()), [])
  41.   const [value, setValue] = useState([
  42.     {
  43.       type: 'paragraph',
  44.       children: [{ text: '段落中的一段文本。' }],
  45.     },
  46.   ])
  48.   const renderElement = useCallback(props => {
  49.     switch (props.element.type) {
  50.       case 'code':
  51.         return <CodeElement {...props} />
  52.       default:
  53.         return <DefaultElement {...props} />
  54.     }
  55.   }, [])
  57.   const renderLeaf = useCallback(props => {
  58.     return <Leaf {...props} />
  59.   }, [])
  61.   return (
  62.     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
  63.       <Editable
  64.         renderElement={renderElement}
  65.         renderLeaf={renderLeaf}
  66.         onKeyDown={event => {
  67.           if (!event.ctrlKey) {
  68.             return
  69.           }
  71.           // 使用我们新编写的命令来替代 `onKeyDown` 中的逻辑
  72.           switch (event.key) {
  73.             case '`': {
  74.               event.preventDefault()
  75.               CustomEditor.toggleCodeBlock(editor)
  76.               break
  77.             }
  79.             case 'b': {
  80.               event.preventDefault()
  81.               CustomEditor.toggleBoldMark(editor)
  82.               break
  83.             }
  84.           }
  85.         }}
  86.       />
  87.     </Slate>
  88.   )
  89. }

现在我们已经明确定义了命令，所以在任何可以访问到 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.   const renderElement = useCallback(props => {
  11.     switch (props.element.type) {
  12.       case 'code':
  13.         return <CodeElement {...props} />
  14.       default:
  15.         return <DefaultElement {...props} />
  16.     }
  17.   }, [])
  19.   const renderLeaf = useCallback(props => {
  20.     return <Leaf {...props} />
  21.   }, [])
  23.   return (
  24.     // 添加一个工具栏按钮来调用同一个方法。
  25.     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
  26.       <div>
  27.         <button
  28.           onMouseDown={event => {
  29.             event.preventDefault()
  30.             CustomEditor.toggleBoldMark(editor)
  31.           }}
  32.         >
  33.           Bold
  34.         </button>
  35.         <button
  36.           onMouseDown={event => {
  37.             event.preventDefault()
  38.             CustomEditor.toggleCodeBlock(editor)
  39.           }}
  40.         >
  41.           Code Block
  42.         </button>
  43.       </div>
  44.       <Editable
  45.         editor={editor}
  46.         renderElement={renderElement}
  47.         renderLeaf={renderLeaf}
  48.         onKeyDown={event => {
  49.           if (!event.ctrlKey) {
  50.             return
  51.           }
  53.           switch (event.key) {
  54.             case '`': {
  55.               event.preventDefault()
  56.               CustomEditor.toggleCodeBlock(editor)
  57.               break
  58.             }
  60.             case 'b': {
  61.               event.preventDefault()
  62.               CustomEditor.toggleBoldMark(editor)
  63.               break
  64.             }
  65.           }
  66.         }}
  67.       />
  68.     </Slate>
  69.   )
  70. }

这就是提取逻辑的好处。

我们再一次完成了编码工作！我们仅仅做了非常少量的工作就为编辑器添加了大量的功能。并且我们可以把命令逻辑放在一个单独的地方进行测试和隔离，从而使代码更容易进行维护。