@syncfusion/ej2-angular-documenteditor 23.1.44 → 23.2.4

package/styles/document-editor/material-dark.css

@@ -813,6 +813,14 @@
   padding-right: 20px;
 }
 
+.e-de-para-tab {
+  float: left;
+}
+
+.e-de-para-tab.e-rtl {
+  float: right;
+}
+
 .e-de-column-label.e-de-rtl {
   font-size: 12px;
   font-weight: normal;

package/styles/document-editor/material.css

@@ -813,6 +813,14 @@
   padding-right: 20px;
 }
 
+.e-de-para-tab {
+  float: left;
+}
+
+.e-de-para-tab.e-rtl {
+  float: right;
+}
+
 .e-de-column-label.e-de-rtl {
   font-size: 12px;
   font-weight: normal;

package/styles/document-editor/material3-dark.css

@@ -910,6 +910,14 @@
   padding-right: 20px;
 }
 
+.e-de-para-tab {
+  float: left;
+}
+
+.e-de-para-tab.e-rtl {
+  float: right;
+}
+
 .e-de-column-label.e-de-rtl {
   font-size: 13;
   font-weight: 500;

package/styles/document-editor/material3.css

@@ -966,6 +966,14 @@
   padding-right: 20px;
 }
 
+.e-de-para-tab {
+  float: left;
+}
+
+.e-de-para-tab.e-rtl {
+  float: right;
+}
+
 .e-de-column-label.e-de-rtl {
   font-size: 13;
   font-weight: 500;

package/styles/document-editor/tailwind-dark.css

@@ -855,6 +855,14 @@
   padding-right: 20px;
 }
 
+.e-de-para-tab {
+  float: left;
+}
+
+.e-de-para-tab.e-rtl {
+  float: right;
+}
+
 .e-de-column-label.e-de-rtl {
   font-size: 12px;
   font-weight: 500;

package/styles/document-editor/tailwind.css

@@ -858,6 +858,14 @@
   padding-right: 20px;
 }
 
+.e-de-para-tab {
+  float: left;
+}
+
+.e-de-para-tab.e-rtl {
+  float: right;
+}
+
 .e-de-column-label.e-de-rtl {
   font-size: 12px;
   font-weight: 500;

package/styles/document-editor-container/_bootstrap-dark-definition.scss

@@ -27,6 +27,14 @@ $e-de-ctnr-break-listview-margin-right-big: 16px !default;
 $e-de-ctnr-break-listview-margin-left: 12px !default;
 $e-de-ctnr-break-listview-margin-left-big: 16px !default;
 $de-tlbr-btn-height: calc(100% - 10px) !default;
+$de-ruler-background-color: $gray-darker !default;
+$de-ruler-margin-color: $grey-44 !default;
+$de-ruler-tick-stroke: $grey-f9 !default;
+$de-ruler-label-fill: $grey-light-font !default;
+$de-ruler-indent-stroke: $grey-cc !default;
+$de-ruler-indent-fill: $grey-44 !default;
+$de-ruler-indent-hover: $gray-darker !default;
+$de-ruler-indent-active: $brand-primary !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 115px) !default;

package/styles/document-editor-container/_bootstrap-definition.scss

@@ -28,6 +28,14 @@ $e-de-ctnr-break-listview-margin-right-big: 16px !default;
 $e-de-ctnr-break-listview-margin-left: 12px !default;
 $e-de-ctnr-break-listview-margin-left-big: 16px !default;
 $de-tlbr-btn-height: calc(100% - 10px) !default;
+$de-ruler-background-color: $grey-f8 !default;
+$de-ruler-margin-color: $grey-white !default;
+$de-ruler-tick-stroke: $grey-8c !default;
+$de-ruler-label-fill: $grey-light-font !default;
+$de-ruler-indent-stroke: $gray-light !default;
+$de-ruler-indent-fill:  $grey-white !default;
+$de-ruler-indent-hover: $grey-e6 !default;
+$de-ruler-indent-active: $brand-primary !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 115px) !default;

