应用自定义格式

在之前的指南中我们学习了怎么创建一个自定义的 block 类型，去渲染不同的文本块。但是 Slate 支持自定义的不仅仅是 “blocks” 。

在这篇指南中，我们会像你展示如何添加自定义格式选项，如粗体, 斜体, 代码 或者 删除线。

让我们从之前的应用程序继续前进吧：

  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.   return (
  20.     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
  21.       <Editable
  22.         renderElement={renderElement}
  23.         onKeyDown={event => {
  24.           if (event.key === '`' && event.ctrlKey) {
  25.             event.preventDefault()
  26.             const { selection } = editor
  27.             const [match] = Editor.nodes(editor, {
  28.               match: n => n.type === 'code',
  29.             })
  30.             Transforms.setNodes(
  31.               editor,
  32.               { type: match ? 'paragraph' : 'code' },
  33.               { match: n => Editor.isBlock(editor, n) }
  34.             )
  35.           }
  36.         }}
  37.       />
  38.     </Slate>
  39.   )
  40. }

现在，我们编辑 onKeyDown 函数，当你按下 control-B 时，它会添加一个 bold 格式到你所选择的文本上：

  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 (prop.element.type) {
  12.       case 'code':
  13.         return <CodeElement {...props} />
  14.       default:
  15.         return <DefaultElement {...props} />
  16.     }
  17.   }, [])
  19.   return (
  20.     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
  21.       <Editable
  22.         renderElement={renderElement}
  23.         onKeyDown={event => {
  24.           if (!event.ctrlKey) {
  25.             return
  26.           }
  28.           switch (event.key) {
  29.             // 当按下 "`" ，保留我们代码块存在的逻辑。
  30.             case '`': {
  31.               event.preventDefault()
  32.               const [match] = Editor.nodes(editor, {
  33.                 match: n => n.type === 'code',
  34.               })
  35.               Transforms.setNodes(
  36.                 editor,
  37.                 { type: match ? 'paragraph' : 'code' },
  38.                 { match: n => Editor.isBlock(editor, n) }
  39.               )
  40.               break
  41.             }
  43.             // 当按下 "B" ，加粗所选择的文本。
  44.             case 'b': {
  45.               event.preventDefault()
  46.               Transforms.setNodes(
  47.                 editor,
  48.                 { bold: true },
  49.                 // 应用到文本节点上，
  50.                 // 如果所选内容仅仅是全部文本的一部分，则拆分它们。
  51.                 { match: n => Text.isText(n), split: true }
  52.               )
  53.               break
  54.             }
  55.           }
  56.         }}
  57.       />
  58.     </Slate>
  59.   )
  60. }

非常棒，我们设置好了这个按键处理函数。但是！如果你已经尝试选择文本并按下 Ctrl-B ，你并不会看到任何的变化。这是因为我们还没有告诉 Slate 如何去渲染 “bold” 格式。

对于你添加的所有格式，Slate 都会把文本打散到叶子（leaves）节点，然后你需要告诉 Slate 如何去理解它，就像是对待 block 元素那样。所以让我们来定义一个 Leaf 组件：

  1. // 定义一个 React 组件来加粗渲染叶子节点。
  2. const Leaf = props => {
  3.   return (
  4.     <span
  5.       {...props.attributes}
  6.       style={{ fontWeight: props.leaf.bold ? 'bold' : 'normal' }}
  7.     >
  8.       {props.children}
  9.     </span>
  10.   )
  11. }

看起来很熟悉，对吗？

接下来，让我们告诉 Slate 这个叶子节点。为了做到这点，我们会通过 prop 传递一个名为 renderLeaf 的属性到编辑器。同时，让我们添加主动检查逻辑来改变格式。

  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.   // 通过 `useCallback` 定义一个可以记忆的渲染叶子节点的函数。
  20.   const renderLeaf = useCallback(props => {
  21.     return <Leaf {...props} />
  22.   }, [])
  24.   return (
  25.     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
  26.       <Editable
  27.         renderElement={renderElement}
  28.         // 传递渲染叶子节点函数。
  29.         renderLeaf={renderLeaf}
  30.         onKeyDown={event => {
  31.           if (!event.ctrlKey) {
  32.             return
  33.           }
  35.           switch (event.key) {
  36.             case '`': {
  37.               event.preventDefault()
  38.               const [match] = Editor.nodes(editor, {
  39.                 match: n => n.type === 'code',
  40.               })
  41.               Transforms.setNodes(
  42.                 editor,
  43.                 { type: match ? null : 'code' },
  44.                 { match: n => Editor.isBlock(editor, n) }
  45.               )
  46.               break
  47.             }
  49.             case 'b': {
  50.               event.preventDefault()
  51.               Transforms.setNodes(
  52.                 editor,
  53.                 { bold: true },
  54.                 { match: n => Text.isText(n), split: true }
  55.               )
  56.               break
  57.             }
  58.           }
  59.         }}
  60.       />
  61.     </Slate>
  62.   )
  63. }
  65. const Leaf = props => {
  66.   return (
  67.     <span
  68.       {...props.attributes}
  69.       style={{ fontWeight: props.leaf.bold ? 'bold' : 'normal' }}
  70.     >
  71.       {props.children}
  72.     </span>
  73.   )
  74. }

现在，如果你尝试选择一些文本然后按下 Ctrl-B ，你会看到它变成了粗体！再一次让人惊叹！