diff --git a/src/ui/react/src/adapter/alloy-editor.js b/src/ui/react/src/adapter/alloy-editor.js
index 79a54c1702..6041400bf5 100644
--- a/src/ui/react/src/adapter/alloy-editor.js
+++ b/src/ui/react/src/adapter/alloy-editor.js
@@ -47,6 +47,10 @@
AlloyEditor.Lang.mix(editor.config, config);
editor.once('contentDom', function() {
+ if (editor.config.readOnly) {
+ this._addReadOnlyLinkClickListener(editor);
+ }
+
var editable = editor.editable();
editable.addClass('ae-editable');
@@ -78,6 +82,7 @@
if (nativeEditor) {
var editable = nativeEditor.editable();
+
if (editable) {
editable.removeClass('ae-editable');
@@ -90,6 +95,19 @@
}
},
+ /**
+ * Method to set default link behavior
+ *
+ * @protected
+ * @method _addReadOnlyLinkClickListener
+ * @param {Object} editor
+ */
+ _addReadOnlyLinkClickListener: function(editor) {
+ editor.editable().on('click', this._defaultReadOnlyClickFn, this, {
+ editor: editor
+ });
+ },
+
/**
* Called on `click` event when the editor is in read only mode. Navigates to link's URL or opens
* the link in a new window.
@@ -106,13 +124,10 @@
if (link) {
var href = link.$.attributes.href ? link.$.attributes.href.value : null;
+
var target = link.$.attributes.target ? link.$.attributes.target.value : null;
- if (target && href) {
- window.open(href, target);
- } else if (href) {
- window.location.href = href;
- }
+ this._redirectLink(href, target);
}
}
},
@@ -137,14 +152,30 @@
*/
_onReadOnlyChangeFn: function(event) {
if (event.editor.readOnly) {
- event.editor.editable().on('click', this._defaultReadOnlyClickFn, this, {
- editor: event.editor
- });
- } else {
+ this._addReadOnlyLinkClickListener(event.editor);
+ }
+ else {
event.editor.editable().removeListener('click', this._defaultReadOnlyClickFn);
}
},
+ /**
+ * Redirects the browser to a given link
+ *
+ * @protected
+ * @method _redirectLink
+ * @param {string} href The href to take the browser to
+ * @param {string=} target Specifies where to display the link
+ */
+ _redirectLink: function(href, target) {
+ if (target && href) {
+ window.open(href, target);
+ }
+ else if (href) {
+ window.location.href = href;
+ }
+ },
+
/**
* Renders the specified from the user toolbars.
*
diff --git a/src/ui/react/test/alloy-editor.js b/src/ui/react/test/alloy-editor.js
index 44d7b68838..c290482f70 100644
--- a/src/ui/react/test/alloy-editor.js
+++ b/src/ui/react/test/alloy-editor.js
@@ -147,6 +147,91 @@
});
});
+ describe('with readOnly set to false', function() {
+ beforeEach(function(done) {
+ initEditor.call(this, done);
+ });
+
+ afterEach(function() {
+ cleanUpEditor.call(this);
+ });
+
+ it('should not redirect when clicking on links', function() {
+ var spy = sinon.spy(this.alloyEditor, '_redirectLink');
+
+ bender.tools.selection.setWithHtml(this.alloyEditor.get('nativeEditor'), 'Foo');
+
+ happen.click(document.getElementById('link_foo'));
+
+ assert.isFalse(spy.called);
+ });
+
+ it('should redirect when clicking on links and readonly has been changed to true', function() {
+ var nativeEditor = this.alloyEditor.get('nativeEditor');
+
+ nativeEditor.setReadOnly(true);
+
+ // Stub `_redirectLink` method to avoid page refreshes during the test
+ var stub = sinon.stub(this.alloyEditor, '_redirectLink');
+
+ bender.tools.selection.setWithHtml(nativeEditor, 'Foo');
+
+ happen.click(document.getElementById('link_foo'));
+
+ assert.isTrue(stub.calledOnce);
+ });
+ });
+
+ describe('with readonly set to true', function() {
+ beforeEach(function(done) {
+ initEditor.call(this, done, {
+ readOnly: true
+ });
+ });
+
+ afterEach(function() {
+ cleanUpEditor.call(this);
+ });
+
+ it('should open a new window when clicking in links with a target attribute', function() {
+ var stub = sinon.stub(window, 'open');
+
+ bender.tools.selection.setWithHtml(this.alloyEditor.get('nativeEditor'), 'Foo');
+
+ happen.click(document.getElementById('link_foo'));
+
+ stub.restore();
+
+ assert.isTrue(stub.calledOnce);
+ });
+
+ it('should update the current window url when clicking in links without a target attribute', function() {
+ var locationHref = window.location.href;
+
+ bender.tools.selection.setWithHtml(this.alloyEditor.get('nativeEditor'), 'Foo');
+
+ happen.click(document.getElementById('link_foo'));
+
+ assert.strictEqual(window.location.href, locationHref + '#foo');
+ });
+
+ it('should not redirect when clicking on links and readonly has been set to', function() {
+ var nativeEditor = this.alloyEditor.get('nativeEditor');
+
+ nativeEditor.setReadOnly(false);
+
+ var stub = sinon.stub(this.alloyEditor, '_redirectLink');
+
+ bender.tools.selection.setWithHtml(nativeEditor, 'Foo');
+
+ var link = document.getElementById('link_foo');
+
+ happen.click(link);
+
+ assert.strictEqual(0, stub.callCount);
+ });
+ });
+
it('should create an instance when the passed srcNode is a DOM element', function(done) {
var el = document.createElement('div');
el.setAttribute('id', 'editable1');