#6327 Ace Editor theming (#6328)

* #6327 Ace Editor theming
Fixes #6327

* #6327 - fix test

* #6327 - update tests

* #6327 Ace Editor theming
Fixes #6327

* #6327 test react only

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

@@ -53,6 +53,15 @@ export class AceJsonEditorModel extends JsonEditorBaseModel {
       this.aceEditor.session.doc.getNewLineCharacter();
     this.onPluginActivate();
   }
+
+  public onPluginActivate(): void {
+    super.onPluginActivate();
+    this.aceEditor.setFontSize(14);
+    if (this.creator.preferredColorPalette === "dark") {
+      this.aceEditor.setTheme("ace/theme/clouds_midnight");
+    }
+  }
+
   private updateUndoRedoState(): void {
     const undoManager: any = this.aceEditor
       .getSession()

packages/survey-creator-core/src/ctr-variables.scss

@@ -99,7 +99,7 @@ $-base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 }
 
 @mixin ctrCodeFont {
-  font-family: var(--ctr-font-family-code, "DM Mono");
+  font-family: var(--ctr-font-family-code, monospace);
   font-size: var(--ctr-font-code-size, 16px);
   font-style: normal;
   font-weight: 400;

packages/survey-creator-react/testCafe-V2/testcafe-widget.html

@@ -31,6 +31,8 @@
     charset="utf-8"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript"
     charset="utf-8"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/theme-clouds_midnight.min.js" crossorigin="anonymous"
+    referrerpolicy="no-referrer"></script>
   <!-- Uncomment to enable Select2 <script src="https://unpkg.com/jquery"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> -->
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
   <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

packages/survey-creator-react/testCafe/testcafe-widget.html

@@ -31,6 +31,8 @@
     charset="utf-8"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" type="text/javascript"
     charset="utf-8"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/theme-clouds_midnight.min.js" crossorigin="anonymous"
+      referrerpolicy="no-referrer"></script>
   <!-- Uncomment to enable Select2 <script src="https://unpkg.com/jquery"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> -->
   <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
   <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

visualRegressionTests/tests/designer/json-tab.ts

@@ -2,7 +2,7 @@ import { ClientFunction, Selector } from "testcafe";
 import { url, setJSON, getTabbedMenuItemByText, creatorTabLogicName, takeElementScreenshot, logicQuestionSelector, logicActionSelector, tableRulesSelector, logicAddNewRuleButton, getListItemByText, wrapVisualTest, resetHoverToCreator } from "../../helper";
 
 const title = "Json tab Screenshot";
-
+const widgetUrl = url.replace(/\/testcafe$/, "/testcafe-widget");
 fixture`${title}`.page`${url}`;
 
 const jsonWithErrors = {
@@ -73,4 +73,45 @@ test("one rule view", async (t) => {
     const tabContent = Selector(".svc-creator-tab__content");
     await takeElementScreenshot("json-tab-with-errors.png", tabContent, t, comparer);
   });
+});
+
+fixture`${title}`.page`${widgetUrl}`;
+test("JSON Ace editor", async (t) => {
+  var skipIfNotReact = ClientFunction(() => {
+    return window["creator"].survey.platformName != "react";
+  });
+  // skip test fo non-react - core code
+  if (await skipIfNotReact()) return;
+  await wrapVisualTest(t, async (t, comparer) => {
+    await t.resizeWindow(1920, 900);
+    const json = {
+      "logoPosition": "right",
+      "pages": [
+        {
+          "name": "page1",
+          "elements": [
+            {
+              "type": "text",
+              "name": "question1"
+            }
+          ]
+        }
+      ]
+    };
+    await setJSON(json);
+    await t
+      .click(getTabbedMenuItemByText("JSON Editor"));
+    const tabContent = Selector(".svc-creator-tab__content");
+    await t.click(tabContent);
+    await takeElementScreenshot("json-tab-ace.png", tabContent, t, comparer);
+
+    await ClientFunction(() => {
+      window["creator"].preferredColorPalette = "dark";
+    })();
+    await t
+      .click(getTabbedMenuItemByText("Logic"))
+      .click(getTabbedMenuItemByText("JSON Editor"));
+
+    await takeElementScreenshot("json-tab-ace-dark.png", tabContent, t, comparer);
+  });
 });