feat(toggleMarkup): Editor#toggleMarkup accepts attributes (#569)

Also simplify `toggleLink` to use `editor#toggleMarkup`
bustle · Aug 10, 2017 · de70839 · de70839
1 parent 29dfca5
commit de70839
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)');
+});