package/styles/document-editor-container/_bootstrap4-definition.scss

@@ -28,6 +28,14 @@ $e-de-ctnr-break-listview-margin-right-big: 16px !default;
 $e-de-ctnr-break-listview-margin-left: 14px !default;
 $e-de-ctnr-break-listview-margin-left-big: 16px !default;
 $de-tlbr-btn-height: calc(100% - 10px) !default;
+$de-ruler-background-color: $gray-200 !default;
+$de-ruler-margin-color: $white !default;
+$de-ruler-tick-stroke: $gray-500 !default;
+$de-ruler-label-fill: $gray-700 !default;
+$de-ruler-indent-stroke: $gray-600 !default;
+$de-ruler-indent-fill: $white !default;
+$de-ruler-indent-hover: $gray-200 !default;
+$de-ruler-indent-active: $primary !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 115px) !default;

package/styles/document-editor-container/_bootstrap5-definition.scss

@@ -23,6 +23,14 @@ $e-de-ctnr-break-listview-margin-right-big: 16px !default;
 $e-de-ctnr-break-listview-margin-left: 12px !default;
 $e-de-ctnr-break-listview-margin-left-big: 16px !default;
 $de-tlbr-btn-height: calc(100% - 10px) !default;
+$de-ruler-background-color: $content-bg-color-alt2 !default;
+$de-ruler-margin-color: $content-bg-color !default;
+$de-ruler-tick-stroke: $border-dark !default;
+$de-ruler-label-fill: $content-text-color-alt1 !default;
+$de-ruler-indent-stroke: $icon-color !default;
+$de-ruler-indent-fill: $content-bg-color !default;
+$de-ruler-indent-hover: $content-bg-color-alt2 !default;
+$de-ruler-indent-active: $primary !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 115px) !default;

package/styles/document-editor-container/_fabric-dark-definition.scss

@@ -28,6 +28,14 @@ $e-de-ctnr-break-listview-margin-right-big: 16px !default;
 $e-de-ctnr-break-listview-margin-left: 12px !default;
 $e-de-ctnr-break-listview-margin-left-big: 16px !default;
 $de-tlbr-btn-height: calc(100% - 10px) !default;
+$de-ruler-background-color: $neutral-white !default;
+$de-ruler-margin-color: $neutral-lighter !default;
+$de-ruler-tick-stroke: $neutral-tertiary !default;
+$de-ruler-label-fill: $neutral-secondary !default;
+$de-ruler-indent-stroke: $neutral-secondary !default;
+$de-ruler-indent-fill:  $neutral-lighter !default;
+$de-ruler-indent-hover:  $neutral-white !default;
+$de-ruler-indent-active: $theme-primary !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 120px) !default;

package/styles/document-editor-container/_fabric-definition.scss

@@ -28,6 +28,14 @@ $e-de-ctnr-break-listview-margin-right-big: 16px !default;
 $e-de-ctnr-break-listview-margin-left: 12px !default;
 $e-de-ctnr-break-listview-margin-left-big: 16px !default;
 $de-tlbr-btn-height: calc(100% - 10px) !default;
+$de-ruler-background-color: $neutral-lighter !default;
+$de-ruler-margin-color: $neutral-white !default;
+$de-ruler-tick-stroke: $neutral-quintenary !default;
+$de-ruler-label-fill: $neutral-primary !default;
+$de-ruler-indent-stroke: $neutral-secondary !default;
+$de-ruler-indent-fill:  $neutral-white !default;
+$de-ruler-indent-hover: $neutral-lighter !default;
+$de-ruler-indent-active: $theme-primary !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 121px) !default;

package/styles/document-editor-container/_fluent-definition.scss

@@ -23,6 +23,14 @@ $e-de-ctnr-break-listview-margin-right-big: 20px !default;
 $e-de-ctnr-break-listview-margin-left: 16px !default;
 $e-de-ctnr-break-listview-margin-left-big: 20px !default;
 $de-tlbr-btn-height: calc(100% - 10px) !default;
