More colour blind friendly, and a bit of brutalist design

Author: aslakhellesoy

docs/index.js

@@ -53,6 +53,7 @@
     "@codemirror/commands": "^0.19.5",
     "@codemirror/rangeset": "^0.19.1",
     "@codemirror/state": "^0.19.2",
+    "@codemirror/tooltip": "^0.19.2",
     "@codemirror/view": "^0.19.9",
     "@headlessui/react": "1.4.1",
     "@stryker-mutator/core": "^5.4.1",

docs/index.js.map

@@ -96,7 +96,11 @@ export const Try: React.FunctionComponent<Props> = ({
 
   return (
     <div>
-      <CucumberExpressionInput value={expressionText} setValue={setExpressionText} />
+      <CucumberExpressionInput
+        value={expressionText}
+        setValue={setExpressionText}
+        error={expressionResult.error !== undefined}
+      />
       <ErrorComponent message={expressionResult.error?.message} />
       <TextInput value={stepText} setValue={setStepText} args={args} />
       <div className="flex justify-end">
@@ -146,11 +150,12 @@ export const Try: React.FunctionComponent<Props> = ({
 const CucumberExpressionInput: React.FunctionComponent<{
   value: string
   setValue: Dispatch<SetStateAction<string>>
-}> = ({ value, setValue }) => (
+  error: boolean
+}> = ({ value, setValue, error }) => (
   <div className="mb-4">
     <label className="block">
       <Label>Cucumber Expression</Label>
-      <ExpressionEditor value={value} setValue={setValue} autoFocus={true} />
+      <ExpressionEditor value={value} setValue={setValue} error={error} autoFocus={true} />
     </label>
   </div>
 )

javascript/package-lock.json

@@ -4,17 +4,19 @@ import React from 'react'
 import { CodeMirrorElement, useEditorView, useExtension } from './codemirror.js'
 import setLinesExtension from './setStateExtension.js'
 import singleLineExtension from './singleLineExtension.js'
-import { baseTheme } from './theme.js'
+import { baseTheme, errorTheme, okTheme } from './theme.js'
 
 export const ExpressionEditor: React.FunctionComponent<{
   value: string
   setValue: (newValue: string) => void
+  error: boolean
   autoFocus: boolean
-}> = ({ value, setValue, autoFocus }) => {
+}> = ({ value, setValue, error, autoFocus }) => {
   const view = useEditorView(() =>
     EditorState.create({ doc: value, selection: EditorSelection.single(value.length) })
   )
   useExtension(view, () => baseTheme, [])
+  useExtension(view, () => (error ? errorTheme : okTheme), [error])
   useExtension(view, () => singleLineExtension, [])
   useExtension(view, () => setLinesExtension((lines) => setValue(lines[0])), [])
 

javascript/package.json

@@ -2,29 +2,31 @@ import { EditorSelection, EditorState } from '@codemirror/state'
 import React from 'react'
 
 import { Argument } from '../../src'
+import argTooltipExtension from './argTooltipExtension.js'
 import { CodeMirrorElement, useEditorView, useExtension } from './codemirror.js'
 import highlightArgsExtension from './highlightArgsExtension.js'
 import setLinesExtension from './setStateExtension.js'
 import singleLineExtension from './singleLineExtension.js'
-import { baseTheme, matchTheme, noMatchTheme } from './theme.js'
+import { baseTheme, cursorTooltipBaseTheme, errorTheme, okTheme } from './theme.js'
 
 export const TextEditor: React.FunctionComponent<{
   value: string
   setValue: (newValue: string) => void
-  autoFocus: boolean
   args: readonly Argument[] | null | undefined
-}> = ({ value, setValue, autoFocus, args }) => {
+  autoFocus: boolean
+}> = ({ value, setValue, args, autoFocus }) => {
   const view = useEditorView(() =>
     EditorState.create({
       doc: value,
       selection: EditorSelection.single(value.length),
     })
   )
   useExtension(view, () => baseTheme, [])
-  useExtension(view, () => (Array.isArray(args) ? matchTheme : noMatchTheme), [args])
+  useExtension(view, () => (Array.isArray(args) ? okTheme : errorTheme), [args])
   useExtension(view, () => singleLineExtension, [])
   useExtension(view, () => setLinesExtension((lines) => setValue(lines[0])), [])
   useExtension(view, () => highlightArgsExtension(args), [args])
+  useExtension(view, () => [argTooltipExtension(args), cursorTooltipBaseTheme], [args])
 
   return <CodeMirrorElement autoFocus={autoFocus} view={view} />
 }

javascript/try/Try.tsx

@@ -0,0 +1,44 @@
+import { EditorState, StateField } from '@codemirror/state'
+import { showTooltip, Tooltip } from '@codemirror/tooltip'
+
+import { Argument } from '../../src'
+
+export default function argTooltipExtension(args: readonly Argument[] | undefined | null) {
+  return StateField.define<readonly Tooltip[]>({
+    create: getCursorTooltips,
+
+    update(tooltips, tr) {
+      if (!tr.docChanged && !tr.selection) return tooltips
+      return getCursorTooltips(tr.state)
+    },
+
+    provide: (f) => showTooltip.computeN([f], (state) => state.field(f)),
+  })
+
+  function getCursorTooltips(state: EditorState): readonly Tooltip[] {
+    const cursorRange = state.selection.ranges.filter((range) => range.empty)
+    if (cursorRange.length !== 1) return []
+    const range = cursorRange[0]
+    const line = state.doc.lineAt(range.head)
+    const column = range.head - line.from
+    const arg = (args || []).find(
+      (arg) => (arg.group.start || -1) <= column && column < (arg.group.end || -1)
+    )
+    if (!arg) return []
+
+    const type = arg.parameterType.name
+    const value = JSON.stringify(arg.getValue(null))
+    const toolTip: Tooltip = {
+      pos: range.head,
+      above: true,
+      strictSide: true,
+      create: () => {
+        const dom = document.createElement('div')
+        dom.classList.add('cm-cursor-tooltip')
+        dom.textContent = `${type}: ${value}`
+        return { dom }
+      },
+    }
+    return [toolTip]
+  }
+}

javascript/try/codemirror/ExpressionEditor.tsx

@@ -1,35 +1,63 @@
 import { EditorView } from '@codemirror/view'
 
-export const baseTheme = EditorView.theme(
-  {
-    '&': {
-      border: 'solid',
-      borderWidth: '1px',
-      borderColor: '#6b7280', // text-gray-700
-      padding: '6px',
-      fontSize: '1rem',
-    },
-    '.cm-arg': {
-      background: '#ffc010',
-    },
-    '&.cm-focused': {
-      outline: '2px solid #2563eb',
-    },
-    '&.cm-focused .cm-selectionBackground, ::selection': {
-      outline: '2px solid #2563eb',
-    },
+/*
+IBM palette for colour-blind people
+https://davidmathlogic.com/colorblind/#%23648FFF-%23785EF0-%23DC267F-%23FE6100-%23FFB000
+*/
+
+export const baseTheme = EditorView.theme({
+  '&': {
+    border: 'solid',
+    borderWidth: '1px',
+    borderColor: '#000000', // text-gray-700
+    padding: '6px',
+    fontSize: '1rem',
+    color: '#ffffff',
+  },
+  '.cm-content': {
+    caretColor: '#ffffff',
+  },
+  '&.cm-focused': {
+    outline: '2px solid #000000',
   },
-  { dark: false }
-)
+  '&.cm-focused .cm-selectionBackground, ::selection': {
+    outline: '2px solid #000000',
+    backgroundColor: '#785EF0',
+  },
+  '.cm-arg': {
+    backgroundColor: '#FE6100',
+  },
+})
 
-export const matchTheme = EditorView.theme({
+export const okTheme = EditorView.theme({
   '&': {
-    backgroundColor: 'rgba(209, 250, 229)',
+    backgroundColor: '#648FFF',
   },
 })
 
-export const noMatchTheme = EditorView.theme({
+export const errorTheme = EditorView.theme({
   '&': {
-    backgroundColor: 'rgba(254, 226, 226)',
+    backgroundColor: '#DC267F',
+  },
+})
+
+export const cursorTooltipBaseTheme = EditorView.baseTheme({
+  '.cm-tooltip.cm-cursor-tooltip': {
+    backgroundColor: '#000000',
+    color: '#ffffff',
+    transform: 'translate(-50%, -7px)',
+    border: 'none',
+    padding: '2px 7px',
+    borderRadius: '10px',
+    '&:before': {
+      position: 'absolute',
+      content: '""',
+      left: '50%',
+      marginLeft: '-5px',
+      bottom: '-5px',
+      borderLeft: '5px solid transparent',
+      borderRight: '5px solid transparent',
+      borderTop: '5px solid #000000',
+    },
   },
 })