slack-blocks-to-jsx 0.2.2 → 0.3.0

package/dist/index.mjs

@@ -53,48 +53,696 @@ var parseEmojis = (text) => {
   return emojified;
 };
 
-// src/utils/slack_text_to_jsx.tsx
-import parse from "html-react-parser";
-import { toHTML as slack_text_parser } from "slack-markdown";
-var slack_text_to_jsx = (text, parse_options) => {
-  const { users, channels } = parse_options;
-  if (!text)
+// src/utils/markdown_parser/parser.tsx
+import YozoraParser from "@yozora/parser";
+
+// src/utils/markdown_parser/sub_elements/text.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Text = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ jsx("span", { children: element.value.split("[[DOUBLE_LINE_BREAK]]").map((line, index) => {
+    return /* @__PURE__ */ jsxs("span", { children: [
+      index > 0 && /* @__PURE__ */ jsx("span", { className: "slack_blocks_to_jsx__line_break_not_first" }),
+      line
+    ] }, index);
+  }) });
+};
+
+// src/utils/markdown_parser/sub_elements/delete.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Delete = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ jsx2("s", { children: element.children.map((child, i) => {
+    return /* @__PURE__ */ jsx2(Text, { element: child }, i);
+  }) });
+};
+
+// src/store/useGlobalData.ts
+import { create } from "zustand";
+var useBearStore = create((set) => ({
+  users: [],
+  channels: [],
+  user_groups: [],
+  hooks: {},
+  setUsers: (users) => set({ users }),
+  setChannels: (channels) => set({ channels }),
+  setUserGroups: (user_groups) => set({ user_groups }),
+  setHooks: (hooks) => set({ hooks })
+}));
+var useGlobalData = () => {
+  const { users, channels, user_groups, hooks, setChannels, setUsers, setHooks, setUserGroups } = useBearStore();
+  return {
+    users,
+    channels,
+    user_groups,
+    hooks,
+    setChannels,
+    setUsers,
+    setHooks,
+    setUserGroups
+  };
+};
+
+// src/utils/markdown_parser/sub_elements/slack_broadcast.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SlackBroadcast = (props) => {
+  const { element } = props;
+  const { hooks } = useGlobalData();
+  if (element.value === "here" && hooks.atHere)
+    return /* @__PURE__ */ jsx3(Fragment, { children: hooks.atHere() });
+  if (element.value === "everyone" && hooks.atEveryone)
+    return /* @__PURE__ */ jsx3(Fragment, { children: hooks.atEveryone() });
+  if (element.value === "channel" && hooks.atChannel)
+    return /* @__PURE__ */ jsx3(Fragment, { children: hooks.atChannel() });
+  return /* @__PURE__ */ jsxs2("span", { className: "slack_broadcast", children: [
+    "@",
+    element.value
+  ] });
+};
+
+// src/utils/markdown_parser/sub_elements/slack_channel_mention.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var SlackChannelMention = (props) => {
+  const { element } = props;
+  const { hooks, channels } = useGlobalData();
+  const channel_id = element.value;
+  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(Fragment2, { children: hooks.channel(channel || { id: channel_id, name: label }) });
+  return /* @__PURE__ */ jsxs3("span", { className: "slack_channel", "data-channel-id": (channel == null ? void 0 : channel.id) || channel_id, children: [
+    "#",
+    label
+  ] });
+};
+
+// src/utils/markdown_parser/sub_elements/slack_user_group_mention.tsx
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var SlackUserGroupMention = (props) => {
+  const { element } = props;
+  const { hooks, user_groups } = useGlobalData();
+  const group_id = element.value;
+  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(Fragment3, { children: hooks.usergroup(group || { id: group_id, name: label }) });
+  return /* @__PURE__ */ jsxs4("span", { "data-usergroup-id": (group == null ? void 0 : group.id) || group_id, className: "slack_user_group", children: [
+    "@",
+    label
+  ] });
+};
+
+// src/utils/markdown_parser/sub_elements/slack_user_mention.tsx
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } 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(Fragment4, { children: hooks.user(user || { id: user_id, name: user_id }) });
+  const label = (user == null ? void 0 : user.name) || user_id;
+  return /* @__PURE__ */ jsxs5("span", { className: "slack_user", "data-user-id": (user == null ? void 0 : user.id) || user_id, children: [
+    "@",
+    label
+  ] });
+};
+
+// src/utils/markdown_parser/sub_elements/emphasis.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Emphasis = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ jsx7("em", { children: element.children.map((child, i) => {
+    if (child.type === "delete")
+      return /* @__PURE__ */ jsx7(Delete, { element: child }, i);
+    if (child.type === "slack_user_mention")
+      return /* @__PURE__ */ jsx7(SlackUserMention, { element: child }, i);
+    if (child.type === "slack_channel_mention")
+      return /* @__PURE__ */ jsx7(SlackChannelMention, { element: child }, i);
+    if (child.type === "slack_user_group_mention")
+      return /* @__PURE__ */ jsx7(SlackUserGroupMention, { element: child }, i);
+    if (child.type === "slack_broadcast")
+      return /* @__PURE__ */ jsx7(SlackBroadcast, { element: child }, i);
+    return /* @__PURE__ */ jsx7(Text, { element: child }, i);
+  }) });
+};
+
+// src/utils/markdown_parser/sub_elements/inline_code.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var InlineCode = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ jsx8("code", { className: "slack_code_inline", children: element.value });
+};
+
+// src/utils/markdown_parser/sub_elements/strong.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Strong = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ jsx9("strong", { children: element.children.map((child, i) => {
+    if (child.type === "delete")
+      return /* @__PURE__ */ jsx9(Delete, { element: child }, i);
+    if (child.type === "slack_user_mention")
+      return /* @__PURE__ */ jsx9(SlackUserMention, { element: child }, i);
+    if (child.type === "slack_channel_mention")
+      return /* @__PURE__ */ jsx9(SlackChannelMention, { element: child }, i);
+    if (child.type === "slack_user_group_mention")
+      return /* @__PURE__ */ jsx9(SlackUserGroupMention, { element: child }, i);
+    if (child.type === "slack_broadcast")
+      return /* @__PURE__ */ jsx9(SlackBroadcast, { element: child }, i);
+    return /* @__PURE__ */ jsx9(Text, { element: child }, i);
+  }) });
+};
+
+// src/utils/markdown_parser/sub_elements/link.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Link = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ jsx10("a", { href: element.url, className: "slack_link", children: element.children.map((child, i) => {
+    if (child.type === "delete")
+      return /* @__PURE__ */ jsx10(Delete, { element: child }, i);
+    if (child.type === "emphasis")
+      return /* @__PURE__ */ jsx10(Emphasis, { element: child }, i);
+    if (child.type === "strong")
+      return /* @__PURE__ */ jsx10(Strong, { element: child }, i);
+    return /* @__PURE__ */ jsx10(Text, { element: child }, i);
+  }) });
+};
+
+// src/utils/markdown_parser/elements/paragraph.tsx
+import { Fragment as Fragment5, jsx as jsx11 } from "react/jsx-runtime";
+var Paragraph = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ jsx11(Fragment5, { children: element.children.map((subelement, i) => {
+    if (subelement.type === "text")
+      return /* @__PURE__ */ jsx11(Text, { element: subelement }, i);
+    if (subelement.type === "emphasis")
+      return /* @__PURE__ */ jsx11(Emphasis, { element: subelement }, i);
+    if (subelement.type === "inlineCode")
+      return /* @__PURE__ */ jsx11(InlineCode, { element: subelement }, i);
+    if (subelement.type === "delete")
+      return /* @__PURE__ */ jsx11(Delete, { element: subelement }, i);
+    if (subelement.type === "strong")
+      return /* @__PURE__ */ jsx11(Strong, { element: subelement }, i);
+    if (subelement.type === "link")
+      return /* @__PURE__ */ jsx11(Link, { element: subelement }, i);
+    if (subelement.type === "slack_user_mention")
+      return /* @__PURE__ */ jsx11(SlackUserMention, { element: subelement }, i);
+    if (subelement.type === "slack_channel_mention")
+      return /* @__PURE__ */ jsx11(SlackChannelMention, { element: subelement }, i);
+    if (subelement.type === "slack_user_group_mention")
+      return /* @__PURE__ */ jsx11(SlackUserGroupMention, { element: subelement }, i);
+    if (subelement.type === "slack_broadcast")
+      return /* @__PURE__ */ jsx11(SlackBroadcast, { element: subelement }, i);
     return null;
-  let text_string = text;
-  text_string = text_string.replace(/(\n)+/g, (match) => {
-    return match.replace(/\n/g, (newline, index) => {
-      return index === 0 ? "<span class='slack_blocks_to_jsx__line_break'></span>" : "<span class='slack_blocks_to_jsx__line_break_not_first'></span>";
+  }) });
+};
+
+// src/utils/markdown_parser/elements/blockquote.tsx
+import { Fragment as Fragment6, jsx as jsx12 } from "react/jsx-runtime";
+var Blockquote = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ jsx12(Fragment6, { children: element.children.map((para) => {
+    return /* @__PURE__ */ jsx12(Paragraph, { element: para });
+  }) });
+};
+
+// src/utils/markdown_parser/elements/code.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Code = (props) => {
+  const { element } = props;
+  return /* @__PURE__ */ jsx13("code", { className: "slack_code", children: element.value });
+};
+
+// src/utils/markdown_parser/tokenizers/slack_user_mention/tokenizer.ts
+import { BaseInlineTokenizer, TokenizerPriority } from "@yozora/core-tokenizer";
+
+// src/utils/markdown_parser/tokenizers/slack_user_mention/match.ts
+import { AsciiCodePoint } from "@yozora/character";
+import { eatOptionalCharacters } from "@yozora/core-tokenizer";
+
+// src/utils/markdown_parser/tokenizers/slack_user_mention/types.ts
+var SlackUserMentionType = "slack_user_mention";
+
+// src/utils/markdown_parser/tokenizers/slack_user_mention/match.ts
+var match = function(api) {
+  return { findDelimiter, processSingleDelimiter };
+  function* findDelimiter() {
+    var _a, _b;
+    const nodePoints = api.getNodePoints();
+    const blockStartIndex = api.getBlockStartIndex();
+    const blockEndIndex = api.getBlockEndIndex();
+    const potentialDelimiters = [];
+    for (let i = blockStartIndex; i < blockEndIndex; ++i) {
+      const c = (_a = nodePoints[i]) == null ? void 0 : _a.codePoint;
+      if (c === AsciiCodePoint.OPEN_ANGLE && ((_b = nodePoints[i + 1]) == null ? void 0 : _b.codePoint) === AsciiCodePoint.AT_SIGN) {
+        const j = eatOptionalCharacters(nodePoints, i + 2, blockEndIndex, AsciiCodePoint.AT_SIGN);
+        if (j < blockEndIndex) {
+          potentialDelimiters.push({
+            type: "opener",
+            startIndex: i,
+            endIndex: j
+          });
+        }
+      } else if (c === AsciiCodePoint.CLOSE_ANGLE) {
+        potentialDelimiters.push({
+          type: "closer",
+          startIndex: i,
+          endIndex: i + 1
+        });
+      }
+    }
+    let pIndex = 0;
+    let lastEndIndex = -1;
+    let delimiter = null;
+    while (pIndex < potentialDelimiters.length) {
+      const [startIndex, endIndex] = yield delimiter;
+      if (lastEndIndex === endIndex) {
+        if (delimiter == null || delimiter.startIndex >= startIndex)
+          continue;
+      }
+      lastEndIndex = endIndex;
+      let openerDelimiter = null;
+      let closerDelimiter = null;
+      for (; pIndex < potentialDelimiters.length; ++pIndex) {
+        const delimiter2 = potentialDelimiters[pIndex];
+        if (delimiter2.startIndex >= startIndex && delimiter2.type !== "closer") {
+          openerDelimiter = delimiter2;
+          break;
+        }
+      }
+      for (let i = pIndex + 1; i < potentialDelimiters.length; ++i) {
+        const delimiter2 = potentialDelimiters[i];
+        if (delimiter2.type === "closer") {
+          closerDelimiter = delimiter2;
+          break;
+        }
+      }
+      if (closerDelimiter == null)
+        return;
+      delimiter = {
+        type: "full",
+        startIndex: openerDelimiter.startIndex,
+        endIndex: closerDelimiter.endIndex,
+        thickness: closerDelimiter.endIndex - closerDelimiter.startIndex
+      };
+    }
+  }
+  function processSingleDelimiter(delimiter) {
+    const token = {
+      nodeType: SlackUserMentionType,
+      startIndex: delimiter.startIndex,
+      endIndex: delimiter.endIndex,
+      thickness: delimiter.thickness
+    };
+    return [token];
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_user_mention/parse.ts
+import { calcStringFromNodePoints } from "@yozora/character";
+var parse = function(api) {
+  return {
+    parse: (tokens) => tokens.map((token) => {
+      const nodePoints = api.getNodePoints();
+      let startIndex = token.startIndex + 2;
+      let endIndex = token.endIndex - 1;
+      const value = calcStringFromNodePoints(nodePoints, startIndex, endIndex);
+      const node = api.shouldReservePosition ? { type: SlackUserMentionType, position: api.calcPosition(token), value } : { type: SlackUserMentionType, value };
+      return node;
+    })
+  };
+};
+
+// src/utils/markdown_parser/tokenizers/slack_user_mention/tokenizer.ts
+var SlackUserMentionTokenizer = class extends BaseInlineTokenizer {
+  constructor(props = {}) {
+    super({
+      name: SlackUserMentionType,
+      priority: props.priority || TokenizerPriority.ATOMIC
     });
-  });
-  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);
-        const label = (user == null ? void 0 : user.name) || data.id || data.name;
-        return `<span class="slack_user" data-user-id="${(user == null ? void 0 : user.id) || data.id}">@${label}</span>`;
-      },
-      channel(data) {
-        const channel = channels.find((c) => c.id === data.id || c.name === data.name);
-        const label = (channel == null ? void 0 : channel.name) || data.id || data.name;
-        return `<span class="slack_channel" data-channel-id="${(channel == null ? void 0 : channel.id) || data.id}">#${label}</span>`;
-      },
-      atChannel(data) {
-        const channel = channels.find((c) => c.name === data.name);
-        const label = (channel == null ? void 0 : channel.name) || data.name;
-        return `<span class="slack_channel" data-channel-id="${channel == null ? void 0 : channel.id}">#${label}</span>`;
-      },
-      atEveryone() {
-        return `<span class="slack_broadcast">@everyone</span>`;
-      },
-      atHere() {
-        return `<span class="slack_broadcast">@everyone</span>`;
+    this.match = match;
+    this.parse = parse;
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_channel_mention/tokenizer.ts
+import { BaseInlineTokenizer as BaseInlineTokenizer2, TokenizerPriority as TokenizerPriority2 } from "@yozora/core-tokenizer";
+
+// src/utils/markdown_parser/tokenizers/slack_channel_mention/match.ts
+import { AsciiCodePoint as AsciiCodePoint2 } from "@yozora/character";
+import { eatOptionalCharacters as eatOptionalCharacters2 } from "@yozora/core-tokenizer";
+
+// src/utils/markdown_parser/tokenizers/slack_channel_mention/types.ts
+var SlackChannelMentionType = "slack_channel_mention";
+
+// src/utils/markdown_parser/tokenizers/slack_channel_mention/match.ts
+var match2 = function(api) {
+  return { findDelimiter, processSingleDelimiter };
+  function* findDelimiter() {
+    var _a, _b;
+    const nodePoints = api.getNodePoints();
+    const blockStartIndex = api.getBlockStartIndex();
+    const blockEndIndex = api.getBlockEndIndex();
+    const potentialDelimiters = [];
+    for (let i = blockStartIndex; i < blockEndIndex; ++i) {
+      const c = (_a = nodePoints[i]) == null ? void 0 : _a.codePoint;
+      if (c === AsciiCodePoint2.OPEN_ANGLE && ((_b = nodePoints[i + 1]) == null ? void 0 : _b.codePoint) === AsciiCodePoint2.NUMBER_SIGN) {
+        const j = eatOptionalCharacters2(nodePoints, i + 2, blockEndIndex, AsciiCodePoint2.AT_SIGN);
+        if (j < blockEndIndex) {
+          potentialDelimiters.push({
+            type: "opener",
+            startIndex: i,
+            endIndex: j
+          });
+        }
+      } else if (c === AsciiCodePoint2.CLOSE_ANGLE) {
+        potentialDelimiters.push({
+          type: "closer",
+          startIndex: i,
+          endIndex: i + 1
+        });
       }
-      // ...(hooks.date && { date: hooks.date }),
-      // ...(hooks.usergroup && { usergroup: hooks.usergroup }),
     }
-  });
-  return parse(text_string, { trim: false });
+    let pIndex = 0;
+    let lastEndIndex = -1;
+    let delimiter = null;
+    while (pIndex < potentialDelimiters.length) {
+      const [startIndex, endIndex] = yield delimiter;
+      if (lastEndIndex === endIndex) {
+        if (delimiter == null || delimiter.startIndex >= startIndex)
+          continue;
+      }
+      lastEndIndex = endIndex;
+      let openerDelimiter = null;
+      let closerDelimiter = null;
+      for (; pIndex < potentialDelimiters.length; ++pIndex) {
+        const delimiter2 = potentialDelimiters[pIndex];
+        if (delimiter2.startIndex >= startIndex && delimiter2.type !== "closer") {
+          openerDelimiter = delimiter2;
+          break;
+        }
+      }
+      for (let i = pIndex + 1; i < potentialDelimiters.length; ++i) {
+        const delimiter2 = potentialDelimiters[i];
+        if (delimiter2.type === "closer") {
+          closerDelimiter = delimiter2;
+          break;
+        }
+      }
+      if (closerDelimiter == null)
+        return;
+      delimiter = {
+        type: "full",
+        startIndex: openerDelimiter.startIndex,
+        endIndex: closerDelimiter.endIndex,
+        thickness: closerDelimiter.endIndex - closerDelimiter.startIndex
+      };
+    }
+  }
+  function processSingleDelimiter(delimiter) {
+    const token = {
+      nodeType: SlackChannelMentionType,
+      startIndex: delimiter.startIndex,
+      endIndex: delimiter.endIndex,
+      thickness: delimiter.thickness
+    };
+    return [token];
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_channel_mention/parse.ts
+import { calcStringFromNodePoints as calcStringFromNodePoints2 } from "@yozora/character";
+var parse2 = function(api) {
+  return {
+    parse: (tokens) => tokens.map((token) => {
+      const nodePoints = api.getNodePoints();
+      let startIndex = token.startIndex + 2;
+      let endIndex = token.endIndex - 1;
+      const value = calcStringFromNodePoints2(nodePoints, startIndex, endIndex);
+      const node = api.shouldReservePosition ? { type: SlackChannelMentionType, position: api.calcPosition(token), value } : { type: SlackChannelMentionType, value };
+      return node;
+    })
+  };
+};
+
+// src/utils/markdown_parser/tokenizers/slack_channel_mention/tokenizer.ts
+var SlackChannelMentionTokenizer = class extends BaseInlineTokenizer2 {
+  constructor(props = {}) {
+    super({
+      name: SlackChannelMentionType,
+      priority: props.priority || TokenizerPriority2.ATOMIC
+    });
+    this.match = match2;
+    this.parse = parse2;
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_user_group_mention/tokenizer.ts
+import { BaseInlineTokenizer as BaseInlineTokenizer3, TokenizerPriority as TokenizerPriority3 } from "@yozora/core-tokenizer";
+
+// src/utils/markdown_parser/tokenizers/slack_user_group_mention/match.ts
+import { AsciiCodePoint as AsciiCodePoint3 } from "@yozora/character";
+import { eatOptionalCharacters as eatOptionalCharacters3 } from "@yozora/core-tokenizer";
+
+// src/utils/markdown_parser/tokenizers/slack_user_group_mention/types.ts
+var SlackUserGroupMentionType = "slack_user_group_mention";
+
+// src/utils/markdown_parser/tokenizers/slack_user_group_mention/match.ts
+var match3 = function(api) {
+  return { findDelimiter, processSingleDelimiter };
+  function* findDelimiter() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    const nodePoints = api.getNodePoints();
+    const blockStartIndex = api.getBlockStartIndex();
+    const blockEndIndex = api.getBlockEndIndex();
+    const potentialDelimiters = [];
+    for (let i = blockStartIndex; i < blockEndIndex; ++i) {
+      const c = (_a = nodePoints[i]) == null ? void 0 : _a.codePoint;
+      if (c === AsciiCodePoint3.OPEN_ANGLE && ((_b = nodePoints[i + 1]) == null ? void 0 : _b.codePoint) === AsciiCodePoint3.EXCLAMATION_MARK && ((_c = nodePoints[i + 2]) == null ? void 0 : _c.codePoint) === AsciiCodePoint3.LOWERCASE_S && ((_d = nodePoints[i + 3]) == null ? void 0 : _d.codePoint) === AsciiCodePoint3.LOWERCASE_U && ((_e = nodePoints[i + 4]) == null ? void 0 : _e.codePoint) === AsciiCodePoint3.LOWERCASE_B && ((_f = nodePoints[i + 5]) == null ? void 0 : _f.codePoint) === AsciiCodePoint3.LOWERCASE_T && ((_g = nodePoints[i + 6]) == null ? void 0 : _g.codePoint) === AsciiCodePoint3.LOWERCASE_E && ((_h = nodePoints[i + 7]) == null ? void 0 : _h.codePoint) === AsciiCodePoint3.LOWERCASE_A && ((_i = nodePoints[i + 8]) == null ? void 0 : _i.codePoint) === AsciiCodePoint3.LOWERCASE_M && ((_j = nodePoints[i + 9]) == null ? void 0 : _j.codePoint) === AsciiCodePoint3.CARET) {
+        const j = eatOptionalCharacters3(nodePoints, i + 10, blockEndIndex, AsciiCodePoint3.CARET);
+        if (j < blockEndIndex) {
+          potentialDelimiters.push({
+            type: "opener",
+            startIndex: i,
+            endIndex: j
+          });
+        }
+      } else if (c === AsciiCodePoint3.CLOSE_ANGLE) {
+        potentialDelimiters.push({
+          type: "closer",
+          startIndex: i,
+          endIndex: i + 1
+        });
+      }
+    }
+    let pIndex = 0;
+    let lastEndIndex = -1;
+    let delimiter = null;
+    while (pIndex < potentialDelimiters.length) {
+      const [startIndex, endIndex] = yield delimiter;
+      if (lastEndIndex === endIndex) {
+        if (delimiter == null || delimiter.startIndex >= startIndex)
+          continue;
+      }
+      lastEndIndex = endIndex;
+      let openerDelimiter = null;
+      let closerDelimiter = null;
+      for (; pIndex < potentialDelimiters.length; ++pIndex) {
+        const delimiter2 = potentialDelimiters[pIndex];
+        if (delimiter2.startIndex >= startIndex && delimiter2.type !== "closer") {
+          openerDelimiter = delimiter2;
+          break;
+        }
+      }
+      for (let i = pIndex + 1; i < potentialDelimiters.length; ++i) {
+        const delimiter2 = potentialDelimiters[i];
+        if (delimiter2.type === "closer") {
+          closerDelimiter = delimiter2;
+          break;
+        }
+      }
+      if (closerDelimiter == null)
+        return;
+      delimiter = {
+        type: "full",
+        startIndex: openerDelimiter.startIndex,
+        endIndex: closerDelimiter.endIndex,
+        thickness: closerDelimiter.endIndex - closerDelimiter.startIndex
+      };
+    }
+  }
+  function processSingleDelimiter(delimiter) {
+    const token = {
+      nodeType: SlackUserGroupMentionType,
+      startIndex: delimiter.startIndex,
+      endIndex: delimiter.endIndex,
+      thickness: delimiter.thickness
+    };
+    return [token];
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_user_group_mention/parse.ts
+import { calcStringFromNodePoints as calcStringFromNodePoints3 } from "@yozora/character";
+var parse3 = function(api) {
+  return {
+    parse: (tokens) => tokens.map((token) => {
+      const nodePoints = api.getNodePoints();
+      let startIndex = token.startIndex + 10;
+      let endIndex = token.endIndex - 1;
+      const value = calcStringFromNodePoints3(nodePoints, startIndex, endIndex);
+      const node = api.shouldReservePosition ? { type: SlackUserGroupMentionType, position: api.calcPosition(token), value } : { type: SlackUserGroupMentionType, value };
+      return node;
+    })
+  };
+};
+
+// src/utils/markdown_parser/tokenizers/slack_user_group_mention/tokenizer.ts
+var SlackUserGroupMentionTokenizer = class extends BaseInlineTokenizer3 {
+  constructor(props = {}) {
+    super({
+      name: SlackUserGroupMentionType,
+      priority: props.priority || TokenizerPriority3.ATOMIC
+    });
+    this.match = match3;
+    this.parse = parse3;
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_broadcast/tokenizer.ts
+import { BaseInlineTokenizer as BaseInlineTokenizer4, TokenizerPriority as TokenizerPriority4 } from "@yozora/core-tokenizer";
+
+// src/utils/markdown_parser/tokenizers/slack_broadcast/match.ts
+import { AsciiCodePoint as AsciiCodePoint4 } from "@yozora/character";
+
+// src/utils/markdown_parser/tokenizers/slack_broadcast/types.ts
+var SlackBroadcastType = "slack_broadcast";
+
+// src/utils/markdown_parser/tokenizers/slack_broadcast/match.ts
+var match4 = function(api) {
+  return { findDelimiter, processSingleDelimiter };
+  function* findDelimiter() {
+    var _a;
+    const nodePoints = api.getNodePoints();
+    const blockStartIndex = api.getBlockStartIndex();
+    const blockEndIndex = api.getBlockEndIndex();
+    const targets = ["@everyone", "@here", "@channel"];
+    const potentialDelimiters = [];
+    for (let i = blockStartIndex; i < blockEndIndex; ++i) {
+      if (((_a = nodePoints[i]) == null ? void 0 : _a.codePoint) === AsciiCodePoint4.AT_SIGN) {
+        for (const target of targets) {
+          if (matchTarget(nodePoints, i, target)) {
+            potentialDelimiters.push({
+              type: "full",
+              startIndex: i,
+              endIndex: i + target.length,
+              thickness: target.length
+            });
+            i += target.length - 1;
+            break;
+          }
+        }
+      }
+    }
+    let pIndex = 0;
+    let lastEndIndex = -1;
+    let currentDelimiter = null;
+    while (pIndex < potentialDelimiters.length) {
+      const [startIndex, endIndex] = yield currentDelimiter;
+      if (lastEndIndex === endIndex) {
+        if (currentDelimiter == null || currentDelimiter.startIndex >= startIndex)
+          continue;
+      }
+      lastEndIndex = endIndex;
+      for (; pIndex < potentialDelimiters.length; ++pIndex) {
+        const delimiter = potentialDelimiters[pIndex];
+        if (delimiter.startIndex >= startIndex) {
+          currentDelimiter = {
+            type: "full",
+            startIndex: delimiter.startIndex,
+            endIndex: delimiter.endIndex,
+            thickness: delimiter.thickness
+          };
+          break;
+        }
+      }
+    }
+  }
+  function matchTarget(nodePoints, startIndex, target) {
+    var _a;
+    for (let j = 0; j < target.length; ++j) {
+      if (((_a = nodePoints[startIndex + j]) == null ? void 0 : _a.codePoint) !== target.charCodeAt(j)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  function processSingleDelimiter(delimiter) {
+    const token = {
+      nodeType: SlackBroadcastType,
+      startIndex: delimiter.startIndex,
+      endIndex: delimiter.endIndex,
+      thickness: delimiter.thickness
+    };
+    return [token];
+  }
+};
+
+// src/utils/markdown_parser/tokenizers/slack_broadcast/parse.ts
+import { calcStringFromNodePoints as calcStringFromNodePoints4 } from "@yozora/character";
+var parse4 = function(api) {
+  return {
+    parse: (tokens) => tokens.map((token) => {
+      const nodePoints = api.getNodePoints();
+      let startIndex = token.startIndex + 1;
+      let endIndex = token.endIndex;
+      const value = calcStringFromNodePoints4(nodePoints, startIndex, endIndex);
+      const node = api.shouldReservePosition ? { type: SlackBroadcastType, position: api.calcPosition(token), value } : { type: SlackBroadcastType, value };
+      return node;
+    })
+  };
+};
+
+// src/utils/markdown_parser/tokenizers/slack_broadcast/tokenizer.ts
+var SlackBroadcastTokenizer = class extends BaseInlineTokenizer4 {
+  constructor(props = {}) {
+    super({
+      name: SlackBroadcastType,
+      priority: props.priority || TokenizerPriority4.ATOMIC
+    });
+    this.match = match4;
+    this.parse = parse4;
+  }
+};
+
+// src/utils/markdown_parser/parser.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var parser = new YozoraParser().unmountTokenizer("@yozora/tokenizer-list").useTokenizer(new SlackUserMentionTokenizer()).useTokenizer(new SlackChannelMentionTokenizer()).useTokenizer(new SlackUserGroupMentionTokenizer()).useTokenizer(new SlackBroadcastTokenizer());
+var markdown_parser = (markdown, options) => {
+  if (!markdown)
+    return null;
+  let text_string = markdown;
+  text_string = text_string.replace(/```/g, `
+\`\`\`
+`);
+  text_string = text_string.replace(new RegExp("(?<!\\*)\\*(?!\\*)([^*]+)\\*(?!\\*)", "g"), "**$1**");
+  text_string = text_string.replace(new RegExp("(?<!~)~(?!~)([^~]+)~(?!~)", "g"), "~~$1~~");
+  text_string = text_string.replace(/<([^|>]+)\|([^>]+)>/g, "[$2]($1)");
+  text_string = text_string.replace(/\n\n/g, "[[DOUBLE_LINE_BREAK]]");
+  text_string = text_string.replace(/<!here>/g, "@here");
+  text_string = text_string.replace(/<!everyone>/g, "@everyone");
+  text_string = text_string.replace(/<!channel>/g, "@channel");
+  const parsed_data = parser.parse(text_string);
+  const elements = parsed_data.children;
+  return /* @__PURE__ */ jsx14("div", { children: elements.map((element, i) => {
+    if (element.type === "paragraph")
+      return /* @__PURE__ */ jsx14(Paragraph, { element }, i);
+    if (element.type === "blockquote")
+      return /* @__PURE__ */ jsx14(Blockquote, { element }, i);
+    if (element.type === "code")
+      return /* @__PURE__ */ jsx14(Code, { element }, i);
+    return null;
+  }) });
 };
 
 // src/utils/is_accessory_stacked.ts
@@ -147,21 +795,21 @@ var is_accessory_stacked = (element) => {
 };
 
 // src/header.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var Header = (props) => {
   const { name, time } = props;
-  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) })
+  return /* @__PURE__ */ jsxs6("div", { className: "flex gap-[5px] items-center w-full slack_blocks_to_jsx--header", children: [
+    /* @__PURE__ */ jsx15("h3", { className: "font-black text-[15px]", children: name }),
+    /* @__PURE__ */ jsx15("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__ */ jsx15("div", { className: "text-xs text-black-secondary uppercase leading-[17.6px]", children: dateToTime(time) })
   ] });
 };
 
 // src/components/elements/image_element.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var ImageElement = (props) => {
   const { alt_text, image_url } = props.data;
-  return /* @__PURE__ */ jsx2("div", { className: "relative", children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx16("div", { className: "relative", children: /* @__PURE__ */ jsx16(
     "img",
     {
       src: image_url,
@@ -171,32 +819,8 @@ var ImageElement = (props) => {
   ) });
 };
 
-// src/store/useGlobalData.ts
-import { create } from "zustand";
-var useBearStore = create((set) => ({
-  users: [],
-  channels: [],
-  user_groups: [],
-  hooks: {},
-  setUsers: (users) => set({ users }),
-  setChannels: (channels) => set({ channels }),
-  setHooks: (hooks) => set({ hooks })
-}));
-var useGlobalData = () => {
-  const { users, channels, user_groups, hooks, setChannels, setUsers, setHooks } = useBearStore();
-  return {
-    users,
-    channels,
-    user_groups,
-    hooks,
-    setChannels,
-    setUsers,
-    setHooks
-  };
-};
-
 // src/components/composition_objects/text_object.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var TextObject = (props) => {
   const { type, text, emoji, verbatim = false } = props.data;
   const { className = "" } = props;
@@ -204,15 +828,15 @@ var TextObject = (props) => {
   let emoji_parsed = type == "mrkdwn" ? parseEmojis(text) : emoji === false ? text : parseEmojis(text);
   emoji_parsed = emoji_parsed.replace(/&gt;/g, "> ").replace(/&lt;/g, "<");
   if (type === "plain_text")
-    return /* @__PURE__ */ jsx3("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: false, users, channels, hooks }) });
-  return /* @__PURE__ */ jsx3("div", { className, children: slack_text_to_jsx(emoji_parsed, { markdown: true, users, channels, hooks }) });
+    return /* @__PURE__ */ jsx17("div", { className, children: markdown_parser(emoji_parsed, { markdown: false, users, channels, hooks }) });
+  return /* @__PURE__ */ jsx17("div", { className, children: markdown_parser(emoji_parsed, { markdown: true, users, channels, hooks }) });
 };
 
 // src/components/elements/button_element.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var ButtonElement = (props) => {
   const { text, action_id, url, style, accessibility_label } = props.data;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx18(
     "button",
     {
       type: "button",
@@ -224,14 +848,14 @@ var ButtonElement = (props) => {
           window.open(url, "_blank");
         }
       },
-      children: /* @__PURE__ */ jsx4(TextObject, { data: text })
+      children: /* @__PURE__ */ jsx18(TextObject, { data: text })
     }
   );
 };
 
 // src/components/elements/static_select_element.tsx
 import { useEffect, useState } from "react";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
 var StaticSelectElement = (props) => {
   const {
     action_id,
@@ -266,20 +890,20 @@ var StaticSelectElement = (props) => {
     const results = option.text.text.toLowerCase().includes(search.toLowerCase());
     return results;
   }, []);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs7(
     "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",
       tabIndex: 0,
       children: [
-        visible && /* @__PURE__ */ jsx5(
+        visible && /* @__PURE__ */ jsx19(
           "div",
           {
             className: "absolute top-[24px] -left-3 bg-white-secondary border border-gray-primary rounded-[6px] shadow-custom_shadow-1 w-[322px] max-w-[322px] max-h-[240px] overflow-auto py-3 z-20",
             id: "static_select_popup",
-            children: /* @__PURE__ */ jsx5("div", { className: "flex flex-col", children: filteredOptions.map((option, i) => {
-              return /* @__PURE__ */ jsx5(
+            children: /* @__PURE__ */ jsx19("div", { className: "flex flex-col", children: filteredOptions.map((option, i) => {
+              return /* @__PURE__ */ jsx19(
                 "div",
                 {
                   className: "h-7 px-6 flex items-center select-none cursor-pointer hover:bg-blue-primary hover:text-white-primary",
@@ -288,14 +912,14 @@ var StaticSelectElement = (props) => {
                     setVisible(false);
                     setSelected(option.value);
                   },
-                  children: /* @__PURE__ */ jsx5(TextObject, { data: option.text })
+                  children: /* @__PURE__ */ jsx19(TextObject, { data: option.text })
                 },
                 i
               );
             }) })
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx19(
           "input",
           {
             type: "text",
@@ -306,7 +930,7 @@ var StaticSelectElement = (props) => {
             "aria-label": "Select an item"
           }
         ),
-        !search && /* @__PURE__ */ jsx5("div", { className: "absolute w-full h-full pointer-events-none flex items-center text-black-primary.3", children: /* @__PURE__ */ jsx5(
+        !search && /* @__PURE__ */ jsx19("div", { className: "absolute w-full h-full pointer-events-none flex items-center text-black-primary.3", children: /* @__PURE__ */ jsx19(
           TextObject,
           {
             data: placeholder != null ? placeholder : {
@@ -315,7 +939,7 @@ var StaticSelectElement = (props) => {
             }
           }
         ) }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
@@ -324,7 +948,7 @@ var StaticSelectElement = (props) => {
             onClick: () => {
               setVisible((prev) => !prev);
             },
-            children: /* @__PURE__ */ jsx5(
+            children: /* @__PURE__ */ jsx19(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -333,7 +957,7 @@ var StaticSelectElement = (props) => {
                 strokeWidth: "3",
                 stroke: "currentColor",
                 className: "w-3 h-3",
-                children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })
+                children: /* @__PURE__ */ jsx19("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })
               }
             )
           }
@@ -345,7 +969,7 @@ var StaticSelectElement = (props) => {
 
 // src/components/elements/checkboxes_element.tsx
 import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 var CheckboxesElement = (props) => {
   const { action_id, options, focus_on_load, initial_options } = props.data;
   const [selected, setSelected] = useState2(
@@ -359,15 +983,15 @@ 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_element", children: /* @__PURE__ */ jsx6("fieldset", { className: "flex flex-col gap-2", children: options.map((option, i) => {
+  return /* @__PURE__ */ jsx20("div", { id: action_id, className: "my-1 flex w-full slack_blocks_to_jsx__checkboxes_element", children: /* @__PURE__ */ jsx20("fieldset", { className: "flex flex-col gap-2", children: options.map((option, i) => {
     const { text, value, description } = option;
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs8(
       "label",
       {
         className: "flex cursor-pointer items-baseline gap-3 select-none",
         htmlFor: `checkboxes-${action_id}-value-${value}-${i}`,
         children: [
-          /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(
             "input",
             {
               type: "checkbox",
@@ -383,9 +1007,9 @@ var CheckboxesElement = (props) => {
               }
             }
           ) }),
-          /* @__PURE__ */ jsxs3("div", { children: [
-            /* @__PURE__ */ jsx6(TextObject, { data: text }),
-            description && /* @__PURE__ */ jsx6(TextObject, { className: "text-black-secondary", data: description })
+          /* @__PURE__ */ jsxs8("div", { children: [
+            /* @__PURE__ */ jsx20(TextObject, { data: text }),
+            description && /* @__PURE__ */ jsx20(TextObject, { className: "text-black-secondary", data: description })
           ] })
         ]
       }
@@ -395,7 +1019,7 @@ var CheckboxesElement = (props) => {
 
 // src/components/elements/plain_text_input.tsx
 import { useEffect as useEffect3, useState as useState3 } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var PlaintTextInput = (props) => {
   const {
     action_id,
@@ -423,15 +1047,15 @@ var PlaintTextInput = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs9(
     "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(
+        !value && placeholder && /* @__PURE__ */ jsx21("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ jsx21(TextObject, { data: placeholder }) }),
+        !value && !placeholder && /* @__PURE__ */ jsx21("div", { className: "absolute left-2 top-2 text-black-primary.3", children: /* @__PURE__ */ jsx21(
           TextObject,
           {
             data: {
@@ -440,7 +1064,7 @@ var PlaintTextInput = (props) => {
             }
           }
         ) }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx21(
           "textarea",
           {
             value,
@@ -463,7 +1087,7 @@ var PlaintTextInput = (props) => {
 
 // src/components/elements/users_select_element.tsx
 import { useEffect as useEffect4, useState as useState4 } from "react";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 var UsersSelectElement = (props) => {
   const { action_id, focus_on_load, placeholder, type, confirm, initial_user, people } = props.data;
   const [visible, setVisible] = useState4(focus_on_load || false);
@@ -488,20 +1112,20 @@ var UsersSelectElement = (props) => {
     const name = person.name.toLowerCase();
     return name.includes(search_query);
   }, []);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs10(
     "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 slack_blocks_to_jsx__users_select_element",
       tabIndex: 0,
       children: [
-        visible && /* @__PURE__ */ jsx8(
+        visible && /* @__PURE__ */ jsx22(
           "div",
           {
             className: "absolute top-[24px] -left-3 bg-white-secondary border border-gray-primary rounded-[6px] shadow-custom_shadow-1 w-[322px] max-w-[322px] max-h-[240px] overflow-auto py-3 z-20",
             id: "static_select_popup",
-            children: /* @__PURE__ */ jsx8("div", { className: "flex flex-col", children: filteredOptions.map((option, i) => {
-              return /* @__PURE__ */ jsxs5(
+            children: /* @__PURE__ */ jsx22("div", { className: "flex flex-col", children: filteredOptions.map((option, i) => {
+              return /* @__PURE__ */ jsxs10(
                 "button",
                 {
                   className: "h-7 px-6 flex group items-center gap-2 select-none cursor-pointer hover:bg-blue-primary hover:text-white-primary",
@@ -512,7 +1136,7 @@ var UsersSelectElement = (props) => {
                     setSelected(option.id);
                   },
                   children: [
-                    option.image && /* @__PURE__ */ jsx8(
+                    option.image && /* @__PURE__ */ jsx22(
                       "img",
                       {
                         src: option.image,
@@ -520,8 +1144,8 @@ var UsersSelectElement = (props) => {
                         className: "w-5 h-5 rounded-md overflow-hidden"
                       }
                     ),
-                    !option.image && /* @__PURE__ */ jsx8("div", { className: "w-5 h-5 rounded-md overflow-hidden bg-gray-300 text-black-primary font-semibold flex items-center justify-center", children: /* @__PURE__ */ jsx8("span", { children: option.name[0] || "" }) }),
-                    /* @__PURE__ */ jsx8(
+                    !option.image && /* @__PURE__ */ jsx22("div", { className: "w-5 h-5 rounded-md overflow-hidden bg-gray-300 text-black-primary font-semibold flex items-center justify-center", children: /* @__PURE__ */ jsx22("span", { children: option.name[0] || "" }) }),
+                    /* @__PURE__ */ jsx22(
                       TextObject,
                       {
                         data: {
@@ -530,17 +1154,17 @@ var UsersSelectElement = (props) => {
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-                      option.online && /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+                      option.online && /* @__PURE__ */ jsx22(
                         "div",
                         {
                           className: `bg-green-secondary w-[9px] h-[9px] rounded-full shrink-0`
                         }
                       ),
-                      !option.online && /* @__PURE__ */ jsx8("div", { className: "w-[9px] h-[9px] rounded-full border-[1.5px] shrink-0 border-black-secondary group-hover:border-white-primary" }),
-                      option.sleeping && /* @__PURE__ */ jsx8("div", { className: "absolute -top-[5px] -right-[5px] h-[10px] w-[10px] rounded-full bg-white-secondary flex justify-center z-[10] text-[8px] leading-[8px] font-semibold group-hover:bg-blue-primary", children: "z" })
+                      !option.online && /* @__PURE__ */ jsx22("div", { className: "w-[9px] h-[9px] rounded-full border-[1.5px] shrink-0 border-black-secondary group-hover:border-white-primary" }),
+                      option.sleeping && /* @__PURE__ */ jsx22("div", { className: "absolute -top-[5px] -right-[5px] h-[10px] w-[10px] rounded-full bg-white-secondary flex justify-center z-[10] text-[8px] leading-[8px] font-semibold group-hover:bg-blue-primary", children: "z" })
                     ] }),
-                    /* @__PURE__ */ jsx8("div", { className: "text-black-primary group-hover:text-white-primary", children: option.name })
+                    /* @__PURE__ */ jsx22("div", { className: "text-black-primary group-hover:text-white-primary", children: option.name })
                   ]
                 },
                 i
@@ -548,7 +1172,7 @@ var UsersSelectElement = (props) => {
             }) })
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx22(
           "input",
           {
             type: "text",
@@ -560,7 +1184,7 @@ var UsersSelectElement = (props) => {
             "aria-label": "Select an item"
           }
         ),
-        !search && /* @__PURE__ */ jsx8("div", { className: "absolute w-full h-full pointer-events-none flex items-center text-black-primary.3", children: /* @__PURE__ */ jsx8(
+        !search && /* @__PURE__ */ jsx22("div", { className: "absolute w-full h-full pointer-events-none flex items-center text-black-primary.3", children: /* @__PURE__ */ jsx22(
           TextObject,
           {
             data: placeholder != null ? placeholder : {
@@ -569,7 +1193,7 @@ var UsersSelectElement = (props) => {
             }
           }
         ) }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx22(
           "button",
           {
             type: "button",
@@ -578,7 +1202,7 @@ var UsersSelectElement = (props) => {
             onClick: () => {
               setVisible((prev) => !prev);
             },
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx22(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -587,7 +1211,7 @@ var UsersSelectElement = (props) => {
                 strokeWidth: "3",
                 stroke: "currentColor",
                 className: "w-3 h-3",
-                children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })
+                children: /* @__PURE__ */ jsx22("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" })
               }
             )
           }
@@ -598,52 +1222,52 @@ var UsersSelectElement = (props) => {
 };
 
 // src/components/blocks/actions.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var Actions = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       id: block_id,
       className: "mb-2 text-primary flex w-full text-black-primary items-center slack_blocks_to_jsx__actions",
-      children: /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap", children: elements.map((element, i) => {
+      children: /* @__PURE__ */ jsx23("div", { className: "flex flex-wrap", children: elements.map((element, i) => {
         if (element.type === "button") {
-          return /* @__PURE__ */ jsx9("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ jsx9(ButtonElement, { data: element }) }, i);
+          return /* @__PURE__ */ jsx23("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ jsx23(ButtonElement, { data: element }) }, i);
         }
         if (element.type === "static_select") {
-          return /* @__PURE__ */ jsx9("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ jsx9(StaticSelectElement, { data: element }) }, i);
+          return /* @__PURE__ */ jsx23("div", { className: "mt-2 mr-2", children: /* @__PURE__ */ jsx23(StaticSelectElement, { data: element }) }, i);
         }
-        return /* @__PURE__ */ jsx9("div", { className: "mt-2 mr-2" }, i);
+        return /* @__PURE__ */ jsx23("div", { className: "mt-2 mr-2" }, i);
       }) })
     }
   );
 };
 
 // src/components/blocks/context.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var Context = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       id: block_id,
       className: "my-1 text-primary flex w-full text-black-primary flex-wrap items-center overflow-hidden slack_blocks_to_jsx__context",
       children: elements.slice(0, 10).map((element, i) => {
         if (element.type !== "image") {
-          return /* @__PURE__ */ jsx10("span", { className: "text-black-secondary text-small pr-3 flex items-center", children: /* @__PURE__ */ jsx10(TextObject, { data: element }) }, i);
+          return /* @__PURE__ */ jsx24("span", { className: "text-black-secondary text-small pr-3 flex items-center", children: /* @__PURE__ */ jsx24(TextObject, { data: element }) }, i);
         }
-        return /* @__PURE__ */ jsx10("span", { children: /* @__PURE__ */ jsx10(ImageElement, { data: element }) }, i);
+        return /* @__PURE__ */ jsx24("span", { children: /* @__PURE__ */ jsx24(ImageElement, { data: element }) }, i);
       })
     }
   );
 };
 
 // src/components/blocks/divider.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Divider = (props) => {
   const { data } = props;
   const { block_id } = data;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       id: block_id,
@@ -666,23 +1290,23 @@ var Header2 = (props) => {
 
 // src/components/blocks/image.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
 var Image = (props) => {
   const { block_id, alt_text, image_url, image_bytes, image_height, image_width } = props.data;
   const [showImage, setShowImage] = useState5(true);
-  return /* @__PURE__ */ jsxs6("div", { id: block_id, className: "my-2 flex flex-col gap-2 slack_blocks_to_jsx__image", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "text-black-secondary text-small flex gap-1 items-center", children: [
-      /* @__PURE__ */ jsxs6("span", { children: [
+  return /* @__PURE__ */ jsxs11("div", { id: block_id, className: "my-2 flex flex-col gap-2 slack_blocks_to_jsx__image", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "text-black-secondary text-small flex gap-1 items-center", children: [
+      /* @__PURE__ */ jsxs11("span", { children: [
         alt_text,
         image_bytes && ` (${Math.round(image_bytes / 1e3)} kB)`
       ] }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx26(
         "button",
         {
           type: "button",
           className: "w-[15px] h-[15px]",
           onClick: () => setShowImage((prev) => !prev),
-          children: /* @__PURE__ */ jsx12(
+          children: /* @__PURE__ */ jsx26(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -698,7 +1322,7 @@ var Image = (props) => {
               style: {
                 transform: showImage ? "rotate(0deg)" : "rotate(-90deg)"
               },
-              children: /* @__PURE__ */ jsx12(
+              children: /* @__PURE__ */ jsx26(
                 "path",
                 {
                   fill: "currentColor",
@@ -711,7 +1335,7 @@ var Image = (props) => {
         }
       )
     ] }),
-    showImage && /* @__PURE__ */ jsx12("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ jsx12(
+    showImage && /* @__PURE__ */ jsx26("div", { className: "rounded-md overflow-hidden relative max-w-max", children: /* @__PURE__ */ jsx26(
       "img",
       {
         src: image_url,
@@ -726,17 +1350,17 @@ var Image = (props) => {
 };
 
 // src/components/blocks/input.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
 var Input = (props) => {
   const { element: given_element, label, block_id, hint, optional, type } = props.data;
   const element = given_element ? getElementComponent(given_element) : null;
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       id: block_id,
       className: `mt-2 mb-1 text-primary slack_blocks_to_jsx__input flex w-full text-black-primary`,
-      children: /* @__PURE__ */ jsx13("div", { className: "grow", children: /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx27("div", { className: "grow", children: /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx27(
           TextObject,
           {
             data: {
@@ -747,11 +1371,11 @@ var Input = (props) => {
             }
           }
         ),
-        /* @__PURE__ */ jsxs7("div", { className: "mb-1 flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx13("div", { className: "relative shrink-0", children: element }),
-          (hint || given_element.type === "plain_text_input") && /* @__PURE__ */ jsxs7("div", { className: "text-black-secondary text-small flex gap-1", children: [
-            hint && /* @__PURE__ */ jsx13("div", { className: "inline", children: /* @__PURE__ */ jsx13(TextObject, { data: hint }) }),
-            given_element.type === "plain_text_input" && /* @__PURE__ */ jsx13("p", { children: "\u21B5 Please 'enter' to submit" })
+        /* @__PURE__ */ jsxs12("div", { className: "mb-1 flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx27("div", { className: "relative shrink-0", children: element }),
+          (hint || given_element.type === "plain_text_input") && /* @__PURE__ */ jsxs12("div", { className: "text-black-secondary text-small flex gap-1", children: [
+            hint && /* @__PURE__ */ jsx27("div", { className: "inline", children: /* @__PURE__ */ jsx27(TextObject, { data: hint }) }),
+            given_element.type === "plain_text_input" && /* @__PURE__ */ jsx27("p", { children: "\u21B5 Please 'enter' to submit" })
           ] })
         ] })
       ] }) })
@@ -760,25 +1384,30 @@ var Input = (props) => {
 };
 
 // src/components/blocks/rich_text/rich_text_list_wrapper.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var RichTextListWrapper = (props) => {
   const _a = props, { element, children } = _a, rest = __objRest(_a, ["element", "children"]);
   if (element.style === "bullet") {
-    return /* @__PURE__ */ jsx14("ul", __spreadProps(__spreadValues({}, rest), { children }));
+    return /* @__PURE__ */ jsx28("ul", __spreadProps(__spreadValues({}, rest), { children }));
   }
-  return /* @__PURE__ */ jsx14("ol", __spreadProps(__spreadValues({}, rest), { children }));
+  return /* @__PURE__ */ jsx28("ol", __spreadProps(__spreadValues({}, rest), { children }));
 };
 
 // src/components/blocks/rich_text/rich_text_section_broadcast.tsx
-import { jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
 var RichTextSectionBroadcast = (props) => {
   const { range, style } = props;
   const { hooks } = useGlobalData();
-  return /* @__PURE__ */ jsxs8(
-    "div",
+  if (range === "channel" && hooks.atChannel)
+    return /* @__PURE__ */ jsx29(Fragment7, { children: hooks.atChannel() });
+  if (range === "everyone" && hooks.atEveryone)
+    return /* @__PURE__ */ jsx29(Fragment7, { children: hooks.atEveryone() });
+  if (range === "here" && hooks.atHere)
+    return /* @__PURE__ */ jsx29(Fragment7, { children: hooks.atHere() });
+  return /* @__PURE__ */ jsxs13(
+    "span",
     {
       className: `
-        inline-block
         slack_broadcast
         slack_blocks_to_jsx__rich_text_section_element_broadcast
         ${(style == null ? void 0 : style.italic) ? "italic" : ""}
@@ -786,121 +1415,122 @@ var RichTextSectionBroadcast = (props) => {
         ${(style == null ? void 0 : style.bold) ? "font-medium" : ""}
       `,
       children: [
-        range === "channel" && (hooks.atChannel ? hooks.atChannel() : `@${range}`),
-        range === "everyone" && (hooks.atEveryone ? hooks.atEveryone() : `@${range}`),
-        range === "here" && (hooks.atHere ? hooks.atHere() : `@${range}`)
+        "@",
+        range
       ]
     }
   );
 };
 
 // src/components/blocks/rich_text/rich_text_section_channel.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx30, 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);
+  const channel = channels.find((u) => u.id === channel_id || u.name === channel_id);
   const label = (channel == null ? void 0 : channel.name) || channel_id;
-  return /* @__PURE__ */ jsx15(
-    "div",
+  if (hooks.channel)
+    return /* @__PURE__ */ jsx30(Fragment8, { children: hooks.channel(channel || { id: channel_id, name: label }) });
+  return /* @__PURE__ */ jsxs14(
+    "span",
     {
-      "data-channel-id": channel_id,
+      "data-channel-id": (channel == null ? void 0 : channel.id) || channel_id,
       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" : ""}
       `,
-      children: hooks.user ? hooks.user(
-        channel || {
-          id: channel_id,
-          name: label
-        }
-      ) : `#${label}`
+      children: [
+        "#",
+        label
+      ]
     }
   );
 };
 
 // src/components/blocks/rich_text/rich_text_section_emoji.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var RichTextSectionEmoji = (props) => {
   const { name } = props;
   const { hooks } = useGlobalData();
-  return /* @__PURE__ */ jsx16("span", { className: "slack_blocks_to_jsx__rich_text_section_element_emoji", children: hooks.emoji ? hooks.emoji(name) : parseEmojis(`:${name}:`) });
+  return /* @__PURE__ */ jsx31("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
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx32, 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);
+  const user = users.find((u) => u.id === user_id || u.name === user_id);
   const label = (user == null ? void 0 : user.name) || user_id;
-  return /* @__PURE__ */ jsx17(
-    "div",
+  if (hooks.user)
+    return /* @__PURE__ */ jsx32(Fragment9, { children: hooks.user(user || { id: user_id, name: label }) });
+  return /* @__PURE__ */ jsxs15(
+    "span",
     {
-      "data-user-id": user_id,
+      "data-user-id": (user == null ? void 0 : user.id) || user_id,
       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" : ""}
       `,
-      children: hooks.user ? hooks.user(
-        user || {
-          id: user_id,
-          name: label
-        }
-      ) : `@${label}`
+      children: [
+        "@",
+        label
+      ]
     }
   );
 };
 
 // src/components/blocks/rich_text/rich_text_section_user_group.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx33, 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);
+  const group = user_groups.find((u) => u.id === usergroup_id || u.name === usergroup_id);
   const label = (group == null ? void 0 : group.name) || usergroup_id;
-  return /* @__PURE__ */ jsx18(
-    "div",
+  if (hooks.usergroup)
+    return /* @__PURE__ */ jsx33(Fragment10, { children: hooks.usergroup(group || { id: usergroup_id, name: label }) });
+  return /* @__PURE__ */ jsxs16(
+    "span",
     {
-      "data-usergroup-id": usergroup_id,
+      "data-usergroup-id": (group == null ? void 0 : group.id) || usergroup_id,
       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" : ""}
       `,
-      children: hooks.usergroup ? hooks.usergroup(usergroup_id) : `@${label}`
+      children: [
+        "@",
+        label
+      ]
     }
   );
 };
 
 // src/components/blocks/rich_text/rich_text_section.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var RichTextSectionElement = (props) => {
   const { element } = props;
   if (element.type === "user")
-    return /* @__PURE__ */ jsx19(RichTextSectionUser, __spreadValues({}, element));
+    return /* @__PURE__ */ jsx34(RichTextSectionUser, __spreadValues({}, element));
   if (element.type === "channel")
-    return /* @__PURE__ */ jsx19(RichTextSectionChannel, __spreadValues({}, element));
+    return /* @__PURE__ */ jsx34(RichTextSectionChannel, __spreadValues({}, element));
   if (element.type === "broadcast")
-    return /* @__PURE__ */ jsx19(RichTextSectionBroadcast, __spreadValues({}, element));
+    return /* @__PURE__ */ jsx34(RichTextSectionBroadcast, __spreadValues({}, element));
   if (element.type === "emoji")
-    return /* @__PURE__ */ jsx19(RichTextSectionEmoji, __spreadValues({}, element));
+    return /* @__PURE__ */ jsx34(RichTextSectionEmoji, __spreadValues({}, element));
   if (element.type === "usergroup")
-    return /* @__PURE__ */ jsx19(RichTextSectionUserGroup, __spreadValues({}, element));
+    return /* @__PURE__ */ jsx34(RichTextSectionUserGroup, __spreadValues({}, element));
   if (element.type === "text") {
     const { text, style } = element;
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx34(
       "span",
       {
         className: `
@@ -916,7 +1546,7 @@ var RichTextSectionElement = (props) => {
   }
   if (element.type === "link") {
     const { url, style, text } = element;
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx34(
       "a",
       {
         target: "_blank",
@@ -938,21 +1568,21 @@ var RichTextSectionElement = (props) => {
 };
 
 // src/components/blocks/rich_text/rich_text.tsx
-import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
 var RichText = (props) => {
   const { elements, block_id } = props.data;
-  return /* @__PURE__ */ jsx20("div", { id: block_id, className: "slack_blocks_to_jsx__rich_text", children: elements.map((element, i) => {
-    return /* @__PURE__ */ jsx20(Element, { element }, `${element.type}__${i}`);
+  return /* @__PURE__ */ jsx35("div", { id: block_id, className: "slack_blocks_to_jsx__rich_text", children: elements.map((element, i) => {
+    return /* @__PURE__ */ jsx35(Element, { element }, `${element.type}__${i}`);
   }) });
 };
 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 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(
+    return /* @__PURE__ */ jsxs17("div", { className: "flex gap-2 slack_blocks_to_jsx__rich_text_list_element", children: [
+      border === 1 && /* @__PURE__ */ jsx35("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      /* @__PURE__ */ jsx35(RichTextListWrapper, { element, className: `list-none`, children: elements.map((el, i) => {
+        return /* @__PURE__ */ jsxs17(
           "li",
           {
             className: "flex",
@@ -960,22 +1590,22 @@ var Element = (props) => {
               marginLeft: indent ? indent > 5 ? 0 : indent * 28 + 6 + 28 : 0
             },
             children: [
-              style === "ordered" && /* @__PURE__ */ jsxs9("span", { className: "w-[22px] h-[22px] shrink-0 flex items-center justify-center", children: [
+              style === "ordered" && /* @__PURE__ */ jsxs17("span", { className: "w-[22px] h-[22px] shrink-0 flex items-center justify-center", children: [
                 i + 1,
                 "."
               ] }),
-              style === "bullet" && /* @__PURE__ */ jsxs9("span", { className: "w-[22px] h-[22px] shrink-0 flex items-center justify-center", children: [
-                (indent === void 0 || indent === 0 || indent === 3 || indent === 6) && /* @__PURE__ */ jsx20("span", { className: "w-1.5 h-1.5 rounded-full bg-current" }),
-                (indent === 1 || indent === 4 || indent === 7) && /* @__PURE__ */ jsx20("span", { className: "w-1.5 h-1.5 rounded-full border border-current" }),
-                (indent === 2 || indent === 5 || indent === 8) && /* @__PURE__ */ jsx20("span", { className: "w-1.5 h-1.5 rounded-[1.5px] bg-current" })
+              style === "bullet" && /* @__PURE__ */ jsxs17("span", { className: "w-[22px] h-[22px] shrink-0 flex items-center justify-center", children: [
+                (indent === void 0 || indent === 0 || indent === 3 || indent === 6) && /* @__PURE__ */ jsx35("span", { className: "w-1.5 h-1.5 rounded-full bg-current" }),
+                (indent === 1 || indent === 4 || indent === 7) && /* @__PURE__ */ jsx35("span", { className: "w-1.5 h-1.5 rounded-full border border-current" }),
+                (indent === 2 || indent === 5 || indent === 8) && /* @__PURE__ */ jsx35("span", { className: "w-1.5 h-1.5 rounded-[1.5px] bg-current" })
               ] }),
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx35(
                 "div",
                 {
                   style: {
                     marginLeft: 6
                   },
-                  children: /* @__PURE__ */ jsx20(Element, { element: el }, `${element.type}__${i}`)
+                  children: /* @__PURE__ */ jsx35(Element, { element: el }, `${element.type}__${i}`)
                 }
               )
             ]
@@ -987,9 +1617,9 @@ var Element = (props) => {
   }
   if (element.type === "rich_text_preformatted") {
     const { elements, border } = element;
-    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(
+    return /* @__PURE__ */ jsxs17("code", { className: "flex gap-2 w-full slack_blocks_to_jsx__rich_text_preformatted_element", children: [
+      border === 1 && /* @__PURE__ */ jsx35("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
+      /* @__PURE__ */ jsx35(
         "pre",
         {
           className: "p-2 rounded my-1 whitespace-pre-wrap bg-gray-secondary text-xs leading-[1.50001] border grow",
@@ -998,7 +1628,7 @@ var Element = (props) => {
             wordBreak: "normal"
           },
           children: elements.map((el, i) => {
-            return /* @__PURE__ */ jsx20(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
+            return /* @__PURE__ */ jsx35(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
           })
         }
       )
@@ -1006,41 +1636,41 @@ var Element = (props) => {
   }
   if (element.type === "rich_text_quote") {
     const { elements, border } = element;
-    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" }),
+    return /* @__PURE__ */ jsxs17("blockquote", { className: "flex gap-2 slack_blocks_to_jsx__rich_text_quote_element", children: [
+      border === 1 && /* @__PURE__ */ jsx35("div", { className: "w-1 rounded bg-gray-primary self-stretch" }),
       elements.map((el, i) => {
-        return /* @__PURE__ */ jsx20(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
+        return /* @__PURE__ */ jsx35(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
       })
     ] });
   }
   if (element.type === "rich_text_section") {
     const { elements } = element;
-    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}`);
+    return /* @__PURE__ */ jsx35("div", { className: "inline-block slack_blocks_to_jsx__rich_text_section_element", children: elements.map((el, i) => {
+      return /* @__PURE__ */ jsx35(RichTextSectionElement, { element: el }, `${el.type}__${i}`);
     }) });
   }
   return null;
 };
 
 // src/components/blocks/section.tsx
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
 var Section = (props) => {
   const { accessory, fields, text, block_id } = props.data;
   const element = accessory ? getElementComponent(accessory) : null;
   const is_stacked = accessory ? is_accessory_stacked(accessory) : false;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       id: block_id,
       className: `mt-2 mb-1 text-primary slack_blocks_to_jsx__section flex w-full text-black-primary ${is_stacked ? "flex-col" : ""}`,
       children: [
-        /* @__PURE__ */ jsx21("div", { className: "grow", children: /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3", children: [
-          text && /* @__PURE__ */ jsx21(TextObject, { data: text }),
-          fields && /* @__PURE__ */ jsx21("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
-            return /* @__PURE__ */ jsx21(TextObject, { data: field }, i);
+        /* @__PURE__ */ jsx36("div", { className: "grow", children: /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-3", children: [
+          text && /* @__PURE__ */ jsx36(TextObject, { data: text }),
+          fields && /* @__PURE__ */ jsx36("div", { className: "grid grid-col-2 w-full", children: fields.map((field, i) => {
+            return /* @__PURE__ */ jsx36(TextObject, { data: field }, i);
           }) })
         ] }) }),
-        element && is_stacked ? element : /* @__PURE__ */ jsx21("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
+        element && is_stacked ? element : /* @__PURE__ */ jsx36("div", { className: "ml-2 mb-1 relative shrink-0", children: element })
       ]
     }
   );
@@ -1053,41 +1683,41 @@ var Video = (props) => {
 };
 
 // src/components/index.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var getBlockComponent = (block) => {
   if (block.type === "divider")
-    return /* @__PURE__ */ jsx22(Divider, { data: block });
+    return /* @__PURE__ */ jsx37(Divider, { data: block });
   if (block.type === "section")
-    return /* @__PURE__ */ jsx22(Section, { data: block });
+    return /* @__PURE__ */ jsx37(Section, { data: block });
   if (block.type === "image")
-    return /* @__PURE__ */ jsx22(Image, { data: block });
+    return /* @__PURE__ */ jsx37(Image, { data: block });
   if (block.type === "context")
-    return /* @__PURE__ */ jsx22(Context, { data: block });
+    return /* @__PURE__ */ jsx37(Context, { data: block });
   if (block.type === "actions")
-    return /* @__PURE__ */ jsx22(Actions, { data: block });
+    return /* @__PURE__ */ jsx37(Actions, { data: block });
   if (block.type === "file")
-    return /* @__PURE__ */ jsx22(File, { data: block });
+    return /* @__PURE__ */ jsx37(File, { data: block });
   if (block.type === "header")
-    return /* @__PURE__ */ jsx22(Header2, { data: block });
+    return /* @__PURE__ */ jsx37(Header2, { data: block });
   if (block.type === "input")
-    return /* @__PURE__ */ jsx22(Input, { data: block });
+    return /* @__PURE__ */ jsx37(Input, { data: block });
   if (block.type === "video")
-    return /* @__PURE__ */ jsx22(Video, { data: block });
+    return /* @__PURE__ */ jsx37(Video, { data: block });
   if (block.type === "rich_text")
-    return /* @__PURE__ */ jsx22(RichText, { data: block });
+    return /* @__PURE__ */ jsx37(RichText, { data: block });
   return null;
 };
 var getElementComponent = (element) => {
   if (element.type === "button")
-    return /* @__PURE__ */ jsx22(ButtonElement, { data: element });
+    return /* @__PURE__ */ jsx37(ButtonElement, { data: element });
   if (element.type === "checkboxes")
-    return /* @__PURE__ */ jsx22(CheckboxesElement, { data: element });
+    return /* @__PURE__ */ jsx37(CheckboxesElement, { data: element });
   if (element.type === "image")
-    return /* @__PURE__ */ jsx22(ImageElement, { data: element });
+    return /* @__PURE__ */ jsx37(ImageElement, { data: element });
   if (element.type === "plain_text_input")
-    return /* @__PURE__ */ jsx22(PlaintTextInput, { data: element });
+    return /* @__PURE__ */ jsx37(PlaintTextInput, { data: element });
   if (element.type === "users_select")
-    return /* @__PURE__ */ jsx22(UsersSelectElement, { data: element });
+    return /* @__PURE__ */ jsx37(UsersSelectElement, { data: element });
   if (element.type === "datepicker")
     return null;
   if (element.type === "datetimepicker")
@@ -1126,15 +1756,15 @@ var getElementComponent = (element) => {
 };
 
 // src/block_wrapper.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var BlockWrapper = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx23("div", { className: "text-base slack_blocks_to_jsx--block_wrapper break-words font-normal", children });
+  return /* @__PURE__ */ jsx38("div", { className: "text-base slack_blocks_to_jsx--block_wrapper break-words font-normal", children });
 };
 
 // src/message.tsx
 import { useEffect as useEffect5 } from "react";
-import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs19 } from "react/jsx-runtime";
 var Message = (props) => {
   const {
     blocks,
@@ -1149,17 +1779,19 @@ var Message = (props) => {
     hooks,
     withoutWrapper = false
   } = props;
-  const { setChannels, setUsers, setHooks } = useGlobalData();
+  const { setChannels, setUsers, setHooks, setUserGroups } = useGlobalData();
   useEffect5(() => {
     if (data == null ? void 0 : data.users)
       setUsers(data.users);
     if (data == null ? void 0 : data.channels)
       setChannels(data.channels);
+    if (data == null ? void 0 : data.user_groups)
+      setUserGroups(data.user_groups);
     if (hooks)
       setHooks(hooks);
   }, [data, hooks]);
   if (withoutWrapper) {
-    return /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx39(
       "div",
       {
         id: "slack_blocks_to_jsx",
@@ -1169,18 +1801,18 @@ var Message = (props) => {
           const element = getBlockComponent(block);
           if (!element)
             return null;
-          return /* @__PURE__ */ jsx24(BlockWrapper, { children: element }, i);
+          return /* @__PURE__ */ jsx39(BlockWrapper, { children: element }, i);
         })
       }
     );
   }
-  return /* @__PURE__ */ jsx24("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsx39("div", { id: "slack_blocks_to_jsx", children: /* @__PURE__ */ jsxs19(
     "section",
     {
       className: `flex gap-2 w-full max-w-[600px] slack_blocks_to_jsx relative ${unstyled ? "styles_disabled" : "styles_enabled"} ${className}`,
       style,
       children: [
-        showBlockKitDebug && /* @__PURE__ */ jsx24(
+        showBlockKitDebug && /* @__PURE__ */ jsx39(
           "a",
           {
             target: "_blank",
@@ -1192,14 +1824,14 @@ var Message = (props) => {
             children: "Open in Slack Block Kit Builder"
           }
         ),
-        /* @__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", { className: "slack_blocks_to_jsx--blocks", children: blocks.map((block, i) => {
+        /* @__PURE__ */ jsx39("div", { className: "shrink-0", children: /* @__PURE__ */ jsx39("img", { src: logo, className: "w-9 h-9", alt: name }) }),
+        /* @__PURE__ */ jsxs19("div", { className: "flex flex-col w-full", children: [
+          /* @__PURE__ */ jsx39(Header, { name, time }),
+          /* @__PURE__ */ jsx39("div", { className: "slack_blocks_to_jsx--blocks", children: blocks.map((block, i) => {
             const element = getBlockComponent(block);
             if (!element)
               return null;
-            return /* @__PURE__ */ jsx24(BlockWrapper, { children: element }, i);
+            return /* @__PURE__ */ jsx39(BlockWrapper, { children: element }, i);
           }) })
         ] })
       ]