[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
2023-04-27 08:05:14 +00:00
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