MDL-45008 atto_link: Standardise unlinking for non-selections

When placing the cursor within a link, but not making a selection, we
should unlink the whole link.

lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button-debug.js

@@ -85,8 +85,9 @@ Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.Edit
         });
 
         // And then the unlink button.
-        this.addBasicButton({
-            exec: 'unlink',
+        this.addButton({
+            buttonName: 'unlink',
+            callback: this._unlink,
             icon: 'e/remove_link',
             title: 'unlink',
 
@@ -291,6 +292,52 @@ Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.Edit
         }
 
         return this._content;
+    },
+
+    /**
+     * Unlinks the current selection.
+     * If the selection is empty (e.g. the cursor is placed within a link),
+     * then the whole link is unlinked.
+     *
+     * @method _unlink
+     * @private
+     */
+    _unlink: function() {
+        var host = this.get('host'),
+            range = host.getSelection();
+
+        if (range && range.length) {
+            if (range[0].startOffset === range[0].endOffset) {
+                // The cursor was placed in the editor but there was no selection - select the whole parent.
+                var nodes = host.getSelectedNodes();
+                if (nodes) {
+                    // We need to unlink each anchor individually - we cannot select a range because it may only consist of a
+                    // fragment of an anchor. Selecting the parent would be dangerous because it may contain other links which
+                    // would then be unlinked too.
+                    nodes.each(function(node) {
+                        // We need to select the whole anchor node for this to work in some browsers.
+                        // We only need to search up because getSeletedNodes returns all Nodes in the selection.
+                        var anchor = node.ancestor('a', true);
+                        if (anchor) {
+                            // Set the selection to the whole of the first anchro.
+                            host.setSelection(host.getSelectionFromNode(anchor));
+
+                            // Call the browser unlink.
+                            document.execCommand('unlink', false, null);
+                        }
+                    }, this);
+
+                    // And mark the text area as updated.
+                    this.markUpdated();
+                }
+            } else {
+                // Call the browser unlink.
+                document.execCommand('unlink', false, null);
+
+                // And mark the text area as updated.
+                this.markUpdated();
+            }
+        }
     }
 });
 

lib/editor/atto/plugins/link/yui/build/moodle-atto_link-button/moodle-atto_link-button.js

@@ -85,8 +85,9 @@ Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.Edit
         });
 
         // And then the unlink button.
-        this.addBasicButton({
-            exec: 'unlink',
+        this.addButton({
+            buttonName: 'unlink',
+            callback: this._unlink,
             icon: 'e/remove_link',
             title: 'unlink',
 
@@ -291,6 +292,52 @@ Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.Edit
         }
 
         return this._content;
+    },
+
+    /**
+     * Unlinks the current selection.
+     * If the selection is empty (e.g. the cursor is placed within a link),
+     * then the whole link is unlinked.
+     *
+     * @method _unlink
+     * @private
+     */
+    _unlink: function() {
+        var host = this.get('host'),
+            range = host.getSelection();
+
+        if (range && range.length) {
+            if (range[0].startOffset === range[0].endOffset) {
+                // The cursor was placed in the editor but there was no selection - select the whole parent.
+                var nodes = host.getSelectedNodes();
+                if (nodes) {
+                    // We need to unlink each anchor individually - we cannot select a range because it may only consist of a
+                    // fragment of an anchor. Selecting the parent would be dangerous because it may contain other links which
+                    // would then be unlinked too.
+                    nodes.each(function(node) {
+                        // We need to select the whole anchor node for this to work in some browsers.
+                        // We only need to search up because getSeletedNodes returns all Nodes in the selection.
+                        var anchor = node.ancestor('a', true);
+                        if (anchor) {
+                            // Set the selection to the whole of the first anchro.
+                            host.setSelection(host.getSelectionFromNode(anchor));
+
+                            // Call the browser unlink.
+                            document.execCommand('unlink', false, null);
+                        }
+                    }, this);
+
+                    // And mark the text area as updated.
+                    this.markUpdated();
+                }
+            } else {
+                // Call the browser unlink.
+                document.execCommand('unlink', false, null);
+
+                // And mark the text area as updated.
+                this.markUpdated();
+            }
+        }
     }
 });
 

lib/editor/atto/plugins/link/yui/src/button/js/button.js

@@ -83,8 +83,9 @@ Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.Edit
         });
 
         // And then the unlink button.
-        this.addBasicButton({
-            exec: 'unlink',
+        this.addButton({
+            buttonName: 'unlink',
+            callback: this._unlink,
             icon: 'e/remove_link',
             title: 'unlink',
 
@@ -289,5 +290,51 @@ Y.namespace('M.atto_link').Button = Y.Base.create('button', Y.M.editor_atto.Edit
         }
 
         return this._content;
+    },
+
+    /**
+     * Unlinks the current selection.
+     * If the selection is empty (e.g. the cursor is placed within a link),
+     * then the whole link is unlinked.
+     *
+     * @method _unlink
+     * @private
+     */
+    _unlink: function() {
+        var host = this.get('host'),
+            range = host.getSelection();
+
+        if (range && range.length) {
+            if (range[0].startOffset === range[0].endOffset) {
+                // The cursor was placed in the editor but there was no selection - select the whole parent.
+                var nodes = host.getSelectedNodes();
+                if (nodes) {
+                    // We need to unlink each anchor individually - we cannot select a range because it may only consist of a
+                    // fragment of an anchor. Selecting the parent would be dangerous because it may contain other links which
+                    // would then be unlinked too.
+                    nodes.each(function(node) {
+                        // We need to select the whole anchor node for this to work in some browsers.
+                        // We only need to search up because getSeletedNodes returns all Nodes in the selection.
+                        var anchor = node.ancestor('a', true);
+                        if (anchor) {
+                            // Set the selection to the whole of the first anchro.
+                            host.setSelection(host.getSelectionFromNode(anchor));
+
+                            // Call the browser unlink.
+                            document.execCommand('unlink', false, null);
+                        }
+                    }, this);
+
+                    // And mark the text area as updated.
+                    this.markUpdated();
+                }
+            } else {
+                // Call the browser unlink.
+                document.execCommand('unlink', false, null);
+
+                // And mark the text area as updated.
+                this.markUpdated();
+            }
+        }
     }
 });