fix: correct field data display (label, placeholder, required), closes …

…#166
nshenderov · Oct 3, 2024 · f34fcec · f34fcec
1 parent b873da9
commit f34fcec
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 15 deletions.
diff --git a/admin/src/components/Input/components/Editor.jsx b/admin/src/components/Input/components/Editor.jsx
@@ -15,7 +15,13 @@ const Wrapper = styled('div')`
   ${({ styles }) => styles}
 `;
 
-export const Editor = ({ name, disabled, presetName, maxLength }) => {
+export const Editor = ({
+  name,
+  disabled,
+  presetName,
+  maxLength,
+  placeholder,
+}) => {
   const { onChange, value } = useField(name);
 
   const [editorInstance, setEditorInstance] = useState(false);
@@ -39,7 +45,20 @@ export const Editor = ({ name, disabled, presetName, maxLength }) => {
         presetName,
         handleToggleMediaLib
       );
-      setPreset(currentPreset);
+
+      if (placeholder) {
+        const clonedPreset = {
+          ...currentPreset,
+          editorConfig: {
+            ...currentPreset.editorConfig,
+            placeholder: placeholder,
+          },
+        };
+
+        setPreset(clonedPreset);
+      } else {
+        setPreset(currentPreset);
+      }
     })();
   }, []);
 
@@ -111,8 +130,9 @@ export const Editor = ({ name, disabled, presetName, maxLength }) => {
 Editor.propTypes = {
   name: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
-  maxLength: PropTypes.number,
   presetName: PropTypes.string.isRequired,
+  maxLength: PropTypes.number,
+  placeholder: PropTypes.string,
 };
 
 const CounterLoaderBox = styled(Box)`

diff --git a/admin/src/components/Input/index.jsx b/admin/src/components/Input/index.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 import { Field, Flex } from '@strapi/design-system';
 
 import { Editor } from './components/Editor';
@@ -10,27 +9,32 @@ const Input = ({
   attribute,
   value = '',
   labelAction = null,
+  label,
   disabled = false,
   error = null,
   required = false,
   hint = '',
-  intlLabel
+  placeholder,
 }) => {
-  const { formatMessage } = useIntl();
   const { preset, maxLengthCharacters, ...options } = attribute.options;
 
   return (
-    <Field.Root name={name} id={name} error={error} hint={hint}>
+    <Field.Root
+      name={name}
+      id={name}
+      error={error}
+      hint={hint}
+      required={required}
+    >
       <Flex direction="column" alignItems="stretch" gap={1}>
-        <Field.Label action={labelAction} required={required}>
-          {intlLabel ? formatMessage(intlLabel) : name}
-        </Field.Label>
+        <Field.Label action={labelAction}>{label}</Field.Label>
         <Editor
           disabled={disabled}
           name={name}
           value={value}
           presetName={preset}
           maxLength={maxLengthCharacters}
+          placeholder={placeholder}
         />
         <Field.Hint />
         <Field.Error />
@@ -40,14 +44,16 @@ const Input = ({
 };
 
 Input.propTypes = {
-  attribute: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
-  hint: PropTypes.string,
+  attribute: PropTypes.object.isRequired,
+  value: PropTypes.string,
+  labelAction: PropTypes.object,
+  label: PropTypes.string,
   disabled: PropTypes.bool,
   error: PropTypes.string,
-  labelAction: PropTypes.object,
   required: PropTypes.bool,
-  value: PropTypes.string,
+  hint: PropTypes.string,
+  placeholder: PropTypes.string,
 };
 
-export default Input;
+export default Input;
diff --git a/admin/src/components/Input/theme/common.js b/admin/src/components/Input/theme/common.js
@@ -228,4 +228,9 @@ export const common = css`
       }
     }
   }
+
+  .ck.ck-editor__editable > .ck-placeholder::before {
+    color: var(--ck-color-editor-base-text);
+    opacity: 0.65;
+  }
 `;