Render original HTML text of posts bridged from the Fediverse or Wafrn #26

REVERTED

src/screens/PostThread/components/ThreadItemAnchor.tsx

··· 56 56 import {PostAlerts} from '#/components/moderation/PostAlerts' 57 57 import {type AppModerationCause} from '#/components/Pills' 58 58 import {Embed, PostEmbedViewContext} from '#/components/Post/Embed' 59 59 - import {MastodonHtmlContent, useHasMastodonHtmlContent} from '#/components/Post/MastodonHtmlContent' 60 59 import {PostControls, PostControlsSkeleton} from '#/components/PostControls' 61 60 import {useFormatPostStatCount} from '#/components/PostControls/util' 62 61 import {ProfileHoverCard} from '#/components/ProfileHoverCard' ··· 194 193 const moderation = item.moderation 195 194 const authorShadow = useProfileShadow(post.author) 196 195 const {isActive: live} = useActorStatus(post.author) 197 197 - const hasMastodonHtml = useHasMastodonHtmlContent(record) 198 196 const richText = useMemo( 199 197 () => 200 198 new RichTextAPI({ ··· 400 398 style={[a.pb_sm]} 401 399 additionalCauses={additionalPostAlerts} 402 400 /> 401 401 + {richText?.text ? ( 402 402 + <RichText 403 403 + enableTags 404 404 + selectable 405 405 + value={richText} 406 406 + style={[a.flex_1, a.text_lg]} 407 407 + authorHandle={post.author.handle} 408 408 + shouldProxyLinks={true} 409 409 + /> 410 410 + ) : undefined} 411 411 + {post.embed && ( 412 412 + <View style={[a.py_xs]}> 413 413 + <Embed 414 414 + embed={post.embed} 415 415 + moderation={moderation} 416 416 + viewContext={PostEmbedViewContext.ThreadHighlighted} 417 417 + onOpen={onOpenEmbed} 403 403 - {hasMastodonHtml ? ( 404 404 - <> 405 405 - <MastodonHtmlContent 406 406 - record={record} 407 407 - style={[a.flex_1]} 408 408 - textStyle={[a.text_lg]} 409 418 /> 419 419 + </View> 410 410 - {post.embed && ( 411 411 - <View style={[a.py_xs]}> 412 412 - <Embed 413 413 - embed={post.embed} 414 414 - moderation={moderation} 415 415 - viewContext={PostEmbedViewContext.ThreadHighlighted} 416 416 - onOpen={onOpenEmbed} 417 417 - /> 418 418 - </View> 419 419 - )} 420 420 - </> 421 421 - ) : ( 422 422 - <> 423 423 - {richText?.text ? ( 424 424 - <RichText 425 425 - enableTags 426 426 - selectable 427 427 - value={richText} 428 428 - style={[a.flex_1, a.text_lg]} 429 429 - authorHandle={post.author.handle} 430 430 - shouldProxyLinks={true} 431 431 - /> 432 432 - ) : undefined} 433 433 - {post.embed && ( 434 434 - <View style={[a.py_xs]}> 435 435 - <Embed 436 436 - embed={post.embed} 437 437 - moderation={moderation} 438 438 - viewContext={PostEmbedViewContext.ThreadHighlighted} 439 439 - onOpen={onOpenEmbed} 440 440 - /> 441 441 - </View> 442 442 - )} 443 443 - </> 444 420 )} 445 421 </ContentHider> 446 422 <ExpandedPostDetails

REVERTED

src/screens/PostThread/components/ThreadItemPost.tsx

··· 38 38 import {PostHider} from '#/components/moderation/PostHider' 39 39 import {type AppModerationCause} from '#/components/Pills' 40 40 import {Embed, PostEmbedViewContext} from '#/components/Post/Embed' 41 41 - import { 42 42 - MastodonHtmlContent, 43 43 - useHasMastodonHtmlContent, 44 44 - } from '#/components/Post/MastodonHtmlContent' 45 41 import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton' 46 42 import {PostControls, PostControlsSkeleton} from '#/components/PostControls' 47 43 import {RichText} from '#/components/RichText' ··· 195 191 const post = item.value.post 196 192 const record = item.value.post.record 197 193 const moderation = item.moderation 198 198 - const hasMastodonHtml = useHasMastodonHtmlContent(post.record) 199 194 const richText = useMemo( 200 195 () => 201 196 new RichTextAPI({ ··· 306 301 style={[a.pb_2xs]} 307 302 additionalCauses={additionalPostAlerts} 308 303 /> 304 304 + {richText?.text ? ( 309 309 - {hasMastodonHtml ? ( 310 305 <> 306 306 + <RichText 307 307 + enableTags 308 308 + value={richText} 311 311 - <MastodonHtmlContent 312 312 - record={post.record} 313 309 style={[a.flex_1, a.text_md]} 314 310 numberOfLines={limitLines ? MAX_POST_LINES : undefined} 311 311 + authorHandle={post.author.handle} 312 312 + shouldProxyLinks={true} 315 313 /> 314 314 + {limitLines && ( 315 315 + <ShowMoreTextButton 316 316 + style={[a.text_md]} 317 317 + onPress={onPressShowMore} 318 318 + /> 316 316 - {post.embed && ( 317 317 - <View style={[a.pb_xs]}> 318 318 - <Embed 319 319 - embed={post.embed} 320 320 - moderation={moderation} 321 321 - viewContext={PostEmbedViewContext.Feed} 322 322 - /> 323 323 - </View> 324 324 - )} 325 325 - </> 326 326 - ) : ( 327 327 - <> 328 328 - {richText?.text ? ( 329 329 - <> 330 330 - <RichText 331 331 - enableTags 332 332 - value={richText} 333 333 - style={[a.flex_1, a.text_md]} 334 334 - numberOfLines={limitLines ? MAX_POST_LINES : undefined} 335 335 - authorHandle={post.author.handle} 336 336 - shouldProxyLinks={true} 337 337 - /> 338 338 - {limitLines && ( 339 339 - <ShowMoreTextButton 340 340 - style={[a.text_md]} 341 341 - onPress={onPressShowMore} 342 342 - /> 343 343 - )} 344 344 - </> 345 345 - ) : undefined} 346 346 - {post.embed && ( 347 347 - <View style={[a.pb_xs]}> 348 348 - <Embed 349 349 - embed={post.embed} 350 350 - moderation={moderation} 351 351 - viewContext={PostEmbedViewContext.Feed} 352 352 - /> 353 353 - </View> 354 319 )} 355 320 </> 321 321 + ) : undefined} 322 322 + {post.embed && ( 323 323 + <View style={[a.pb_xs]}> 324 324 + <Embed 325 325 + embed={post.embed} 326 326 + moderation={moderation} 327 327 + viewContext={PostEmbedViewContext.Feed} 328 328 + /> 329 329 + </View> 356 330 )} 357 331 <PostControls 358 332 post={postShadow}

REVERTED

src/screens/Settings/DeerSettings.tsx

··· 101 101 useNoDiscoverFallback, 102 102 useSetNoDiscoverFallback, 103 103 } from '#/state/preferences/no-discover-fallback' 104 104 - import { 105 105 - useRenderMastodonHtml, 106 106 - useSetRenderMastodonHtml, 107 107 - } from '#/state/preferences/render-mastodon-html' 108 104 import { 109 105 useRepostCarouselEnabled, 110 106 useSetRepostCarouselEnabled, ··· 447 443 const hideSimilarAccountsRecomm = useHideSimilarAccountsRecomm() 448 444 const setHideSimilarAccountsRecomm = useSetHideSimilarAccountsRecomm() 449 445 450 450 - const renderMastodonHtml = useRenderMastodonHtml() 451 451 - const setRenderMastodonHtml = useSetRenderMastodonHtml() 452 452 - 453 446 const disableVerifyEmailReminder = useDisableVerifyEmailReminder() 454 447 const setDisableVerifyEmailReminder = useSetDisableVerifyEmailReminder() 455 448 ··· 749 742 <Toggle.Platform /> 750 743 </Toggle.Item> 751 744 752 752 - <Toggle.Item 753 753 - 754 754 - <Toggle.Item 755 755 - name="render_mastodon_html" 756 756 - label={_(msg`Render Mastodon HTML from bridged posts`)} 757 757 - value={renderMastodonHtml} 758 758 - onChange={value => setRenderMastodonHtml(value)} 759 759 - style={[a.w_full]}> 760 760 - <Toggle.LabelText style={[a.flex_1]}> 761 761 - <Trans>Render Mastodon HTML from bridged posts</Trans> 762 762 - </Toggle.LabelText> 763 763 - <Toggle.Platform /> 764 764 - </Toggle.Item> 765 765 - <Admonition type="info" style={[a.flex_1]}> 766 766 - <Trans> 767 767 - When enabled, posts bridged from Mastodon will display their 768 768 - original HTML formatting instead of the plain text version. 769 769 - </Trans> 770 770 - </Admonition> 771 771 - 772 745 <Toggle.Item 773 746 name="disable_verify_email_reminder" 774 747 label={_(msg`Disable verify email reminder`)}

REVERTED

src/state/persisted/schema.ts

··· 166 166 }) 167 167 .optional(), 168 168 highQualityImages: z.boolean().optional(), 169 169 - renderMastodonHtml: z.boolean().optional(), 170 169 171 170 showExternalShareButtons: z.boolean().optional(), 172 171 ··· 270 269 ], 271 270 }, 272 271 highQualityImages: false, 273 273 - renderMastodonHtml: false, 274 272 showExternalShareButtons: false, 275 273 } 276 274

