Added support for search (Ctrl+F) in the code editor Ace

HISTORY.md

@@ -5,6 +5,7 @@ http://jsoneditoronline.org
 
 ## not yet released, version 2.3.3
 
+- Added support for search (Ctrl+F) in the code editor Ace.
 - Fixed a positioning issue of the action menu when in bootstrap modal.
   (thanks tsash).
 

Jakefile.js

@@ -248,7 +248,8 @@ task('webapp', ['build', 'minify'], function () {
             libSrc + 'ace/ace.js',
             libSrc + 'ace/mode-json.js',
             libSrc + 'ace/theme-textmate.js',
-            libSrc + 'ace/theme-jsoneditor.js'
+            libSrc + 'ace/theme-jsoneditor.js',
+            libSrc + 'ace/ext-searchbox.js'
         ],
         dest: webAppAce + 'ace-min.js',
         separator: '\n'

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "jsoneditor",
-    "version": "2.3.2",
+    "version": "2.3.3",
     "description": "A web-based tool to view, edit and format JSON",
     "tags": [
         "json",

jsoneditor.css

@@ -80,7 +80,7 @@
     border-radius: 2px;
 }
 
-.jsoneditor button {
+.jsoneditor div.tree button {
     width: 24px;
     height: 24px;
     padding: 0;
@@ -90,29 +90,29 @@
     background: transparent url('img/jsoneditor-icons.png');
 }
 
-.jsoneditor button.collapsed {
+.jsoneditor div.tree button.collapsed {
     background-position: 0 -48px;
 }
 
-.jsoneditor button.expanded {
+.jsoneditor div.tree button.expanded {
     background-position: 0 -72px;
 }
 
-.jsoneditor button.contextmenu {
+.jsoneditor div.tree button.contextmenu {
     background-position: -48px -72px;
 }
 
-.jsoneditor button.contextmenu:hover,
-.jsoneditor button.contextmenu:focus,
-.jsoneditor button.contextmenu.selected {
+.jsoneditor div.tree button.contextmenu:hover,
+.jsoneditor div.tree button.contextmenu:focus,
+.jsoneditor div.tree button.contextmenu.selected {
     background-position: -48px -48px;
 }
 
-.jsoneditor div.content *:focus {
+.jsoneditor div.tree *:focus {
     outline: none;
 }
 
-.jsoneditor div.content button:focus {
+.jsoneditor div.tree button:focus {
     /* TODO: nice outline for buttons with focus
     outline: #97B0F8 solid 2px;
     box-shadow: 0 0 8px #97B0F8;
@@ -121,7 +121,7 @@
     outline: #e5e5e5 solid 1px;
 }
 
-.jsoneditor button.invisible {
+.jsoneditor div.tree button.invisible {
     visibility: hidden;
     background: none;
 }
@@ -139,7 +139,8 @@ div.jsoneditor {
     padding: 0;
 }
 
-.jsoneditor table.content {
+
+.jsoneditor div.tree table.tree {
     border-collapse: collapse;
     border-spacing: 0;
     width: 100%;
@@ -159,14 +160,14 @@ div.jsoneditor {
     overflow: hidden;
 }
 
-.jsoneditor div.content {
+.jsoneditor div.tree {
     width: 100%;
     height: 100%;
     position: relative;
     overflow: auto;
 }
 
-.jsoneditor textarea.content {
+.jsoneditor textarea.text {
     width: 100%;
     height: 100%;
     margin: 0;
@@ -184,13 +185,13 @@ div.jsoneditor {
     background-color: #FFFFAB;
 }
 
-.jsoneditor button.dragarea {
+.jsoneditor div.tree button.dragarea {
     background: url('img/jsoneditor-icons.png') -72px -72px;
     cursor: move;
 }
 
-.jsoneditor button.dragarea:hover,
-.jsoneditor button.dragarea:focus {
+.jsoneditor div.tree button.dragarea:hover,
+.jsoneditor div.tree button.dragarea:focus {
     background-position: -72px -48px;
 }
 
@@ -223,7 +224,7 @@ div.jsoneditor {
 /* ContextMenu - main menu */
 
 .jsoneditor-contextmenu {
-    position: absolute;
+    position: fixed;
     z-index: 99999;
 }
 

jsoneditor.js

@@ -27,8 +27,8 @@
  * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
  *
  * @author  Jos de Jong, <[email protected]>
- * @version 2.3.2
- * @date    2013-09-26
+ * @version 2.3.3
+ * @date    2013-10-17
  */
 (function () {
 
@@ -953,11 +953,11 @@ TreeEditor.prototype._createTable = function () {
     this.contentOuter = contentOuter;
 
     this.content = document.createElement('div');
-    this.content.className = 'content';
+    this.content.className = 'tree';
     contentOuter.appendChild(this.content);
 
     this.table = document.createElement('table');
-    this.table.className = 'content';
+    this.table.className = 'tree';
     this.content.appendChild(this.table);
 
     // IE8 does not handle overflow='auto' correctly.
@@ -1174,7 +1174,7 @@ TextEditor.prototype._create = function (container, options, json) {
     else {
         // load a plain text textarea
         var textarea = document.createElement('textarea');
-        textarea.className = 'content';
+        textarea.className = 'text';
         textarea.spellcheck = false;
         this.content.appendChild(textarea);
         this.textarea = textarea;

jsoneditor/css/jsoneditor.css

@@ -80,7 +80,7 @@
     border-radius: 2px;
 }
 
-.jsoneditor button {
+.jsoneditor div.tree button {
     width: 24px;
     height: 24px;
     padding: 0;
@@ -90,29 +90,29 @@
     background: transparent url('img/jsoneditor-icons.png');
 }
 
-.jsoneditor button.collapsed {
+.jsoneditor div.tree button.collapsed {
     background-position: 0 -48px;
 }
 
-.jsoneditor button.expanded {
+.jsoneditor div.tree button.expanded {
     background-position: 0 -72px;
 }
 
-.jsoneditor button.contextmenu {
+.jsoneditor div.tree button.contextmenu {
     background-position: -48px -72px;
 }
 
-.jsoneditor button.contextmenu:hover,
-.jsoneditor button.contextmenu:focus,
-.jsoneditor button.contextmenu.selected {
+.jsoneditor div.tree button.contextmenu:hover,
+.jsoneditor div.tree button.contextmenu:focus,
+.jsoneditor div.tree button.contextmenu.selected {
     background-position: -48px -48px;
 }
 
-.jsoneditor div.content *:focus {
+.jsoneditor div.tree *:focus {
     outline: none;
 }
 
-.jsoneditor div.content button:focus {
+.jsoneditor div.tree button:focus {
     /* TODO: nice outline for buttons with focus
     outline: #97B0F8 solid 2px;
     box-shadow: 0 0 8px #97B0F8;
@@ -121,7 +121,7 @@
     outline: #e5e5e5 solid 1px;
 }
 
-.jsoneditor button.invisible {
+.jsoneditor div.tree button.invisible {
     visibility: hidden;
     background: none;
 }
@@ -139,7 +139,8 @@ div.jsoneditor {
     padding: 0;
 }
 
-.jsoneditor table.content {
+
+.jsoneditor div.tree table.tree {
     border-collapse: collapse;
     border-spacing: 0;
     width: 100%;
@@ -159,14 +160,14 @@ div.jsoneditor {
     overflow: hidden;
 }
 
-.jsoneditor div.content {
+.jsoneditor div.tree {
     width: 100%;
     height: 100%;
     position: relative;
     overflow: auto;
 }
 
-.jsoneditor textarea.content {
+.jsoneditor textarea.text {
     width: 100%;
     height: 100%;
     margin: 0;
@@ -184,13 +185,13 @@ div.jsoneditor {
     background-color: #FFFFAB;
 }
 
-.jsoneditor button.dragarea {
+.jsoneditor div.tree button.dragarea {
     background: url('img/jsoneditor-icons.png') -72px -72px;
     cursor: move;
 }
 
-.jsoneditor button.dragarea:hover,
-.jsoneditor button.dragarea:focus {
+.jsoneditor div.tree button.dragarea:hover,
+.jsoneditor div.tree button.dragarea:focus {
     background-position: -72px -48px;
 }
 

jsoneditor/js/texteditor.js

@@ -160,7 +160,7 @@ TextEditor.prototype._create = function (container, options, json) {
     else {
         // load a plain text textarea
         var textarea = document.createElement('textarea');
-        textarea.className = 'content';
+        textarea.className = 'text';
         textarea.spellcheck = false;
         this.content.appendChild(textarea);
         this.textarea = textarea;

jsoneditor/js/treeeditor.js

@@ -712,11 +712,11 @@ TreeEditor.prototype._createTable = function () {
     this.contentOuter = contentOuter;
 
     this.content = document.createElement('div');
-    this.content.className = 'content';
+    this.content.className = 'tree';
     contentOuter.appendChild(this.content);
 
     this.table = document.createElement('table');
-    this.table.className = 'content';
+    this.table.className = 'tree';
     this.content.appendChild(this.table);
 
     // IE8 does not handle overflow='auto' correctly.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "jsoneditor",
-    "version": "2.3.2",
+    "version": "2.3.3",
     "main": "jsoneditor.js",
     "description": "A web-based tool to view, edit and format JSON",
     "tags": [