fix(form-builder): fix cursor issues in code editor fields

packages/form-builder/addon/components/cfb-code-editor.hbs

@@ -4,11 +4,14 @@
   <div class="uk-form-controls">
     <div
       name={{@name}}
-      class="uk-textarea cfb-code-editor {{concat 'language-' @language}}"
+      class="uk-textarea cfb-code-editor
+        {{concat 'language-' @language}}
+        {{if @isValid 'uk-form-success'}}
+        {{if @isInvalid 'uk-form-danger'}}"
       {{did-insert this.didInsertNode}}
       {{will-destroy this.willDestroyNode}}
       {{autoresize mode="height"}}
-      {{on "blur" @setDirty}}
+      {{on "blur" this.onBlur}}
     ></div>
   </div>
 

packages/form-builder/addon/components/cfb-code-editor.js

@@ -6,6 +6,7 @@ import hljs from "highlight.js/lib/core";
 import json from "highlight.js/lib/languages/json";
 import markdown from "highlight.js/lib/languages/markdown";
 import jexl from "highlightjs-jexl/src/languages/jexl";
+import isEqual from "lodash.isequal";
 
 hljs.configure({ ignoreUnescapedHTML: true });
 
@@ -15,25 +16,22 @@ hljs.registerLanguage("jexl", jexl);
 
 export default class CfbCodeEditorComponent extends Component {
   _editor = null;
-  _cursor = null;
   _lastValue = this.args.value;
 
-  get value() {
-    const value = this.args.value;
-
-    if (this.args.language === "json" && typeof value === "object") {
-      return JSON.stringify(value?.unwrap?.() ?? value, null, 2);
+  get stringValue() {
+    if (this.args.language === "json" && typeof this.args.value === "object") {
+      return JSON.stringify(
+        this.args.value?.unwrap?.() ?? this.args.value,
+        null,
+        2,
+      );
     }
 
     return this.args.value;
   }
 
   @action
   onUpdate(value) {
-    if (this._lastValue === value) return;
-
-    this._cursor = this._editor.save();
-
     if (this.args.language === "json") {
       try {
         value = JSON.parse(value);
@@ -42,20 +40,23 @@ export default class CfbCodeEditorComponent extends Component {
       }
     }
 
+    if (isEqual(this._lastValue, value)) return;
+
     this._lastValue = value;
     this.args.update(value);
   }
 
   @action
   updateCode() {
-    if (this._lastValue === this.value) return;
+    if (isEqual(this._lastValue, this.args.value)) return;
 
-    this._editor.updateCode(this.value, false);
+    this._editor.updateCode(this.stringValue, false);
+  }
 
-    if (this._cursor) {
-      this._editor.restore(this._cursor);
-      this._cursor = null;
-    }
+  @action
+  onBlur() {
+    this._editor.updateCode(this.stringValue);
+    this.args.setDirty();
   }
 
   @action
@@ -66,7 +67,7 @@ export default class CfbCodeEditorComponent extends Component {
     });
 
     // set initial value
-    this._editor.updateCode(this.value);
+    this._editor.updateCode(this.stringValue);
 
     // register update method
     this._editor.onUpdate(this.onUpdate);

packages/form-builder/package.json

@@ -47,6 +47,7 @@
     "highlight.js": "^11.9.0",
     "highlightjs-jexl": "^0.0.5",
     "jexl": "^2.3.0",
+    "lodash.isequal": "^4.5.0",
     "uikit": "^3.17.11"
   },
   "//": [

packages/form-builder/tests/integration/components/cfb-code-editor-test.js

@@ -10,6 +10,7 @@ module("Integration | Component | cfb-code-editor", function (hooks) {
   test("it updates value", async function (assert) {
     await render(hbs`<CfbCodeEditor
   @name="editor"
+  @value={{this.value}}
   @language="jexl"
   @update={{fn (mut this.value)}}
   @setDirty={{fn (mut this.dirty) true}}
@@ -20,7 +21,8 @@ module("Integration | Component | cfb-code-editor", function (hooks) {
     await blur("[name=editor]");
 
     // syntax highlighting creates child <span>s
-    assert.dom("[name=editor] span").exists({ count: 2 });
+    assert.dom("[name=editor] span.hljs-number").exists({ count: 2 });
+    assert.dom("[name=editor] span.hljs-operator").exists({ count: 1 });
 
     assert.dom(this.element).hasText("1 + 1");
     assert.strictEqual(this.value, "1 + 1");