Open
Description
I'm attempting to use Matuerial UI with the React Mentions library, and I currently have an issue where my Mentions and Hashtags aren't properly aligning with the text. I've tried to add a custom colour to differentiate the text from a Mention.
Here is my current code:
import { FunctionComponent } from 'react'
import { MentionsInput, Mention } from 'react-mentions'
import { Avatar, Box, Typography, makeStyles } from '@material-ui/core'
import styled, { useTheme } from 'styled-components'
import { useScreenSizes } from 'hooks/use-screen-sizes/useScreenSizes'
import { RICH_TEXT_TRIGGERS } from 'common/constants/richTextTriggers'
import classNames from './styles.module.css'
import { useMentions } from '../../posts/hooks/useMentions'
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
'& .MuiInput-input': {
fontSize: 'unset',
},
},
}))
export const StyledEllipsisBox = styled(Box)`
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: ${props => props.theme.colors.accent};
`
const renderMentionSuggestion = (suggestion, search, highlightedDisplay, index, focused, theme, isDevice) => {
const headlineLength = isDevice ? 25 : 55
return (
<Box
className={`suggestions__item ${focused ? 'suggestions__item--focused' : ''}`}
display="flex"
justifyContent="center"
alignItems="center"
p="1rem"
bgcolor={theme.colors.supplementary1}
>
<Avatar src={suggestion.image} alt={suggestion.display} className="avatar" />
<Box width="calc(100% - 2rem)" paddingLeft="1rem" paddingRight="1rem" boxSizing="border-box">
<StyledEllipsisBox color={theme.colors.accent1}>{suggestion.display}</StyledEllipsisBox>
<StyledEllipsisBox color={theme.colors.accent}>
{suggestion?.headline?.slice(0, headlineLength)}
{suggestion?.headline?.length > headlineLength && '...'}
</StyledEllipsisBox>
</Box>
</Box>
)
}
const renderTagSuggestion = (suggestion, search, highlightedDisplay, index, focused, theme, isDevice) => (
<Box
className={`suggestions__item ${focused ? 'suggestions__item--focused' : ''}`}
display="flex"
justifyContent="start"
alignItems="center"
p="0.25rem 1rem 0.5rem 1rem"
bgcolor={theme.colors.supplementary1}
width="100%"
>
<Box width="100%" paddingLeft="1rem" paddingRight="1rem" boxSizing="border-box">
<StyledEllipsisBox color={theme.colors.accent1}>#{suggestion.display}</StyledEllipsisBox>
<StyledEllipsisBox mt="-5px">
<Typography variant="caption">
{suggestion?.contentCount && `${suggestion?.contentCount} Posts`}
</Typography>
</StyledEllipsisBox>
</Box>
</Box>
)
interface MentionsInputFieldProps {
value: string
onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
customStyle?: React.CSSProperties
placeholderText?: string
highlighterHeight?: string
}
export const MentionsInputField: FunctionComponent<MentionsInputFieldProps> = ({
value,
onChange,
customStyle,
placeholderText,
highlighterHeight
}) => {
const { isDevice } = useScreenSizes()
const theme = useTheme()
const { getHashtags, getMentions } = useMentions()
const classes = useStyles()
return (
// Using a div instead of Box because of MUI styling issues
<div className={classes.root}>
<MentionsInput
value={value}
style={{
width: '100%',
height: '100%',
input: { color: theme.colors.accent1, border: 'none', outline: 'none', overflowY: 'auto' },
highlighter: { height: highlighterHeight },
focus: { outline: 'none' },
}}
allowSuggestionsAboveCursor
placeholder={placeholderText}
>
<Mention
trigger={RICH_TEXT_TRIGGERS.MENTION}
data={getMentions}
appendSpaceOnAdd
markup={`{@}[__display__](__id__)`}
className={classNames.mentions__mention}
renderSuggestion={(suggestion, search, highlightedDisplay, index, focused) =>
renderMentionSuggestion(suggestion, search, highlightedDisplay, index, focused, theme, isDevice)
}
/>
<Mention
trigger={RICH_TEXT_TRIGGERS.HASHTAG}
data={getHashtags}
markup={`{#}[__display__](__id__)`}
className={classNames.mentions__mention}
displayTransform={s => `#${s}`}
allowSuggestionsAboveCursor
appendSpaceOnAdd
renderSuggestion={(suggestion, search, highlightedDisplay, index, focused) =>
renderTagSuggestion(suggestion, search, highlightedDisplay, index, focused, theme, isDevice)
}
/>
</MentionsInput>
</div>
)
}
my styles.module.css file:
z-index: 1;
color: #8237B9;
}```
Metadata
Metadata
Assignees
Labels
No labels