Draft.js如何设置默认保持激活的切换样式 如默认ALIGN_LEFT对齐

问题根因 #

你遇到的状态丢失问题是两个核心错误导致的：

• 文本对齐属于块级样式属性，你当前把它作为行内样式处理，行内样式仅绑定到已存在的文本字符，编辑器为空/选区内无字符时，行内样式自然无法被检测到，聚焦后按钮激活状态就会消失
• 激活状态判断逻辑没有兼容默认场景，没有对齐样式的时候没有默认返回左对齐为激活状态

解决方案 #

1. 将对齐属性改为块级样式处理

对齐属性是作用于整个段落的，不要放在行内样式逻辑里，调整toggleBlockType处理对齐样式的互斥逻辑：

const toggleBlockType = (blockType: string, index: number) => {
  return (e: MouseEvent) => {
    e.preventDefault();
    // 先移除其他对齐样式
    let newState = editorState;
    if (['ALIGN_LEFT', 'ALIGN_CENTER', 'ALIGN_RIGHT'].includes(blockType)) {
      ['ALIGN_LEFT', 'ALIGN_CENTER', 'ALIGN_RIGHT'].forEach(align => {
        if (align !== blockType && RichUtils.getCurrentBlockType(newState) === align) {
          newState = RichUtils.toggleBlockType(newState, align);
        }
      });
    }
    newState = RichUtils.toggleBlockType(newState, blockType);
    setEditorState(newState);
  };
};

删除toggleInlineStyle里所有和对齐相关的判断逻辑。

2. 调整激活状态判断逻辑

修改块级对齐按钮的激活判断，无对齐样式时默认左对齐为激活状态：

// 对齐选项放在blockFormattingOptions里，不要放在行内样式配置中
const isBlockActivated = (blockName: string): boolean => {
  const currentBlockType = editorState
    .getCurrentContent()
    .getBlockForKey(selection.getStartKey())
    .getType();
  // 左对齐默认激活
  if (blockName === 'ALIGN_LEFT') {
    return !['ALIGN_CENTER', 'ALIGN_RIGHT'].includes(currentBlockType);
  }
  return currentBlockType === blockName;
};

对应修改渲染部分的块级按钮active属性：

{blockFormattingOptions.map((option: any, index) => (
  <ToggleButton
    key={index}
    active={isBlockActivated(option.name)}
    onMouseDown={toggleBlockType(option.name, index)}
  >
    <FontAwesomeIcon icon={option.icon} />
  </ToggleButton>
))}

3. 调整初始默认样式设置

将原来设置行内样式的useEffect改成设置默认块级样式：

useEffect(() => {
  // 给初始空块设置左对齐属性
  const newEditorState = RichUtils.toggleBlockType(
    editorState,
    'ALIGN_LEFT'
  );
  setEditorState(newEditorState);
  // eslint-disable-next-line
}, []);

修改后，不管编辑器是否聚焦、是否有内容，左对齐按钮都会默认保持激活状态，直到用户手动选择其他对齐方式为止。

内容的提问来源于stack exchange，提问作者Maxwell