fix: include label for the rich text editor field

Strapi V4 has its own design system, and the field label wasn't showing. I'm working on moving over to @strapi/design-system. This commit shows the label.
melishev · Feb 27, 2022 · 73187d7 · 73187d7
1 parent d83929a
commit 73187d7
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 22 deletions.
diff --git a/admin/src/components/Wysiwyg/index.js b/admin/src/components/Wysiwyg/index.js
@@ -8,6 +8,10 @@ import cn from 'classnames';
 import { Description, ErrorMessage, Label } from "@buffetjs/styles";
 import { Error } from "@buffetjs/core";
 import Wrapper from './wrapper';
+import { useIntl } from 'react-intl';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+
 
 // eslint-disable-next-line react/prefer-stateless-function
 class WysiwygWithErrors extends React.Component {
@@ -22,7 +26,10 @@ class WysiwygWithErrors extends React.Component {
       inputDescription,
       inputStyle,
       label,
+      description,
+      intlLabel,
       labelIcon,
+      required,
       name,
       onBlur: handleBlur,
       onChange,
@@ -44,24 +51,32 @@ class WysiwygWithErrors extends React.Component {
       >
         {({ canCheck, onBlur, error, dispatch }) => {
           const hasError = Boolean(error);
+          const { formatMessage } = useIntl();
 
           return (
 
-              <Wrapper size={1} className={`${cn(!isEmpty(className) && className)} ${hasError ? 'bordered' : ''}`}
-              style={style}>
-                <Label htmlFor={name}>
-                  <span>{label}</span>
-                  {labelIcon && (
-                    <LabelIconWrapper title={labelIcon.title}>
-                      {labelIcon.icon}
-                    </LabelIconWrapper>
+              <Wrapper size={1} className={`${cn(!isEmpty(className) && className)} ${hasError ? 'bordered' : ''}`} style={style}>
+
+                <Box>
+                  <Typography variant="pi" fontWeight="bold">
+                    {formatMessage(intlLabel)}
+                  </Typography>
+                  {required && (
+                    <Typography variant="pi" fontWeight="bold" textColor="danger600">
+                      *
+                    </Typography>
                   )}
-                </Label>
+                </Box>
                 <Editor name={name} onChange={onChange} value={value} />
-                {!hasError && inputDescription && (
-                  <Description>{inputDescription}</Description>
+                {error && (
+                  <Typography variant="pi" textColor="danger600">
+                    {formatMessage({ id: error, defaultMessage: error })}
+                  </Typography>
+                )}
+                {description && (
+                  <Typography variant="pi">{formatMessage(description)}</Typography>
                 )}
-                {hasError && <ErrorMessage>{error}</ErrorMessage>}
+
               </Wrapper>
           );
         }}

diff --git a/admin/src/components/Wysiwyg/wrapper.js b/admin/src/components/Wysiwyg/wrapper.js
@@ -2,13 +2,16 @@ import styled from 'styled-components';
 import { Box } from "@strapi/design-system/Box";
 
 const Wrapper = styled(Box)`
+    padding-bottom: 2.8rem;
     @media (min-width: 651px) {
         .codex-editor--narrow .codex-editor__redactor {
             margin-right: 0;
         }
     }    
     .codex-editor {
         padding: 1rem;
+        font-size: 1rem;
+        font-family: "Lato";
     }
     *:focus-visible {
         outline: none;
@@ -37,9 +40,6 @@ const Wrapper = styled(Box)`
         font-size: .67em;
         font-weight: bold;
     }
-    padding-bottom: 2.8rem;
-    font-size: 1rem;
-    font-family: "Lato";
     label {
       display: block;
       margin-bottom: 1rem;
@@ -59,7 +59,6 @@ const Wrapper = styled(Box)`
       text-overflow: ellipsis;
       margin-bottom: -9px;
     }
-
     div,
     pre,
     code {

diff --git a/admin/src/components/editorjs/index.js b/admin/src/components/editorjs/index.js
@@ -40,7 +40,7 @@ const Editor = ({ onChange, name, value }) => {
 
   return (
     <>
-      <div style={{ border: `1px solid rgb(227, 233, 243)`, borderRadius: `2px` }}>
+      <div style={{ border: `1px solid rgb(227, 233, 243)`, borderRadius: `2px`, marginTop: `4px` }}>
         <EditorJs
           // data={JSON.parse(value)}
           // enableReInitialize={true}

diff --git a/admin/src/index.js b/admin/src/index.js
@@ -12,6 +12,10 @@ export default {
       blockerComponentProps: {},
       description: pluginDescription,
       icon: pluginPkg.strapi.icon,
+      intlLabel: {
+        id: pluginId,
+        defaultMessage: pluginId
+      },
       id: pluginId,
       initializer: () => null,
       injectedComponents: [],

diff --git a/yarn.lock b/yarn.lock
@@ -1714,11 +1714,6 @@ duplexer2@~0.1.0:
   dependencies:
     readable-stream "^2.0.2"
 
-editorjs-alert@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/editorjs-alert/-/editorjs-alert-1.0.3.tgz#880890b7006f5f09f67d8bb8446aceb4769b66ce"
-  integrity sha512-YsKp0BBmswueE2zh0Lj2YflFA/9pvguHTSsy6uh00p3lattflW33ow4CSYD0JFe3y+TqqD8VoB/IlS7C9fKu0Q==
-
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"