@finos/legend-query-builder 0.2.0 → 0.2.2

package/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx

@@ -28,21 +28,18 @@ import {
 import {
   COLUMN_SORT_TYPE,
   SortColumnState,
-} from '../../stores/fetch-structure/projection/QueryResultSetModifierState.js';
-import type { QueryBuilderProjectionColumnState } from '../../stores/fetch-structure/projection/QueryBuilderProjectionColumnState.js';
+} from '../../stores/fetch-structure/tds/QueryResultSetModifierState.js';
+import type { QueryBuilderProjectionColumnState } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import { useApplicationStore } from '@finos/legend-application';
-import type { QueryBuilderProjectionState } from '../../stores/fetch-structure/projection/QueryBuilderProjectionState.js';
+import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
 
 const ColumnSortEditor = observer(
-  (props: {
-    projectionState: QueryBuilderProjectionState;
-    sortState: SortColumnState;
-  }) => {
-    const { projectionState, sortState } = props;
+  (props: { tdsState: QueryBuilderTDSState; sortState: SortColumnState }) => {
+    const { tdsState, sortState } = props;
     const applicationStore = useApplicationStore();
-    const sortColumns = projectionState.resultSetModifierState.sortColumns;
-    const projectionOptions = projectionState.columns
+    const sortColumns = tdsState.resultSetModifierState.sortColumns;
+    const projectionOptions = tdsState.projectionColumns
       .filter(
         (projectionCol) =>
           projectionCol === sortState.columnState ||
@@ -72,7 +69,7 @@ const ColumnSortEditor = observer(
       );
     };
     const deleteColumnSort = (): void =>
-      projectionState.resultSetModifierState.deleteSortColumn(sortState);
+      tdsState.resultSetModifierState.deleteSortColumn(sortState);
 
     return (
       <div className="panel__content__form__section__list__item query-builder__projection__options__sort">
@@ -109,11 +106,11 @@ const ColumnSortEditor = observer(
 );
 
 const ColumnsSortEditor = observer(
-  (props: { projectionState: QueryBuilderProjectionState }) => {
-    const { projectionState } = props;
-    const resultSetModifierState = projectionState.resultSetModifierState;
+  (props: { tdsState: QueryBuilderTDSState }) => {
+    const { tdsState } = props;
+    const resultSetModifierState = tdsState.resultSetModifierState;
     const sortColumns = resultSetModifierState.sortColumns;
-    const projectionOptions = projectionState.columns
+    const projectionOptions = tdsState.projectionColumns
       .filter(
         (projectionCol) =>
           !sortColumns.some((sortCol) => sortCol.columnState === projectionCol),
@@ -146,7 +143,7 @@ const ColumnsSortEditor = observer(
             {sortColumns.map((value) => (
               <ColumnSortEditor
                 key={value.columnState.uuid}
-                projectionState={projectionState}
+                tdsState={tdsState}
                 sortState={value}
               />
             ))}
@@ -168,9 +165,9 @@ const ColumnsSortEditor = observer(
 );
 
 export const QueryResultModifierModal = observer(
-  (props: { projectionState: QueryBuilderProjectionState }) => {
-    const { projectionState: projectionState } = props;
-    const resultSetModifierState = projectionState.resultSetModifierState;
+  (props: { tdsState: QueryBuilderTDSState }) => {
+    const { tdsState: tdsState } = props;
+    const resultSetModifierState = tdsState.resultSetModifierState;
     const limitResults = resultSetModifierState.limit;
     const distinct = resultSetModifierState.distinct;
     const close = (): void => resultSetModifierState.setShowModal(false);
@@ -198,7 +195,7 @@ export const QueryResultModifierModal = observer(
           </div>
           <div className="modal__body query-builder__projection__modal__body">
             <div className="query-builder__projection__options">
-              <ColumnsSortEditor projectionState={projectionState} />
+              <ColumnsSortEditor tdsState={tdsState} />
               <div className="panel__content__form__section">
                 <div className="panel__content__form__section__header__label">
                   Eliminate Duplicate Rows

package/src/components/fetch-structure/{QueryBuilderProjectionPanel.tsx → QueryBuilderTDSPanel.tsx}

@@ -49,13 +49,12 @@ import {
   QueryBuilderDerivationProjectionColumnState,
   QueryBuilderSimpleProjectionColumnState,
   QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-} from '../../stores/fetch-structure/projection/QueryBuilderProjectionColumnState.js';
+} from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import { QueryBuilderPropertyExpressionBadge } from '../QueryBuilderPropertyExpressionEditor.js';
 import { QueryResultModifierModal } from './QueryBuilderResultModifierPanel.js';
 import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
-import { QueryBuilderAggregateColumnState } from '../../stores/fetch-structure/projection/aggregation/QueryBuilderAggregationState.js';
+import { QueryBuilderAggregateColumnState } from '../../stores/fetch-structure/tds/aggregation/QueryBuilderAggregationState.js';
 import { flowResult } from 'mobx';
-import { QueryBuilderLambdaEditor } from '../shared/QueryBuilderLambdaEditor.js';
 import { useApplicationStore } from '@finos/legend-application';
 import {
   type QueryBuilderParameterDragSource,
@@ -72,10 +71,11 @@ import {
   QUERY_BUILDER_FUNCTION_DND_TYPE,
 } from '../../stores/explorer/QueryFunctionsExplorerState.js';
 import { DEFAULT_LAMBDA_VARIABLE_NAME } from '../../stores/QueryBuilderConfig.js';
-import { QueryBuilderPostFilterTreeConditionNodeData } from '../../stores/fetch-structure/projection/post-filter/QueryBuilderPostFilterState.js';
+import { QueryBuilderPostFilterTreeConditionNodeData } from '../../stores/fetch-structure/tds/post-filter/QueryBuilderPostFilterState.js';
 import { filterByType } from '@finos/legend-shared';
-import type { QueryBuilderAggregateOperator } from '../../stores/fetch-structure/projection/aggregation/QueryBuilderAggregateOperator.js';
-import type { QueryBuilderProjectionState } from '../../stores/fetch-structure/projection/QueryBuilderProjectionState.js';
+import type { QueryBuilderAggregateOperator } from '../../stores/fetch-structure/tds/aggregation/QueryBuilderAggregateOperator.js';
+import type { QueryBuilderTDSState } from '../../stores/fetch-structure/tds/QueryBuilderTDSState.js';
+import { LambdaEditor } from '../shared/LambdaEditor.js';
 
 const QueryBuilderProjectionColumnContextMenu = observer(
   forwardRef<
@@ -86,12 +86,12 @@ const QueryBuilderProjectionColumnContextMenu = observer(
   >(function QueryBuilderProjectionColumnContextMenu(props, ref) {
     const { projectionColumnState } = props;
     const removeColumn = (): void =>
-      projectionColumnState.projectionState.removeColumn(projectionColumnState);
+      projectionColumnState.tdsState.removeColumn(projectionColumnState);
     const convertToDerivation = (): void => {
       if (
         projectionColumnState instanceof QueryBuilderSimpleProjectionColumnState
       ) {
-        projectionColumnState.projectionState.transformSimpleProjectionToDerivation(
+        projectionColumnState.tdsState.transformSimpleProjectionToDerivation(
           projectionColumnState,
         );
       }
@@ -121,7 +121,7 @@ const QueryBuilderSimpleProjectionColumnEditor = observer(
     ): void =>
       projectionColumnState.changeProperty(
         node,
-        projectionColumnState.projectionState.queryBuilderState.explorerState
+        projectionColumnState.tdsState.queryBuilderState.explorerState
           .humanizePropertyName,
       );
 
@@ -143,7 +143,7 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
     projectionColumnState: QueryBuilderDerivationProjectionColumnState;
   }) => {
     const { projectionColumnState } = props;
-    const hasParserError = projectionColumnState.projectionState.hasParserError;
+    const hasParserError = projectionColumnState.tdsState.hasParserError;
 
     const handleDrop = useCallback(
       (
@@ -210,14 +210,10 @@ const QueryBuilderDerivationProjectionColumnEditor = observer(
           { backdrop__element: hasParserError },
         )}
       >
-        <QueryBuilderLambdaEditor
+        <LambdaEditor
           className="query-builder__lambda-editor"
-          queryBuilderState={
-            projectionColumnState.projectionState.queryBuilderState
-          }
           disabled={
-            projectionColumnState.projectionState
-              .isConvertDerivationProjectionObjects
+            projectionColumnState.tdsState.isConvertDerivationProjectionObjects
           }
           lambdaEditorState={projectionColumnState.derivationLambdaEditorState}
           forceBackdrop={hasParserError}
@@ -237,9 +233,9 @@ const QueryBuilderProjectionColumnEditor = observer(
     const onContextMenuClose = (): void => setIsSelectedFromContextMenu(false);
 
     const { projectionColumnState } = props;
-    const projectionState = projectionColumnState.projectionState;
+    const tdsState = projectionColumnState.tdsState;
     const postFilterColumnStates = Array.from(
-      projectionState.postFilterState.nodes.values(),
+      tdsState.postFilterState.nodes.values(),
     )
       .filter(filterByType(QueryBuilderPostFilterTreeConditionNodeData))
       .map((n) => n.condition.columnState);
@@ -255,27 +251,27 @@ const QueryBuilderProjectionColumnEditor = observer(
       postFilterColumnStates.includes(projectionColumnState);
 
     const removeColumn = (): void =>
-      projectionState.removeColumn(projectionColumnState);
+      tdsState.removeColumn(projectionColumnState);
 
     // name
     const changeColumnName: React.ChangeEventHandler<HTMLInputElement> = (
       event,
     ) => projectionColumnState.setColumnName(event.target.value);
     const isDuplicatedColumnName =
-      projectionColumnState.projectionState.columns.filter(
+      projectionColumnState.tdsState.projectionColumns.filter(
         (column) => column.columnName === projectionColumnState.columnName,
       ).length > 1;
 
     // aggregation
-    const aggregateColumnState = projectionState.aggregationState.columns.find(
+    const aggregateColumnState = tdsState.aggregationState.columns.find(
       (column) => column.projectionColumnState === projectionColumnState,
     );
-    const aggreateOperators = projectionState.aggregationState.operators.filter(
-      (op) => op.isCompatibleWithColumn(projectionColumnState),
+    const aggreateOperators = tdsState.aggregationState.operators.filter((op) =>
+      op.isCompatibleWithColumn(projectionColumnState),
     );
     const changeOperator =
       (val: QueryBuilderAggregateOperator | undefined) => (): void =>
-        projectionState.aggregationState.changeColumnAggregateOperator(
+        tdsState.aggregationState.changeColumnAggregateOperator(
           val,
           projectionColumnState,
         );
@@ -286,10 +282,10 @@ const QueryBuilderProjectionColumnEditor = observer(
         item: QueryBuilderProjectionColumnDragSource,
         monitor: DropTargetMonitor,
       ): void => {
-        const dragIndex = projectionState.columns.findIndex(
+        const dragIndex = tdsState.projectionColumns.findIndex(
           (e) => e === item.columnState,
         );
-        const hoverIndex = projectionState.columns.findIndex(
+        const hoverIndex = tdsState.projectionColumns.findIndex(
           (e) => e === projectionColumnState,
         );
         if (dragIndex === -1 || hoverIndex === -1 || dragIndex === hoverIndex) {
@@ -308,9 +304,9 @@ const QueryBuilderProjectionColumnEditor = observer(
         if (dragIndex > hoverIndex && dragDistance > distanceThreshold) {
           return;
         }
-        projectionState.moveColumn(dragIndex, hoverIndex);
+        tdsState.moveColumn(dragIndex, hoverIndex);
       },
-      [projectionColumnState, projectionState],
+      [projectionColumnState, tdsState],
     );
     const [, dropConnector] = useDrop<QueryBuilderProjectionColumnDragSource>(
       () => ({
@@ -422,6 +418,7 @@ const QueryBuilderProjectionColumnEditor = observer(
 
                 <DropdownMenu
                   className="query-builder__projection__column__aggregate__operator__dropdown"
+                  title="Choose Aggregate Operator..."
                   disabled={!aggreateOperators.length}
                   content={
                     <MenuContent>
@@ -450,7 +447,7 @@ const QueryBuilderProjectionColumnEditor = observer(
                     elevation: 7,
                   }}
                 >
-                  <button
+                  <div
                     className={clsx(
                       'query-builder__projection__column__aggregate__operator__badge',
                       {
@@ -458,18 +455,12 @@ const QueryBuilderProjectionColumnEditor = observer(
                           Boolean(aggregateColumnState),
                       },
                     )}
-                    tabIndex={-1}
-                    title="Choose Aggregate Operator..."
                   >
                     <SigmaIcon />
-                  </button>
-                  <button
-                    className="query-builder__projection__column__aggregate__operator__dropdown__trigger"
-                    tabIndex={-1}
-                    title="Choose Aggregate Operator..."
-                  >
+                  </div>
+                  <div className="query-builder__projection__column__aggregate__operator__dropdown__trigger">
                     <CaretDownIcon />
-                  </button>
+                  </div>
                 </DropdownMenu>
               </div>
             </div>
@@ -495,17 +486,16 @@ const QueryBuilderProjectionColumnEditor = observer(
   },
 );
 
-export const QueryBuilderProjectionPanel = observer(
-  (props: { projectionState: QueryBuilderProjectionState }) => {
+export const QueryBuilderTDSPanel = observer(
+  (props: { tdsState: QueryBuilderTDSState }) => {
     const applicationStore = useApplicationStore();
-    const { projectionState } = props;
-    const projectionColumns = projectionState.columns;
+    const { tdsState } = props;
+    const projectionColumns = tdsState.projectionColumns;
 
     // Toolbar
     const openResultSetModifierEditor = (): void =>
-      projectionState.resultSetModifierState.setShowModal(true);
-    const addNewBlankDerivation = (): void =>
-      projectionState.addNewBlankDerivation();
+      tdsState.resultSetModifierState.setShowModal(true);
+    const addNewBlankDerivation = (): void => tdsState.addNewBlankDerivation();
 
     // Drag and Drop
     const handleDrop = useCallback(
@@ -519,8 +509,8 @@ export const QueryBuilderProjectionPanel = observer(
           case QUERY_BUILDER_FUNCTION_DND_TYPE: {
             const derivationProjectionColumn =
               new QueryBuilderDerivationProjectionColumnState(
-                projectionState,
-                projectionState.queryBuilderState.graphManagerState.graphManager.createDefaultBasicRawLambda(
+                tdsState,
+                tdsState.queryBuilderState.graphManagerState.graphManager.createDefaultBasicRawLambda(
                   { addDummyParameter: true },
                 ),
               );
@@ -530,19 +520,19 @@ export const QueryBuilderProjectionPanel = observer(
                   .packageableElement as ConcreteFunctionDefinition,
               )}`,
             );
-            projectionState.addColumn(derivationProjectionColumn);
+            tdsState.addColumn(derivationProjectionColumn);
             break;
           }
           case QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY:
           case QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY:
-            projectionState.addColumn(
+            tdsState.addColumn(
               new QueryBuilderSimpleProjectionColumnState(
-                projectionState,
+                tdsState,
                 buildPropertyExpressionFromExplorerTreeNodeData(
                   (item as QueryBuilderExplorerTreeDragSource).node,
-                  projectionState.queryBuilderState.explorerState,
+                  tdsState.queryBuilderState.explorerState,
                 ),
-                projectionState.queryBuilderState.explorerState.humanizePropertyName,
+                tdsState.queryBuilderState.explorerState.humanizePropertyName,
               ),
             );
             break;
@@ -550,7 +540,7 @@ export const QueryBuilderProjectionPanel = observer(
             break;
         }
       },
-      [projectionState],
+      [tdsState],
     );
 
     const [{ isDragOver }, dropTargetConnector] = useDrop<
@@ -578,10 +568,10 @@ export const QueryBuilderProjectionPanel = observer(
     );
 
     useEffect(() => {
-      flowResult(projectionState.convertDerivationProjectionObjects()).catch(
+      flowResult(tdsState.convertDerivationProjectionObjects()).catch(
         applicationStore.alertUnhandledError,
       );
-    }, [applicationStore, projectionState]);
+    }, [applicationStore, tdsState]);
 
     return (
       <PanelContent>
@@ -616,7 +606,7 @@ export const QueryBuilderProjectionPanel = observer(
             )}
             {Boolean(projectionColumns.length) && (
               <div
-                data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_PROJECTION}
+                data-testid={QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS}
                 className="query-builder__projection__columns"
               >
                 <DragPreviewLayer
@@ -637,7 +627,7 @@ export const QueryBuilderProjectionPanel = observer(
                 ))}
               </div>
             )}
-            <QueryResultModifierModal projectionState={projectionState} />
+            <QueryResultModifierModal tdsState={tdsState} />
           </PanelDropZone>
         </div>
       </PanelContent>

package/src/components/filter/QueryBuilderFilterPanel.tsx

@@ -79,7 +79,7 @@ import {
   type QueryBuilderProjectionColumnDragSource,
   QueryBuilderSimpleProjectionColumnState,
   QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
-} from '../../stores/fetch-structure/projection/QueryBuilderProjectionColumnState.js';
+} from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
 import type { QueryBuilderFilterOperator } from '../../stores/filter/QueryBuilderFilterOperator.js';
 import { isTypeCompatibleForAssignment } from '../../stores/QueryBuilderValueSpecificationHelper.js';
 import { QUERY_BUILDER_GROUP_OPERATION } from '../../stores/QueryBuilderGroupOperationHelper.js';
@@ -229,6 +229,7 @@ const QueryBuilderFilterConditionEditor = observer(
             </div>
             <DropdownMenu
               className="query-builder-filter-tree__condition-node__operator"
+              title="Choose Operator..."
               content={
                 <MenuContent>
                   {node.condition.operators.map((op) => (
@@ -251,13 +252,9 @@ const QueryBuilderFilterConditionEditor = observer(
               <div className="query-builder-filter-tree__condition-node__operator__label">
                 {node.condition.operator.getLabel(node.condition)}
               </div>
-              <button
-                className="query-builder-filter-tree__condition-node__operator__dropdown__trigger"
-                tabIndex={-1}
-                title="Choose Operator..."
-              >
+              <div className="query-builder-filter-tree__condition-node__operator__dropdown__trigger">
                 <CaretDownIcon />
-              </button>
+              </div>
             </DropdownMenu>
             {node.condition.value && (
               <div

package/src/components/shared/LambdaEditor.tsx

@@ -15,17 +15,12 @@
  */
 
 import { useRef, useEffect, useState, useMemo } from 'react';
-import {
-  editor as monacoEditorAPI,
-  type IDisposable,
-  type IKeyboardEvent,
-} from 'monaco-editor';
+import { editor as monacoEditorAPI, type IDisposable } from 'monaco-editor';
 import { observer } from 'mobx-react-lite';
 import {
   clsx,
   setErrorMarkers,
   disposeEditor,
-  disableEditorHotKeys,
   baseTextEditorSettings,
   getEditorValue,
   normalizeLineEnding,
@@ -45,6 +40,7 @@ import {
 import { flowResult } from 'mobx';
 import { ParserError, type EngineError, type Type } from '@finos/legend-graph';
 import {
+  createPassThroughOnKeyHandler,
   EDITOR_LANGUAGE,
   EDITOR_THEME,
   TAB_SIZE,
@@ -52,11 +48,6 @@ import {
 } from '@finos/legend-application';
 import { QUERY_BUILDER_TEST_ID } from '../QueryBuilder_TestID.js';
 
-export type LambdaEditorOnKeyDownEventHandler = {
-  matcher: (event: IKeyboardEvent) => boolean;
-  action: (event: IKeyboardEvent) => void;
-};
-
 const LambdaErrorFeedback: React.FC<{
   error?: EngineError | undefined;
   discardChanges: () => void;
@@ -102,9 +93,8 @@ const LambdaEditorInline = observer(
     forceExpansion?: boolean | undefined;
     disablePopUp?: boolean | undefined;
     backdropSetter?: ((val: boolean) => void) | undefined;
-    onKeyDownEventHandlers: LambdaEditorOnKeyDownEventHandler[];
     openInPopUp: () => void;
-    onEditorFocusEventHandler?: (() => void) | undefined;
+    onEditorFocus?: (() => void) | undefined;
   }) => {
     const {
       className,
@@ -121,15 +111,13 @@ const LambdaEditorInline = observer(
       disablePopUp,
       useBaseTextEditorSettings,
       hideErrorBar,
-      onKeyDownEventHandlers,
       openInPopUp,
-      onEditorFocusEventHandler,
+      onEditorFocus,
     } = props;
     const applicationStore = useApplicationStore();
     const onDidChangeModelContentEventDisposer = useRef<
       IDisposable | undefined
     >(undefined);
-    const onKeyDownEventDisposer = useRef<IDisposable | undefined>(undefined);
     const onDidFocusEditorWidgetDisposer = useRef<IDisposable | undefined>(
       undefined,
     );
@@ -197,7 +185,13 @@ const LambdaEditorInline = observer(
             : EDITOR_THEME.LEGEND,
           ...lambdaEditorOptions,
         });
-        disableEditorHotKeys(_editor);
+        // NOTE: if we ever set any hotkey explicitly, we would like to use the disposer partern instead
+        // else, we could risk triggering these hotkeys command multiple times
+        // e.g.
+        // const onKeyDownEventDisposer = useRef<IDisposable | undefined>(undefined);
+        // onKeyDownEventDisposer.current?.dispose();
+        // onKeyDownEventDisposer.current = editor.onKeyDown(() => ...)
+        _editor.onKeyDown(() => createPassThroughOnKeyHandler());
         setEditor(_editor);
       }
     }, [editor, applicationStore, useBaseTextEditorSettings]);
@@ -290,36 +284,10 @@ const LambdaEditorInline = observer(
           }
         });
 
-      // set hotkeys (before calling the action, finish parsing the current text value)
-      onKeyDownEventDisposer.current?.dispose(); // dispose to avoid trigger hotkeys multiple times
-      /**
-       * NOTE: We can use `setCommand` here but that does not expose the event so we cannot `stopPropagation`, and we need to
-       * use `stopPropagation` to prevent the event top bubble up to global hotkeys listener.
-       * If we really want to use `setCommand` the other approach is to set <HotKeys/> around this lambda editor to override F9
-       * perhaps that's the cleaner approach because we use `react-hotkeys` to handle it's business, but there is an on-going
-       * issue with <HotKeys/> keybindings are lost when component rerenders and this happen as users type because we call `setValue`
-       * See https://github.com/greena13/react-hotkeys/issues/209
-       *
-       * The main role of this section is to disable `monaco-editor` command and override with global actions, such as generate, compile,
-       * toggle text mode, etc. The important thing is before we do so, we would like to finish the parsing of the current string, otherwise,
-       * those operations can end up flushing the current state and trashing the user input, which is bad, as such, we make sure the
-       * parsing passes before actually calling those global operations.
-       */
-      onKeyDownEventDisposer.current = editor.onKeyDown((event) => {
-        onKeyDownEventHandlers.forEach((handler) => {
-          if (handler.matcher(event)) {
-            event.preventDefault();
-            event.stopPropagation();
-            transformStringToLambda?.cancel();
-            handler.action(event);
-          }
-        });
-      });
-
       onDidFocusEditorWidgetDisposer.current?.dispose();
       onDidFocusEditorWidgetDisposer.current = editor.onDidFocusEditorWidget(
         () => {
-          onEditorFocusEventHandler?.();
+          onEditorFocus?.();
         },
       );
 
@@ -451,7 +419,6 @@ const LambdaEditorPopUp = observer(
     disabled: boolean;
     lambdaEditorState: LambdaEditorState;
     transformStringToLambda: DebouncedFunc<() => GeneratorFn<void>> | undefined;
-    onKeyDownEventHandlers: LambdaEditorOnKeyDownEventHandler[];
     onClose: () => void;
   }) => {
     const {
@@ -459,11 +426,9 @@ const LambdaEditorPopUp = observer(
       disabled,
       lambdaEditorState,
       transformStringToLambda,
-      onKeyDownEventHandlers,
       onClose,
     } = props;
     const applicationStore = useApplicationStore();
-    const onKeyDownEventDisposer = useRef<IDisposable | undefined>(undefined);
     const onDidChangeModelContentEventDisposer = useRef<
       IDisposable | undefined
     >(undefined);
@@ -500,7 +465,13 @@ const LambdaEditorPopUp = observer(
           language: EDITOR_LANGUAGE.PURE,
           theme: EDITOR_THEME.LEGEND,
         });
-        disableEditorHotKeys(_editor);
+        // NOTE: if we ever set any hotkey explicitly, we would like to use the disposer partern instead
+        // else, we could risk triggering these hotkeys command multiple times
+        // e.g.
+        // const onKeyDownEventDisposer = useRef<IDisposable | undefined>(undefined);
+        // onKeyDownEventDisposer.current?.dispose();
+        // onKeyDownEventDisposer.current = editor.onKeyDown(() => ...)
+        _editor.onKeyDown(() => createPassThroughOnKeyHandler());
         setEditor(_editor);
       }
     };
@@ -555,32 +526,6 @@ const LambdaEditorPopUp = observer(
           }
         });
 
-      // set hotkeys (before calling the action, finish parsing the current text value)
-      onKeyDownEventDisposer.current?.dispose(); // dispose to avoid trigger hotkeys multiple times
-      /**
-       * NOTE: We can use `setCommand` here but that does not expose the event so we cannot `stopPropagation`, and we need to
-       * use `stopPropagation` to prevent the event top bubble up to global hotkeys listener.
-       * If we really want to use `setCommand` the other approach is to set <HotKeys/> around this lambda editor to override F9
-       * perhaps that's the cleaner approach because we use `react-hotkeys` to handle it's business, but there is an on-going
-       * issue with <HotKeys/> keybindings are lost when component rerenders and this happen as users type because we call `setValue`
-       * See https://github.com/greena13/react-hotkeys/issues/209
-       *
-       * The main role of this section is to disable `monaco-editor` command and override with global actions, such as generate, compile,
-       * toggle text mode, etc. The important thing is before we do so, we would like to finish the parsing of the current string, otherwise,
-       * those operations can end up flushing the current state and trashing the user input, which is bad, as such, we make sure the
-       * parsing passes before actually calling those global operations.
-       */
-      onKeyDownEventDisposer.current = editor.onKeyDown((event) => {
-        onKeyDownEventHandlers.forEach((handler) => {
-          if (handler.matcher(event)) {
-            event.preventDefault();
-            event.stopPropagation();
-            transformStringToLambda?.cancel();
-            handler.action(event);
-          }
-        });
-      });
-
       // Set the text value
       const currentValue = getEditorValue(editor);
       const editorModel = editor.getModel();
@@ -751,12 +696,7 @@ export const LambdaEditor = observer(
      * To whether or not hide parser error bar in inline mode
      */
     hideErrorBar?: boolean | undefined;
-    /**
-     * Allow adding hotkeys handler to the editor, this is usually used
-     * to allow activating global hotkeys while typing in the editor
-     */
-    onKeyDownEventHandlers?: LambdaEditorOnKeyDownEventHandler[];
-    onEditorFocusEventHandler?: (() => void) | undefined;
+    onEditorFocus?: (() => void) | undefined;
   }) => {
     const {
       className,
@@ -772,8 +712,7 @@ export const LambdaEditor = observer(
       disablePopUp,
       useBaseTextEditorSettings,
       hideErrorBar,
-      onKeyDownEventHandlers,
-      onEditorFocusEventHandler,
+      onEditorFocus,
     } = props;
     const [showPopUp, setShowPopUp] = useState(false);
     const openInPopUp = (): void => setShowPopUp(true);
@@ -798,7 +737,6 @@ export const LambdaEditor = observer(
             disabled={disabled}
             lambdaEditorState={lambdaEditorState}
             transformStringToLambda={debouncedTransformStringToLambda}
-            onKeyDownEventHandlers={onKeyDownEventHandlers ?? []}
             onClose={closePopUp}
           />
         </>
@@ -849,9 +787,8 @@ export const LambdaEditor = observer(
         disablePopUp={disablePopUp}
         useBaseTextEditorSettings={useBaseTextEditorSettings}
         hideErrorBar={hideErrorBar}
-        onKeyDownEventHandlers={onKeyDownEventHandlers ?? []}
         openInPopUp={openInPopUp}
-        onEditorFocusEventHandler={onEditorFocusEventHandler}
+        onEditorFocus={onEditorFocus}
       />
     );
   },