mirror of
https://github.com/usebruno/bruno.git
synced 2024-12-23 15:19:01 +01:00
refactor: move textarea styled-component to the DocumentEditor component file
This commit is contained in:
parent
01c298c58e
commit
33cd30315a
@ -1,5 +0,0 @@
|
||||
const Editor = (props) => {
|
||||
return <textarea {...props} />;
|
||||
};
|
||||
|
||||
export default Editor;
|
@ -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;
|
@ -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;
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user