fix: ajax was not working

Author: Íñigo Marquínez

.gitignore

@@ -19,5 +19,4 @@ node_modules/
 .coverage
 
 # Build
-build/*
-!/build/index.html
+build

build/index.html

@@ -32,7 +32,7 @@
     "@contentful/forma-36-fcss": "^0.0.20",
     "@contentful/forma-36-react-components": "^3.11.3",
     "@contentful/forma-36-tokens": "^0.3.0",
-    "@json-editor/json-editor": "^2.0.0-alpha.0",
+    "@json-editor/json-editor": "^2.1.0",
     "contentful-ui-extensions-sdk": "3.9.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",

package-lock.json

@@ -19,13 +19,13 @@ const Extension = ({ sdk }) => {
         sdk.window.updateHeight();
         validateAndSave();
       };
-    
+
       Object.keys(editorRef.editors).forEach(key => {
         if (Object.prototype.hasOwnProperty.call(editorRef.editors, key) && key !== 'root') {
           editorRef.watch(key, watcherCallback.bind(editorRef, key));
         }
       });
-  
+
       const validateAndSave = _debounce(() => {
         const errors = editorRef.validate();
         if (errors.length === 0) {
@@ -42,45 +42,48 @@ const Extension = ({ sdk }) => {
       const schemaPath = sdk.parameters.instance.overridenSchemaPath || defaultSchemaPath;
       const schemaName = sdk.parameters.instance.schemaName;
 
-      const editorRef = new JSONEditor(ref.current, { // eslint-disable-line no-undef
-        ajax: true,
-        ajaxBase: schemaPath,
-        compact: false,
-        disable_array_add: false,
-        disable_array_delete: false,
-        disable_array_reorder: false,
-        enable_array_copy: false,
-        disable_collapse: true,
-        disable_edit_json: true,
-        disable_properties: true,
-        array_controls_top: true,
-        form_name_root: 'root',
-        iconlib: null,
-        remove_button_labels: false,
-        no_additional_properties: true,
-        // refs: {} // An object containing schema definitions for URLs. Allows you to pre-define external schemas.
-        required_by_default: true,
-        keep_oneof_values: true,
-        schema: {
-          $ref: schemaName,
-        },
-        show_errors: 'never', // interaction | change | always | never
-        startval: value,
-        template: 'default',
-        display_required_only: false,
-        show_opt_in: true,
-        prompt_before_delete: false,
-        object_layout: 'table',
-        plugin: {
-          selectize: true,
-        },
-      });
-
-      editorRef.on('ready', () => {
-        initializeEditor(editorRef);
-      });
-
-      return editorRef;
+      fetch(`${schemaPath}${schemaName}`)
+        .then(response => response.text())
+        .then(data => {
+          try {
+            const editorRef = new JSONEditor(ref.current, { // eslint-disable-line no-undef
+              compact: false,
+              disable_array_add: false,
+              disable_array_delete: false,
+              disable_array_reorder: false,
+              enable_array_copy: false,
+              disable_collapse: true,
+              disable_edit_json: true,
+              disable_properties: true,
+              array_controls_top: true,
+              form_name_root: 'root',
+              iconlib: null,
+              remove_button_labels: false,
+              no_additional_properties: true,
+              required_by_default: true,
+              keep_oneof_values: true,
+              schema: JSON.parse(data),
+              show_errors: 'never', // interaction | change | always | never
+              startval: value,
+              template: 'default',
+              display_required_only: false,
+              show_opt_in: true,
+              prompt_before_delete: false,
+              object_layout: 'table',
+              plugin: {
+                selectize: true,
+              },
+            });
+
+            editorRef.on('ready', () => {
+              initializeEditor(editorRef);
+            });
+
+            return editorRef;
+          } catch (error) {
+            console.error(error.message);
+          }
+        });
     };
 
     sdk.window.startAutoResizer();