Merge pull request #74 from themashcodee/claude/pensive-goldberg-DV4yC

Add emoji interpolation to markdown blocks

Author: StephenTangCook

.github/workflows/main.yml

@@ -21,4 +21,4 @@ jobs:
           cache: "pnpm"
 
       - run: pnpm install --frozen-lockfile
-      - run: pnpm run lint && pnpm run build
+      - run: pnpm run lint && pnpm run build && pnpm test

.npmignore

@@ -3,6 +3,7 @@ scripts
 RELEASING.md
 node_modules
 src
+test
 .env
 .prettierrc
 CHANELOG.md

KNOWLEDGE_BASE.md

@@ -325,7 +325,7 @@ All block components live in `src/components/blocks/`. 17 block types are suppor
 | ---------- | -------------------- | --------------------------------------------------------------------------------------------------------------- |
 | `context`  | `context.tsx`        | Up to 10 mixed text + image elements                                                                            |
 | `table`    | `table.tsx`          | `cells: Cell[][]`, optional `size`; cell alignment; bordered                                                    |
-| `markdown` | `markdown_block.tsx` | Renders **standard** GFM via `react-markdown` + `remark-gfm`; tables, task lists, code blocks, syntax highlight |
+| `markdown` | `markdown_block.tsx` | Renders **standard** GFM via `react-markdown` + `remark-gfm`; tables, task lists, code blocks, syntax highlight. Emoji shortcodes are interpolated by the `remarkSlackEmoji` plugin, reusing the same `<SlackEmoji>` component (and `hooks.emoji`) as the mrkdwn parser |
 
 ### 4.5 AI/workflow blocks
 
@@ -752,6 +752,7 @@ slack blocks to jsx library/
 │       ├── is_accessory_stacked.ts
 │       ├── merge_classes.ts
 │       ├── numbers.ts
+│       ├── remark_slack_emoji.ts        # emoji rule for the markdown block (react-markdown/mdast)
 │       ├── sanitize_for_slack.ts
 │       ├── emojis/{parser.ts, list.ts}
 │       └── markdown_parser/

package.json

@@ -25,7 +25,7 @@
     "dev:css": "postcss ./src/style.css -o ./dist/style.css --watch",
     "dev": "tsup --watch",
     "lint": "tsc",
-    "test": "tsc",
+    "test": "node --test \"test/**/*.test.mjs\"",
     "release": "node scripts/release.mjs",
     "release:dry": "node scripts/release.mjs --dry-run",
     "release:beta": "node scripts/release.mjs prerelease --preid=beta",

playground/src/fixtures.ts

@@ -206,4 +206,36 @@ export const FIXTURES: Fixture[] = [
       },
     ],
   },
+  {
+    id: "markdown-block",
+    label: "Markdown block",
+    blocks: [
+      {
+        type: "markdown",
+        text: [
+          "## :rocket: Deploy — api v2.4.0",
+          "",
+          "Out to production :tada: Thanks for the reviews this week :clap::skin-tone-3:",
+          "",
+          "**What changed**",
+          "",
+          "- Carousel and card blocks :sparkles:",
+          "- Faster cold starts :zap:",
+          "- Dark mode contrast fixes :bug:",
+          "",
+          "**Rollout checklist**",
+          "",
+          "- [x] Migrations applied",
+          "- [x] Smoke tests passing :white_check_mark:",
+          "- [ ] Changelog updated :thumbsup:",
+          "",
+          "Roll back with `kubectl rollout undo deploy/api` if error rates spike :warning:",
+          "",
+          "```bash",
+          "curl -s https://api.example.com/healthz | jq .status",
+          "```",
+        ].join("\n"),
+      },
+    ],
+  },
 ];

src/components/blocks/markdown_block.tsx

