slackapi / bolt-js

A framework to build Slack apps using JavaScript
https://slack.dev/bolt-js
MIT License
2.73k stars 389 forks source link

Links with ampersand do not work in Slack iOS app #2103

Open mdesousa opened 3 months ago

mdesousa commented 3 months ago

@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 &amp;

Expected result:

The link should work as expected

Actual result:

The link does not work

seratch commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

github-actions[bot] commented 2 months ago

👋 It looks like this issue has been open for 30 days with no activity. We'll mark this as stale for now, and wait 10 days for an update or for further comment before closing this issue out. If you think this issue needs to be prioritized, please comment to get the thread going again! Maintainers also review issues marked as stale on a regular basis and comment or adjust status if the issue needs to be reprioritized.