1 files changed, 342 insertions, 0 deletions

diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
new file mode 100644
index 00000000..8d98e832
--- /dev/null
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -0,0 +1,342 @@
+import errorSVG from '@material-icons/svg/svg/error/baseline.svg?raw';
+import expandMoreSVG from '@material-icons/svg/svg/expand_more/baseline.svg?raw';
+import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw';
+import warningSVG from '@material-icons/svg/svg/warning/baseline.svg?raw';
+import { alpha, styled } from '@mui/material/styles';
+
+import editorClassNames from './editorClassNames';
+
+function svgURL(svg: string): string {
+  return `url('data:image/svg+xml;utf8,${svg}')`;
+}
+
+export default styled('div', {
+  name: 'EditorTheme',
+  shouldForwardProp: (propName) => propName !== 'showLineNumbers',
+})<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => {
+  let codeMirrorLintStyle: Record<string, unknown> = {};
+  (
+    [
+      {
+        severity: 'error',
+        icon: errorSVG,
+      },
+      {
+        severity: 'warning',
+        icon: warningSVG,
+      },
+      {
+        severity: 'info',
+        icon: infoSVG,
+      },
+    ] as const
+  ).forEach(({ severity, icon }) => {
+    const palette = theme.palette[severity];
+    const color = palette.main;
+    const iconStyle = {
+      background: color,
+      maskImage: svgURL(icon),
+      maskSize: '16px 16px',
+      height: 16,
+      width: 16,
+    };
+    const tooltipColor =
+      theme.palette.mode === 'dark' ? palette.main : palette.light;
+    codeMirrorLintStyle = {
+      ...codeMirrorLintStyle,
+      [`.cm-lintRange-${severity}`]: {
+        backgroundImage: 'none',
+        textDecoration: `underline wavy ${color}`,
+        textDecorationSkipInk: 'none',
+      },
+      [`.cm-diagnostic-${severity}`]: {
+        marginLeft: 0,
+        padding: '4px 8px 4px 32px',
+        borderLeft: 'none',
+        position: 'relative',
+        '::before': {
+          ...iconStyle,
+          content: '" "',
+          position: 'absolute',
+          top: 6,
+          left: 8,
+        },
+      },
+      [`.cm-tooltip .cm-diagnostic-${severity}::before`]: {
+        background: tooltipColor,
+      },
+      [`.cm-lint-marker-${severity}`]: {
+        ...iconStyle,
+        display: 'block',
+        margin: '4px 0',
+        // Remove original CodeMirror icon.
+        content: '""',
+        '::before': {
+          // Remove original CodeMirror icon.
+          content: '""',
+          display: 'none',
+        },
+      },
+    };
+  });
+
+  return {
+    background: theme.palette.background.default,
+    '&, .cm-editor': {
+      height: '100%',
+    },
+    '.cm-content': {
+      padding: 0,
+    },
+    '.cm-scroller': {
+      color: theme.palette.text.secondary,
+    },
+    '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail':
+      {
+        ...theme.typography.body1,
+        fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
+        fontFeatureSettings: '"liga", "calt"',
+        letterSpacing: 0,
+        textRendering: 'optimizeLegibility',
+      },
+    '.cm-gutters': {
+      background: 'transparent',
+      color: theme.palette.text.disabled,
+      border: 'none',
+    },
+    '.cm-specialChar': {
+      color: theme.palette.secondary.main,
+    },
+    '.cm-activeLine': {
+      background: theme.palette.highlight.activeLine,
+    },
+    '.cm-gutter-lint': {
+      width: 16,
+      '.cm-gutterElement': {
+        padding: 0,
+      },
+    },
+    '.cm-foldGutter': {
+      opacity: 0,
+      width: 16,
+      transition: theme.transitions.create('opacity', {
+        duration: theme.transitions.duration.short,
+      }),
+      '@media (hover: none)': {
+        opacity: 1,
+      },
+    },
+    '.cm-gutters:hover .cm-foldGutter': {
+      opacity: 1,
+    },
+    [`.${editorClassNames.foldMarker}`]: {
+      display: 'block',
+      margin: '4px 0',
+      padding: 0,
+      maskImage: svgURL(expandMoreSVG),
+      maskSize: '16px 16px',
+      height: 16,
+      width: 16,
+      background: theme.palette.text.primary,
+      border: 'none',
+      cursor: 'pointer',
+    },
+    [`.${editorClassNames.foldMarkerClosed}`]: {
+      transform: 'rotate(-90deg)',
+    },
+    '.cm-activeLineGutter': {
+      background: 'transparent',
+    },
+    '.cm-lineNumbers': {
+      ...(!showLineNumbers && {
+        display: 'none !important',
+      }),
+      '.cm-activeLineGutter': {
+        color: theme.palette.text.primary,
+      },
+    },
+    '.cm-cursor, .cm-cursor-primary': {
+      borderLeft: `2px solid ${theme.palette.primary.main}`,
+    },
+    '.cm-selectionBackground': {
+      background: theme.palette.highlight.selection,
+    },
+    '.cm-focused': {
+      outline: 'none',
+      '.cm-selectionBackground': {
+        background: theme.palette.highlight.selection,
+      },
+    },
+    '.cm-panels-top': {
+      color: theme.palette.text.secondary,
+      borderBottom: `1px solid ${theme.palette.outer.border}`,
+      marginBottom: theme.spacing(1),
+    },
+    '.cm-panel': {
+      position: 'relative',
+      overflow: 'hidden',
+      background: theme.palette.outer.background,
+      borderTop: `1px solid ${theme.palette.outer.border}`,
+      '&, & button, & input': {
+        fontFamily: theme.typography.fontFamily,
+      },
+      'button[name="close"]': {
+        background: 'transparent',
+        color: theme.palette.text.secondary,
+        cursor: 'pointer',
+      },
+    },
+    '.cm-panel.cm-panel-lint': {
+      borderTop: `1px solid ${theme.palette.outer.border}`,
+      borderBottom: 'none',
+      'button[name="close"]': {
+        // Close button interferes with scrollbar, so we better hide it.
+        // The panel can still be closed from the toolbar.
+        display: 'none',
+      },
+      ul: {
+        maxHeight: 'max(112px, 20vh)',
+        li: {
+          cursor: 'pointer',
+          color: theme.palette.text.primary,
+        },
+        '.cm-diagnostic': {
+          ...theme.typography.body2,
+          '&[aria-selected="true"]': {
+            color: theme.palette.text.primary,
+            background: 'transparent',
+            fontWeight: 700,
+          },
+          ':hover': {
+            background: alpha(
+              theme.palette.text.primary,
+              theme.palette.action.hoverOpacity,
+            ),
+          },
+        },
+      },
+    },
+    [`.${editorClassNames.foldPlaceholder}`]: {
+      ...theme.typography.body1,
+      padding: 0,
+      fontFamily: 'inherit',
+      fontFeatureSettings: '"liga", "calt"',
+      color: theme.palette.text.secondary,
+      backgroundColor: alpha(
+        theme.palette.text.secondary,
+        theme.palette.action.focusOpacity,
+      ),
+      border: 'none',
+      cursor: 'pointer',
+      transition: theme.transitions.create(['background-color', 'color'], {
+        duration: theme.transitions.duration.short,
+      }),
+      '&:hover': {
+        color: theme.palette.text.primary,
+        backgroundColor: alpha(
+          theme.palette.text.secondary,
+          theme.palette.action.focusOpacity + theme.palette.action.hoverOpacity,
+        ),
+      },
+    },
+    '.tok-comment': {
+      fontStyle: 'italic',
+      color: theme.palette.highlight.comment,
+    },
+    '.tok-number': {
+      color: theme.palette.highlight.number,
+    },
+    '.tok-string': {
+      color: theme.palette.secondary,
+    },
+    '.tok-keyword': {
+      color: theme.palette.primary.main,
+    },
+    '.tok-typeName, .tok-atom': {
+      color: theme.palette.text.primary,
+    },
+    '.tok-variableName': {
+      color: theme.palette.highlight.parameter,
+    },
+    '.tok-problem-node': {
+      '&, & .tok-variableName': {
+        color: theme.palette.text.secondary,
+      },
+    },
+    '.tok-problem-individual': {
+      '&, & .tok-variableName': {
+        color: theme.palette.text.primary,
+      },
+    },
+    '.tok-problem-abstract, .tok-problem-new': {
+      fontStyle: 'italic',
+    },
+    '.tok-problem-containment': {
+      fontWeight: 700,
+    },
+    '.tok-problem-error': {
+      '&, & .tok-typeName': {
+        color: theme.palette.error.main,
+      },
+    },
+    '.tok-problem-builtin': {
+      '&, & .tok-typeName, & .tok-atom, & .tok-variableName': {
+        color: theme.palette.primary.main,
+        fontWeight: 400,
+        fontStyle: 'normal',
+      },
+    },
+    '.cm-tooltip.cm-tooltip-autocomplete': {
+      background: theme.palette.background.paper,
+      borderRadius: theme.shape.borderRadius,
+      overflow: 'hidden',
+      ...(theme.palette.mode === 'dark' && {
+        // https://github.com/mui/material-ui/blob/10c72729c7d03bab8cdce6eb422642684c56dca2/packages/mui-material/src/Paper/Paper.js#L18
+        backgroundImage:
+          'linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07))',
+      }),
+      boxShadow: theme.shadows[2],
+      '.cm-completionIcon': {
+        color: theme.palette.text.secondary,
+      },
+      '.cm-completionLabel': {
+        color: theme.palette.text.primary,
+      },
+      '.cm-completionDetail': {
+        color: theme.palette.text.secondary,
+        fontStyle: 'normal',
+      },
+      'li[aria-selected="true"]': {
+        background: alpha(
+          theme.palette.text.primary,
+          theme.palette.action.focusOpacity,
+        ),
+        '.cm-completionIcon, .cm-completionLabel, .cm-completionDetail': {
+          color: theme.palette.text.primary,
+        },
+      },
+    },
+    '.cm-tooltip.cm-tooltip-hover, .cm-tooltip.cm-tooltip-lint': {
+      ...theme.typography.body2,
+      // https://github.com/mui/material-ui/blob/dee9529f7a298c54ae760761112c3ae9ba082137/packages/mui-material/src/Tooltip/Tooltip.js#L121-L125
+      background: alpha(theme.palette.grey[700], 0.92),
+      borderRadius: theme.shape.borderRadius,
+      color: theme.palette.common.white,
+      overflow: 'hidden',
+      maxWidth: 400,
+    },
+    '.cm-completionIcon': {
+      width: 16,
+      padding: 0,
+      marginRight: '0.5em',
+      textAlign: 'center',
+    },
+    ...codeMirrorLintStyle,
+    '.cm-problem-read': {
+      background: theme.palette.highlight.occurences.read,
+    },
+    '.cm-problem-write': {
+      background: theme.palette.highlight.occurences.write,
+    },
+  };
+});