fix: better jsoneditor error messages

jgazeau · Aug 19, 2024 · e6f766a · e6f766a
1 parent 01737cc
commit e6f766a
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 17 deletions.
diff --git a/assets/js/shortcodes/jsoneditor.js b/assets/js/shortcodes/jsoneditor.js
@@ -22,7 +22,7 @@ function initBulmaToast() {
 function renderAllJsoneditor() {
   let divj = document.getElementsByClassName('sc-jsoneditor-container');
   for (let i = 0; i < divj.length; i++) {
-      renderJsoneditor(divj[i]);
+    renderJsoneditor(divj[i]);
   }
 }
 function renderJsoneditor(jc) {
@@ -59,11 +59,10 @@ function renderJsoneditor(jc) {
       });
       jsoneditorCopy.addEventListener('click', () => {
         if (validateSchema(jsonPostAnalyzeFunction, jsoneditor, jc.id)) {
-          jsoneditorCopy.classList.toggle('sc-jsoneditor-success', true);
           jsoneditorCopy.setAttribute('title-after', codeCopyAfter)
           navigator.clipboard.writeText(JSON.stringify(maybePostProcessJson(jsonPostProcessFunction, jsoneditor.getValue()), null, 2));
         } else {
-          jsoneditorCopy.classList.toggle('sc-jsoneditor-success', false);
+          jsoneditorCopy.removeAttribute('title-after', codeCopyAfter)
         }
       });
       jsoneditorDownload.addEventListener('click', () => {
@@ -102,13 +101,15 @@ function getJsonSchema(url) {
 function validateSchema(jsonPostAnalyzeFunction, jsoneditor, containerId) {
   let errors = jsoneditor.validate();
   if (typeof window[jsonPostAnalyzeFunction] === 'function') {
-    errors = errors.concat(window[jsonPostAnalyzeFunction](jsoneditor.schema).map((error) => {return {message: error}}));
+    errors = errors.concat(window[jsonPostAnalyzeFunction](jsoneditor.schema));
   }
   if (errors.length) {
-    errors.forEach((error) => bulmaToast.toast({
-      message: jsoneditorValidateError + ': ' + error.message,
-      appendTo: document.getElementById(containerId),
-    }));
+    errors.forEach((error) =>
+      bulmaToast.toast({
+        message: `${jsoneditorValidateError}: ${error.message} at \'${error.path}\'`,
+        appendTo: document.getElementById(containerId),
+      })
+    );
     return false;
   } else {
     return true;

diff --git a/assets/sass/theme/shortcodes_jsoneditor.sass b/assets/sass/theme/shortcodes_jsoneditor.sass
@@ -125,14 +125,9 @@
   .is-action-button
     position: relative
     &.sc-jsoneditor-copy-button:after
-      right: 100%
-    &.sc-jsoneditor-download-button:after
-      left: 100%
-    &.sc-jsoneditor-success:after
-      color: $json-editor-success-color
-    &:after
       +responsive-size(font-size, $theme-font-medium-size, 3px)
       height: $theme-gap-extra-large-size
+      color: $json-editor-success-color
       padding: $theme-gap-medium-size
       content: attr(title-after)
       +font-family(roboto-mono)
@@ -144,6 +139,7 @@
       position: absolute
       overflow: hidden
       display: inline
+      right: 100%
       opacity: 0
     &:not(:active):after
       transition: transform 1.5s step-end

diff --git a/exampleSite/assets/js/jsoneditor.js b/exampleSite/assets/js/jsoneditor.js
@@ -1,6 +1,6 @@
 // Function to run additionnal process after standard JSON Schema validation in jsoneditor
 window.examplePostAnalyzeFunction = function examplePostAnalyzeFunction() {
-  return ['A dummy error']
+  return [{path: 'root.dummy', message: 'A dummy error'}]
 }
 // Function to run additionnal process after standard JSON process in jsoneditor
 window.examplePostProcessFunction = function examplePostProcessFunction(json) {

diff --git a/exampleSite/content/english/shortcodes/jsoneditor.md b/exampleSite/content/english/shortcodes/jsoneditor.md
@@ -22,7 +22,13 @@ Source of the JSON Schema.
 | postAnalyzeFunction | named |{{< md >}}
 Name of the global Javascript method to run specific and additionnal validation right after the Jsoneditor standard validation.  
 * **input**: JSON Schema
-* **output**: Array of errors as array of strings (Empty array if no errors)
+* **output**: Array of ***errors*** (Empty array if no errors), with ***errors*** of type:  
+  ```
+  {
+    path: [FIELD_ERROR_PATH],
+    message: [ERROR_MESSAGE]
+  }
+  ```
 {{< /md >}}|
 | postProcessFunction | named |{{< md >}}
 Name of the global Javascript method to run specific and additionnal process right after the Jsoneditor standard JSON generation.  

diff --git a/exampleSite/content/french/shortcodes/jsoneditor.md b/exampleSite/content/french/shortcodes/jsoneditor.md
@@ -22,7 +22,13 @@ Source du JSON Schema.
 | postAnalyzeFunction | named |{{< md >}}
 Nom de la méthode globale Javascript utilisé pour exécuter une validation spécifique et supplémentaire juste après la validation standard Jsoneditor.  
 * **input**: JSON Schema
-* **output**: List d'erreurs sous forme de liste de strings (Liste vide si aucune erreur)
+* **output**: List d'***erreurs*** (Liste vide si aucune erreur), avec les ***erreurs*** de la forme:
+  ```
+  {
+    path: [CHEMIN_DU_CHAMP_EN_ERREUR],
+    message: [MESSAGE_D'ERREUR]
+  }
+  ```
 {{< /md >}}|
 | postProcessFunction | named |{{< md >}}
 Nom de la méthode globale Javascript utilisée pour exécuter un processus spécifique et supplémentaire juste après la génération standard du JSON de Jsoneditor.