diff --git a/src-web/components/core/Editor/extensions.ts b/src-web/components/core/Editor/extensions.ts index e9317a69..ebfb4116 100644 --- a/src-web/components/core/Editor/extensions.ts +++ b/src-web/components/core/Editor/extensions.ts @@ -21,6 +21,7 @@ import { import { lintKeymap } from '@codemirror/lint'; import { searchKeymap } from '@codemirror/search'; +import type { Extension } from '@codemirror/state'; import { EditorState } from '@codemirror/state'; import { crosshairCursor, @@ -73,6 +74,8 @@ export const syntaxHighlightStyle = HighlightStyle.define([ const syntaxTheme = EditorView.theme({}, { dark: true }); +const closeBracketsExts: Extension = [closeBrackets(), keymap.of([...closeBracketsKeymap])]; + const syntaxExtensions: Record, LanguageSupport | null> = { graphql: null, json: json(), @@ -85,6 +88,8 @@ const syntaxExtensions: Record, LanguageSup markdown: markdown(), }; +const closeBracketsFor: (keyof typeof syntaxExtensions)[] = ['json', 'javascript']; + export function getLanguageExtension({ language, useTemplating = false, @@ -110,7 +115,13 @@ export function getLanguageExtension({ return base; } - const extraExtensions = language === 'url' ? [pathParametersPlugin(onClickPathParameter)] : []; + const extraExtensions: Extension[] = + language === 'url' ? [pathParametersPlugin(onClickPathParameter)] : []; + + // Only close brackets on languages that need it + if (language && closeBracketsFor.includes(language)) { + extraExtensions.push(closeBracketsExts); + } return twig({ base, @@ -209,9 +220,8 @@ export const multiLineExtensions = ({ hideGutter }: { hideGutter?: boolean }) => }), EditorState.allowMultipleSelections.of(true), indentOnInput(), - closeBrackets(), rectangularSelection(), crosshairCursor(), highlightActiveLineGutter(), - keymap.of([...closeBracketsKeymap, ...searchKeymap, ...foldKeymap, ...lintKeymap]), + keymap.of([...searchKeymap, ...foldKeymap, ...lintKeymap]), ];