Merge pull request #18604 from ramonlsouza/issue-18594

Modify chat to use markdown

bigbluebutton-html5/imports/api/common/server/helpers.js

@@ -36,6 +36,19 @@ export const parseMessage = (message) => {
   return parsedMessage;
 };
 
+export const textToMarkdown = (message) => {
+  let parsedMessage = message || '';
+  parsedMessage = parsedMessage.trim();
+
+  // replace url with markdown links
+  const urlRegex = /(?<!\]\()https?:\/\/([\w-]+\.)+\w{1,6}([/?=&#.]?[\w-]+)*/gm;
+  parsedMessage = parsedMessage.replace(urlRegex, '[$&]($&)');
+
+  // replace new lines with markdown new lines
+  parsedMessage = parsedMessage.replace(/\n\r?/g, '  \n');
+
+  return parsedMessage;
+};
 
 export const spokeTimeoutHandles = {};
 export const clearSpokeTimeout = (meetingId, userId) => {

bigbluebutton-html5/imports/api/group-chat-msg/server/methods/sendGroupChatMsg.js

@@ -2,7 +2,7 @@ import { Meteor } from 'meteor/meteor';
 import { check } from 'meteor/check';
 import RedisPubSub from '/imports/startup/server/redis';
 
-import { extractCredentials, parseMessage } from '/imports/api/common/server/helpers';
+import { extractCredentials, textToMarkdown } from '/imports/api/common/server/helpers';
 import Logger from '/imports/startup/server/logger';
 
 export default function sendGroupChatMsg(chatId, message) {
@@ -17,8 +17,7 @@ export default function sendGroupChatMsg(chatId, message) {
     check(requesterUserId, String);
     check(chatId, String);
     check(message, Object);
-    const parsedMessage = parseMessage(message.message);
-    message.message = parsedMessage;
+    message.message = textToMarkdown(message.message);
 
     const payload = {
       msg: message,

bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-form/component.tsx

@@ -5,7 +5,6 @@ import { isChatEnabled } from '/imports/ui/services/features';
 import ClickOutside from '/imports/ui/components/click-outside/component';
 import TextareaAutosize from 'react-autosize-textarea';
 import Styled from './styles';
-import { escapeHtml } from '/imports/utils/string-utils';
 import { checkText } from 'smile2emoji';
 import deviceInfo from '/imports/utils/deviceInfo';
 import { usePreviousValue } from '/imports/ui/components/utils/hooks';
@@ -189,7 +188,7 @@ const ChatMessageForm: React.FC<ChatMessageFormProps> = ({
       return;
     }
 
-    handleSendMessage(escapeHtml(msg), chatId);
+    handleSendMessage(msg, chatId);
     setMessage('');
     updateUnreadMessages(chatId, '');
     setHasErrors(false);

bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/component.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import ReactMarkdown from 'react-markdown';
 import Styled from './styles';
 interface ChatMessageTextContentProps {
   text: string;
@@ -9,11 +10,19 @@ const ChatMessageTextContent: React.FC<ChatMessageTextContentProps> = ({
   text,
   emphasizedMessage,
 }) => {
+  // @ts-ignore - temporary, while meteor exists in the project
+  const { allowedElements } = Meteor.settings.public.chat;
+
   return (
-    <Styled.ChatMessage
-      emphasizedMessage={emphasizedMessage}
-      dangerouslySetInnerHTML={{ __html: text }}
-    />
+    <Styled.ChatMessage emphasizedMessage={emphasizedMessage}>
+      <ReactMarkdown
+        linkTarget="_blank"
+        allowedElements={allowedElements}
+        unwrapDisallowed={true}
+      >
+        {text}
+      </ReactMarkdown>
+    </Styled.ChatMessage>
   );
 };
 

bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-list/page/chat-message/message-content/text-content/styles.ts

@@ -5,6 +5,7 @@ export const ChatMessage = styled.div`
   flex: 1;
   display: flex;
   flex-flow: row;
+  flex-direction: column;
   color: ${colorText};
   word-break: break-word;
   ${({ emphasizedMessage }) =>
@@ -12,6 +13,15 @@ export const ChatMessage = styled.div`
     `
     font-weight: bold;
   `}
+
+  & img {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  & p {
+    margin: 0;
+  }
 `;
 
 export default {

bigbluebutton-html5/package.json

@@ -79,6 +79,7 @@
     "react-dropzone": "^7.0.1",
     "react-intl": "^6.1.0",
     "react-loading-skeleton": "^3.0.3",
+    "react-markdown": "^8.0.7",
     "react-modal": "^3.15.1",
     "react-player": "^2.10.0",
     "react-tabs": "^4.2.1",
@@ -99,8 +100,8 @@
     "subscriptions-transport-ws": "^0.11.0",
     "tippy.js": "^5.1.3",
     "use-context-selector": "^1.3.7",
-    "wasm-feature-detect": "^1.5.1",
     "uuid": "^9.0.0",
+    "wasm-feature-detect": "^1.5.1",
     "webrtc-adapter": "^8.1.1",
     "winston": "^3.7.2",
     "yaml": "^2.2.2"

bigbluebutton-html5/private/config/settings.yml

@@ -595,6 +595,7 @@ public:
       frequentEmojiSortOnClick: false
     # e.g.: disableEmojis: ['1F595','1F922']
     disableEmojis: []
+    allowedElements: ['a', 'code', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li', 'ol', 'ul', 'p', 'strong']
   userReaction:
     enabled: true
     expire: 60