From a2b85361fda0cbe885bd95fc028968c9c0ab1808 Mon Sep 17 00:00:00 2001
From: Jonas Metzener <jonas.metzener@adfinis.com>
Date: Tue, 19 Dec 2023 14:16:53 +0100
Subject: [PATCH] fix(form-builder): fix cursor issues in code editor fields

---
 .../addon/components/cfb-code-editor.hbs      |  7 ++--
 .../addon/components/cfb-code-editor.js       | 35 ++++++++++---------
 packages/form-builder/package.json            |  1 +
 .../components/cfb-code-editor-test.js        |  4 ++-
 pnpm-lock.yaml                                |  3 ++
 5 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/packages/form-builder/addon/components/cfb-code-editor.hbs b/packages/form-builder/addon/components/cfb-code-editor.hbs
index f691a5a0e..76efa0422 100644
--- a/packages/form-builder/addon/components/cfb-code-editor.hbs
+++ b/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>
 
diff --git a/packages/form-builder/addon/components/cfb-code-editor.js b/packages/form-builder/addon/components/cfb-code-editor.js
index 656b88bfe..63eb60b33 100644
--- a/packages/form-builder/addon/components/cfb-code-editor.js
+++ b/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,14 +16,15 @@ 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;
@@ -30,10 +32,6 @@ export default class CfbCodeEditorComponent extends Component {
 
   @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);
diff --git a/packages/form-builder/package.json b/packages/form-builder/package.json
index 2bbc17c11..1a544fcdc 100644
--- a/packages/form-builder/package.json
+++ b/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"
   },
   "//": [
diff --git a/packages/form-builder/tests/integration/components/cfb-code-editor-test.js b/packages/form-builder/tests/integration/components/cfb-code-editor-test.js
index bbd2ba856..ff8318ed7 100644
--- a/packages/form-builder/tests/integration/components/cfb-code-editor-test.js
+++ b/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");
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b9fb85be2..1cbabf8df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1092,6 +1092,9 @@ importers:
       jexl:
         specifier: ^2.3.0
         version: 2.3.0
+      lodash.isequal:
+        specifier: ^4.5.0
+        version: 4.5.0
       uikit:
         specifier: ^3.17.11
         version: 3.17.11