feat: Add find and replace interface (#5642)

shared/editor/components/Styles.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-irregular-whitespace */
 import { lighten, transparentize } from "polished";
-import styled, { DefaultTheme, css } from "styled-components";
+import styled, { DefaultTheme, css, keyframes } from "styled-components";
 
 export type Props = {
   rtl: boolean;
@@ -11,6 +11,12 @@ export type Props = {
   theme: DefaultTheme;
 };
 
+export const pulse = keyframes`
+  0% { box-shadow: 0 0 0 1px rgba(255, 213, 0, 0.75) }
+  50% { box-shadow: 0 0 0 4px rgba(255, 213, 0, 0.75) }
+  100% { box-shadow: 0 0 0 1px rgba(255, 213, 0, 0.75) }
+`;
+
 const codeMarkCursor = () => css`
   /* Based on https://github.com/curvenote/editor/blob/main/packages/prosemirror-codemark/src/codemark.css */
   .no-cursor {
@@ -232,6 +238,17 @@ const codeBlockStyle = (props: Props) => css`
   }
 `;
 
+const findAndReplaceStyle = () => css`
+  .find-result {
+    background: rgba(255, 213, 0, 0.25);
+
+    &.current-result {
+      background: rgba(255, 213, 0, 0.75);
+      animation: ${pulse} 150ms 1;
+    }
+  }
+`;
+
 const style = (props: Props) => `
 flex-grow: ${props.grow ? 1 : 0};
 justify-content: start;
@@ -1481,6 +1498,7 @@ const EditorContainer = styled.div<Props>`
   ${mathStyle}
   ${codeMarkCursor}
   ${codeBlockStyle}
+  ${findAndReplaceStyle}
 `;
 
 export default EditorContainer;