feat: reuse EditWithAIForm to show formatted code before apply it

Author: samueldurantes

apps/web/src/components/v2Editor/customBlocks/sql/index.tsx

@@ -403,14 +403,15 @@ function SQLBlock(props: Props) {
   }, [router, props.document.workspaceId])
 
   const onToggleFormatSQLCode = useCallback(() => {
-    const formattedCode = getSQLCodeFormatted(source)
+    const sqlCodeFormatted = getSQLCodeFormatted(source)
 
-    if (!formattedCode) {
+    if (!sqlCodeFormatted) {
       return
     }
 
-    updateYText(source, formattedCode)
-  }, [source])
+    // Reuse the `EditWithAIForm` component to show the formatted SQL code
+    props.block.setAttribute('aiSuggestions', sqlCodeFormatted)
+  }, [source, props.block])
 
   const onToggleIsBlockHiddenInPublished = useCallback(() => {
     props.onToggleIsBlockHiddenInPublished(blockId)

packages/editor/src/blocks/sql.ts

@@ -149,8 +149,8 @@ export function duplicateSQLBlock(
     source: duplicateYText(prevAttributes.source),
     dataframeName: clone(prevAttributes.dataframeName),
     dataSourceId: prevAttributes.dataSourceId
-      ? options?.datasourceMap?.get(prevAttributes.dataSourceId) ??
-        prevAttributes.dataSourceId
+      ? (options?.datasourceMap?.get(prevAttributes.dataSourceId) ??
+        prevAttributes.dataSourceId)
       : null,
     isFileDataSource: prevAttributes.isFileDataSource,
     result: options?.noState ? null : clone(prevAttributes.result),
@@ -364,5 +364,5 @@ export function getSQLCodeFormatted(source: Y.Text) {
     tabWidth: 4,
   })
 
-  return formatted;
+  return new Y.Text(formatted)
 }