@json-editor/json-editor 1.4.0-beta.0 → 1.17.0

package/src/editors/hidden.js

@@ -1,118 +1,132 @@
 /**
  * Created by Mehmet Baker on 12.04.2017
  */
-JSONEditor.defaults.editors.hidden = JSONEditor.AbstractEditor.extend({
-  register: function () {
-    this._super();
-    if (!this.input) return;
-    this.input.setAttribute('name', this.formname);
-  },
-  unregister: function () {
-    this._super();
-    if (!this.input) return;
-    this.input.removeAttribute('name');
-  },
-  setValue: function (value, initial, from_template) {
-    var self = this;
-
-    if(this.template && !from_template) {
-      return;
+import { AbstractEditor } from '../editor.js'
+
+export class HiddenEditor extends AbstractEditor {
+  register () {
+    super.register()
+    if (!this.input) return
+    if (this.jsoneditor.options.use_name_attributes) {
+      this.input.setAttribute('name', this.formname)
     }
+  }
+
+  unregister () {
+    super.unregister()
+    if (!this.input) return
+    this.input.removeAttribute('name')
+  }
 
-    if(value === null || typeof value === 'undefined') value = "";
-    else if(typeof value === "object") value = JSON.stringify(value);
-    else if(typeof value !== "string") value = ""+value;
+  setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
 
-    if(value === this.serialized) return;
+    if (this.template && !fromTemplate) {
+      return
+    }
 
-    // Sanitize value before setting it
-    var sanitized = this.sanitize(value);
+    if (value === null || typeof value === 'undefined') value = ''
+    else if (typeof value === 'object') value = JSON.stringify(value)
+    else if (typeof value !== 'string') value = `${value}`
 
-    if(this.input.value === sanitized) {
-      return;
+    if (value === this.serialized) return
+
+    /* Sanitize value before setting it */
+    const sanitized = this.sanitize(value)
+
+    if (this.input.value === sanitized) {
+      return
     }
 
-    this.input.value = sanitized;
-
-    var changed = from_template || this.getValue() !== value;
-
-    this.refreshValue();
-
-    if(initial) this.is_dirty = false;
-    else if(this.jsoneditor.options.show_errors === "change") this.is_dirty = true;
-
-    if(this.adjust_height) this.adjust_height(this.input);
-
-    // Bubble this setValue to parents if the value changed
-    this.onChange(changed);
-  },
-  getNumColumns: function () {
-    return 2;
-  },
-  enable: function () {
-    this._super();
-  },
-  disable: function () {
-    this._super();
-  },
-  refreshValue: function () {
-    this.value = this.input.value;
-    if (typeof this.value !== "string") this.value = '';
-    this.serialized = this.value;
-  },
-  destroy: function () {
-    this.template = null;
-    if (this.input && this.input.parentNode) this.input.parentNode.removeChild(this.input);
-    if (this.label && this.label.parentNode) this.label.parentNode.removeChild(this.label);
-    if (this.description && this.description.parentNode) this.description.parentNode.removeChild(this.description);
-
-    this._super();
-  },
+    this.input.value = sanitized
+
+    const changed = fromTemplate || this.getValue() !== value
+
+    this.refreshValue()
+
+    if (initial) this.is_dirty = false
+    else if (this.jsoneditor.options.show_errors === 'change') this.is_dirty = true
+
+    if (this.adjust_height) this.adjust_height(this.input)
+
+    /* Bubble this setValue to parents if the value changed */
+    this.onChange(changed)
+  }
+
+  getNumColumns () {
+    return 2
+  }
+
+  enable () {
+    super.enable()
+  }
+
+  disable () {
+    super.disable()
+  }
+
+  refreshValue () {
+    this.value = this.input.value
+    if (typeof this.value !== 'string') this.value = ''
+    this.serialized = this.value
+  }
+
+  destroy () {
+    this.template = null
+    if (this.input && this.input.parentNode) this.input.parentNode.removeChild(this.input)
+    if (this.label && this.label.parentNode) this.label.parentNode.removeChild(this.label)
+    if (this.description && this.description.parentNode) this.description.parentNode.removeChild(this.description)
+
+    super.destroy()
+  }
+
   /**
    * This is overridden in derivative editors
    */
-  sanitize: function (value) {
-    return value;
-  },
+  sanitize (value) {
+    value = this.purify(value)
+    return value
+  }
+
   /**
    * Re-calculates the value if needed
    */
-  onWatchedFieldChange: function () {
-    var self = this, vars, j;
+  onWatchedFieldChange () {
+    let vars
 
-    // If this editor needs to be rendered by a macro template
+    /* If this editor needs to be rendered by a macro template */
     if (this.template) {
-      vars = this.getWatchedFieldValues();
-      this.setValue(this.template(vars), false, true);
+      vars = this.getWatchedFieldValues()
+      this.setValue(this.template(vars), false, true)
     }
 
-    this._super();
-  },
-  build: function () {
-    var self = this;
+    super.onWatchedFieldChange()
+  }
 
-    this.format = this.schema.format;
+  build () {
+    this.format = this.schema.format
     if (!this.format && this.options.default_format) {
-      this.format = this.options.default_format;
+      this.format = this.options.default_format
     }
     if (this.options.format) {
-      this.format = this.options.format;
+      this.format = this.options.format
     }
 
-    this.input_type = 'hidden';
-    this.input = this.theme.getFormInputField(this.input_type);
+    this.input_type = 'hidden'
+    this.input = this.theme.getFormInputField(this.input_type)
 
-    if (this.format) this.input.setAttribute('data-schemaformat', this.format);
+    if (this.format) this.input.setAttribute('data-schemaformat', this.format)
 
-    this.container.appendChild(this.input);
+    this.container.appendChild(this.input)
 
-    // Compile and store the template
+    /* Compile and store the template */
     if (this.schema.template) {
-      this.template = this.jsoneditor.compileTemplate(this.schema.template, this.template_engine);
-      this.refreshValue();
-    }
-    else {
-      this.refreshValue();
+      const callback = this.expandCallbacks('template', { template: this.schema.template })
+      if (typeof callback.template === 'function') this.template = callback.template
+      else this.template = this.jsoneditor.compileTemplate(this.schema.template, this.template_engine)
+      this.refreshValue()
+    } else {
+      this.refreshValue()
     }
   }
-});
+}

package/src/editors/index.js

@@ -0,0 +1,81 @@
+/* Internal helper function called only here so we won't export as part of class */
+/* Previously the assignment to the JSONEditor.defaults.editors was done in each of the editor */
+/* files but doing it this way removes each of the editors' dependency on JSONEditor */
+
+import { AceEditor as ace } from './ace.js'
+import { ArrayEditor as array } from './array.js'
+import { ArrayChoicesEditor as arrayChoices } from './array/choices.js'
+import { ArraySelect2Editor as arraySelect2 } from './array/select2.js'
+import { ArraySelectizeEditor as arraySelectize } from './array/selectize.js'
+import { AutocompleteEditor as autocomplete } from './autocomplete.js'
+import { Base64Editor as base64 } from './base64.js'
+import { ButtonEditor as button } from './button.js'
+import { CheckboxEditor as checkbox } from './checkbox.js'
+import { ChoicesEditor as choices } from './choices.js'
+import { DatetimeEditor as datetime } from './datetime.js'
+import { DescribedByEditor as describedBy } from './describedby.js'
+import { EnumEditor } from './enum.js'
+import { HiddenEditor as hidden } from './hidden.js'
+import { InfoEditor as info } from './info.js'
+import { IntegerEditor as integer } from './integer.js'
+import { IpEditor as ip } from './ip.js'
+import { JoditEditor as jodit } from './jodit.js'
+import { MultipleEditor as multiple } from './multiple.js'
+import { MultiSelectEditor as multiselect } from './multiselect.js'
+import { NullEditor } from './null.js'
+import { NumberEditor as number } from './number.js'
+import { ObjectEditor as object } from './object.js'
+import { RadioEditor as radio } from './radio.js'
+import { ScEditor as sceditor } from './sceditor.js'
+import { SelectEditor as select } from './select.js'
+import { Select2Editor as select2 } from './select2.js'
+import { SelectizeEditor as selectize } from './selectize.js'
+import { SignatureEditor as signature } from './signature.js'
+import { SimplemdeEditor as simplemde } from './simplemde.js'
+import { StarratingEditor as starrating } from './starrating.js'
+import { StepperEditor as stepper } from './stepper.js'
+import { StringEditor as string } from './string.js'
+import { TableEditor as table } from './table.js'
+import { UploadEditor as upload } from './upload.js'
+import { UuidEditor as uuid } from './uuid.js'
+import { ColorEditor as colorpicker } from './colorpicker.js'
+
+export const editors = {
+  ace,
+  array,
+  arrayChoices,
+  arraySelect2,
+  arraySelectize,
+  autocomplete,
+  base64,
+  button,
+  checkbox,
+  choices,
+  datetime,
+  describedBy,
+  enum: EnumEditor,
+  hidden,
+  info,
+  integer,
+  ip,
+  jodit,
+  multiple,
+  multiselect,
+  null: NullEditor,
+  number,
+  object,
+  radio,
+  sceditor,
+  select,
+  select2,
+  selectize,
+  signature,
+  simplemde,
+  starrating,
+  stepper,
+  string,
+  table,
+  upload,
+  uuid,
+  colorpicker
+}

package/src/editors/info.js

@@ -0,0 +1,28 @@
+/* Non-Active editor for displaying text blocks in form */
+import { ButtonEditor } from './button.js'
+
+export class InfoEditor extends ButtonEditor {
+  build () {
+    this.options.compact = false
+    this.header = this.label = this.theme.getLabelLike(this.getTitle())
+    this.description = this.theme.getDescription(this.schema.description || '')
+    this.control = this.theme.getFormControl(this.label, this.description, null)
+    this.container.appendChild(this.control)
+  }
+
+  getTitle () {
+    return this.translateProperty(this.schema.title)
+  }
+
+  getNumColumns () {
+    return 12
+  }
+
+  disable () {
+    return false
+  }
+
+  enable () {
+    return false
+  }
+}

package/src/editors/integer.js

@@ -1,9 +1,22 @@
-JSONEditor.defaults.editors.integer = JSONEditor.defaults.editors.number.extend({
-  sanitize: function(value) {
-    value = value + "";
-    return value.replace(/[^0-9\-]/g,'');
-  },
-  getNumColumns: function() {
-    return 2;
+import { NumberEditor } from './number.js'
+import { isInteger } from '../utilities.js'
+
+export class IntegerEditor extends NumberEditor {
+  getNumColumns () {
+    return 2
   }
-});
+
+  getValue () {
+    if (!this.dependenciesFulfilled) {
+      return undefined
+    }
+
+    if (!this.schema.default && !this.jsoneditor.options.use_default_values && this.value === '') {
+      if (this.shouldBeUnset()) {
+        return undefined
+      }
+    } else {
+      return isInteger(this.value) ? parseInt(this.value) : this.value
+    }
+  }
+}

package/src/editors/ip.js

@@ -0,0 +1,36 @@
+import { StringEditor } from './string.js'
+import { extend } from '../utilities.js'
+
+export class IpEditor extends StringEditor {
+  preBuild () {
+    super.preBuild()
+
+    /* Create schema options object if deesn't exist */
+    if (!this.schema.options) {
+      this.schema.options = {}
+    }
+
+    /* Create cleave options if they don't exist */
+    if (!this.schema.options.cleave) {
+      switch (this.format) {
+        case 'ipv6':
+          this.schema.options.cleave = {
+            delimiters: [':'],
+            blocks: [4, 4, 4, 4, 4, 4, 4, 4],
+            uppercase: true
+          }
+          break
+        case 'ipv4':
+          this.schema.options.cleave = {
+            delimiters: ['.'],
+            blocks: [3, 3, 3, 3],
+            numericOnly: true
+          }
+          break
+      }
+    }
+
+    /* Update options object */
+    this.options = extend(this.options, this.schema.options || {})
+  }
+}

package/src/editors/jodit.js

@@ -0,0 +1,66 @@
+import { StringEditor } from './string.js'
+import { extend } from '../utilities.js'
+
+export class JoditEditor extends StringEditor {
+  setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
+
+    const res = super.setValue(value, initial, fromTemplate)
+    if (res !== undefined && res.changed && this.jodit_instance) this.jodit_instance.setEditorValue(res.value)
+  }
+
+  build () {
+    this.options.format = 'textarea' /* Force format into "textarea" */
+    super.build()
+    this.input_type = this.schema.format /* Restore original format */
+    this.input.setAttribute('data-schemaformat', this.input_type)
+  }
+
+  afterInputReady () {
+    let options
+
+    if (window.Jodit) {
+      /* Get options, either global options from "this.defaults.options.jodit" or */
+      /* single property options from schema "options.jodit" */
+      options = this.expandCallbacks('jodit', extend({}, {
+        height: 300
+      }, this.defaults.options.jodit || {}, this.options.jodit || {}))
+
+      this.jodit_instance = new window.Jodit(this.input, options)
+
+      if (this.schema.readOnly || this.schema.readonly || this.schema.template) {
+        this.jodit_instance.setReadOnly(true)
+      }
+
+      this.jodit_instance.events.on('change', () => {
+        this.value = this.jodit_instance.getEditorValue()
+        this.is_dirty = true
+        this.onChange(true)
+      })
+
+      this.theme.afterInputReady(this.input)
+    } else super.afterInputReady() /* Library not loaded, so just treat this as a string */
+  }
+
+  getNumColumns () {
+    return 6
+  }
+
+  enable () {
+    if (!this.always_disabled && this.jodit_instance) this.jodit_instance.setReadOnly(false)
+    super.enable()
+  }
+
+  disable (alwaysDisabled) {
+    if (this.jodit_instance) this.jodit_instance.setReadOnly(true)
+    super.disable(alwaysDisabled)
+  }
+
+  destroy () {
+    if (this.jodit_instance) {
+      this.jodit_instance.destruct()
+      this.jodit_instance = null
+    }
+    super.destroy()
+  }
+}