slack-blocks-to-jsx 0.1.9 → 0.2.1

package/dist/index.d.mts

@@ -1129,6 +1129,10 @@ type Props = {
         user_groups?: GlobalStore["user_groups"];
     };
     hooks?: GlobalStore["hooks"];
+    /**
+     * If true, the header and the container which wraps the message will be removed and only the slack blocks will be returned.
+     */
+    withoutWrapper?: boolean;
 };
 declare const Message: (props: Props) => JSX.Element;
 

package/dist/index.d.ts

@@ -1129,6 +1129,10 @@ type Props = {
         user_groups?: GlobalStore["user_groups"];
     };
     hooks?: GlobalStore["hooks"];
+    /**
+     * If true, the header and the container which wraps the message will be removed and only the slack blocks will be returned.
+     */
+    withoutWrapper?: boolean;
 };
 declare const Message: (props: Props) => JSX.Element;
 

package/dist/index.js

@@ -183,7 +183,7 @@ var is_accessory_stacked = (element) => {
 var import_jsx_runtime = require("react/jsx-runtime");
 var Header = (props) => {
   const { name, time } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-[5px] items-center w-full", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-[5px] items-center w-full slack_blocks_to_jsx--header", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "font-black text-[15px]", children: name }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-[14px] w-[27px] leading-[12.5px] py-[1px] px-[3px] uppercase text-[10px]  text-black-primary/[0.7] bg-black-primary/[0.13] font-semibold rounded-[2px] text-center", children: "APP" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-black-secondary uppercase leading-[17.6px]", children: dateToTime(time) })
@@ -199,7 +199,7 @@ var ImageElement = (props) => {
     {
       src: image_url,
       alt: alt_text,
-      className: "w-[88px] h-[88px] rounded-lg overflow-hidden object-cover"
+      className: "w-[88px] h-[88px] rounded-lg overflow-hidden object-cover slack_blocks_to_jsx__image_element"
     }
   ) });
 };
