Preset editor: Update texts in View Preset JSON tab

surveyjs · Aug 22, 2024 · d8535fb · d8535fb
1 parent 8807551
commit d8535fb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/packages/creator-presets-core/src/presets-editable-languages.ts b/packages/creator-presets-core/src/presets-editable-languages.ts
@@ -74,10 +74,6 @@ export class CreatorPresetEditableLanguages extends CreatorPresetEditableBase {
         res.push(new ItemValue(locale, name));
       }
     });
-    res.sort((a: ItemValue, b: ItemValue): number => {
-      if(a.text === b.text) return 0;
-      return a.text < b.text ? -1 : 1;
-    });
     if(addEnLocale) {
       res.unshift(new ItemValue("en", editorLocalization.getLocaleName("en")));
     }

diff --git a/packages/creator-presets-react/src/CreatorPresetEditor.tsx b/packages/creator-presets-react/src/CreatorPresetEditor.tsx
@@ -1,11 +1,23 @@
 import * as React from "react";
 import { Base } from "survey-core";
-import { SurveyActionBar, SurveyElementBase, Survey, SvgBundleComponent } from "survey-react-ui";
+import { SurveyElementBase, Survey, SvgBundleComponent } from "survey-react-ui";
 import { ICreatorOptions, SurveyCreatorModel } from "survey-creator-core";
 import { SurveyCreator, SurveyCreatorComponent } from "survey-creator-react";
 import { CreatorPresetEditorModel } from "creator-presets-core";
 import { PresetsHeaderComponent } from "./Header";
 
+const presetApplyText = "Use the following code to apply the preset:";
+const presetApplyCode = `import { SurveyCreatorModel, SurveyCreatorPreset } from "survey-creator-core";
+const creator = new SurveyCreatorModel({ ... });
+
+const presetJson = {
+  // Copy the JSON object from below
+}
+
+const preset = new SurveyCreatorPreset(presetJson);
+preset.applyTo(creator);
+`;
+
 export class CreatorPresetEditor extends CreatorPresetEditorModel {
   public createCreator(options: ICreatorOptions): SurveyCreatorModel {
     return new SurveyCreator(options);
@@ -46,17 +58,12 @@ export class CreatorPresetEditorComponent extends SurveyElementBase<ICreatorPres
   }
   private renderResults() {
     const text = JSON.stringify(this.editor.json, null, 2);
-    const style = { width: "100%", height: "100%" };
+    const style = { width: "100%", height: "100vh" };
     const textStyle = { padding: "7px" };
-    const codeText = `import { CreatorPreset } from "survey-creator-core";
-
-const preset = new CreatorPreset(yourPresetJSON_you_found_it_bellow);
-preset.apply(creator);
-`;
     return <>
-      <div style={textStyle}>Please use the following code to apply your preset:
+      <div style={textStyle}>{presetApplyText}
         <div>
-          <pre><code>{codeText}</code></pre>
+          <pre><code>{presetApplyCode}</code></pre>
         </div>
       </div>
       <textarea readOnly={true} style={style}>{text}</textarea>