refactor: move textarea styled-component to the DocumentEditor component file

This commit is contained in:
Donus(ADA) 2023-10-09 13:28:20 +07:00
parent 01c298c58e
commit 33cd30315a
4 changed files with 35 additions and 33 deletions

View File

@ -1,5 +0,0 @@
const Editor = (props) => {
return <textarea {...props} />;
};
export default Editor;

View File

@ -0,0 +1,33 @@
import styled from 'styled-components';
const StyledEditor = styled.textarea`
height: inherit;
background: ${(props) => props.theme.bg};
color: ${(props) => props.theme.text};
border: solid 1px ${(props) => props.theme.modal.input.border};
padding: 1em;
resize: none;
&:focus,
&:active,
&:focus-within,
&:focus-visible,
&:target {
border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
outline: ${(props) => props.theme.modal.input.focusBorder} !important;
}
::-webkit-scrollbar {
width: 0px;
}
::-webkit-scrollbar-button {
display: none;
}
`;
const DocumentationEditor = (props) => {
return <StyledEditor {...props} />;
};
export default DocumentationEditor;

View File

@ -18,32 +18,6 @@ const StyledContentWrapper = styled.div`
::-webkit-scrollbar-button {
display: none;
}
textarea {
height: inherit;
background: ${(props) => props.theme.bg};
color: ${(props) => props.theme.text};
border: solid 1px ${(props) => props.theme.modal.input.border};
padding: 1em;
resize: none;
&:focus,
&:active,
&:focus-within,
&:focus-visible,
&:target {
border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
outline: ${(props) => props.theme.modal.input.focusBorder} !important;
}
::-webkit-scrollbar {
width: 0px;
}
::-webkit-scrollbar-button {
display: none;
}
}
`;
export default StyledContentWrapper;

View File

@ -7,7 +7,7 @@ import { useTheme } from 'providers/Theme/index';
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { findCollectionByUid, findItemInCollection } from 'utils/collections/index';
import Editor from './DocumentEditor';
import DocumentationEditor from './DocumentationEditor';
import MarkdownBody from './MarkdownBody';
import StyledContentWrapper from './StyledContentWrapper';
import StyledWrapper from './StyledWrapper';
@ -90,7 +90,7 @@ const Documentation = () => {
<StyledContentWrapper theme={themeContext.theme}>
{isEditing ? (
<Editor className="w-full h-full" onChange={handleChange} value={docs} />
<DocumentationEditor className="w-full h-full" onChange={handleChange} value={docs} />
) : (
<MarkdownBody OnDoubleClick={toggleViewMode} theme={themeContext.theme}>
{htmlFromMarkdown}