MDL-68542 editor-atto: Change the bold tag to <strong>.

lib/editor/atto/plugins/bold/tests/behat/bold.feature

@@ -15,7 +15,7 @@ Feature: Atto bold button
     And I set the field "Text editor" to "Plain text area"
     And I press "Save changes"
     And I click on "Edit profile" "link" in the "region-main" "region"
-    Then I should see "<b>Badger</b>"
+    Then I should see "<strong>Badger</strong>"
 
   @javascript
   Scenario: Unbold some text
@@ -31,5 +31,5 @@ Feature: Atto bold button
     And I set the field "Text editor" to "Plain text area"
     And I press "Save changes"
     And I click on "Edit profile" "link" in the "region-main" "region"
-    Then I should not see "<b>Mouse</b>"
+    Then I should not see "<strong>Mouse</strong>"
     And I should see "Mouse"

lib/editor/atto/plugins/bold/yui/build/moodle-atto_bold-button/moodle-atto_bold-button-debug.js

@@ -35,15 +35,36 @@ YUI.add('moodle-atto_bold-button', function (Y, NAME) {
 
 Y.namespace('M.atto_bold').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
     initializer: function() {
-        this.addBasicButton({
+        var bold;
-            exec: 'bold',
+
+        this.addButton({
+            callback: this._toggleBold,
+            icon: 'e/bold',
+            buttonName: bold,
+            inlineFormat: true,
 
             // Key code for the keyboard shortcut which triggers this button:
             keys: '66',
 
             // Watch the following tags and add/remove highlighting as appropriate:
-            tags: 'b, strong'
+            tags: 'strong, b'
         });
+    },
+    /**
+     * Toggle the bold setting.
+     *
+     * @method _toggleBold
+     * @param {EventFacade} e
+     */
+    _toggleBold: function() {
+        var host = this.get('host');
+
+        // Use the "bold" command for simplicity. This will toggle <strong> tags off as well.
+        document.execCommand('bold', false, null);
+
+        // Then change all <b> tags to <strong> tags. This will change any existing <b> tags as well.
+        host.changeToCSS('b', 'bf-editor-bold-strong');
+        host.changeToTags('bf-editor-bold-strong', 'strong');
     }
 });
 

lib/editor/atto/plugins/bold/yui/build/moodle-atto_bold-button/moodle-atto_bold-button-min.js

@@ -1 +1 @@
-YUI.add("moodle-atto_bold-button",function(e,t){e.namespace("M.atto_bold").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){this.addBasicButton({exec:"bold",keys:"66",tags:"b, strong"})}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});
+YUI.add("moodle-atto_bold-button",function(e,t){e.namespace("M.atto_bold").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var e;this.addButton({callback:this._toggleBold,icon:"e/bold",buttonName:e,inlineFormat:!0,keys:"66",tags:"strong, b"})},_toggleBold:function(){var e=this.get("host");document.execCommand("bold",!1,null),e.changeToCSS("b","bf-editor-bold-strong"),e.changeToTags("bf-editor-bold-strong","strong")}})},"@VERSION@",{requires:["moodle-editor_atto-plugin"]});

lib/editor/atto/plugins/bold/yui/build/moodle-atto_bold-button/moodle-atto_bold-button.js

