feat(json-editor): Enable immediate save without tab switching

- Enhanced text getter to retrieve from JSON plugin when active
- Added syncJsonEditorText() method for explicit synchronization
- Set isJSONChanged flag immediately on text changes
- Maintains full backward compatibility

Fixes #7212

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

Author: obrobrio2000

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

@@ -1,4 +1,10 @@
-import { Base, property, ListModel, Action, ComputedUpdater } from "survey-core";
+import {
+  Base,
+  property,
+  ListModel,
+  Action,
+  ComputedUpdater,
+} from "survey-core";
 import { SurveyCreatorModel } from "../../creator-base";
 import { ICreatorPlugin } from "../../creator-settings";
 import { SurveyTextWorker, SurveyTextWorkerError } from "../../textWorker";
@@ -24,13 +30,16 @@ export abstract class JsonEditorBaseModel extends Base {
   }
   protected abstract getText(): string;
   protected abstract setText(val: string): void;
-  protected onEditorActivated(): void { }
+  protected onEditorActivated(): void {}
   public onPluginActivate(): void {
     this.text = this.creator.text;
     this.onEditorActivated();
     this.isJSONChanged = false;
   }
   protected onTextChanged(): void {
+    // Mark that JSON has changed
+    this.isJSONChanged = true;
+
     if (this.jsonEditorChangedTimeoutId !== -1) {
       clearTimeout(this.jsonEditorChangedTimeoutId);
     }
@@ -57,12 +66,12 @@ export abstract class JsonEditorBaseModel extends Base {
           if (!!error)this.gotoError(error.at, error.rowAt, error.columnAt);
         },
         allowSelection: false,
-        searchEnabled: false
+        searchEnabled: false,
       });
       this.errorListValue.cssClasses = {
         item: "svc-json-errors__item",
         itemBody: "svc-json-error",
-        itemsContainer: "svc-json-errors"
+        itemsContainer: "svc-json-errors",
       };
       this.errorListValue.hasVerticalScroller = true;
     }
@@ -73,41 +82,45 @@ export abstract class JsonEditorBaseModel extends Base {
     let hasErrors = errors.length > 0;
     if (hasErrors) {
       const actions = [];
-      this.createErrorActions(errors).forEach(action => actions.push(action));
+      this.createErrorActions(errors).forEach((action) => actions.push(action));
       this.errorList.setItems(actions);
     }
     this.hasErrors = hasErrors;
   }
-  protected gotoError(at: number, row: number, column: number): void { }
-  private createErrorActions(errors: Array<SurveyTextWorkerError>): Array<Action> {
+  protected gotoError(at: number, row: number, column: number): void {}
+  private createErrorActions(
+    errors: Array<SurveyTextWorkerError>,
+  ): Array<Action> {
     const res = [];
     let counter = 1;
-    errors.forEach(error => {
+    errors.forEach((error) => {
       const line = error.rowAt > -1 ? "Line: " + (error.rowAt + 1) + ". " : "";
       let title = error.text;
       if (title.length > maxErrorLength + 3) {
         title = title.substring(0, maxErrorLength) + "...";
       }
       title = line + title;
       const at = error.at;
-      res.push(new Action({
-        id: "error_" + counter++,
-        component: "json-error-item",
-        title: title,
-        tooltip: error.text,
-        iconName: "icon-error",
-        iconSize: "auto",
-        data: {
-          error: error,
-          showFixButton: error.isFixable,
-          fixError: () => {
-            this.text = error.fixError(this.text);
+      res.push(
+        new Action({
+          id: "error_" + counter++,
+          component: "json-error-item",
+          title: title,
+          tooltip: error.text,
+          iconName: "icon-error",
+          iconSize: "auto",
+          data: {
+            error: error,
+            showFixButton: error.isFixable,
+            fixError: () => {
+              this.text = error.fixError(this.text);
+            },
+            fixButtonIcon: "icon-fix",
+            //todo
+            fixButtonTitle: "Fix error",
           },
-          fixButtonIcon: "icon-fix",
-          //todo
-          fixButtonTitle: "Fix error"
-        }
-      }));
+        }),
+      );
     });
     return res;
   }
@@ -129,14 +142,18 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
   public static iconName = "icon-codeeditor-24x24";
 
   constructor(private creator: SurveyCreatorModel) {
-    this.createActions().forEach(action => creator.toolbar.actions.push(action));
+    this.createActions().forEach((action) =>
+      creator.toolbar.actions.push(action),
+    );
   }
 
   public saveToFileHandler = saveToFileHandler;
 
   public exportToFile(fileName: string) {
     if (this.model) {
-      const jsonBlob = new Blob([this.model.text], { type: "application/json" });
+      const jsonBlob = new Blob([this.model.text], {
+        type: "application/json",
+      });
       this.saveToFileHandler(fileName, jsonBlob);
     }
   }
@@ -167,7 +184,9 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
       iconSize: "auto",
       locTitleName: "ed.surveyJsonImportButton",
       locTooltipName: "ed.surveyJsonImportButton",
-      visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "json"; }),
+      visible: <any>new ComputedUpdater<boolean>(() => {
+        return this.creator.activeTab === "json";
+      }),
       mode: "small",
       component: "sv-action-bar-item",
       needSeparator: true,
@@ -184,7 +203,7 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
           };
         }
         this.inputFileElement.click();
-      }
+      },
     });
     items.push(this.importAction);
 
@@ -194,12 +213,14 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
       iconSize: "auto",
       locTitleName: "ed.surveyJsonExportButton",
       locTooltipName: "ed.surveyJsonExportButton",
-      visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "json"; }),
+      visible: <any>new ComputedUpdater<boolean>(() => {
+        return this.creator.activeTab === "json";
+      }),
       mode: "small",
       component: "sv-action-bar-item",
       action: () => {
         this.exportToFile(settings.jsonEditor.exportFileName);
-      }
+      },
     });
     items.push(this.exportAction);
 
@@ -209,12 +230,14 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
       iconSize: "auto",
       locTitleName: "ed.surveyJsonCopyButton",
       locTooltipName: "ed.surveyJsonCopyButton",
-      visible: <any>new ComputedUpdater<boolean>(() => { return this.creator.activeTab === "json"; }),
+      visible: <any>new ComputedUpdater<boolean>(() => {
+        return this.creator.activeTab === "json";
+      }),
       mode: "small",
       component: "sv-action-bar-item",
       action: () => {
         this.copyToClipboard();
-      }
+      },
     });
     items.push(this.copyAction);
 
@@ -245,6 +268,6 @@ export abstract class TabJsonEditorBasePlugin implements ICreatorPlugin {
     return !textWorker.isJsonHasErrors;
   }
   protected abstract createModel(
-    creator: SurveyCreatorModel
+    creator: SurveyCreatorModel,
   ): JsonEditorBaseModel;
 }