允许配置在代码面板中显示原始源代码的方式

我目前正在使用storybook进行一个项目，它添加了Code面板和Controls面板。这是我在mdx文件中的内容：

export const Template = ({dark, width, height, theme}) => {
  return html`
    <my-button
      @click=${action('button clicked')}
      width="${width}"
      height="${height}"
      theme="${theme}"
      ?dark=${dark}>
    </my-button>
  `;
};

这是用户在Control面板中将dark设置为true时的Code面板：
<my-button width="200" height="40" theme="dark" dark=""> </my-button>

dark是一个布尔值，用户可以在Control面板中设置。

我们支持在Code面板中为每个组件显示原始源代码。html元素的属性值将根据组件的不同配置而改变。但是我们发现覆盖代码面板中的源代码有一些限制。
我们现在的情况是：

• 暗黑模式开启： <my-button dark=""></my-button>
• 暗黑模式关闭： <my-button ></my-button>

我们希望更新所有的组件到以下内容：

• 暗黑模式开启： <my-button dark></my-button>
• 暗黑模式关闭： <my-button ></my-button>

设置dark而不带值可以按预期工作，但移除=""是无法实现的。我们可以定义要显示的输入类型，但我们无法控制这个特定的playground选项卡如何显示它们，而且似乎没有无值属性的类型选项。无论我们将什么值传递给属性，它都会被解析为=""。

描述你希望实现的解决方案

我们需要将所有的组件更新为以下内容：

• 暗黑模式开启： <my-button dark></my-button>
• 暗黑模式关闭： <my-button ></my-button>

描述你考虑过的替代方案

• 无响应*

你是否能够协助将该功能变为现实？

否