Merge pull request #4759 from lookapanda/message-syntax-highlighting

mxstbr · web-flow · commit 80fad2cbed43 · 2019-03-04T12:02:31.000+01:00
Message syntax highlighting
diff --git a/api/mutations/directMessageThread/createDirectMessageThread.js b/api/mutations/directMessageThread/createDirectMessageThread.js
@@ -17,12 +17,14 @@ import type { FileUpload } from 'shared/types';
 import { events } from 'shared/analytics';
 import { trackQueue } from 'shared/bull/queues';
 import { isAuthedResolver as requireAuth } from '../../utils/permissions';
+import { messageTypeObj } from 'shared/draft-utils/process-message-content';
+import type { MessageType } from 'shared/draft-utils/process-message-content';
 
 export type CreateDirectMessageThreadInput = {
   input: {
     participants: Array<string>,
     message: {
-      messageType: 'text' | 'media' | 'draftjs',
+      messageType: MessageType,
       threadType: string,
       content: {
         body: string,
@@ -80,15 +82,18 @@ export default requireAuth(
     }
 
     const handleStoreMessage = async message => {
-      if (message.messageType === 'text' || message.messageType === 'draftjs') {
+      if (
+        message.messageType === messageTypeObj.text ||
+        message.messageType === messageTypeObj.draftjs
+      ) {
         // once we have an id we can generate a proper message object
         const messageWithThread = {
           ...message,
           threadId,
         };
 
         return await storeMessage(messageWithThread, user.id);
-      } else if (message.messageType === 'media' && message.file) {
+      } else if (message.messageType === messageTypeObj.media && message.file) {
         let url;
         try {
           url = await uploadImage(message.file, 'threads', threadId);
diff --git a/api/mutations/message/addMessage.js b/api/mutations/message/addMessage.js
@@ -19,12 +19,16 @@ import {
 } from '../../utils/permissions';
 import { trackQueue, calculateThreadScoreQueue } from 'shared/bull/queues';
 import { validateRawContentState } from '../../utils/validate-draft-js-input';
+import processMessageContent, {
+  messageTypeObj,
+} from 'shared/draft-utils/process-message-content';
+import type { MessageType } from 'shared/draft-utils/process-message-content';
 
 type Input = {
   message: {
     threadId: string,
     threadType: 'story' | 'directMessageThread',
-    messageType: 'text' | 'media' | 'draftjs',
+    messageType: MessageType,
     content: {
       body: string,
     },
@@ -42,20 +46,15 @@ export const addMessage = async (
       ? events.MESSAGE_SENT_FAILED
       : events.DIRECT_MESSAGE_SENT_FAILED;
 
-  if (message.messageType === 'text') {
-    message.content.body = JSON.stringify(
-      convertToRaw(
-        stateFromMarkdown(message.content.body, {
-          parserOptions: {
-            breaks: true,
-          },
-        })
-      )
+  if (message.messageType === messageTypeObj.text) {
+    message.content.body = processMessageContent(
+      messageTypeObj.text,
+      message.content.body
     );
-    message.messageType = 'draftjs';
+    message.messageType = messageTypeObj.draftjs;
   }
 
-  if (message.messageType === 'draftjs') {
+  if (message.messageType === messageTypeObj.draftjs) {
     let body;
     try {
       body = JSON.parse(message.content.body);
@@ -107,7 +106,7 @@ export const addMessage = async (
 
   // construct the shape of the object to be stored in the db
   let messageForDb = Object.assign({}, message);
-  if (message.file && message.messageType === 'media') {
+  if (message.file && message.messageType === messageTypeObj.media) {
     const { file } = message;
 
     const fileMetaData = {
@@ -186,7 +185,7 @@ export default requireAuth(async (_: any, args: Input, ctx: GraphQLContext) => {
     }
   }
 
-  if (message.messageType === 'media' && !message.file) {
+  if (message.messageType === messageTypeObj.media && !message.file) {
     trackQueue.add({
       userId: user.id,
       event: eventFailed,
diff --git a/api/mutations/message/editMessage.js b/api/mutations/message/editMessage.js
@@ -1,6 +1,5 @@
 // @flow
 import type { GraphQLContext } from '../../';
-import { convertToRaw } from 'draft-js';
 import { stateFromMarkdown } from 'draft-js-import-markdown';
 import UserError from '../../utils/UserError';
 import {
@@ -17,11 +16,15 @@ import { events } from 'shared/analytics';
 import { isAuthedResolver as requireAuth } from '../../utils/permissions';
 import { trackQueue } from 'shared/bull/queues';
 import { validateRawContentState } from '../../utils/validate-draft-js-input';
+import processMessageContent, {
+  messageTypeObj,
+} from 'shared/draft-utils/process-message-content';
+import type { MessageType } from 'shared/draft-utils/process-message-content';
 
 type Args = {
   input: {
     id: string,
-    messageType?: 'draftjs' | 'text' | 'media',
+    messageType?: MessageType,
     content: {
       body: string,
     },
@@ -49,24 +52,16 @@ export default requireAuth(async (_: any, args: Args, ctx: GraphQLContext) => {
   }
 
   let body = content.body;
-  if (messageType === 'text') {
-    body = JSON.stringify(
-      convertToRaw(
-        stateFromMarkdown(body, {
-          parserOptions: {
-            breaks: true,
-          },
-        })
-      )
-    );
-    messageType = 'draftjs';
+  if (messageType === messageTypeObj.text) {
+    body = processMessageContent(messageTypeObj.text, body);
+    messageType = messageTypeObj.draftjs;
   }
   const eventFailed =
     message.threadType === 'story'
       ? events.MESSAGE_EDITED_FAILED
       : events.DIRECT_MESSAGE_EDITED_FAILED;
 
-  if (messageType === 'draftjs') {
+  if (messageType === messageTypeObj.draftjs) {
     let parsed;
     try {
       parsed = JSON.parse(body);
diff --git a/api/queries/directMessageThread/snippet.js b/api/queries/directMessageThread/snippet.js
@@ -3,6 +3,7 @@
 import type { GraphQLContext } from '../../';
 import { canViewDMThread } from '../../utils/permissions';
 import { toPlainText, toState } from 'shared/draft-utils';
+import { messageTypeObj } from 'shared/draft-utils/process-message-content';
 
 export default async (
   { id }: { id: string },
@@ -17,7 +18,7 @@ export default async (
   return loaders.directMessageSnippet.load(id).then(message => {
     if (!message) return 'No messages yet...';
     if (message.messageType === 'media') return '📷 Photo';
-    return message.messageType === 'draftjs'
+    return message.messageType === messageTypeObj.draftjs
       ? toPlainText(toState(JSON.parse(message.content.body)))
       : message.content.body;
   });
diff --git a/athena/queues/direct-message-notification.js b/athena/queues/direct-message-notification.js
@@ -20,6 +20,7 @@ import { toPlainText, toState } from 'shared/draft-utils';
 import { sendNewDirectMessageEmailQueue } from 'shared/bull/queues';
 import type { Job, DirectMessageNotificationJobData } from 'shared/bull/types';
 import { signUser, signMessage } from 'shared/imgix';
+import { messageTypeObj } from 'shared/draft-utils/process-message-content';
 
 export default async (job: Job<DirectMessageNotificationJobData>) => {
   const { message: incomingMessage, userId: currentUserId } = job.data;
@@ -115,7 +116,7 @@ export default async (job: Job<DirectMessageNotificationJobData>) => {
         ...signedMessage,
         content: {
           body:
-            signedMessage.messageType === 'draftjs'
+            signedMessage.messageType === messageTypeObj.draftjs
               ? toPlainText(toState(JSON.parse(signedMessage.content.body)))
               : signedMessage.content.body,
         },
diff --git a/athena/queues/moderationEvents/message.js b/athena/queues/moderationEvents/message.js
@@ -8,6 +8,7 @@ import { toState, toPlainText } from 'shared/draft-utils';
 import getPerspectiveScore from './perspective';
 import { _adminSendToxicContentEmailQueue } from 'shared/bull/queues';
 import type { Job, AdminToxicMessageJobData } from 'shared/bull/types';
+import { messageTypeObj } from 'shared/draft-utils/process-message-content';
 
 export default async (job: Job<AdminToxicMessageJobData>) => {
   debug('new job for admin message moderation');
@@ -16,7 +17,7 @@ export default async (job: Job<AdminToxicMessageJobData>) => {
   } = job;
 
   const text =
-    message.messageType === 'draftjs'
+    message.messageType === messageTypeObj.draftjs
       ? toPlainText(toState(JSON.parse(message.content.body)))
       : message.content.body;
 
diff --git a/athena/queues/new-message-in-thread/index.js b/athena/queues/new-message-in-thread/index.js
@@ -24,6 +24,7 @@ import { getMessageById } from '../../models/message';
 import { sendMentionNotificationQueue } from 'shared/bull/queues';
 import type { MessageNotificationJobData, Job } from 'shared/bull/types';
 import type { DBMessage } from 'shared/types';
+import { messageTypeObj } from 'shared/draft-utils/process-message-content';
 
 export default async (job: Job<MessageNotificationJobData>) => {
   const { message: incomingMessage } = job.data;
@@ -95,7 +96,7 @@ export default async (job: Job<MessageNotificationJobData>) => {
 
   // convert the message body to be checked for mentions
   const body =
-    incomingMessage.messageType === 'draftjs'
+    incomingMessage.messageType === messageTypeObj.draftjs
       ? toPlainText(toState(JSON.parse(incomingMessage.content.body)))
       : incomingMessage.content.body;
 
diff --git a/shared/clients/draft-js/message/renderer.js b/shared/clients/draft-js/message/renderer.js
@@ -1,5 +1,7 @@
 // @flow
 import React from 'react';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import { getStringElements } from '../utils/getStringElements';
 import mentionsDecorator from '../mentions-decorator/index';
 import linksDecorator from '../links-decorator/index';
 import { Line, Paragraph, BlockQuote } from 'src/components/message/style';
@@ -25,11 +27,29 @@ const messageRenderer = {
       children.map((child, index) => (
         <Paragraph key={keys[index] || index}>{child}</Paragraph>
       )),
-    'code-block': (children: Array<Node>, { keys }: KeysObj) => (
-      <Line key={keys.join('|')}>
-        {children.map((child, i) => [child, <br key={i} />])}
-      </Line>
-    ),
+    'code-block': (children: Array<any>, { keys, data }: KeysObj) => {
+      return children.map((child, index) => (
+        <Highlight
+          {...defaultProps}
+          code={getStringElements(child).join('\n')}
+          language={Array.isArray(data) && data[0].language}
+          theme={undefined}
+          key={keys[index]}
+        >
+          {({ className, style, tokens, getLineProps, getTokenProps }) => (
+            <Line className={className} style={style}>
+              {tokens.map((line, i) => (
+                <div {...getLineProps({ line, key: i })}>
+                  {line.map((token, key) => (
+                    <span {...getTokenProps({ token, key })} />
+                  ))}
+                </div>
+              ))}
+            </Line>
+          )}
+        </Highlight>
+      ));
+    },
     blockquote: (children: Array<Node>, { keys }: KeysObj) =>
       children.map((child, index) => (
         <BlockQuote key={keys[index] || index}>{child}</BlockQuote>
diff --git a/shared/clients/draft-js/thread/renderer.js b/shared/clients/draft-js/thread/renderer.js
@@ -7,6 +7,8 @@ import {
   EmbedContainer,
   EmbedComponent,
 } from 'src/components/rich-text-editor/style';
+import { getStringElements } from '../utils/getStringElements';
+import { hasStringElements } from '../utils/hasStringElements';
 import mentionsDecorator from '../mentions-decorator';
 import linksDecorator from '../links-decorator';
 import type { Node } from 'react';
@@ -54,30 +56,6 @@ const Embed = (props: EmbedProps) => {
   }
 };
 
-const hasStringElements = (arr: Array<mixed> | mixed) => {
-  if (Array.isArray(arr)) return arr.some(elem => hasStringElements(elem));
-
-  return typeof arr === 'string';
-};
-
-const getStringElements = (arr: Array<mixed>): Array<string> => {
-  return arr
-    .map(elem => {
-      if (Array.isArray(elem)) return getStringElements(elem);
-      if (typeof elem === 'string') return elem;
-      // Handle React elements being passed as array elements
-      // $FlowIssue
-      if (elem.props && elem.props.children)
-        return getStringElements(elem.props.children);
-      return null;
-    })
-    .filter(Boolean)
-    .reduce((final, elem) => {
-      if (Array.isArray(elem)) return [...final, ...elem];
-      return [...final, elem];
-    }, []);
-};
-
 const threadRenderer = {
   inline: {
     BOLD: (children: Array<Node>, { key }: KeyObj) => (
diff --git a/shared/clients/draft-js/utils/getStringElements.js b/shared/clients/draft-js/utils/getStringElements.js
@@ -0,0 +1,18 @@
+// @flow
+export const getStringElements = (arr: Array<mixed>): Array<string> => {
+  return arr
+    .map(elem => {
+      if (Array.isArray(elem)) return getStringElements(elem);
+      if (typeof elem === 'string') return elem;
+      // Handle React elements being passed as array elements
+      // $FlowIssue
+      if (elem.props && elem.props.children)
+        return getStringElements(elem.props.children);
+      return null;
+    })
+    .filter(Boolean)
+    .reduce((final, elem) => {
+      if (Array.isArray(elem)) return [...final, ...elem];
+      return [...final, elem];
+    }, []);
+};
diff --git a/shared/clients/draft-js/utils/hasStringElements.js b/shared/clients/draft-js/utils/hasStringElements.js
@@ -0,0 +1,6 @@
+//@flow
+export const hasStringElements = (arr: Array<mixed> | mixed) => {
+  if (Array.isArray(arr)) return arr.some(elem => hasStringElements(elem));
+
+  return typeof arr === 'string';
+};
diff --git a/shared/draft-utils/process-message-content.js b/shared/draft-utils/process-message-content.js
@@ -0,0 +1,58 @@
+// @flow
+import { stateFromMarkdown } from 'draft-js-import-markdown';
+import { convertFromRaw, convertToRaw, EditorState } from 'draft-js';
+import { addEmbedsToEditorState } from './add-embeds-to-draft-js';
+
+export const messageTypeObj = {
+  text: 'text',
+  media: 'media',
+  draftjs: 'draftjs',
+};
+export type MessageType = $Keys<typeof messageTypeObj>;
+
+export default (type: MessageType, body: string): string => {
+  let newBody = body;
+  if (type === messageTypeObj.text) {
+    // workaround react-mentions bug by replacing @[username] with @username
+    // @see withspectrum/spectrum#4587
+    newBody = newBody.replace(/@\[([a-z0-9_-]+)\]/g, '@$1');
+    newBody = JSON.stringify(
+      convertToRaw(
+        stateFromMarkdown(newBody, {
+          customBlockFn: elem => {
+            if (elem.nodeName !== 'PRE') return;
+
+            const code = elem.childNodes.find(node => node.nodeName === 'CODE');
+            if (!code) return;
+
+            const className = code.attributes.find(
+              ({ name }) => name === 'class'
+            );
+            if (!className) return;
+
+            const lang = className.value.replace('lang-', '');
+
+            return {
+              type: null,
+              data: {
+                language: lang,
+              },
+            };
+          },
+          parserOptions: {
+            breaks: true,
+          },
+        })
+      )
+    );
+  }
+
+  // Add automatic embeds to body
+  try {
+    return JSON.stringify(addEmbedsToEditorState(JSON.parse(newBody)));
+    // Ignore errors during automatic embed detection
+  } catch (err) {
+    console.error(err);
+    return newBody;
+  }
+};
diff --git a/shared/graphql/mutations/message/sendMessage.js b/shared/graphql/mutations/message/sendMessage.js
diff --git a/shared/notification-to-text.js b/shared/notification-to-text.js
diff --git a/shared/types.js b/shared/types.js
diff --git a/src/components/message/view.js b/src/components/message/view.js