REVERTED

src/state/preferences/index.tsx

··· 33 33 import {Provider as LargeAltBadgeProvider} from './large-alt-badge' 34 34 import {Provider as NoAppLabelersProvider} from './no-app-labelers' 35 35 import {Provider as NoDiscoverProvider} from './no-discover-fallback' 36 36 - import {Provider as RenderMastodonHtmlProvider} from './render-mastodon-html' 37 36 import {Provider as RepostCarouselProvider} from './repost-carousel-enabled' 38 37 import {Provider as ShowLinkInHandleProvider} from './show-link-in-handle' 39 38 import {Provider as SubtitlesProvider} from './subtitles' ··· 97 96 <DisableFollowedByMetricsProvider> 98 97 <DisablePostsMetricsProvider> 99 98 <HideSimilarAccountsRecommProvider> 99 99 + <EnableSquareAvatarsProvider> 100 100 + <EnableSquareButtonsProvider> 101 101 + <DisableVerifyEmailReminderProvider> 102 102 + {children} 103 103 + </DisableVerifyEmailReminderProvider> 104 104 + </EnableSquareButtonsProvider> 105 105 + </EnableSquareAvatarsProvider> 100 100 - <RenderMastodonHtmlProvider> 101 101 - <EnableSquareAvatarsProvider> 102 102 - <EnableSquareButtonsProvider> 103 103 - <DisableVerifyEmailReminderProvider> 104 104 - {children} 105 105 - </DisableVerifyEmailReminderProvider> 106 106 - </EnableSquareButtonsProvider> 107 107 - </EnableSquareAvatarsProvider> 108 108 - </RenderMastodonHtmlProvider> 109 106 </HideSimilarAccountsRecommProvider> 110 107 </DisablePostsMetricsProvider> 111 108 </DisableFollowedByMetricsProvider>

