diff --git a/packages/components/src/entry-input-layout.tsx b/packages/components/src/entry-input-layout.tsx index 98c53a6..c7e5ba2 100644 --- a/packages/components/src/entry-input-layout.tsx +++ b/packages/components/src/entry-input-layout.tsx @@ -111,6 +111,7 @@ const ValueBase = styled.div` font-size: ${FontSizes.copy}; padding: ${Spacings.m} ${Spacings.l}; ` + const TextWrapper = styled(ValueBase)` position: relative; flex: 1; diff --git a/packages/components/src/highlighter.tsx b/packages/components/src/highlighter.tsx index 08d3985..7c34781 100644 --- a/packages/components/src/highlighter.tsx +++ b/packages/components/src/highlighter.tsx @@ -1,37 +1,45 @@ +import { styled } from 'styled-components' + interface highlighterProps { term: string children: string } +const Text = styled.p` + margin: 0; + padding: 0; + white-space: pre-wrap; + word-break: break-word; +` + const Highlighter: React.FC = ({ term, children }) => { if (!term) { - return <>{children} + return {children} } const regex = new RegExp(`(${term})`, 'gi') const parts = children.split(regex) return ( <> -
test
- {parts.map((part: string, index: number) => - regex.test(part) ? ( - - {part} - - ) : ( - part - ) - )} + + <> + {parts.map((part: string, index: number) => + regex.test(part) ? ( + + {part} + + ) : ( + part + ) + )} + + ) }