slack-blocks-to-jsx 0.1.9 → 0.2.0

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.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",