REVERTED

src/state/preferences/render-mastodon-html.tsx

··· 1 1 - import React from 'react' 2 2 - 3 3 - import * as persisted from '#/state/persisted' 4 4 - 5 5 - type StateContext = persisted.Schema['renderMastodonHtml'] 6 6 - type SetContext = (v: persisted.Schema['renderMastodonHtml']) => void 7 7 - 8 8 - const stateContext = React.createContext<StateContext>( 9 9 - persisted.defaults.renderMastodonHtml, 10 10 - ) 11 11 - const setContext = React.createContext<SetContext>( 12 12 - (_: persisted.Schema['renderMastodonHtml']) => {}, 13 13 - ) 14 14 - 15 15 - export function Provider({children}: React.PropsWithChildren<{}>) { 16 16 - const [state, setState] = React.useState(persisted.get('renderMastodonHtml')) 17 17 - 18 18 - const setStateWrapped = React.useCallback( 19 19 - (renderMastodonHtml: persisted.Schema['renderMastodonHtml']) => { 20 20 - setState(renderMastodonHtml) 21 21 - persisted.write('renderMastodonHtml', renderMastodonHtml) 22 22 - }, 23 23 - [setState], 24 24 - ) 25 25 - 26 26 - React.useEffect(() => { 27 27 - return persisted.onUpdate('renderMastodonHtml', nextValue => { 28 28 - setState(nextValue) 29 29 - }) 30 30 - }, [setStateWrapped]) 31 31 - 32 32 - return ( 33 33 - <stateContext.Provider value={state}> 34 34 - <setContext.Provider value={setStateWrapped}> 35 35 - {children} 36 36 - </setContext.Provider> 37 37 - </stateContext.Provider> 38 38 - ) 39 39 - } 40 40 - 41 41 - export function useRenderMastodonHtml() { 42 42 - return ( 43 43 - React.useContext(stateContext) ?? persisted.defaults.renderMastodonHtml 44 44 - ) 45 45 - } 46 46 - 47 47 - export function useSetRenderMastodonHtml() { 48 48 - return React.useContext(setContext) 49 49 - }

