put bridge for link colors

This commit is contained in:
Henry Hiles 2026-08-22 15:14:41 -04:00
commit 0887421f3e
Signed by: Henry-Hiles
SSH key fingerprint: SHA256:VKQUdS31Q90KvX7EkKMHMBpUspcmItAh86a+v7PGiIs

View file

@ -18,123 +18,131 @@ class const Html(
super.key, super.key,
}) extends ConsumerWidget { }) extends ConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) => HtmlWidget( Widget build(BuildContext context, WidgetRef ref) =>
html, MaterialUiCompatibilityBridge(
buildAsync: false, child: HtmlWidget(
textStyle: textStyle, html,
customWidgetBuilder: (element) { buildAsync: false,
if (element.attributes.keys.contains("data-mx-profile-fallback")) { textStyle: textStyle,
return SizedBox.shrink(); customWidgetBuilder: (element) {
} if (element.attributes.keys.contains("data-mx-profile-fallback")) {
return SizedBox.shrink();
}
if (element.attributes.keys.contains("data-mx-spoiler")) { if (element.attributes.keys.contains("data-mx-spoiler")) {
return InlineCustomWidget(child: SpoilerText(element.text)); return InlineCustomWidget(child: SpoilerText(element.text));
} }
final height = final height =
int.tryParse(element.attributes["height"] ?? "") ?? int.tryParse(element.attributes["height"] ?? "") ??
(element.attributes.keys.contains("data-mx-emoticon") ? 32 : null) ?? (element.attributes.keys.contains("data-mx-emoticon")
300; ? 32
final width = int.tryParse(element.attributes["width"] ?? ""); : null) ??
final src = Uri.tryParse(element.attributes["src"] ?? ""); 300;
final width = int.tryParse(element.attributes["width"] ?? "");
final src = Uri.tryParse(element.attributes["src"] ?? "");
return switch (element.localName) { return switch (element.localName) {
"code" => "code" =>
element.parent?.localName == "pre" element.parent?.localName == "pre"
? CodeBlock( ? CodeBlock(
element.text, element.text,
lang: element.className.replaceAll("language-", ""), lang: element.className.replaceAll("language-", ""),
) )
: null, : null,
"blockquote" => Quoted( "blockquote" => Quoted(
Html(element.innerHtml, textStyle: textStyle, roomId: roomId), Html(element.innerHtml, textStyle: textStyle, roomId: roomId),
), ),
"a" => "a" =>
element.attributes["href"]?.mention == null element.attributes["href"]?.mention == null
? null ? null
: InlineCustomWidget( : InlineCustomWidget(
child: MentionChip(element.attributes["href"]!, roomId), child: MentionChip(element.attributes["href"]!, roomId),
),
"img" =>
src == null
? SizedBox.shrink()
: InlineCustomWidget(
alignment: PlaceholderAlignment.middle,
child: ExpandableImage(
.new(mxc: src),
child: Image(
image: MxcImage(ref, .new(mxc: src)),
errorBuilder: (_, error, _) => Text(
"Image Failed to Load",
style: .new(color: Theme.of(context).colorScheme.error),
), ),
height: height.toDouble(),
width: width?.toDouble(),
loadingBuilder: (_, child, loadingProgress) =>
loadingProgress == null
? child
: CircularProgressIndicator(),
),
),
),
// Allowed elements list "img" =>
("del" || src == null
"h1" || ? SizedBox.shrink()
"h2" || : InlineCustomWidget(
"h3" || alignment: PlaceholderAlignment.middle,
"h4" || child: ExpandableImage(
"h5" || .new(mxc: src),
"h6" || child: Image(
"p" || image: MxcImage(ref, .new(mxc: src)),
"ul" || errorBuilder: (_, error, _) => Text(
"ol" || "Image Failed to Load",
"sup" || style: .new(
"sub" || color: Theme.of(context).colorScheme.error,
"li" || ),
"b" || ),
"i" || height: height.toDouble(),
"u" || width: width?.toDouble(),
"strong" || loadingBuilder: (_, child, loadingProgress) =>
"em" || loadingProgress == null
"s" || ? child
"code" || : CircularProgressIndicator(),
"hr" || ),
"br" || ),
"div" || ),
"table" ||
"thead" ||
"tbody" ||
"tr" ||
"th" ||
"td" ||
"caption" ||
"pre" ||
"span" ||
"details" ||
"summary") =>
null,
_ => SizedBox.shrink(), // Allowed elements list
}; ("del" ||
}, "h1" ||
customStylesBuilder: (element) => { "h2" ||
"width": "auto", "h3" ||
...Map.fromEntries( "h4" ||
element.attributes "h5" ||
.mapTo<MapEntry<String, String>?>( "h6" ||
(key, value) => switch (key) { "p" ||
"data-mx-color" => .new("color", value), "ul" ||
"data-mx-bg-color" => .new("background-color", value), "ol" ||
_ => null, "sup" ||
}, "sub" ||
) "li" ||
.nonNulls, "b" ||
), "i" ||
}, "u" ||
onTapUrl: (url) => ref.watch(LaunchHelper.provider).launchUrl(.parse(url)), "strong" ||
); "em" ||
"s" ||
"code" ||
"hr" ||
"br" ||
"div" ||
"table" ||
"thead" ||
"tbody" ||
"tr" ||
"th" ||
"td" ||
"caption" ||
"pre" ||
"span" ||
"details" ||
"summary") =>
null,
_ => SizedBox.shrink(),
};
},
customStylesBuilder: (element) => {
"width": "auto",
...Map.fromEntries(
element.attributes
.mapTo<MapEntry<String, String>?>(
(key, value) => switch (key) {
"data-mx-color" => .new("color", value),
"data-mx-bg-color" => .new("background-color", value),
_ => null,
},
)
.nonNulls,
),
},
onTapUrl: (url) =>
ref.watch(LaunchHelper.provider).launchUrl(.parse(url)),
),
);
} }