@neo4j-cypher/react-codemirror 2.0.0-next.40 → 2.0.0-next.42

package/dist/vitest.config.d.mts

@@ -0,0 +1,2 @@
+declare const _default: import("vitest/config").UserWorkspaceConfig;
+export default _default;

package/dist/vitest.config.mjs

@@ -0,0 +1,16 @@
+import { defineProject } from 'vitest/config';
+export default defineProject({
+    test: {
+        globals: true,
+        projects: [
+            {
+                test: {
+                    name: 'unit',
+                    include: ['src/**/*.test.{ts,tsx}'],
+                    exclude: ['src/tests/e2e/**'],
+                },
+            },
+        ],
+    },
+});
+//# sourceMappingURL=vitest.config.mjs.map

package/dist/vitest.config.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitest.config.mjs","sourceRoot":"","sources":["../vitest.config.mts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,eAAe,aAAa,CAAC;IAC3B,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QAEb,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE;oBACJ,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE,CAAC,wBAAwB,CAAC;oBACnC,OAAO,EAAE,CAAC,kBAAkB,CAAC;iBAC9B;aACF;SACF;KACF;CACF,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-cypher/react-codemirror",
-  "version": "2.0.0-next.40",
+  "version": "2.0.0-next.42",
   "keywords": [
     "codemirror",
     "codemirror 6",
@@ -26,7 +26,9 @@
     "CHANGELOG.md"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/lang-cypher/prism-global.js"
+  ],
   "main": "./dist/src/index.js",
   "types": "./dist/src/index.d.ts",
   "dependencies": {
@@ -46,23 +48,23 @@
     "style-mod": "^4.1.2",
     "vscode-languageserver-types": "^3.17.3",
     "workerpool": "^9.3.3",
-    "@neo4j-cypher/language-support": "2.0.0-next.37",
-    "@neo4j-cypher/lint-worker": "1.10.1-next.14"
+    "@neo4j-cypher/language-support": "2.0.0-next.39",
+    "@neo4j-cypher/lint-worker": "1.10.1-next.16"
   },
   "devDependencies": {
     "@neo4j-ndl/base": "^3.2.10",
-    "@playwright/experimental-ct-react": "^1.55.1",
-    "@playwright/test": "^1.55.1",
+    "@playwright/experimental-ct-react": "1.62.1",
+    "@playwright/test": "1.62.1",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^6.1.1",
     "copyfiles": "^2.4.1",
     "jsdom": "^24.1.1",
-    "playwright": "^1.55.1",
+    "playwright": "1.62.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^4.5.10"
+    "vite": "^8.2.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -75,10 +77,11 @@
     "dev": "tsc --watch",
     "build": "pnpm copy-lint-worker && tsc --declaration --outDir dist/",
     "copy-lint-worker": "copyfiles -u 4 ../lint-worker/dist/esm/lintWorker.mjs dist/src/lang-cypher && copyfiles -u 4 ../lint-worker/dist/esm/lintWorker.mjs src/lang-cypher",
-    "clean": "rm -rf {dist,tsconfig.tsbuildinfo}",
+    "check-api-report": "tsx checkApiReport.ts",
+    "gen-api-report": "pnpm build && pnpm check-api-report",
+    "clean": "rm -rf dist tsconfig*.tsbuildinfo",
     "test": "vitest run",
     "test:e2e": "playwright test -c playwright-ct.config.ts",
-    "test:e2e-ui": "playwright test -c playwright-ct.config.ts --ui",
-    "benchmark": "BENCHMARKING=true playwright test -c playwright-ct.config.ts -g \"benchmarking & performance test session\""
+    "test:e2e-ui": "playwright test -c playwright-ct.config.ts --ui"
   }
 }

