mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
[cm6] Show Regex errors in find & replace (#12720)
* [cm6] Show Regex errors in find & replace * cleanup, isInvalidRegExp function * no state variable, less color var * use @brand-dager * using var(--ol-cm-search-form-focus-shadow) * using state-danger-border GitOrigin-RevId: 844c9dfee5a56d2a7494cd86c266acbe9eacd033
This commit is contained in:
parent
e311a22686
commit
cd689e4e1f
4 changed files with 28 additions and 1 deletions
|
@ -225,7 +225,13 @@ const CodeMirrorSearchForm: FC = () => {
|
|||
role="search"
|
||||
>
|
||||
<div className="ol-cm-search-controls">
|
||||
<InputGroup bsSize="small" className="ol-cm-search-input-group">
|
||||
<InputGroup
|
||||
bsSize="small"
|
||||
className={classnames('ol-cm-search-input-group', {
|
||||
'ol-cm-search-input-error':
|
||||
query.regexp && isInvalidRegExp(query.search),
|
||||
})}
|
||||
>
|
||||
<FormControl
|
||||
type="text"
|
||||
name="search"
|
||||
|
@ -419,4 +425,13 @@ const CodeMirrorSearchForm: FC = () => {
|
|||
)
|
||||
}
|
||||
|
||||
function isInvalidRegExp(source: string) {
|
||||
try {
|
||||
RegExp(source)
|
||||
return false
|
||||
} catch {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
export default CodeMirrorSearchForm
|
||||
|
|
|
@ -164,6 +164,8 @@ export const search = () => {
|
|||
background: 'var(--ol-blue-gray-1)',
|
||||
'--ol-cm-search-form-focus-shadow':
|
||||
'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%)',
|
||||
'--ol-cm-search-form-error-shadow':
|
||||
'inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px var(--input-shadow-danger-color)',
|
||||
},
|
||||
'.ol-cm-search-controls': {
|
||||
display: 'grid',
|
||||
|
@ -218,6 +220,12 @@ export const search = () => {
|
|||
boxShadow: 'var(--ol-cm-search-form-focus-shadow)',
|
||||
},
|
||||
},
|
||||
'.ol-cm-search-input-group.ol-cm-search-input-error': {
|
||||
'&:focus-within': {
|
||||
borderColor: 'var(--input-border-danger)',
|
||||
boxShadow: 'var(--ol-cm-search-form-error-shadow)',
|
||||
},
|
||||
},
|
||||
'.input-group .ol-cm-search-form-input': {
|
||||
border: 'none',
|
||||
},
|
||||
|
|
|
@ -13,6 +13,8 @@
|
|||
--input-border: @input-border;
|
||||
--input-border-radius: @input-border-radius;
|
||||
--input-border-focus: @input-border-focus;
|
||||
--input-border-danger: @state-danger-border;
|
||||
--input-shadow-danger-color: fade(@state-danger-border, 50%);
|
||||
|
||||
--btn-border-radius-base: @btn-border-radius-base;
|
||||
--btn-default-bg: @btn-default-bg;
|
||||
|
|
|
@ -63,6 +63,8 @@
|
|||
--input-border: @input-border;
|
||||
--input-border-radius: @input-border-radius;
|
||||
--input-border-focus: @input-border-focus;
|
||||
--input-border-danger: @state-danger-border;
|
||||
--input-shadow-danger-color: fade(@state-danger-border, 50%);
|
||||
|
||||
// border
|
||||
--btn-border-radius-base: @btn-border-radius-base;
|
||||
|
|
Loading…
Reference in a new issue