feat: Add a Preview Feature to check the text after formatting it.

package.json

@@ -25,6 +25,7 @@
     "typescript": "^5.1.3"
   },
   "dependencies": {
-    "dompurify": "^3.1.6"
+    "dompurify": "^3.1.6",
+    "marked": "latest"
   }
 }

packages/react/src/store/messageStore.js

@@ -9,6 +9,7 @@ const useMessageStore = create((set, get) => ({
   filtered: false,
   editMessage: {},
   quoteMessage: [],
+  previewMessage: [],
   messageToReport: NaN,
   showReportMessage: false,
   isRecordingMessage: false,
@@ -87,6 +88,14 @@ const useMessageStore = create((set, get) => ({
     })),
 
   clearQuoteMessages: () => set({ quoteMessage: [] }),
+  addPreviewMessage: (previewMessage) =>
+    set((state) => ({
+      previewMessage: [...state.previewMessage, previewMessage],
+    })),
+  removePreviewMessage: (previewMessage) =>
+    set((state) => ({
+      previewMessage: state.previewMessage.filter((i) => i !== previewMessage),
+    })),
   setMessageToReport: (messageId) =>
     set(() => ({ messageToReport: messageId })),
   toggleShowReportMessage: () => {

packages/react/src/views/ChatInput/ChatInput.js

@@ -34,6 +34,7 @@ import useShowCommands from '../../hooks/useShowCommands';
 import useSearchMentionUser from '../../hooks/useSearchMentionUser';
 import formatSelection from '../../lib/formatSelection';
 import { parseEmoji } from '../../lib/emoji';
+import PreviewMessage from '../PreviewMessage/PreviewMessage';
 
 const ChatInput = ({ scrollToBottom }) => {
   const { styleOverrides, classNames } = useComponentOverrides('ChatInput');
@@ -93,6 +94,7 @@ const ChatInput = ({ scrollToBottom }) => {
     editMessage,
     setEditMessage,
     quoteMessage,
+    previewMessage,
     isRecordingMessage,
     upsertMessage,
     replaceMessage,
@@ -102,6 +104,7 @@ const ChatInput = ({ scrollToBottom }) => {
     editMessage: state.editMessage,
     setEditMessage: state.setEditMessage,
     quoteMessage: state.quoteMessage,
+    previewMessage: state.previewMessage,
     isRecordingMessage: state.isRecordingMessage,
     upsertMessage: state.upsertMessage,
     replaceMessage: state.replaceMessage,
@@ -460,6 +463,13 @@ const ChatInput = ({ scrollToBottom }) => {
               <QuoteMessage message={message} key={index} />
             ))}
         </div>
+        <div>
+          {previewMessage &&
+            previewMessage.length > 0 &&
+            previewMessage.map((message, index) => (
+              <PreviewMessage message={message} key={index} />
+            ))}
+        </div>
         {editMessage.msg || editMessage.attachments || isChannelReadOnly ? (
           <ChannelState
             status={

packages/react/src/views/ChatInput/ChatInputFormattingToolbar.js

@@ -22,7 +22,15 @@ const ChatInputFormattingToolbar = ({
   inputRef,
   triggerButton,
   optionConfig = {
-    surfaceItems: ['emoji', 'formatter', 'link', 'audio', 'video', 'file'],
+    surfaceItems: [
+      'emoji',
+      'formatter',
+      'link',
+      'audio',
+      'video',
+      'file',
+      'preview',
+    ],
     formatters: ['bold', 'italic', 'strike', 'code', 'multiline'],
   },
 }) => {
@@ -40,6 +48,8 @@ const ChatInputFormattingToolbar = ({
     (state) => state.isRecordingMessage
   );
 
+  const addPreviewMessage = useMessageStore((state) => state.addPreviewMessage);
+
   const [isEmojiOpen, setEmojiOpen] = useState(false);
   const [isInsertLinkOpen, setInsertLinkOpen] = useState(false);
 
@@ -127,6 +137,20 @@ const ChatInputFormattingToolbar = ({
         </ActionButton>
       </Tooltip>
     ),
+    preview: (
+      <Tooltip text="Preview" position="top" key="preview">
+        <ActionButton
+          square
+          ghost
+          disabled={isRecordingMessage}
+          onClick={() => {
+            addPreviewMessage(messageRef.current.value);
+          }}
+        >
+          <Icon name="eyeopen" size="1.25rem" />
+        </ActionButton>
+      </Tooltip>
+    ),
     formatter: formatters
       .map((name) => formatter.find((item) => item.name === name))
       .map((item) => (

packages/react/src/views/PreviewMessage/PreviewMessage.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  useComponentOverrides,
+  useTheme,
+  Box,
+  ActionButton,
+  Icon,
+} from '@embeddedchat/ui-elements';
+import { marked } from 'marked';
+import Dompurify from 'dompurify';
+import getPreviewMessageStyles from './PreviewMessage.styles';
+import { useMessageStore } from '../../store';
+
+const PreviewMessage = ({ className = '', style = {}, message }) => {
+  const { theme } = useTheme();
+  const styles = getPreviewMessageStyles(theme);
+  const { classNames, styleOverrides } = useComponentOverrides('QuoteMessage');
+  const removePreviewMessage = useMessageStore(
+    (state) => state.removePreviewMessage
+  );
+
+  const formatMessage = () => {
+    const markedText = marked.parse(message);
+    const sanitizedText = Dompurify.sanitize(markedText);
+    return <div dangerouslySetInnerHTML={{ __html: sanitizedText }} />;
+  };
+
+  return (
+    <Box
+      className={`ec-quote-msg ${className} ${classNames}`}
+      style={{ ...styleOverrides, ...style }}
+      css={styles.messageContainer}
+    >
+      <Box css={styles.actionBtn}>
+        <ActionButton
+          ghost
+          onClick={() => removePreviewMessage(message)}
+          size="small"
+        >
+          <Icon name="cross" size="0.75rem" />
+        </ActionButton>
+      </Box>
+      <Box css={styles.message}>{formatMessage()}</Box>
+    </Box>
+  );
+};
+
+export default PreviewMessage;

packages/react/src/views/PreviewMessage/PreviewMessage.styles.js

@@ -0,0 +1,43 @@
+import { css } from '@emotion/react';
+
+const getPreviewMessageStyles = (theme) => {
+  const styles = {
+    messageContainer: css`
+      margin: 0.2rem 2rem;
+      position: relative;
+      font-size: 0.85rem;
+      background-color: ${theme.colors.background};
+      color: ${theme.colors.foreground};
+      padding: 0.5rem;
+      z-index: 1200;
+      border: 1px solid ${theme.colors.border};
+      border-radius: ${theme.radius};
+      max-width: 100%;
+      box-sizing: border-box;
+    `,
+
+    avatarContainer: css`
+      padding: 0.25rem;
+      display: flex;
+      gap: 0.5rem;
+    `,
+
+    message: css`
+      padding: 0.25rem;
+      overflow-wrap: break-word;
+      word-break: break-word;
+      white-space: normal;
+      width: 100%;
+    `,
+
+    actionBtn: css`
+      position: absolute;
+      top: 0.75rem;
+      right: 0.75rem;
+    `,
+  };
+
+  return styles;
+};
+
+export default getPreviewMessageStyles;

yarn.lock

@@ -15206,6 +15206,7 @@ __metadata:
     esbuild: ^0.17.19
     husky: ^9.0.11
     lerna: ^6.6.2
+    marked: latest
     typescript: ^5.1.3
   languageName: unknown
   linkType: soft
@@ -22443,6 +22444,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"marked@npm:latest":
+  version: 15.0.6
+  resolution: "marked@npm:15.0.6"
+  bin:
+    marked: bin/marked.js
+  checksum: 5218363ac4f6cd1893318ad8b1efacdc8a416f87da28cbcffb419d97602168935249351a3fbe2c59221e7e9955862c6a038ec00f19bf4a6d7e8e0e2e9643d154
+  languageName: node
+  linkType: hard
+
 "material-colors@npm:^1.2.1":
   version: 1.2.6
   resolution: "material-colors@npm:1.2.6"