[QA] WYSIWYG placeholder color (#11662)

* added placeholder plugin and updated placeholder plugin to match UI

* updated tests
This commit is contained in:
ronronscelestes 2021-11-23 15:33:17 +01:00 committed by GitHub
parent fcdc6fa9c6
commit 3aeaadff4f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 3 deletions

View File

@ -31,13 +31,14 @@ const Editor = ({
},
readOnly: false,
smartIndent: false,
placeholder,
});
CodeMirror.commands.newlineAndIndentContinueMarkdownList = newlineAndIndentContinueMarkdownList;
editorRef.current.on('change', doc => {
onChangeRef.current({ target: { name, value: doc.getValue(), type: 'wysiwyg' } });
});
}, [editorRef, textareaRef, name]);
}, [editorRef, textareaRef, name, placeholder]);
useEffect(() => {
if (value && !editorRef.current.state.focused) {
@ -65,7 +66,7 @@ const Editor = ({
return (
<EditorAndPreviewWrapper>
<EditorStylesContainer disabled={disabled || isPreviewMode}>
<textarea ref={textareaRef} placeholder={placeholder} />
<textarea ref={textareaRef} />
</EditorStylesContainer>
{isPreviewMode && <PreviewWysiwyg data={value} />}
</EditorAndPreviewWrapper>

View File

@ -5,6 +5,9 @@ import styled from 'styled-components';
export const EditorStylesContainer = styled.div`
cursor: ${({ disabled }) => (disabled ? 'not-allowed !important' : 'auto')};
/* BASICS */
.CodeMirror-placeholder {
color: ${({ theme }) => theme.colors.neutral600} !important;
}
.CodeMirror {
/* Set height, width, borders, and global font properties here */

View File

@ -610,6 +610,10 @@ describe('Wysiwyg render and actions buttons', () => {
cursor: not-allowed !important;
}
.c32 .CodeMirror-placeholder {
color: #666687 !important;
}
.c32 .CodeMirror {
font-size: 0.875rem;
height: 290px;
@ -1237,7 +1241,6 @@ describe('Wysiwyg render and actions buttons', () => {
disabled=""
>
<textarea
placeholder=""
style="display: none;"
/>
<div