Fix to post overflow on web (close #395) (#407)

zio/stable
Paul Frazee 2023-04-06 17:12:48 -05:00 committed by GitHub
parent 1fa9402453
commit 7c99df33ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 3 deletions

View File

@ -90,6 +90,7 @@ export const TextLink = observer(function TextLink({
text, text,
numberOfLines, numberOfLines,
lineHeight, lineHeight,
dataSet,
}: { }: {
testID?: string testID?: string
type?: TypographyVariant type?: TypographyVariant
@ -98,6 +99,7 @@ export const TextLink = observer(function TextLink({
text: string | JSX.Element | React.ReactNode text: string | JSX.Element | React.ReactNode
numberOfLines?: number numberOfLines?: number
lineHeight?: number lineHeight?: number
dataSet?: any
}) { }) {
const {...props} = useLinkProps({to: href}) const {...props} = useLinkProps({to: href})
const store = useStores() const store = useStores()
@ -117,6 +119,8 @@ export const TextLink = observer(function TextLink({
style={style} style={style}
numberOfLines={numberOfLines} numberOfLines={numberOfLines}
lineHeight={lineHeight} lineHeight={lineHeight}
// @ts-ignore web only -prf
dataSet={dataSet}
{...props}> {...props}>
{text} {text}
</Text> </Text>

View File

@ -8,6 +8,8 @@ import {toShortUrl} from 'lib/strings/url-helpers'
import {useTheme, TypographyVariant} from 'lib/ThemeContext' import {useTheme, TypographyVariant} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
const WORD_WRAP = {wordWrap: 1}
export function RichText({ export function RichText({
testID, testID,
type = 'md', type = 'md',
@ -39,7 +41,8 @@ export function RichText({
lineHeight: 30, lineHeight: 30,
} }
return ( return (
<Text testID={testID} style={[style, pal.text]}> // @ts-ignore web only -prf
<Text testID={testID} style={[style, pal.text]} dataSet={WORD_WRAP}>
{text} {text}
</Text> </Text>
) )
@ -48,7 +51,9 @@ export function RichText({
<Text <Text
testID={testID} testID={testID}
type={type} type={type}
style={[style, pal.text, lineHeightStyle]}> style={[style, pal.text, lineHeightStyle]}
// @ts-ignore web only -prf
dataSet={WORD_WRAP}>
{text} {text}
</Text> </Text>
) )
@ -72,6 +77,7 @@ export function RichText({
text={segment.text} text={segment.text}
href={`/profile/${mention.did}`} href={`/profile/${mention.did}`}
style={[style, lineHeightStyle, pal.link]} style={[style, lineHeightStyle, pal.link]}
dataSet={WORD_WRAP}
/>, />,
) )
} else if (link && AppBskyRichtextFacet.validateLink(link).success) { } else if (link && AppBskyRichtextFacet.validateLink(link).success) {
@ -82,6 +88,7 @@ export function RichText({
text={toShortUrl(segment.text)} text={toShortUrl(segment.text)}
href={link.uri} href={link.uri}
style={[style, lineHeightStyle, pal.link]} style={[style, lineHeightStyle, pal.link]}
dataSet={WORD_WRAP}
/>, />,
) )
} else { } else {
@ -94,7 +101,9 @@ export function RichText({
testID={testID} testID={testID}
type={type} type={type}
style={[style, pal.text, lineHeightStyle]} style={[style, pal.text, lineHeightStyle]}
numberOfLines={numberOfLines}> numberOfLines={numberOfLines}
// @ts-ignore web only -prf
dataSet={WORD_WRAP}>
{els} {els}
</Text> </Text>
) )

View File

@ -72,6 +72,11 @@
text-decoration: underline; text-decoration: underline;
} }
/* Styling hacks */
*[data-word-wrap] {
word-break: break-word;
}
/* ProseMirror */ /* ProseMirror */
.ProseMirror { .ProseMirror {
font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;