+$de-ruler-background-color: $content-bg-color-alt4 !default;
+$de-ruler-margin-color: $content-bg-color !default;
+$de-ruler-tick-stroke: $icon-color !default;
+$de-ruler-label-fill: $content-text-color-alt1 !default;
+$de-ruler-indent-stroke: $icon-color !default;
+$de-ruler-indent-fill: $content-bg-color !default;
+$de-ruler-indent-hover: $content-bg-color-alt4 !default;
+$de-ruler-indent-active: $primary !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 115px) !default;

package/styles/document-editor-container/_fusionnew-definition.scss

@@ -23,6 +23,14 @@ $e-de-ctnr-break-listview-margin-right-big: 16px !default;
 $e-de-ctnr-break-listview-margin-left: 12px !default;
 $e-de-ctnr-break-listview-margin-left-big: 16px !default;
 $de-tlbr-btn-height: calc(100% - 10px) !default;
+$de-ruler-background-color: $content-bg-color-alt4 !default;
+$de-ruler-margin-color: $content-bg-color !default;
+$de-ruler-tick-stroke: $icon-color !default;
+$de-ruler-label-fill: $content-text-color-alt1 !default;
+$de-ruler-indent-stroke: $icon-color !default;
+$de-ruler-indent-fill: $content-bg-color !default;
+$de-ruler-indent-hover: $content-bg-color-alt4 !default;
+$de-ruler-indent-active: $primary !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 115px) !default;

package/styles/document-editor-container/_highcontrast-definition.scss

@@ -28,6 +28,14 @@ $e-de-ctnr-break-listview-margin-right-big: 16px !default;
 $e-de-ctnr-break-listview-margin-left: 12px !default;
 $e-de-ctnr-break-listview-margin-left-big: 16px !default;
 $de-tlbr-btn-height: calc(100% - 10px) !default;
+$de-ruler-background-color: $bg-base-0 !default;
+$de-ruler-margin-color: $bg-base-0 !default;
+$de-ruler-tick-stroke: $border-fg !default;
+$de-ruler-label-fill: $content-font !default;
+$de-ruler-indent-stroke: $border-fg !default;
+$de-ruler-indent-fill:  $bg-base-0 !default;
+$de-ruler-indent-hover: $border-fg !default;
+$de-ruler-indent-active: $selection-bg !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 118px) !default;

package/styles/document-editor-container/_highcontrast-light-definition.scss

@@ -28,6 +28,14 @@ $e-de-ctnr-break-listview-margin-right-big: 16px !default;
 $e-de-ctnr-break-listview-margin-left: 12px !default;
 $e-de-ctnr-break-listview-margin-left-big: 16px !default;
 $de-tlbr-btn-height: calc(100% - 10px) !default;
+$de-ruler-background-color: $bg-base-0 !default;
+$de-ruler-margin-color: $bg-base-0 !default;
+$de-ruler-tick-stroke: $border-fg !default;
+$de-ruler-label-fill: $content-font !default;
+$de-ruler-indent-stroke: $border-fg !default;
+$de-ruler-indent-fill:  $bg-base-0 !default;
+$de-ruler-indent-hover: $border-fg !default;
+$de-ruler-indent-active: $selection-bg !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 113px) !default;

package/styles/document-editor-container/_material-dark-definition.scss

@@ -26,6 +26,14 @@ $e-de-ctnr-break-listview-margin-right-big: $e-de-ctnr-break-listview-margin-rig
 $e-de-ctnr-break-listview-margin-left: 12px !default;
 $e-de-ctnr-break-listview-margin-left-big: $e-de-ctnr-break-listview-margin-left !default;
 $de-tlbr-btn-height: calc(100% - 10px) !default;
+$de-ruler-background-color: $grey-900 !default;
+$de-ruler-margin-color: $grey-800 !default;
+$de-ruler-tick-stroke: $grey-500 !default;
+$de-ruler-label-fill: $grey-dark-font !default;
+$de-ruler-indent-stroke: $grey-200 !default;
+$de-ruler-indent-fill: $grey-800 !default;
+$de-ruler-indent-hover: $grey-900 !default;
+$de-ruler-indent-active: $primary !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 115px) !default;

