feat(extensions): Allow replacing editors using extensions (#37499)

superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx

@@ -579,15 +579,11 @@ const ColumnSelectPopover = ({
                     ''
                   }
                   ref={sqlEditorRef}
-                  showLoadingForImport
                   onChange={onSqlExpressionChange}
                   width="100%"
                   height={`${height - 120}px`}
-                  showGutter={false}
-                  editorProps={{ $blockScrolling: true }}
-                  enableLiveAutocompletion
-                  className="filter-sql-editor"
-                  wrapEnabled
+                  lineNumbers={false}
+                  wordWrap
                   keywords={keywords.map((k: any) =>
                     typeof k === 'string' ? k : k.value || k.name || k,
                   )}

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx

@@ -32,7 +32,6 @@ import {
   screen,
   within,
 } from 'spec/helpers/testing-library';
-import type { AsyncAceEditorProps } from '@superset-ui/core/components';
 import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
 import { Operators } from 'src/explore/constants';
@@ -46,10 +45,9 @@ import { Datasource } from '../../../types';
 import { DndItemType } from '../../DndItemType';
 import DatasourcePanelDragOption from '../../DatasourcePanel/DatasourcePanelDragOption';
 
-jest.mock('@superset-ui/core/components/AsyncAceEditor', () => ({
-  ...jest.requireActual('@superset-ui/core/components/AsyncAceEditor'),
-  SQLEditor: (props: AsyncAceEditorProps) => (
-    <div data-test="react-ace">{props.value}</div>
+jest.mock('src/core/editors', () => ({
+  EditorHost: ({ value }: { value: string }) => (
+    <div data-test="react-ace">{value}</div>
   ),
 }));
 

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx

@@ -489,23 +489,13 @@ test('title changes on custom SQL text change', async () => {
     'ant-tabs-tab-active',
   );
 
-  const container = screen.getByTestId('adhoc-metric-edit-tabs');
-  await waitFor(() => {
-    const textArea = container.getElementsByClassName(
-      'ace_text-input',
-    ) as HTMLCollectionOf<HTMLTextAreaElement>;
-    expect(textArea.length).toBe(1);
-    expect(textArea[0].value).toBe('');
-  });
+  // Wait for the editor to render after tab switch
+  const textArea = (await screen.findByRole('textbox')) as HTMLTextAreaElement;
 
   expect(screen.getByTestId('AdhocMetricEditTitle#trigger')).toHaveTextContent(
     'metric_a',
   );
 
-  const textArea = container.getElementsByClassName(
-    'ace_text-input',
-  )[0] as HTMLTextAreaElement;
-
   // Changing the ACE editor via pasting, since the component
   // handles the textarea value internally, and changing it doesn't
   // trigger the onChange