MC-3902: Add line height option to TinyMCE

 - add Line Height option to TinyMCE toolbar

Author: cspruiell

app/code/Magento/PageBuilder/Model/Wysiwyg/DefaultConfigProvider.php

@@ -38,7 +38,7 @@ public function getConfig(\Magento\Framework\DataObject $config): \Magento\Frame
     {
         $config->addData([
             'tinymce4' => [
-                'toolbar' => 'undo redo | styleselect | fontsizeselect | forecolor backcolor | bold italic underline' .
+                'toolbar' => 'undo redo | styleselect | fontsizeselect | lineheightselect | forecolor backcolor | bold italic underline' .
                     ' | alignleft aligncenter alignright | numlist bullist | link image table charmap',
 
                 'plugins' => implode(
@@ -59,7 +59,8 @@ public function getConfig(\Magento\Framework\DataObject $config): \Magento\Frame
                         'table',
                         'textcolor',
                         'image',
-                        'colorpicker'
+                        'colorpicker',
+                        'lineheight'
                     ]
                 ),
                 'content_css' => [

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTextSection.xml

@@ -112,6 +112,7 @@
         <element name="undo" type="button" selector="div[aria-label='Undo']"/>
         <element name="redo" type="button" selector="div[aria-label='Redo']"/>
         <element name="fontSize" type="button" selector="div[aria-label='Font Sizes']"/>
+        <element name="lineHeight" type="button" selector="div[aria-label='Line Height']"/>
         <element name="textColor" type="button" selector="div[aria-label='Text color']"/>
         <element name="backgroundColor" type="button" selector="div[aria-label='Background color']"/>
         <element name="formatSelector" type="button" selector="//span[text()='Formats']"/>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderTextTest.xml

@@ -810,6 +810,7 @@
         <seeElement selector="{{WYSIWYGOnPageBuilder.undo}}" stepKey="seeUndo"/>
         <seeElement selector="{{WYSIWYGOnPageBuilder.redo}}" stepKey="seeRedo"/>
         <seeElement selector="{{WYSIWYGOnPageBuilder.fontSize}}" stepKey="seeFontsize"/>
+        <seeElement selector="{{WYSIWYGOnPageBuilder.lineHeight}}" stepKey="seeLineHeight"/>
         <seeElement selector="{{WYSIWYGOnPageBuilder.textColor}}" stepKey="seeTextColor"/>
         <seeElement selector="{{WYSIWYGOnPageBuilder.backgroundColor}}" stepKey="seeBackgroundColor"/>
         <!--Verify FontSize-->
@@ -835,6 +836,29 @@
         <see userInput="56px" stepKey="see56px" />
         <see userInput="64px" stepKey="see64px" />
         <see userInput="72px" stepKey="see72px" />
+        <!--Verify LineHeight-->
+        <comment userInput="Verify LineHeight" stepKey="commentVerifyLineHeight"/>
+        <click selector="{{WYSIWYGOnPageBuilder.lineHeight}}" stepKey="clickOnLineHeight"/>
+        <see userInput="10px" stepKey="seeLineHeight10px" />
+        <see userInput="12px" stepKey="seeLineHeight12px" />
+        <see userInput="14px" stepKey="seeLineHeight14px" />
+        <see userInput="16px" stepKey="seeLineHeight16px" />
+        <see userInput="18px" stepKey="seeLineHeight18px" />
+        <see userInput="20px" stepKey="seeLineHeight20px" />
+        <see userInput="24px" stepKey="seeLineHeight24px" />
+        <see userInput="26px" stepKey="seeLineHeight26px" />
+        <see userInput="28px" stepKey="seeLineHeight28px" />
+        <see userInput="32px" stepKey="seeLineHeight32px" />
+        <see userInput="34px" stepKey="seeLineHeight34px" />
+        <see userInput="36px" stepKey="seeLineHeight36px" />
+        <see userInput="38px" stepKey="seeLineHeight38px" />
+        <see userInput="40px" stepKey="seeLineHeight40px" />
+        <see userInput="42px" stepKey="seeLineHeight42px" />
+        <see userInput="48px" stepKey="seeLineHeight48px" />
+        <see userInput="52px" stepKey="seeLineHeight52px" />
+        <see userInput="56px" stepKey="seeLineHeight56px" />
+        <see userInput="64px" stepKey="seeLineHeight64px" />
+        <see userInput="72px" stepKey="seeLineHeight72px" />
         <!--Verify FontStyle on preview-->
         <comment userInput="Verify FontStyle on preview" stepKey="commentVerifyFontsizeOnPreview"/>
         <click selector="{{TextOnStage.tinymce('1')}}" stepKey="focusOnEditorArea"/>

app/code/Magento/PageBuilder/etc/adminhtml/di.xml

@@ -54,6 +54,7 @@
             <argument name="additionalSettings" xsi:type="array">
                 <item name="fixed_toolbar_container" xsi:type="string">.pagebuilder-content-type</item>
                 <item name="fontsize_formats" xsi:type="string">10px 12px 14px 16px 18px 20px 24px 26px 28px 32px 34px 36px 38px 40px 42px 48px 52px 56px 64px 72px</item>
+                <item name="lineheight_formats" xsi:type="string">10px 12px 14px 16px 18px 20px 24px 26px 28px 32px 34px 36px 38px 40px 42px 48px 52px 56px 64px 72px</item>
                 <item name="style_formats" xsi:type="array">
                     <item name="paragraph" xsi:type="array">
                         <item name="title" xsi:type="string">Paragraph</item>