Refactor #6636 - For Editor

packages/primevue/src/editor/style/EditorStyle.js

@@ -12,7 +12,7 @@ const theme = ({ dt }) => `
     font-family: Helvetica, Arial, sans-serif;
     font-size: 13px;
     height: 100%;
-    margin: 0px;
+    margin: 0;
     position: relative;
 }
 .ql-container.ql-disabled .ql-tooltip {
@@ -22,7 +22,7 @@ const theme = ({ dt }) => `
     pointer-events: none;
 }
 .ql-clipboard {
-    left: -100000px;
+    inset-inline-start: -100000px;
     height: 1px;
     overflow-y: hidden;
     position: absolute;
@@ -65,7 +65,7 @@ const theme = ({ dt }) => `
 }
 .ql-editor ol,
 .ql-editor ul {
-    padding-left: 1.5rem;
+    padding-inline-start: 1.5rem;
 }
 .ql-editor ol > li,
 .ql-editor ul > li {
@@ -100,21 +100,21 @@ const theme = ({ dt }) => `
     width: 1.2rem;
 }
 .ql-editor li:not(.ql-direction-rtl)::before {
-    margin-left: -1.5rem;
+    margin-inline-start: -1.5rem;
-    margin-right: 0.3rem;
+    margin-inline-end: 0.3rem;
     text-align: right;
 }
 .ql-editor li.ql-direction-rtl::before {
-    margin-left: 0.3rem;
+    margin-inline-start: 0.3rem;
-    margin-right: -1.5rem;
+    margin-inline-end: -1.5rem;
 }
 .ql-editor ol li:not(.ql-direction-rtl),
 .ql-editor ul li:not(.ql-direction-rtl) {
-    padding-left: 1.5rem;
+    padding-inline-start: 1.5rem;
 }
 .ql-editor ol li.ql-direction-rtl,
 .ql-editor ul li.ql-direction-rtl {
-    padding-right: 1.5rem;
+    padding-inline-end: 1.5rem;
 }
 .ql-editor ol li {
     counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
@@ -201,114 +201,6 @@ const theme = ({ dt }) => `
 .ql-editor ol li.ql-indent-9:before {
     content: counter(list-9, decimal) '. ';
 }
-.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
-    padding-left: 3rem;
-}
-.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
-    padding-left: 4.5rem;
-}
-.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
-    padding-right: 3rem;
-}
-.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
-    padding-right: 4.5rem;
-}
-.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
-    padding-left: 6rem;
-}
-.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
-    padding-left: 7.5rem;
-}
-.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
-    padding-right: 6rem;
-}
-.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
-    padding-right: 7.5rem;
-}
-.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
-    padding-left: 9rem;
-}
-.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
-    padding-left: 10.5rem;
-}
-.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
-    padding-right: 9rem;
-}
-.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
-    padding-right: 10.5rem;
-}
-.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
-    padding-left: 12rem;
-}
-.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
-    padding-left: 13.5rem;
-}
-.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
-    padding-right: 12rem;
-}
-.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
-    padding-right: 13.5rem;
-}
-.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
-    padding-left: 15rem;
-}
-.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
-    padding-left: 16.5rem;
-}
-.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
-    padding-right: 15rem;
-}
-.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
-    padding-right: 16.5rem;
-}
-.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
-    padding-left: 18rem;
-}
-.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
-    padding-left: 19.5rem;
-}
-.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
-    padding-right: 18rem;
-}
-.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
-    padding-right: 19.5rem;
-}
-.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
-    padding-left: 21rem;
-}
-.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
-    padding-left: 22.5rem;
-}
-.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
-    padding-right: 21rem;
-}
-.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
-    padding-right: 22.5rem;
-}
-.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
-    padding-left: 24rem;
-}
-.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
-    padding-left: 25.5rem;
-}
-.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
-    padding-right: 24rem;
-}
-.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
-    padding-right: 25.5rem;
-}
-.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
-    padding-left: 27rem;
-}
-.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
-    padding-left: 28.5rem;
-}
-.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
-    padding-right: 27rem;
-}
-.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
-    padding-right: 28.5rem;
-}
 .ql-editor .ql-video {
     display: block;
     max-width: 100%;
@@ -393,10 +285,10 @@ const theme = ({ dt }) => `
     color: rgba(0, 0, 0, 0.6);
     content: attr(data-placeholder);
     font-style: italic;
-    left: 15px;
+    inset-inline-start: 15px;
     pointer-events: none;
     position: absolute;
-    right: 15px;
+    inset-inline-end: 15px;
 }
 .ql-snow.ql-toolbar:after,
 .ql-snow .ql-toolbar:after {
@@ -412,7 +304,8 @@ const theme = ({ dt }) => `
     display: inline-block;
     float: left;
     height: 24px;
-    padding: 3px 5px;
+    padding-block: 3px;
+    padding-inline: 5px;
     width: 28px;
 }
 .ql-snow.ql-toolbar button svg,
@@ -493,7 +386,7 @@ const theme = ({ dt }) => `
 .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
 .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
 .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
-.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
 .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
 .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
 .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
@@ -616,10 +509,10 @@ const theme = ({ dt }) => `
     text-decoration: underline;
 }
 .ql-snow .ql-editor blockquote {
-    border-left: 4px solid #ccc;
+    border-inline-start: 4px solid #ccc;
-    margin-bottom: 5px;
+    margin-block-end: 5px;
-    margin-top: 5px;
+    margin-block-start: 5px;
-    padding-left: 16px;
+    padding-inline-start: 16px;
 }
 .ql-snow .ql-editor code,
 .ql-snow .ql-editor pre {
@@ -628,8 +521,8 @@ const theme = ({ dt }) => `
 }
 .ql-snow .ql-editor pre {
     white-space: pre-wrap;
-    margin-bottom: 5px;
+    margin-block-end: 5px;
-    margin-top: 5px;
+    margin-block-start: 5px;
     padding: 5px 10px;
 }
 .ql-snow .ql-editor code {
@@ -648,6 +541,7 @@ const theme = ({ dt }) => `
     color: #444;
     display: inline-block;
     float: left;
+    inset-inline-start: 0;
     font-size: 14px;
     font-weight: 500;
     height: 24px;
@@ -658,8 +552,8 @@ const theme = ({ dt }) => `
     cursor: pointer;
     display: inline-block;
     height: 100%;
-    padding-left: 8px;
+    padding-inline-start: 8px;
-    padding-right: 2px;
+    padding-inline-end: 2px;
     position: relative;
     width: 100%;
 }
