mirror of
https://github.com/usebruno/bruno.git
synced 2024-12-23 15:19:01 +01:00
feat(#BRU-10) - codeeditor syntax colors for system theme (#1595)
This commit is contained in:
parent
fee3416c85
commit
e2d754702a
@ -11,7 +11,7 @@ import StyledWrapper from './StyledWrapper';
|
|||||||
|
|
||||||
const Docs = ({ collection }) => {
|
const Docs = ({ collection }) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const { storedTheme } = useTheme();
|
const { displayedTheme } = useTheme();
|
||||||
const [isEditing, setIsEditing] = useState(false);
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
const docs = get(collection, 'root.docs', '');
|
const docs = get(collection, 'root.docs', '');
|
||||||
const preferences = useSelector((state) => state.app.preferences);
|
const preferences = useSelector((state) => state.app.preferences);
|
||||||
@ -40,7 +40,7 @@ const Docs = ({ collection }) => {
|
|||||||
{isEditing ? (
|
{isEditing ? (
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
collection={collection}
|
collection={collection}
|
||||||
theme={storedTheme}
|
theme={displayedTheme}
|
||||||
value={docs || ''}
|
value={docs || ''}
|
||||||
onEdit={onEdit}
|
onEdit={onEdit}
|
||||||
onSave={onSave}
|
onSave={onSave}
|
||||||
|
@ -12,7 +12,7 @@ const Script = ({ collection }) => {
|
|||||||
const requestScript = get(collection, 'root.request.script.req', '');
|
const requestScript = get(collection, 'root.request.script.req', '');
|
||||||
const responseScript = get(collection, 'root.request.script.res', '');
|
const responseScript = get(collection, 'root.request.script.res', '');
|
||||||
|
|
||||||
const { storedTheme } = useTheme();
|
const { displayedTheme } = useTheme();
|
||||||
const preferences = useSelector((state) => state.app.preferences);
|
const preferences = useSelector((state) => state.app.preferences);
|
||||||
|
|
||||||
const onRequestScriptEdit = (value) => {
|
const onRequestScriptEdit = (value) => {
|
||||||
@ -44,7 +44,7 @@ const Script = ({ collection }) => {
|
|||||||
<CodeEditor
|
<CodeEditor
|
||||||
collection={collection}
|
collection={collection}
|
||||||
value={requestScript || ''}
|
value={requestScript || ''}
|
||||||
theme={storedTheme}
|
theme={displayedTheme}
|
||||||
onEdit={onRequestScriptEdit}
|
onEdit={onRequestScriptEdit}
|
||||||
mode="javascript"
|
mode="javascript"
|
||||||
onSave={handleSave}
|
onSave={handleSave}
|
||||||
@ -56,7 +56,7 @@ const Script = ({ collection }) => {
|
|||||||
<CodeEditor
|
<CodeEditor
|
||||||
collection={collection}
|
collection={collection}
|
||||||
value={responseScript || ''}
|
value={responseScript || ''}
|
||||||
theme={storedTheme}
|
theme={displayedTheme}
|
||||||
onEdit={onResponseScriptEdit}
|
onEdit={onResponseScriptEdit}
|
||||||
mode="javascript"
|
mode="javascript"
|
||||||
onSave={handleSave}
|
onSave={handleSave}
|
||||||
|
@ -11,7 +11,7 @@ const Tests = ({ collection }) => {
|
|||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const tests = get(collection, 'root.request.tests', '');
|
const tests = get(collection, 'root.request.tests', '');
|
||||||
|
|
||||||
const { storedTheme } = useTheme();
|
const { displayedTheme } = useTheme();
|
||||||
const preferences = useSelector((state) => state.app.preferences);
|
const preferences = useSelector((state) => state.app.preferences);
|
||||||
|
|
||||||
const onEdit = (value) => {
|
const onEdit = (value) => {
|
||||||
@ -30,7 +30,7 @@ const Tests = ({ collection }) => {
|
|||||||
<CodeEditor
|
<CodeEditor
|
||||||
collection={collection}
|
collection={collection}
|
||||||
value={tests || ''}
|
value={tests || ''}
|
||||||
theme={storedTheme}
|
theme={displayedTheme}
|
||||||
onEdit={onEdit}
|
onEdit={onEdit}
|
||||||
mode="javascript"
|
mode="javascript"
|
||||||
onSave={handleSave}
|
onSave={handleSave}
|
||||||
|
@ -11,7 +11,7 @@ import StyledWrapper from './StyledWrapper';
|
|||||||
|
|
||||||
const Documentation = ({ item, collection }) => {
|
const Documentation = ({ item, collection }) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const { storedTheme } = useTheme();
|
const { displayedTheme } = useTheme();
|
||||||
const [isEditing, setIsEditing] = useState(false);
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
const docs = item.draft ? get(item, 'draft.request.docs') : get(item, 'request.docs');
|
const docs = item.draft ? get(item, 'draft.request.docs') : get(item, 'request.docs');
|
||||||
const preferences = useSelector((state) => state.app.preferences);
|
const preferences = useSelector((state) => state.app.preferences);
|
||||||
@ -45,7 +45,7 @@ const Documentation = ({ item, collection }) => {
|
|||||||
{isEditing ? (
|
{isEditing ? (
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
collection={collection}
|
collection={collection}
|
||||||
theme={storedTheme}
|
theme={displayedTheme}
|
||||||
font={get(preferences, 'font.codeFont', 'default')}
|
font={get(preferences, 'font.codeFont', 'default')}
|
||||||
value={docs || ''}
|
value={docs || ''}
|
||||||
onEdit={onEdit}
|
onEdit={onEdit}
|
||||||
|
@ -10,7 +10,7 @@ import StyledWrapper from './StyledWrapper';
|
|||||||
const GraphQLVariables = ({ variables, item, collection }) => {
|
const GraphQLVariables = ({ variables, item, collection }) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
const { storedTheme } = useTheme();
|
const { displayedTheme } = useTheme();
|
||||||
const preferences = useSelector((state) => state.app.preferences);
|
const preferences = useSelector((state) => state.app.preferences);
|
||||||
|
|
||||||
const onEdit = (value) => {
|
const onEdit = (value) => {
|
||||||
@ -31,7 +31,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
|
|||||||
<CodeEditor
|
<CodeEditor
|
||||||
collection={collection}
|
collection={collection}
|
||||||
value={variables || ''}
|
value={variables || ''}
|
||||||
theme={storedTheme}
|
theme={displayedTheme}
|
||||||
font={get(preferences, 'font.codeFont', 'default')}
|
font={get(preferences, 'font.codeFont', 'default')}
|
||||||
onEdit={onEdit}
|
onEdit={onEdit}
|
||||||
mode="javascript"
|
mode="javascript"
|
||||||
|
@ -13,7 +13,7 @@ const RequestBody = ({ item, collection }) => {
|
|||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
|
const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
|
||||||
const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
|
const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
|
||||||
const { storedTheme } = useTheme();
|
const { displayedTheme } = useTheme();
|
||||||
const preferences = useSelector((state) => state.app.preferences);
|
const preferences = useSelector((state) => state.app.preferences);
|
||||||
|
|
||||||
const onEdit = (value) => {
|
const onEdit = (value) => {
|
||||||
@ -48,7 +48,7 @@ const RequestBody = ({ item, collection }) => {
|
|||||||
<StyledWrapper className="w-full">
|
<StyledWrapper className="w-full">
|
||||||
<CodeEditor
|
<CodeEditor
|
||||||
collection={collection}
|
collection={collection}
|
||||||
theme={storedTheme}
|
theme={displayedTheme}
|
||||||
font={get(preferences, 'font.codeFont', 'default')}
|
font={get(preferences, 'font.codeFont', 'default')}
|
||||||
value={bodyContent[bodyMode] || ''}
|
value={bodyContent[bodyMode] || ''}
|
||||||
onEdit={onEdit}
|
onEdit={onEdit}
|
||||||
|
@ -12,7 +12,7 @@ const Script = ({ item, collection }) => {
|
|||||||
const requestScript = item.draft ? get(item, 'draft.request.script.req') : get(item, 'request.script.req');
|
const requestScript = item.draft ? get(item, 'draft.request.script.req') : get(item, 'request.script.req');
|
||||||
const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');
|
const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');
|
||||||
|
|
||||||
const { storedTheme } = useTheme();
|
const { displayedTheme } = useTheme();
|
||||||
const preferences = useSelector((state) => state.app.preferences);
|
const preferences = useSelector((state) => state.app.preferences);
|
||||||
|
|
||||||
const onRequestScriptEdit = (value) => {
|
const onRequestScriptEdit = (value) => {
|
||||||
@ -45,7 +45,7 @@ const Script = ({ item, collection }) => {
|
|||||||
<CodeEditor
|
<CodeEditor
|
||||||
collection={collection}
|
collection={collection}
|
||||||
value={requestScript || ''}
|
value={requestScript || ''}
|
||||||
theme={storedTheme}
|
theme={displayedTheme}
|
||||||
font={get(preferences, 'font.codeFont', 'default')}
|
font={get(preferences, 'font.codeFont', 'default')}
|
||||||
onEdit={onRequestScriptEdit}
|
onEdit={onRequestScriptEdit}
|
||||||
mode="javascript"
|
mode="javascript"
|
||||||
@ -58,7 +58,7 @@ const Script = ({ item, collection }) => {
|
|||||||
<CodeEditor
|
<CodeEditor
|
||||||
collection={collection}
|
collection={collection}
|
||||||
value={responseScript || ''}
|
value={responseScript || ''}
|
||||||
theme={storedTheme}
|
theme={displayedTheme}
|
||||||
font={get(preferences, 'font.codeFont', 'default')}
|
font={get(preferences, 'font.codeFont', 'default')}
|
||||||
onEdit={onResponseScriptEdit}
|
onEdit={onResponseScriptEdit}
|
||||||
mode="javascript"
|
mode="javascript"
|
||||||
|
@ -11,7 +11,7 @@ const Tests = ({ item, collection }) => {
|
|||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const tests = item.draft ? get(item, 'draft.request.tests') : get(item, 'request.tests');
|
const tests = item.draft ? get(item, 'draft.request.tests') : get(item, 'request.tests');
|
||||||
|
|
||||||
const { storedTheme } = useTheme();
|
const { displayedTheme } = useTheme();
|
||||||
const preferences = useSelector((state) => state.app.preferences);
|
const preferences = useSelector((state) => state.app.preferences);
|
||||||
|
|
||||||
const onEdit = (value) => {
|
const onEdit = (value) => {
|
||||||
@ -32,7 +32,7 @@ const Tests = ({ item, collection }) => {
|
|||||||
<CodeEditor
|
<CodeEditor
|
||||||
collection={collection}
|
collection={collection}
|
||||||
value={tests || ''}
|
value={tests || ''}
|
||||||
theme={storedTheme}
|
theme={displayedTheme}
|
||||||
font={get(preferences, 'font.codeFont', 'default')}
|
font={get(preferences, 'font.codeFont', 'default')}
|
||||||
onEdit={onEdit}
|
onEdit={onEdit}
|
||||||
mode="javascript"
|
mode="javascript"
|
||||||
|
@ -19,7 +19,7 @@ const QueryResultPreview = ({
|
|||||||
collection,
|
collection,
|
||||||
mode,
|
mode,
|
||||||
disableRunEventListener,
|
disableRunEventListener,
|
||||||
storedTheme
|
displayedTheme
|
||||||
}) => {
|
}) => {
|
||||||
const preferences = useSelector((state) => state.app.preferences);
|
const preferences = useSelector((state) => state.app.preferences);
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
@ -71,7 +71,7 @@ const QueryResultPreview = ({
|
|||||||
<CodeEditor
|
<CodeEditor
|
||||||
collection={collection}
|
collection={collection}
|
||||||
font={get(preferences, 'font.codeFont', 'default')}
|
font={get(preferences, 'font.codeFont', 'default')}
|
||||||
theme={storedTheme}
|
theme={displayedTheme}
|
||||||
onRun={onRun}
|
onRun={onRun}
|
||||||
value={formattedData}
|
value={formattedData}
|
||||||
mode={mode}
|
mode={mode}
|
||||||
|
@ -51,7 +51,7 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
|
|||||||
const mode = getCodeMirrorModeBasedOnContentType(contentType, data);
|
const mode = getCodeMirrorModeBasedOnContentType(contentType, data);
|
||||||
const [filter, setFilter] = useState(null);
|
const [filter, setFilter] = useState(null);
|
||||||
const formattedData = formatResponse(data, mode, filter);
|
const formattedData = formatResponse(data, mode, filter);
|
||||||
const { storedTheme } = useTheme();
|
const { displayedTheme } = useTheme();
|
||||||
|
|
||||||
const debouncedResultFilterOnChange = debounce((e) => {
|
const debouncedResultFilterOnChange = debounce((e) => {
|
||||||
setFilter(e.target.value);
|
setFilter(e.target.value);
|
||||||
@ -132,7 +132,7 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
|
|||||||
collection={collection}
|
collection={collection}
|
||||||
allowedPreviewModes={allowedPreviewModes}
|
allowedPreviewModes={allowedPreviewModes}
|
||||||
disableRunEventListener={disableRunEventListener}
|
disableRunEventListener={disableRunEventListener}
|
||||||
storedTheme={storedTheme}
|
displayedTheme={displayedTheme}
|
||||||
/>
|
/>
|
||||||
{queryFilterEnabled && <QueryResultFilter onChange={debouncedResultFilterOnChange} mode={mode} />}
|
{queryFilterEnabled && <QueryResultFilter onChange={debouncedResultFilterOnChange} mode={mode} />}
|
||||||
</>
|
</>
|
||||||
|
@ -11,7 +11,7 @@ import { IconCopy } from '@tabler/icons';
|
|||||||
import { findCollectionByItemUid } from '../../../../../../../utils/collections/index';
|
import { findCollectionByItemUid } from '../../../../../../../utils/collections/index';
|
||||||
|
|
||||||
const CodeView = ({ language, item }) => {
|
const CodeView = ({ language, item }) => {
|
||||||
const { storedTheme } = useTheme();
|
const { displayedTheme } = useTheme();
|
||||||
const preferences = useSelector((state) => state.app.preferences);
|
const preferences = useSelector((state) => state.app.preferences);
|
||||||
const { target, client, language: lang } = language;
|
const { target, client, language: lang } = language;
|
||||||
const requestHeaders = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
|
const requestHeaders = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
|
||||||
@ -45,7 +45,7 @@ const CodeView = ({ language, item }) => {
|
|||||||
readOnly
|
readOnly
|
||||||
value={snippet}
|
value={snippet}
|
||||||
font={get(preferences, 'font.codeFont', 'default')}
|
font={get(preferences, 'font.codeFont', 'default')}
|
||||||
theme={storedTheme}
|
theme={displayedTheme}
|
||||||
mode={lang}
|
mode={lang}
|
||||||
/>
|
/>
|
||||||
</StyledWrapper>
|
</StyledWrapper>
|
||||||
|
Loading…
Reference in New Issue
Block a user