package/styles/document-editor-container/_material-definition.scss

@@ -26,6 +26,14 @@ $e-de-ctnr-break-listview-margin-right-big: $e-de-ctnr-break-listview-margin-rig
 $e-de-ctnr-break-listview-margin-left: 12px !default;
 $e-de-ctnr-break-listview-margin-left-big: $e-de-ctnr-break-listview-margin-left !default;
 $de-tlbr-btn-height: calc(100% - 10px) !default;
+$de-ruler-background-color: $grey-100 !default;
+$de-ruler-margin-color: $grey-white !default;
+$de-ruler-tick-stroke: $grey-400 !default;
+$de-ruler-label-fill: rgba($grey-black, .54) !default;
+$de-ruler-indent-stroke: $grey-600 !default;
+$de-ruler-indent-fill: $grey-white !default;
+$de-ruler-indent-hover: $grey-200 !default;
+$de-ruler-indent-active: $primary !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 115px) !default;

package/styles/document-editor-container/_material3-definition.scss

@@ -148,6 +148,14 @@ $de-toggle-disabled-color: $secondary-bg-color !default;
 $de-background-color: $content-bg-color-alt3 !default;
 $de-toolbar-background-color: $content-bg-color-alt2 !default;
 $de-pane-background-color: $content-bg-color-alt1 !default;
+$de-ruler-background-color: $content-bg-color-alt3 !default;
+$de-ruler-margin-color: rgba($content-bg-color) !default;
+$de-ruler-tick-stroke: rgba($icon-color) !default;
+$de-ruler-label-fill: rgba($content-text-color-alt1) !default;
+$de-ruler-indent-stroke: rgba($icon-color) !default;
+$de-ruler-indent-fill:  rgba($content-bg-color) !default;
+$de-ruler-indent-hover: $content-bg-color-alt5 !default;
+$de-ruler-indent-active: rgba($primary) !default;
 
 //Blazor
 $e-de-bzr-button-border-color: rgba($white) !default;

package/styles/document-editor-container/_tailwind-definition.scss

@@ -23,6 +23,14 @@ $e-de-ctnr-break-listview-margin-right-big: 16px !default;
 $e-de-ctnr-break-listview-margin-left: 10px !default;
 $e-de-ctnr-break-listview-margin-left-big: 16px !default;
 $de-tlbr-btn-height: calc(100% - 10px) !default;
+$de-ruler-background-color: $content-bg-color-alt2 !default;
+$de-ruler-margin-color: $content-bg-color !default;
+$de-ruler-tick-stroke: $icon-color !default;
+$de-ruler-label-fill: $content-text-color-alt1 !default;
+$de-ruler-indent-stroke: $icon-color !default;
+$de-ruler-indent-fill: $content-bg-color !default;
+$de-ruler-indent-hover: $content-bg-color-alt3 !default;
+$de-ruler-indent-active: $primary !default;
 
 // Subtract toolbar & statusbar height
 $de-tool-ctnr-editor-height: calc(100% - 115px) !default;

package/styles/document-editor-container/_theme.scss

@@ -1587,6 +1587,62 @@
             }
         }
     }
