Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mdesousa opened this issue Apr 29, 2024 · 6 comments
Open

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

mdesousa opened this issue Apr 29, 2024 · 6 comments
Labels
auto-triage-skip Prevent this issue from being closed due to lack of activity bug M-T: confirmed bug report. Issues are confirmed when the reproduction steps are documented server-side-issue

Comments

@mdesousa
Copy link

@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,
});
  1. 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 seratch added bug M-T: confirmed bug report. Issues are confirmed when the reproduction steps are documented server-side-issue and removed untriaged labels Apr 30, 2024
@seratch
Copy link
Member

seratch commented Apr 30, 2024

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.

@seratch seratch changed the title Links with ampersand do not work in the app Links with ampersand do not work in Slack iOS app Apr 30, 2024
@mdesousa
Copy link
Author

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
Copy link
Author

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
Copy link
Contributor

filmaj commented Apr 30, 2024

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
Copy link
Contributor

filmaj commented Apr 30, 2024

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

Copy link

github-actions bot commented Jun 3, 2024

👋 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.

@filmaj filmaj added auto-triage-skip Prevent this issue from being closed due to lack of activity and removed auto-triage-stale labels Jun 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
auto-triage-skip Prevent this issue from being closed due to lack of activity bug M-T: confirmed bug report. Issues are confirmed when the reproduction steps are documented server-side-issue
Projects
None yet
Development

No branches or pull requests

3 participants