@syncfusion/ej2-react-documenteditor 20.4.54 → 21.1.37

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

@@ -43,6 +43,11 @@
   font-family: "e-icons";
   font-size: 13px;
 }
+.e-documenteditor .e-de-multi-cmt-mark::before {
+  color: #d1d5db;
+  content: "\e8bc";
+  font-family: "e-icons";
+}
 .e-documenteditor .e-de-cmt-post::before {
   content: "\e71d";
   font-family: "e-icons";
@@ -124,40 +129,40 @@
 .e-de-table-left-alignment::before {
   color: #d1d5db;
   content: "\e7f6";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-table-center-alignment::before {
   color: #d1d5db;
   content: "\e7f1";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-table-right-alignment::before {
   color: #d1d5db;
   content: "\e703";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-tablecell-top-alignment::before {
   color: #d1d5db;
   content: "\e775";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
 }
 
 .e-de-tablecell-center-alignment::before {
   color: #d1d5db;
   content: "\e7e5";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
 }
 
 .e-de-tablecell-bottom-alignment::before {
   color: #d1d5db;
   content: "\e7d9";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
 }
 
 .e-de-table-border-setting {
@@ -205,14 +210,14 @@
 .e-de-table-border-none-setting::before {
   color: #d1d5db;
   content: "\e7eb";
-  font-size: 38px;
+  font-size: 36px;
   position: absolute;
 }
 
 .e-de-table-border-box-setting::before {
   color: #d1d5db;
   content: "\e834";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -222,7 +227,7 @@
   color: #d1d5db;
   content: "\e7e8";
   font-family: "e-icons";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -231,7 +236,7 @@
 .e-de-table-border-custom-setting::before {
   color: #d1d5db;
   content: "\e7d5";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -240,14 +245,14 @@
 .e-de-para-border-none-setting::before {
   color: #d1d5db;
   content: "\e890";
-  font-size: 38px;
+  font-size: 36px;
   position: absolute;
 }
 
 .e-de-para-border-box-setting::before {
   color: #d1d5db;
   content: "\e891";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -256,7 +261,7 @@
 .e-de-para-border-shadow-setting::before {
   color: #d1d5db;
   content: "\e892";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -265,7 +270,7 @@
 .e-de-para-border-custom-setting::before {
   color: #d1d5db;
   content: "\e88f";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -2063,7 +2068,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-restrict-pane,
 .e-de-op {
-  background-color: #232e3e;
+  background: #232e3e;
 }
 
 .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2722,7 +2727,7 @@ label[for*=_wholeWord_e-de-rtl] {
   margin-right: 20px;
 }
 
-.e-de-style-left-div .e-de-style-dlg-name-input {
+.e-de-style-dlg-name-input {
   height: 31px;
 }
 
@@ -3631,7 +3636,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-cmt-textarea.e-input {
   color: #d1d5db;
-  font-size: 13px;
+  font-size: 14px;
   line-height: normal;
   min-height: 30px;
   overflow: hidden;

package/styles/document-editor/tailwind.css

@@ -43,6 +43,11 @@
   font-family: "e-icons";
   font-size: 13px;
 }
+.e-documenteditor .e-de-multi-cmt-mark::before {
+  color: #6b7280;
+  content: "\e8bc";
+  font-family: "e-icons";
+}
 .e-documenteditor .e-de-cmt-post::before {
   content: "\e71d";
   font-family: "e-icons";
@@ -124,40 +129,43 @@
 .e-de-table-left-alignment::before {
   color: #6b7280;
   content: "\e7f6";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-table-center-alignment::before {
   color: #6b7280;
   content: "\e7f1";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-table-right-alignment::before {
   color: #6b7280;
   content: "\e703";
-  font-size: 46px;
+  font-size: 48px;
 }
 
 .e-de-tablecell-top-alignment::before {
   color: #6b7280;
   content: "\e775";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
+  margin: 2px;
 }
 
 .e-de-tablecell-center-alignment::before {
   color: #6b7280;
   content: "\e7e5";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
+  margin: 2px;
 }
 
 .e-de-tablecell-bottom-alignment::before {
   color: #6b7280;
   content: "\e7d9";
   font-family: "e-icons";
-  font-size: 51px;
+  font-size: 48px;
+  margin: 2px;
 }
 
 .e-de-table-border-setting {
@@ -205,14 +213,14 @@
 .e-de-table-border-none-setting::before {
   color: #6b7280;
   content: "\e7eb";
-  font-size: 38px;
+  font-size: 36px;
   position: absolute;
 }
 
 .e-de-table-border-box-setting::before {
   color: #6b7280;
   content: "\e834";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -222,7 +230,7 @@
   color: #6b7280;
   content: "\e7e8";
   font-family: "e-icons";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -231,7 +239,7 @@
 .e-de-table-border-custom-setting::before {
   color: #6b7280;
   content: "\e7d5";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -240,14 +248,14 @@
 .e-de-para-border-none-setting::before {
   color: #6b7280;
   content: "\e890";
-  font-size: 38px;
+  font-size: 36px;
   position: absolute;
 }
 
 .e-de-para-border-box-setting::before {
   color: #6b7280;
   content: "\e891";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -256,7 +264,7 @@
 .e-de-para-border-shadow-setting::before {
   color: #6b7280;
   content: "\e892";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -265,7 +273,7 @@
 .e-de-para-border-custom-setting::before {
   color: #6b7280;
   content: "\e88f";
-  font-size: 34px;
+  font-size: 36px;
   left: 2px;
   position: absolute;
   top: 2px;
@@ -2063,7 +2071,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-restrict-pane,
 .e-de-op {
-  background-color: #f9fafb;
+  background: #f9fafb;
 }
 
 .e-de-restrict-pane .e-tab-header .e-toolbar-items,
@@ -2722,7 +2730,7 @@ label[for*=_wholeWord_e-de-rtl] {
   margin-right: 20px;
 }
 
-.e-de-style-left-div .e-de-style-dlg-name-input {
+.e-de-style-dlg-name-input {
   height: 31px;
 }
 
@@ -3631,7 +3639,7 @@ label[for*=_wholeWord_e-de-rtl] {
 
 .e-de-cmt-textarea.e-input {
   color: #374151;
-  font-size: 13px;
+  font-size: 14px;
   line-height: normal;
   min-height: 30px;
   overflow: hidden;

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

@@ -532,7 +532,7 @@
 }
 
 .e-de-statusbar-pageweb {
-  background-color: #1a1a1a;
+  background: #1a1a1a;
   border: 0;
   box-shadow: none;
   float: right;
@@ -561,12 +561,22 @@
   font-size: 16px;
 }
 
+.e-listview .e-list-icon {
+  height: 24px;
+  width: 16px;
+  margin-right: 12px;
+}
+
+.e-de-listview-icon {
+  line-height: 22px;
+}
+
 .e-de-linespacing {
   margin-top: 6px;
 }
 
 .e-de-statusbar-zoom {
-  background-color: #1a1a1a;
+  background: #1a1a1a;
   border: 0;
   color: #fff;
   float: right;
@@ -674,7 +684,7 @@
 
 .e-de-tool-ctnr-properties-pane,
 .e-de-ctnr-properties-pane {
-  background-color: #1a1a1a;
+  background: #1a1a1a;
   border-bottom: 1px solid #505050;
   border-top: 1px solid #505050;
 }
@@ -784,7 +794,7 @@
   margin: 0 5.5px;
 }
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
-  margin-left: 12px;
+  margin-left: 12px !important;
   margin-right: 6px;
 }
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -800,20 +810,23 @@
 }
 
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
+  -ms-flex-direction: column;
+      flex-direction: column;
+  height: calc(100% - 10px);
   padding: 0;
-  padding-bottom: 6px;
+  padding-bottom: 5px;
 }
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus {
   padding: 0;
-  padding-bottom: 6px;
+  padding-bottom: 5px;
 }
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active {
   padding: 0;
-  padding-bottom: 6px;
+  padding-bottom: 5px;
 }
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover {
   padding: 0;
-  padding-bottom: 6px;
+  padding-bottom: 5px;
 }
 
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
@@ -842,7 +855,7 @@
 }
 
 .e-de-ctnr-properties-pane-btn .e-btn {
-  background-color: #131313;
+  background: #131313;
   border-radius: 0;
   box-shadow: none;
   color: #0070f0;
@@ -884,6 +897,7 @@
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 0 !important;
+  min-height: 16px;
 }
 
 .e-de-hdr-ftr-frst-div {
@@ -1238,8 +1252,8 @@
   border: 1px solid #505050;
   color: #acacac;
   height: 129px;
-  margin-left: 78px;
   width: 94px;
+  margin-left: 78px;
 }
 
 .e-de-toc-template1.e-de-rtl {
@@ -1294,7 +1308,7 @@
 }
 
 .e-de-status-bar {
-  background-color: #1a1a1a;
+  background: #1a1a1a;
   display: -ms-flexbox;
   display: flex;
   padding-top: 2.5px;
@@ -1427,8 +1441,8 @@
 }
 
 .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
-  height: 38px;
   width: 38px;
+  height: 38px;
 }
 
 .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
@@ -1440,6 +1454,15 @@
   width: 70px;
 }
 
+.e-rtl .e-listview .e-list-icon {
+  height: 24px;
+  width: 16px;
+  margin-left: 12px;
+}
+.e-rtl .e-de-listview-icon {
+  line-height: 22px;
+}
+
 .e-bigger .de-split-button > div:first-child {
   margin-right: 16px;
 }
@@ -1561,7 +1584,7 @@
   margin: 0 7.5px;
 }
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
-  margin-left: 16px;
+  margin-left: 16px !important;
   margin-right: 8px;
 }
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -1578,22 +1601,22 @@
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn,
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control {
   padding: 0;
-  padding-bottom: 6px;
+  padding-bottom: 5px;
 }
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus,
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:focus {
   padding: 0;
-  padding-bottom: 6px;
+  padding-bottom: 5px;
 }
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active,
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:active {
   padding: 0;
-  padding-bottom: 6px;
+  padding-bottom: 5px;
 }
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover,
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control:hover {
   padding: 0;
-  padding-bottom: 6px;
+  padding-bottom: 5px;
 }
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
   padding: 0 !important;
@@ -1609,7 +1632,7 @@
   width: 75px;
 }
 .e-bigger .e-de-ctnr-properties-pane-btn .e-btn {
-  background-color: #131313;
+  background: #131313;
   border-radius: 0;
   box-shadow: none;
   min-height: 100%;
@@ -1637,7 +1660,7 @@
 }
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
   display: table;
-  font-size: 12px;
+  font-size: 12px !important;
   margin: 0 6px;
   padding: 0;
   white-space: normal;
@@ -1793,6 +1816,22 @@
   height: 0;
   line-height: 0;
 }
+.e-bigger .e-listview .e-list-icon {
+  height: 24px;
+  width: 16px;
+  margin-right: 16px;
+}
+.e-bigger .e-de-listview-icon {
+  line-height: 22px;
+}
+.e-bigger .e-rtl .e-listview .e-list-icon {
+  height: 24px;
+  width: 16px;
+  margin-left: 16px;
+}
+.e-bigger .e-rtl .e-de-listview-icon {
+  line-height: 22px;
+}
 
 .e-de-ctn .e-de-bzr-button {
   font-size: 12px;

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

@@ -532,7 +532,7 @@
 }
 
 .e-de-statusbar-pageweb {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
   border: 0;
   box-shadow: none;
   float: right;
@@ -562,12 +562,22 @@
   margin-top: -6px;
 }
 
+.e-listview .e-list-icon {
+  height: 24px;
+  width: 16px;
+  margin-right: 12px;
+}
+
+.e-de-listview-icon {
+  line-height: 22px;
+}
+
 .e-de-linespacing {
   margin-top: 6px;
 }
 
 .e-de-statusbar-zoom {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
   border: 0;
   color: #333;
   float: right;
@@ -675,7 +685,7 @@
 
 .e-de-tool-ctnr-properties-pane,
 .e-de-ctnr-properties-pane {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
   border-bottom: 1px solid #ccc;
   border-top: 1px solid #ccc;
 }
@@ -785,7 +795,7 @@
   margin: 0 5.5px;
 }
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
-  margin-left: 12px;
+  margin-left: 12px !important;
   margin-right: 6px;
 }
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -801,20 +811,23 @@
 }
 
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn {
+  -ms-flex-direction: column;
+      flex-direction: column;
+  height: calc(100% - 10px);
   padding: 0 1px;
-  padding-bottom: 6px;
+  padding-bottom: 5px;
 }
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus {
   padding: 0;
-  padding-bottom: 6px;
+  padding-bottom: 5px;
 }
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active {
   padding: 0;
-  padding-bottom: 6px;
+  padding-bottom: 5px;
 }
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover {
   padding: 0;
-  padding-bottom: 6px;
+  padding-bottom: 5px;
 }
 
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
@@ -843,7 +856,7 @@
 }
 
 .e-de-ctnr-properties-pane-btn .e-btn {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
   border-radius: 0;
   box-shadow: none;
   color: #317ab9;
@@ -885,6 +898,7 @@
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-btn-icon,
 .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
   padding: 0 !important;
+  min-height: 16px;
 }
 
 .e-de-hdr-ftr-frst-div {
@@ -1240,8 +1254,8 @@
   border: 1px solid #ccc;
   color: #333;
   height: 129px;
-  margin-left: 78px;
   width: 94px;
+  margin-left: 78px;
 }
 
 .e-de-toc-template1.e-de-rtl {
@@ -1296,7 +1310,7 @@
 }
 
 .e-de-status-bar {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
   display: -ms-flexbox;
   display: flex;
   padding-top: 2.5px;
@@ -1429,8 +1443,8 @@
 }
 
 .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
-  height: 38px;
   width: 38px;
+  height: 38px;
 }
 
 .e-bigger .e-de-grp-btn-ctnr .e-de-ctnr-group-btn > button {
@@ -1442,6 +1456,15 @@
   width: 70px;
 }
 
+.e-rtl .e-listview .e-list-icon {
+  height: 24px;
+  width: 16px;
+  margin-left: 12px;
+}
+.e-rtl .e-de-listview-icon {
+  line-height: 22px;
+}
+
 .e-bigger .de-split-button > div:first-child {
   margin-right: 16px;
 }
@@ -1563,7 +1586,7 @@
   margin: 0 7.5px;
 }
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-start {
-  margin-left: 16px;
+  margin-left: 16px !important;
   margin-right: 8px;
 }
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item.e-de-toolbar-btn-middle {
@@ -1611,7 +1634,7 @@
   width: 75px;
 }
 .e-bigger .e-de-ctnr-properties-pane-btn .e-btn {
-  background-color: #f8f8f8;
+  background: #f8f8f8;
   border-radius: 0;
   box-shadow: none;
   min-height: 100%;
@@ -1639,7 +1662,7 @@
 }
 .e-bigger .e-de-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
   display: table;
-  font-size: 12px;
+  font-size: 12px !important;
   margin: 0 6px;
   padding: 0;
   white-space: normal;
@@ -1802,6 +1825,22 @@
   height: 0;
   line-height: 0;
 }
+.e-bigger .e-listview .e-list-icon {
+  height: 24px;
+  width: 16px;
+  margin-right: 16px;
+}
+.e-bigger .e-de-listview-icon {
+  line-height: 22px;
+}
+.e-bigger .e-rtl .e-listview .e-list-icon {
+  height: 24px;
+  width: 16px;
+  margin-left: 16px;
+}
+.e-bigger .e-rtl .e-de-listview-icon {
+  line-height: 22px;
+}
 
 .e-de-ctn .e-de-bzr-button {
   font-size: 12px;