diff --git a/src/js/editor/editor.js b/src/js/editor/editor.js index 7bfd31451..e66f24047 100644 --- a/src/js/editor/editor.js +++ b/src/js/editor/editor.js @@ -855,11 +855,12 @@ class Editor { * (aka a non-collapsed range), the selections' markup will be toggled. * If the editor is not focused and has no active range, nothing happens. * @param {String} markup E.g. "b", "em", "a" + * @param {Object} [attributes={}] E.g. {href: "http://bustle.com"} * @public * @see PostEditor#toggleMarkup */ - toggleMarkup(markup) { - markup = this.builder.createMarkup(markup); + toggleMarkup(markup, attributes={}) { + markup = this.builder.createMarkup(markup, attributes); let { range } = this; if (range.isCollapsed) { this._editState.toggleMarkupState(markup); diff --git a/src/js/editor/ui.js b/src/js/editor/ui.js index 70579b344..20250f29e 100644 --- a/src/js/editor/ui.js +++ b/src/js/editor/ui.js @@ -55,15 +55,12 @@ export function toggleLink(editor, showPrompt=defaultShowPrompt) { let hasLink = editor.detectMarkupInRange(range, 'a'); if (hasLink) { - editor.run(postEditor => postEditor.toggleMarkup('a')); + editor.toggleMarkup('a'); } else { showPrompt('Enter a URL', defaultUrl, url => { if (!url) { return; } - editor.run(postEditor => { - let markup = postEditor.builder.createMarkup('a', {href: url}); - postEditor.toggleMarkup(markup); - }); + editor.toggleMarkup('a', {href: url}); }); } } diff --git a/tests/helpers/dom.js b/tests/helpers/dom.js index 6105bdd32..019cdee9f 100644 --- a/tests/helpers/dom.js +++ b/tests/helpers/dom.js @@ -53,7 +53,7 @@ function selectRange(startNode, startOffset, endNode, endOffset) { function selectText(editor, startText, - startContainingElement, + startContainingElement=editor.element, endText=startText, endContainingElement=startContainingElement) { diff --git a/tests/unit/editor/editor-test.js b/tests/unit/editor/editor-test.js index fd223f1c6..972e9c587 100644 --- a/tests/unit/editor/editor-test.js +++ b/tests/unit/editor/editor-test.js @@ -722,3 +722,33 @@ test('#insertCard focuses the cursor at the end of the card', (assert) => { assert.positionIsEqual(range.tail, insertedCard.tailPosition(), 'range tail on card tail'); assert.ok(document.activeElement === editorElement, 'editor element retains focus'); }); + +test('#toggleMarkup removes A tag when no attributes given', function(assert) { + editor = Helpers.mobiledoc.renderInto(editorElement, + ({post, markupSection, marker, markup}) => { + return post([markupSection('p', [ + marker('^'), marker('link', [markup('a', {href: 'google.com'})]), marker('$') + ])]); + }); + Helpers.dom.selectText(editor, 'link'); + editor.toggleMarkup('a'); + + assert.selectedText('link', 'text "link" still selected'); + assert.ok(editor.hasCursor(), 'editor has cursor'); + assert.hasElement('#editor p:contains(^link$)'); + assert.hasNoElement('#editor a', 'a tag is removed'); +}); + +test('#toggleMarkup adds A tag with attributes', function(assert) { + editor = Helpers.mobiledoc.renderInto(editorElement, + ({post, markupSection, marker, markup}) => { + return post([markupSection('p', [marker('^link$')])]); + }); + Helpers.dom.selectText(editor, 'link'); + editor.toggleMarkup('a', {href: 'google.com'}); + + assert.selectedText('link', 'text "link" still selected'); + assert.ok(editor.hasCursor(), 'editor has cursor'); + assert.hasElement('#editor a:contains(link)'); + assert.hasElement('#editor a[href="google.com"]:contains(link)'); +});