Create option to hide the blue main menu bar on top (#596)

* ability to hide main menu bar; minor fixes for typos, JSDoc etc.

* fix CSS issue when mainMenuBar is hidden in all modes; other minor refactoring

docs/api.md

@@ -234,6 +234,10 @@ Constructs a new JSONEditor.
      - Can return an object `{startFrom: number, options: string[]}`. Here `startFrom` determines the start character from where the existing text will be replaced. `startFrom` is `0` by default, replacing the whole text.
      - Can return a `Promise` resolving one of the return types above to support asynchronously retrieving a list with options.
 
+- `{boolean} mainMenuBar`
+
+  Adds main menu bar - Contains format, sort, transform, search etc. functionality. True by default. Applicable in all types of `mode`.
+
 - `{boolean} navigationBar`
 
   Adds navigation bar to the menu - the navigation bar visualize the current position on the tree structure as well as allows breadcrumbs navigation. True by default. Only applicable when `mode` is 'tree', 'form' or 'view'.

src/css/jsoneditor.css

@@ -253,8 +253,8 @@ div.jsoneditor-outer {
   position: static;
   width: 100%;
   height: 100%;
-  margin: -35px 0 0 0;
+  margin: 0;
-  padding: 35px 0 0 0;
+  padding: 0;
 
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -262,13 +262,23 @@ div.jsoneditor-outer {
 }
 
 div.jsoneditor-outer.has-nav-bar {
-  margin: -61px 0 0 0;
+  margin-top: -26px;
-  padding: 61px 0 0 0;
+  padding-top: 26px;
 }
 
 div.jsoneditor-outer.has-status-bar {
-  margin: -35px 0 -26px 0;
+  margin-bottom: -26px;
-  padding: 35px 0 26px 0;
+  padding-bottom: 26px;
+}
+
+div.jsoneditor-outer.has-main-menu-bar {
+  margin-top: -35px;
+  padding-top: 35px;
+}
+
+div.jsoneditor-outer.has-nav-bar.has-main-menu-bar {
+  margin-top: -61px;
+  padding-top: 61px;
 }
 
 textarea.jsoneditor-text,

src/js/JSONEditor.js

@@ -167,7 +167,7 @@ JSONEditor.VALID_OPTIONS = [
   'colorPicker', 'onColorPicker',
   'timestampTag',
   'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
-  'sortObjectKeys', 'navigationBar', 'statusBar', 'languages', 'language', 'enableSort', 'enableTransform'
+  'sortObjectKeys', 'navigationBar', 'statusBar', 'mainMenuBar', 'languages', 'language', 'enableSort', 'enableTransform'
 ];
 
 /**

src/js/Node.js

@@ -1396,7 +1396,7 @@ Node.prototype.changeType = function (newType) {
         this.childs = [];
       }
 
-      this.childs.forEach(function (child, index) {
+      this.childs.forEach(function (child) {
         child.clearDom();
         delete child.index;
         child.fieldEditable = true;
@@ -3372,7 +3372,7 @@ Node.prototype._showColorPicker = function () {
       }
     });
   }
-}
+};
 
 /**
  * Remove nodes
@@ -3870,7 +3870,7 @@ Node.targetIsColorPicker = function (target) {
   }
 
   return false;
-}
+};
 
 /**
  * Remove the focus of given nodes, and move the focus to the (a) node before,

src/js/textmode.js

@@ -41,10 +41,13 @@ textmode.create = function (container, options) {
   // read options
   options = options || {};
   
-  if(typeof options.statusBar === 'undefined') {
+  if (typeof options.statusBar === 'undefined') {
     options.statusBar = true;
   }
 
+  // setting default for textmode
+  options.mainMenuBar = options.mainMenuBar !== false;
+
   this.options = options;
 
   // indentation
@@ -109,66 +112,88 @@ textmode.create = function (container, options) {
     me._onKeyDown(event);
   };
 
-  // create menu
+  this.content = document.createElement('div');
-  this.menu = document.createElement('div');
+  this.content.className = 'jsoneditor-outer';
-  this.menu.className = 'jsoneditor-menu';
-  this.frame.appendChild(this.menu);
 
-  // create format button
+  if (this.options.mainMenuBar) {
-  var buttonFormat = document.createElement('button');
+    util.addClassName(this.content, 'has-main-menu-bar');
-  buttonFormat.type = 'button';
-  buttonFormat.className = 'jsoneditor-format';
-  buttonFormat.title = 'Format JSON data, with proper indentation and line feeds (Ctrl+\\)';
-  this.menu.appendChild(buttonFormat);
-  buttonFormat.onclick = function () {
-    try {
-      me.format();
-      me._onChange();
-    }
-    catch (err) {
-      me._onError(err);
-    }
-  };
 
-  // create compact button
+    // create menu
-  var buttonCompact = document.createElement('button');
+    this.menu = document.createElement('div');
-  buttonCompact.type = 'button';
+    this.menu.className = 'jsoneditor-menu';
-  buttonCompact.className = 'jsoneditor-compact';
+    this.frame.appendChild(this.menu);
-  buttonCompact.title = 'Compact JSON data, remove all whitespaces (Ctrl+Shift+\\)';
-  this.menu.appendChild(buttonCompact);
-  buttonCompact.onclick = function () {
-    try {
-      me.compact();
-      me._onChange();
-    }
-    catch (err) {
-      me._onError(err);
-    }
-  };
 
-  // create repair button
+    // create format button
-  var buttonRepair = document.createElement('button');
+    var buttonFormat = document.createElement('button');
-  buttonRepair.type = 'button';
+    buttonFormat.type = 'button';
-  buttonRepair.className = 'jsoneditor-repair';
+    buttonFormat.className = 'jsoneditor-format';
-  buttonRepair.title = 'Repair JSON: fix quotes and escape characters, remove comments and JSONP notation, turn JavaScript objects into JSON.';
+    buttonFormat.title = 'Format JSON data, with proper indentation and line feeds (Ctrl+\\)';
-  this.menu.appendChild(buttonRepair);
+    this.menu.appendChild(buttonFormat);
-  buttonRepair.onclick = function () {
+    buttonFormat.onclick = function () {
-    try {
+      try {
-      me.repair();
+        me.format();
-      me._onChange();
+        me._onChange();
-    }
+      }
-    catch (err) {
+      catch (err) {
-      me._onError(err);
+        me._onError(err);
-    }
+      }
-  };
+    };
 
-  // create mode box
+    // create compact button
-  if (this.options && this.options.modes && this.options.modes.length) {
+    var buttonCompact = document.createElement('button');
-    this.modeSwitcher = new ModeSwitcher(this.menu, this.options.modes, this.options.mode, function onSwitch(mode) {
+    buttonCompact.type = 'button';
-      // switch mode and restore focus
+    buttonCompact.className = 'jsoneditor-compact';
-      me.setMode(mode);
+    buttonCompact.title = 'Compact JSON data, remove all whitespaces (Ctrl+Shift+\\)';
-      me.modeSwitcher.focus();
+    this.menu.appendChild(buttonCompact);
-    });
+    buttonCompact.onclick = function () {
+      try {
+        me.compact();
+        me._onChange();
+      }
+      catch (err) {
+        me._onError(err);
+      }
+    };
+
+    // create repair button
+    var buttonRepair = document.createElement('button');
+    buttonRepair.type = 'button';
+    buttonRepair.className = 'jsoneditor-repair';
+    buttonRepair.title = 'Repair JSON: fix quotes and escape characters, remove comments and JSONP notation, turn JavaScript objects into JSON.';
+    this.menu.appendChild(buttonRepair);
+    buttonRepair.onclick = function () {
+      try {
+        me.repair();
+        me._onChange();
+      }
+      catch (err) {
+        me._onError(err);
+      }
+    };
+
+    // create mode box
+    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) {
+        // switch mode and restore focus
+        me.setMode(mode);
+        me.modeSwitcher.focus();
+      });
+    }
+
+    if (this.mode == 'code') {
+      var poweredBy = document.createElement('a');
+      poweredBy.appendChild(document.createTextNode('powered by ace'));
+      poweredBy.href = 'http://ace.ajax.org';
+      poweredBy.target = '_blank';
+      poweredBy.className = 'jsoneditor-poweredBy';
+      poweredBy.onclick = function () {
+        // TODO: this anchor falls below the margin of the content,
+        // therefore the normal a.href does not work. We use a click event
+        // for now, but this should be fixed.
+        window.open(poweredBy.href, poweredBy.target);
+      };
+      this.menu.appendChild(poweredBy);
+    }
   }
 
   var emptyNode = {};
@@ -176,10 +201,7 @@ textmode.create = function (container, options) {
   && typeof(this.options.onEditable === 'function')
   && !this.options.onEditable(emptyNode));
 
-  this.content = document.createElement('div');
-  this.content.className = 'jsoneditor-outer';
   this.frame.appendChild(this.content);
-
   this.container.appendChild(this.frame);
 
   if (this.mode == 'code') {
@@ -224,19 +246,6 @@ textmode.create = function (container, options) {
       });
     }
 
-    var poweredBy = document.createElement('a');
-    poweredBy.appendChild(document.createTextNode('powered by ace'));
-    poweredBy.href = 'http://ace.ajax.org';
-    poweredBy.target = '_blank';
-    poweredBy.className = 'jsoneditor-poweredBy';
-    poweredBy.onclick = function () {
-      // TODO: this anchor falls below the margin of the content,
-      // therefore the normal a.href does not work. We use a click event
-      // for now, but this should be fixed.
-      window.open(poweredBy.href, poweredBy.target);
-    };
-    this.menu.appendChild(poweredBy);
-
     // register onchange event
     aceEditor.on('change', this._onChange.bind(this));
     aceEditor.on('changeSelection', this._onSelect.bind(this));
@@ -269,12 +278,12 @@ textmode.create = function (container, options) {
   this.dom.validationErrorsContainer = validationErrorsContainer;
   this.frame.appendChild(validationErrorsContainer);
 
-  var additinalErrorsIndication = document.createElement('div');
+  var additionalErrorsIndication = document.createElement('div');
-  additinalErrorsIndication.style.display = 'none';
+  additionalErrorsIndication.style.display = 'none';
-  additinalErrorsIndication.className = "jsoneditor-additional-errors fadein";
+  additionalErrorsIndication.className = "jsoneditor-additional-errors fadein";
-  additinalErrorsIndication.innerHTML = "Scroll for more ▿";
+  additionalErrorsIndication.innerHTML = "Scroll for more ▿";
-  this.dom.additinalErrorsIndication = additinalErrorsIndication;
+  this.dom.additionalErrorsIndication = additionalErrorsIndication;
-  validationErrorsContainer.appendChild(additinalErrorsIndication);
+  validationErrorsContainer.appendChild(additionalErrorsIndication);
 
   if (options.statusBar) {
     util.addClassName(this.content, 'has-status-bar');
@@ -428,20 +437,18 @@ textmode._onKeyDown = function (event) {
 
 /**
  * Event handler for mousedown.
- * @param {Event} event
  * @private
  */
-textmode._onMouseDown = function (event) {
+textmode._onMouseDown = function () {
   this._updateCursorInfo();
   this._emitSelectionChange();
 };
 
 /**
  * Event handler for blur.
- * @param {Event} event
  * @private
  */
-textmode._onBlur = function (event) {
+textmode._onBlur = function () {
   var me = this;
   // this allows to avoid blur when clicking inner elements (like the errors panel)
   // just make sure to set the isFocused to true on the inner element onclick callback
@@ -481,7 +488,7 @@ textmode._updateCursorInfo = function () {
         line: line,
         column: col,
         count: count
-      }
+      };
 
       if(me.options.statusBar) {
         updateDisplay();
@@ -500,7 +507,7 @@ textmode._updateCursorInfo = function () {
       line: line,
       column: col,
       count: count
-    }
+    };
 
     if(this.options.statusBar) {
       updateDisplay();
@@ -528,7 +535,7 @@ textmode._emitSelectionChange = function () {
     var currentSelection = this.getTextSelection();
     this._selectionChangedHandler(currentSelection.start, currentSelection.end, currentSelection.text);
   }
-}
+};
 
 /**
  * refresh ERROR annotations state
@@ -543,7 +550,7 @@ textmode._refreshAnnotations = function () {
     var errEnnotations = session.getAnnotations().filter(function(annotation) {return annotation.type === 'error' });
     session.setAnnotations(errEnnotations);
   }
-}
+};
 
 /**
  * Destroy the editor. Clean up DOM, event listeners, and web workers.
@@ -848,7 +855,7 @@ textmode._renderErrors = function(errors) {
   if (this.dom.validationErrors) {
     this.dom.validationErrors.parentNode.removeChild(this.dom.validationErrors);
     this.dom.validationErrors = null;
-    this.dom.additinalErrorsIndication.style.display = 'none';
+    this.dom.additionalErrorsIndication.style.display = 'none';
 
     this.content.style.marginBottom = '';
     this.content.style.paddingBottom = '';
@@ -933,12 +940,12 @@ textmode._renderErrors = function(errors) {
 
       this.dom.validationErrors = validationErrors;
       this.dom.validationErrorsContainer.appendChild(validationErrors);
-      this.dom.additinalErrorsIndication.title = errors.length + " errors total";
+      this.dom.additionalErrorsIndication.title = errors.length + " errors total";
 
       if (this.dom.validationErrorsContainer.clientHeight < this.dom.validationErrorsContainer.scrollHeight) {
-        this.dom.additinalErrorsIndication.style.display = 'block';
+        this.dom.additionalErrorsIndication.style.display = 'block';
         this.dom.validationErrorsContainer.onscroll = function () {
-          me.dom.additinalErrorsIndication.style.display = 
+          me.dom.additionalErrorsIndication.style.display =
             (me.dom.validationErrorsContainer.clientHeight > 0 && me.dom.validationErrorsContainer.scrollTop === 0) ? 'block' : 'none';
         }
       } else {
@@ -1027,13 +1034,10 @@ textmode.getTextSelection = function () {
 };
 
 /**
- * Callback registraion for selection change
+ * Callback registration for selection change
  * @param {selectionCallback} callback
  * 
  * @callback selectionCallback
- * @param {{row:Number, column:Number}} startPos selection start position
- * @param {{row:Number, column:Number}} endPos selected end position
- * @param {String} text selected text
  */
 textmode.onTextSelectionChange = function (callback) {
   if (typeof callback === 'function') {

src/js/treemode.js

@@ -129,8 +129,6 @@ treemode.destroy = function () {
  * @private
  */
 treemode._setOptions = function (options) {
-  var editor = this;
-
   this.options = {
     search: true,
     history: true,
@@ -140,6 +138,7 @@ treemode._setOptions = function (options) {
     schemaRefs: null,
     autocomplete: null,
     navigationBar : true,
+    mainMenuBar: true,
     onSelectionChange: null,
     colorPicker: true,
     onColorPicker: function (parent, color, onChange) {
@@ -149,11 +148,11 @@ treemode._setOptions = function (options) {
           color: color,
           popup: 'bottom',
           onDone: function (color) {
-            var alpha = color.rgba[3]
+            var alpha = color.rgba[3];
             var hex = (alpha === 1)
                 ? color.hex.substr(0, 7)  // return #RRGGBB
-                : color.hex               // return #RRGGBBAA
+                : color.hex;               // return #RRGGBBAA
-            onChange(hex)
+            onChange(hex);
           }
         }).show();
       }
@@ -942,6 +941,9 @@ treemode._createFrame = function () {
   this.frame.className = 'jsoneditor jsoneditor-mode-' + this.options.mode;
   this.container.appendChild(this.frame);
 
+  this.contentOuter = document.createElement('div');
+  this.contentOuter.className = 'jsoneditor-outer';
+
   // create one global event listener to handle all events from all nodes
   var editor = this;
   function onEvent(event) {
@@ -980,105 +982,109 @@ treemode._createFrame = function () {
   this.frame.onfocusin = onEvent;  // for IE
   this.frame.onfocusout = onEvent; // for IE
 
-  // create menu
+  if (this.options.mainMenuBar) {
-  this.menu = document.createElement('div');
+    util.addClassName(this.contentOuter, 'has-main-menu-bar');
-  this.menu.className = 'jsoneditor-menu';
-  this.frame.appendChild(this.menu);
 
-  // create expand all button
+    // create menu
-  var expandAll = document.createElement('button');
+    this.menu = document.createElement('div');
-  expandAll.type = 'button';
+    this.menu.className = 'jsoneditor-menu';
-  expandAll.className = 'jsoneditor-expand-all';
+    this.frame.appendChild(this.menu);
-  expandAll.title = translate('expandAll');
-  expandAll.onclick = function () {
-    editor.expandAll();
-  };
-  this.menu.appendChild(expandAll);
 
-  // create collapse all button
+    // create expand all button
-  var collapseAll = document.createElement('button');
+    var expandAll = document.createElement('button');
-  collapseAll.type = 'button';
+    expandAll.type = 'button';
-  collapseAll.title = translate('collapseAll');
+    expandAll.className = 'jsoneditor-expand-all';
-  collapseAll.className = 'jsoneditor-collapse-all';
+    expandAll.title = translate('expandAll');
-  collapseAll.onclick = function () {
+    expandAll.onclick = function () {
-    editor.collapseAll();
+      editor.expandAll();
-  };
-  this.menu.appendChild(collapseAll);
-
-  // create sort button
-  if (this.options.enableSort) {
-    var sort = document.createElement('button');
-    sort.type = 'button';
-    sort.className = 'jsoneditor-sort';
-    sort.title = translate('sortTitleShort');
-    sort.onclick = function () {
-      var anchor = editor.options.modalAnchor || DEFAULT_MODAL_ANCHOR;
-      showSortModal(editor.node, anchor)
     };
-    this.menu.appendChild(sort);
+    this.menu.appendChild(expandAll);
+
+    // create collapse all button
+    var collapseAll = document.createElement('button');
+    collapseAll.type = 'button';
+    collapseAll.title = translate('collapseAll');
+    collapseAll.className = 'jsoneditor-collapse-all';
+    collapseAll.onclick = function () {
+      editor.collapseAll();
+    };
+    this.menu.appendChild(collapseAll);
+
+    // create sort button
+    if (this.options.enableSort) {
+      var sort = document.createElement('button');
+      sort.type = 'button';
+      sort.className = 'jsoneditor-sort';
+      sort.title = translate('sortTitleShort');
+      sort.onclick = function () {
+        var anchor = editor.options.modalAnchor || DEFAULT_MODAL_ANCHOR;
+        showSortModal(editor.node, anchor)
+      };
+      this.menu.appendChild(sort);
+    }
+
+    // create transform button
+    if (this.options.enableTransform) {
+      var transform = document.createElement('button');
+      transform.type = 'button';
+      transform.title = translate('transformTitleShort');
+      transform.className = 'jsoneditor-transform';
+      transform.onclick = function () {
+        var anchor = editor.options.modalAnchor || DEFAULT_MODAL_ANCHOR;
+        showTransformModal(editor.node, anchor)
+      };
+      this.menu.appendChild(transform);
+    }
+
+    // create undo/redo buttons
+    if (this.history) {
+      // create undo button
+      var undo = document.createElement('button');
+      undo.type = 'button';
+      undo.className = 'jsoneditor-undo jsoneditor-separator';
+      undo.title = translate('undo');
+      undo.onclick = function () {
+        editor._onUndo();
+      };
+      this.menu.appendChild(undo);
+      this.dom.undo = undo;
+
+      // create redo button
+      var redo = document.createElement('button');
+      redo.type = 'button';
+      redo.className = 'jsoneditor-redo';
+      redo.title = translate('redo');
+      redo.onclick = function () {
+        editor._onRedo();
+      };
+      this.menu.appendChild(redo);
+      this.dom.redo = redo;
+
+      // register handler for onchange of history
+      this.history.onChange = function () {
+        undo.disabled = !editor.history.canUndo();
+        redo.disabled = !editor.history.canRedo();
+      };
+      this.history.onChange();
+    }
+
+    // create mode box
+    if (this.options && this.options.modes && this.options.modes.length) {
+      var me = this;
+      this.modeSwitcher = new ModeSwitcher(this.menu, this.options.modes, this.options.mode, function onSwitch(mode) {
+        // switch mode and restore focus
+        me.setMode(mode);
+        me.modeSwitcher.focus();
+      });
+    }
+
+    // create search box
+    if (this.options.search) {
+      this.searchBox = new SearchBox(this, this.menu);
+    }
   }
 
-  // create transform button
+  if (this.options.navigationBar) {
-  if (this.options.enableTransform) {
-    var transform = document.createElement('button');
-    transform.type = 'button';
-    transform.title = translate('transformTitleShort');
-    transform.className = 'jsoneditor-transform';
-    transform.onclick = function () {
-      var anchor = editor.options.modalAnchor || DEFAULT_MODAL_ANCHOR;
-      showTransformModal(editor.node, anchor)
-    };
-    this.menu.appendChild(transform);
-  }
-
-  // create undo/redo buttons
-  if (this.history) {
-    // create undo button
-    var undo = document.createElement('button');
-    undo.type = 'button';
-    undo.className = 'jsoneditor-undo jsoneditor-separator';
-    undo.title = translate('undo');
-    undo.onclick = function () {
-      editor._onUndo();
-    };
-    this.menu.appendChild(undo);
-    this.dom.undo = undo;
-
-    // create redo button
-    var redo = document.createElement('button');
-    redo.type = 'button';
-    redo.className = 'jsoneditor-redo';
-    redo.title = translate('redo');
-    redo.onclick = function () {
-      editor._onRedo();
-    };
-    this.menu.appendChild(redo);
-    this.dom.redo = redo;
-
-    // register handler for onchange of history
-    this.history.onChange = function () {
-      undo.disabled = !editor.history.canUndo();
-      redo.disabled = !editor.history.canRedo();
-    };
-    this.history.onChange();
-  }
-
-  // create mode box
-  if (this.options && this.options.modes && this.options.modes.length) {
-    var me = this;
-    this.modeSwitcher = new ModeSwitcher(this.menu, this.options.modes, this.options.mode, function onSwitch(mode) {
-      // switch mode and restore focus
-      me.setMode(mode);
-      me.modeSwitcher.focus();
-    });
-  }
-
-  // create search box
-  if (this.options.search) {
-    this.searchBox = new SearchBox(this, this.menu);
-  }
-
-  if(this.options.navigationBar) {
     // create second menu row for treepath
     this.navBar = document.createElement('div');
     this.navBar.className = 'jsoneditor-navigation-bar nav-bar-empty';
@@ -1209,7 +1215,7 @@ treemode._updateTreePath = function (pathNodes) {
         name: getName(node),
         node: node,
         children: []
-      }
+      };
       if (node.childs && node.childs.length) {
         node.childs.forEach(function (childNode) {
           pathObj.children.push({
@@ -1373,10 +1379,9 @@ treemode._onMultiSelect = function (event) {
 
 /**
  * End of multiselect nodes by dragging
- * @param event
  * @private
  */
-treemode._onMultiSelectEnd = function (event) {
+treemode._onMultiSelectEnd = function () {
   // set focus to the context menu button of the first node
   if (this.multiselection.nodes[0]) {
     this.multiselection.nodes[0].dom.menu.focus();
@@ -1600,16 +1605,13 @@ treemode._onKeyDown = function (event) {
  * @private
  */
 treemode._createTable = function () {
-  var contentOuter = document.createElement('div');
+  if (this.options.navigationBar) {
-  contentOuter.className = 'jsoneditor-outer';
+    util.addClassName(this.contentOuter, 'has-nav-bar');
-  if(this.options.navigationBar) {
-    util.addClassName(contentOuter, 'has-nav-bar');
   }
-  this.contentOuter = contentOuter;
 
   this.scrollableContent = document.createElement('div');
   this.scrollableContent.className = 'jsoneditor-tree';
-  contentOuter.appendChild(this.scrollableContent);
+  this.contentOuter.appendChild(this.scrollableContent);
 
   // the jsoneditor-tree-inner div with bottom padding is here to
   // keep space for the action menu dropdown. It's created as a
@@ -1643,7 +1645,7 @@ treemode._createTable = function () {
   this.tbody = document.createElement('tbody');
   this.table.appendChild(this.tbody);
 
-  this.frame.appendChild(contentOuter);
+  this.frame.appendChild(this.contentOuter);
 };
 
 /**
@@ -1707,12 +1709,10 @@ treemode.getSelection = function () {
 };
 
 /**
- * Callback registraion for selection change
+ * Callback registration for selection change
  * @param {selectionCallback} callback 
  * 
  * @callback selectionCallback
- * @param {SerializableNode=} start
- * @param {SerializableNode=} end
  */
 treemode.onSelectionChange = function (callback) {
   if (typeof callback === 'function') {
@@ -1731,7 +1731,7 @@ treemode.onSelectionChange = function (callback) {
 treemode.setSelection = function (start, end) {
   // check for old usage
   if (start && start.dom && start.range) {
-    console.warn('setSelection/getSelection usage for text selection is depracated and should not be used, see documantaion for supported selection options');
+    console.warn('setSelection/getSelection usage for text selection is deprecated and should not be used, see documentation for supported selection options');
     this.setDomSelection(start);
   }
 
@@ -1747,7 +1747,7 @@ treemode.setSelection = function (start, end) {
  * Returns a set of Nodes according to a range of selection
  * @param {{path: Array.<String>}} start object contains the path for range start 
  * @param {{path: Array.<String>}=} end object contains the path for range end
- * @return {Array.<Node>} Node intances on the given range
+ * @return {Array.<Node>} Node instances on the given range
  * @private
  */
 treemode._getNodeInstancesByRange = function (start, end) {