feat: ✨ pass style to the custom hooks

package.json

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

src/components/blocks/rich_text/rich_text_section_broadcast.tsx

@@ -8,9 +8,9 @@ export const RichTextSectionBroadcast = (props: Props) => {
   const { range, style } = props;
   const { hooks } = useGlobalData();
 
-  if (range === "channel" && hooks.atChannel) return <>{hooks.atChannel()}</>;
-  if (range === "everyone" && hooks.atEveryone) return <>{hooks.atEveryone()}</>;
-  if (range === "here" && hooks.atHere) return <>{hooks.atHere()}</>;
+  if (range === "channel" && hooks.atChannel) return <>{hooks.atChannel(style)}</>;
+  if (range === "everyone" && hooks.atEveryone) return <>{hooks.atEveryone(style)}</>;
+  if (range === "here" && hooks.atHere) return <>{hooks.atHere(style)}</>;
 
   return (
     <span

src/components/blocks/rich_text/rich_text_section_channel.tsx

@@ -11,7 +11,11 @@ export const RichTextSectionChannel = (props: Props) => {
   const channel = channels.find((u) => u.id === channel_id || u.name === channel_id);
   const label = channel?.name || channel_id;
 
-  if (hooks.channel) return <>{hooks.channel(channel || { id: channel_id, name: label })}</>;
+  if (hooks.channel) {
+    return (
+      <>{hooks.channel(channel ? { ...channel, style } : { id: channel_id, name: label, style })}</>
+    );
+  }
 
   return (
     <span

src/components/blocks/rich_text/rich_text_section_user.tsx

@@ -11,7 +11,9 @@ export const RichTextSectionUser = (props: Props) => {
   const user = users.find((u) => u.id === user_id || u.name === user_id);
   const label = user?.name || user_id;
 
-  if (hooks.user) return <>{hooks.user(user || { id: user_id, name: label })}</>;
+  if (hooks.user) {
+    return <>{hooks.user(user ? { ...user, style } : { id: user_id, name: label, style })}</>;
+  }
 
   return (
     <span

src/components/blocks/rich_text/rich_text_section_user_group.tsx

@@ -11,7 +11,11 @@ export const RichTextSectionUserGroup = (props: Props) => {
   const group = user_groups.find((u) => u.id === usergroup_id || u.name === usergroup_id);
   const label = group?.name || usergroup_id;
 
-  if (hooks.usergroup) return <>{hooks.usergroup(group || { id: usergroup_id, name: label })}</>;
+  if (hooks.usergroup) {
+    return (
+      <>{hooks.usergroup(group ? { ...group, style } : { id: usergroup_id, name: label, style })}</>
+    );
+  }
 
   return (
     <span

src/store/useGlobalContext.tsx

@@ -1,20 +1,32 @@
 import React, { ReactNode, createContext, useContext, useState } from "react";
+import {
+  RichTextSectionUser,
+  RichTextSectionChannel,
+  RichTextSectionBroadcast,
+  RichTextSectionUsergroup,
+} from "../types";
 
 type User = {
   id: string;
   name: string;
 };
 
+type UserWithStyle = User & { style?: RichTextSectionUser["style"] };
+
 type Channel = {
   id: string;
   name: string;
 };
 
+type ChannelWithStyle = Channel & { style?: RichTextSectionChannel["style"] };
+
 type UserGroup = {
   id: string;
   name: string;
 };
 
+type UserGroupWithStyle = UserGroup & { style?: RichTextSectionUsergroup["style"] };
+
 type Emoji = {
   name: string;
   /* hyphen-delineated list of Unicode code points */
@@ -24,12 +36,12 @@ type Emoji = {
 };
 
 type Hooks = {
-  user?: (data: User) => ReactNode;
-  channel?: (data: Channel) => ReactNode;
-  usergroup?: (data: UserGroup) => ReactNode;
-  atChannel?: () => ReactNode;
-  atEveryone?: () => ReactNode;
-  atHere?: () => ReactNode;
+  user?: (data: UserWithStyle) => ReactNode;
+  channel?: (data: ChannelWithStyle) => ReactNode;
+  usergroup?: (data: UserGroupWithStyle) => ReactNode;
+  atChannel?: (style?: RichTextSectionBroadcast["style"]) => ReactNode;
+  atEveryone?: (style?: RichTextSectionBroadcast["style"]) => ReactNode;
+  atHere?: (style?: RichTextSectionBroadcast["style"]) => ReactNode;
   /**
    * The hook to replace emojis with custom components
    * @param data - the emoji object