@json-editor/json-editor 2.5.2 → 2.6.1

package/src/editor.js

@@ -11,6 +11,7 @@ export class AbstractEditor {
     this.template_engine = this.jsoneditor.template
     this.iconlib = this.jsoneditor.iconlib
     this.translate = this.jsoneditor.translate || this.defaults.translate
+    this.translateProperty = this.jsoneditor.translateProperty || this.defaults.translateProperty
     this.original_schema = options.schema
     this.schema = this.jsoneditor.expandSchema(this.original_schema)
     this.active = true
@@ -129,7 +130,12 @@ export class AbstractEditor {
       this.notify()
     }
 
-    const displayMode = this.dependenciesFulfilled ? 'block' : 'none'
+    let displayMode = this.dependenciesFulfilled ? 'block' : 'none'
+
+    if (this.options.hidden) {
+      displayMode = 'none'
+    }
+
     if (wrapper.tagName === 'TD') {
       Object.keys(wrapper.childNodes).forEach(child => (wrapper.childNodes[child].style.display = displayMode))
     } else wrapper.style.display = displayMode
@@ -146,9 +152,8 @@ export class AbstractEditor {
     if (!editor || !editor.dependenciesFulfilled) {
       this.dependenciesFulfilled = false
     } else if (Array.isArray(choices)) {
-      choices.some(choice => {
-        if (value === choice) {
-          this.dependenciesFulfilled = true
+      this.dependenciesFulfilled = choices.some(choice => {
+        if (JSON.stringify(value) === JSON.stringify(choice)) {
           return true
         }
       })
@@ -201,7 +206,11 @@ export class AbstractEditor {
     })
 
     /* append active/deactive checkbox if show_opt_in is true */
-    if (this.jsoneditor.options.show_opt_in || this.options.show_opt_in) {
+    const globalOptIn = this.jsoneditor.options.show_opt_in
+    const parentOptInDefined = (typeof this.parent.options.show_opt_in !== 'undefined')
+    const parentOptInEnabled = (parentOptInDefined && this.parent.options.show_opt_in === true)
+    const parentOptInDisabled = (parentOptInDefined && this.parent.options.show_opt_in === false)
+    if (parentOptInEnabled || (!parentOptInDisabled && globalOptIn) || (!parentOptInDefined && globalOptIn)) {
       /* and control to type object editors if they are not required */
       if (this.parent && this.parent.schema.type === 'object' && !this.isRequired() && this.header) {
         this.header.appendChild(this.optInCheckbox)
@@ -293,11 +302,14 @@ export class AbstractEditor {
 
   onMove () {}
 
-  getButton (text, icon, title) {
+  getButton (text, icon, title, args = []) {
     const btnClass = `json-editor-btn-${icon}`
     if (!this.iconlib) icon = null
     else icon = this.iconlib.getIcon(icon)
 
+    text = this.translate(text, args)
+    title = this.translate(title, args)
+
     if (!icon && title) {
       text = title
       title = null
@@ -308,10 +320,13 @@ export class AbstractEditor {
     return btn
   }
 
-  setButtonText (button, text, icon, title) {
+  setButtonText (button, text, icon, title, args = []) {
     if (!this.iconlib) icon = null
     else icon = this.iconlib.getIcon(icon)
 
+    text = this.translate(text, args)
+    title = this.translate(title, args)
+
     if (!icon && title) {
       text = title
       title = null
@@ -460,10 +475,14 @@ export class AbstractEditor {
 
   getHeaderText (titleOnly) {
     if (this.header_text) return this.header_text
-    else if (titleOnly) return this.schema.title
+    else if (titleOnly) return this.translateProperty(this.schema.title)
     else return this.getTitle()
   }
 
+  getPathDepth () {
+    return this.path.split('.').length
+  }
+
   cleanText (txt) {
     /* Clean out HTML tags from txt */
     const tmp = document.createElement('div')
@@ -569,7 +588,7 @@ export class AbstractEditor {
   }
 
   getTitle () {
-    return this.schema.title || this.key
+    return this.translateProperty(this.schema.title || this.key)
   }
 
   enable () {

package/src/editors/array.js

@@ -95,12 +95,16 @@ export class ArrayEditor extends AbstractEditor {
     if (!this.options.compact) {
       this.header = document.createElement('label')
       this.header.textContent = this.getTitle()
-      this.title = this.theme.getHeader(this.header)
+      this.title = this.theme.getHeader(this.header, this.getPathDepth())
       this.container.appendChild(this.title)
+      if (this.options.infoText) {
+        this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
+        this.container.appendChild(this.infoButton)
+      }
       this.title_controls = this.theme.getHeaderButtonHolder()
       this.title.appendChild(this.title_controls)
       if (this.schema.description) {
-        this.description = this.theme.getDescription(this.schema.description)
+        this.description = this.theme.getDescription(this.translateProperty(this.schema.description))
         this.container.appendChild(this.description)
       }
       this.error_holder = document.createElement('div')
@@ -136,7 +140,7 @@ export class ArrayEditor extends AbstractEditor {
       }
     } else {
       /* compact mode */
-      this.title = this.theme.getHeader('')
+      this.title = this.theme.getHeader('', this.getPathDepth())
       this.container.appendChild(this.title)
       this.panel = this.theme.getIndentedPanel()
       this.container.appendChild(this.panel)
@@ -162,7 +166,7 @@ export class ArrayEditor extends AbstractEditor {
     if (!this.item_title) {
       if (this.schema.items && !Array.isArray(this.schema.items)) {
         const tmp = this.jsoneditor.expandRefs(this.schema.items)
-        this.item_title = tmp.title || this.translate('default_array_item_title')
+        this.item_title = this.translateProperty(tmp.title) || this.translate('default_array_item_title')
       } else {
         this.item_title = this.translate('default_array_item_title')
       }
@@ -200,7 +204,7 @@ export class ArrayEditor extends AbstractEditor {
     schema = this.jsoneditor.expandRefs(schema)
 
     this.item_info[stringified] = {
-      title: schema.title || this.translate('default_array_item_title'),
+      title: this.translateProperty(schema.title) || this.translate('default_array_item_title'),
       default: schema.default,
       width: 12,
       child_editors: schema.properties || schema.items
@@ -492,14 +496,14 @@ export class ArrayEditor extends AbstractEditor {
       this.rows[i].movedown_button = this._createMoveDownButton(i, controlsHolder)
     }
 
-    if (value) this.rows[i].setValue(value, initial)
+    if (typeof value !== 'undefined') this.rows[i].setValue(value, initial)
     this.refreshTabs()
 
     return this.rows[i]
   }
 
   _createDeleteButton (i, holder) {
-    const button = this.getButton(this.getItemTitle(), 'delete', this.translate('button_delete_row_title', [this.getItemTitle()]))
+    const button = this.getButton(this.getItemTitle(), 'delete', 'button_delete_row_title', [this.getItemTitle()])
     button.classList.add('delete', 'json-editor-btntype-delete')
     button.setAttribute('data-i', i)
     button.addEventListener('click', e => {
@@ -540,7 +544,7 @@ export class ArrayEditor extends AbstractEditor {
   }
 
   _createCopyButton (i, holder) {
-    const button = this.getButton(this.getItemTitle(), 'copy', `Copy ${this.getItemTitle()}`)
+    const button = this.getButton(this.getItemTitle(), 'copy', 'button_copy_row_title', [this.getItemTitle()])
     button.classList.add('copy', 'json-editor-btntype-copy')
     button.setAttribute('data-i', i)
     button.addEventListener('click', e => {
@@ -565,7 +569,7 @@ export class ArrayEditor extends AbstractEditor {
   }
 
   _createMoveUpButton (i, holder) {
-    const button = this.getButton('', (this.schema.format === 'tabs-top' ? 'moveleft' : 'moveup'), this.translate('button_move_up_title'))
+    const button = this.getButton('', (this.schema.format === 'tabs-top' ? 'moveleft' : 'moveup'), 'button_move_up_title')
     button.classList.add('moveup', 'json-editor-btntype-move')
     button.setAttribute('data-i', i)
     button.addEventListener('click', e => {
@@ -595,7 +599,7 @@ export class ArrayEditor extends AbstractEditor {
   }
 
   _createMoveDownButton (i, holder) {
-    const button = this.getButton('', (this.schema.format === 'tabs-top' ? 'moveright' : 'movedown'), this.translate('button_move_down_title'))
+    const button = this.getButton('', (this.schema.format === 'tabs-top' ? 'moveright' : 'movedown'), 'button_move_down_title')
     button.classList.add('movedown', 'json-editor-btntype-move')
     button.setAttribute('data-i', i)
     button.addEventListener('click', e => {
@@ -652,7 +656,7 @@ export class ArrayEditor extends AbstractEditor {
   }
 
   _createToggleButton () {
-    const button = this.getButton('', 'collapse', this.translate('button_collapse'))
+    const button = this.getButton('', 'collapse', 'button_collapse')
     button.classList.add('json-editor-btntype-toggle')
     this.title.insertBefore(button, this.title.childNodes[0])
 
@@ -667,19 +671,19 @@ export class ArrayEditor extends AbstractEditor {
         this.collapsed = false
         this.row_holder.style.display = rowHolderDisplay
         this.controls.style.display = controlsDisplay
-        this.setButtonText(e.currentTarget, '', 'collapse', this.translate('button_collapse'))
+        this.setButtonText(e.currentTarget, '', 'collapse', 'button_collapse')
       } else {
         this.collapsed = true
         this.row_holder.style.display = 'none'
         this.controls.style.display = 'none'
-        this.setButtonText(e.currentTarget, '', 'expand', this.translate('button_expand'))
+        this.setButtonText(e.currentTarget, '', 'expand', 'button_expand')
       }
     })
     return button
   }
 
   _createAddRowButton () {
-    const button = this.getButton(this.getItemTitle(), 'add', this.translate('button_add_row_title', [this.getItemTitle()]))
+    const button = this.getButton(this.getItemTitle(), 'add', 'button_add_row_title', [this.getItemTitle()])
     button.classList.add('json-editor-btntype-add')
     button.addEventListener('click', (e) => {
       e.preventDefault()
@@ -706,7 +710,7 @@ export class ArrayEditor extends AbstractEditor {
   }
 
   _createDeleteLastRowButton () {
-    const button = this.getButton(this.translate('button_delete_last', [this.getItemTitle()]), 'subtract', this.translate('button_delete_last_title', [this.getItemTitle()]))
+    const button = this.getButton('button_delete_last', 'subtract', 'button_delete_last_title', [this.getItemTitle()])
     button.classList.add('json-editor-btntype-deletelast')
     button.addEventListener('click', (e) => {
       e.preventDefault()
@@ -740,7 +744,7 @@ export class ArrayEditor extends AbstractEditor {
   }
 
   _createRemoveAllRowsButton () {
-    const button = this.getButton(this.translate('button_delete_all'), 'delete', this.translate('button_delete_all_title'))
+    const button = this.getButton('button_delete_all', 'delete', 'button_delete_all_title')
     button.classList.add('json-editor-btntype-deleteall')
     button.addEventListener('click', (e) => {
       e.preventDefault()

package/src/editors/autocomplete.js

@@ -30,6 +30,7 @@ export class AutocompleteEditor extends StringEditor {
       /* single property options from schema "options.autocomplete" */
       options = this.expandCallbacks('autocomplete', extend({}, {
         search: (jseditor, input) => {
+          // eslint-disable-next-line no-console
           console.log(`No "search" callback defined for autocomplete in property "${jseditor.key}"`)
           return []
         },

package/src/editors/base64.js

@@ -31,8 +31,8 @@ export class Base64Editor extends AbstractEditor {
   }
 
   build () {
-    this.title = this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
-    if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.options.infoText)
+    if (!this.options.compact) this.title = this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
+    if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
 
     /* Input that holds the base64 string */
     this.input = this.theme.getFormInputField('hidden')
@@ -90,7 +90,7 @@ export class Base64Editor extends AbstractEditor {
       })
     }
 
-    this.preview = this.theme.getFormInputDescription(this.schema.description)
+    this.preview = this.theme.getFormInputDescription(this.translateProperty(this.schema.description))
     this.container.appendChild(this.preview)
 
     this.control = this.theme.getFormControl(this.label, this.uploader || this.input, this.preview, this.infoButton)
@@ -138,7 +138,8 @@ export class Base64Editor extends AbstractEditor {
 
   setValue (val) {
     if (this.value !== val) {
-      this.value = val
+      if (this.schema.readOnly && this.schema.enum && !this.schema.enum.includes(val)) this.value = this.schema.enum[0]
+      else this.value = val
       this.input.value = this.value
       this.refreshPreview()
       this.onChange()

package/src/editors/button.js

@@ -24,7 +24,7 @@ export class ButtonEditor extends AbstractEditor {
 
     /* Get options, either global options from "this.defaults.options.button" or */
     /* single property options from schema "options.button" */
-    const title = this.schema.title || this.key
+    const title = this.translateProperty(this.schema.title) || this.key
     const options = this.expandCallbacks('button', extend({}, {
       icon: '',
       validated: false,
@@ -38,7 +38,7 @@ export class ButtonEditor extends AbstractEditor {
     this.input.addEventListener('click', options.action, false)
 
     if (this.schema.readOnly || this.schema.readonly || this.schema.template) {
-      this.always_disabled = true
+      this.disable(true)
       this.input.setAttribute('readonly', 'true')
     }
 

package/src/editors/checkbox.js

@@ -31,8 +31,8 @@ export class CheckboxEditor extends AbstractEditor {
       this.label.htmlFor = this.formname
     }
 
-    if (this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description)
-    if (this.options.infoText && !this.options.compact) this.infoButton = this.theme.getInfoButton(this.options.infoText)
+    if (this.schema.description) this.description = this.theme.getFormInputDescription(this.translateProperty(this.schema.description))
+    if (this.options.infoText && !this.options.compact) this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
     if (this.options.compact) this.container.classList.add('compact')
 
     this.input = this.theme.getCheckbox()
@@ -40,7 +40,7 @@ export class CheckboxEditor extends AbstractEditor {
     this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton)
 
     if (this.schema.readOnly || this.schema.readonly) {
-      this.always_disabled = true
+      this.disable(true)
       this.input.disabled = true
     }
 

package/src/editors/datetime.js

@@ -51,13 +51,13 @@ export class DatetimeEditor extends StringEditor {
         /* Create buttons for input group */
         const buttons = []
         if (this.options.flatpickr.showToggleButton !== false) {
-          const toggleButton = this.getButton('', this.schema.format === 'time' ? 'time' : 'calendar', this.translate('flatpickr_toggle_button'))
+          const toggleButton = this.getButton('', this.schema.format === 'time' ? 'time' : 'calendar', 'flatpickr_toggle_button')
           /* Attribute for flatpicker */
           toggleButton.setAttribute('data-toggle', '')
           buttons.push(toggleButton)
         }
         if (this.options.flatpickr.showClearButton !== false) {
-          const clearButton = this.getButton('', 'clear', this.translate('flatpickr_clear_button'))
+          const clearButton = this.getButton('', 'clear', 'flatpickr_clear_button')
           /* Attribute for flatpicker */
           clearButton.setAttribute('data-clear', '')
           buttons.push(clearButton)

package/src/editors/info.js

@@ -11,7 +11,7 @@ export class InfoEditor extends ButtonEditor {
   }
 
   getTitle () {
-    return this.schema.title
+    return this.translateProperty(this.schema.title)
   }
 
   getNumColumns () {

package/src/editors/multiple.js

@@ -267,6 +267,8 @@ export class MultipleEditor extends AbstractEditor {
         if (fitTestResult !== null) {
           validVal.match = fitTestResult.match
         }
+      } else {
+        fitTestVal = validVal
       }
     })
     let finalI = validVal.i
@@ -311,9 +313,13 @@ export class MultipleEditor extends AbstractEditor {
         if (!editor) return
         const check = `${this.path}.${checkPart}[${i}]`
         const filterError = (newErrors, error) => {
-          if (error.path === check.substr(0, error.path.length)) {
+          if (error.path.startsWith(check) || error.path === check.substr(0, error.path.length)) {
             const newError = extend({}, error)
-            newError.path = this.path + newError.path.substr(check.length)
+
+            if (error.path.startsWith(check)) {
+              newError.path = this.path + newError.path.substr(check.length)
+            }
+
             newErrors.push(newError)
           }
           return newErrors

package/src/editors/multiselect.js

@@ -51,8 +51,8 @@ export class MultiSelectEditor extends AbstractEditor {
   build () {
     let i
     if (!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
-    if (this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description)
-    if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.options.infoText)
+    if (this.schema.description) this.description = this.theme.getFormInputDescription(this.translateProperty(this.schema.description))
+    if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
     if (this.options.compact) this.container.classList.add('compact')
 
     if ((!this.schema.format && this.option_keys.length < 8) || this.schema.format === 'checkbox') {
@@ -86,7 +86,9 @@ export class MultiSelectEditor extends AbstractEditor {
       this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton)
     }
 
-    if (this.schema.readOnly || this.schema.readonly) this.disable(true)
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable(true)
+    }
 
     this.container.appendChild(this.control)
 

package/src/editors/object.js

@@ -230,7 +230,7 @@ export class ObjectEditor extends AbstractEditor {
         const containerSimple = document.createElement('div')
         /* This will be the place to (re)build tabs and panes */
         /* tabs_holder has 2 childs, [0]: ul.nav.nav-tabs and [1]: div.tab-content */
-        const newTabsHolder = this.theme.getTopTabHolder(this.schema.title)
+        const newTabsHolder = this.theme.getTopTabHolder(this.translateProperty(this.schema.title))
         /* child [1] of previous, stores panes */
         const newTabPanesContainer = this.theme.getTopTabContentHolder(newTabsHolder)
 
@@ -555,7 +555,7 @@ export class ObjectEditor extends AbstractEditor {
         this.header = document.createElement('label')
         this.header.textContent = this.getTitle()
       }
-      this.title = this.theme.getHeader(this.header)
+      this.title = this.theme.getHeader(this.header, this.getPathDepth())
       this.title.classList.add('je-object__title')
       this.controls = this.theme.getButtonHolder()
       this.controls.classList.add('je-object__controls')
@@ -568,21 +568,21 @@ export class ObjectEditor extends AbstractEditor {
       this.editjson_holder = this.theme.getModal()
       this.editjson_textarea = this.theme.getTextareaInput()
       this.editjson_textarea.classList.add('je-edit-json--textarea')
-      this.editjson_save = this.getButton('Save', 'save', 'Save')
+      this.editjson_save = this.getButton('button_save', 'save', 'button_save')
       this.editjson_save.classList.add('json-editor-btntype-save')
       this.editjson_save.addEventListener('click', (e) => {
         e.preventDefault()
         e.stopPropagation()
         this.saveJSON()
       })
-      this.editjson_copy = this.getButton('Copy', 'copy', 'Copy')
+      this.editjson_copy = this.getButton('button_copy', 'copy', 'button_copy')
       this.editjson_copy.classList.add('json-editor-btntype-copy')
       this.editjson_copy.addEventListener('click', (e) => {
         e.preventDefault()
         e.stopPropagation()
         this.copyJSON()
       })
-      this.editjson_cancel = this.getButton('Cancel', 'cancel', 'Cancel')
+      this.editjson_cancel = this.getButton('button_cancel', 'cancel', 'button_cancel')
       this.editjson_cancel.classList.add('json-editor-btntype-cancel')
       this.editjson_cancel.addEventListener('click', (e) => {
         e.preventDefault()
@@ -598,7 +598,7 @@ export class ObjectEditor extends AbstractEditor {
       this.addproperty_holder = this.theme.getModal()
       this.addproperty_list = document.createElement('div')
       this.addproperty_list.classList.add('property-selector')
-      this.addproperty_add = this.getButton('add', 'add', 'add')
+      this.addproperty_add = this.getButton('button_add', 'add', 'button_add')
       this.addproperty_add.classList.add('json-editor-btntype-add')
 
       this.addproperty_input = this.theme.getFormInputField('text')
@@ -637,11 +637,11 @@ export class ObjectEditor extends AbstractEditor {
       this.addproperty_holder.appendChild(spacer)
 
       /* Close properties modal if clicked outside modal */
-      document.addEventListener('click', this.onOutsideModalClick)
+      document.addEventListener('click', this.onOutsideModalClick.bind(this))
 
       /* Description */
       if (this.schema.description) {
-        this.description = this.theme.getDescription(this.schema.description)
+        this.description = this.theme.getDescription(this.translateProperty(this.schema.description))
         this.container.appendChild(this.description)
       }
 
@@ -657,11 +657,11 @@ export class ObjectEditor extends AbstractEditor {
       this.row_container = this.theme.getGridContainer()
 
       if (isCategoriesFormat) {
-        this.tabs_holder = this.theme.getTopTabHolder(this.getValidId(this.schema.title))
+        this.tabs_holder = this.theme.getTopTabHolder(this.getValidId(this.translateProperty(this.schema.title)))
         this.tabPanesContainer = this.theme.getTopTabContentHolder(this.tabs_holder)
         this.editor_holder.appendChild(this.tabs_holder)
       } else {
-        this.tabs_holder = this.theme.getTabHolder(this.getValidId(this.schema.title))
+        this.tabs_holder = this.theme.getTabHolder(this.getValidId(this.translateProperty(this.schema.title)))
         this.tabPanesContainer = this.theme.getTabContentHolder(this.tabs_holder)
         this.editor_holder.appendChild(this.row_container)
       }
@@ -711,7 +711,7 @@ export class ObjectEditor extends AbstractEditor {
 
       /* Show/Hide button */
       this.collapsed = false
-      this.collapse_control = this.getButton('', 'collapse', this.translate('button_collapse'))
+      this.collapse_control = this.getButton('', 'collapse', 'button_collapse')
       this.collapse_control.classList.add('json-editor-btntype-toggle')
       this.title.insertBefore(this.collapse_control, this.title.childNodes[0])
 
@@ -721,11 +721,11 @@ export class ObjectEditor extends AbstractEditor {
         if (this.collapsed) {
           this.editor_holder.style.display = ''
           this.collapsed = false
-          this.setButtonText(this.collapse_control, '', 'collapse', this.translate('button_collapse'))
+          this.setButtonText(this.collapse_control, '', 'collapse', 'button_collapse')
         } else {
           this.editor_holder.style.display = 'none'
           this.collapsed = true
-          this.setButtonText(this.collapse_control, '', 'expand', this.translate('button_expand'))
+          this.setButtonText(this.collapse_control, '', 'expand', 'button_expand')
         }
       })
 
@@ -742,7 +742,7 @@ export class ObjectEditor extends AbstractEditor {
       }
 
       /* Edit JSON Button */
-      this.editjson_control = this.getButton('JSON', 'edit', 'Edit JSON')
+      this.editjson_control = this.getButton('JSON', 'edit', 'button_edit_json')
       this.editjson_control.classList.add('json-editor-btntype-editjson')
       this.editjson_control.addEventListener('click', (e) => {
         e.preventDefault()
@@ -760,7 +760,7 @@ export class ObjectEditor extends AbstractEditor {
       }
 
       /* Object Properties Button */
-      this.addproperty_button = this.getButton('Properties', 'edit_properties', this.translate('button_object_properties'))
+      this.addproperty_button = this.getButton('properties', 'edit_properties', 'button_object_properties')
       this.addproperty_button.classList.add('json-editor-btntype-properties')
       this.addproperty_button.addEventListener('click', (e) => {
         e.preventDefault()
@@ -793,7 +793,11 @@ export class ObjectEditor extends AbstractEditor {
 
   deactivateNonRequiredProperties () {
     /* the show_opt_in editor option is for backward compatibility */
-    if (this.jsoneditor.options.show_opt_in || this.options.show_opt_in) {
+    const globalOptIn = this.jsoneditor.options.show_opt_in
+    const editorOptInDefined = (typeof this.options.show_opt_in !== 'undefined')
+    const editorOptInEnabled = (editorOptInDefined && this.options.show_opt_in === true)
+    const editorOptInDisabled = (editorOptInDefined && this.options.show_opt_in === false)
+    if (editorOptInEnabled || (!editorOptInDisabled && globalOptIn) || (!editorOptInDefined && globalOptIn)) {
       Object.entries(this.editors).forEach(([key, editor]) => {
         if (!this.isRequiredObject(editor)) {
           this.editors[key].deactivate()
@@ -968,6 +972,7 @@ export class ObjectEditor extends AbstractEditor {
             [key]: {}
           }
         case 'additionalProperties':
+        case 'propertyNames':
           return {
             ...acc,
             [key]: true
@@ -992,7 +997,8 @@ export class ObjectEditor extends AbstractEditor {
       this.editors[name].register()
       /* New property */
     } else {
-      if (!this.canHaveAdditionalProperties() && (!this.schema.properties || !this.schema.properties[name])) {
+      if (!this.canHaveAdditionalProperties() && (!this.schema.properties || !this.schema.properties[name]) &&
+        (!this.schema.patternProperties || !(Object.keys(this.schema.patternProperties).find(i => new RegExp(i).test(name))))) {
         return
       }
 
@@ -1036,9 +1042,8 @@ export class ObjectEditor extends AbstractEditor {
   }
 
   onOutsideModalClick (e) {
-    if (this.addproperty_holder &&
-      !this.addproperty_holder.contains(e.path[0] || e.composedPath()[0]) &&
-      this.adding_property) {
+    const path = e.path || (e.composedPath && e.composedPath())
+    if (this.addproperty_holder && !this.addproperty_holder.contains(path[0]) && this.adding_property) {
       e.preventDefault()
       e.stopPropagation()
       this.toggleAddProperty()
@@ -1096,6 +1101,10 @@ export class ObjectEditor extends AbstractEditor {
   refreshValue () {
     this.value = {}
 
+    if (!this.editors) {
+      return
+    }
+
     Object.keys(this.editors).forEach(i => {
       if (this.editors[i].isActive()) {
         this.value[i] = this.editors[i].getValue()
@@ -1196,9 +1205,14 @@ export class ObjectEditor extends AbstractEditor {
       if (typeof value[i] !== 'undefined') {
         this.addObjectProperty(i)
         editor.setValue(value[i], initial)
+        editor.activate()
         /* Otherwise, remove value unless this is the initial set or it's required */
       } else if (!initial && !this.isRequiredObject(editor)) {
-        this.removeObjectProperty(i)
+        if (this.jsoneditor.options.show_opt_in || this.options.show_opt_in) {
+          editor.deactivate()
+        } else {
+          this.removeObjectProperty(i)
+        }
         /* Otherwise, set the value to the default */
       } else {
         editor.setValue(editor.getDefault(), initial)

package/src/editors/radio.js

@@ -2,15 +2,14 @@ import { SelectEditor } from './select.js'
 
 export class RadioEditor extends SelectEditor {
   preBuild () {
-    this.schema.required = true /* force editor into required mode to prevent creation of empty radio button */
     super.preBuild()
   }
 
   build () {
     this.label = ''
     if (!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
-    if (this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description)
-    if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.options.infoText)
+    if (this.schema.description) this.description = this.theme.getFormInputDescription(this.translateProperty(this.schema.description))
+    if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
     if (this.options.compact) this.container.classList.add('compact')
 
     this.radioContainer = document.createElement('div')
@@ -22,6 +21,12 @@ export class RadioEditor extends SelectEditor {
       this.onChange(true)
     }
 
+    if (!this.isRequired()) {
+      this.enum_display.shift()
+      this.enum_options.shift()
+      this.enum_values.shift()
+    }
+
     for (let i = 0; i < this.enum_values.length; i++) {
       /* form radio elements */
       this.input = this.theme.getFormRadio({
@@ -46,7 +51,7 @@ export class RadioEditor extends SelectEditor {
     }
 
     if (this.schema.readOnly || this.schema.readonly) {
-      this.always_disabled = true
+      this.disable(true)
       for (let j = 0; j < this.radioGroup.length; j++) {
         this.radioGroup[j].disabled = true
       }