Add Codemirror search functionality

Update Codemirror to latest
Update Codemirror typings to latest
Add code mirror search functionality (include needed addons)
Add some styling of replace search buttons by adding css to StyledContainer in CodeEditordd
Add extraKeys: esc when search dialog found something and marked it - to clear the serach contents (without need of calling the serach again)
Add extraKeys: Alt+F - persistant find/search to have dialog persistent while searching

Author: Komediruzecki

package-lock.json

@@ -46,7 +46,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.6.0",
     "@testing-library/react-hooks": "^2.0.1",
-    "@types/codemirror": "0.0.77",
+    "@types/codemirror": "0.0.98",
     "@types/dashify": "^1.0.0",
     "@types/filenamify": "^2.0.2",
     "@types/history": "^4.7.3",
@@ -110,7 +110,7 @@
     "@mdi/react": "^1.2.1",
     "aws-amplify": "^1.2.4",
     "classcat": "^4.0.2",
-    "codemirror": "^5.49.0",
+    "codemirror": "^5.58.2",
     "codemirror-abap": "^0.2.2",
     "coffeescript": "^2.4.1",
     "copy-to-clipboard": "^3.3.1",

package.json

@@ -1,6 +1,7 @@
 import React from 'react'
 import CodeMirror, { getCodeMirrorTheme } from '../../lib/CodeMirror'
 import styled from '../../lib/styled'
+import { borderRight } from '../../lib/styled/styleFunctions'
 import {
   EditorIndentTypeOptions,
   EditorIndentSizeOptions,
@@ -11,6 +12,27 @@ const StyledContainer = styled.div`
   .CodeMirror {
     font-family: inherit;
   }
+
+  .CodeMirror-dialog button {
+    // font-size: 70%;
+    background-color: transparent;
+    cursor: pointer;
+    height: 26px;
+    line-height: 26px;
+    padding: 0 15px;
+    transition: color 200ms ease-in-out;
+    color: ${({ theme }) => theme.primaryDarkerColor};
+    border: none;
+    ${borderRight}
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .CodeMirror-dialog button:hover {
+    color: ${({ theme }) => theme.primaryButtonLabelColor};
+    background-color: ${({ theme }) => theme.primaryColor};
+  }
 `
 
 const defaultCodeMirrorOptions: CodeMirror.EditorConfiguration = {
@@ -60,6 +82,8 @@ class CodeEditor extends React.Component<CodeEditorProps> {
       extraKeys: {
         Enter: 'newlineAndIndentContinueMarkdownList',
         Tab: 'indentMore',
+        "Alt-F": "findPersistent",
+        Esc: "clearSearch"
       },
     })
     this.codeMirror.on('change', this.handleCodeMirrorChange)

src/components/atoms/CodeEditor.tsx

@@ -3,6 +3,11 @@ import 'codemirror/addon/runmode/runmode'
 import 'codemirror/addon/mode/overlay'
 import 'codemirror/addon/comment/comment'
 import 'codemirror/addon/edit/continuelist'
+import 'codemirror/addon/dialog/dialog'
+import 'codemirror/addon/search/search'
+import 'codemirror/addon/search/searchcursor'
+import 'codemirror/addon/search/jump-to-line'
+import 'codemirror/addon/dialog/dialog.css'
 import 'codemirror/mode/markdown/markdown'
 import 'codemirror/mode/gfm/gfm'
 import 'codemirror/mode/xml/xml'