使用命令

到目前为止，我们所学习的内容都是在编写为特定的 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: 'A line of text in a paragraph.' }],
  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. // Define our own custom set of helpers.
  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: 'A line of text in a paragraph.' }],
  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: 'A line of text in a paragraph.' }],
  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. }

这就是提取逻辑的好处。

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