<view class="volc-rich-text-renderer-content {{dark ? 'volc-rich-text-renderer-dark' : ''}}" style="color: {{textColor}};">
  <block wx:for="{{parsedSegments}}" wx:for-item="segment" wx:for-index="index" wx:key="index">
    <view wx:if="{{segment.type === 'block'}}" class="{{segment.className}}" style="{{segment.style}}">
      <block wx:for="{{segment.children}}" wx:for-item="child" wx:for-index="childIndex" wx:key="childIndex">
        <text wx:if="{{child.type === 'br'}}" class="volc-rich-text-renderer-break">{{lineBreak}}</text>
        <image
          wx:elif="{{child.type === 'image'}}"
          class="volc-rich-text-renderer-image"
          src="{{child.src}}"
          mode="widthFix"
          style="{{child.style}}"
          data-url="{{child.url}}"
          data-text="{{child.text}}"
          bindtap="onLinkClick"
        ></image>
        <text
          wx:elif="{{child.type === 'link'}}"
          class="{{child.className}}"
          style="{{child.style}}"
          data-url="{{child.url}}"
          data-text="{{child.text}}"
          bindtap="onLinkClick"
        >{{child.text}}</text>
        <text wx:else class="{{child.className}}" style="{{child.style}}">{{child.text}}</text>
      </block>
    </view>
    <text wx:elif="{{segment.type === 'br'}}" class="volc-rich-text-renderer-break">{{lineBreak}}</text>
    <image
      wx:elif="{{segment.type === 'image'}}"
      class="volc-rich-text-renderer-image"
      src="{{segment.src}}"
      mode="widthFix"
      style="{{segment.style}}"
      data-url="{{segment.url}}"
      data-text="{{segment.text}}"
      bindtap="onLinkClick"
    ></image>
    <text
      wx:elif="{{segment.type === 'link'}}"
      class="{{segment.className}}"
      style="{{segment.style}}"
      data-url="{{segment.url}}"
      data-text="{{segment.text}}"
      bindtap="onLinkClick"
    >{{segment.text}}</text>
    <text wx:else class="{{segment.className}}" style="{{segment.style}}">{{segment.text}}</text>
  </block>
</view>
