Disabled saving files using HTML5 on Firefox to prevent a Firefox bug

HISTORY.md

@@ -3,9 +3,11 @@
 http://jsoneditoronline.org
 
 
-## not yet released, version 2.3.4
+## not yet released, version 2.4.0
 
 - Dropped support for IE8, cleaned up legacy code for old browsers.
+- Disabled saving files using HTML5 on Firefox to prevent a Firefox bug
+  blocking cut/paste functionality in editable divs after using a.download.
 
 
 ## 2013-10-17, version 2.3.3

app/web/fileretriever.js

@@ -522,8 +522,11 @@ FileRetriever.prototype.saveFile = function (data, callback) {
     };
 
     // create an anchor to save files to disk (if supported by the browser)
+    // Note: save file using a.download is disabled in Firefox because of a
+    //       a bug in Firefox, which breaks the cut/paste functionality of
+    //       editable divs on the page.
     var a = document.createElement('a');
-    if (this.options.html5 && a.download != undefined) {
+    if (this.options.html5 && a.download != undefined && !util.isFirefox()) {
         // save file directly using a data URL
         a.style.display = 'none';
         a.href = 'data:application/json;charset=utf-8,' + encodeURIComponent(data);

bower.json

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

jsoneditor.js

@@ -27,7 +27,7 @@
  * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
  *
  * @author  Jos de Jong, <wjosdejong@gmail.com>
- * @version 2.3.4-SNAPSHOT
+ * @version 2.4.0-SNAPSHOT
  * @date    2013-11-15
  */
 (function () {
@@ -4597,8 +4597,8 @@ ContextMenu.prototype.show = function (anchor) {
             }
         });
     this.eventListeners.mousewheel = util.addEventListener(
-        document, 'mousewheel', function () {
+        document, 'mousewheel', function (event) {
-            // hide the menu on mouse scroll
+            // block scrolling when context menu is visible
             event.stopPropagation();
             event.preventDefault();
         });
@@ -5922,6 +5922,14 @@ util.getInternetExplorerVersion = function getInternetExplorerVersion() {
     return _ieVersion;
 };
 
+/**
+ * Test whether the current browser is Firefox
+ * @returns {boolean} isFirefox
+ */
+util.isFirefox = function isFirefox () {
+  return (navigator.userAgent.indexOf("Firefox") != -1);
+};
+
 /**
  * cached internet explorer version
  * @type {Number}
@@ -5943,7 +5951,7 @@ util.addEventListener = function addEventListener(element, action, listener, use
         if (useCapture === undefined)
             useCapture = false;
 
-        if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
+        if (action === "mousewheel" && util.isFirefox()) {
             action = "DOMMouseScroll";  // For Firefox
         }
 
@@ -5966,7 +5974,7 @@ util.removeEventListener = function removeEventListener(element, action, listene
         if (useCapture === undefined)
             useCapture = false;
 
-        if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
+        if (action === "mousewheel" && util.isFirefox()) {
             action = "DOMMouseScroll";  // For Firefox
         }
 

jsoneditor/js/util.js

@@ -419,6 +419,14 @@ util.getInternetExplorerVersion = function getInternetExplorerVersion() {
     return _ieVersion;
 };
 
+/**
+ * Test whether the current browser is Firefox
+ * @returns {boolean} isFirefox
+ */
+util.isFirefox = function isFirefox () {
+  return (navigator.userAgent.indexOf("Firefox") != -1);
+};
+
 /**
  * cached internet explorer version
  * @type {Number}
@@ -440,7 +448,7 @@ util.addEventListener = function addEventListener(element, action, listener, use
         if (useCapture === undefined)
             useCapture = false;
 
-        if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
+        if (action === "mousewheel" && util.isFirefox()) {
             action = "DOMMouseScroll";  // For Firefox
         }
 
@@ -463,7 +471,7 @@ util.removeEventListener = function removeEventListener(element, action, listene
         if (useCapture === undefined)
             useCapture = false;
 
-        if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
+        if (action === "mousewheel" && util.isFirefox()) {
             action = "DOMMouseScroll";  // For Firefox
         }
 

package.json

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

test/test_ace.html

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>Test Ace</title>
-
-    <script src="../app/web/lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>
-    <script src="../app/web/lib/ace/mode-json.js" type="text/javascript" charset="utf-8"></script>
-    <script src="../app/web/lib/ace/theme-textmate.js" type="text/javascript" charset="utf-8"></script>
-    <script src="../app/web/lib/ace/theme-jso.js" type="text/javascript" charset="utf-8"></script>
-
-    <style type="text/css" media="screen">
-        html, body {
-            width: 100%;
-            height: 100%;
-            margin: 0;
-            padding: 0;
-        }
-
-        #editor {
-            border: 1px solid gray;
-            width: 50%;
-            height: 75%;
-        }
-    </style>
-</head>
-<body>
-
-<h1>Test Ace</h1>
-
-<div id="editor"></div>
-
-<script>
-    var editor = ace.edit('editor');
-    editor.setTheme("ace/theme/jso");
-    editor.setShowPrintMargin(false);
-    editor.setFontSize(13);
-    editor.getSession().setMode('ace/mode/json');
-    editor.getSession().setUseSoftTabs(true);
-    editor.getSession().setUseWrapMode(true);
-
-    var json = {
-            "array": [
-            1,
-            2,
-            3
-        ],
-        "boolean": true,
-        "null": null,
-        "number": 123,
-        "object": {
-            "a": "b",
-            "c": "d",
-            "e": "f"
-        },
-        "string": "Hello World"
-    };
-    editor.setValue(JSON.stringify(json, null, 4), -1);
-</script>
-</body>
-</html>

test/test_editable_div.html

@@ -1,449 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-        "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<head>
-    <title>test editable div</title>
-
-    <!-- http://jsbeautifier.org/ -->
-    <script type="text/javascript" src="http://jsbeautifier.org/beautify.js"></script>
-    <script type="text/javascript" src="http://jsbeautifier.org/beautify-css.js"></script>
-    <script type="text/javascript" src="http://jsbeautifier.org/beautify-html.js"></script>
-
-    <style type="text/css">
-        body {
-            font-size: 10pt;
-            font-family: verdana, arial, sans-serif;
-        }
-
-        #editor, #traverseText, #regexText {
-            width: 200px;
-            height: 400px;
-            border: 1px solid gray;
-            overflow: auto;
-            font: 10pt monospace;
-            color: #1a1a1a;
-            margin: 0;
-        }
-
-        #editor p { /* For IE and Opera */
-            margin: 0;
-        }
-
-        td, th {
-            text-align: left;
-            vertical-align: top;
-        }
-    </style>
-</head>
-<body>
-
-<p style="font-weight: bold;">
-    Test file for testing two different methods to extract the inner text (including
-    return characters) from and editable div.
-</p>
-
-<p>
-    <button onclick="test1()">test 1</button>
-    <button onclick="test2()">test 2</button>
-    <button onclick="test3()">test 3</button>
-    <button onclick="test4()">test 4</button>
-    <button onclick="test5()">test 5</button>
-    <button onclick="test6()">test 6</button>
-    <button onclick="test7()">test 7</button>
-    (For more testing, just start entering text, deleting text, copying/pasting text, etc...)
-</p>
-
-<p>
-    <button onclick="test_chrome()">test chrome</button>
-    <button onclick="test_firefox()">test firefox</button>
-    <button onclick="test_opera()">test opera</button>
-    <button onclick="test_ie()">test ie</button>
-    (typical content per browser, after some entering text and cutting/pasting within the editable div)
-</p>
-
-<table>
-    <tr>
-        <th>editable div</th>
-        <th>traverse</th>
-        <th>regex</th>
-        <th>innerHTML</th>
-    </tr>
-    <tr>
-        <td><div id="editor" contenteditable="true"></div></td>
-        <td><textarea id="traverseText"></textarea></td>
-        <td><textarea id="regexText"></textarea></td>
-        <td><pre id="innerHTML"></pre></td>
-    </tr>
-</table>
-
-<script type="text/javascript">
-
-    function prepareHtmlForEscaping (html) {
-        //html = JSONEditor.insertMissingEscapes(html);
-        html = html.replace(/<br[^>]*>\s*<div>/g, '<div>');
-
-        // DIV BR /DIV => \n
-        html = html.replace(/<div>\s*(?:<br[^>]*>)?\s*<\/div>/g, '\\n');
-
-        // strip trailing BR
-        html = html.replace(/<br[^>]*>(\s*)$/, '$1');
-
-        // BR /DIV => /DIV
-        html = html.replace(/<br[^>]*>\s*<\/div>/g, '</div>');
-
-        // place \n before line breaking HTML so typed line breaks get preserved
-        html = html.replace(/(<(?:br|div))\b/g, '\\n$1');
-
-        return html;
-    }
-
-    function stripHTML (html) {
-        // remove HTML tags
-        // code from nickf, http://stackoverflow.com/a/822464/1262753
-        return html.replace(/<(?:.|\n)*?>/gm, '');
-    }
-
-    /**
-     * get the inner text of an HTML element using regex expressions
-     * @param {Element} element
-     * @return {String} innerText
-     */
-    function getInnerTextUsingRegex (element) {
-        var html = prepareHtmlForEscaping(element.innerHTML);
-        var json = '"' + html + '"';
-        return stripHTML(JSON.parse(json));
-    }
-
-    /**
-     * get the inner text of an HTML element (for example a div element)
-     * @param {Element} element
-     * @return {String} innerText
-     */
-    function getInnerText_v1 (element, level) {
-        if (level == undefined) {
-            level = 0;
-        }
-
-        // text node
-        if (element.nodeValue) {
-            return element.nodeValue;
-        }
-
-        // divs or other HTML elements
-        if (element.hasChildNodes()) {
-            var childNodes = element.childNodes;
-            var innerText = '';
-
-            for (var i = 0, iMax = childNodes.length; i < iMax; i++) {
-                var child = childNodes[i];
-
-                if (child.nodeName == 'DIV' || child.nodeName == 'P') {
-                    // check to add a return between #text and <div>
-                    var prevChild = childNodes[i - 1];
-                    if (prevChild && prevChild.nodeName == '#text') {
-                        innerText += '\n';
-                    }
-
-                    innerText += getInnerText(child, level + 1);
-
-                    // add text after the end of div
-                    if ((i < iMax - 1) && (innerText[innerText.length-1] != '\n')) {
-                        innerText += '\n';
-                    }
-                }
-                else if (child.nodeName == 'BR') {
-                    // insert return except when on level 0 and at the last element
-                    if (level != 0 || i < iMax - 1) {
-                        innerText += '\n';
-                    }
-                }
-                else {
-                    innerText += getInnerText(child, level + 1);
-                }
-            }
-
-            return innerText;
-        }
-
-        // br or unknown
-        return '';
-    }
-
-    /**
-     * get the inner text of an HTML element (for example a div element)
-     * @param {Element} element
-     * @return {Object} [buffer]
-     */
-    function getInnerText_v2 (element, buffer) {
-        if (buffer == undefined) {
-            buffer = {
-                'text': '',
-                'flush': function () {
-                    var text = this.text;
-                    this.text = '';
-                    return text;
-                },
-                'set': function (text) {
-                    this.text = text;
-                },
-                'add': function (text) {
-                    this.text += text;
-                }
-            };
-        }
-
-        // text node
-        if (element.nodeValue) {
-            return buffer.flush() + element.nodeValue;
-        }
-
-        // divs or other HTML elements
-        if (element.hasChildNodes()) {
-            var childNodes = element.childNodes;
-            var innerText = '';
-
-            for (var i = 0, iMax = childNodes.length; i < iMax; i++) {
-                var child = childNodes[i];
-
-                if (child.nodeName == 'DIV' || child.nodeName == 'P') {
-                    // check to add a return between non-block elements and
-                    // a block element
-                    var prevChild = childNodes[i - 1];
-                    var prevName = prevChild ? prevChild.nodeName : undefined;
-                    if (prevName && prevName != 'DIV' && prevName != 'P' && prevName != 'BR') {
-                        innerText += '\n';
-                        buffer.flush();
-                    }
-
-                    innerText += buffer.flush();
-
-                    innerText += getInnerText(child, buffer);
-
-                    buffer.set('\n');
-                }
-                else if (child.nodeName == 'BR') {
-                    innerText += buffer.flush();
-                    buffer.set('\n');
-                }
-                else {
-                    innerText += getInnerText(child, buffer);
-                }
-            }
-
-            return innerText;
-        }
-
-        // br or unknown
-        return '';
-    }
-
-    /**
-     * get the inner text of an HTML element (for example a div element)
-     * @param {Element} element
-     * @param {Object} [buffer]
-     * @return {String} innerText
-     */
-    function getInnerText_v3 (element, buffer) {
-        var first = (buffer == undefined);
-        if (first) {
-            buffer = {
-                'text': '',
-                'flush': function () {
-                    var text = this.text;
-                    this.text = '';
-                    return text;
-                },
-                'set': function (text) {
-                    this.text = text;
-                }
-            };
-        }
-
-        // text node
-        if (element.nodeValue) {
-            return buffer.flush() + element.nodeValue;
-        }
-
-        // divs or other HTML elements
-        if (element.hasChildNodes()) {
-            var childNodes = element.childNodes;
-            var innerText = '';
-
-            for (var i = 0, iMax = childNodes.length; i < iMax; i++) {
-                var child = childNodes[i];
-
-                // console.log(child.nodeName + ' ' + (child.innerHTML || child.nodeValue)); // TODO: cleanup
-
-                if (child.nodeName == 'DIV' || child.nodeName == 'P') {
-                    var prevChild = childNodes[i - 1];
-                    var prevName = prevChild ? prevChild.nodeName : undefined;
-                    if (prevName && prevName != 'DIV' && prevName != 'P' && prevName != 'BR') {
-                        innerText += '\n';
-                        buffer.flush();
-                    }
-                    innerText += getInnerText(child, buffer);
-                    buffer.set('\n');
-                }
-                else if (child.nodeName == 'BR') {
-                    innerText += buffer.flush();
-                    buffer.set('\n');
-                }
-                else {
-                    innerText += getInnerText(child, buffer);
-                }
-            }
-
-            return innerText;
-        }
-        else {
-            if (element.nodeName == 'P' && getInternetExplorerVersion() != -1) {
-                // On Internet Explorer, a P with hasChildNodes()==false is
-                // rendered with a new line. Note that a P with
-                // hasChildNodes()==true is rendered without a new line
-                return buffer.flush();
-            }
-        }
-
-        // br or unknown
-        return '';
-    }
-
-    var getInternetExplorerVersion = function() {
-        var rv = -1; // Return value assumes failure.
-        if (navigator.appName == 'Microsoft Internet Explorer')
-        {
-            var ua = navigator.userAgent;
-            var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
-            if (re.exec(ua) != null)
-                rv = parseFloat( RegExp.$1 );
-        }
-        return rv;
-    };
-
-    var getInnerText = getInnerText_v3;
-
-    var editor = document.getElementById('editor');
-    var traverseText = document.getElementById('traverseText');
-    var regexText = document.getElementById('regexText');
-    var innerHTML = document.getElementById('innerHTML');
-
-    function displayInnerHTML () {
-        //function style_html (t) {return t.replace(/</g, '\n<');}
-        //*
-        if (editor.innerText) {
-            innerHTML.innerText = style_html(editor.innerHTML);
-        }
-        else {
-            innerHTML.textContent = style_html(editor.innerHTML);
-        }
-        //*/
-
-        traverseText.value = getInnerText(editor);
-        regexText.value = getInnerTextUsingRegex(editor);
-    }
-
-    function test1 () {
-        editor.innerHTML =
-                'Typical Chrome...' +
-                        '<div>1</div>' +
-                        '<div>2</div>' +
-                        '<div><br class="Apple-interchange-newline"></div>' +
-                        '<div><br></div>' +
-                        '<div>3</div>' +
-
-                        'Typical Firefox...' +
-                        '<br>1' +
-                        '<br>2' +
-                        '<br>' +
-                        '<br>3' +
-                        '<br>' +
-
-                        '<p>Typical IE...</p>' +
-                        '<p>1</p>' +
-                        '<p>2</p>' +
-                        '<p>&nbsp;</p>' +
-                        '<p>&nbsp;</p>' +
-                        '<p>check the last return</p>';
-
-        displayInnerHTML();
-    }
-
-    function test2 () {
-        editor.innerHTML =
-                '<div>' +
-                        '<div>Some weird nested divs</div>' +
-                        '<div>' +
-                        '<div>1</div>' +
-                        '</div>' +
-                        '<div><br></div>' +
-                        '<div><br></div>' +
-                        '</div>' +
-                        '2' +
-                        '</div>' +
-                        '<div><br><br></div>' +
-                        '<div>3</div>' +
-                        '</div>' +
-                        '<br>' +
-                        '4' +
-                        '<br>' +
-                        '5' +
-                        '<span>in span</span>' +
-                        '<div>aaa</div>' +
-                        'check the last return' +
-                        '<br>';
-
-        displayInnerHTML();
-    }
-
-    function test3 () {
-        editor.innerHTML = '<div>check the last return</div>';
-        displayInnerHTML();
-    }
-
-    function test4 () {
-        editor.innerHTML = '<br>';
-        displayInnerHTML();
-    }
-
-    function test5 () {
-        editor.innerHTML = '';
-        displayInnerHTML();
-    }
-
-    function test6 () {
-        editor.innerHTML = 'just text';
-        displayInnerHTML();
-    }
-
-    function test7 () {
-        editor.innerHTML = '<div>check the last return</div><div><br></div>';
-        displayInnerHTML();
-    }
-
-    function test_chrome () {
-        editor.innerHTML = 'abc<div><br></div><div>af</div><div><br></div><div><br></div><div>d</div><div>asd</div>';
-        displayInnerHTML();
-    }
-
-    function test_firefox () {
-        editor.innerHTML = 'abc<br>df<br><br>dsf<br>asdf<br><br>asdf<br>dsf<br>asdf<br><br><br>dsaf<br>';
-        displayInnerHTML();
-    }
-
-    function test_opera () {
-        editor.innerHTML = '<p>abc</p><p><p>df</p><p><br></p><p>d</p></p><p><p>df</p><p><br></p><p><br></p><p>d</p></p><p>asdf</p>';
-        displayInnerHTML();
-    }
-
-    function test_ie () {
-        editor.innerHTML = '<p>a</p><p>&nbsp;</p><p>&nbsp;</p><p>as</p><p></p><p></p><p>asdf</p><p></p><p>&nbsp;</p><p>c</p><p>&nbsp;</p><p>d</p><p>&nbsp;</p>';
-        displayInnerHTML();
-    }
-
-    editor.oninput = displayInnerHTML;
-    editor.onkeyup = displayInnerHTML;
-    editor.onblur = displayInnerHTML;
-</script>
-
-</body>
-</html>