@@ -251,7 +251,7 @@ var ButtonElement = (props) => {
       type: "button",
       id: action_id,
       "aria-label": accessibility_label,
-      className: `px-2 pt-0 pb-[1px] text-small h-[28px] min-w-[56px] border rounded whitespace-nowrap font-semibold slack_blocks_to_jsx__button ${style === "primary" ? "border-green-primary.3 text-green-primary" : style === "danger" ? "border-red-primary.3 text-red-primary" : "border-black-primary.3 text-black-primary"}`,
+      className: `px-2 pt-0 pb-[1px] text-small h-[28px] min-w-[56px] border rounded whitespace-nowrap font-semibold slack_blocks_to_jsx__button_element ${style === "primary" ? "border-green-primary.3 text-green-primary" : style === "danger" ? "border-red-primary.3 text-red-primary" : "border-black-primary.3 text-black-primary"}`,
       onClick: () => {
         if (url) {
           window.open(url, "_blank");
@@ -392,7 +392,7 @@ var CheckboxesElement = (props) => {
       input_ref.current.focus();
     }
   }, [focus_on_load]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: action_id, className: "my-1 flex w-full slack_blocks_to_jsx__checkboxes", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("fieldset", { className: "flex flex-col gap-2", children: options.map((option, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: action_id, className: "my-1 flex w-full slack_blocks_to_jsx__checkboxes_element", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("fieldset", { className: "flex flex-col gap-2", children: options.map((option, i) => {
     const { text, value, description } = option;
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       "label",
@@ -456,34 +456,42 @@ var PlaintTextInput = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id: action_id, className: "relative text-small w-full", tabIndex: 0, children: [
-    !value && placeholder && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextObject, { data: placeholder }) }),
-    !value && !placeholder && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      TextObject,
-      {
-        data: {
-          type: "plain_text",
-          text: "Write something"
-        }
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "textarea",
-      {
-        value,
-        onChange: (e) => setValue(e.target.value),
-        className: "w-full focus:outline-none rounded border border-black-primary.3 p-2",
-        minLength: min_length,
-        maxLength: max_length,
-        style: {
-          maxHeight: "200px",
-          minHeight: "80px",
-          height: "100px"
-        },
-        "aria-label": "Select an item"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      id: action_id,
+      className: "relative text-small w-full slack_blocks_to_jsx__plain_text_input_element",
+      tabIndex: 0,
+      children: [
+        !value && placeholder && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextObject, { data: placeholder }) }),
+        !value && !placeholder && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          TextObject,
+          {
+            data: {
+              type: "plain_text",
+              text: "Write something"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "textarea",
+          {
+            value,
+            onChange: (e) => setValue(e.target.value),
+            className: "w-full focus:outline-none rounded border border-black-primary.3 p-2",
+            minLength: min_length,
+            maxLength: max_length,
+            style: {
+              maxHeight: "200px",
+              minHeight: "80px",
+              height: "100px"
+            },
+            "aria-label": "Select an item"
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/components/elements/users_select_element.tsx
@@ -517,7 +525,7 @@ var UsersSelectElement = (props) => {
     "div",
     {
       id: action_id,
-      className: "py-1 px-2 h-7 min-h-[28px] relative flex items-center justify-between rounded text-small w-[190px] border border-black-primary.3",
+      className: "py-1 px-2 h-7 min-h-[28px] relative flex items-center justify-between rounded text-small w-[190px] border border-black-primary.3 slack_blocks_to_jsx__users_select_element",
       tabIndex: 0,
       children: [
         visible && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -805,6 +813,7 @@ var RichTextSectionBroadcast = (props) => {
       className: `
         inline-block
         slack_broadcast
+        slack_blocks_to_jsx__rich_text_section_element_broadcast
         ${(style == null ? void 0 : style.italic) ? "italic" : ""}
         ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
         ${(style == null ? void 0 : style.bold) ? "font-medium" : ""}
@@ -832,6 +841,7 @@ var RichTextSectionChannel = (props) => {
       className: `
         inline-block
         slack_channel
+        slack_blocks_to_jsx__rich_text_section_element_channel
         ${(style == null ? void 0 : style.italic) ? "italic" : ""}
         ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
         ${(style == null ? void 0 : style.bold) ? "font-medium" : ""}
@@ -851,7 +861,7 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 var RichTextSectionEmoji = (props) => {
   const { name } = props;
   const { hooks } = useGlobalData();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: hooks.emoji ? hooks.emoji(name) : parseEmojis(`:${name}:`) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "slack_blocks_to_jsx__rich_text_section_element_emoji", children: hooks.emoji ? hooks.emoji(name) : parseEmojis(`:${name}:`) });
 };
 
 // src/components/blocks/rich_text/rich_text_section_user.tsx
@@ -868,6 +878,7 @@ var RichTextSectionUser = (props) => {
       className: `
         inline-block
         slack_user
+        slack_blocks_to_jsx__rich_text_section_element_user
         ${(style == null ? void 0 : style.italic) ? "italic" : ""}
         ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
         ${(style == null ? void 0 : style.bold) ? "font-medium" : ""}
@@ -896,6 +907,7 @@ var RichTextSectionUserGroup = (props) => {
       className: `
         inline-block
         slack_user_group
+        slack_blocks_to_jsx__rich_text_section_element_user_group
         ${(style == null ? void 0 : style.italic) ? "italic" : ""}
         ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
         ${(style == null ? void 0 : style.bold) ? "font-medium" : ""}
@@ -925,6 +937,7 @@ var RichTextSectionElement = (props) => {
       "span",
       {
         className: `
+              slack_blocks_to_jsx__rich_text_section_element_text
               ${(style == null ? void 0 : style.italic) ? "italic" : ""}
               ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
               ${(style == null ? void 0 : style.code) ? "slack_inline_code" : ""}
@@ -943,6 +956,7 @@ var RichTextSectionElement = (props) => {
         rel: "noreferrer noopener",
         href: url,
         className: `
+            slack_blocks_to_jsx__rich_text_section_element_link
           text-blue-primary hover:underline underline-offset-4
             ${(style == null ? void 0 : style.italic) ? "italic" : ""}
             ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
@@ -968,7 +982,7 @@ var Element = (props) => {
   const { element } = props;
   if (element.type === "rich_text_list") {
     const { elements, style, border = 0, indent, offset } = element;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-2", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex gap-2 slack_blocks_to_jsx__rich_text_list_element", children: [
       border === 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RichTextListWrapper, { element, className: `list-none`, children: elements.map((el, i) => {
         return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
@@ -1006,7 +1020,7 @@ var Element = (props) => {
   }
   if (element.type === "rich_text_preformatted") {
     const { elements, border } = element;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("code", { className: "flex gap-2 w-full", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("code", { className: "flex gap-2 w-full slack_blocks_to_jsx__rich_text_preformatted_element", children: [
       border === 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "pre",
@@ -1025,7 +1039,7 @@ var Element = (props) => {
   }
   if (element.type === "rich_text_quote") {
     const { elements, border } = element;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("blockquote", { className: "flex gap-2", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("blockquote", { className: "flex gap-2 slack_blocks_to_jsx__rich_text_quote_element", children: [
       border === 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
       elements.map((el, i) => {
         return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
@@ -1034,7 +1048,7 @@ var Element = (props) => {
   }
   if (element.type === "rich_text_section") {
     const { elements } = element;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "inline-block", children: elements.map((el, i) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "inline-block slack_blocks_to_jsx__rich_text_section_element", children: elements.map((el, i) => {
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
     }) });
   }
@@ -1148,7 +1162,7 @@ var getElementComponent = (element) => {
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var BlockWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-base break-words font-normal", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-base slack_blocks_to_jsx--block_wrapper break-words font-normal", children });
 };
 
 // src/message.tsx
@@ -1165,7 +1179,8 @@ var Message = (props) => {
     showBlockKitDebug = false,
     unstyled = false,
     data = {},
-    hooks = {}
+    hooks = {},
+    withoutWrapper = false
   } = props;
   const { setChannels, setUsers, setHooks } = useGlobalData();
   (0, import_react6.useEffect)(() => {
@@ -1176,6 +1191,22 @@ var Message = (props) => {
     if (hooks)
       setHooks(hooks);
   }, [data]);
+  if (withoutWrapper) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      {
+        id: "slack_blocks_to_jsx",
+        className: `slack_blocks_to_jsx relative flex gap-2 w-full max-w-[600px] ${unstyled ? "styles_disabled" : "styles_enabled"} ${className}`,
+        style,
+        children: blocks.map((block, i) => {
+          const element = getBlockComponent(block);
+          if (!element)
+            return null;
+          return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BlockWrapper, { children: element }, i);
+        })
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "section",
     {
@@ -1197,7 +1228,7 @@ var Message = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { src: logo, className: "w-9 h-9", alt: name }) }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col w-full", children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Header, { name, time }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: blocks.map((block, i) => {
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "slack_blocks_to_jsx--blocks", children: blocks.map((block, i) => {
             const element = getBlockComponent(block);
             if (!element)
               return null;

package/dist/index.mjs

@@ -150,7 +150,7 @@ var is_accessory_stacked = (element) => {
 import { jsx, jsxs } from "react/jsx-runtime";
 var Header = (props) => {
   const { name, time } = props;
-  return /* @__PURE__ */ jsxs("div", { className: "flex gap-[5px] items-center w-full", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-[5px] items-center w-full slack_blocks_to_jsx--header", children: [
     /* @__PURE__ */ jsx("h3", { className: "font-black text-[15px]", children: name }),
     /* @__PURE__ */ jsx("div", { className: "h-[14px] w-[27px] leading-[12.5px] py-[1px] px-[3px] uppercase text-[10px]  text-black-primary/[0.7] bg-black-primary/[0.13] font-semibold rounded-[2px] text-center", children: "APP" }),
     /* @__PURE__ */ jsx("div", { className: "text-xs text-black-secondary uppercase leading-[17.6px]", children: dateToTime(time) })
@@ -166,7 +166,7 @@ var ImageElement = (props) => {
     {
       src: image_url,
       alt: alt_text,
-      className: "w-[88px] h-[88px] rounded-lg overflow-hidden object-cover"
+      className: "w-[88px] h-[88px] rounded-lg overflow-hidden object-cover slack_blocks_to_jsx__image_element"
     }
   ) });
 };
@@ -218,7 +218,7 @@ var ButtonElement = (props) => {
       type: "button",
       id: action_id,
       "aria-label": accessibility_label,
-      className: `px-2 pt-0 pb-[1px] text-small h-[28px] min-w-[56px] border rounded whitespace-nowrap font-semibold slack_blocks_to_jsx__button ${style === "primary" ? "border-green-primary.3 text-green-primary" : style === "danger" ? "border-red-primary.3 text-red-primary" : "border-black-primary.3 text-black-primary"}`,
+      className: `px-2 pt-0 pb-[1px] text-small h-[28px] min-w-[56px] border rounded whitespace-nowrap font-semibold slack_blocks_to_jsx__button_element ${style === "primary" ? "border-green-primary.3 text-green-primary" : style === "danger" ? "border-red-primary.3 text-red-primary" : "border-black-primary.3 text-black-primary"}`,
       onClick: () => {
         if (url) {
           window.open(url, "_blank");
@@ -359,7 +359,7 @@ var CheckboxesElement = (props) => {
       input_ref.current.focus();
     }
   }, [focus_on_load]);
-  return /* @__PURE__ */ jsx6("div", { id: action_id, className: "my-1 flex w-full slack_blocks_to_jsx__checkboxes", children: /* @__PURE__ */ jsx6("fieldset", { className: "flex flex-col gap-2", children: options.map((option, i) => {
+  return /* @__PURE__ */ jsx6("div", { id: action_id, className: "my-1 flex w-full slack_blocks_to_jsx__checkboxes_element", children: /* @__PURE__ */ jsx6("fieldset", { className: "flex flex-col gap-2", children: options.map((option, i) => {
     const { text, value, description } = option;
     return /* @__PURE__ */ jsxs3(
       "label",
@@ -423,34 +423,42 @@ var PlaintTextInput = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ jsxs4("div", { id: action_id, className: "relative text-small w-full", tabIndex: 0, children: [
-    !value && placeholder && /* @__PURE__ */ jsx7("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ jsx7(TextObject, { data: placeholder }) }),
-    !value && !placeholder && /* @__PURE__ */ jsx7("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ jsx7(
-      TextObject,
-      {
-        data: {
-          type: "plain_text",
-          text: "Write something"
-        }
-      }
-    ) }),
-    /* @__PURE__ */ jsx7(
-      "textarea",
-      {
-        value,
-        onChange: (e) => setValue(e.target.value),
-        className: "w-full focus:outline-none rounded border border-black-primary.3 p-2",
-        minLength: min_length,
-        maxLength: max_length,
-        style: {
-          maxHeight: "200px",
-          minHeight: "80px",
-          height: "100px"
-        },
-        "aria-label": "Select an item"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      id: action_id,
+      className: "relative text-small w-full slack_blocks_to_jsx__plain_text_input_element",
+      tabIndex: 0,
+      children: [
+        !value && placeholder && /* @__PURE__ */ jsx7("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ jsx7(TextObject, { data: placeholder }) }),
+        !value && !placeholder && /* @__PURE__ */ jsx7("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ jsx7(
+          TextObject,
+          {
+            data: {
+              type: "plain_text",
+              text: "Write something"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx7(
+          "textarea",
+          {
+            value,
+            onChange: (e) => setValue(e.target.value),
+            className: "w-full focus:outline-none rounded border border-black-primary.3 p-2",
+            minLength: min_length,
+            maxLength: max_length,
+            style: {
+              maxHeight: "200px",
+              minHeight: "80px",
+              height: "100px"
+            },
+            "aria-label": "Select an item"
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/components/elements/users_select_element.tsx
@@ -484,7 +492,7 @@ var UsersSelectElement = (props) => {
     "div",
     {
       id: action_id,
-      className: "py-1 px-2 h-7 min-h-[28px] relative flex items-center justify-between rounded text-small w-[190px] border border-black-primary.3",
+      className: "py-1 px-2 h-7 min-h-[28px] relative flex items-center justify-between rounded text-small w-[190px] border border-black-primary.3 slack_blocks_to_jsx__users_select_element",
       tabIndex: 0,
       children: [
         visible && /* @__PURE__ */ jsx8(
@@ -772,6 +780,7 @@ var RichTextSectionBroadcast = (props) => {
       className: `
         inline-block
         slack_broadcast
+        slack_blocks_to_jsx__rich_text_section_element_broadcast
         ${(style == null ? void 0 : style.italic) ? "italic" : ""}
         ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
         ${(style == null ? void 0 : style.bold) ? "font-medium" : ""}
@@ -799,6 +808,7 @@ var RichTextSectionChannel = (props) => {
       className: `
         inline-block
         slack_channel
+        slack_blocks_to_jsx__rich_text_section_element_channel
         ${(style == null ? void 0 : style.italic) ? "italic" : ""}
         ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
         ${(style == null ? void 0 : style.bold) ? "font-medium" : ""}
@@ -818,7 +828,7 @@ import { jsx as jsx16 } from "react/jsx-runtime";
 var RichTextSectionEmoji = (props) => {
   const { name } = props;
   const { hooks } = useGlobalData();
-  return /* @__PURE__ */ jsx16("span", { children: hooks.emoji ? hooks.emoji(name) : parseEmojis(`:${name}:`) });
+  return /* @__PURE__ */ jsx16("span", { className: "slack_blocks_to_jsx__rich_text_section_element_emoji", children: hooks.emoji ? hooks.emoji(name) : parseEmojis(`:${name}:`) });
 };
 
 // src/components/blocks/rich_text/rich_text_section_user.tsx
@@ -835,6 +845,7 @@ var RichTextSectionUser = (props) => {
       className: `
         inline-block
         slack_user
+        slack_blocks_to_jsx__rich_text_section_element_user
         ${(style == null ? void 0 : style.italic) ? "italic" : ""}
         ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
         ${(style == null ? void 0 : style.bold) ? "font-medium" : ""}
@@ -863,6 +874,7 @@ var RichTextSectionUserGroup = (props) => {
       className: `
         inline-block
         slack_user_group
+        slack_blocks_to_jsx__rich_text_section_element_user_group
         ${(style == null ? void 0 : style.italic) ? "italic" : ""}
         ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
         ${(style == null ? void 0 : style.bold) ? "font-medium" : ""}
@@ -892,6 +904,7 @@ var RichTextSectionElement = (props) => {
       "span",
       {
         className: `
+              slack_blocks_to_jsx__rich_text_section_element_text
               ${(style == null ? void 0 : style.italic) ? "italic" : ""}
               ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
               ${(style == null ? void 0 : style.code) ? "slack_inline_code" : ""}
@@ -910,6 +923,7 @@ var RichTextSectionElement = (props) => {
         rel: "noreferrer noopener",
         href: url,
         className: `
+            slack_blocks_to_jsx__rich_text_section_element_link
           text-blue-primary hover:underline underline-offset-4
             ${(style == null ? void 0 : style.italic) ? "italic" : ""}
             ${(style == null ? void 0 : style.strike) ? "line-through" : ""}
@@ -935,7 +949,7 @@ var Element = (props) => {
   const { element } = props;
   if (element.type === "rich_text_list") {
     const { elements, style, border = 0, indent, offset } = element;
-    return /* @__PURE__ */ jsxs9("div", { className: "flex gap-2", children: [
+    return /* @__PURE__ */ jsxs9("div", { className: "flex gap-2 slack_blocks_to_jsx__rich_text_list_element", children: [
       border === 1 && /* @__PURE__ */ jsx20("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
       /* @__PURE__ */ jsx20(RichTextListWrapper, { element, className: `list-none`, children: elements.map((el, i) => {
         return /* @__PURE__ */ jsxs9(
@@ -973,7 +987,7 @@ var Element = (props) => {
   }
   if (element.type === "rich_text_preformatted") {
     const { elements, border } = element;
-    return /* @__PURE__ */ jsxs9("code", { className: "flex gap-2 w-full", children: [
+    return /* @__PURE__ */ jsxs9("code", { className: "flex gap-2 w-full slack_blocks_to_jsx__rich_text_preformatted_element", children: [
       border === 1 && /* @__PURE__ */ jsx20("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
       /* @__PURE__ */ jsx20(
         "pre",
@@ -992,7 +1006,7 @@ var Element = (props) => {
   }
   if (element.type === "rich_text_quote") {
     const { elements, border } = element;
-    return /* @__PURE__ */ jsxs9("blockquote", { className: "flex gap-2", children: [
+    return /* @__PURE__ */ jsxs9("blockquote", { className: "flex gap-2 slack_blocks_to_jsx__rich_text_quote_element", children: [
       border === 1 && /* @__PURE__ */ jsx20("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
       elements.map((el, i) => {
         return /* @__PURE__ */ jsx20(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
@@ -1001,7 +1015,7 @@ var Element = (props) => {
   }
   if (element.type === "rich_text_section") {
     const { elements } = element;
-    return /* @__PURE__ */ jsx20("div", { className: "inline-block", children: elements.map((el, i) => {
+    return /* @__PURE__ */ jsx20("div", { className: "inline-block slack_blocks_to_jsx__rich_text_section_element", children: elements.map((el, i) => {
       return /* @__PURE__ */ jsx20(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
     }) });
   }
@@ -1115,7 +1129,7 @@ var getElementComponent = (element) => {
 import { jsx as jsx23 } from "react/jsx-runtime";
 var BlockWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx23("div", { className: "text-base break-words font-normal", children });
+  return /* @__PURE__ */ jsx23("div", { className: "text-base slack_blocks_to_jsx--block_wrapper break-words font-normal", children });
 };
 
 // src/message.tsx
@@ -1132,7 +1146,8 @@ var Message = (props) => {
     showBlockKitDebug = false,
     unstyled = false,
     data = {},
-    hooks = {}
+    hooks = {},
+    withoutWrapper = false
   } = props;
   const { setChannels, setUsers, setHooks } = useGlobalData();
   useEffect5(() => {
@@ -1143,6 +1158,22 @@ var Message = (props) => {
     if (hooks)
       setHooks(hooks);
   }, [data]);
+  if (withoutWrapper) {
+    return /* @__PURE__ */ jsx24(
+      "div",
+      {
+        id: "slack_blocks_to_jsx",
+        className: `slack_blocks_to_jsx relative flex gap-2 w-full max-w-[600px] ${unstyled ? "styles_disabled" : "styles_enabled"} ${className}`,
+        style,
+        children: blocks.map((block, i) => {
+          const element = getBlockComponent(block);
+          if (!element)
+            return null;
+          return /* @__PURE__ */ jsx24(BlockWrapper, { children: element }, i);
+        })
+      }
+    );
+  }
   return /* @__PURE__ */ jsx24("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ jsxs11(
     "section",
     {
@@ -1164,7 +1195,7 @@ var Message = (props) => {
         /* @__PURE__ */ jsx24("div", { className: "shrink-0", children: /* @__PURE__ */ jsx24("img", { src: logo, className: "w-9 h-9", alt: name }) }),
         /* @__PURE__ */ jsxs11("div", { className: "flex flex-col w-full", children: [
           /* @__PURE__ */ jsx24(Header, { name, time }),
-          /* @__PURE__ */ jsx24("div", { children: blocks.map((block, i) => {
+          /* @__PURE__ */ jsx24("div", { className: "slack_blocks_to_jsx--blocks", children: blocks.map((block, i) => {
             const element = getBlockComponent(block);
             if (!element)
               return null;

package/package.json

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

package/readme.md

@@ -1,18 +1,118 @@
-# Slack Blocks to JSX
+# Slack Blocks to JSX Documentation
 
-Playground - https://slack-block-to-jsx-playground.vercel.app/
+## Overview
+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.
 
-### How to use
+**🚨 Quickly test out the libray on online playground**: https://slack-block-to-jsx-playground.vercel.app/
 
-1. Install the Library
-2. Import the CSS file in your entry point file `import "slack-blocks-to-jsx/dist/style.css"`
-3. Import the component and use it `import { Message } from "slack-blocks-to-jsx"`
-4. (optional) import the Block type to define the blocks for better type safety :)
+## Installation
+To use this package in your project, install it via npm:
 
-   `import type { Block } from "slack-blocks-to-jsx"`
+```bash
+npm install slack-blocks-to-jsx
+```
 
-   `const blocks: Block[] = [...your slack blocks]`
+Or using yarn:
 
-   `<Message time={new Date()} name="Your Company" logo="https://commons.wikimedia.org/wiki/File:Google_%22G%22_logo.svg" blocks={blocks} />`
+```bash
+yarn add slack-blocks-to-jsx
+```
 
-Note: This library is under development, if you need any functionality and it is not working/available yet in the library please raise an issue [here](https://github.com/themashcodee/slack-blocks-to-jsx/issues). I will try to fix it asap :).
+## Usage
+
+### Importing Styles
+Import the necessary CSS file in your entry point to ensure the styles are applied:
+
+```javascript
+import "slack-blocks-to-jsx/dist/style.css";
+```
+
+### Using Components
+Import the `Message` component from the package and use it to render your Slack blocks:
+
+```javascript
+import { Message } from "slack-blocks-to-jsx";
+
+const blocks = [...]; // your Slack blocks data
+
+<Message time={new Date()} name="Your Company" logo="logo_url" blocks={blocks} />
+```
+
+### Types
+For better type safety, you can import the `Block` type:
+
+```javascript
+import type { Block } from "slack-blocks-to-jsx";
+
+const blocks: Block[] = [...]; // your Slack blocks data
+```
+
+## Components
+
+### `Message`
+This is the main component that renders the entire Slack message. It supports various props to customize the appearance and behavior:
+
+- `blocks`: Array of Slack block objects.
+- `logo`: URL of the logo to display.
+- `name`: Name of the sender.
+- `time?`: Timestamp for the message.
+- `className?`, `style?`: Standard React styling props.
+- `unstyled?`: If true, disables all included styles. Default to false.
+- `withoutWrapper?`: If true, renders only the Slack blocks without any wrapper. Default to false.
+- `hooks?`: custom handlers for user, channel, broadcast, usergroup, emoji etc.
+- `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.
+
+### Block Components
+Each Slack block type has a corresponding component:
+
+- `Section` (✅ supported)
+- `Divider` (✅ supported)
+- `Image` (✅ supported)
+- `Context` (✅ supported)
+- `Actions` (🟨 partially supported)
+- `File` (❌ not supported yet)
+- `Header` (❌ not supported yet)
+- `Input` (🟨 partially supported)
+- `RichText` (✅ supported)
+- `Video` (❌ not supported yet)
+
+If you want a support of a particular block or element which is not supported yet so please raise a github issue or mail me at codeemash@gmail.com. I will try to push it asap.
+
+## Customization
+You can handle custom rendering and interactions using the `hooks` prop in the `Message` component. This allows you to define custom behavior for user mentions, channels, and other interactive elements. You can also override default styling. Here are the classes structure to understand to override any block styling.
+
+`.slack_blocks_to_jsx`: Main Wrapper  
+`.slack_blocks_to_jsx--header`: Header (name and time)  
+`.slack_blocks_to_jsx--blocks`: blocks array mapping wrapper  
+`.slack_blocks_to_jsx--block_wrapper`: wrapper around every block
+`.slack_blocks_to_jsx__divider`: Divider Block  
+`.slack_blocks_to_jsx__section`: Section Block  
+`.slack_blocks_to_jsx__image`: Image Block  
+`.slack_blocks_to_jsx__context`: Context Block  
+`.slack_blocks_to_jsx__actions`: Actions Block   
+`.slack_blocks_to_jsx__input`: Input Block  
+`.slack_blocks_to_jsx__rich_text`: Rich Text Block  
+`.slack_blocks_to_jsx__rich_text_list_element`: Rich Text Block List Element  
+`.slack_blocks_to_jsx__rich_text_preformatted_element`: Rich Text Block Preformatted Element  
+`.slack_blocks_to_jsx__rich_text_quote_element`: Rich Text Block Element Quote Element  
+`.slack_blocks_to_jsx__rich_text_section_element`: Rich Text Block Section Element  
+
+...as so on (all the other classes will be similar too, for example `.slack_blocks_to_jsx__rich_text_section_element_user` for Rich Text Block Section Element User)
+
+If you want any other customization so please raise a github issue or mail me at codeemash@gmail.com. I will try to push it asap if it aligns with the library development vision.
+
+
+## Development and Contribution
+The project is open-source, and contributions are welcome. If you encounter any issues or want to suggest improvements, please file an issue on the GitHub repository:
+
+[GitHub Repository Issues](https://github.com/themashcodee/slack-blocks-to-jsx/issues)
+
+## License
+The project is licensed under the MIT license, allowing free use, modification, and distribution.
+
+## Support
+
+If you like my work, you can buy me a coffee! 😊
+
+[![Buy Me a Coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/themashcodee)