@griddo/ax 1.75.135 → 1.75.137

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.135",
+  "version": "1.75.137",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8f82df5b169fbbf69bf86fc81b33276951a9eae1"
+  "gitHead": "876b17b2f3a2adf5567d779e89656f35b9f03ef3"
 }

package/src/components/Fields/RichText/style.tsx

@@ -1,21 +1,23 @@
 import styled from "styled-components";
 
-const EditorWrapper = styled.div<{ error: boolean | undefined; disabled: boolean | undefined }>`
-  pointer-events: ${(p) => p.disabled ? "none" : "auto"};
-  color: ${p => p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textHighEmphasis};
+const EditorWrapper = styled.div<{ error: boolean | undefined; disabled: boolean | undefined }>`
+  pointer-events: ${(p) => (p.disabled ? "none" : "auto")};
+  color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textHighEmphasis)};
   img {
-      opacity: ${p => p.disabled ? 0.5 : 1};
+    opacity: ${(p) => (p.disabled ? 0.5 : 1)};
   }
 
   .richTextEditor {
-    ${p => p.theme.textStyle.fieldContent};
-    background-color: ${p => p.theme.color.uiBackground02};
-    border: 1px solid ${p => (p.error === true ? p.theme.color.error : p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.uiLine)};
-    border-radius: ${p => p.theme.radii.s};
-    color: ${p => p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textHighEmphasis};
-    padding: ${p => `0 ${p.theme.spacing.s}`};
-    min-height: ${p => `calc(${p.theme.spacing.l} * 3)`};
-    max-height: ${p => `calc(${p.theme.spacing.xl} * 10)`};
+    ${(p) => p.theme.textStyle.fieldContent};
+    background-color: ${(p) => p.theme.color.uiBackground02};
+    border: 1px solid
+      ${(p) =>
+        p.error === true ? p.theme.color.error : p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.uiLine};
+    border-radius: ${(p) => p.theme.radii.s};
+    color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textHighEmphasis)};
+    padding: ${(p) => `0 ${p.theme.spacing.s}`};
+    min-height: ${(p) => `calc(${p.theme.spacing.l} * 3)`};
+    max-height: ${(p) => `calc(${p.theme.spacing.xl} * 10)`};
     width: 100%;
     overflow: auto;
 
@@ -55,22 +57,31 @@ const EditorWrapper = styled.div<{ error: boolean | undefined; disabled: boolea
     }
   }
 
+  .DraftEditor-root {
+    .DraftEditor-editorContainer {
+      z-index: 0;
+    }
+  }
+
   .richTextToolbar {
     padding: 0;
     background: transparent;
-    margin-bottom: ${p => p.theme.spacing.xs};
+    margin-bottom: ${(p) => p.theme.spacing.xs};
 
-    .rdw-inline-wrapper, .rdw-list-wrapper, .rdw-link-wrapper, .rdw-block-wrapper {
+    .rdw-inline-wrapper,
+    .rdw-list-wrapper,
+    .rdw-link-wrapper,
+    .rdw-block-wrapper {
       margin-bottom: 0;
       height: 24px;
     }
 
-    .rdw-option-wrapper {
+    .rdw-option-wrapper  {
       min-width: 24px;
       height: 24px;
       background: transparent;
-      border-radius: ${p => p.theme.radii.s};
-      margin: ${p => `0 ${p.theme.spacing.xs} 0 0`};
+      border-radius: ${(p) => p.theme.radii.s};
+      margin: ${(p) => `0 ${p.theme.spacing.xs} 0 0`};
       :hover {
         background: ${(p) => p.theme.color.overlayHoverPrimary};
         box-shadow: none;
@@ -84,21 +95,21 @@ const EditorWrapper = styled.div<{ error: boolean | undefined; disabled: boolea
 
     .richTextBlockType {
       height: 24px;
-      margin: ${p => `0 ${p.theme.spacing.xs} 0 0`};
+      margin: ${(p) => `0 ${p.theme.spacing.xs} 0 0`};
       :hover {
         box-shadow: none;
       }
       ul {
         overflow-y: auto;
         width: 115px;
-        box-shadow: ${p => p.theme.shadow.shadowL};
-        border-radius: ${p => p.theme.radii.s};
-        padding: ${p => `${p.theme.spacing.xs} 0`};
+        box-shadow: ${(p) => p.theme.shadow.shadowL};
+        border-radius: ${(p) => p.theme.radii.s};
+        padding: ${(p) => `${p.theme.spacing.xs} 0`};
         :hover {
-          box-shadow: ${p => p.theme.shadow.shadowL};
+          box-shadow: ${(p) => p.theme.shadow.shadowL};
         }
         li {
-          padding: ${p => `${p.theme.spacing.xs}`};
+          padding: ${(p) => `${p.theme.spacing.xs}`};
         }
         li:nth-child(2) {
           font-size: 22px;
@@ -119,7 +130,7 @@ const EditorWrapper = styled.div<{ error: boolean | undefined; disabled: boolea
       }
 
       .rdw-dropdown-carettoopen {
-        border-top: 6px solid ${p => p.disabled ? p.theme.color.interactiveDisabled : "black"};
+        border-top: 6px solid ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : "black")};
       }
 
       .rdw-dropdownoption-active {
@@ -131,11 +142,11 @@ const EditorWrapper = styled.div<{ error: boolean | undefined; disabled: boolea
     }
 
     .richTextLinkModal {
-      padding: ${p => p.theme.spacing.s};
+      padding: ${(p) => p.theme.spacing.s};
       height: auto;
       left: -30px;
-      box-shadow: ${p => p.theme.shadow.shadowL};
-      border-radius: ${p => p.theme.radii.s};
+      box-shadow: ${(p) => p.theme.shadow.shadowL};
+      border-radius: ${(p) => p.theme.radii.s};
 
       label {
         ${(p) => p.theme.textStyle.fieldLabel};
@@ -143,7 +154,7 @@ const EditorWrapper = styled.div<{ error: boolean | undefined; disabled: boolea
       }
       .rdw-link-modal-input {
         border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
-        border-radius: ${p => p.theme.radii.s};
+        border-radius: ${(p) => p.theme.radii.s};
         padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.xs}`};
         height: ${(p) => p.theme.spacing.m};
       }
@@ -222,7 +233,6 @@ const EditorWrapper = styled.div<{ error: boolean | undefined; disabled: boolea
         }
       }
     }
-
   }
 `;