Links with ampersand do not work in Slack iOS app

[mdesousa]

@slack/bolt version

3.18.0

Node.js runtime version

v18.19.1

Steps to reproduce:

1. Send a mrkdwn message with a link. For example:

const output = await client.chat.postMessage({
  channel: '<channel id>',
  text: 'Click this: <https://www.google.com/search?hl=en&q=chocolate+chip+cookies|Search Google>',
  mrkdwn: true,
});

2. in the slack mobile app, click on the link... it does not work. if you inspect the link you'll notice that the ampersand was encoded to &

Expected result:

The link should work as expected

Actual result:

The link does not work

[seratch]

Hi @mdesousa, we appreciate your time and effort in reporting this issue and apologize for the inconvenience you've experienced. This is indeed an issue on Slack's iOS app end and we're unable to provide a concrete timeline for its resolution. In the meantime, please consider the following workaround to deal with it:

const client = new WebClient(process.env.SLACK_BOT_TOKEN, { logLevel: "debug" });

(async () => {
  const repsonse = await client.chat.postMessage({
    channel: "<channel id>",
    text: "Click this: <https://www.google.com/search?hl=en&q=chocolate+chip+cookies|Search Google>",
    blocks: [
      {
        type: "rich_text",
        elements: [
          {
            type: "rich_text_section",
            elements: [
              { type: "text", text: "Click this: " },
              {
                type: "link",
                url: "https://www.google.com/search?hl=en&q=chocolate+chip+cookies",
                text: "Search Google",
              },
            ],
          },
        ],
      },
    ],
  });
  console.log(repsonse);
})();

I understand this could be frustrating but I hope this was helpful to you for the time being.

[mdesousa]

thanks @seratch. is there a repo for the iOS app where I can report this issue directly to them.
in the meantime, thanks for the workaround. i don't presume that you have a helper in the sdk (or sample code) to generate blocks from mtkdwn text? the example that I provided was a simple one... in reality, we may have text that has multiple links embedded in different places...

Search for different cookies: <https://www.google.com/search?hl=en&q=chocolate+chip+cookies|chocolate>, <https://www.google.com/search?hl=en&q=raisin+cookies|raisin>, or maybe <https://www.google.com/search?hl=en&q=macademia+nut+cookies|macademia nuts>. Enjoy!

[mdesousa]

Actually, was able to write a bit of code to create blocks from mrkdwn with links... hope it helps others. The only issue is that it loses other mrkdwn formatting that aren't links...

import {
  RichTextBlock,
  RichTextElement,
  RichTextLink,
  RichTextText,
} from '@slack/bolt';

const toTextElement = (text: string): RichTextText => ({ type: 'text', text });
const toLinkElement = (url: string, text: string): RichTextLink => ({
  type: 'link',
  url,
  text,
});

const toElements = (md: string): RichTextElement[] => {
  const linkRegex = /<([^>]+)\|([^>]+)>/g; // match mrkdwn url <url|text>
  let parsed = 0;
  const elements: RichTextElement[] = [];

  for (;;) {
    const match = linkRegex.exec(md);
    if (!match) break;
    if (match.index > parsed) {
      const before = md.substring(parsed, match.index);
      elements.push(toTextElement(before));
    }
    elements.push(toLinkElement(match[1], match[2]));
    parsed = match.index + match[0].length;
  }

  if (parsed < md.length) elements.push(toTextElement(md.substring(parsed)));
  return elements;
};

export const toBlocks = (md: string): RichTextBlock[] => [
  {
    type: 'rich_text',
    elements: [{ type: 'rich_text_section', elements: toElements(md) }],
  },
];

[filmaj]

is there a repo for the iOS app where I can report this issue directly to them.

sorry @mdesousa no such repo exists but I will raise this internally

[filmaj]

Interestingly on my iPhone, the unfurled preview links correctly, but the actual linked markdown text is not linked.