QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-05-31 13:19:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: refactor react-syntax-highlither to handle dark themes (#34028)

Browse Source
This commit is contained in:
Maxime Beauchemin
2025-07-04 11:44:11 -07:00
committed by GitHub
parent 5d6a979cd0
commit a0f9efd45e
17 changed files with 805 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
superset-frontend/src/explore/components/controls/ViewQuery.tsx
View File

@@ -26,15 +26,13 @@ import {
} from 'react';
import rison from 'rison';
import { styled, SupersetClient, t } from '@superset-ui/core';
import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
import { Icons, Switch, Button, Skeleton } from '@superset-ui/core/components';
import { CopyToClipboard } from 'src/components';
import { CopyButton } from 'src/explore/components/DataTableControl';
import markdownSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown';
import htmlSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/htmlbars';
import sqlSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
import jsonSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
import CodeSyntaxHighlighter, {
SupportedLanguage,
preloadLanguages,
} from '@superset-ui/core/components/CodeSyntaxHighlighter';
import { useHistory } from 'react-router-dom';
const CopyButtonViewQuery = styled(CopyButton)`
@@ -45,15 +43,10 @@ const CopyButtonViewQuery = styled(CopyButton)`
`}
`;
SyntaxHighlighter.registerLanguage('markdown', markdownSyntax);
SyntaxHighlighter.registerLanguage('html', htmlSyntax);
SyntaxHighlighter.registerLanguage('sql', sqlSyntax);
SyntaxHighlighter.registerLanguage('json', jsonSyntax);
export interface ViewQueryProps {
sql: string;
datasource: string;
language?: string;
language?: SupportedLanguage;
}
const StyledSyntaxContainer = styled.div`
@@ -76,7 +69,7 @@ const StyledHeaderActionContainer = styled.div`
column-gap: ${({ theme }) => theme.sizeUnit * 2}px;
`;
const StyledSyntaxHighlighter = styled(SyntaxHighlighter)`
const StyledThemedSyntaxHighlighter = styled(CodeSyntaxHighlighter)`
flex: 1;
`;
@@ -97,6 +90,11 @@ const ViewQuery: FC<ViewQueryProps> = props => {
const history = useHistory();
const currentSQL = (showFormatSQL ? formattedSQL : sql) ?? sql;
// Preload the language when component mounts to ensure smooth experience
useEffect(() => {
preloadLanguages([language]);
}, [language]);
const formatCurrentQuery = useCallback(() => {
if (formattedSQL) {
setShowFormatSQL(val => !val);
@@ -179,9 +177,12 @@ const ViewQuery: FC<ViewQueryProps> = props => {
</StyledHeaderMenuContainer>
{!formattedSQL && <Skeleton active />}
{formattedSQL && (
<StyledSyntaxHighlighter language={language} style={github}>
<StyledThemedSyntaxHighlighter
language={language}
customStyle={{ flex: 1 }}
>
{currentSQL}
</StyledSyntaxHighlighter>
</StyledThemedSyntaxHighlighter>
)}
</StyledSyntaxContainer>
);