Implement undo/redo buttons in mode `code`

This commit is contained in:
jos 2020-02-05 10:37:28 +01:00
parent 42672eeef5
commit df46f721e9
2 changed files with 40 additions and 0 deletions

View File

@ -9,6 +9,7 @@ https://github.com/josdejong/jsoneditor
Transform modal. New options `createQuery`, `executeQuery`, and Transform modal. New options `createQuery`, `executeQuery`, and
`queryDescription` are available for this now. An example is available `queryDescription` are available for this now. An example is available
in `examples/23_custom_query_language.html`. See #857, #871. in `examples/23_custom_query_language.html`. See #857, #871.
- Implement undo/redo buttons in `code` mode.
- Fix history (undo/redo) being cleared in mode `code` and `text` after - Fix history (undo/redo) being cleared in mode `code` and `text` after
transforming or sorting. transforming or sorting.

View File

@ -196,6 +196,31 @@ textmode.create = function (container, options = {}) {
} }
} }
// create undo/redo buttons
if (this.mode === 'code') {
// create undo button
const undo = document.createElement('button')
undo.type = 'button'
undo.className = 'jsoneditor-undo jsoneditor-separator'
undo.title = translate('undo')
undo.onclick = () => {
this.aceEditor.getSession().getUndoManager().undo()
}
this.menu.appendChild(undo)
this.dom.undo = undo
// create redo button
const redo = document.createElement('button')
redo.type = 'button'
redo.className = 'jsoneditor-redo'
redo.title = translate('redo')
redo.onclick = () => {
this.aceEditor.getSession().getUndoManager().redo()
}
this.menu.appendChild(redo)
this.dom.redo = redo
}
// create mode box // create mode box
if (this.options && this.options.modes && this.options.modes.length) { if (this.options && this.options.modes && this.options.modes.length) {
this.modeSwitcher = new ModeSwitcher(this.menu, this.options.modes, this.options.mode, function onSwitch (mode) { this.modeSwitcher = new ModeSwitcher(this.menu, this.options.modes, this.options.mode, function onSwitch (mode) {
@ -282,6 +307,8 @@ textmode.create = function (container, options = {}) {
textarea.onblur = this._onBlur.bind(this) textarea.onblur = this._onBlur.bind(this)
} }
this._updateHistoryButtons()
this.errorTable = new ErrorTable({ this.errorTable = new ErrorTable({
errorTableVisible: this.mode === 'text', errorTableVisible: this.mode === 'text',
onToggleVisibility: function () { onToggleVisibility: function () {
@ -372,6 +399,9 @@ textmode._onChange = function () {
return return
} }
// enable/disable undo/redo buttons
setTimeout(() => this._updateHistoryButtons())
// validate JSON schema (if configured) // validate JSON schema (if configured)
this._debouncedValidate() this._debouncedValidate()
@ -394,6 +424,15 @@ textmode._onChange = function () {
} }
} }
textmode._updateHistoryButtons = function () {
if (this.aceEditor && this.dom.undo && this.dom.redo) {
const undoManager = this.aceEditor.getSession().getUndoManager()
this.dom.undo.disabled = !undoManager.canUndo()
this.dom.redo.disabled = !undoManager.canRedo()
}
}
/** /**
* Open a sort modal * Open a sort modal
* @private * @private