jedison 0.3.19 → 0.3.21

package/dist/esm/jedison.js

@@ -1930,6 +1930,7 @@ class Editor {
     this.init();
     this.build();
     this.setAttributes();
+    this.setReadOnlyAttribute();
     this.addEventListeners();
     this.setVisibility();
     this.setContainerAttributes();
@@ -2009,6 +2010,14 @@ class Editor {
       }
     }
   }
+  setReadOnlyAttribute() {
+    if (this.readOnly) {
+      const inputElements = this.control.container.querySelectorAll("input, textarea, select");
+      inputElements.forEach((element) => {
+        element.setAttribute("always-disabled", "");
+      });
+    }
+  }
   getIdFromPath(path) {
     const optionId = this.instance.jedison.options.id;
     return optionId ? optionId + "-" + pathToAttribute(path) : pathToAttribute(path);
@@ -2901,7 +2910,9 @@ const glyphicons = {
   // Expand set to plus
   drag: "glyphicon glyphicon-th",
   info: "glyphicon glyphicon-question-sign",
-  close: "glyphicon glyphicon-remove"
+  close: "glyphicon glyphicon-remove",
+  edit: "glyphicon glyphicon-pencil",
+  save: "glyphicon glyphicon-floppy-disk"
 };
 const bootstrapIcons = {
   properties: "bi bi-card-list",
@@ -2913,7 +2924,9 @@ const bootstrapIcons = {
   expand: "bi bi-plus",
   drag: "bi bi-grip-vertical",
   info: "bi bi-question-circle",
-  close: "bi bi-x"
+  close: "bi bi-x",
+  edit: "bi bi-pencil",
+  save: "bi bi-floppy"
 };
 const fontAwesome3 = {
   properties: "icon-list",
@@ -2925,7 +2938,9 @@ const fontAwesome3 = {
   expand: "icon-plus",
   drag: "icon-th",
   info: "icon-question-sign",
-  close: "icon-remove"
+  close: "icon-remove",
+  edit: "icon-pencil",
+  save: "icon-save"
 };
 const fontAwesome4 = {
   properties: "fa fa-list",
@@ -2937,7 +2952,9 @@ const fontAwesome4 = {
   expand: "fa fa-plus",
   drag: "fa fa-th",
   info: "fa fa-question-circle",
-  close: "fa fa-times"
+  close: "fa fa-times",
+  edit: "fa fa-pencil",
+  save: "fa fa-floppy-o"
 };
 const fontAwesome5 = {
   properties: "fas fa-list",
@@ -2949,7 +2966,9 @@ const fontAwesome5 = {
   expand: "fas fa-plus",
   drag: "fas fa-grip-vertical",
   info: "fas fa-question-circle",
-  close: "fas fa-times"
+  close: "fas fa-times",
+  edit: "fas fa-pencil-alt",
+  save: "fas fa-save"
 };
 const fontAwesome6 = {
   properties: "fa-solid fa-list",
@@ -2961,7 +2980,9 @@ const fontAwesome6 = {
   expand: "fa-solid fa-plus",
   drag: "fa-solid fa-grip-vertical",
   info: "fa-solid fa-circle-question",
-  close: "fa-solid fa-xmark"
+  close: "fa-solid fa-xmark",
+  edit: "fa-solid fa-pencil",
+  save: "fa-solid fa-floppy-disk"
 };
 class EditorBoolean extends Editor {
   sanitize(value) {
@@ -3467,7 +3488,6 @@ class EditorObject extends Editor {
   }
   build() {
     this.propertyActivators = {};
-    const schemaOptions = this.instance.schema.options || {};
     let addProperty = true;
     const additionalProperties2 = getSchemaAdditionalProperties(this.instance.schema);
     if (isSet(additionalProperties2) && additionalProperties2 === false) {
@@ -3477,8 +3497,9 @@ class EditorObject extends Editor {
     if (isSet(this.instance.jedison.options.enablePropertiesToggle)) {
       enablePropertiesToggle = this.instance.jedison.options.enablePropertiesToggle;
     }
-    if (isSet(schemaOptions.enablePropertiesToggle)) {
-      enablePropertiesToggle = schemaOptions.enablePropertiesToggle;
+    const schemaEnablePropertiesToggle = getSchemaXOption(this.instance.schema, "enablePropertiesToggle");
+    if (isSet(schemaEnablePropertiesToggle)) {
+      enablePropertiesToggle = schemaEnablePropertiesToggle;
     }
     this.control = this.theme.getObjectControl({
       title: this.getTitle(),
@@ -3491,10 +3512,12 @@ class EditorObject extends Editor {
       startCollapsed: getSchemaXOption(this.instance.schema, "startCollapsed") ?? this.instance.jedison.options.startCollapsed,
       readOnly: this.instance.isReadOnly(),
       info: this.getInfo(),
+      editJsonData: getSchemaXOption(this.instance.schema, "editJsonData") ?? this.instance.jedison.options.editJsonData,
       propertiesToggleContent: getSchemaXOption(this.instance.schema, "propertiesToggleContent") ?? this.instance.jedison.translator.translate("propertiesToggle"),
       collapseToggleContent: getSchemaXOption(this.instance.schema, "collapseToggleContent") ?? this.instance.jedison.translator.translate("collapseToggle"),
       addPropertyContent: getSchemaXOption(this.instance.schema, "addPropertyContent") ?? this.instance.jedison.translator.translate("objectAddProperty")
     });
+    this.control.jsonData.input.value = JSON.stringify(this.instance.getValue(), null, 2);
   }
   addEventListeners() {
     this.control.addPropertyBtn.addEventListener("click", () => {
@@ -3521,6 +3544,18 @@ class EditorObject extends Editor {
       this.control.propertiesContainer.close();
       this.control.propertiesContainer.showModal();
     });
+    this.control.jsonData.saveBtn.addEventListener("click", () => {
+      try {
+        const inputValue = JSON.parse(this.control.jsonData.input.value);
+        this.instance.setValue(inputValue, true, "user");
+        this.control.jsonData.dialog.close();
+      } catch (error) {
+        alert("Invalid JSON");
+      }
+    });
+    this.control.jsonData.toggle.addEventListener("click", () => {
+      this.refreshJsonDataInputSize();
+    });
   }
   sanitize(value) {
     if (isObject(value)) {
@@ -3597,6 +3632,19 @@ class EditorObject extends Editor {
       });
     }
   }
+  refreshJsonDataInputSize() {
+    const input = this.control.jsonData.input;
+    input.style.height = "auto";
+    input.style.height = input.scrollHeight + "px";
+    setTimeout(() => {
+      if (input) {
+        input.scrollTop = 0;
+      }
+    });
+  }
+  refreshJsonData() {
+    this.control.jsonData.input.value = JSON.stringify(this.instance.getValue(), null, 2);
+  }
   refreshEditors() {
     while (this.control.childrenSlot.firstChild) {
       this.control.childrenSlot.removeChild(this.control.childrenSlot.firstChild);
@@ -3638,6 +3686,7 @@ class EditorObject extends Editor {
     super.refreshUI();
     this.refreshPropertiesSlot();
     this.refreshEditors();
+    this.refreshJsonData();
   }
 }
 class EditorObjectGrid extends EditorObject {
@@ -3699,8 +3748,8 @@ class EditorObjectNav extends EditorObject {
     const columns = formatParts[2];
     const navColumns = variant === "horizontal" ? 12 : columns ?? 4;
     const row = this.theme.getRow();
-    const tabListCol = this.theme.getCol(12, navColumns);
-    const tabContentCol = this.theme.getCol(12, 12 - navColumns);
+    const tabListCol = this.theme.getCol(12, 12, navColumns, navColumns);
+    const tabContentCol = this.theme.getCol(12, 12, 12 - navColumns, 12 - navColumns);
     const tabContent = this.theme.getTabContent();
     const tabList = this.theme.getTabList({
       variant
@@ -4214,8 +4263,8 @@ class EditorArrayNav extends EditorArray {
     const columns = formatParts[2];
     const navColumns = variant === "horizontal" ? 12 : columns ?? 4;
     const row = this.theme.getRow();
-    const tabListCol = this.theme.getCol(12, navColumns);
-    const tabContentCol = this.theme.getCol(12, 12 - navColumns);
+    const tabListCol = this.theme.getCol(12, 12, navColumns, navColumns);
+    const tabContentCol = this.theme.getCol(12, 12, 12 - navColumns, 12 - navColumns);
     const tabContent = this.theme.getTabContent();
     const tabList = this.theme.getTabList({
       variant
@@ -4463,7 +4512,29 @@ class EditorStringJodit extends EditorString {
       info: this.getInfo()
     });
     try {
-      const joditOptions = getSchemaXOption(this.instance.schema, "jodit") ?? {};
+      const joditDefaultOptions = {
+        showCharsCounter: false,
+        showWordsCounter: false,
+        showXPathInStatusbar: false,
+        toolbarAdaptive: false,
+        buttons: [
+          "bold",
+          "italic",
+          "underline",
+          "strikethrough",
+          "|",
+          "ul",
+          "ol",
+          "|",
+          "link",
+          "|",
+          "source",
+          "preview"
+        ]
+      };
+      const joditSchemaOptions = getSchemaXOption(this.instance.schema, "jodit") ?? {};
+      const joditOptions = Object.assign({}, joditDefaultOptions, joditSchemaOptions);
+      console.log("joditOptions", joditOptions, getSchemaXOption(this.instance.schema, "jodit"));
       this.jodit = window.Jodit.make(this.control.input, joditOptions);
     } catch (e) {
       console.error("Jodit is not available or not loaded correctly.", e);
@@ -5132,6 +5203,7 @@ class Jedison extends EventEmitter {
       iconLib: null,
       theme: null,
       refParser: null,
+      editJsonData: false,
       enablePropertiesToggle: false,
       enableCollapseToggle: false,
       btnContents: true,
@@ -6063,6 +6135,60 @@ class Theme {
     });
     return html;
   }
+  /**
+   * Container for properties editing elements like property activators
+   */
+  getJsonData(config) {
+    const dialog = document.createElement("dialog");
+    dialog.classList.add("jedi-json-data");
+    dialog.setAttribute("id", config.id);
+    window.addEventListener("click", (event) => {
+      if (event.target === dialog) {
+        dialog.close();
+      }
+    });
+    const toggle = this.getButton({
+      // content: config.propertiesToggleContent, // todo: use text config or something
+      id: "jedi-json-data-toggle-" + config.id,
+      icon: "edit"
+    });
+    toggle.classList.add("jedi-json-data-toggle");
+    toggle.addEventListener("click", () => {
+      if (dialog.open) {
+        dialog.close();
+      } else {
+        dialog.showModal();
+      }
+    });
+    const control = document.createElement("div");
+    const { label } = this.getLabel({
+      for: "json-data-input-" + config.id,
+      text: "JSON Data"
+    });
+    const input = document.createElement("textarea");
+    input.setAttribute("id", "json-data-input-" + config.id);
+    input.cols = 60;
+    input.style.whiteSpace = "pre";
+    input.style.overflowX = "auto";
+    input.style.resize = "both";
+    input.style.maxHeight = "60vh";
+    const saveBtn = this.getButton({
+      // content: config.propertiesToggleContent, // todo: use text config or something
+      id: "jedi-json-data-save-" + config.id,
+      icon: "save"
+    });
+    dialog.appendChild(control);
+    control.appendChild(label);
+    control.appendChild(input);
+    dialog.appendChild(saveBtn);
+    return {
+      dialog,
+      toggle,
+      control,
+      input,
+      saveBtn
+    };
+  }
   /**
    * Container for screen reader announced messages
    */
@@ -6337,6 +6463,9 @@ class Theme {
     const description = this.getDescription({
       content: config.description
     });
+    const jsonData = this.getJsonData({
+      id: "json-data-" + config.id
+    });
     const propertiesContainer = this.getPropertiesSlot({
       id: "properties-slot-" + config.id
     });
@@ -6379,6 +6508,9 @@ class Theme {
     addPropertyBtn.classList.add("jedi-object-add");
     container.appendChild(fieldset);
     container.appendChild(propertiesContainer);
+    if (config.editJsonData) {
+      container.appendChild(jsonData.dialog);
+    }
     fieldset.appendChild(legend);
     if (isObject(config.info)) {
       infoContainer.appendChild(info.container);
@@ -6398,6 +6530,9 @@ class Theme {
       propertiesContainer.appendChild(addPropertyBtn);
       propertiesContainer.appendChild(document.createElement("hr"));
     }
+    if (config.editJsonData) {
+      actions.appendChild(jsonData.toggle);
+    }
     if (config.enablePropertiesToggle) {
       actions.appendChild(propertiesToggle);
       propertiesContainer.appendChild(ariaLive);
@@ -6416,6 +6551,7 @@ class Theme {
       messages,
       childrenSlot,
       propertiesToggle,
+      jsonData,
       propertiesContainer,
       addPropertyControl,
       addPropertyBtn,
@@ -7212,6 +7348,14 @@ class ThemeBootstrap3 extends Theme {
     }
     return collapse;
   }
+  getJsonData(config) {
+    const jsonData = super.getJsonData(config);
+    jsonData.control.classList.add("form-group");
+    jsonData.input.classList.add("form-control");
+    jsonData.saveBtn.classList.add("btn-primary");
+    jsonData.saveBtn.classList.add("btn-block");
+    return jsonData;
+  }
   getFieldset() {
     const fieldset = super.getFieldset();
     fieldset.classList.add("panel");
@@ -7547,6 +7691,14 @@ class ThemeBootstrap4 extends Theme {
     }
     return collapse;
   }
+  getJsonData(config) {
+    const jsonData = super.getJsonData(config);
+    jsonData.control.classList.add("form-group");
+    jsonData.input.classList.add("form-control");
+    jsonData.saveBtn.classList.add("btn-primary");
+    jsonData.saveBtn.classList.add("btn-block");
+    return jsonData;
+  }
   getFieldset() {
     const fieldset = document.createElement("fieldset");
     fieldset.setAttribute("role", "group");
@@ -7906,6 +8058,14 @@ class ThemeBootstrap5 extends Theme {
     }
     return collapse;
   }
+  getJsonData(config) {
+    const jsonData = super.getJsonData(config);
+    jsonData.control.classList.add("mb-3");
+    jsonData.input.classList.add("form-control");
+    jsonData.saveBtn.classList.add("btn-primary");
+    jsonData.saveBtn.classList.add("w-100");
+    return jsonData;
+  }
   getFieldset() {
     const fieldset = document.createElement("fieldset");
     fieldset.setAttribute("role", "group");