slack-blocks-to-jsx 0.3.8 → 0.3.10

package/dist/index.d.mts

@@ -1103,7 +1103,7 @@ type Hooks = {
     atChannel?: () => ReactNode;
     atEveryone?: () => ReactNode;
     atHere?: () => ReactNode;
-    emoji?: (name: string) => ReactNode | "fallback";
+    emoji?: (name: string, parse: (name: string) => string) => ReactNode;
     date?: (data: {
         timestamp: string;
         format: string;

package/dist/index.d.ts

@@ -1103,7 +1103,7 @@ type Hooks = {
     atChannel?: () => ReactNode;
     atEveryone?: () => ReactNode;
     atHere?: () => ReactNode;
-    emoji?: (name: string) => ReactNode | "fallback";
+    emoji?: (name: string, parse: (name: string) => string) => ReactNode;
     date?: (data: {
         timestamp: string;
         format: string;

package/dist/index.js

@@ -4029,11 +4029,8 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var SlackEmoji = (props) => {
   const { element } = props;
   const { hooks } = useGlobalData();
-  if (hooks.emoji) {
-    const custom_emoji = hooks.emoji(element.value);
-    if (custom_emoji !== "fallback")
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: custom_emoji });
-  }
+  if (hooks.emoji)
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "slack_emoji", children: hooks.emoji(element.value, (name) => parseEmojis(`:${name}:`)) });
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "slack_emoji", children: parseEmojis(`:${element.value}:`) });
 };
 
