MAGETWO-90441: Allow inline editing of Heading from stage

- remove redundancy in named methods

Author: anthoula

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/heading/preview.js

@@ -12,22 +12,22 @@
             <render args="template" />
         </with>
         <if args="data.main.heading_type() === 'h1'">
-            <h1 attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" afterRender="function (element) { onHeadingRender.call($data, element); }" data-bind="liveEdit: { field: 'heading_text', placeholder: $t('Edit Heading Text') }"></h1>
+            <h1 attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" afterRender="function (element) { onRender.call($data, element); }" data-bind="liveEdit: { field: 'heading_text', placeholder: $t('Edit Heading Text') }"></h1>
         </if>
         <if args="data.main.heading_type() === 'h2'">
-            <h2 attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" afterRender="function (element) { onHeadingRender.call($data, element); }" data-bind="liveEdit: { field: 'heading_text', placeholder: $t('Edit Heading Text') }"></h2>
+            <h2 attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" afterRender="function (element) { onRender.call($data, element); }" data-bind="liveEdit: { field: 'heading_text', placeholder: $t('Edit Heading Text') }"></h2>
         </if>
         <if args="data.main.heading_type() === 'h3'">
-            <h3 attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" afterRender="function (element) { onHeadingRender.call($data, element); }" data-bind="liveEdit: { field: 'heading_text', placeholder: $t('Edit Heading Text') }"></h3>
+            <h3 attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" afterRender="function (element) { onRender.call($data, element); }" data-bind="liveEdit: { field: 'heading_text', placeholder: $t('Edit Heading Text') }"></h3>
         </if>
         <if args="data.main.heading_type() === 'h4'">
-            <h4 attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" afterRender="function (element) { onHeadingRender.call($data, element); }" data-bind="liveEdit: { field: 'heading_text', placeholder: $t('Edit Heading Text') }"></h4>
+            <h4 attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" afterRender="function (element) { onRender.call($data, element); }" data-bind="liveEdit: { field: 'heading_text', placeholder: $t('Edit Heading Text') }"></h4>
         </if>
         <if args="data.main.heading_type() === 'h5'">
-            <h5 attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" afterRender="function (element) { onHeadingRender.call($data, element); }" data-bind="liveEdit: { field: 'heading_text', placeholder: $t('Edit Heading Text') }"></h5>
+            <h5 attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" afterRender="function (element) { onRender.call($data, element); }" data-bind="liveEdit: { field: 'heading_text', placeholder: $t('Edit Heading Text') }"></h5>
         </if>
         <if args="data.main.heading_type() === 'h6'">
-            <h6 attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" afterRender="function (element) { onHeadingRender.call($data, element); }" data-bind="liveEdit: { field: 'heading_text', placeholder: $t('Edit Heading Text') }"></h6>
+            <h6 attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" afterRender="function (element) { onRender.call($data, element); }" data-bind="liveEdit: { field: 'heading_text', placeholder: $t('Edit Heading Text') }"></h6>
         </if>
     </div>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/js/toolbar.js

@@ -32,16 +32,16 @@ export default class Heading extends BasePreview {
     ) {
         super(parent, config, observableUpdater);
 
-        this.onToolbarFocusIn = Toolbar.onToolbarFocusIn;
-        this.onToolbarFocusOut = Toolbar.onToolbarFocusOut;
+        this.onToolbarFocusIn = Toolbar.onFocusIn;
+        this.onToolbarFocusOut = Toolbar.onFocusOut;
     }
 
     /**
      * On render init the tabs widget
      *
      * @param {Element} element
      */
-    public onHeadingRender(element: Element) {
+    public onRender(element: Element) {
         this.element = element;
     }
 

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/heading/default/preview.html

@@ -14,7 +14,7 @@ export default {
      * @param {Preview} context
      * @param {Event} event
      */
-    onToolbarFocusIn(context: Preview, event: Event): void {
+    onFocusIn(context: Preview, event: Event): void {
         const currentContentTypeTarget = event.currentTarget.closest(".pagebuilder-content-type");
         $(currentContentTypeTarget).addClass("pagebuilder-toolbar-active");
         events.trigger("interaction:start");
@@ -26,7 +26,7 @@ export default {
      * @param {Preview} context
      * @param {Event} event
      */
-    onToolbarFocusOut(context: Preview, event: Event): void {
+    onFocusOut(context: Preview, event: Event): void {
         const currentContentTypeTarget = event.currentTarget.closest(".pagebuilder-content-type");
         $(currentContentTypeTarget).removeClass("pagebuilder-toolbar-active");
         events.trigger("interaction:stop");