Better markdown replies (#3613)

* replay changes

* fix ts

* add better markdown suppoprt

* fix currentCommentId

* dont show hr

* not allow images in public sandboxes

Co-authored-by: Siddharth Kshetrapal <[email protected]>
Co-authored-by: Christian Alfoni <[email protected]>

Author: christianalfoni

packages/app/src/app/overmind/namespaces/editor/state.ts

@@ -88,7 +88,7 @@ type State = {
 
 export const state: State = {
   comments: {},
-  currentCommentId: null,
+  currentCommentId: null, // '5e5961e0c277a40fef1e391b',
   currentComment: ({ comments, currentSandbox, currentCommentId }) => {
     if (!currentSandbox || !comments[currentSandbox.id] || !currentCommentId) {
       return null;

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Code.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Highlight, { defaultProps } from 'prism-react-renderer';
+import { Element } from '@codesandbox/components';
+import css from '@styled-system/css';
+import nightOwlLight from 'prism-react-renderer/themes/nightOwlLight';
+
+import nightOwl from 'prism-react-renderer/themes/nightOwl';
+import { withTheme } from 'styled-components';
+
+export const Code = withTheme(({ value, language, theme }) => (
+  <>
+    <Highlight
+      {...defaultProps}
+      code={value}
+      language={language || 'js'}
+      theme={theme.vscodeTheme.type === 'dark' ? nightOwlLight : nightOwl}
+    >
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <Element
+          as="pre"
+          paddingX={4}
+          paddingY={2}
+          marginY={2}
+          className={className}
+          style={style}
+          css={css({
+            whiteSpace: 'pre-wrap',
+          })}
+        >
+          {tokens.map((line, i) => (
+            <Element {...getLineProps({ line, key: i })}>
+              {line.map((token, key) => (
+                <Element as="span" {...getTokenProps({ token, key })} />
+              ))}
+            </Element>
+          ))}
+        </Element>
+      )}
+    </Highlight>
+  </>
+));

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Comment.tsx

@@ -1,25 +1,88 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-import { Text, Element } from '@codesandbox/components';
+import { useOvermind } from 'app/overmind';
+import { Text, Element, Link } from '@codesandbox/components';
+import css from '@styled-system/css';
 import { Code } from './Code';
 
-export const Comment = ({ source }) => (
-  <Element paddingX={4} paddingBottom={6}>
-    <ReactMarkdown
-      source={source}
-      renderers={{
-        text: ({ children }) => (
-          <Text variant="muted" size={13}>
-            {children}
-          </Text>
-        ),
-        heading: ({ children }) => (
-          <Text variant="muted" size={13}>
-            {children}
-          </Text>
-        ),
-        code: props => <Code {...props} />,
-      }}
-    />
-  </Element>
-);
+export const Comment = ({ source }) => {
+  const { state } = useOvermind();
+  const privateSandbox =
+    state.editor.currentSandbox.privacy === 1 ||
+    state.editor.currentSandbox.privacy === 2;
+
+  const image = props =>
+    privateSandbox ? (
+      <img
+        {...props}
+        alt={props.alt}
+        css={css({
+          maxWidth: '100%',
+        })}
+      />
+    ) : (
+      <Text marginY={4} variant="muted" block align="center">
+        You cannot use images in comments on public sandboxes.
+      </Text>
+    );
+
+  return (
+    <Element
+      paddingX={4}
+      paddingBottom={6}
+      css={css({
+        'ul, ol': {
+          paddingLeft: 0,
+          fontSize: 13,
+        },
+        'ol li': {
+          counterIncrement: 'counter',
+        },
+        'ol li::before': {
+          color: 'mutedForeground',
+          content: "counter(counter) '. '",
+        },
+        li: {
+          listStyle: 'none',
+        },
+        'li:before': {
+          content: "'•'",
+          color: 'mutedForeground',
+          paddingRight: '0.5em',
+        },
+      })}
+    >
+      <ReactMarkdown
+        source={source}
+        renderers={{
+          text: ({ children }) => (
+            <Text variant="muted" size={13}>
+              {children}
+            </Text>
+          ),
+          heading: ({ children }) => (
+            <Text block variant="muted" size={13}>
+              {children}
+            </Text>
+          ),
+          code: props => <Code {...props} />,
+          link: props => <Link {...props}>{props.children}</Link>,
+          linkReference: props => <Link {...props}>{props.children}</Link>,
+          image: props => image(props),
+          imageReference: props => image(props),
+          thematicBreak: () => null,
+          inlineCode: props => (
+            <Element
+              as="span"
+              css={css({ backgroundColor: 'mutedForeground' })}
+            >
+              <Text variant="danger" as="code">
+                {props.children}
+              </Text>
+            </Element>
+          ),
+        }}
+      />
+    </Element>
+  );
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx

@@ -15,75 +15,16 @@ import {
 import { useOvermind } from 'app/overmind';
 import { Comment } from './Comment';
 
-// // eslint-disable-next-line no-var
-// var markdown = `
-// I am a comment
-
-// Here's that code block:
-
-// \`\`\`js
-// const total = [1, 2, 3, 4, 5]
-//   .map(num => num * 3)
-//   .filter(num => num < 9)
-//   .reduce((sum, num) => sum += num, 0)
-
-// \`\`\`
-
-// Neat, eh?`;
-
-// const defaultComment = {
-//   id: '5e59204cc277a40fef1e3916',
-//   isResolved: false,
-//   originalMessage: {
-//     id: 'gier2bk769d03r',
-//     content: markdown,
-//     author: {
-//       id: '740dca51-993d-4b0e-b8cb-0e46acada86b',
-//       avatarUrl: 'https://avatars0.githubusercontent.com/u/1863771?v=4',
-//       username: 'siddharthkp',
-//     },
-//   },
-//   replies: [
-//     {
-//       id: 'a\n-SaraVieira',
-//       content: 'A reply',
-//       author: {
-//         avatarUrl: 'https://avatars0.githubusercontent.com/u/1051509?v=4',
-//         badges: [{ id: 'patron_2', name: 'Patron II', visible: true }],
-//         curatorAt: '2018-11-25T18:51:34Z',
-//         email: '[email protected]',
-//         experiments: { containerLsp: null },
-//         id: '8d35d7c1-eecb-4aad-87b0-c22d30d12081',
-//         integrations: {
-//           github: null,
-//           zeit: { token: 'pqshnGwa4t3y7RxMzfHnoSW1' },
-//         },
-//         name: 'Sara Vieira',
-//         sendSurvey: false,
-//         subscription: {
-//           amount: 10,
-//           cancelAtPeriodEnd: false,
-//           duration: 'monthly',
-//           plan: 'patron',
-//           since: '2018-03-01T16:00:18Z',
-//         },
-//         username: 'SaraVieira',
-//       },
-//     },
-//   ],
-//   insertedAt: '2020-02-28T14:14:36.859Z',
-//   updatedAt: '2020-02-28T14:14:36.859Z',
-// };
 export const CommentDialog = props =>
   ReactDOM.createPortal(<Dialog {...props} />, document.body);
 
 export const Dialog = props => {
   const { state, actions } = useOvermind();
   const [value, setValue] = useState('');
   const comment = state.editor.currentComment;
-  const [position, setPosition] = React.useState({
-    x: 200,
-    y: 100,
+  const [position, setPosition] = useState({
+    x: props.x || 200,
+    y: props.y || 100,
   });
 
   const closeDialog = () => actions.editor.selectComment(null);