Allow `verbatim={boolean}` parameter

For text objects, Slack allows a parameter verbatim to be passed, allowing some elements to be parsed by slack, without needing specific mrkdwn syntax (e.g. channels, users, urls). From Slack’s doc on text object: https://api.slack.com/reference/block-kit/composition-objects#text

When set to false (as is default) URLs will be auto-converted into links, conversation names will be link-ified, and certain mentions will be automatically parsed. Using a value of true will skip any preprocessing of this nature, although you can still include manual parsing strings. This field is only usable when typeis mrkdwn.

It would be ideal to be able to use this attribute for components that support a text object (e.g. Section, Context, Fields (and pass them down to child elements). A specific use case where this would be ideal is rendering dynamic input in slack. If the dynamic content contains a URL, passing the text into a jsx-slack component such as a <Button> means you would first have to search for url’s and wrap them with <a>...</a> to get them to render as links in Slack. Ideally you could opt into the verbatim parameter to simply pass the raw text to Slack to parse

[yhatt]

#97 was merged but <Mrkdwn> for <Field> component would not be worked. Re-open issue.

[yhatt]

We’ve received a pull request in #97 so I have to share our deep thinking about <Mrkdwn> component for Slack’s text composition object.

Current jsx-slack can think that the surface of HTML-like formatting is wrapped implicitly in <Mrkdwn verbatim={true}>.

<Blocks>
  <Section>Hello!</Section>
</Blocks>

It means the same as below:

<Blocks>
  <Section>
    <Mrkdwn verbatim={true}>Hello!</Mrkdwn>
  </Section>
</Blocks>

An explicitly declared <Mrkdwn> component means using text composition object with customized attributes.

<Blocks>
  <Section>
    <Mrkdwn verbatim={false}>Hello!</Mrkdwn>
  </Section>
</Blocks>

The JSX structure becomes similar as the original JSON structure defined by Slack. For example, below block elements are valid all.

<Blocks>
  <Section>
    <Mrkdwn verbatim={false}>
      Hello!
    </Mrkdwn>
  </Section>
  <Section>
    <Field>
      <Mrkdwn verbatim={false}>
        Hello!
      </Mrkdwn>
    </Field>
  </Section>
  <Context>
    <Mrkdwn verbatim={false}>
      Hello!
    </Mrkdwn>
  </Context>
  <Actions>
    <Button confirm={
      <Confirm title="Commit your action" confirm="Yes, please" deny="Cancel">
        <Mrkdwn verbatim={false}>
          Are you sure?
        </Mrkdwn>
      </Confirm>
    }>
      Button
    </Button>
  </Actions>
</Blocks>

And the outputted JSON is this:

[
  {
    "type": "section",
    "text": {
      "text": "Hello!",
      "type": "mrkdwn",
      "verbatim": false
    }
  },
  {
    "type": "section",
    "fields": [
      {
        "type": "mrkdwn",
        "text": "Hello!",
        "verbatim": false
      }
    ]
  },
  {
    "type": "context",
    "elements": [
      {
        "type": "mrkdwn",
        "text": "Hello!",
        "verbatim": false
      }
    ]
  },
  {
    "type": "actions",
    "elements": [
      {
        "type": "button",
        "text": {
          "type": "plain_text",
          "text": "Button",
          "emoji": true
        },
        "confirm": {
          "title": {
            "type": "plain_text",
            "text": "Commit your action",
            "emoji": true
          },
          "text": {
            "type": "mrkdwn",
            "text": "Are you sure?",
            "verbatim": false
          },
          "confirm": {
            "type": "plain_text",
            "text": "Yes, please",
            "emoji": true
          },
          "deny": {
            "type": "plain_text",
            "text": "Cancel",
            "emoji": true
          }
        }
      }
    ]
  }
]