SuperEditor 自定义组件选中状态颜色配置指南

SuperEditor 是一款功能强大的富文本编辑器框架，它允许开发者高度自定义编辑器的各个组件。在实际开发中，我们经常需要为自定义组件添加选中状态的高亮效果，以提供更好的用户交互反馈。本文将详细介绍如何在 SuperEditor 中为自定义组件实现选中状态的颜色配置。

选中状态实现原理

SuperEditor 的选中状态主要通过 SingleColumnLayoutSelectionStyler 类来处理。默认情况下，这个类会为三种内置组件类型自动应用选中样式：

1. 文本组件 (TextComponentViewModel)
2. 图片组件 (ImageComponentViewModel)
3. 水平分割线组件 (HorizontalRuleComponentViewModel)

对于自定义组件，开发者需要手动实现选中状态的视觉效果。

自定义组件选中状态实现方案

方案一：使用 SelectableBox 组件

最简单的方式是在自定义组件的 Widget 树中使用 SelectableBox 组件：

@override
Widget build(BuildContext context) {
  return Stack(
    children: [
      Positioned.fill(
        child: SelectableBox(
          selection: selection,
          selectionColor: selectionColor,
          child: BoxComponent(key: componentKey, child: Container()),
        ),
      ),
      _buildButton(),
    ],
  );
}

SelectableBox 会自动处理选中状态的视觉效果，包括：

• 应用指定的选中颜色
• 自动添加50%的透明度效果
• 处理选中状态的显示与隐藏

方案二：创建自定义 SelectionAwareViewModel

对于更复杂的需求，可以创建一个实现了 SelectionAwareViewModelMixin 的自定义 ViewModel：

class CustomComponentViewModel with SelectionAwareViewModelMixin {
  // 实现必要的属性和方法
  // 包括 selection 和 selectionColor 属性
}

这种方式提供了更大的灵活性，允许开发者完全控制选中状态的视觉效果。

最佳实践建议

1. 保持一致性：建议自定义组件的选中颜色与编辑器默认的选中颜色保持一致，除非有特殊的设计需求。

2. 性能考虑：对于简单的选中效果，优先使用 SelectableBox，它已经优化了性能。

3. 状态管理：确保在 ViewModel 中正确维护 selection 和 selectionColor 状态，并在状态变化时触发重建。

4. 可访问性：确保选中状态有足够的视觉对比度，满足无障碍设计要求。

常见问题解决

如果发现自定义组件的选中状态不显示，可以检查以下几点：

1. 确认 ViewModel 是否正确提供了 selection 属性
2. 检查 selectionColor 是否被正确设置
3. 确保 SelectableBox 被正确放置在 Widget 树中
4. 验证组件是否正确地响应了选中状态的变化

通过以上方法，开发者可以轻松地为 SuperEditor 中的自定义组件添加专业的选中状态效果，提升编辑器的整体用户体验。