997757: Need to provide documentation for the line height feature

Author: yaswinVikhaash-sf4272

ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/controller.cs

@@ -5,33 +5,48 @@ public ActionResult Index()
         ViewBag.value = @"<p>The Rich Text Editor allows users to apply line-height (line-spacing) to elements like paragraphs, lists, headings, and table cells. You can set line height using a dedicated dropdown in the toolbar, and it is applied as inline style to the selected blocks. This feature makes text easier to read and gives better control over content layout.</p><p><b> Key features:</b></p> <ul> <li><p>Provides a <b>Line Height</b> dropdown in the toolbar for easy access.</p></li><li><p>Supports applying line-height to paragraphs, headings, lists, and table cells.</p></li><li><p>Applies line-height as inline styles for consistent and precise text rendering.</p></li><li><p>Ensures consistent appearance across devices and print layouts.</p></li><li><p>Improves text readability and overall document aesthetics.</p></li></ul>";
         object size1 = new
         {
-            text = "8 px",
-            value = "8px"
+            text = "1",
+            value = "1"
         };
         object size2 = new
         {
-            text = "10 px",
-            value = "10px"
+            text = "1.15",
+            value = "1.15"
         };
         object size3 = new
         {
-            text = "12 px",
-            value = "12px"
+            text = "1.5",
+            value = "1.5"
         };
         object size4 = new
         {
-            text = "14 px",
-            value = "14px"
+            text = "2",
+            value = "2"
         };
         object size5 = new
         {
-            text = "42 px",
-            value = "42px"
+            text = "2.5",
+            value = "2.5"
         };
-
+        object size6 = new
+        {
+            text = "3",
+            value = "3"
+        };
+        object size6 = new
+        {
+            text = "3.5",
+            value = "3.5"
+        };
+        object size7 = new
+        {
+            text = "4",
+            value = "4"
+        };
+ 
         ViewBag.items = new[] { "LineHeight" };
         ViewBag.LineHeightItems = new[] { size1, size2, size3, size4, size5 };
         return View();
     }
-
+ 
 }

ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/razor

@@ -1 +1 @@
-@Html.EJS().RichTextEditor("custom-line-height").ToolbarSettings(e => e.Items((object)ViewBag.items)).LineHeight(t => t.Default("10px").SupportAllValues(true).Items(ViewBag.LineHeightItems)).Value(ViewBag.value).Render()
+@Html.EJS().RichTextEditor("custom-line-height").ToolbarSettings(e => e.Items((object)ViewBag.items)).LineHeight(t => t.Default("2").SupportAllValues(true).Items(ViewBag.LineHeightItems)).Value(ViewBag.value).Render()

ej2-asp-core-mvc/code-snippet/rich-text-editor/line-height-cs1/tagHelper

@@ -1,5 +1,5 @@
 <ejs-richtexteditor id="custom-line-height" value="@ViewBag.value">
-    <e-richtexteditor-lineheight default="10 px" items="@ViewBag.LineHeightItems" supportAllValues="true">
+    <e-richtexteditor-lineheight default="2" items="@ViewBag.LineHeightItems" supportAllValues="true">
     </e-richtexteditor-lineheight>
     <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
 </ejs-richtexteditor>

ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md

@@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Text Formatting in the ##Platform_Name## Rich Text Editor Control
+# Text Formatting in the ASP.NET Core Rich Text Editor Control
 
 ## Basic text styling
 
@@ -463,6 +463,68 @@ While the toolbar does not provide a direct method to apply blockquote formattin
 {% endtabs %}
 {% endif %}
 
+## Line Height
+ 
+The Rich Text Editor supports line height feature which allows users to adjust the vertical spacing between lines of text. To change the line height, select the text you want to modify and click the Line Height icon in the toolbar. Choose from the available spacing options to apply the desired vertical spacing. This feature is especially useful for creating visually appealing paragraphs and ensuring consistent formatting across your document.
+ 
+### Built-in line height
+ 
+You can add the `LineHeight` tool to the toolbar in the Rich Text Editor using [toolbarSettings.items](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#items) property.
+ 
+{% if page.publishingplatform == "aspnet-core" %}
+ 
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/line-height/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/line-height/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+ 
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+ 
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/line-height/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/line-height/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+ 
+The Rich Text Editor comes with a pre-configured set of [`lineHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#lineheight) property.
+ 
+### Custom line height
+ 
+The Rich Text Editor supports custom line height along with the existing line height dropdown list. To add additional line height to the line height dropdown, you can configure the items field of the [`lineHeight`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#lineheight) property. This allows you to extend the available line height options beyond the default selection.
+ 
+The [`supportAllValues`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#supportAllValues) setting enables the line height dropdown to display and retain line-height values that are not part of the predefined options. When `supportAllValues` property is turned on, the dropdown will show the current line-height value from the selection, even if that value is not present in the configured lineHeights array. By default, `supportAllValues` will be set to false.
+ 
+{% if page.publishingplatform == "aspnet-core" %}
+ 
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/line-height-cs1/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+ 
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+ 
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/rich-text-editor/line-height-cs1/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Controller.cs" %}
+{% include code-snippet/rich-text-editor/line-height-cs1/controller.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
 ## Horizontal line
 
 The Rich Text Editor enables users to insert horizontal dividers using the `HorizontalLine` tool available in the toolbar. Horizontal lines (<hr>) help visually separate sections of content, enhancing readability and structural clarity.