@neo4j-cypher/react-codemirror 2.0.0-next.4 → 2.0.0-next.41

package/src/CypherEditor.tsx

@@ -1,25 +1,54 @@
+import { insertNewline } from '@codemirror/commands';
+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 {
-  Annotation,
-  Compartment,
-  EditorState,
-  Extension,
-} from '@codemirror/state';
+  createInlinePanelController,
+  type InlinePanelCallbacks,
+  type InlinePanelController,
+} from './inlinePanel';
+import { createDiffExtension, type DiffProps } from './diffView';
 import {
-  EditorView,
-  KeyBinding,
-  keymap,
-  lineNumbers,
-  ViewUpdate,
-} from '@codemirror/view';
-import type { DbSchema } from '@neo4j-cypher/language-support';
-import { Component, createRef } from 'react';
+  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, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { DEBOUNCE_TIME } from './constants';
 import {
   replaceHistory,
   replMode as historyNavigation,
-} from './history-navigation';
-import { cypher, CypherConfig } from './lang-cypher/lang-cypher';
-import { basicNeo4jSetup } from './neo4j-setup';
+} from './historyNavigation';
+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 type { LintWorker } from '@neo4j-cypher/lint-worker';
+import workerpool from 'workerpool';
+
+type DomEventHandlers = Parameters<typeof EditorView.domEventHandlers>[0];
+
+/**
+ * Normalize CRLF line endings to LF, which is what CodeMirror expects.
+ * CodeMirror collapses `\r\n` into a single line break, so a raw `value`
+ * string with CRLF endings is longer than the resulting document. Normalizing
+ * up front keeps the document length in sync with the value length used for
+ * cursor placement, and avoids "Selection points outside of document" errors.
+ * https://codemirror.net/docs/ref/#state.EditorState^lineSeparator
+ */
+function normalizeLineEndings(value: string): string {
+  return value.replace(/\r\n/g, '\n');
+}
 
 export interface CypherEditorProps {
   /**
@@ -40,7 +69,14 @@ export interface CypherEditorProps {
    */
   onExecute?: (cmd: string) => void;
   /**
-   * The editor history navigateable via up/down arrow keys. Order newest to oldest.
+   * If true, pressing enter will add a new line to the editor and cmd/ctrl + enter will execute the query.
+   * Otherwise pressing enter on a single line will execute the query.
+   *
+   * @default false
+   */
+  newLineOnEnter?: boolean;
+  /**
+   * The editor history navigable via up/down arrow keys. Order newest to oldest.
    * Add to this list with the `onExecute` callback for REPL style history.
    */
   history?: string[];
@@ -57,6 +93,10 @@ export interface CypherEditorProps {
    * @default false
    */
   autofocus?: boolean;
+  /**
+   * Where to place the cursor in the query. Cannot be enabled at the same time than autofocus
+   */
+  offset?: number;
   /**
    * Whether the editor should wrap lines.
    *
@@ -69,6 +109,20 @@ export interface CypherEditorProps {
    * @default true
    */
   lint?: boolean;
+  /**
+   * Whether the signature help tooltip should be shown below the text.
+   * If false, it will be shown above.
+   *
+   * @default true
+   */
+  showSignatureTooltipBelow?: boolean;
+  /**
+   * Internal feature flags for the editor. Don't use in production
+   *
+   */
+  featureFlags?: {
+    consoleCommands?: boolean;
+  };
   /**
    * The schema to use for autocompletion and linting.
    *
@@ -96,32 +150,253 @@ export interface CypherEditorProps {
    * @param {ViewUpdate} viewUpdate - the view update from codemirror
    */
   onChange?(value: string, viewUpdate: ViewUpdate): void;
-}
 
-const executeKeybinding = (onExecute?: (cmd: string) => void) =>
-  onExecute
-    ? [
-        {
-          key: 'Ctrl-Enter',
-          mac: 'Mod-Enter',
-          preventDefault: true,
-          run: (view: EditorView) => {
-            const doc = view.state.doc.toString();
-            if (doc.trim() !== '') {
-              onExecute(doc);
-            }
+  /**
+   * Map of event handlers to add to the editor.
+   *
+   * Note that the props are compared by reference, meaning object defined inline
+   * will cause the editor to re-render (much like the style prop does in this example:
+   * <div style={{}} />
+   *
+   * Memoize the object if you want/need to avoid this.
+   *
+   * @example
+   * // listen to blur events
+   * <CypherEditor domEventHandlers={{blur: () => console.log("blur event fired")}} />
+   */
+  domEventHandlers?: DomEventHandlers;
+  /**
+   * Placeholder text to display when the editor is empty.
+   */
+  placeholder?: string;
+  /**
+   * Whether the editor should show line numbers.
+   *
+   * @default true
+   */
+  lineNumbers?: boolean;
+  /**
+   * Whether the editor is read-only.
+   *
+   * @default false
+   */
+  readonly?: boolean;
+
+  /**
+   * String value to assign to the aria-label attribute of the editor.
+   */
+  ariaLabel?: string;
+
+  /**
+   * Whether keybindings for inserting indents with the Tab key should be disabled.
+   *
+   * true will not create keybindings for inserting indents.
+   * false will create keybindings for inserting indents.
+   *
+   * @default false
+   */
+  moveFocusOnTab?: boolean;
+  /**
+   * Render a panel as a block widget inside the editor.
+   * The widget DOM is only rebuilt when `pos` or `placement` change
+   */
+  inlinePanel?: InlinePanelProps | null;
+  /**
+   * Render a unified diff of the current document against `diff.original`.
+   * 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;
+}
 
-            return true;
-          },
+export type InlinePanelProps = {
+  /**
+   * Position the panel anchors to.
+   */
+  pos: number;
+  /**
+   * Whether to render above or below the line
+   *
+   * @default 'above'
+   */
+  placement?: 'above' | 'below';
+} & InlinePanelCallbacks;
+
+const format = (view: EditorView): void => {
+  try {
+    const doc = view.state.doc.toString();
+    const { formattedQuery, newCursorPos } = formatQuery(doc, {
+      cursorPosition: view.state.selection.main.anchor,
+    });
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: doc.length,
+        insert: formattedQuery,
+      },
+      selection: { anchor: newCursorPos },
+    });
+  } catch {
+    // Formatting failed, likely because of a syntax error
+  }
+};
+
+const executeKeybinding = (
+  onExecute?: (cmd: string) => void,
+  newLineOnEnter?: boolean,
+  flush?: () => void,
+) => {
+  const keybindings: Record<string, KeyBinding> = {
+    'Shift-Enter': {
+      key: 'Shift-Enter',
+      run: insertNewline,
+    },
+    'Ctrl-Enter': {
+      key: 'Ctrl-Enter',
+      run: () => true,
+    },
+    Enter: {
+      key: 'Enter',
+      run: insertNewline,
+    },
+  };
+  if (onExecute) {
+    keybindings['Ctrl-Enter'] = {
+      key: 'Ctrl-Enter',
+      mac: 'Mod-Enter',
+      preventDefault: true,
+      run: (view: EditorView) => {
+        const doc = view.state.doc.toString();
+        if (doc.trim() !== '') {
+          flush?.();
+          onExecute(doc);
+        }
+
+        return true;
+      },
+    };
+
+    if (!newLineOnEnter) {
+      keybindings['Enter'] = {
+        key: 'Enter',
+        preventDefault: true,
+        run: (view: EditorView) => {
+          const doc = view.state.doc.toString();
+          if (doc.includes('\n')) {
+            // Returning false means the event will mark the event
+            // as not handled and the default behavior will be executed
+            return false;
+          }
+
+          if (doc.trim() !== '') {
+            flush?.();
+            onExecute(doc);
+          }
+
+          return true;
         },
-      ]
-    : [];
+      };
+    }
+  }
+
+  return Object.values(keybindings);
+};
 
 const themeCompartment = new Compartment();
 const keyBindingCompartment = new Compartment();
