diff --git a/docs/en_US/images/preferences_sql_editor.png b/docs/en_US/images/preferences_sql_editor.png index ca2c3086f..d47dcfc7d 100644 Binary files a/docs/en_US/images/preferences_sql_editor.png and b/docs/en_US/images/preferences_sql_editor.png differ diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx b/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx index f504362bb..6df9b3709 100644 --- a/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx +++ b/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx @@ -36,6 +36,7 @@ import { bracketMatching, indentUnit, foldKeymap, + indentService } from '@codemirror/language'; import syntaxHighlighting from '../extensions/highlighting'; @@ -46,6 +47,7 @@ import CustomEditorView from '../CustomEditorView'; import breakpointGutter, { breakpointEffect } from '../extensions/breakpointGutter'; import activeLineExtn from '../extensions/activeLineMarker'; import currentQueryHighlighterExtn from '../extensions/currentQueryHighlighter'; +import { indentNewLine } from '../extensions/extraStates'; const arrowRightHtml = ReactDOMServer.renderToString(); const arrowDownHtml = ReactDOMServer.renderToString(); @@ -134,7 +136,15 @@ const defaultExtensions = [ drop: handleDrop, paste: handlePaste, }), - errorMarkerExtn() + errorMarkerExtn(), + indentService.of((context, pos) => { + if(context.state.facet(indentNewLine)) { + const previousLine = context.lineAt(pos, -1); + let prevText = previousLine.text.replaceAll('\t', ' '.repeat(context.state.tabSize)); + return prevText.match(/^\s*/)?.[0].length; + } + return 0; + }), ]; export default function Editor({ @@ -310,7 +320,7 @@ export default function Editor({ ); if (pref.use_spaces) { newConfigExtn.push( - indentUnit.of(new Array(pref.tab_size).fill(' ').join('')), + indentUnit.of(' '.repeat(pref.tab_size)), ); } else { newConfigExtn.push( @@ -318,6 +328,12 @@ export default function Editor({ ); } + if(pref.indent_new_line) { + newConfigExtn.push(indentNewLine.of(true)); + } else { + newConfigExtn.push(indentNewLine.of(false)); + } + if (pref.wrap_code) { newConfigExtn.push( EditorView.lineWrapping diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/extensions/extraStates.js b/web/pgadmin/static/js/components/ReactCodeMirror/extensions/extraStates.js new file mode 100644 index 000000000..13023fdce --- /dev/null +++ b/web/pgadmin/static/js/components/ReactCodeMirror/extensions/extraStates.js @@ -0,0 +1,14 @@ +///////////////////////////////////////////////////////////// +// +// pgAdmin 4 - PostgreSQL Tools +// +// Copyright (C) 2013 - 2023, The pgAdmin Development Team +// This software is released under the PostgreSQL Licence +// +////////////////////////////////////////////////////////////// + +import { Facet } from '@codemirror/state'; + +export const indentNewLine = Facet.define({ + combine: values => values.length ? values[0] : true, +}); diff --git a/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py b/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py index 4ec5a37b4..e120644ca 100644 --- a/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py +++ b/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py @@ -892,6 +892,16 @@ def register_query_tool_preferences(self): ) ) + self.sql_font_size = self.preference.register( + 'Editor', 'indent_new_line', + gettext("Auto-indent new line?"), 'boolean', True, + category_label=PREF_LABEL_EDITOR, + help_str=gettext( + 'Specifies whether the newly added line using enter key should ' + 'be auto-indented or not' + ) + ) + self.expression_width = self.preference.register( 'editor', 'expression_width', gettext("Expression Width"), 'integer', 50,