pt
/
superset
mirror of https://github.com/apache/superset.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(sqllab): invalid css scope for ace editor autocomplete (#28156)

This commit is contained in:
JUST.in DO IT 2024-04-26 09:48:13 -07:00 committed by GitHub
parent cdbf8f394a
commit 7e94dc5b40
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 39 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
View File

@ -19,8 +19,10 @@
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import type { IAceEditor } from 'react-ace/lib/types'; import type { IAceEditor } from 'react-ace/lib/types';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { css, styled, usePrevious } from '@superset-ui/core'; import { css, styled, usePrevious, useTheme } from '@superset-ui/core';
import { Global } from '@emotion/react';
import { SQL_EDITOR_LEFTBAR_WIDTH } from 'src/SqlLab/constants';
import { queryEditorSetSelectedText } from 'src/SqlLab/actions/sqlLab'; import { queryEditorSetSelectedText } from 'src/SqlLab/actions/sqlLab';
import { FullSQLEditor as AceEditor } from 'src/components/AsyncAceEditor'; import { FullSQLEditor as AceEditor } from 'src/components/AsyncAceEditor';
import type { KeyboardShortcut } from 'src/SqlLab/components/KeyboardShortcutButton'; import type { KeyboardShortcut } from 'src/SqlLab/components/KeyboardShortcutButton';
@ -54,16 +56,6 @@ const StyledAceEditor = styled(AceEditor)`
font-feature-settings: font-feature-settings:
'liga' off, 'liga' off,
'calt' off; 'calt' off;
&.ace_autocomplete {
// Use !important because Ace Editor applies extra CSS at the last second
// when opening the autocomplete.
width: ${theme.gridUnit * 130}px !important;
}
.ace_scroller {
background-color: ${theme.colors.grayscale.light4};
}
} }
`} `}
`; `;
@ -182,20 +174,44 @@ const AceEditorWrapper = ({
}, },
!autocomplete, !autocomplete,
); );
const theme = useTheme();
return ( return (
<StyledAceEditor <>
keywords={keywords} <Global
onLoad={onEditorLoad} styles={css`
onBlur={onBlurSql} .ace_text-layer {
height={height} width: 100% !important;
onChange={onChangeText} }
width="100%"
editorProps={{ $blockScrolling: true }} .ace_autocomplete {
enableLiveAutocompletion={autocomplete} // Use !important because Ace Editor applies extra CSS at the last second
value={sql} // when opening the autocomplete.
annotations={annotations} width: ${theme.gridUnit * 130}px !important;
/> }
.ace_tooltip {
max-width: ${SQL_EDITOR_LEFTBAR_WIDTH}px;
}
.ace_scroller {
background-color: ${theme.colors.grayscale.light4};
}
`}
/>
<StyledAceEditor
keywords={keywords}
onLoad={onEditorLoad}
onBlur={onBlurSql}
height={height}
onChange={onChangeText}
width="100%"
editorProps={{ $blockScrolling: true }}
enableLiveAutocompletion={autocomplete}
value={sql}
annotations={annotations}
/>
</>
); );
}; };