@@ -678,8 +572,8 @@ const theme = ({ dt }) => `
 .ql-snow .ql-picker-options .ql-picker-item {
     cursor: pointer;
     display: block;
-    padding-bottom: 5px;
+    padding-block-end: 5px;
-    padding-top: 5px;
+    padding-block-start: 5px;
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-label {
     color: #ccc;
@@ -693,7 +587,7 @@ const theme = ({ dt }) => `
 }
 .ql-snow .ql-picker.ql-expanded .ql-picker-options {
     display: block;
-    margin-top: -1px;
+    margin-block-start: -1px;
     top: 100%;
     z-index: 1;
 }
@@ -707,10 +601,10 @@ const theme = ({ dt }) => `
 }
 .ql-snow .ql-color-picker .ql-picker-label svg,
 .ql-snow .ql-icon-picker .ql-picker-label svg {
-    right: 4px;
+    inset-inline-end: 4px;
 }
 .ql-snow .ql-icon-picker .ql-picker-options {
-    padding: 4px 0px;
+    padding: 4px 0;
 }
 .ql-snow .ql-icon-picker .ql-picker-item {
     height: 24px;
@@ -726,13 +620,13 @@ const theme = ({ dt }) => `
     float: left;
     height: 16px;
     margin: 2px;
-    padding: 0px;
+    padding: 0;
     width: 16px;
 }
 .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
     position: absolute;
-    margin-top: -9px;
+    margin-block-start: -9px;
-    right: 0;
+    inset-inline-end: 0;
     top: 50%;
     width: 18px;
 }