@@ -35,15 +35,36 @@ YUI.add('moodle-atto_bold-button', function (Y, NAME) {
 
 Y.namespace('M.atto_bold').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
     initializer: function() {
-        this.addBasicButton({
+        var bold;
-            exec: 'bold',
+
+        this.addButton({
+            callback: this._toggleBold,
+            icon: 'e/bold',
+            buttonName: bold,
+            inlineFormat: true,
 
             // Key code for the keyboard shortcut which triggers this button:
             keys: '66',
 
             // Watch the following tags and add/remove highlighting as appropriate:
-            tags: 'b, strong'
+            tags: 'strong, b'
         });
+    },
+    /**
+     * Toggle the bold setting.
+     *
+     * @method _toggleBold
+     * @param {EventFacade} e
+     */
+    _toggleBold: function() {
+        var host = this.get('host');
+
+        // Use the "bold" command for simplicity. This will toggle <strong> tags off as well.
+        document.execCommand('bold', false, null);
+
+        // Then change all <b> tags to <strong> tags. This will change any existing <b> tags as well.
+        host.changeToCSS('b', 'bf-editor-bold-strong');
+        host.changeToTags('bf-editor-bold-strong', 'strong');
     }
 });
 

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

@@ -33,14 +33,35 @@
 
 Y.namespace('M.atto_bold').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
     initializer: function() {
-        this.addBasicButton({
+        var bold;
-            exec: 'bold',
+
+        this.addButton({
+            callback: this._toggleBold,
+            icon: 'e/bold',
+            buttonName: bold,
+            inlineFormat: true,
 
             // Key code for the keyboard shortcut which triggers this button:
             keys: '66',
 
             // Watch the following tags and add/remove highlighting as appropriate:
-            tags: 'b, strong'
+            tags: 'strong, b'
         });
+    },
+    /**
+     * Toggle the bold setting.
+     *
+     * @method _toggleBold
+     * @param {EventFacade} e
+     */
+    _toggleBold: function() {
+        var host = this.get('host');
+
+        // Use the "bold" command for simplicity. This will toggle <strong> tags off as well.
+        document.execCommand('bold', false, null);
+
+        // Then change all <b> tags to <strong> tags. This will change any existing <b> tags as well.
+        host.changeToCSS('b', 'bf-editor-bold-strong');
+        host.changeToTags('bf-editor-bold-strong', 'strong');
     }
 });

lib/editor/atto/tests/behat/customtoolbar.feature

@@ -20,7 +20,7 @@ Feature: Atto editor with customised toolbar
   Scenario: Confirm that both editors have different toolbars but still function
     Then ".atto_link_button" "css_element" should exist in the ".normaldiv" "css_element"
     And ".atto_link_button" "css_element" should not exist in the ".specialdiv" "css_element"
-    And ".atto_bold_button_bold" "css_element" should exist in the ".normaldiv" "css_element"
+    And ".atto_bold_button" "css_element" should exist in the ".normaldiv" "css_element"
     And ".atto_italic_button_italic" "css_element" should exist in the ".normaldiv" "css_element"
-    And ".atto_bold_button_bold" "css_element" should exist in the ".specialdiv" "css_element"
+    And ".atto_bold_button" "css_element" should exist in the ".specialdiv" "css_element"
     And ".atto_italic_button_italic" "css_element" should exist in the ".specialdiv" "css_element"

lib/editor/atto/tests/behat/disablecontrol.feature

@@ -21,7 +21,7 @@ Feature: Atto with enable/disable function.
     When I set the field "mycontrol" to "Disable"
     Then the "disabled" attribute of "button.atto_collapse_button" "css_element" should contain "disabled"
     And the "disabled" attribute of "button.atto_title_button" "css_element" should contain "disabled"
-    And the "disabled" attribute of "button.atto_bold_button_bold" "css_element" should contain "disabled"
+    And the "disabled" attribute of "button.atto_bold_button" "css_element" should contain "disabled"
     And the "disabled" attribute of "button.atto_italic_button_italic" "css_element" should contain "disabled"
     And the "disabled" attribute of "button.atto_unorderedlist_button_insertUnorderedList" "css_element" should contain "disabled"
     And the "disabled" attribute of "button.atto_orderedlist_button_insertOrderedList" "css_element" should contain "disabled"
@@ -35,7 +35,7 @@ Feature: Atto with enable/disable function.
     When I set the field "mycontrol" to "Enable"
     Then "button.atto_collapse_button[disabled]" "css_element" should not exist
     And "button.atto_title_button[disabled]" "css_element" should not exist
-    And "button.atto_bold_button_bold[disabled]" "css_element" should not exist
+    And "button.atto_bold_button[disabled]" "css_element" should not exist
     And "button.atto_italic_button_italic[disabled]" "css_element" should not exist
     And "button.atto_unorderedlist_button_insertUnorderedList[disabled]" "css_element" should not exist
     And "button.atto_orderedlist_button_insertOrderedList[disabled]" "css_element" should not exist