@projectcaluma/ember-form-builder 14.5.1 → 14.6.0

package/addon/components/cfb-code-editor.hbs

@@ -11,7 +11,7 @@
       {{did-insert this.didInsertNode}}
       {{will-destroy this.willDestroyNode}}
       {{autoresize mode="height"}}
-      {{on "blur" this.onBlur}}
+      {{on "blur" @setDirty}}
     ></div>
   </div>
 

package/addon/components/cfb-code-editor.js

@@ -2,6 +2,7 @@ import { action } from "@ember/object";
 import { addObserver } from "@ember/object/observers";
 import Component from "@glimmer/component";
 import { CodeJar } from "codejar";
+import { task, timeout } from "ember-concurrency";
 import hljs from "highlight.js/lib/core";
 import json from "highlight.js/lib/languages/json";
 import markdown from "highlight.js/lib/languages/markdown";
@@ -15,22 +16,34 @@ hljs.registerLanguage("json", json);
 hljs.registerLanguage("markdown", markdown);
 hljs.registerLanguage("jexl", jexl);
 
+const simplify = (value) => {
+  if (typeof value === "object") {
+    value = JSON.stringify(value?.unwrap?.() ?? value);
+  }
+
+  return value?.replace(/\s/g, "");
+};
+
 export default class CfbCodeEditorComponent extends Component {
   _editor = null;
-  _lastValue = this.args.value;
+  _lastValue = null;
 
   get stringValue() {
     if (this.args.language === "json" && typeof this.args.value === "object") {
       return JSON.stringify(
         this.args.value?.unwrap?.() ?? this.args.value,
         null,
-        2,
+        "\t",
       );
     }
 
     return this.args.value;
   }
 
+  _didChange(value) {
+    return !isEqual(this._lastValue, simplify(value));
+  }
+
   @action
   onUpdate(value) {
     if (this.args.language === "json") {
@@ -41,24 +54,22 @@ export default class CfbCodeEditorComponent extends Component {
       }
     }
 
-    if (isEqual(this._lastValue, value)) return;
+    if (!this._didChange(value)) return;
 
-    this._lastValue = value;
+    this._lastValue = simplify(value);
     this.args.update(value);
   }
 
-  @action
-  updateCode() {
-    if (isEqual(this._lastValue, this.args.value)) return;
+  updateEditorContent = task({ restartable: true }, async () => {
+    // This function is called everytime `this.args.value` changes. In order to
+    // not trigger too many updates, we debounce it for 10ms.
+    await timeout(10);
 
-    this._editor.updateCode(this.stringValue, false);
-  }
+    if (!this._didChange(this.args.value)) return;
 
-  @action
-  onBlur() {
-    this._editor.updateCode(this.stringValue);
-    this.args.setDirty();
-  }
+    this._lastValue = simplify(this.args.value);
+    this._editor.updateCode(this.stringValue, false);
+  });
 
   @action
   didInsertNode(element) {
@@ -68,13 +79,14 @@ export default class CfbCodeEditorComponent extends Component {
     });
 
     // set initial value
-    this._editor.updateCode(this.stringValue);
+    this._editor.updateCode(this.stringValue, false);
+    this._lastValue = simplify(this.args.value);
 
     // register update method
     this._editor.onUpdate(this.onUpdate);
 
     // eslint-disable-next-line ember/no-observers
-    addObserver(this.args, "value", this, "updateCode");
+    addObserver(this.args, "value", this.updateEditorContent, "perform");
   }
 
   @action

package/blueprints/@projectcaluma/ember-form-builder/index.js

@@ -12,7 +12,6 @@ module.exports = {
      */
     return this.addAddonsToProject({
       packages: [
-        { name: "@ember/legacy-built-in-components" },
         { name: "@projectcaluma/ember-core" },
         { name: "@projectcaluma/ember-form" },
         { name: "ember-changeset" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form-builder",
-  "version": "14.5.1",
+  "version": "14.6.0",
   "description": "Ember engine for building Caluma forms.",
   "keywords": [
     "ember-addon",
@@ -11,13 +11,10 @@
   "repository": "github:projectcaluma/ember-caluma",
   "dependencies": {
     "@babel/core": "^7.26.0",
-    "@ember/legacy-built-in-components": "^0.5.0",
     "@ember/render-modifiers": "^2.1.0 || ^3.0.0",
     "@ember/string": "^3.1.1 || ^4.0.0",
     "@embroider/macros": "^1.16.10",
-    "@glimmer/component": "^1.1.2",
-    "@glimmer/tracking": "^1.1.2",
-    "codejar": "~4.2.0",
+    "codejar": "^4.3.0",
     "ember-apollo-client": "^5.0.0",
     "ember-auto-import": "^2.10.0",
     "ember-basic-dropdown": "^8.4.0",
@@ -28,7 +25,6 @@
     "ember-composable-helpers": "^5.0.0",
     "ember-concurrency": "^4.0.2",
     "ember-engines-router-service": "^0.6.0",
-    "ember-fetch": "^8.1.2",
     "ember-flatpickr": "^8.0.1",
     "ember-intl": "^7.1.1",
     "ember-load-initializers": "^2.1.2 || ^3.0.1",
@@ -48,8 +44,8 @@
     "lodash.isequal": "^4.5.0",
     "reactiveweb": "^1.3.0",
     "uikit": "^3.22.0",
-    "@projectcaluma/ember-form": "^14.5.1",
-    "@projectcaluma/ember-core": "^14.5.1"
+    "@projectcaluma/ember-core": "^14.6.0",
+    "@projectcaluma/ember-form": "^14.6.0"
   },
   "//": [
     "TODO: remove obsolete dependency to `ember-data` which is only necessary",
@@ -62,6 +58,8 @@
     "@ember/test-helpers": "4.0.4",
     "@embroider/test-setup": "4.0.0",
     "@faker-js/faker": "10.0.0",
+    "@glimmer/component": "1.1.2",
+    "@glimmer/tracking": "1.1.2",
     "broccoli-asset-rev": "3.0.0",
     "ember-autoresize-modifier": "0.8.0",
     "ember-cli": "6.1.0",
@@ -85,7 +83,7 @@
     "qunit-dom": "3.5.0",
     "sinon": "21.0.0",
     "webpack": "5.101.3",
-    "@projectcaluma/ember-testing": "14.5.1"
+    "@projectcaluma/ember-testing": "14.6.0"
   },
   "peerDependencies": {
     "ember-engines": "^0.11.0",