more things (codesandbox#3859)

* more things

* Revert schema.graphql

Author: SaraVieira

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

@@ -21,6 +21,7 @@ export const AddComment: React.FC<Props> = ({ onSubmit }) => {
   // Form elements submit on Enter, except Textarea :)
   const submitOnEnter = event => {
     if (event.keyCode === ENTER && !event.shiftKey) {
+      event.preventDefault();
       submit(event);
     }
   };

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

@@ -74,17 +74,6 @@ export const Comment = React.memo<{
         itemScope
         itemType="http://schema.org/Comment"
       >
-        <Link
-          variant="muted"
-          css={css({
-            paddingBottom: 2,
-            display: 'block',
-          })}
-        >
-          {comment.references[0]
-            ? comment.references[0].metadata.path
-            : 'General'}
-        </Link>
         <Stack align="flex-start" justify="space-between" marginBottom={4}>
           <AvatarBlock comment={comment} />
           <Stack align="center">
@@ -126,6 +115,26 @@ export const Comment = React.memo<{
             </Menu>
           </Stack>
         </Stack>
+        {comment.references[0] && (
+          <Link
+            variant="muted"
+            css={css({
+              marginTop: -2,
+              opacity: 0.6,
+              paddingBottom: 2,
+              display: 'block',
+              transition: 'all ease',
+              transitionDuration: theme => theme.speeds[1],
+
+              ':hover': {
+                opacity: 1,
+                color: 'sidebar.foreground',
+              },
+            })}
+          >
+            {comment.references[0].metadata.path}
+          </Link>
+        )}
         <Element
           as="p"
           marginY={0}

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

@@ -2,50 +2,61 @@ 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 { useOvermind } from 'app/overmind';
 import { withTheme } from 'styled-components';
+import { makeTheme } from './makeTheme/index';
+
+export const Code = withTheme(({ value, language, theme }) => {
+  const { state } = useOvermind();
 
-export const Code = withTheme(({ value, language, theme }) => (
-  <>
-    {value ? (
-      <Highlight
-        {...defaultProps}
-        code={value}
-        language={language || 'js'}
-        theme={theme.vscodeTheme.type === 'dark' ? nightOwl : nightOwlLight}
-      >
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <Element
-            as="pre"
-            paddingX={4}
-            paddingY={2}
-            marginY={2}
-            className={className}
-            style={style}
-            css={css({
-              fontSize: 3,
-              whiteSpace: 'pre-wrap',
-              maxHeight: 400,
-              overflow: 'scroll',
-              fontFamily: "'dm', menlo, monospace",
+  const defaultLanguage = () => {
+    const template = state.editor.currentSandbox.template;
+    if (template === 'create-react-app') {
+      return 'jsx';
+    }
+    return 'js';
+  };
+  return (
+    <>
+      {value ? (
+        <Highlight
+          {...defaultProps}
+          code={value}
+          language={language || defaultLanguage()}
+          // @ts-ignore
+          theme={makeTheme(theme.vscodeTheme)}
+        >
+          {({ className, style, tokens, getLineProps, getTokenProps }) => (
+            <Element
+              as="pre"
+              paddingX={4}
+              paddingY={2}
+              marginY={2}
+              className={className}
+              style={style}
+              css={css({
+                fontSize: 3,
+                whiteSpace: 'pre-wrap',
+                maxHeight: 400,
+                overflow: 'scroll',
+                fontFamily: "'dm', menlo, monospace",
 
-              '*': {
-                wordBreak: 'break-all',
-              },
-            })}
-          >
-            {tokens.map((line, i) => (
-              <Element {...getLineProps({ line, key: i })}>
-                {line.map((token, key) => (
-                  <Element as="span" {...getTokenProps({ token, key })} />
-                ))}
-              </Element>
-            ))}
-          </Element>
-        )}
-      </Highlight>
-    ) : null}
-  </>
-));
+                '*': {
+                  wordBreak: 'break-all',
+                },
+              })}
+            >
+              {tokens.map((line, i) => (
+                <Element {...getLineProps({ line, key: i })}>
+                  {line.map((token, key) => (
+                    <Element as="span" {...getTokenProps({ token, key })} />
+                  ))}
+                </Element>
+              ))}
+            </Element>
+          )}
+        </Highlight>
+      ) : null}
+    </>
+  );
+});

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Markdown/makeTheme/collectStyles.ts

@@ -0,0 +1,65 @@
+import { mapScope } from './scopeMapper';
+import { getScoreForScope } from './scopeScore';
+import { transformSettings } from './transformSettings';
+import { minify } from './minify';
+
+export const collectAllSettings = tokenColors => {
+  const output = {};
+
+  tokenColors.forEach(({ scope, settings }) => {
+    // We only care about colouring here
+    if (!settings.foreground && !settings.fontStyle) {
+      return;
+    }
+
+    const normScope = typeof scope === 'string' ? [scope] : scope;
+    // Return when no input scopes are present
+    if (!normScope || !normScope.length) {
+      return;
+    }
+
+    normScope.forEach(scopeName => {
+      const mappedScope = mapScope(scopeName);
+      // Return when no mapping scope has been returned
+      if (!mappedScope) {
+        return;
+      }
+
+      if (output[mappedScope] === undefined) {
+        output[mappedScope] = [];
+      }
+
+      output[mappedScope].push({
+        scope: scopeName,
+        settings,
+      });
+    });
+  });
+
+  const styles = Object.keys(output).map(mappedScope => {
+    const matchesArr = output[mappedScope];
+
+    // Get score for each match
+    const scored = matchesArr.map(match => {
+      const score = getScoreForScope(match.scope, mappedScope);
+
+      return {
+        score,
+        scope: mappedScope,
+        settings: transformSettings(match.settings),
+      };
+    });
+
+    // Sort by score asc
+    const sorted = scored.sort((a, b) => b.score - a.score);
+
+    // Return highest-scored one
+    return sorted[0];
+  });
+
+  const themeStyles = minify(styles);
+
+  return {
+    styles: themeStyles,
+  };
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Markdown/makeTheme/index.ts

@@ -0,0 +1,15 @@
+import { collectAllSettings } from './collectStyles';
+
+export const makeTheme = theme => {
+  const prismTheme = collectAllSettings(theme.tokenColors);
+
+  const json = {
+    plain: {
+      color: theme.colors['editor.foreground'],
+      backgroundColor: theme.colors['editor.background'],
+    },
+    ...prismTheme,
+  };
+
+  return json;
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Markdown/makeTheme/minify.ts

@@ -0,0 +1,20 @@
+import isEqual from 'lodash-es/isEqual';
+
+export const minify = styles => {
+  const output = [];
+
+  styles.forEach(style => {
+    const item = output.find(x => isEqual(style.settings, x.style));
+
+    if (!item) {
+      output.push({
+        types: [style.scope],
+        style: style.settings,
+      });
+    } else {
+      item.types.push(style.scope);
+    }
+  });
+
+  return output;
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Markdown/makeTheme/scopeMapper.ts

@@ -0,0 +1,61 @@
+const scopeMap = {
+  comment: 'comment',
+  punctuation: 'punctuation',
+  string: 'string',
+  variable: 'variable',
+  constant: 'constant',
+  header: 'prolog',
+  'support.function.magic': 'constant',
+  'support.variable': 'constant',
+  'entity.name.type.namespace': 'namespace',
+  'keyword.operator': 'operator',
+  'constant.numeric': 'number',
+  'constant.character.numeric': 'number',
+  'support.type.vendor.property-name': 'property',
+  'support.type.property-name': 'property',
+  'meta.property-list': 'property',
+  'entity.name.tag': 'tag',
+  'entity.name.function': 'function',
+  'entity.name.class': 'class-name',
+  'entity.name.tag.doctype': 'doctype',
+  'meta.selector': 'selector',
+  'entity.other.attribute-name': 'attr-name',
+  'meta.attribute-selector': 'attr-name',
+  'constant.other': 'constant',
+  'constant.other.symbol': 'symbol',
+  'constant.language.boolean': 'boolean',
+  'constant.character': 'char',
+  'meta.tag.html': 'tag',
+  'meta.tag.js': 'tag',
+  'support.function': 'builtin',
+  'variable.other.constant': 'builtin',
+  'constant.language': 'builtin',
+  'keyword.control': 'keyword',
+  'keyword.other': 'keyword',
+  'variable.parameter.url': 'url',
+  'meta.at-rule': 'at-rule',
+  'source.css.scss': 'at-rule',
+  'markup.inserted': 'inserted',
+  'markup.deleted': 'deleted',
+  'markup.changed': 'changed',
+};
+
+export const mapScope = scope => {
+  // If the scope includes a whitespace, it's a specific
+  // type that we don't support
+  if (scope.includes(' ')) {
+    return undefined;
+  }
+
+  const scopeAccess = scope.split('.');
+
+  for (let i = scopeAccess.length; i >= 0; i--) {
+    const searchScope = scopeAccess.slice(0, i).join('.');
+    const outputScope = scopeMap[searchScope];
+    if (outputScope !== undefined) {
+      return outputScope;
+    }
+  }
+
+  return undefined;
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Markdown/makeTheme/scopeScore.ts

@@ -0,0 +1,48 @@
+const scorePerScope = {
+  builtin: ['variable.other.constant', 'constant.language'],
+  punctuation: ['punctuation.accessor'],
+  tag: ['meta.tag.html', 'entity.name.tag'],
+};
+
+// The higher the better
+const score = [
+  // These are sure matches
+  'markup', // diffs
+  'comment',
+  'punctuation',
+  'string',
+  'variable',
+
+  // These are more "meta" scopes
+  'meta', // good guesses
+  'entity',
+  'constant',
+  'support',
+  'variable',
+];
+
+const baseScoreSize = score.length;
+
+export const getScoreForScope = (scope, mappedScope) => {
+  // Get scores for specific mapped scopes first
+  const scoreForMapped = scorePerScope[mappedScope];
+  if (scoreForMapped) {
+    // If the scope is in the specific mapped scope we add the baseScoreSize to this
+    // score
+    const mappedIndex = scoreForMapped.findIndex(x => scope.startsWith(x));
+    if (mappedIndex !== -1) {
+      return baseScoreSize + (scoreForMapped.length - mappedIndex);
+    }
+  }
+
+  const parentScope = scope.split('.')[0];
+  const index = score.indexOf(parentScope);
+
+  if (index === -1) {
+    // Otherwise it's a negative score based on length
+    return -1 * scope.length;
+  }
+
+  // If it's found we return the score from the main `score` arr
+  return baseScoreSize - index;
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/Markdown/makeTheme/transformSettings.ts

@@ -0,0 +1,23 @@
+type Output = {
+  color?: string;
+  backgroundColor?: string;
+  fontStyle?: string;
+};
+
+export const transformSettings = settings => {
+  const output: Output = {};
+
+  if (settings.foreground) {
+    output.color = settings.foreground.toString();
+  }
+
+  if (settings.background) {
+    output.backgroundColor = settings.background.toString();
+  }
+
+  if (settings.fontStyle === 'italic') {
+    output.fontStyle = 'italic';
+  }
+
+  return output;
+};