fix(markups): render wrapped user mentions as plain text

packages/markups/babel.config.js

@@ -11,4 +11,16 @@ module.exports = {
     '@babel/preset-react',
     '@emotion/babel-preset-css-prop',
   ],
+  env: {
+    test: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            modules: 'commonjs',
+          },
+        ],
+      ],
+    },
+  },
 };

packages/markups/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.[jt]sx?$': 'babel-jest',
+  },
+};

packages/markups/package.json

@@ -16,6 +16,7 @@
         "prebuild": "rimraf dist",
         "build": "rollup -c --context=window --environment NODE_ENV:production",
         "watch": "rollup -c --watch --context=window",
+        "test": "jest",
         "test:lint": "eslint src/**/*.js",
         "format": "prettier --write 'src/' ",
         "format:check": "prettier --check 'src/' ",

packages/markups/src/elements/InlineElements.js

@@ -12,6 +12,19 @@ import LinkSpan from './LinkSpan';
 import UserMention from '../mentions/UserMention';
 import TimestampElement from './TimestampElement';
 
+const isPlainTextToken = (token) => token?.type === 'PLAIN_TEXT';
+
+const isWrappedMention = (items, index) => {
+  const previous = items[index - 1];
+  const next = items[index + 1];
+
+  if (!isPlainTextToken(previous) || !isPlainTextToken(next)) {
+    return false;
+  }
+
+  return /\(\s*$/.test(previous.value) && /^\s*\)/.test(next.value);
+};
+
 const InlineElements = ({ contents }) =>
   contents.map((content, index) => {
     switch (content.type) {
@@ -34,6 +47,9 @@ const InlineElements = ({ contents }) =>
         return <ChannelMention key={index} mention={content.value.value} />;
 
       case 'MENTION_USER':
+        if (isWrappedMention(contents, index)) {
+          return <PlainSpan key={index} contents={`@${content.value.value}`} />;
+        }
         return <UserMention key={index} contents={content.value} />;
 
       case 'EMOJI':

packages/markups/src/elements/InlineElements.test.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import InlineElements from './InlineElements';
+
+jest.mock('./ItalicSpan', () => ({
+  __esModule: true,
+  default: () => <span data-kind="italic" />,
+}));
+jest.mock('./StrikeSpan', () => ({
+  __esModule: true,
+  default: () => <span data-kind="strike" />,
+}));
+jest.mock('./BoldSpan', () => ({
+  __esModule: true,
+  default: () => <span data-kind="bold" />,
+}));
+jest.mock('./CodeElement', () => ({
+  __esModule: true,
+  default: () => <span data-kind="inline-code" />,
+}));
+jest.mock('./Emoji', () => ({
+  __esModule: true,
+  default: () => <span data-kind="emoji" />,
+}));
+jest.mock('../mentions/ChannelMention', () => ({
+  __esModule: true,
+  default: () => <span data-kind="mention-channel" />,
+}));
+jest.mock('./ColorElement', () => ({
+  __esModule: true,
+  default: () => <span data-kind="color" />,
+}));
+jest.mock('./LinkSpan', () => ({
+  __esModule: true,
+  default: () => <span data-kind="link" />,
+}));
+jest.mock('./TimestampElement', () => ({
+  __esModule: true,
+  default: () => <span data-kind="timestamp" />,
+}));
+
+jest.mock('./PlainSpan', () => ({
+  __esModule: true,
+  default: ({ contents }) => <span data-kind="plain">{contents}</span>,
+}));
+
+jest.mock('../mentions/UserMention', () => ({
+  __esModule: true,
+  default: ({ contents }) => (
+    <span data-kind="mention-user">{contents.value}</span>
+  ),
+}));
+
+describe('InlineElements mention rendering', () => {
+  test('renders wrapped user mentions as plain text', () => {
+    const contents = [
+      { type: 'PLAIN_TEXT', value: '(' },
+      { type: 'MENTION_USER', value: { type: 'PLAIN_TEXT', value: 'test' } },
+      { type: 'PLAIN_TEXT', value: ')' },
+    ];
+
+    const html = renderToStaticMarkup(<InlineElements contents={contents} />);
+
+    expect(html).toContain('data-kind="plain">@test</span>');
+    expect(html).not.toContain('data-kind="mention-user">test</span>');
+  });
+
+  test('renders wrapped mentions with spaces as plain text', () => {
+    const contents = [
+      { type: 'PLAIN_TEXT', value: '( ' },
+      { type: 'MENTION_USER', value: { type: 'PLAIN_TEXT', value: 'test' } },
+      { type: 'PLAIN_TEXT', value: ' )' },
+    ];
+
+    const html = renderToStaticMarkup(<InlineElements contents={contents} />);
+
+    expect(html).toContain('data-kind="plain">@test</span>');
+    expect(html).not.toContain('data-kind="mention-user">test</span>');
+  });
+
+  test('keeps normal mentions styled when not wrapped', () => {
+    const contents = [
+      { type: 'PLAIN_TEXT', value: 'hello ' },
+      { type: 'MENTION_USER', value: { type: 'PLAIN_TEXT', value: 'test' } },
+      { type: 'PLAIN_TEXT', value: ' world' },
+    ];
+
+    const html = renderToStaticMarkup(<InlineElements contents={contents} />);
+
+    expect(html).toContain('data-kind="mention-user">test</span>');
+    expect(html).not.toContain('data-kind="plain">@test</span>');
+  });
+});