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');