diff --git a/packages/compass-editor/src/codemirror/document-autocompleter.ts b/packages/compass-editor/src/codemirror/document-autocompleter.ts index 8a5aea3c3b8..697ef3ab0e9 100644 --- a/packages/compass-editor/src/codemirror/document-autocompleter.ts +++ b/packages/compass-editor/src/codemirror/document-autocompleter.ts @@ -1,6 +1,6 @@ import type { CompletionSource } from '@codemirror/autocomplete'; import { completer, wrapField } from '../autocompleter'; -import { languageName } from '../json-editor'; +import { languageName } from '../editor'; import { resolveTokenAtCursor, completeWordsInString } from './utils'; import type { Token } from './utils'; diff --git a/packages/compass-editor/src/codemirror/utils.test.ts b/packages/compass-editor/src/codemirror/utils.test.ts index ff43348c51f..aa83605b0f4 100644 --- a/packages/compass-editor/src/codemirror/utils.test.ts +++ b/packages/compass-editor/src/codemirror/utils.test.ts @@ -1,5 +1,5 @@ import { expect } from 'chai'; -import { languages } from '../json-editor'; +import { languages } from '../editor'; import { EditorView } from '@codemirror/view'; import { getAncestryOfToken, resolveTokenAtCursor } from './utils'; import { CompletionContext } from '@codemirror/autocomplete'; diff --git a/packages/compass-editor/src/json-editor.tsx b/packages/compass-editor/src/editor.tsx similarity index 99% rename from packages/compass-editor/src/json-editor.tsx rename to packages/compass-editor/src/editor.tsx index b756315978b..90501fcda15 100644 --- a/packages/compass-editor/src/json-editor.tsx +++ b/packages/compass-editor/src/editor.tsx @@ -877,8 +877,10 @@ const BaseEditor = React.forwardRef(function BaseEditor( key: 'Ctrl-Shift-c', run: copyAll, }, - ...defaultKeymap, + // Close brackets keymap overrides default backspace handler for + // matching bracket case ...closeBracketsKeymap, + ...defaultKeymap, ...historyKeymap, ...foldKeymap, ...completionKeymap, diff --git a/packages/compass-editor/src/index.ts b/packages/compass-editor/src/index.ts index dae27f85d78..e06ec89ab65 100644 --- a/packages/compass-editor/src/index.ts +++ b/packages/compass-editor/src/index.ts @@ -6,7 +6,7 @@ export { CodemirrorMultilineEditor, setCodemirrorEditorValue, getCodemirrorEditorValue, -} from './json-editor'; +} from './editor'; export type { EditorView, Command, @@ -14,7 +14,7 @@ export type { Action, EditorRef, Completer, -} from './json-editor'; +} from './editor'; export { createDocumentAutocompleter } from './codemirror/document-autocompleter'; export { createValidationAutocompleter } from './codemirror/validation-autocompleter'; export { createQueryAutocompleter } from './codemirror/query-autocompleter'; diff --git a/packages/compass-editor/test/completer.ts b/packages/compass-editor/test/completer.ts index cf3a1a80548..bc0fa88aef7 100644 --- a/packages/compass-editor/test/completer.ts +++ b/packages/compass-editor/test/completer.ts @@ -5,19 +5,23 @@ import type { CompletionResult, } from '@codemirror/autocomplete'; import { CompletionContext } from '@codemirror/autocomplete'; -import { languages } from '../src/json-editor'; +import { languages } from '../src/editor'; export const setupCodemirrorCompleter = < T extends (...args: any[]) => CompletionSource >( completer: T ) => { - const el = window.document.createElement('div'); - window.document.body.appendChild(el); - const editor = new EditorView({ - doc: '', - extensions: [languages['javascript-expression']()], - parent: el, + let el: HTMLDivElement; + let editor: EditorView; + before(function () { + el = window.document.createElement('div'); + window.document.body.appendChild(el); + editor = new EditorView({ + doc: '', + extensions: [languages['javascript-expression']()], + parent: el, + }); }); const getCompletions = (text = '', ...args: Parameters) => { editor.dispatch({ diff --git a/packages/compass-query-bar/src/components/option-editor.spec.tsx b/packages/compass-query-bar/src/components/option-editor.spec.tsx index 631f6fffbbd..482c0245e14 100644 --- a/packages/compass-query-bar/src/components/option-editor.spec.tsx +++ b/packages/compass-query-bar/src/components/option-editor.spec.tsx @@ -30,7 +30,11 @@ describe('OptionEditor', function () { describe('with autofix enabled', function () { it('fills the input with an empty object "{}" when empty on focus', async function () { render( - {}} value=""> + {}} + value="" + > ); expect(screen.getByRole('textbox').textContent).to.eq(''); @@ -45,7 +49,7 @@ describe('OptionEditor', function () { it('does not change input value when empty on focus', async function () { render( {}} value="{ foo: 1 }" > @@ -62,7 +66,11 @@ describe('OptionEditor', function () { it('should adjust pasted query if pasting over empty brackets with the cursor in the middle', async function () { render( - {}} value=""> + {}} + value="" + > ); userEvent.tab(); @@ -82,7 +90,11 @@ describe('OptionEditor', function () { it('should not modify user text whe pasting when cursor moved', async function () { render( - {}} value=""> + {}} + value="" + > ); userEvent.tab(); @@ -104,7 +116,11 @@ describe('OptionEditor', function () { it('should not modify user text when pasting in empty input', async function () { render( - {}} value=""> + {}} + value="" + > ); userEvent.tab(); diff --git a/packages/compass-query-bar/src/components/option-editor.tsx b/packages/compass-query-bar/src/components/option-editor.tsx index 62620c1e36d..4c8c1f0690f 100644 --- a/packages/compass-query-bar/src/components/option-editor.tsx +++ b/packages/compass-query-bar/src/components/option-editor.tsx @@ -82,7 +82,11 @@ const insightsBadgeStyles = css({ type OptionEditorProps = { id?: string; hasError?: boolean; - hasAutofix?: boolean; + /** + * When `true` will insert an empty document in the input on focus and put + * cursor in the middle of the inserted string. Default is `true` + */ + insertEmptyDocOnFocus?: boolean; onChange: (value: string) => void; onApply?(): void; onBlur?(): void; @@ -97,7 +101,7 @@ type OptionEditorProps = { export const OptionEditor: React.FunctionComponent = ({ id, hasError = false, - hasAutofix = false, + insertEmptyDocOnFocus = true, onChange, onApply, onBlur, @@ -150,7 +154,7 @@ export const OptionEditor: React.FunctionComponent = ({ }, [schemaFields, serverVersion]); const onFocus = () => { - if (hasAutofix) { + if (insertEmptyDocOnFocus) { rafraf(() => { if (editorRef.current?.editorContents === '') { editorRef.current?.applySnippet('\\{${}}'); @@ -160,7 +164,7 @@ export const OptionEditor: React.FunctionComponent = ({ }; const onPaste = (event: React.ClipboardEvent) => { - if (hasAutofix && editorRef.current) { + if (insertEmptyDocOnFocus && editorRef.current) { const { main: currentSelection } = editorRef.current.editor?.state.selection ?? {}; const currentContents = editorRef.current.editorContents; diff --git a/packages/compass-query-bar/src/components/query-option.tsx b/packages/compass-query-bar/src/components/query-option.tsx index 921c3a44bd5..1707c8943a6 100644 --- a/packages/compass-query-bar/src/components/query-option.tsx +++ b/packages/compass-query-bar/src/components/query-option.tsx @@ -191,7 +191,6 @@ const QueryOption: React.FunctionComponent = ({ data-testid={`query-bar-option-${name}-input`} onApply={onApply} insights={insights} - hasAutofix={name === 'filter'} /> ) : (