feat: add search term highlighting in search messages

packages/markups/src/elements/BoldSpan.js

@@ -4,6 +4,7 @@ import PlainSpan from './PlainSpan';
 import ItalicSpan from './ItalicSpan';
 import StrikeSpan from './StrikeSpan';
 import LinkSpan from './LinkSpan';
+import HighlightSpan from './HighlightSpan';
 
 const BoldSpan = ({ contents }) => (
   <strong>
@@ -30,6 +31,9 @@ const BoldSpan = ({ contents }) => (
             />
           );
 
+        case 'HIGHLIGHT_TEXT':
+          return <HighlightSpan key={index} contents={content.value} />;
+
         default:
           return null;
       }

packages/markups/src/elements/CodeElement.js

@@ -1,15 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import PlainSpan from './PlainSpan';
+import HighlightSpan from './HighlightSpan';
 import { InlineElementsStyles } from './elements.styles';
 
 const CodeElement = ({ contents }) => {
   const styles = InlineElementsStyles();
-  return (
-    <code css={styles.inlineElement}>
-      <PlainSpan contents={contents.value} />
-    </code>
-  );
+
+  // Handle highlighted content (array of tokens) or plain string
+  const renderContents = () => {
+    if (contents.hasHighlight && Array.isArray(contents.value)) {
+      return contents.value.map((token, index) => {
+        switch (token.type) {
+          case 'HIGHLIGHT_TEXT':
+            return <HighlightSpan key={index} contents={token.value} />;
+          case 'PLAIN_TEXT':
+          default:
+            return <PlainSpan key={index} contents={token.value} />;
+        }
+      });
+    }
+    return <PlainSpan contents={contents.value} />;
+  };
+
+  return <code css={styles.inlineElement}>{renderContents()}</code>;
 };
 
 export default CodeElement;

packages/markups/src/elements/HighlightSpan.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+
+const highlightStyle = css`
+  background-color: yellow;
+  color: black;
+`;
+
+const HighlightSpan = ({ contents }) => (
+  <mark css={highlightStyle}>{contents}</mark>
+);
+
+export default HighlightSpan;
+
+HighlightSpan.propTypes = {
+  contents: PropTypes.string,
+};

packages/markups/src/elements/InlineElements.js

@@ -11,6 +11,7 @@ import ColorElement from './ColorElement';
 import LinkSpan from './LinkSpan';
 import UserMention from '../mentions/UserMention';
 import TimestampElement from './TimestampElement';
+import HighlightSpan from './HighlightSpan';
 
 const InlineElements = ({ contents }) =>
   contents.map((content, index) => {
@@ -58,6 +59,9 @@ const InlineElements = ({ contents }) =>
       case 'TIMESTAMP':
         return <TimestampElement key={index} contents={content.value} />;
 
+      case 'HIGHLIGHT_TEXT':
+        return <HighlightSpan key={index} contents={content.value} />;
+
       default:
         return null;
     }

packages/markups/src/elements/ItalicSpan.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import PlainSpan from './PlainSpan';
 import BoldSpan from './BoldSpan';
 import StrikeSpan from './StrikeSpan';
+import HighlightSpan from './HighlightSpan';
 
 const ItalicSpan = ({ contents }) => (
   <em>
@@ -17,6 +18,9 @@ const ItalicSpan = ({ contents }) => (
         case 'BOLD':
           return <BoldSpan key={index} contents={content.value} />;
 
+        case 'HIGHLIGHT_TEXT':
+          return <HighlightSpan key={index} contents={content.value} />;
+
         default:
           return null;
       }

packages/markups/src/elements/LinkSpan.js

@@ -5,6 +5,7 @@ import PlainSpan from './PlainSpan';
 import StrikeSpan from './StrikeSpan';
 import ItalicSpan from './ItalicSpan';
 import BoldSpan from './BoldSpan';
+import HighlightSpan from './HighlightSpan';
 
 const getBaseURI = () => {
   if (document.baseURI) {
@@ -48,6 +49,9 @@ const LinkSpan = ({ href, label }) => {
         case 'BOLD':
           return <BoldSpan key={index} contents={content.value} />;
 
+        case 'HIGHLIGHT_TEXT':
+          return <HighlightSpan key={index} contents={content.value} />;
+
         default:
           return null;
       }

packages/markups/src/elements/StrikeSpan.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import PlainSpan from './PlainSpan';
 import BoldSpan from './BoldSpan';
 import ItalicSpan from './ItalicSpan';
+import HighlightSpan from './HighlightSpan';
 
 const StrikeSpan = ({ contents }) => (
   <del>
@@ -17,6 +18,9 @@ const StrikeSpan = ({ contents }) => (
         case 'BOLD':
           return <BoldSpan key={index} contents={content.value} />;
 
+        case 'HIGHLIGHT_TEXT':
+          return <HighlightSpan key={index} contents={content.value} />;
+
         default:
           return null;
       }