slatejs: renderLeaf 应用自定义格式

在本指南中，我们将向您展示如何添加自定义格式选项，例如粗体、斜体、代码或删除线。

实现一个 renderLeaf

import React from 'react';

export const renderLeaf = props => {
  return (
    <span
      {...props.attributes}
      style={{ fontWeight: props.leaf.bold ? 'bold' : 'normal' }}
    >
      {props.children}
    </span>
  );
};

在 props.leaf 上可以找到 format 的值(引处为 bold)

Transforms.setNodes(
  editor,
  { bold: true },
  { match: (n) => Text.isText(n), split: true }
);

参考

• https://docs.slatejs.org/walkthroughs/04-applying-custom-formatting