@@ -855,7 +749,7 @@ const theme = ({ dt }) => `
     padding: 8px;
 }
 .ql-toolbar.ql-snow .ql-formats {
-    margin-right: 15px;
+    margin-inline-end: 15px;
 }
 .ql-toolbar.ql-snow .ql-picker-label {
     border: 1px solid transparent;
@@ -875,12 +769,12 @@ const theme = ({ dt }) => `
     border-color: #000;
 }
 .ql-toolbar.ql-snow + .ql-container.ql-snow {
-    border-top: 0px;
+    border-block-start: 0;
 }
 .ql-snow .ql-tooltip {
     background: #fff;
     border: 1px solid #ccc;
-    box-shadow: 0px 0px 5px #ddd;
+    box-shadow: 0 0 5px #ddd;
     color: #444;
     padding: 5px 12px;
     white-space: nowrap;
@@ -888,14 +782,14 @@ const theme = ({ dt }) => `
 .ql-snow .ql-tooltip::before {
     content: 'Visit URL:';
     line-height: 26px;
-    margin-right: 8px;
+    margin-inline-end: 8px;
 }
 .ql-snow .ql-tooltip input[type='text'] {
     display: none;
     border: 1px solid #ccc;
     font-size: 13px;
     height: 26px;
-    margin: 0px;
+    margin: 0;
     padding: 3px 5px;
     width: 170px;
 }
@@ -907,14 +801,14 @@ const theme = ({ dt }) => `
     vertical-align: top;
 }
 .ql-snow .ql-tooltip a.ql-action::after {
-    border-right: 1px solid #ccc;
+    border-inline-end: 1px solid #ccc;
     content: 'Edit';
-    margin-left: 16px;
+    margin-inline-start: 16px;
-    padding-right: 8px;
+    padding-inline-end: 8px;
 }
 .ql-snow .ql-tooltip a.ql-remove::before {
     content: 'Remove';
-    margin-left: 8px;
+    margin-inline-start: 8px;
 }
 .ql-snow .ql-tooltip a {
     line-height: 26px;
@@ -927,9 +821,9 @@ const theme = ({ dt }) => `
     display: inline-block;
 }
 .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
-    border-right: 0px;
+    border-inline-end: 0;
     content: 'Save';
-    padding-right: 0px;
+    padding-inline-end: 0;
 }
 .ql-snow .ql-tooltip[data-mode='link']::before {
     content: 'Enter link:';
@@ -949,8 +843,8 @@ const theme = ({ dt }) => `
 
 .p-editor .p-editor-toolbar {
     background: ${dt('editor.toolbar.background')};
-    border-top-right-radius: ${dt('editor.toolbar.border.radius')};
+    border-start-end-radius: ${dt('editor.toolbar.border.radius')};
-    border-top-left-radius: ${dt('editor.toolbar.border.radius')};
+    border-start-start-radius: ${dt('editor.toolbar.border.radius')};
 }
 
 .p-editor .p-editor-toolbar.ql-snow {
@@ -1017,8 +911,8 @@ const theme = ({ dt }) => `
 }
 
 .p-editor .p-editor-content {
-    border-bottom-right-radius: ${dt('editor.content.border.radius')};
+    border-end-end-radius: ${dt('editor.content.border.radius')};
-    border-bottom-left-radius: ${dt('editor.content.border.radius')};
+    border-end-start-radius: ${dt('editor.content.border.radius')};
 }
 
 .p-editor .p-editor-content.ql-snow {
@@ -1028,8 +922,8 @@ const theme = ({ dt }) => `
 .p-editor .p-editor-content .ql-editor {
     background: ${dt('editor.content.background')};
     color: ${dt('editor.content.color')};
-    border-bottom-right-radius: ${dt('editor.content.border.radius')};
+    border-end-end-radius: ${dt('editor.content.border.radius')};
-    border-bottom-left-radius: ${dt('editor.content.border.radius')};
+    border-end-start-radius: ${dt('editor.content.border.radius')};
 }
 
 .p-editor .ql-snow.ql-toolbar button:hover,