+    .e-de-hRuler {
+        background-color: $de-ruler-background-color;
+        @if $skin-name =='Material3' {
+            background: $de-ruler-background-color;
+        }
+        border-bottom: 0.5px solid $de-panel-border;
+    }
+    .e-de-vRuler {
+        background-color: $de-ruler-background-color;
+        @if $skin-name =='Material3' {
+            background: $de-ruler-background-color;
+        }
+        border-right: 0.5px solid $de-panel-border;
+    }
+    .e-de-ruler-margin {
+        background-color: $de-ruler-margin-color;
+        @if $skin-name =='Material3' {
+            background: $de-ruler-margin-color;
+        }
+    }
+    .e-de-ruler-tick {
+        stroke: $de-ruler-tick-stroke;
+    }
+    .e-de-ruler-tick-label {
+        fill: $de-ruler-label-fill
+    }
+    .e-de-ruler-markIndicator {
+        background-color: $de-ruler-margin-color;
+    }
+    .e-de-ruler-marker .e-de-ruler-tab-svg {
+        fill: $de-ruler-tick-stroke;
+    }
+   .e-de-ruler-marker .e-de-ruler-indent-svg {
+        fill: $de-ruler-tick-stroke;
+    }
+    .e-de-ruler-indent .e-de-ruler-indent-svg {
+        fill: $de-ruler-indent-fill;
+        stroke: $de-ruler-indent-stroke;
+    }
+    .e-de-ruler-indent .e-de-ruler-indent-svg:hover {
+        fill: $de-ruler-indent-hover;
+        stroke:  $de-ruler-indent-stroke;
+    }
+    .e-de-ruler-indent .e-de-ruler-indent-svg:active {
+        fill: $de-ruler-indent-active;
+        stroke:  $de-ruler-indent-stroke;
+    }
+    .e-de-ruler-table-svg {
+        fill: $de-ruler-indent-stroke;
+    }
+    .e-de-ruler-table-svg:hover {
+        fill: $de-ruler-indent-hover;
+    }
+    .e-de-ruler-table-svg:active {
+        fill: $de-ruler-indent-active;
+    }
     .e-rtl {
         .e-listview .e-list-icon {
             height: 24px;
@@ -1599,6 +1655,11 @@
             line-height: 22px;
             margin-left: $e-de-ctnr-break-listview-margin-left;
         }
+        .e-de-vRuler {
+            background-color: $de-ruler-background-color;
+            border-right: none;
+            border-left: 0.5px solid $de-panel-border;
+        }
     }
     .e-bigger {
         @if $skin-name =='tailwind' or $skin-name =='bootstrap5' or $skin-name =='FluentUI' or $skin-name =='bootstrap4' {

package/styles/document-editor-container/bootstrap-dark.css

@@ -1497,6 +1497,67 @@
   width: 70px;
 }
 
+.e-de-hRuler {
+  background-color: #131313;
+  border-bottom: 0.5px solid #505050;
+}
+
+.e-de-vRuler {
+  background-color: #131313;
+  border-right: 0.5px solid #505050;
+}
+
+.e-de-ruler-margin {
+  background-color: #414141;
+}
+
+.e-de-ruler-tick {
+  stroke: #7e7e7e;
+}
+
+.e-de-ruler-tick-label {
+  fill: #fff;
+}
+
+.e-de-ruler-markIndicator {
+  background-color: #414141;
+}
+
+.e-de-ruler-marker .e-de-ruler-tab-svg {
+  fill: #7e7e7e;
+}
+
+.e-de-ruler-marker .e-de-ruler-indent-svg {
+  fill: #7e7e7e;
+}
+
+.e-de-ruler-indent .e-de-ruler-indent-svg {
+  fill: #414141;
+  stroke: #acacac;
+}
+
+.e-de-ruler-indent .e-de-ruler-indent-svg:hover {
+  fill: #131313;
+  stroke: #acacac;
+}
+
+.e-de-ruler-indent .e-de-ruler-indent-svg:active {
+  fill: #0070f0;
+  stroke: #acacac;
+}
+
+.e-de-ruler-table-svg {
+  fill: #acacac;
+}
+
+.e-de-ruler-table-svg:hover {
+  fill: #131313;
+}
+
+.e-de-ruler-table-svg:active {
+  fill: #0070f0;
+}
+
 .e-rtl .e-listview .e-list-icon {
   height: 24px;
   width: 16px;
@@ -1508,6 +1569,11 @@
   line-height: 22px;
   margin-left: 12px;
 }
+.e-rtl .e-de-vRuler {
+  background-color: #131313;
+  border-right: none;
+  border-left: 0.5px solid #505050;
+}
 
 .e-bigger .de-split-button > div:first-child {
   margin-right: 16px;

package/styles/document-editor-container/bootstrap.css

@@ -1499,6 +1499,67 @@
   width: 70px;
 }
 
+.e-de-hRuler {
+  background-color: #f8f8f8;
+  border-bottom: 0.5px solid #ccc;
+}
+
+.e-de-vRuler {
+  background-color: #f8f8f8;
+  border-right: 0.5px solid #ccc;
+}
+
+.e-de-ruler-margin {
+  background-color: #fff;
+}
+
+.e-de-ruler-tick {
+  stroke: #8c8c8c;
+}
+
+.e-de-ruler-tick-label {
+  fill: #333;
+}
+
+.e-de-ruler-markIndicator {
+  background-color: #fff;
+}
+
+.e-de-ruler-marker .e-de-ruler-tab-svg {
+  fill: #8c8c8c;
+}
+
+.e-de-ruler-marker .e-de-ruler-indent-svg {
+  fill: #8c8c8c;
+}
+
+.e-de-ruler-indent .e-de-ruler-indent-svg {
+  fill: #fff;
+  stroke: #777;
+}
+
+.e-de-ruler-indent .e-de-ruler-indent-svg:hover {
+  fill: #e6e6e6;
+  stroke: #777;
+}
+
+.e-de-ruler-indent .e-de-ruler-indent-svg:active {
+  fill: #317ab9;
+  stroke: #777;
+}
+
+.e-de-ruler-table-svg {
+  fill: #777;
+}
+
+.e-de-ruler-table-svg:hover {
+  fill: #e6e6e6;
+}
+
+.e-de-ruler-table-svg:active {
+  fill: #317ab9;
+}
+
 .e-rtl .e-listview .e-list-icon {
   height: 24px;
   width: 16px;
@@ -1510,6 +1571,11 @@
   line-height: 22px;
   margin-left: 12px;
 }
+.e-rtl .e-de-vRuler {
+  background-color: #f8f8f8;
+  border-right: none;
+  border-left: 0.5px solid #ccc;
+}
 
 .e-bigger .de-split-button > div:first-child {
   margin-right: 16px;

package/styles/document-editor-container/bootstrap4.css

@@ -1665,6 +1665,67 @@
   width: 70px;
 }
 
+.e-de-hRuler {
+  background-color: #e9ecef;
+  border-bottom: 0.5px solid #dee2e6;
+}
+
+.e-de-vRuler {
+  background-color: #e9ecef;
+  border-right: 0.5px solid #dee2e6;
+}
+
+.e-de-ruler-margin {
+  background-color: #fff;
+}
+
+.e-de-ruler-tick {
+  stroke: #adb5bd;
+}
+
+.e-de-ruler-tick-label {
+  fill: #495057;
+}
+
+.e-de-ruler-markIndicator {
+  background-color: #fff;
+}
+
+.e-de-ruler-marker .e-de-ruler-tab-svg {
+  fill: #adb5bd;
+}
+
+.e-de-ruler-marker .e-de-ruler-indent-svg {
+  fill: #adb5bd;
+}
+
+.e-de-ruler-indent .e-de-ruler-indent-svg {
+  fill: #fff;
+  stroke: #6c757d;
+}
+
+.e-de-ruler-indent .e-de-ruler-indent-svg:hover {
+  fill: #e9ecef;
+  stroke: #6c757d;
+}
+
+.e-de-ruler-indent .e-de-ruler-indent-svg:active {
+  fill: #007bff;
+  stroke: #6c757d;
+}
+
+.e-de-ruler-table-svg {
+  fill: #6c757d;
+}
+
+.e-de-ruler-table-svg:hover {
+  fill: #e9ecef;
+}
+
+.e-de-ruler-table-svg:active {
+  fill: #007bff;
+}
+
 .e-rtl .e-listview .e-list-icon {
   height: 24px;
   width: 16px;
@@ -1676,6 +1737,11 @@
   line-height: 22px;
   margin-left: 14px;
 }
+.e-rtl .e-de-vRuler {
+  background-color: #e9ecef;
+  border-right: none;
+  border-left: 0.5px solid #dee2e6;
+}
 
 .e-bigger .de-split-button > div:first-child {
   margin-right: 0;