feat(dbml): Edit Diagram Directly from DBML (#819)

* initial dbml apply

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

* fix

src/components/code-snippet/code-snippet.tsx

@@ -31,6 +31,7 @@ export interface CodeSnippetAction {
     label: string;
     icon: LucideIcon;
     onClick: () => void;
+    className?: string;
 }
 
 export interface CodeSnippetProps {
@@ -172,7 +173,10 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
                                             <TooltipTrigger asChild>
                                                 <span>
                                                     <Button
-                                                        className="h-fit p-1.5"
+                                                        className={cn(
+                                                            'h-fit p-1.5',
+                                                            action.className
+                                                        )}
                                                         variant="outline"
                                                         onClick={action.onClick}
                                                     >

src/components/code-snippet/dbml/utils.ts

@@ -0,0 +1,51 @@
+import type { DBMLError } from '@/lib/dbml/dbml-import/dbml-import-error';
+import * as monaco from 'monaco-editor';
+
+export const highlightErrorLine = ({
+    error,
+    model,
+    editorDecorationsCollection,
+}: {
+    error: DBMLError;
+    model?: monaco.editor.ITextModel | null;
+    editorDecorationsCollection:
+        | monaco.editor.IEditorDecorationsCollection
+        | undefined;
+}) => {
+    if (!model) return;
+    if (!editorDecorationsCollection) return;
+
+    const decorations = [
+        {
+            range: new monaco.Range(
+                error.line,
+                1,
+                error.line,
+                model.getLineMaxColumn(error.line)
+            ),
+            options: {
+                isWholeLine: true,
+                className: 'dbml-error-line',
+                glyphMarginClassName: 'dbml-error-glyph',
+                hoverMessage: { value: error.message },
+                overviewRuler: {
+                    color: '#ff0000',
+                    position: monaco.editor.OverviewRulerLane.Right,
+                    darkColor: '#ff0000',
+                },
+            },
+        },
+    ];
+
+    editorDecorationsCollection?.set(decorations);
+};
+
+export const clearErrorHighlight = (
+    editorDecorationsCollection:
+        | monaco.editor.IEditorDecorationsCollection
+        | undefined
+) => {
+    if (editorDecorationsCollection) {
+        editorDecorationsCollection.clear();
+    }
+};