@@ -1,11 +1,25 @@
-import Markdown from "react-markdown";
+import Markdown, { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { MarkdownBlock } from "../../types";
+import { SlackEmoji } from "../../utils/markdown_parser/sub_elements/slack_emoji";
+import { remarkSlackEmoji, SLACK_EMOJI_TAG } from "../../utils/remark_slack_emoji";
 
 type MarkdownBlockProps = {
   data: MarkdownBlock;
 };
 
+// Renders the placeholder emitted by remarkSlackEmoji through the same
+// <SlackEmoji> component the mrkdwn parser uses (so custom/standard/alias/
+// skin-tone emoji match). The emoji name comes from the hast node properties.
+const MarkdownEmoji = ({ node }: { node?: { properties?: { name?: unknown } } }) => {
+  const name = typeof node?.properties?.name === "string" ? node.properties.name : "";
+  return <SlackEmoji element={{ type: "slack_emoji", value: name }} />;
+};
+
+// react-markdown's `Components` type only allows known HTML tag names as keys,
+// so the custom `slack-emoji` element is registered through a cast.
+const emojiComponents = { [SLACK_EMOJI_TAG]: MarkdownEmoji } as Components;
+
 export const MarkdownBlockComponent = (props: MarkdownBlockProps) => {
   const { text, block_id } = props.data;
 
@@ -18,8 +32,9 @@ export const MarkdownBlockComponent = (props: MarkdownBlockProps) => {
       className="mt-2 mb-1 text-primary text-black-primary dark:text-dark-text-primary slack_blocks_to_jsx__markdown_block"
     >
       <Markdown
-        remarkPlugins={[remarkGfm]}
+        remarkPlugins={[remarkGfm, remarkSlackEmoji]}
         components={{
+          ...emojiComponents,
           h1: ({ children }) => (
             <h1 className="text-header font-semibold text-black-primary dark:text-dark-text-primary mb-0.5">
               {children}

src/utils/remark_slack_emoji.ts

@@ -0,0 +1,94 @@
+// remark/mdast plugin for the `markdown` block (react-markdown + remark-gfm),
+// which — unlike every other block type — has no emoji rule. It splits text
+// nodes on `:shortcode:` into `SLACK_EMOJI_TAG` placeholders that markdown_block
+// renders via the same <SlackEmoji> component the mrkdwn parser uses, so custom,
+// standard, alias and skin-tone emoji all match. Code spans/blocks are never split.
+
+// Tag name emitted into the hast tree via `data.hName`. markdown_block.tsx maps
+// this through react-markdown's `components` prop.
+export const SLACK_EMOJI_TAG = "slack-emoji";
+
+// Mirrors the characters accepted by the mrkdwn slack_emoji tokenizer
+// (see utils/markdown_parser/tokenizers/slack_emoji/parse.ts).
+const EMOJI_REGEX = /:([a-zA-Z0-9_\-+']+):/g;
+
+// Minimal mdast typings — `@types/mdast` is not a direct dependency of this
+// package, so we describe only the shape this plugin touches.
+interface MdastNode {
+  type: string;
+  value?: string;
+  children?: MdastNode[];
+  data?: {
+    hName?: string;
+    hProperties?: Record<string, unknown>;
+  } & Record<string, unknown>;
+}
+
+// Split a text node's value into alternating text / emoji nodes. Returns null
+// when the value contains no emoji shortcode (so the original node is kept).
+function splitOnEmoji(value: string): MdastNode[] | null {
+  EMOJI_REGEX.lastIndex = 0;
+  let match = EMOJI_REGEX.exec(value);
+  if (!match) return null;
+
+  const nodes: MdastNode[] = [];
+  let lastIndex = 0;
+
+  while (match) {
+    const full = match[0] ?? "";
+    const name = match[1] ?? "";
+    const start = match.index;
+
+    if (start > lastIndex) {
+      nodes.push({ type: "text", value: value.slice(lastIndex, start) });
+    }
+
+    nodes.push({
+      type: "slackEmoji",
+      value: full,
+      data: { hName: SLACK_EMOJI_TAG, hProperties: { name } },
+    });
+
+    lastIndex = start + full.length;
+    match = EMOJI_REGEX.exec(value);
+  }
+
+  if (lastIndex < value.length) {
+    nodes.push({ type: "text", value: value.slice(lastIndex) });
+  }
+
+  return nodes;
+}
+
+function transform(node: MdastNode): void {
+  const children = node.children;
+  if (!children) return;
+
+  const next: MdastNode[] = [];
+  for (const child of children) {
+    // Never interpolate emoji inside code spans / fenced code blocks.
+    if (child.type === "code" || child.type === "inlineCode") {
+      next.push(child);
+      continue;
+    }
+
+    if (child.type === "text" && child.value) {
+      const replacement = splitOnEmoji(child.value);
+      if (replacement) {
+        next.push(...replacement);
+        continue;
+      }
+    }
+
+    transform(child);
+    next.push(child);
+  }
+
+  node.children = next;
+}
+
+export function remarkSlackEmoji() {
+  return (tree: MdastNode): void => {
+    transform(tree);
+  };
+}

test/markdown_emoji.test.mjs

@@ -0,0 +1,85 @@
+// Emoji interpolation in the `markdown` block — it renders through react-markdown
+// (not the mrkdwn parser) and previously showed `:shortcode:` as literal text.
+// These lock in parity with mrkdwn blocks: standard, aliases, skin tones, custom
+// emoji via hooks, and code-span exclusion. Run against the built dist/ via Node's
+// built-in runner (no test framework needed); CI builds before testing.
+
+import test from "node:test";
+import assert from "node:assert/strict";
+import React from "react";
+import ReactDOMServer from "react-dom/server";
+import { Message } from "../dist/index.mjs";
+
+const render = (text, hooks) =>
+  ReactDOMServer.renderToStaticMarkup(
+    React.createElement(Message, {
+      logo: "logo.png",
+      name: "Tester",
+      theme: "light",
+      hooks,
+      blocks: [{ type: "markdown", text }],
+    }),
+  );
+
+test("standard shortcodes render as unicode", () => {
+  const out = render(":tada:");
+  assert.match(out, /🎉/);
+  // the literal shortcode must be gone — that was the bug.
+  assert.doesNotMatch(out, /:tada:/);
+});
+
+test("surrounding text and multiple emoji are preserved", () => {
+  const out = render("ship it :tada: nice :smile:");
+  assert.match(out, /ship it/);
+  assert.match(out, /nice/);
+  assert.match(out, /🎉/);
+  assert.match(out, /😄/);
+});
+
+test("shortcode aliases resolve via the fallback map", () => {
+  // `thumbsup` isn't a node-emoji name; it resolves through the library's
+  // missing-emoji map, exactly like it does in mrkdwn blocks.
+  assert.match(render(":thumbsup:"), /👍/);
+});
+
+test("skin-tone modifiers render", () => {
+  const out = render(":wave::skin-tone-3:");
+  assert.match(out, /👋/);
+  assert.match(out, /🏼/);
+});
+
+test("custom emoji go through hooks.emoji while standard emoji fall back to parse()", () => {
+  const hooks = {
+    emoji: ({ name }, parse) => {
+      if (name === "blob-dance") {
+        return React.createElement("img", {
+          className: "custom-emoji",
+          "data-name": name,
+          src: `https://cdn.example.com/${name}.png`,
+          alt: name,
+        });
+      }
+      return parse({ name });
+    },
+  };
+
+  const out = render("standard :tada: custom :blob-dance:", hooks);
+  // custom name → consumer-provided image
+  assert.match(out, /custom-emoji/);
+  assert.match(out, /data-name="blob-dance"/);
+  assert.doesNotMatch(out, /:blob-dance:/);
+  // standard name → unicode via the parse() fallback
+  assert.match(out, /🎉/);
+});
+
+test("emoji inside code spans are left untouched", () => {
+  const out = render("`:tada:`");
+  assert.match(out, /:tada:/);
+  assert.doesNotMatch(out, /🎉/);
+});
+
+test("emoji inside fenced code blocks are left untouched", () => {
+  const out = render("```\n:tada:\n```");
+  assert.match(out, /:tada:/);
+  assert.doesNotMatch(out, /🎉/);
+});