Hooks should also be used when parsing mrkdwn elements

[StephenTangCook]

The hook functions used for customizing the output of certain Slack mentions (users, channels, @here, dates, etc), should also be used when parsing mrkdwn elements, since they can also live in those elements:

slack-blocks-to-jsx/src/utils/slack_text_to_jsx.tsx

Lines 29 to 61 in 9d462ca

	text_string = slack_text_parser(text_string, {
	escapeHTML: false,
	slackCallbacks: {
	user(data) {
	const user = users.find((u) => u.id === data.id || u.name === data.name);
	// if (hooks.user) return hooks.user(user || data);
	const label = user?.name || data.id || data.name;
	return `<span class="slack_user" data-user-id="${user?.id || data.id}">@${label}</span>`;
	},
	channel(data) {
	const channel = channels.find((c) => c.id === data.id || c.name === data.name);
	// if (hooks.channel) return hooks.channel(channel || data);
	const label = channel?.name || data.id || data.name;
	return `<span class="slack_channel" data-channel-id="${
	channel?.id || data.id
	}">#${label}</span>`;
	},
	atChannel(data) {
	const channel = channels.find((c) => c.name === data.name);
	// if (hooks.atChannel) return hooks.atChannel(channel || data);
	const label = channel?.name || data.name;
	return `<span class="slack_channel" data-channel-id="${channel?.id}">#${label}</span>`;
	},
	atEveryone() {
	return `<span class="slack_broadcast">@everyone</span>`;
	},
	atHere() {
	return `<span class="slack_broadcast">@everyone</span>`;
	},
	// ...(hooks.date && { date: hooks.date }),
	// ...(hooks.usergroup && { usergroup: hooks.usergroup }),
	},
	});

[themashcodee]

Yeah, I will add support for them.

[themashcodee]

Hey @StephenTangCook,

The reason why I commented out the existing code is I have reactnode support currently for hooks, but technically we can't pass reactnode directly to the slack_text_parser library because all it does is just replace certain strings with given strings.

One solution could be is allowing passing a string html to replace user, channel etc. Also that would be little hectic for the user too, because anyway it won't support any interactivity but the user will be able to pass a custom wrapper with their own classes.

Let me know if that is what you were thinking as a solution.

[StephenTangCook]

Hm, good question! The slack-markdown library assumes you're always working with stringified HTML which unfortunately isn't a good fit for building a react component tree.

Your suggestion for passing in stringified HTML would probably be sufficient for my requirements, but I agree it is a bit messy. Would these be a separate set of function hooks?

Let's also talk about the ideal solution. Would the best option be to convert the mrkdwn to blocks first, then continue your processing on the blocks? If so, maybe there's a library out there we can reuse. Here are some I found:

• https://github.com/raycharius/slack-block-builder?tab=readme-ov-file#markdown-helpers
• https://github.com/tryfabric/mack
• https://github.com/giantswarm/markdown-to-slack-blocks-tool

I'm not sure if any of these can be used out-of-the-box. Some don't look like they've been maintained recently and may be missing some block compatibility... will investigate!

[themashcodee]

@StephenTangCook
This will do the job! - #14