Merge remote-tracking branch 'origin/feature/rich-text-editor' into rich-text-editor/disabled

packages/core/admin/admin/src/content-manager/components/BlocksEditor/index.js

@@ -15,6 +15,12 @@ const TypographyAsterisk = styled(Typography)`
   line-height: 0;
 `;
 
+const LabelAction = styled(Box)`
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
+`;
+
 const EditorDivider = styled(Divider)`
   background: ${({ theme }) => theme.colors.neutral200};
 `;
@@ -32,7 +38,7 @@ const Wrapper = styled(Box)`
 `;
 
 const BlocksEditor = React.forwardRef(
-  ({ intlLabel, name, disabled, required, error, value, onChange }, ref) => {
+  ({ intlLabel, labelAction, name, disabled, required, error, value, onChange }, ref) => {
     const { formatMessage } = useIntl();
     const [editor] = React.useState(() => withReact(withHistory(createEditor())));
 
@@ -75,6 +81,7 @@ const BlocksEditor = React.forwardRef(
               {label}
               {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}
             </Typography>
+            {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
           </Flex>
           <Slate
             editor={editor}
@@ -103,6 +110,7 @@ const BlocksEditor = React.forwardRef(
 );
 
 BlocksEditor.defaultProps = {
+  labelAction: null,
   required: false,
   error: '',
   value: null,
@@ -114,6 +122,7 @@ BlocksEditor.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
     values: PropTypes.object,
   }).isRequired,
+  labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,
   required: PropTypes.bool,
   disabled: PropTypes.bool.isRequired,