REVERTED

src/view/com/posts/PostFeedItem.tsx

··· 44 44 import {type AppModerationCause} from '#/components/Pills' 45 45 import {Embed} from '#/components/Post/Embed' 46 46 import {PostEmbedViewContext} from '#/components/Post/Embed/types' 47 47 - import { 48 48 - MastodonHtmlContent, 49 49 - useHasMastodonHtmlContent, 50 50 - } from '#/components/Post/MastodonHtmlContent' 51 47 import {PostRepliedTo} from '#/components/Post/PostRepliedTo' 52 48 import {ShowMoreTextButton} from '#/components/Post/ShowMoreTextButton' 53 49 import {PostControls} from '#/components/PostControls' ··· 422 418 threadgateRecord?: AppBskyFeedThreadgate.Record 423 419 }): React.ReactNode => { 424 420 const {currentAccount} = useSession() 425 425 - const hasMastodonHtml = useHasMastodonHtmlContent( 426 426 - post.record as AppBskyFeedPost.Record, 427 427 - ) 428 421 const [limitLines, setLimitLines] = useState( 429 422 () => countLines(richText.text) >= MAX_POST_LINES, 430 423 ) ··· 467 460 style={[a.pb_xs]} 468 461 additionalCauses={additionalPostAlerts} 469 462 /> 463 463 + {richText.text ? ( 470 470 - {hasMastodonHtml ? ( 471 464 <> 465 465 + <RichText 466 466 + enableTags 467 467 + testID="postText" 468 468 + value={richText} 469 469 + numberOfLines={limitLines ? MAX_POST_LINES : undefined} 472 472 - <MastodonHtmlContent 473 473 - record={post.record as AppBskyFeedPost.Record} 474 470 style={[a.flex_1, a.text_md]} 471 471 + authorHandle={postAuthor.handle} 472 472 + shouldProxyLinks={true} 475 475 - numberOfLines={limitLines ? MAX_POST_LINES : undefined} 476 473 /> 474 474 + {limitLines && ( 475 475 + <ShowMoreTextButton style={[a.text_md]} onPress={onPressShowMore} /> 476 476 + )} 477 477 - {postEmbed ? ( 478 478 - <View style={[a.pb_xs]}> 479 479 - <Embed 480 480 - embed={postEmbed} 481 481 - moderation={moderation} 482 482 - onOpen={onOpenEmbed} 483 483 - viewContext={PostEmbedViewContext.Feed} 484 484 - /> 485 485 - </View> 486 486 - ) : null} 487 477 </> 478 478 + ) : undefined} 479 479 + {postEmbed ? ( 480 480 + <View style={[a.pb_xs]}> 481 481 + <Embed 482 482 + embed={postEmbed} 483 483 + moderation={moderation} 484 484 + onOpen={onOpenEmbed} 485 485 + viewContext={PostEmbedViewContext.Feed} 486 486 + /> 487 487 + </View> 488 488 + ) : null} 488 488 - ) : ( 489 489 - <> 490 490 - {richText.text ? ( 491 491 - <> 492 492 - <RichText 493 493 - enableTags 494 494 - testID="postText" 495 495 - value={richText} 496 496 - numberOfLines={limitLines ? MAX_POST_LINES : undefined} 497 497 - style={[a.flex_1, a.text_md]} 498 498 - authorHandle={postAuthor.handle} 499 499 - shouldProxyLinks={true} 500 500 - /> 501 501 - {limitLines && ( 502 502 - <ShowMoreTextButton 503 503 - style={[a.text_md]} 504 504 - onPress={onPressShowMore} 505 505 - /> 506 506 - )} 507 507 - </> 508 508 - ) : undefined} 509 509 - {postEmbed ? ( 510 510 - <View style={[a.pb_xs]}> 511 511 - <Embed 512 512 - embed={postEmbed} 513 513 - moderation={moderation} 514 514 - onOpen={onOpenEmbed} 515 515 - viewContext={PostEmbedViewContext.Feed} 516 516 - /> 517 517 - </View> 518 518 - ) : null} 519 519 - </> 520 520 - )} 521 489 </ContentHider> 522 490 ) 523 491 }