@@ -4910,7 +4907,7 @@ var parse6 = function(api) {
     parse: (tokens) => tokens.map((token) => {
       const nodePoints = api.getNodePoints();
       const fullString = (0, import_character12.calcStringFromNodePoints)(nodePoints, token.startIndex, token.endIndex);
-      const emojiPattern = /^:([\w-]+):$/;
+      const emojiPattern = /^:([a-zA-Z0-9_\-+']+):$/;
       const match7 = emojiPattern.exec(fullString);
       let value = fullString;
       if (match7)
@@ -5674,10 +5671,7 @@ var RichTextSectionEmoji = (props) => {
   const { name } = props;
   const { hooks } = useGlobalData();
   if (hooks.emoji) {
-    const custom_emoji = hooks.emoji(name);
-    if (custom_emoji !== "fallback") {
-      return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "slack_blocks_to_jsx__rich_text_section_element_emoji", children: custom_emoji });
-    }
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "slack_blocks_to_jsx__rich_text_section_element_emoji", children: hooks.emoji(name, (name2) => parseEmojis(`:${name2}:`)) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "slack_blocks_to_jsx__rich_text_section_element_emoji", children: parseEmojis(`:${name}:`) });
 };

package/dist/index.mjs

@@ -3992,29 +3992,26 @@ var date_token_to_label = (inputDate, formatString) => {
 };
 
 // src/utils/markdown_parser/sub_elements/slack_emoji.tsx
-import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var SlackEmoji = (props) => {
   const { element } = props;
   const { hooks } = useGlobalData();
-  if (hooks.emoji) {
-    const custom_emoji = hooks.emoji(element.value);
-    if (custom_emoji !== "fallback")
-      return /* @__PURE__ */ jsx2(Fragment2, { children: custom_emoji });
-  }
+  if (hooks.emoji)
+    return /* @__PURE__ */ jsx2("span", { className: "slack_emoji", children: hooks.emoji(element.value, (name) => parseEmojis(`:${name}:`)) });
   return /* @__PURE__ */ jsx2("span", { className: "slack_emoji", children: parseEmojis(`:${element.value}:`) });
 };
 
 // src/utils/markdown_parser/sub_elements/slack_broadcast.tsx
-import { Fragment as Fragment3, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var SlackBroadcast = (props) => {
   const { element } = props;
   const { hooks } = useGlobalData();
   if (element.value === "here" && hooks.atHere)
-    return /* @__PURE__ */ jsx3(Fragment3, { children: hooks.atHere() });
+    return /* @__PURE__ */ jsx3(Fragment2, { children: hooks.atHere() });
   if (element.value === "everyone" && hooks.atEveryone)
-    return /* @__PURE__ */ jsx3(Fragment3, { children: hooks.atEveryone() });
+    return /* @__PURE__ */ jsx3(Fragment2, { children: hooks.atEveryone() });
   if (element.value === "channel" && hooks.atChannel)
-    return /* @__PURE__ */ jsx3(Fragment3, { children: hooks.atChannel() });
+    return /* @__PURE__ */ jsx3(Fragment2, { children: hooks.atChannel() });
   return /* @__PURE__ */ jsxs("span", { className: "slack_broadcast", children: [
     "@",
     element.value
@@ -4022,7 +4019,7 @@ var SlackBroadcast = (props) => {
 };
 
 // src/utils/markdown_parser/sub_elements/slack_channel_mention.tsx
-import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var SlackChannelMention = (props) => {
   const { element } = props;
   const { hooks, channels } = useGlobalData();
@@ -4030,7 +4027,7 @@ var SlackChannelMention = (props) => {
   const channel = channels.find((u) => u.id === channel_id || u.name === channel_id);
   const label = (channel == null ? void 0 : channel.name) || channel_id;
   if (hooks.channel)
-    return /* @__PURE__ */ jsx4(Fragment4, { children: hooks.channel(channel || { id: channel_id, name: label }) });
+    return /* @__PURE__ */ jsx4(Fragment3, { children: hooks.channel(channel || { id: channel_id, name: label }) });
   return /* @__PURE__ */ jsxs2("span", { className: "slack_channel", "data-channel-id": (channel == null ? void 0 : channel.id) || channel_id, children: [
     "#",
     label
@@ -4038,7 +4035,7 @@ var SlackChannelMention = (props) => {
 };
 
 // src/utils/markdown_parser/sub_elements/slack_user_group_mention.tsx
-import { Fragment as Fragment5, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var SlackUserGroupMention = (props) => {
   const { element } = props;
   const { hooks, user_groups } = useGlobalData();
@@ -4046,7 +4043,7 @@ var SlackUserGroupMention = (props) => {
   const group = user_groups.find((u) => u.id === group_id || u.name === group_id);
   const label = (group == null ? void 0 : group.name) || group_id;
   if (hooks.usergroup)
-    return /* @__PURE__ */ jsx5(Fragment5, { children: hooks.usergroup(group || { id: group_id, name: label }) });
+    return /* @__PURE__ */ jsx5(Fragment4, { children: hooks.usergroup(group || { id: group_id, name: label }) });
   return /* @__PURE__ */ jsxs3("span", { "data-usergroup-id": (group == null ? void 0 : group.id) || group_id, className: "slack_user_group", children: [
     "@",
     label
@@ -4054,14 +4051,14 @@ var SlackUserGroupMention = (props) => {
 };
 
 // src/utils/markdown_parser/sub_elements/slack_user_mention.tsx
-import { Fragment as Fragment6, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var SlackUserMention = (props) => {
   const { element } = props;
   const { hooks, users } = useGlobalData();
   const user_id = element.value;
   const user = users.find((u) => u.id === user_id || u.name === user_id);
   if (hooks.user)
-    return /* @__PURE__ */ jsx6(Fragment6, { children: hooks.user(user || { id: user_id, name: user_id }) });
+    return /* @__PURE__ */ jsx6(Fragment5, { children: hooks.user(user || { id: user_id, name: user_id }) });
   const label = (user == null ? void 0 : user.name) || user_id;
   return /* @__PURE__ */ jsxs4("span", { className: "slack_user", "data-user-id": (user == null ? void 0 : user.id) || user_id, children: [
     "@",
@@ -4177,10 +4174,10 @@ var Link = (props) => {
 };
 
 // src/utils/markdown_parser/elements/paragraph.tsx
-import { Fragment as Fragment7, jsx as jsx13 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx13 } from "react/jsx-runtime";
 var Paragraph = (props) => {
   const { element } = props;
-  return /* @__PURE__ */ jsx13(Fragment7, { children: element.children.map((subelement, i) => {
+  return /* @__PURE__ */ jsx13(Fragment6, { children: element.children.map((subelement, i) => {
     if (subelement.type === "text")
       return /* @__PURE__ */ jsx13(Text, { element: subelement }, i);
     if (subelement.type === "emphasis")
@@ -4210,10 +4207,10 @@ var Paragraph = (props) => {
 };
 
 // src/utils/markdown_parser/elements/blockquote.tsx
-import { Fragment as Fragment8, jsx as jsx14 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx14 } from "react/jsx-runtime";
 var Blockquote = (props) => {
   const { element } = props;
-  return /* @__PURE__ */ jsx14(Fragment8, { children: element.children.map((para) => {
+  return /* @__PURE__ */ jsx14(Fragment7, { children: element.children.map((para) => {
     return /* @__PURE__ */ jsx14(Paragraph, { element: para });
   }) });
 };
@@ -4877,7 +4874,7 @@ var parse6 = function(api) {
     parse: (tokens) => tokens.map((token) => {
       const nodePoints = api.getNodePoints();
       const fullString = calcStringFromNodePoints6(nodePoints, token.startIndex, token.endIndex);
-      const emojiPattern = /^:([\w-]+):$/;
+      const emojiPattern = /^:([a-zA-Z0-9_\-+']+):$/;
       const match7 = emojiPattern.exec(fullString);
       let value = fullString;
       if (match7)
@@ -5579,16 +5576,16 @@ var RichTextListWrapper = (props) => {
 };
 
 // src/components/blocks/rich_text/rich_text_section_broadcast.tsx
-import { Fragment as Fragment9, jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
 var RichTextSectionBroadcast = (props) => {
   const { range, style } = props;
   const { hooks } = useGlobalData();
   if (range === "channel" && hooks.atChannel)
-    return /* @__PURE__ */ jsx32(Fragment9, { children: hooks.atChannel() });
+    return /* @__PURE__ */ jsx32(Fragment8, { children: hooks.atChannel() });
   if (range === "everyone" && hooks.atEveryone)
-    return /* @__PURE__ */ jsx32(Fragment9, { children: hooks.atEveryone() });
+    return /* @__PURE__ */ jsx32(Fragment8, { children: hooks.atEveryone() });
   if (range === "here" && hooks.atHere)
-    return /* @__PURE__ */ jsx32(Fragment9, { children: hooks.atHere() });
+    return /* @__PURE__ */ jsx32(Fragment8, { children: hooks.atHere() });
   return /* @__PURE__ */ jsxs13(
     "span",
     {
@@ -5608,14 +5605,14 @@ var RichTextSectionBroadcast = (props) => {
 };
 
 // src/components/blocks/rich_text/rich_text_section_channel.tsx
-import { Fragment as Fragment10, jsx as jsx33, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx33, jsxs as jsxs14 } from "react/jsx-runtime";
 var RichTextSectionChannel = (props) => {
   const { channel_id, style } = props;
   const { channels, hooks } = useGlobalData();
   const channel = channels.find((u) => u.id === channel_id || u.name === channel_id);
   const label = (channel == null ? void 0 : channel.name) || channel_id;
   if (hooks.channel)
-    return /* @__PURE__ */ jsx33(Fragment10, { children: hooks.channel(channel || { id: channel_id, name: label }) });
+    return /* @__PURE__ */ jsx33(Fragment9, { children: hooks.channel(channel || { id: channel_id, name: label }) });
   return /* @__PURE__ */ jsxs14(
     "span",
     {
@@ -5641,23 +5638,20 @@ var RichTextSectionEmoji = (props) => {
   const { name } = props;
   const { hooks } = useGlobalData();
   if (hooks.emoji) {
-    const custom_emoji = hooks.emoji(name);
-    if (custom_emoji !== "fallback") {
-      return /* @__PURE__ */ jsx34("span", { className: "slack_blocks_to_jsx__rich_text_section_element_emoji", children: custom_emoji });
-    }
+    return /* @__PURE__ */ jsx34("span", { className: "slack_blocks_to_jsx__rich_text_section_element_emoji", children: hooks.emoji(name, (name2) => parseEmojis(`:${name2}:`)) });
   }
   return /* @__PURE__ */ jsx34("span", { className: "slack_blocks_to_jsx__rich_text_section_element_emoji", children: parseEmojis(`:${name}:`) });
 };
 
 // src/components/blocks/rich_text/rich_text_section_user.tsx
-import { Fragment as Fragment11, jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
 var RichTextSectionUser = (props) => {
   const { user_id, style } = props;
   const { users, hooks } = useGlobalData();
   const user = users.find((u) => u.id === user_id || u.name === user_id);
   const label = (user == null ? void 0 : user.name) || user_id;
   if (hooks.user)
-    return /* @__PURE__ */ jsx35(Fragment11, { children: hooks.user(user || { id: user_id, name: label }) });
+    return /* @__PURE__ */ jsx35(Fragment10, { children: hooks.user(user || { id: user_id, name: label }) });
   return /* @__PURE__ */ jsxs15(
     "span",
     {
@@ -5678,14 +5672,14 @@ var RichTextSectionUser = (props) => {
 };
 
 // src/components/blocks/rich_text/rich_text_section_user_group.tsx
-import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
 var RichTextSectionUserGroup = (props) => {
   const { usergroup_id, style } = props;
   const { user_groups, hooks } = useGlobalData();
   const group = user_groups.find((u) => u.id === usergroup_id || u.name === usergroup_id);
   const label = (group == null ? void 0 : group.name) || usergroup_id;
   if (hooks.usergroup)
-    return /* @__PURE__ */ jsx36(Fragment12, { children: hooks.usergroup(group || { id: usergroup_id, name: label }) });
+    return /* @__PURE__ */ jsx36(Fragment11, { children: hooks.usergroup(group || { id: usergroup_id, name: label }) });
   return /* @__PURE__ */ jsxs16(
     "span",
     {

package/package.json

@@ -11,7 +11,7 @@
   ],
   "repository": "https://github.com/themashcodee/slack-blocks-to-jsx.git",
   "license": "MIT",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/readme.md

@@ -4,7 +4,7 @@
 
 The `slack-blocks-to-jsx` package allows you to render Slack blocks in React with styles that closely mimic how they are displayed in Slack. This library converts Slack's block kit components into JSX components, maintaining the visual fidelity and interactive elements.
 
-**🚨 Quickly test out the libray on online playground**: https://slack-block-to-jsx-playground.vercel.app/
+**🚨 Quickly test out the library on online playground**: https://slack-block-to-jsx-playground.vercel.app/
 
 ## Installation
 
@@ -72,7 +72,7 @@ This is the main component that renders the entire Slack message. It supports va
   - atChannel?: () = ReactNode
   - atEveryone?: () = ReactNode
   - atHere?: () = ReactNode
-  - emoji?: (text:string) => string
+  - emoji?: (name:string) => ReactNode | "fallback" (return "fallback" if you can't handle the emoji)
   - date?: (data: { timestamp: string; format: string; link: string | null; fallback: string; }) => ReactNode;
 - `data?`: optionally pass an array or users, channels and user groups to automatically be replaced with the user, channel and user group mentions.
 - `showBlockKitDebug?`: Show a link to open the message in the Slack Block Kit Builder, for debugging purposes. Defaults to false.