add editor action buttons overlay to CypherEditor (#697)

* add editor action buttons overlay to CypherEditor

* adding react-dom as a peer dependency

Author: nnecla

.changeset/witty-otters-wave.md

@@ -0,0 +1,5 @@
+---
+'@neo4j-cypher/react-codemirror': patch
+---
+
+Declares `react-dom` as a peer dependency, since `CypherEditor` now imports `createPortal` from it to render the editor action buttons overlay

packages/react-codemirror-playground/src/App.tsx

@@ -33,6 +33,35 @@ function InlinePanelDemo({ onClose }: { onClose: () => void }) {
   );
 }
 
+function EditorActionsDemo() {
+  return (
+    <div style={{ display: 'flex', gap: 4, padding: 4 }}>
+      <button
+        style={{
+          background: '#e5e7eb',
+          borderRadius: 4,
+          padding: '2px 8px',
+          fontSize: 12,
+        }}
+      >
+        …
+      </button>
+      <button
+        onClick={() => {}}
+        style={{
+          background: '#2563eb',
+          color: 'white',
+          borderRadius: 4,
+          padding: '2px 10px',
+          fontSize: 12,
+        }}
+      >
+        Run
+      </button>
+    </div>
+  );
+}
+
 const demos = {
   allTokenTypes: `MATCH (variable :Label)-[:REL_TYPE]->()
 WHERE variable.property = "String"
@@ -202,7 +231,9 @@ export function App() {
                 <button
                   key={demoName}
                   className={`hover:bg-blue-600 text-white font-bold py-1 px-3 rounded
-                ${selectedDemoName === demoName ? 'bg-blue-600' : 'bg-blue-400'}`}
+                ${
+                  selectedDemoName === demoName ? 'bg-blue-600' : 'bg-blue-400'
+                }`}
                   onClick={() => {
                     setSelectedDemoName(demoName);
                     setValue(demos[demoName]);
@@ -215,7 +246,8 @@ export function App() {
               ))}
             </div>
             <CypherEditor
-              className="border-2 border-gray-100 dark:border-gray-400 text-sm"
+              className="border-2 border-gray-100 dark:border-gray-400 text-sm max-h-[200px]"
+              lineWrap
               value={value}
               ref={editorRef}
               onChange={setValue}
@@ -233,6 +265,7 @@ export function App() {
               }}
               ariaLabel="Cypher Editor"
               inlinePanel={inlinePanel}
+              editorActions={<EditorActionsDemo />}
               diff={diff}
             />
             {inlinePanelContainer &&

packages/react-codemirror/package.json

@@ -78,7 +78,8 @@
     "vite": "^4.5.10"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "engines": {
     "node": ">=24.11.1"

packages/react-codemirror/src/CypherEditor.tsx

@@ -19,13 +19,19 @@ import {
   type InlinePanelController,
 } from './inlinePanel';
 import { createDiffExtension, type DiffProps } from './diffView';
+import {
+  createEditorActionsController,
+  type EditorActionsCallbacks,
+  type EditorActionsController,
+} from './editorActions';
 import {
   formatQuery,
   CypherLanguageService,
   type DbSchema,
 } from '@neo4j-cypher/language-support';
 import debounce from 'lodash.debounce';
-import { Component, createRef } from 'react';
+import { Component, createRef, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 import { DEBOUNCE_TIME } from './constants';
 import {
   replaceHistory,
@@ -196,6 +202,12 @@ export interface CypherEditorProps {
    * Deleted lines are shown as uneditable widgets.
    */
   diff?: DiffProps | null;
+  /**
+   * React content rendered as a cluster of action buttons (e.g. a context menu
+   * + Run) pinned to the top-right corner of the editor. Omit (or `null`) to
+   * hide it.
+   */
+  editorActions?: ReactNode;
 }
 
 export type InlinePanelProps = {
@@ -308,7 +320,9 @@ const formatLineNumber =
     return a.toString();
   };
 
-type CypherEditorState = { cypherSupportEnabled: boolean };
+type CypherEditorState = {
+  editorActionsContainer: HTMLElement | null;
+};
 
 const ExternalEdit = Annotation.define<boolean>();
 const WorkerURL = new URL('./lang-cypher/lintWorker.mjs', import.meta.url)
@@ -393,6 +407,17 @@ export class CypherEditor extends Component<
   editorView: React.MutableRefObject<EditorView> = createRef();
   private schemaRef: React.MutableRefObject<CypherConfig> = createRef();
   private inlinePanelController: InlinePanelController | null = null;
+  private editorActionsController: EditorActionsController | null = null;
+
+  state: CypherEditorState = {
+    editorActionsContainer: null,
+  };
+
+  private editorActionsCallbacks: EditorActionsCallbacks = {
+    onMount: (container) =>
+      this.setState({ editorActionsContainer: container }),
+    onUnmount: () => this.setState({ editorActionsContainer: null }),
+  };
 
   /**
    * Format Cypher query
@@ -505,6 +530,7 @@ export class CypherEditor extends Component<
     );
 
     this.inlinePanelController = createInlinePanelController();
+    this.editorActionsController = createEditorActionsController();
 
     const changeListener = this.debouncedOnChange
       ? [
@@ -575,6 +601,7 @@ export class CypherEditor extends Component<
         diffCompartment.of(
           this.props.diff ? createDiffExtension(this.props.diff) : [],
         ),
+        this.editorActionsController.extension,
       ],
       doc: this.props.value,
     });
@@ -596,6 +623,22 @@ export class CypherEditor extends Component<
     if (this.props.inlinePanel) {
       this.openInlinePanel(this.props.inlinePanel);
     }
+
+    if (this.props.editorActions != null) {
+      this.setEditorActions(true);
+    }
+  }
+
+  private setEditorActions(active: boolean): void {
+    const view = this.editorView.current;
+    const controller = this.editorActionsController;
+    if (!view || !controller) {
+      return;
+    }
+
+    view.dispatch({
+      effects: controller.set(active ? this.editorActionsCallbacks : null),
+    });
   }
 
   private openInlinePanel(
@@ -752,6 +795,12 @@ export class CypherEditor extends Component<
       });
     }
 
+    const hadActions = prevProps.editorActions != null;
+    const hasActions = this.props.editorActions != null;
+    if (hadActions !== hasActions) {
+      this.setEditorActions(hasActions);
+    }
+
     if (prevProps.domEventHandlers !== this.props.domEventHandlers) {
       this.editorView.current.dispatch({
         effects: domEventHandlerCompartment.reconfigure(
@@ -796,11 +845,16 @@ export class CypherEditor extends Component<
     const themeClass =
       typeof theme === 'string' ? `cm-theme-${theme}` : 'cm-theme';
 
+    const { editorActionsContainer } = this.state;
+
     return (
       <div
         ref={this.editorContainer}
         className={`${themeClass}${className ? ` ${className}` : ''}`}
-      />
+      >
+        {editorActionsContainer &&
+          createPortal(this.props.editorActions, editorActionsContainer)}
+      </div>
     );
   }
 }