NEW

src/lib/strings/html-sanitizer.ts

··· 1 1 - /** 2 2 - * HTML sanitizer inspired by Mastodon's Sanitize::Config 3 3 - * Sanitizes HTML content to prevent XSS while preserving safe formatting 4 4 - */ 5 5 - 6 6 - const HTTP_PROTOCOLS = ['http', 'https'] 7 7 - 8 8 - const LINK_PROTOCOLS = [ 9 9 - 'http', 10 10 - 'https', 11 11 - 'dat', 12 12 - 'dweb', 13 13 - 'ipfs', 14 14 - 'ipns', 15 15 - 'ssb', 16 16 - 'gopher', 17 17 - 'xmpp', 18 18 - 'magnet', 19 19 - 'gemini', 20 20 - ] 21 21 - 22 22 - const PROTOCOL_REGEX = /^([a-z][a-z0-9.+-]*):\/\//i 23 23 - 24 24 - interface SanitizeOptions { 25 25 - allowOembed?: boolean 26 26 - } 27 27 - 28 28 - /** 29 29 - * Sanitizes HTML content following Mastodon's strict rules 30 30 - */ 31 31 - export function sanitizeHtml( 32 32 - html: string, 33 33 - options: SanitizeOptions = {}, 34 34 - ): string { 35 35 - if (typeof DOMParser === 'undefined') { 36 36 - // Fallback for environments without DOMParser 37 37 - return sanitizeTextOnly(html) 38 38 - } 39 39 - 40 40 - const parser = new DOMParser() 41 41 - const doc = parser.parseFromString(html, 'text/html') 42 42 - const body = doc.body 43 43 - 44 44 - sanitizeNode(body, options) 45 45 - 46 46 - return body.innerHTML 47 47 - } 48 48 - 49 49 - function sanitizeNode(node: Node, options: SanitizeOptions): void { 50 50 - const childNodes = Array.from(node.childNodes) 51 51 - 52 52 - for (const child of childNodes) { 53 53 - if (child.nodeType === Node.ELEMENT_NODE) { 54 54 - const element = child as HTMLElement 55 55 - const tagName = element.tagName.toLowerCase() 56 56 - 57 57 - // Define allowed elements 58 58 - const allowedElements = options.allowOembed 59 59 - ? [ 60 60 - 'p', 61 61 - 'br', 62 62 - 'span', 63 63 - 'a', 64 64 - 'del', 65 65 - 's', 66 66 - 'pre', 67 67 - 'blockquote', 68 68 - 'code', 69 69 - 'b', 70 70 - 'strong', 71 71 - 'u', 72 72 - 'i', 73 73 - 'em', 74 74 - 'ul', 75 75 - 'ol', 76 76 - 'li', 77 77 - 'ruby', 78 78 - 'rt', 79 79 - 'rp', 80 80 - 'audio', 81 81 - 'iframe', 82 82 - 'source', 83 83 - 'video', 84 84 - ] 85 85 - : [ 86 86 - 'p', 87 87 - 'br', 88 88 - 'span', 89 89 - 'a', 90 90 - 'del', 91 91 - 's', 92 92 - 'pre', 93 93 - 'blockquote', 94 94 - 'code', 95 95 - 'b', 96 96 - 'strong', 97 97 - 'u', 98 98 - 'i', 99 99 - 'em', 100 100 - 'ul', 101 101 - 'ol', 102 102 - 'li', 103 103 - 'ruby', 104 104 - 'rt', 105 105 - 'rp', 106 106 - ] 107 107 - 108 108 - // Handle unsupported elements (h1-h6) - convert to <strong> wrapped in <p> 109 109 - if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) { 110 110 - const strong = element.ownerDocument!.createElement('strong') 111 111 - while (element.firstChild) { 112 112 - strong.appendChild(element.firstChild) 113 113 - } 114 114 - const p = element.ownerDocument!.createElement('p') 115 115 - p.appendChild(strong) 116 116 - element.replaceWith(p) 117 117 - sanitizeNode(p, options) 118 118 - continue 119 119 - } 120 120 - 121 121 - // Handle math elements - extract annotation text 122 122 - if (tagName === 'math') { 123 123 - const mathText = extractMathAnnotation(element) 124 124 - if (mathText) { 125 125 - const textNode = element.ownerDocument!.createTextNode(mathText) 126 126 - element.replaceWith(textNode) 127 127 - } else { 128 128 - element.remove() 129 129 - } 130 130 - continue 131 131 - } 132 132 - 133 133 - if (tagName === 'li') { 134 134 - // Keep li elements but sanitize their children 135 135 - sanitizeNode(element, options) 136 136 - continue 137 137 - } 138 138 - 139 139 - // Remove elements not in allowlist 140 140 - if (!allowedElements.includes(tagName)) { 141 141 - // Replace with text content 142 142 - const textNode = element.ownerDocument!.createTextNode( 143 143 - element.textContent || '', 144 144 - ) 145 145 - element.replaceWith(textNode) 146 146 - continue 147 147 - } 148 148 - 149 149 - // Sanitize attributes 150 150 - sanitizeAttributes(element, options) 151 151 - 152 152 - // Recursively sanitize children 153 153 - sanitizeNode(element, options) 154 154 - } 155 155 - } 156 156 - } 157 157 - 158 158 - function sanitizeAttributes( 159 159 - element: HTMLElement, 160 160 - options: SanitizeOptions, 161 161 - ): void { 162 162 - const tagName = element.tagName.toLowerCase() 163 163 - const allowedAttrs: Record<string, string[]> = { 164 164 - a: ['href', 'rel', 'class', 'translate'], 165 165 - span: ['class', 'translate'], 166 166 - ol: ['start', 'reversed'], 167 167 - li: ['value'], 168 168 - p: ['class'], 169 169 - } 170 170 - 171 171 - if (options.allowOembed) { 172 172 - allowedAttrs.audio = ['controls'] 173 173 - allowedAttrs.iframe = [ 174 174 - 'allowfullscreen', 175 175 - 'frameborder', 176 176 - 'height', 177 177 - 'scrolling', 178 178 - 'src', 179 179 - 'width', 180 180 - ] 181 181 - allowedAttrs.source = ['src', 'type'] 182 182 - allowedAttrs.video = ['controls', 'height', 'loop', 'width'] 183 183 - } 184 184 - 185 185 - const allowed = allowedAttrs[tagName] || [] 186 186 - const attrs = Array.from(element.attributes) 187 187 - 188 188 - // Remove non-allowed attributes 189 189 - for (const attr of attrs) { 190 190 - const attrName = attr.name.toLowerCase() 191 191 - const isAllowed = allowed.some(a => { 192 192 - if (a.endsWith('*')) { 193 193 - return attrName.startsWith(a.slice(0, -1)) 194 194 - } 195 195 - return a === attrName 196 196 - }) 197 197 - 198 198 - if (!isAllowed) { 199 199 - element.removeAttribute(attr.name) 200 200 - } 201 201 - } 202 202 - 203 203 - // Process specific attributes 204 204 - if (tagName === 'a') { 205 205 - processAnchorElement(element) 206 206 - } 207 207 - 208 208 - // Process class whitelist 209 209 - if (element.hasAttribute('class')) { 210 210 - processClassWhitelist(element) 211 211 - } 212 212 - 213 213 - // Process translate attribute - remove unless it's "no" 214 214 - if (element.hasAttribute('translate')) { 215 215 - const translate = element.getAttribute('translate') 216 216 - if (translate !== 'no') { 217 217 - element.removeAttribute('translate') 218 218 - } 219 219 - } 220 220 - 221 221 - // Validate protocols for elements with src/href 222 222 - if (element.hasAttribute('href') || element.hasAttribute('src')) { 223 223 - validateProtocols(element, options) 224 224 - } 225 225 - } 226 226 - 227 227 - function processAnchorElement(element: HTMLElement): void { 228 228 - // Add required attributes 229 229 - element.setAttribute('rel', 'nofollow noopener') 230 230 - element.setAttribute('target', '_blank') 231 231 - 232 232 - // Check if href has unsupported protocol 233 233 - const href = element.getAttribute('href') 234 234 - if (href) { 235 235 - const scheme = getScheme(href) 236 236 - if (scheme !== null && scheme !== 'relative' && !LINK_PROTOCOLS.includes(scheme)) { 237 237 - // Replace element with its text content 238 238 - const textNode = element.ownerDocument!.createTextNode( 239 239 - element.textContent || '', 240 240 - ) 241 241 - element.replaceWith(textNode) 242 242 - } 243 243 - } 244 244 - } 245 245 - 246 246 - function processClassWhitelist(element: HTMLElement): void { 247 247 - const classList = element.className.split(/[\t\n\f\r ]+/).filter(Boolean) 248 248 - const whitelisted = classList.filter(className => { 249 249 - // microformats classes 250 250 - if (/^[hpuedt]-/.test(className)) return true 251 251 - // semantic classes 252 252 - if (/^(mention|hashtag)$/.test(className)) return true 253 253 - // link formatting classes 254 254 - if (/^(ellipsis|invisible)$/.test(className)) return true 255 255 - // quote inline class 256 256 - if (className === 'quote-inline') return true 257 257 - return false 258 258 - }) 259 259 - 260 260 - if (whitelisted.length > 0) { 261 261 - element.className = whitelisted.join(' ') 262 262 - } else { 263 263 - element.removeAttribute('class') 264 264 - } 265 265 - } 266 266 - 267 267 - function validateProtocols( 268 268 - element: HTMLElement, 269 269 - options: SanitizeOptions, 270 270 - ): void { 271 271 - const tagName = element.tagName.toLowerCase() 272 272 - const src = element.getAttribute('src') 273 273 - const href = element.getAttribute('href') 274 274 - const url = src || href 275 275 - 276 276 - if (!url) return 277 277 - 278 278 - const scheme = getScheme(url) 279 279 - 280 280 - // For oembed elements, only allow HTTP protocols for src 281 281 - if ( 282 282 - options.allowOembed && 283 283 - src && 284 284 - ['iframe', 'source'].includes(tagName) 285 285 - ) { 286 286 - if (scheme !== null && !HTTP_PROTOCOLS.includes(scheme)) { 287 287 - element.removeAttribute('src') 288 288 - } 289 289 - // Add sandbox attribute to iframes 290 290 - if (tagName === 'iframe') { 291 291 - element.setAttribute( 292 292 - 'sandbox', 293 293 - 'allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms', 294 294 - ) 295 295 - } 296 296 - } 297 297 - } 298 298 - 299 299 - function getScheme(url: string): string | null { 300 300 - const match = url.match(PROTOCOL_REGEX) 301 301 - if (match) { 302 302 - return match[1].toLowerCase() 303 303 - } 304 304 - // Check if it's a relative URL 305 305 - if (url.startsWith('/') || url.startsWith('.')) { 306 306 - return 'relative' 307 307 - } 308 308 - return null 309 309 - } 310 310 - 311 311 - /** 312 312 - * Extract math annotation from MathML element 313 313 - * Follows FEP-dc88 spec for math element representation 314 314 - */ 315 315 - function extractMathAnnotation(mathElement: HTMLElement): string | null { 316 316 - const semantics = Array.from(mathElement.children).find( 317 317 - child => child.tagName.toLowerCase() === 'semantics', 318 318 - ) as HTMLElement | undefined 319 319 - 320 320 - if (!semantics) return null 321 321 - 322 322 - // Look for LaTeX annotation (application/x-tex) 323 323 - const latexAnnotation = Array.from(semantics.children).find(child => { 324 324 - return ( 325 325 - child.tagName.toLowerCase() === 'annotation' && 326 326 - child.getAttribute('encoding') === 'application/x-tex' 327 327 - ) 328 328 - }) 329 329 - 330 330 - if (latexAnnotation) { 331 331 - const display = mathElement.getAttribute('display') 332 332 - const text = latexAnnotation.textContent || '' 333 333 - return display === 'block' ? `$$${text}$$` : `$${text}$` 334 334 - } 335 335 - 336 336 - // Look for plain text annotation 337 337 - const plainAnnotation = Array.from(semantics.children).find(child => { 338 338 - return ( 339 339 - child.tagName.toLowerCase() === 'annotation' && 340 340 - child.getAttribute('encoding') === 'text/plain' 341 341 - ) 342 342 - }) 343 343 - 344 344 - if (plainAnnotation) { 345 345 - return plainAnnotation.textContent || null 346 346 - } 347 347 - 348 348 - return null 349 349 - } 350 350 - 351 351 - /** 352 352 - * Fallback sanitizer that strips all HTML tags 353 353 - */ 354 354 - function sanitizeTextOnly(html: string): string { 355 355 - return html.replace(/<[^>]*>/g, '') 356 356 - }

