fix: correct field data display (placeholder), #166

admin/src/Input/components/Editor.js

@@ -20,6 +20,7 @@ export const Editor = ({
   disabled = false,
   presetName,
   maxLength,
+  placeholder
 }) => {
   const [editorInstance, setEditorInstance] = useState(false);
 
@@ -42,7 +43,20 @@ export const Editor = ({
         presetName,
         handleToggleMediaLib
       );
-      setPreset(currentPreset);
+
+      if (placeholder) {
+        const clonedPreset = {
+          ...currentPreset,
+          editorConfig: {
+            ...currentPreset.editorConfig,
+            placeholder: placeholder.defaultMessage,
+          },
+        };
+
+        setPreset(clonedPreset);
+      } else {
+        setPreset(currentPreset);
+      }
     })();
   }, []);
 

admin/src/Input/index.js

@@ -11,19 +11,19 @@ import { Stack } from '@strapi/design-system';
 
 import { Editor } from './components/Editor';
 
-const Wysiwyg = React.forwardRef((props, ref) => {
-  const {
-    name,
-    attribute,
-    onChange,
-    value,
-    intlLabel,
-    labelAction,
-    disabled,
-    error,
-    description,
-    required,
-  } = props;
+const Wysiwyg = ({
+  name,
+  attribute,
+  onChange,
+  value,
+  intlLabel,
+  labelAction,
+  disabled,
+  error,
+  description,
+  required,
+  placeholder,
+}) => {
   const { formatMessage } = useIntl();
   const { preset, maxLengthCharacters, ...options } = attribute.options;
 
@@ -44,13 +44,14 @@ const Wysiwyg = React.forwardRef((props, ref) => {
           value={value}
           presetName={preset}
           maxLength={maxLengthCharacters}
+          placeholder={placeholder}
         />
         <FieldHint />
         <FieldError />
       </Stack>
     </Field>
   );
-});
+};
 
 Wysiwyg.propTypes = {
   intlLabel: PropTypes.object.isRequired,
@@ -63,5 +64,7 @@ Wysiwyg.propTypes = {
   labelAction: PropTypes.object,
   required: PropTypes.bool,
   value: PropTypes.string,
+  placeholder: PropTypes.object,
 };
+
 export default Wysiwyg;

admin/src/Input/theme/common.js

@@ -227,4 +227,9 @@ export const common = css`
       }
     }
   }
+
+  .ck.ck-editor__editable > .ck-placeholder::before {
+    color: var(--ck-color-editor-base-text);
+    opacity: 0.65;
+  }
 `;