Refactored json settings

app/components/input-textarea.hbs

@@ -16,7 +16,7 @@
       id={{this.id}}
       class="block w-full p-2 bg-transparent focus:outline-none"
       placeholder={{@placeholder}}
-      {{on 'input' this.onChange}}
+      {{on 'change' this.onChange}}
     >{{@value}}</textarea>
   </div>
   {{#if @helper}}

app/controllers/admin/indexes/item/settings.js

@@ -3,12 +3,15 @@ import { action } from '@ember/object';
 import arrayEquals from 'meilisearch-admin/utils/array-equals';
 
 export default class AdminIndexesItemSettingsController extends Controller {
+  emptyObj = {};
+
   @action
-  saveStopWords(str) {
+  saveStrToJSON(prop, emptyValue, str) {
+    console.log(str, prop, emptyValue);
     if (typeof str !== 'string' || str === '') {
-      this.model.settings.stopWords = [];
+      this.model.settings[prop] = emptyValue;
     } else {
-      this.model.settings.stopWords = str.split(',').map((item) => item.trim());
+      this.model.settings[prop] = JSON.parse(str);
     }
   }
 

app/helpers/json-parse.js

@@ -0,0 +1,5 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function jsonParse() {
+  return (str) => JSON.parse(str);
+});

app/helpers/json-stringify.js

@@ -0,0 +1,5 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function jsonStringify([data], { replacer, space }) {
+  return JSON.stringify(data, replacer, space);
+});

app/templates/admin/indexes/item/settings.hbs

@@ -80,9 +80,16 @@
 
 <InputTextarea
   @label="Stop-words"
-  @value={{join ', ' @model.settings.stopWords}}
-  @onChange={{this.saveStopWords}}
-  @helper="Format: of, the, to"
+  @value={{json-stringify @model.settings.stopWords}}
+  @onChange={{fn this.saveStrToJSON 'stopWords' (array)}}
+  @placeholder='["a","the"]'
+/>
+
+<InputTextarea
+  @label="Synonyms"
+  @value={{json-stringify @model.settings.synonyms}}
+  @onChange={{fn this.saveStrToJSON 'synonyms' this.emptyObj}}
+  @placeholder='{"wolverine": ["xmen", "logan"], "wow": ["world of warcraft"]}'
 />
 
 <Button

tests/integration/helpers/json-parse-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | json-parse', function (hooks) {
+  setupRenderingTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it renders', async function (assert) {
+    this.set('inputValue', '1234');
+
+    await render(hbs`{{json-parse this.inputValue}}`);
+
+    assert.dom(this.element).hasText('1234');
+  });
+});

tests/integration/helpers/json-stringify-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | json-stringify', function (hooks) {
+  setupRenderingTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it renders', async function (assert) {
+    this.set('inputValue', '1234');
+
+    await render(hbs`{{json-stringify this.inputValue}}`);
+
+    assert.dom(this.element).hasText('1234');
+  });
+});