refactor(json-editor): Enhance JSON change tracking and validation synchronization

Signed-off-by: Giovanni Magliocchetti <[email protected]>

Author: obrobrio2000

packages/survey-creator-core/src/components/tabs/json-editor-plugin.ts

@@ -37,7 +37,10 @@ export abstract class JsonEditorBaseModel extends Base {
     this.isJSONChanged = false;
   }
   protected onTextChanged(): void {
-    // Mark that JSON has changed
+    // Mark that JSON text has been modified. This flag serves two purposes:
+    // 1. Triggers the error validation timeout (processErrors) for immediate user feedback
+    // 2. Indicates to deactivate() or syncJsonEditorText() that validation is needed
+    // Note: This does NOT mean the JSON is valid - validation occurs later before sync
     this.isJSONChanged = true;
 
     if (this.jsonEditorChangedTimeoutId !== -1) {

packages/survey-creator-core/src/creator-base.ts

@@ -3301,44 +3301,55 @@ export class SurveyCreatorModel
     if (!!this.getSurveyJSONTextCallback) {
       return this.getSurveyJSONTextCallback().text;
     }
-
-    // If we're on the JSON editor tab, get the text directly from the plugin
-    // This is necessary because the JSON editor only syncs text on deactivate, which causes
-    // issues when trying to save while still on the JSON tab
-    if (this.activeTab === "json") {
-      const jsonPlugin = this.getPlugin("json");
-      if (
-        jsonPlugin &&
-        (jsonPlugin as any).model &&
-        (jsonPlugin as any).model.text
-      ) {
-        return (jsonPlugin as any).model.text;
-      }
-    }
-
     return this.getSurveyTextFromDesigner();
   }
   public set text(value: string) {
     this.changeText(value, true);
   }
 
   /**
-   * Force synchronization of JSON editor text to the creator.
-   * This should be called before operations that need the latest JSON text,
-   * such as saving or validation, when the JSON editor tab is active.
+   * Synchronizes JSON editor text to the creator with validation.
+   * This method should be called before operations that need the latest JSON text,
+   * such as saving, when the JSON editor tab is active.
+   *
+   * @returns `true` if synchronization succeeded (JSON is valid) or no sync was needed,
+   *          `false` if JSON validation failed (indicates errors that must be fixed)
+   *
+   * Example usage:
+   * ```typescript
+   * if (!creator.syncJsonEditorText()) {
+   *   // Show error: "Please fix JSON errors before saving"
+   *   return;
+   * }
+   * // Proceed with save - JSON is validated and synced
+   * const json = creator.text;
+   * ```
    */
-  public syncJsonEditorText(): void {
+  public syncJsonEditorText(): boolean {
     if (this.activeTab === "json") {
       const jsonPlugin = this.getPlugin("json") as any;
       if (jsonPlugin?.model?.isJSONChanged && !jsonPlugin.model.readOnly) {
+        // Use the same validation logic as tab switching (deactivate)
+        // This ensures we only sync valid JSON to maintain data integrity
+        const canDeactivate = jsonPlugin.defaultAllowingDeactivate();
+
+        // undefined = JSON is syntactically invalid (cannot parse)
+        // false = JSON has validation errors
+        // true = JSON is valid and can be synced
+        if (canDeactivate !== true) {
+          return false; // Validation failed, do not sync
+        }
+
+        // Validation passed - safe to sync the JSON
         const jsonText = jsonPlugin.model.text;
         if (jsonText) {
-          // Update the creator's text without triggering the usual change flow
           this.changeText(jsonText, false, true);
           jsonPlugin.model.isJSONChanged = false;
         }
       }
     }
+    // Return true if not on JSON tab or no changes (safe to proceed)
+    return true;
   }
 
   public getSurveyJSON(): any {