feat(#BRU-10) - codeeditor syntax colors for system theme (#1595)

This commit is contained in:
lohit 2024-02-19 17:30:49 +05:30 committed by GitHub
parent fee3416c85
commit e2d754702a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 24 additions and 24 deletions

View File

@ -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}

View File

@ -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}

View File

@ -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}

View File

@ -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}

View File

@ -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"

View File

@ -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}

View File

@ -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"

View File

@ -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"

View File

@ -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}

View File

@ -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} />}
</> </>

View File

@ -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>