NEW

src/components/Post/MastodonHtmlContent.tsx

··· 1 1 - import {useMemo} from 'react' 2 2 - import {type StyleProp, type TextStyle, View, type ViewStyle} from 'react-native' 1 1 + import {useMemo, useState} from 'react' 2 2 + import { 3 3 + type LayoutChangeEvent, 4 4 + type StyleProp, 5 5 + type TextStyle, 6 6 + View, 7 7 + type ViewStyle, 8 8 + } from 'react-native' 3 9 import {type AppBskyFeedPost} from '@atproto/api' 10 10 + import {msg, Trans} from '@lingui/macro' 11 11 + import {useLingui} from '@lingui/react' 4 12 5 13 import {useRenderMastodonHtml} from '#/state/preferences/render-mastodon-html' 6 6 - import { atoms } from '#/alf' 14 14 + import {atoms as a} from '#/alf' 15 15 + import {Button, ButtonText} from '#/components/Button' 7 16 import {InlineLinkText} from '#/components/Link' 8 17 import {P, Text} from '#/components/Typography' 9 18 ··· 36 45 numberOfLines, 37 46 }: MastodonHtmlContentProps) { 38 47 const renderMastodonHtml = useRenderMastodonHtml() 48 48 + const {_} = useLingui() 49 49 + const [isExpanded, setIsExpanded] = useState(false) 50 50 + const [contentHeight, setContentHeight] = useState<number | null>(null) 51 51 + const [isTall, setIsTall] = useState(false) 39 52 40 53 const renderedContent = useMemo(() => { 41 54 if (!renderMastodonHtml) return null ··· 53 66 return sanitizeAndRenderHtml(rawHtml, numberOfLines, textStyle) 54 67 }, [record, renderMastodonHtml, numberOfLines, textStyle]) 55 68 69 69 + const handleLayout = (event: LayoutChangeEvent) => { 70 70 + const height = event.nativeEvent.layout.height 71 71 + if (contentHeight === null) { 72 72 + setContentHeight(height) 73 73 + // Consider content "tall" if it's taller than 150px 74 74 + setIsTall(height > 150) 75 75 + } 76 76 + } 77 77 + 56 78 if (!renderedContent) return null 57 79 58 58 - return <View style={style}>{renderedContent}</View> 80 80 + const shouldCollapse = isTall && !isExpanded 81 81 + 82 82 + return ( 83 83 + <View style={style}> 84 84 + <View 85 85 + style={shouldCollapse ? {maxHeight: 150, overflow: 'hidden'} : undefined} 86 86 + onLayout={handleLayout}> 87 87 + {renderedContent} 88 88 + </View> 89 89 + {shouldCollapse && ( 90 90 + <Button 91 91 + label={_(msg`Show more`)} 92 92 + onPress={() => setIsExpanded(true)} 93 93 + variant="ghost" 94 94 + color="primary" 95 95 + size="small" 96 96 + style={[a.mt_xs]}> 97 97 + <ButtonText> 98 98 + <Trans>Show more</Trans> 99 99 + </ButtonText> 100 100 + </Button> 101 101 + )} 102 102 + </View> 103 103 + ) 59 104 } 60 105 61 106 const LINK_PROTOCOLS = [ ··· 111 156 const doc = parser.parseFromString(html, 'text/html') 112 157 113 158 const textStyle: StyleProp<TextStyle> = [ 114 114 - atoms.leading_snug, 115 115 - atoms.text_md, 159 159 + a.leading_snug, 160 160 + a.text_md, 116 161 inputTextStyle, 117 162 ] 118 163 ··· 300 345 } 301 346 302 347 const content = Array.from(doc.body.childNodes).map((node, i) => 303 303 - renderNode(node, i), 348 348 + renderNode(node, String(i)), 304 349 ) 305 350 306 351 return ( ··· 326 371 // Remove non-allowed attributes 327 372 for (const attr of attrs) { 328 373 const attrName = attr.name.toLowerCase() 329 329 - const isAllowed = allowed.some(a => { 330 330 - if (a.endsWith('*')) { 331 331 - return attrName.startsWith(a.slice(0, -1)) 374 374 + const isAllowed = allowed.some(allowedAttr => { 375 375 + if (allowedAttr.endsWith('*')) { 376 376 + return attrName.startsWith(allowedAttr.slice(0, -1)) 332 377 } 333 333 - return a === attrName 378 378 + return allowedAttr === attrName 334 379 }) 335 380 336 381 if (!isAllowed) {