+const lineNumbersCompartment = new Compartment();
+const readOnlyCompartment = new Compartment();
+const placeholderCompartment = new Compartment();
+const domEventHandlerCompartment = new Compartment();
+const diffCompartment = new Compartment();
+
+const formatLineNumber =
+  (prompt?: string) => (a: number, state: EditorState) => {
+    if (state.doc.lines === 1 && prompt !== undefined) {
+      return prompt;
+    }
+
+    return a.toString();
+  };
+
+type CypherEditorState = {
+  editorActionsContainer: HTMLElement | null;
+};
 
 const ExternalEdit = Annotation.define<boolean>();
-export class CypherEditor extends Component<CypherEditorProps> {
+const WorkerURL = new URL('./lang-cypher/lintWorker.mjs', import.meta.url)
+  .pathname;
+
+class CodemirrorSymbolFetcher {
+  constructor(languageService: CypherLanguageService) {
+    this.languageService = languageService;
+  }
+  private languageService: CypherLanguageService;
+  private processing = false;
+  private nextJob:
+    | {
+        query: string;
+        schema: DbSchema;
+      }
+    | undefined;
+  private symbolTablePool = workerpool.pool(WorkerURL, {
+    minWorkers: 1,
+    workerOpts: { type: 'module' },
+    workerTerminateTimeout: 2000,
+  });
+
+  public queueSymbolJob(query: string, schema: DbSchema) {
+    this.nextJob = { query, schema };
+    if (!this.processing) {
+      void this.processJobQueue();
+    }
+  }
+
+  public terminate() {
+    this.nextJob = undefined;
+    void this.symbolTablePool.terminate();
+  }
+
+  private async processJobQueue() {
+    this.processing = true;
+    while (this.nextJob) {
+      try {
+        const query = this.nextJob.query;
+        const dbSchema = this.nextJob.schema;
+        this.nextJob = undefined;
+        const proxyWorker =
+          (await this.symbolTablePool.proxy()) as unknown as LintWorker;
+
+        const result = await proxyWorker.lintCypherQuery(query, dbSchema);
+
+        if (result.symbolTables) {
+          this.languageService.setSymbolsInfo({
+            query,
+            symbolTables: result.symbolTables,
+          });
+        }
+      } catch (err) {
+        //eslint-disable-next-line
+        console.log('Symbol table calculation failed ' + String(err));
+      }
+    }
+    this.processing = false;
+  }
+}
+
+export class CypherEditor extends Component<
+  CypherEditorProps,
+  CypherEditorState
+> {
+  /**
+   * The symbol fetcher object used to fetch the current symbol table on document changes
+   */
+  symbolFetcher: CodemirrorSymbolFetcher;
   /**
    * The codemirror editor container.
    */
@@ -135,6 +410,25 @@ export class CypherEditor extends Component<CypherEditorProps> {
    */
   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
+   */
+  format() {
+    format(this.editorView.current);
+  }
 
   /**
    * Focus the editor
@@ -148,8 +442,17 @@ export class CypherEditor extends Component<CypherEditorProps> {
    * For example, to move the cursor to the end of the editor, use `value.length`
    */
   updateCursorPosition(position: number) {
-    this.editorView.current?.dispatch({
-      selection: { anchor: position, head: position },
+    const view = this.editorView.current;
+    if (!view) {
+      return;
+    }
+
+    // Clamp to the doc length; `position` may come from a raw value longer than
+    // the doc (e.g. CRLF endings), which would throw "Selection points outside
+    // of document".
+    const clamped = Math.max(0, Math.min(position, view.state.doc.length));
+    view.dispatch({
+      selection: { anchor: clamped, head: clamped },
     });
   }
 
@@ -158,13 +461,17 @@ export class CypherEditor extends Component<CypherEditorProps> {
    */
   setValueAndFocus(value = '') {
     const currentCmValue = this.editorView.current.state?.doc.toString() ?? '';
+    const normalizedValue = normalizeLineEndings(value);
     this.editorView.current.dispatch({
       changes: {
         from: 0,
         to: currentCmValue.length,
-        insert: value,
+        insert: normalizedValue,
+      },
+      selection: {
+        anchor: normalizedValue.length,
+        head: normalizedValue.length,
       },
-      selection: { anchor: value.length, head: value.length },
     });
     this.editorView.current?.focus();
   }
@@ -174,11 +481,24 @@ export class CypherEditor extends Component<CypherEditorProps> {
     schema: {},
     overrideThemeBackgroundColor: false,
     lineWrap: false,
+    showSignatureTooltipBelow: true,
     extraKeybindings: [],
     history: [],
     theme: 'light',
+    lineNumbers: true,
+    newLineOnEnter: false,
+    moveFocusOnTab: false,
   };
 
+  private debouncedOnChange = this.props.onChange
+    ? debounce(
+        ((value, viewUpdate) => {
+          this.props.onChange(value, viewUpdate);
+        }) satisfies CypherEditorProps['onChange'],
+        DEBOUNCE_TIME,
+      )
+    : undefined;
+
   componentDidMount(): void {
     const {
       theme,
@@ -187,20 +507,50 @@ export class CypherEditor extends Component<CypherEditorProps> {
       overrideThemeBackgroundColor,
       schema,
       lint,
-      onChange,
+      showSignatureTooltipBelow,
+      featureFlags,
       onExecute,
+      newLineOnEnter,
     } = this.props;
 
-    this.schemaRef.current = { schema, lint };
+    this.schemaRef.current = {
+      languageService: new CypherLanguageService(),
+      schema,
+      lint,
+      showSignatureTooltipBelow,
+      featureFlags: {
+        consoleCommands: true,
+        ...featureFlags,
+      },
+      useLightVersion: false,
+      setUseLightVersion: (newVal) => {
+        if (this.schemaRef.current !== undefined) {
+          this.schemaRef.current.useLightVersion = newVal;
+        }
+      },
+    };
+
+    this.symbolFetcher = new CodemirrorSymbolFetcher(
+      this.schemaRef.current.languageService,
+    );
 
     const themeExtension = getThemeExtension(
       theme,
       overrideThemeBackgroundColor,
     );
 
-    const changeListener = onChange
+    this.inlinePanelController = createInlinePanelController();
+    this.editorActionsController = createEditorActionsController();
+
+    const changeListener = this.debouncedOnChange
       ? [
           EditorView.updateListener.of((upt: ViewUpdate) => {
+            if (upt.docChanged) {
+              this.symbolFetcher.queueSymbolJob(
+                upt.state.doc.toString(),
+                this.schemaRef.current.schema,
+              );
+            }
             const wasUserEdit = !upt.transactions.some((tr) =>
               tr.annotation(ExternalEdit),
             );
@@ -208,7 +558,7 @@ export class CypherEditor extends Component<CypherEditorProps> {
             if (upt.docChanged && wasUserEdit) {
               const doc = upt.state.doc;
               const value = doc.toString();
-              onChange(value, upt);
+              this.debouncedOnChange(value, upt);
             }
           }),
         ]
@@ -217,26 +567,53 @@ export class CypherEditor extends Component<CypherEditorProps> {
     this.editorState.current = EditorState.create({
       extensions: [
         keyBindingCompartment.of(
-          keymap.of([...executeKeybinding(onExecute), ...extraKeybindings]),
+          keymap.of([
+            ...executeKeybinding(onExecute, newLineOnEnter, () =>
+              this.debouncedOnChange?.flush(),
+            ),
+            ...extraKeybindings,
+          ]),
         ),
+        richClipboardCopier,
         historyNavigation(this.props),
-        basicNeo4jSetup(),
+        basicNeo4jSetup(this.props),
         themeCompartment.of(themeExtension),
         changeListener,
         cypher(this.schemaRef.current),
         lineWrap ? EditorView.lineWrapping : [],
 
-        lineNumbers({
-          formatNumber: (a, state) => {
-            if (state.doc.lines === 1 && this.props.prompt !== undefined) {
-              return this.props.prompt;
-            }
-
-            return a.toString();
-          },
-        }),
+        lineNumbersCompartment.of(
+          this.props.lineNumbers
+            ? lineNumbers({ formatNumber: formatLineNumber(this.props.prompt) })
+            : [],
+        ),
+        readOnlyCompartment.of(EditorState.readOnly.of(this.props.readonly)),
+        placeholderCompartment.of(
+          this.props.placeholder ? placeholder(this.props.placeholder) : [],
+        ),
+        domEventHandlerCompartment.of(
+          this.props.domEventHandlers
+            ? EditorView.domEventHandlers(this.props.domEventHandlers)
+            : [],
+        ),
+        this.props.ariaLabel
+          ? EditorView.contentAttributes.of({
+              'aria-label': this.props.ariaLabel,
+            })
+          : [],
+        !this.props.moveFocusOnTab
+          ? EditorView.contentAttributes.of({
+              'aria-description':
+                'Press Escape to leave the editor and continue tabbing through the page',
+            })
+          : [],
+        this.inlinePanelController.extension,
+        diffCompartment.of(
+          this.props.diff ? createDiffExtension(this.props.diff) : [],
+        ),
+        this.editorActionsController.extension,
       ],
-      doc: this.props.value,
+      doc: normalizeLineEndings(this.props.value ?? ''),
     });
 
     this.editorView.current = new EditorView({
@@ -249,7 +626,72 @@ export class CypherEditor extends Component<CypherEditorProps> {
       if (this.props.value) {
         this.updateCursorPosition(this.props.value.length);
       }
+    } else if (this.props.offset) {
+      this.updateCursorPosition(this.props.offset);
+    }
+
+    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(
+    props: NonNullable<CypherEditorProps['inlinePanel']>,
+  ): void {
+    const view = this.editorView.current;
+    const controller = this.inlinePanelController;
+    if (!view || !controller) {
+      return;
+    }
+
+    const pos = Math.max(0, Math.min(props.pos, view.state.doc.length));
+    const line = view.state.doc.lineAt(pos);
+    controller.updateCallbacks({
+      onMount: props.onMount,
+      onUnmount: props.onUnmount,
+    });
+    view.dispatch({
+      effects: controller.show({
+        pos: props.placement === 'below' ? line.to : line.from,
+        placement: props.placement,
+        onMount: props.onMount,
+        onUnmount: props.onUnmount,
+      }),
+    });
+  }
+
+  private updateInlinePanel(
+    props: NonNullable<CypherEditorProps['inlinePanel']>,
+  ): void {
+    this.inlinePanelController?.updateCallbacks({
+      onMount: props.onMount,
+      onUnmount: props.onUnmount,
+    });
+  }
+
+  private closeInlinePanel(): void {
+    const view = this.editorView.current;
+    const controller = this.inlinePanelController;
+    if (!view || !controller) {
+      return;
     }
+    view.dispatch({ effects: controller.hide() });
   }
 
   componentDidUpdate(prevProps: CypherEditorProps): void {
@@ -260,12 +702,16 @@ export class CypherEditor extends Component<CypherEditorProps> {
     // Handle externally set value
     const currentCmValue = this.editorView.current.state?.doc.toString() ?? '';
 
-    if (this.props.value !== undefined && currentCmValue !== this.props.value) {
+    if (
+      this.props.value !== undefined && // If the component becomes uncontolled, we just leave the value as is
+      this.props.value !== prevProps.value && // The value prop has changed, we need to update the editor
+      this.props.value !== currentCmValue // No need to dispatch an update if the value is the same
+    ) {
       this.editorView.current.dispatch({
         changes: {
           from: 0,
           to: currentCmValue.length,
-          insert: this.props.value ?? '',
+          insert: normalizeLineEndings(this.props.value ?? ''),
         },
         annotations: [ExternalEdit.of(true)],
       });
@@ -288,6 +734,35 @@ export class CypherEditor extends Component<CypherEditorProps> {
       });
     }
 
+    if (
+      prevProps.lineNumbers !== this.props.lineNumbers ||
+      prevProps.prompt !== this.props.prompt
+    ) {
+      this.editorView.current.dispatch({
+        effects: lineNumbersCompartment.reconfigure(
+          this.props.lineNumbers
+            ? lineNumbers({ formatNumber: formatLineNumber(this.props.prompt) })
+            : [],
+        ),
+      });
+    }
+
+    if (prevProps.readonly !== this.props.readonly) {
+      this.editorView.current.dispatch({
+        effects: readOnlyCompartment.reconfigure(
+          EditorState.readOnly.of(this.props.readonly),
+        ),
+      });
+    }
+
+    if (prevProps.placeholder !== this.props.placeholder) {
+      this.editorView.current.dispatch({
+        effects: placeholderCompartment.reconfigure(
+          this.props.placeholder ? placeholder(this.props.placeholder) : [],
+        ),
+      });
+    }
+
     if (
       prevProps.extraKeybindings !== this.props.extraKeybindings ||
       prevProps.onExecute !== this.props.onExecute
@@ -295,13 +770,57 @@ export class CypherEditor extends Component<CypherEditorProps> {
       this.editorView.current.dispatch({
         effects: keyBindingCompartment.reconfigure(
           keymap.of([
-            ...executeKeybinding(this.props.onExecute),
+            ...executeKeybinding(
+              this.props.onExecute,
+              this.props.newLineOnEnter,
+              () => this.debouncedOnChange?.flush(),
+            ),
             ...this.props.extraKeybindings,
           ]),
         ),
       });
     }
 
+    const prevPanel = prevProps.inlinePanel;
+    const nextPanel = this.props.inlinePanel;
+    if (prevPanel !== nextPanel) {
+      if (!nextPanel) {
+        this.closeInlinePanel();
+      } else if (
+        !prevPanel ||
+        prevPanel.pos !== nextPanel.pos ||
+        prevPanel.placement !== nextPanel.placement
+      ) {
+        this.openInlinePanel(nextPanel);
+      } else {
+        this.updateInlinePanel(nextPanel);
+      }
+    }
+
+    if (prevProps.diff?.original !== this.props.diff?.original) {
+      this.editorView.current.dispatch({
+        effects: diffCompartment.reconfigure(
+          this.props.diff ? createDiffExtension(this.props.diff) : [],
+        ),
+      });
+    }
+
+    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(
+          this.props.domEventHandlers
+            ? EditorView.domEventHandlers(this.props.domEventHandlers)
+            : [],
+        ),
+      });
+    }
+
     // This component rerenders on every keystroke and comparing the
     // full lists of editor strings on every render could be expensive.
     const didChangeHistoryEstimate =
@@ -321,10 +840,13 @@ export class CypherEditor extends Component<CypherEditorProps> {
     */
     this.schemaRef.current.schema = this.props.schema;
     this.schemaRef.current.lint = this.props.lint;
+    this.schemaRef.current.featureFlags = this.props.featureFlags;
   }
 
   componentWillUnmount(): void {
     this.editorView.current?.destroy();
+    this.symbolFetcher?.terminate();
+    cleanupWorkers();
   }
 
   render(): React.ReactNode {
@@ -333,11 +855,16 @@ export class CypherEditor extends Component<CypherEditorProps> {
     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>
     );
   }
 }