package/src/CypherEditor.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { EditorView } from '@codemirror/view';
+import type { EditorView } from '@codemirror/view';
 import { createRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
@@ -13,22 +13,25 @@ let root: ReturnType<typeof createRoot>;
 
 const ref = createRef<CypherEditor>();
 let value = '';
-const onChange = vi.fn((v: string) => {
+const onChange = vi.fn<(v: string) => void>((v) => {
   value = v;
   rerender();
 });
 
-global.IS_REACT_ACT_ENVIRONMENT = true;
+// oxlint-disable-next-line typescript/no-explicit-any
+(global as any).IS_REACT_ACT_ENVIRONMENT = true;
 const DEBOUNCE_TIME_WITH_MARGIN = DEBOUNCE_TIME + 100;
 
 /** Avoids crash in test environment */
 function mockEditorView(editorView: EditorView) {
-  editorView.coordsAtPos = vi.fn().mockReturnValue({
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0,
-  });
+  editorView.coordsAtPos = vi
+    .fn<() => { left: number; top: number; right: number; bottom: number }>()
+    .mockReturnValue({
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+    });
 }
 
 async function debounce() {
@@ -107,24 +110,28 @@ test('props.value set to undefined preserves editorValue', () => {
   expect(getEditorValue()).toBe('initial');
 });
 
-// value updates from outside onExecute are overwritten by pending updates
-test.fails('new props.value should cancel onChange', async () => {
+// This test documents unexpected behaviour:
+//  value updates (from outside onExecute) are overwritten by pending updates.
+test('new props.value should cancel onChange', async () => {
   // 1. value is updated internally
   ref.current.setValueAndFocus('update');
 
   // 2. editor is rerendered with a new value while a value update is still pending
+  // the update to 'new external value' is overwritten by the pending update to 'update'
   value = 'new external value';
   rerender();
 
   await debounce();
 
-  // expect(onChange).not.toHaveBeenCalled();
-  expect(getEditorValue()).toBe('new external value');
-  expect(value).toBe('new external value');
+  // NOTE: These assertions currently check for the WRONG behavior (they are inverted).
+  expect(onChange).toHaveBeenCalled();
+  expect(getEditorValue()).not.toBe('new external value');
+  expect(value).not.toBe('new external value');
 });
 
-// value updates from outside onExecute are overwritten by pending updates
-test.fails('new props.value set to same value should cancel onChange', async () => {
+// This test documents unexpected behaviour:
+//  value updates (from outside onExecute) are overwritten by pending updates
+test('new props.value set to same value should cancel onChange', async () => {
   // 1. value is set initially
   value = 'same value';
   rerender();
@@ -133,14 +140,16 @@ test.fails('new props.value set to same value should cancel onChange', async ()
   ref.current.setValueAndFocus('update');
 
   // 3. editor is rerendered with a new value while a value update is still pending
+  // the update to 'same value' is overwritten by the pending update to 'update'
   value = 'same value';
   rerender();
 
   await debounce();
 
-  // expect(onChange).not.toHaveBeenCalled();
-  expect(getEditorValue()).toBe('same value');
-  expect(value).toBe('same value');
+  // NOTE: These assertions currently check for the WRONG behavior (they are inverted).
+  expect(onChange).toHaveBeenCalled();
+  expect(getEditorValue()).not.toBe('same value');
+  expect(value).not.toBe('same value');
 });
 
 test('rerender should not cancel onChange', async () => {

package/src/CypherEditor.tsx

@@ -1,18 +1,8 @@
 import { insertNewline } from '@codemirror/commands';
-import {
-  Annotation,
-  Compartment,
-  EditorState,
-  Extension,
-} from '@codemirror/state';
-import {
-  EditorView,
-  KeyBinding,
-  keymap,
-  lineNumbers,
-  placeholder,
-  ViewUpdate,
-} from '@codemirror/view';
+import type { Extension } from '@codemirror/state';
+import { Annotation, Compartment, EditorState } from '@codemirror/state';
+import type { KeyBinding, ViewUpdate } from '@codemirror/view';
+import { EditorView, keymap, lineNumbers, placeholder } from '@codemirror/view';
 import {
   createInlinePanelController,
   type InlinePanelCallbacks,
@@ -37,15 +27,18 @@ import {
   replaceHistory,
   replMode as historyNavigation,
 } from './historyNavigation';
-import { cypher, CypherConfig } from './lang-cypher/langCypher';
+import type { CypherConfig } from './lang-cypher/langCypher';
+import { cypher } from './lang-cypher/langCypher';
 import { cleanupWorkers } from './lang-cypher/syntaxValidation';
 import { basicNeo4jSetup } from './neo4jSetup';
 import { getThemeExtension } from './themes';
 import { richClipboardCopier } from './richClipboardCopier';
-import { LintWorker } from '@neo4j-cypher/lint-worker';
+import type { LintWorker } from '@neo4j-cypher/lint-worker';
 import workerpool from 'workerpool';
 
-type DomEventHandlers = Parameters<typeof EditorView.domEventHandlers>[0];
+export type DomEventHandlers = Parameters<
+  typeof EditorView.domEventHandlers
+>[0];
 
 /**
  * Normalize CRLF line endings to LF, which is what CodeMirror expects.
@@ -196,6 +189,12 @@ export interface CypherEditorProps {
    */
   ariaLabel?: string;
 
+  /**
+   * Extra attributes to set on the editable content element, e.g. `aria-invalid` and
+   * `aria-describedby` to associate the editor with an error message rendered outside of it.
+   */
+  contentAttributes?: Record<string, string>;
+
   /**
    * Whether keybindings for inserting indents with the Tab key should be disabled.
    *
@@ -323,6 +322,7 @@ const readOnlyCompartment = new Compartment();
 const placeholderCompartment = new Compartment();
 const domEventHandlerCompartment = new Compartment();
 const diffCompartment = new Compartment();
+const contentAttributesCompartment = new Compartment();
 
 const formatLineNumber =
   (prompt?: string) => (a: number, state: EditorState) => {
@@ -333,7 +333,7 @@ const formatLineNumber =
     return a.toString();
   };
 
-type CypherEditorState = {
+export type CypherEditorState = {
   editorActionsContainer: HTMLElement | null;
 };
 
@@ -341,7 +341,7 @@ const ExternalEdit = Annotation.define<boolean>();
 const WorkerURL = new URL('./lang-cypher/lintWorker.mjs', import.meta.url)
   .pathname;
 
-class CodemirrorSymbolFetcher {
+export class CodemirrorSymbolFetcher {
   constructor(languageService: CypherLanguageService) {
     this.languageService = languageService;
   }
@@ -610,6 +610,9 @@ export class CypherEditor extends Component<
               'aria-label': this.props.ariaLabel,
             })
           : [],
+        contentAttributesCompartment.of(
+          EditorView.contentAttributes.of(this.props.contentAttributes ?? {}),
+        ),
         !this.props.moveFocusOnTab
           ? EditorView.contentAttributes.of({
               'aria-description':
@@ -756,6 +759,17 @@ export class CypherEditor extends Component<
       });
     }
 
+    if (
+      JSON.stringify(prevProps.contentAttributes) !==
+      JSON.stringify(this.props.contentAttributes)
+    ) {
+      this.editorView.current.dispatch({
+        effects: contentAttributesCompartment.reconfigure(
+          EditorView.contentAttributes.of(this.props.contentAttributes ?? {}),
+        ),
+      });
+    }
+
     if (prevProps.readonly !== this.props.readonly) {
       this.editorView.current.dispatch({
         effects: readOnlyCompartment.reconfigure(

package/src/editorActions.ts

@@ -2,6 +2,7 @@ import { StateEffect, StateField, type Extension } from '@codemirror/state';
 import {
   Decoration,
   EditorView,
+  type Rect,
   ViewPlugin,
   type ViewUpdate,
   WidgetType,
@@ -40,10 +41,23 @@ export type EditorActionsController = {
  *    `absolute` on the editor element (which does not scroll). It never moves
  *    when the document grows, when an inline panel opens above the first line,
  *    or when the content scrolls — content simply scrolls behind it.
+ *
+ * The overlay is measured against the scroller's visible box rather than
+ * against the spacer or the content: the spacer moves down the document
+ * whenever something renders above the first line (an inline panel, the
+ * deleted lines of a diff), and the content reaches past the right edge as
+ * soon as it overflows.
+ * Vertically the cluster is centred on the first line.
  */
 
 const SPACER_BOTTOM_GAP = 2;
 const SPACER_LEFT_GAP = 4;
+/**
+ * Floor for the overlay's inset from the visible right edge, so it stays off
+ * the content's last pixel even if a theme zeroes `.cm-line`'s right padding
+ * (the base theme's 2px, which is what normally provides the inset).
+ */
+const MIN_OVERLAY_RIGHT_INSET = 2;
 
 export function createEditorActionsController(): EditorActionsController {
   const setActiveEffect = StateEffect.define<boolean>();
@@ -74,6 +88,38 @@ export function createEditorActionsController(): EditorActionsController {
       return true;
     }
 
+    /**
+     * The spacer floats right, so CodeMirror's default — the widget's own box —
+     * puts the caret at the right edge of the cluster whenever the spacer is
+     * the only thing it can measure on the first line (an empty document).
+     * Report the start of the line's inline content instead: the node after
+     * the spacer (text, a placeholder, or CodeMirror's trailing `<br>`).
+     */
+    coordsAt(dom: HTMLElement): Rect | null {
+      const next = dom.nextSibling;
+      if (!next) {
+        return null;
+      }
+      let rects: DOMRectList;
+      if (next instanceof Element) {
+        rects = next.getClientRects();
+      } else {
+        const range = document.createRange();
+        range.selectNodeContents(next);
+        rects = range.getClientRects();
+      }
+      const rect = rects[0];
+      if (!rect) {
+        return null;
+      }
+      return {
+        left: rect.left,
+        right: rect.left,
+        top: rect.top,
+        bottom: rect.bottom,
+      };
+    }
+
     ignoreEvent(): boolean {
       return true;
     }
@@ -136,13 +182,11 @@ export function createEditorActionsController(): EditorActionsController {
             `${container.offsetWidth}px`,
           );
           view.dom.style.setProperty(
-            '--cm-editor-actions-height',
-            `${container.offsetHeight}px`,
-          );
-          view.dom.style.setProperty(
-            '--cm-editor-actions-content-min-height',
-            `${container.offsetHeight + SPACER_BOTTOM_GAP}px`,
+            '--cm-editor-actions-reserved-width',
+            `${container.offsetWidth + SPACER_LEFT_GAP}px`,
           );
+          // The spacer's height follows the overlay's position, so `align`
+          // owns it.
           this.align(view);
         });
         this.resizeObserver.observe(container);
@@ -153,28 +197,52 @@ export function createEditorActionsController(): EditorActionsController {
       }
 
       private align(view: EditorView): void {
-        view.requestMeasure<{ top: number; right: number } | null>({
+        view.requestMeasure<{
+          top: number;
+          right: number;
+          spacerHeight: number;
+          contentMinHeight: number;
+        } | null>({
           read: () => {
             if (!this.dom) {
               return null;
             }
             const editorRect = view.dom.getBoundingClientRect();
-            const spacer = view.dom.querySelector('.cm-editor-actions-spacer');
-            let topClient: number;
-            let rightClient: number;
-            if (spacer) {
-              const rect = spacer.getBoundingClientRect();
-              topClient = rect.top;
-              rightClient = rect.right;
-            } else {
-              const rect = view.contentDOM.getBoundingClientRect();
-              const style = window.getComputedStyle(view.contentDOM);
-              topClient = rect.top + (parseFloat(style.paddingTop) || 0);
-              rightClient = rect.right - (parseFloat(style.paddingRight) || 0);
-            }
+            const scrollerRect = view.scrollDOM.getBoundingClientRect();
+            const style = window.getComputedStyle(view.contentDOM);
+            const visibleRight = scrollerRect.left + view.scrollDOM.clientWidth;
+            // Match the inset `.cm-line`'s right padding gives the spacer, so
+            // the overlay lands on the space the spacer reserves and stays off
+            // `contentRect.right - 1`, the pixel CodeMirror hit-tests to
+            // measure a wrapped line's selection. Cover it and the first
+            // line's highlight collapses to zero width — hence the floor.
+            const line = view.contentDOM.querySelector('.cm-line');
+            const lineRightPadding = line
+              ? parseFloat(window.getComputedStyle(line).paddingRight) || 0
+              : 0;
+
+            const contentPaddingTop = parseFloat(style.paddingTop) || 0;
+            const height = this.dom.offsetHeight;
+            // How far the cluster has to rise above the first line's top to
+            // sit centred on it, limited to the padding it can rise into.
+            const lift = Math.min(
+              Math.max((height - view.defaultLineHeight) / 2, 0),
+              contentPaddingTop,
+            );
+
             return {
-              top: topClient - editorRect.top + view.scrollDOM.scrollTop,
-              right: editorRect.right - rightClient - view.scrollDOM.scrollLeft,
+              top: scrollerRect.top - editorRect.top + contentPaddingTop - lift,
+              right:
+                editorRect.right -
+                visibleRight +
+                (parseFloat(style.paddingRight) || 0) +
+                Math.max(lineRightPadding, MIN_OVERLAY_RIGHT_INSET),
+              // The spacer starts at the first line's top, so it only needs to
+              // clear the part of the cluster that hangs below it.
+              spacerHeight: height - lift,
+              // A floor under the content, so an empty document is still tall
+              // enough to hold the overlay.
+              contentMinHeight: contentPaddingTop - lift + height,
             };
           },
           write: (pos) => {
@@ -189,6 +257,14 @@ export function createEditorActionsController(): EditorActionsController {
               '--cm-editor-actions-right',
               `${pos.right}px`,
             );
+            view.dom.style.setProperty(
+              '--cm-editor-actions-height',
+              `${pos.spacerHeight}px`,
+            );
+            view.dom.style.setProperty(
+              '--cm-editor-actions-content-min-height',
+              `${pos.contentMinHeight}px`,
+            );
           },
         });
       }
@@ -206,6 +282,7 @@ export function createEditorActionsController(): EditorActionsController {
           root.style.removeProperty('--cm-editor-actions-width');
           root.style.removeProperty('--cm-editor-actions-height');
           root.style.removeProperty('--cm-editor-actions-content-min-height');
+          root.style.removeProperty('--cm-editor-actions-reserved-width');
           root.style.removeProperty('--cm-editor-actions-top');
           root.style.removeProperty('--cm-editor-actions-right');
         }
@@ -230,6 +307,10 @@ export function createEditorActionsController(): EditorActionsController {
       WebkitUserSelect: 'none',
       pointerEvents: 'none',
     },
+    // The spacer only clears the first line, so a panel above it makes its own room.
+    '.cm-inline-panel': {
+      paddingRight: 'var(--cm-editor-actions-reserved-width, 0px)',
+    },
     '.cm-placeholder': {
       display: 'inline',
     },

package/src/historyNavigation.ts

@@ -1,5 +1,7 @@
-import { Extension, StateEffect } from '@codemirror/state';
-import { EditorView, keymap } from '@codemirror/view';
+import type { Extension } from '@codemirror/state';
+import { StateEffect } from '@codemirror/state';
+import type { EditorView } from '@codemirror/view';
+import { keymap } from '@codemirror/view';
 
 import { StateField } from '@codemirror/state';
 
@@ -10,7 +12,7 @@ type HistoryState = {
   documentUpdate: string | null;
 };
 const DRAFT_ENTRY_INDEX = -1;
-const historyInitialState = {
+const historyInitialState: HistoryState = {
   history: [],
   index: DRAFT_ENTRY_INDEX,
   documentUpdate: null,

package/src/index.ts

@@ -1,6 +1,20 @@
-export * as LanguageSupport from '@neo4j-cypher/language-support';
-export { CypherEditor } from './CypherEditor';
+import * as LanguageSupport from '@neo4j-cypher/language-support';
+export { LanguageSupport };
+export {
+  CypherEditor,
+  CypherEditorProps,
+  CypherEditorState,
+  CodemirrorSymbolFetcher,
+  DomEventHandlers,
+} from './CypherEditor';
 export type { InlinePanelProps } from './CypherEditor';
+export type { InlinePanelCallbacks } from './inlinePanel.js';
 export type { DiffProps } from './diffView';
-export { cypher } from './lang-cypher/langCypher';
+export { cypher, CypherConfig } from './lang-cypher/langCypher';
 export { darkThemeConstants, lightThemeConstants } from './themes';
+export type {
+  ThemeOptions,
+  DiffColors,
+} from './lang-cypher/createCypherTheme.js';
+export type { HostPortalCallbacks } from './hostCallbacks.js';
+export type { HighlightedCypherTokenTypes } from './lang-cypher/constants.js';

package/src/lang-cypher/autocomplete.ts

@@ -1,14 +1,11 @@
-import {
-  Completion,
-  CompletionSource,
-  snippet,
-} from '@codemirror/autocomplete';
+import type { Completion, CompletionSource } from '@codemirror/autocomplete';
+import { snippet } from '@codemirror/autocomplete';
 import { shouldAutoCompleteYield } from '@neo4j-cypher/language-support';
 import {
   CompletionItemKind,
   CompletionItemTag,
 } from 'vscode-languageserver-types';
-import { CompletionItemIcons } from '../icons';
+import type { CompletionItemIcons } from '../icons';
 import type { CypherConfig } from './langCypher';
 import { getDocString } from './utils';
 

package/src/lang-cypher/constants.ts

@@ -1,8 +1,9 @@
 import { languageDataProp } from '@codemirror/language';
 import type { Facet } from '@codemirror/state';
 import { NodeSet, NodeType } from '@lezer/common';
-import { styleTags, Tag, tags } from '@lezer/highlight';
-import { CypherTokenType } from '@neo4j-cypher/language-support';
+import type { Tag } from '@lezer/highlight';
+import { styleTags, tags } from '@lezer/highlight';
+import type { CypherTokenType } from '@neo4j-cypher/language-support';
 
 export const cypherTokenTypeToNode = (facet: Facet<unknown>) => ({
   topNode: NodeType.define({

package/src/lang-cypher/createCypherTheme.ts

@@ -1,13 +1,11 @@
-import {
-  HighlightStyle,
-  syntaxHighlighting,
-  TagStyle,
-} from '@codemirror/language';
-import { Extension } from '@codemirror/state';
+import type { TagStyle } from '@codemirror/language';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { CypherTokenType } from '@neo4j-cypher/language-support';
-import { StyleSpec } from 'style-mod';
-import { HighlightedCypherTokenTypes, tokenTypeToStyleTag } from './constants';
+import type { StyleSpec } from 'style-mod';
+import type { HighlightedCypherTokenTypes } from './constants';
+import { tokenTypeToStyleTag } from './constants';
 import {
   byWordSvg,
   caseSensitiveSvg,
@@ -141,6 +139,53 @@ export const createCypherTheme = ({
     '& .cm-signature-help-panel-description': {
       padding: '5px',
     },
+    // Shared between both hover tooltips and hover errors
+    '& .cm-tooltip-hover': {
+      maxWidth: '800px',
+    },
+    '& .cm-hover-tooltip': {
+      backgroundColor: settings.autoCompletionPanel.backgroundColor,
+      color: settings.foreground,
+      maxHeight: '300px',
+      overflow: 'auto',
+      padding: '2px 10px',
+    },
+    '& .cm-hover-info': {
+      fontFamily:
+        '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif',
+      fontSize: '13px',
+      lineHeight: '1.5',
+      '& p': {
+        margin: '6px 0',
+      },
+      '& ul': {
+        margin: '6px 0',
+        paddingLeft: '18px',
+      },
+      '& li': {
+        margin: '2px 0',
+      },
+      '& code': {
+        fontFamily: 'Fira Code, Menlo, Monaco, Lucida Console, monospace',
+        fontSize: '12px',
+      },
+      '& pre': {
+        margin: '6px 0',
+        padding: '6px 8px',
+        borderRadius: '3px',
+        whiteSpace: 'pre-wrap',
+        overflowWrap: 'break-word',
+        backgroundColor: dark
+          ? 'rgba(255, 255, 255, 0.08)'
+          : 'rgba(0, 0, 0, 0.05)',
+      },
+      '& > *:first-child': {
+        marginTop: '0',
+      },
+      '& > *:last-child': {
+        marginBottom: '0',
+      },
+    },
     '.cm-completionInfo-signature': {
       color: 'darkgrey',
     },
@@ -255,8 +300,12 @@ export const createCypherTheme = ({
 
   const themeExtension = EditorView.theme(themeOptions, { dark });
 
-  const styles = Object.entries(highlightStyles).map(
-    ([token, color]: [HighlightedCypherTokenTypes, string]): TagStyle => ({
+  const styles = (
+    Object.entries(highlightStyles) as Array<
+      [HighlightedCypherTokenTypes, string]
+    >
+  ).map(
+    ([token, color]): TagStyle => ({
       tag: tokenTypeToStyleTag[token],
       color,
       class: token === CypherTokenType.consoleCommand ? 'cm-bold' : undefined,