fix(import): dbml and query - senetize before import (#699)

src/dialogs/import-dbml-dialog/import-dbml-dialog.tsx

@@ -23,7 +23,7 @@ import { useTranslation } from 'react-i18next';
 import { Editor } from '@/components/code-snippet/code-snippet';
 import { useTheme } from '@/hooks/use-theme';
 import { AlertCircle } from 'lucide-react';
-import { importDBMLToDiagram } from '@/lib/dbml-import';
+import { importDBMLToDiagram, sanitizeDBML } from '@/lib/dbml-import';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { Parser } from '@dbml/core';
 import { useCanvas } from '@/hooks/use-canvas';
@@ -189,8 +189,9 @@ Ref: comments.user_id > users.id // Each comment is written by one user`;
             if (!content.trim()) return;
 
             try {
+                const sanitizedContent = sanitizeDBML(content);
                 const parser = new Parser();
-                parser.parse(content, 'dbml');
+                parser.parse(sanitizedContent, 'dbml');
             } catch (e) {
                 const parsedError = parseDBMLError(e);
                 if (parsedError) {
@@ -241,7 +242,9 @@ Ref: comments.user_id > users.id // Each comment is written by one user`;
         if (!dbmlContent.trim() || errorMessage) return;
 
         try {
-            const importedDiagram = await importDBMLToDiagram(dbmlContent);
+            // Sanitize DBML content before importing
+            const sanitizedContent = sanitizeDBML(dbmlContent);
+            const importedDiagram = await importDBMLToDiagram(sanitizedContent);
             const tableIdsToRemove = tables
                 .filter((table) =>
                     importedDiagram.tables?.some(

src/lib/data/import-metadata/utils.ts

@@ -6,6 +6,18 @@ export const fixMetadataJson = async (
 ): Promise<string> => {
     await waitFor(1000);
 
+    // Replace problematic array default values with null
+    metadataJson = metadataJson.replace(
+        /"default": "?'?\[[^\]]*\]'?"?(\\")?(,|\})/gs,
+        '"default": null$2'
+    );
+
+    // Generic fix for all default values with '\ pattern - convert to just '
+    metadataJson = metadataJson.replace(
+        /"default":\s*"(.*?)'\\"(,|\})/g,
+        '"default": "$1"$2'
+    );
+
     // TODO: remove this temporary eslint disable
     return (
         metadataJson

src/lib/dbml-import.ts

@@ -9,6 +9,25 @@ import { genericDataTypes } from '@/lib/data/data-types/generic-data-types';
 import { randomColor } from '@/lib/colors';
 import { DatabaseType } from '@/lib/domain/database-type';
 
+// Simple function to replace Spanish special characters
+export const sanitizeDBML = (content: string): string => {
+    return content
+        .replace(/[áàäâ]/g, 'a')
+        .replace(/[éèëê]/g, 'e')
+        .replace(/[íìïî]/g, 'i')
+        .replace(/[óòöô]/g, 'o')
+        .replace(/[úùüû]/g, 'u')
+        .replace(/[ñ]/g, 'n')
+        .replace(/[ç]/g, 'c')
+        .replace(/Á/g, 'A')
+        .replace(/É/g, 'E')
+        .replace(/Í/g, 'I')
+        .replace(/Ó/g, 'O')
+        .replace(/Ú/g, 'U')
+        .replace(/Ñ/g, 'N')
+        .replace(/Ç/g, 'C');
+};
+
 interface DBMLTypeArgs {
     length?: number;
     precision?: number;
@@ -108,7 +127,9 @@ export const importDBMLToDiagram = async (
 ): Promise<Diagram> => {
     try {
         const parser = new Parser();
-        const parsedData = parser.parse(dbmlContent, 'dbml');
+        // Sanitize DBML content to remove special characters
+        const sanitizedContent = sanitizeDBML(dbmlContent);
+        const parsedData = parser.parse(sanitizedContent, 'dbml');
         const dbmlData = parsedData.schemas[0];
 
         // Extract only the necessary data from the parsed DBML