<block wx:for="{{nodes}}" wx:for-item="item" wx:for-index="i" wx:key="i">
  <!-- blocks -->
  <block wx:if="{{item.type==='heading'}}">
    <view class="{{classPrefix}}-h {{ classPrefix}}-h{{item.depth}}" data-index="{{i}}" bindtap="nodeClick">
      <chat-markdown-node nodes="{{item.tokens}}" generic:tail-component="tail-component" />
    </view>
  </block>
  <block wx:elif="{{item.type==='list'}}">
    <view
      class="{{classPrefix}}-list {{item.ordered ? classPrefix + '-list__decimal' : ''}}"
      data-type="{{item.ordered}}"
      data-index="{{i}}"
      bindtap="nodeClick"
    >
      <block wx:for="{{item.items}}" wx:for-item="li" wx:for-index="j" wx:key="j">
        <view class="{{classPrefix}}-list-item">
          <block wx:if="{{li.tokens && li.tokens.length}}">
            <chat-markdown-node nodes="{{li.tokens}}" generic:tail-component="tail-component" />
          </block>
          <block wx:else>{{''+li.text+''}}</block>
        </view>
      </block>
    </view>
  </block>
  <block wx:elif="{{item.type==='paragraph'}}">
    <view class="{{classPrefix}}-p" data-index="{{i}}" bindtap="nodeClick">
      <chat-markdown-node nodes="{{item.tokens}}" generic:tail-component="tail-component" />
    </view>
  </block>
  <block wx:elif="{{item.type==='image'}}">
    <view class="{{classPrefix}}-image" data-index="{{i}}" bindtap="nodeClick">
      <image src="{{item.href}}" alt="{{item.title}}" mode="widthFix" />
    </view>
  </block>
  <block wx:elif="{{item.type==='table'}}">
    <chat-markdown-table node="{{item}}" generic:tail-component="tail-component" />
  </block>
  <block wx:elif="{{item.type==='blockquote'}}">
    <view class="{{classPrefix}}-blockquote" data-index="{{i}}" bindtap="nodeClick"
      ><chat-markdown-node nodes="{{item.tokens}}" generic:tail-component="tail-component" />
    </view>
  </block>
  <block wx:elif="{{item.type==='code'}}">
    <chat-markdown-code node="{{item}}" theme="{{theme}}" generic:tail-component="tail-component" />
  </block>

  <!-- Inlines -->
  <block wx:elif="{{item.type==='text'}}">
    <view
      class="{{classPrefix}}-text {{classPrefix}}-inline"
      data-raw="{{item.raw}}"
      data-index="{{i}}"
      bindtap="nodeClick"
    >
      <block wx:if="{{item.tokens && item.tokens.length}}">
        <chat-markdown-node nodes="{{item.tokens}}" generic:tail-component="tail-component" />
      </block>
      <block wx:else> {{''+item.raw+''}} <tail-component wx:if="{{item.isTail}}" /> </block>
    </view>
  </block>
  <block wx:elif="{{item.type==='strong'}}">
    <view class="{{classPrefix}}-strong {{classPrefix}}-inline" data-index="{{i}}" bindtap="nodeClick">
      <block wx:if="{{item.tokens && item.tokens.length}}">
        <chat-markdown-node nodes="{{item.tokens}}" generic:tail-component="tail-component" />
      </block>
      <block wx:else>{{''+item.text+''}}</block>
    </view>
  </block>
  <block wx:elif="{{item.type==='em'}}">
    <view class="{{classPrefix}}-em {{classPrefix}}-inline" data-index="{{i}}" bindtap="nodeClick">
      <block wx:if="{{item.tokens && item.tokens.length}}">
        <chat-markdown-node nodes="{{item.tokens}}" generic:tail-component="tail-component" />
      </block>
      <block wx:else>{{''+item.text+''}}</block>
    </view>
  </block>
  <block wx:elif="{{item.type==='del'}}">
    <view class="{{classPrefix}}-del {{classPrefix}}-inline" data-index="{{i}}" bindtap="nodeClick">
      <block wx:if="{{item.tokens && item.tokens.length}}">
        <chat-markdown-node nodes="{{item.tokens}}" generic:tail-component="tail-component" />
      </block>
      <block wx:else>{{''+item.text+''}}</block>
    </view>
  </block>
  <block wx:elif="{{item.type==='link'}}">
    <view class="{{classPrefix}}-link {{classPrefix}}-inline" data-index="{{i}}" bindtap="nodeClick">
      <block wx:if="{{item.tokens && item.tokens.length}}">
        <chat-markdown-node nodes="{{item.tokens}}" generic:tail-component="tail-component" />
      </block>
    </view>
  </block>
  <block wx:elif="{{item.type==='ref'}}">
    <view class="{{classPrefix}}-ref {{classPrefix}}-inline" data-index="{{i}}" bindtap="nodeClick">
      <text class="{{classPrefix}}-ref-txt">{{''+item.text+''}}</text>
    </view>
  </block>
  <block wx:elif="{{item.type==='space'}}">
    <view class="{{classPrefix}}-space" data-index="{{i}}" bindtap="nodeClick"></view>
  </block>
  <block wx:elif="{{item.type==='br'}}">
    <view class="{{classPrefix}}-br" data-index="{{i}}" bindtap="nodeClick"></view>
  </block>
  <block wx:elif="{{item.type==='hr'}}">
    <view class="{{classPrefix}}-hr" data-index="{{i}}" bindtap="nodeClick"></view>
  </block>
  <block wx:elif="{{item.type==='codespan'}}">
    <view
      class="{{classPrefix}}-codespan {{classPrefix}}-inline"
      data-type="{{item.type}}"
      data-index="{{i}}"
      bindtap="nodeClick"
    >
      {{''+(item.text||item.raw)+''}}
    </view>
  </block>
  <block wx:else>
    <view
      class="{{classPrefix}}-raw {{classPrefix}}-inline"
      data-type="{{item.type}}"
      data-index="{{i}}"
      bindtap="nodeClick"
    >
      {{''+(item.text||item.raw)+''}}
    </view>
  </block>
</block>
