Allow to prevent AlloyEditor from setting contenteditable to true on its srcNode

src/ui/react/src/adapter/alloy-editor.js

@@ -23,7 +23,10 @@
          */
         initializer: function(config) {
             var node = this.get('srcNode');
-            node.setAttribute('contenteditable', 'true');
+
+            if ( this.get('enableContentEditable') ) {
+                node.setAttribute('contenteditable', 'true');
+            }
 
             var editor = CKEDITOR.inline(node);
 
@@ -295,6 +298,21 @@
                 writeOnce: true
             },
 
+            /**
+             * Specifies whether AlloyEditor set the contenteditable attribute
+             * to "true" on its srcNode.
+             *
+             * @property enableContentEditable
+             * @type Boolean
+             * @default true
+             * @writeOnce
+             */
+            enableContentEditable: {
+                validator: AlloyEditor.Lang.isBoolean,
+                value: true,
+                writeOnce: true
+            },
+
             /**
              * The toolbars configuration for this editor instance
              *

src/ui/react/test/alloy-editor.js

@@ -1,52 +1,97 @@
 (function() {
     'use strict';
 
-    var assert = chai.assert;
+    var assert = chai.assert,
+        initEditor = function(done, config) {
+            this.el = document.createElement('div');
+            this.el.setAttribute('id', 'editable');
+            document.body.appendChild(this.el);
 
-    describe('AlloyEditor', function() {
-        this.timeout(35000);
+            this.alloyEditor = AlloyEditor.editable('editable', config);
 
-        afterEach(function() {
-            if (this.alloyEditor) {
+            this.alloyEditor.get('nativeEditor').once('instanceReady', function() {
+                done();
+            });
+        },
+        cleanUpEditor = function () {
+            if ( this.alloyEditor ) {
                 this.alloyEditor.destroy();
                 this.alloyEditor = null;
             }
-
             document.body.removeChild(this.el);
-        });
+        };
 
-        beforeEach(function(done) {
-            this.el = document.createElement('div');
-            this.el.setAttribute('id', 'editable');
-            document.body.appendChild(this.el);
+    describe('AlloyEditor', function() {
+        this.timeout(35000);
+
+        describe('with default enableContentEditable config', function() {
+            beforeEach(function(done) {
+                initEditor.call(this, done);
+            });
 
-            this.alloyEditor = AlloyEditor.editable('editable');
+            afterEach(function () {
+                cleanUpEditor.call(this);
+            });
 
-            this.alloyEditor.get('nativeEditor').once('instanceReady', function() {
-                done();
+            it('should set contenteditable to true', function() {
+                assert.isTrue(this.el.isContentEditable);
             });
         });
 
-        it('should set contenteditable to true when it is not set', function() {
-            assert.strictEqual('true', this.el.getAttribute('contenteditable'));
+        describe('with enableContentEditable set to true', function() {
+            beforeEach(function(done) {
+                initEditor.call(this, done, {enableContentEditable: true});
+            });
+
+            afterEach(function () {
+                cleanUpEditor.call(this);
+            });
+
+            it('should set contenteditable to true', function() {
+                assert.isTrue(this.el.isContentEditable);
+            });
         });
 
-        it('should add ae-editable class to the editable element', function() {
-            assert.isTrue(this.alloyEditor.get('nativeEditor').editable().hasClass('ae-editable'));
+        describe('with enableContentEditable set to false', function() {
+            beforeEach(function(done) {
+                initEditor.call(this, done, {enableContentEditable: false});
+            });
+
+            afterEach(function () {
+                cleanUpEditor.call(this);
+            });
+
+            it('should not force the srcNode to be contenteditable', function() {
+                assert.isFalse(this.el.isContentEditable);
+            });
         });
 
-        it('should remove ae-editable class from the editable element on editor destroying', function() {
-            var editable = this.alloyEditor.get('nativeEditor').editable();
-            this.alloyEditor.destroy();
-            this.alloyEditor = null;
-            assert.isFalse(editable.hasClass('ae-editable'));
+        describe('ae-editable handling', function () {
+            beforeEach(function(done) {
+                initEditor.call(this, done);
+            });
+
+            afterEach(function () {
+                cleanUpEditor.call(this);
+            });
+
+            it('should add ae-editable class to the editable element', function() {
+                assert.isTrue(this.alloyEditor.get('nativeEditor').editable().hasClass('ae-editable'));
+            });
+
+            it('should remove ae-editable class from the editable element on editor destroying', function() {
+                var editable = this.alloyEditor.get('nativeEditor').editable();
+
+                this.alloyEditor.destroy();
+                this.alloyEditor = null;
+                assert.isFalse(editable.hasClass('ae-editable'));
+            });
         });
 
         it('should create an instance when the passed srcNode is a DOM element', function(done) {
             var el = document.createElement('div');
             el.setAttribute('id', 'editable1');
             document.body.appendChild(el);
-
             assert.doesNotThrow(function() {
                 try {
                     var alloyEditor = AlloyEditor.editable(el);