fix: add auto-closing brackets to DBML editor (#1018)

src/components/code-snippet/languages/dbml-language.ts

@@ -40,6 +40,34 @@ export const setupDBMLLanguage = (monaco: Monaco) => {
     const dataTypesNames = dataTypes.map((dt) => dt.name);
     const datatypePattern = dataTypesNames.join('|');
 
+    // Language configuration for auto-closing brackets, comments, etc.
+    monaco.languages.setLanguageConfiguration('dbml', {
+        brackets: [
+            ['{', '}'],
+            ['[', ']'],
+            ['(', ')'],
+        ],
+        autoClosingPairs: [
+            { open: '{', close: '}' },
+            { open: '[', close: ']' },
+            { open: '(', close: ')' },
+            { open: '"', close: '"', notIn: ['string'] },
+            { open: "'", close: "'", notIn: ['string'] },
+            { open: '`', close: '`', notIn: ['string'] },
+        ],
+        surroundingPairs: [
+            { open: '{', close: '}' },
+            { open: '[', close: ']' },
+            { open: '(', close: ')' },
+            { open: '"', close: '"' },
+            { open: "'", close: "'" },
+            { open: '`', close: '`' },
+        ],
+        comments: {
+            lineComment: '//',
+        },
+    });
+
     monaco.languages.setMonarchTokensProvider('dbml', {
         keywords: ['Table', 'Ref', 'Indexes', 'Note', 'Enum', 'enum'],
         datatypes: dataTypesNames,

src/pages/editor-page/side-panel/dbml-section/table-dbml/table-dbml.tsx

@@ -429,6 +429,9 @@ export const TableDBML: React.FC<TableDBMLProps> = () => {
                         wordWrap: 'off',
                         mouseWheelZoom: false,
                         readOnly: !isEditMode,
+                        autoClosingBrackets: 'always',
+                        autoClosingQuotes: 'always',
+                        autoSurround: 'languageDefined',
                     },
                     onChange: (value) => {
                         setEditedDbml(value ?? '');