Code Hike项目中Scrollycoding组件嵌套其他标签的实现方法

在Code Hike项目中，Scrollycoding组件是一个非常实用的功能，它允许开发者在滚动页面时动态展示代码变化。然而，当我们需要在Scrollycoding组件中嵌套使用其他自定义标签（如CodeWithTooltips或CodeSwitcher）时，会遇到一些技术挑战。

问题背景

开发者Windsooon尝试在Scrollycoding组件内部使用CodeWithTooltips标签时遇到了错误提示："Error for code: Required"。这个问题的根源在于Scrollycoding组件默认期望接收一个代码块对象，而CodeWithTooltips返回的是一个React组件。

解决方案探索

初始尝试

Windsooon首先尝试通过修改Schema来扩展Scrollycoding的解析能力：

const Schema = Block.extend({
  steps: z.array(
    Block.extend({
        sticker: Block.extend({
            code: CodeBlock,
            tooltips: z.array(Block).optional(),
    })
  })),
})

然而，这种方法仍然无法正确解析嵌套的组件结构，因为Schema的层级关系没有正确匹配实际的MDX结构。

正确实现方式

经过项目维护者pomber的指导，正确的解决方案是简化Schema结构，将sticker定义为基本的Block类型：

const Schema = Block.extend({
  steps: z.array(Block.extend({sticker: Block})),
})

然后在渲染时直接使用step.sticker.children来渲染嵌套组件的内容：

<Selection
  from={steps.map((step) => (
    step.sticker.children
  ))}
/>

这种方法保留了嵌套组件的完整功能，同时避免了Schema解析的复杂性。

样式调整技巧

在实现过程中，Windsooon还发现了一个样式相关的问题：token-transitions处理器会为Token添加display: inline-block样式，这会影响tooltip的下划线效果。解决方案是在tooltip处理器中显式添加border样式：

export const tooltip: AnnotationHandler = {
  name: "tooltip",
  Inline: ({ children, annotation }) => {
    return (
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger
            className="underline decoration-dashed"
            style={{ borderBottom: "1px dashed black" }}
          >
            {children}
          </TooltipTrigger>
          {/* ... */}
        </Tooltip>
      </TooltipProvider>
    )
  },
}

最佳实践建议

1. 保持Schema简洁：当需要在Scrollycoding中嵌套其他组件时，尽量使用基本的Block类型，避免过度定义Schema结构。

2. 组件解耦：将功能性的组件（如CodeWithTooltips）设计为独立的单元，通过children属性与父组件交互。

3. 样式覆盖：当遇到内置样式冲突时，优先考虑使用更具体的样式规则来覆盖默认行为。

4. 文档贡献：考虑将这种嵌套组件的使用方式添加到项目文档中，帮助其他开发者避免类似问题。

通过这种方法，开发者可以灵活地在Scrollycoding组件中集成各种自定义功能，同时保持代码的清晰和可维护性。