fluffychat/lib/pages/chat/events/html_message.dart

534 lines
14 KiB
Dart
Raw Normal View History

2020-05-09 13:36:41 +02:00
import 'package:flutter/material.dart';
2021-10-26 18:50:34 +02:00
import 'package:collection/collection.dart';
import 'package:flutter_highlighter/flutter_highlighter.dart';
import 'package:flutter_highlighter/themes/shades-of-purple.dart';
import 'package:flutter_html/flutter_html.dart';
2023-05-19 17:30:25 +02:00
import 'package:flutter_html_table/flutter_html_table.dart';
import 'package:flutter_math_fork/flutter_math.dart';
2021-10-26 18:50:34 +02:00
import 'package:matrix/matrix.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/mxc_image.dart';
2021-11-09 21:32:16 +01:00
import '../../../utils/url_launcher.dart';
2020-05-09 13:36:41 +02:00
class HtmlMessage extends StatelessWidget {
final String html;
2020-05-14 07:43:21 +02:00
final Room room;
2023-05-19 08:14:48 +02:00
final Color textColor;
2020-05-09 13:36:41 +02:00
2021-10-14 18:09:30 +02:00
const HtmlMessage({
2022-01-29 12:35:03 +01:00
Key? key,
required this.html,
required this.room,
2023-05-19 08:14:48 +02:00
this.textColor = Colors.black,
2021-10-14 18:09:30 +02:00
}) : super(key: key);
2020-05-09 13:36:41 +02:00
@override
Widget build(BuildContext context) {
// riot-web is notorious for creating bad reply fallback events from invalid messages which, if
// not handled properly, can lead to impersination. As such, we strip the entire `<mx-reply>` tags
// here already, to prevent that from happening.
// We do *not* do this in an AST and just with simple regex here, as riot-web tends to create
// miss-matching tags, and this way we actually correctly identify what we want to strip and, well,
// strip it.
final renderHtml = html.replaceAll(
RegExp(
'<mx-reply>.*</mx-reply>',
caseSensitive: false,
multiLine: false,
dotAll: true,
),
'',
);
final fontSize = AppConfig.messageFontSize * AppConfig.fontSizeFactor;
2020-10-28 10:15:06 +01:00
// there is no need to pre-validate the html, as we validate it while rendering
2020-05-09 13:36:41 +02:00
return Html(
data: renderHtml,
style: {
'*': Style(
color: textColor,
margin: Margins.all(0),
fontSize: FontSize(fontSize),
),
2023-05-19 08:14:48 +02:00
'a': Style(color: textColor.withAlpha(150)),
'h1': Style(
fontSize: FontSize(fontSize * 2),
lineHeight: LineHeight.number(1.5),
fontWeight: FontWeight.w600,
),
'h2': Style(
fontSize: FontSize(fontSize * 1.75),
lineHeight: LineHeight.number(1.5),
fontWeight: FontWeight.w500,
),
'h3': Style(
fontSize: FontSize(fontSize * 1.5),
lineHeight: LineHeight.number(1.5),
),
'h4': Style(
fontSize: FontSize(fontSize * 1.25),
lineHeight: LineHeight.number(1.5),
),
'h5': Style(
fontSize: FontSize(fontSize * 1.25),
lineHeight: LineHeight.number(1.5),
),
'h6': Style(
fontSize: FontSize(fontSize),
lineHeight: LineHeight.number(1.5),
),
2023-05-17 13:25:39 +02:00
'blockquote': Style(
border: Border(
left: BorderSide(
width: 3,
2023-05-19 08:14:48 +02:00
color: textColor,
2023-05-17 13:25:39 +02:00
),
),
2023-05-19 08:14:48 +02:00
padding: const EdgeInsets.only(left: 6, bottom: 0),
),
'hr': Style(
border: Border.all(color: textColor, width: 0.5),
2023-05-17 13:25:39 +02:00
),
2023-05-19 17:30:25 +02:00
'table': Style(
border: Border.all(color: textColor, width: 0.5),
),
'tr': Style(
border: Border.all(color: textColor, width: 0.5),
),
'td': Style(
border: Border.all(color: textColor, width: 0.5),
padding: const EdgeInsets.all(2),
),
'th': Style(
border: Border.all(color: textColor, width: 0.5),
),
'li': Style(
// https://github.com/Sub6Resources/flutter_html/issues/1280
// Workaround for list items printed in the same line. This will
// remove the dots/numbers. Hours wasted: 4
display: Display.block,
),
2020-10-28 10:15:06 +01:00
},
extensions: [
UserPillExtension(context, room),
RoomPillExtension(context, room.client),
CodeExtension(fontSize: fontSize),
MatrixMathExtension(
style: TextStyle(fontSize: fontSize, color: textColor),
),
2023-05-19 17:30:25 +02:00
const TableHtmlExtension(),
SpoilerExtension(textColor: textColor),
const ImageExtension(),
FontColorExtension(),
],
onLinkTap: (url, _, __) => UrlLauncher(context, url).launchUrl(),
onlyRenderTheseTags: const {
...allowedHtmlTags,
// Needed to make it work properly
'body',
'html',
2022-02-02 07:33:40 +01:00
},
shrinkWrap: true,
);
}
/// Keep in sync with: https://spec.matrix.org/v1.6/client-server-api/#mroommessage-msgtypes
static const Set<String> allowedHtmlTags = {
'font',
'del',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'blockquote',
'p',
'a',
'ul',
'ol',
'sup',
'sub',
'li',
'b',
'i',
'u',
'strong',
'em',
'strike',
'code',
'hr',
'br',
'div',
'table',
'thead',
'tbody',
'tr',
'th',
'td',
'caption',
'pre',
'span',
'img',
'details',
'summary'
};
}
class FontColorExtension extends HtmlExtension {
static const String colorAttribute = 'color';
static const String mxColorAttribute = 'data-mx-color';
static const String bgColorAttribute = 'data-mx-bg-color';
@override
Set<String> get supportedTags => {'font', 'span'};
@override
bool matches(ExtensionContext context) {
if (!supportedTags.contains(context.elementName)) return false;
return context.element?.attributes.keys.any(
{
colorAttribute,
mxColorAttribute,
bgColorAttribute,
}.contains,
) ??
false;
}
Color? hexToColor(String? hexCode) {
if (hexCode == null) return null;
if (hexCode.startsWith('#')) hexCode = hexCode.substring(1);
if (hexCode.length == 6) hexCode = 'FF$hexCode';
final colorValue = int.tryParse(hexCode, radix: 16);
return colorValue == null ? null : Color(colorValue);
}
@override
InlineSpan build(
ExtensionContext context,
Map<StyledElement, InlineSpan> Function() parseChildren,
) {
final colorText = context.element?.attributes[colorAttribute] ??
context.element?.attributes[mxColorAttribute];
final bgColor = context.element?.attributes[bgColorAttribute];
return TextSpan(
style: TextStyle(
color: hexToColor(colorText),
backgroundColor: hexToColor(bgColor),
),
text: context.innerHtml,
);
}
}
class ImageExtension extends HtmlExtension {
final double defaultDimension;
const ImageExtension({this.defaultDimension = 64});
@override
Set<String> get supportedTags => {'img'};
@override
InlineSpan build(
ExtensionContext context,
Map<StyledElement, InlineSpan> Function() parseChildren,
) {
final mxcUrl = Uri.tryParse(context.attributes['href'] ?? '');
if (mxcUrl == null || mxcUrl.scheme != 'mxc') {
return TextSpan(text: context.attributes['alt']);
}
final width =
double.tryParse(context.attributes['width'] ?? '') ?? defaultDimension;
final height =
double.tryParse(context.attributes['height'] ?? '') ?? defaultDimension;
return WidgetSpan(
child: MxcImage(
uri: mxcUrl,
width: width,
height: height,
),
);
}
}
class SpoilerExtension extends HtmlExtension {
final Color textColor;
const SpoilerExtension({required this.textColor});
@override
Set<String> get supportedTags => {'span'};
static const String customDataAttribute = 'data-mx-spoiler';
@override
bool matches(ExtensionContext context) {
if (context.elementName != 'span') return false;
return context.element?.attributes.containsKey(customDataAttribute) ??
false;
}
@override
InlineSpan build(
ExtensionContext context,
Map<StyledElement, InlineSpan> Function() parseChildren,
) {
var obscure = true;
return WidgetSpan(
child: StatefulBuilder(
builder: (context, setState) {
return InkWell(
onTap: () => setState(() {
obscure = !obscure;
}),
child: RichText(
text: TextSpan(
style: obscure ? TextStyle(backgroundColor: textColor) : null,
children: parseChildren().values.toList(),
),
),
);
},
),
);
}
}
class MatrixMathExtension extends HtmlExtension {
final TextStyle? style;
MatrixMathExtension({this.style});
@override
Set<String> get supportedTags => {'div'};
@override
bool matches(ExtensionContext context) {
if (context.elementName != 'div') return false;
final mathData = context.element?.attributes['data-mx-maths'];
return mathData != null;
}
@override
InlineSpan build(
ExtensionContext context,
Map<StyledElement, InlineSpan> Function() parseChildren,
) {
final data = context.element?.attributes['data-mx-maths'] ?? '';
return WidgetSpan(
child: Math.tex(
data,
textStyle: style,
onErrorFallback: (e) {
Logs().d('Flutter math parse error', e);
return Text(
data,
style: style,
);
},
),
);
}
}
class CodeExtension extends HtmlExtension {
final double fontSize;
CodeExtension({required this.fontSize});
@override
Set<String> get supportedTags => {'code'};
@override
InlineSpan build(
ExtensionContext context,
Map<StyledElement, InlineSpan> Function() parseChildren,
) =>
WidgetSpan(
child: Material(
clipBehavior: Clip.hardEdge,
borderRadius: BorderRadius.circular(4),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: HighlightView(
context.element?.text ?? '',
language: context.element?.className
.split(' ')
.singleWhereOrNull(
(className) => className.startsWith('language-'),
)
?.split('language-')
.last ??
'md',
theme: shadesOfPurpleTheme,
padding: const EdgeInsets.all(6),
textStyle: TextStyle(fontSize: fontSize),
),
),
),
);
}
class UserPillExtension extends HtmlExtension {
final Room room;
final BuildContext context;
UserPillExtension(this.context, this.room);
@override
Set<String> get supportedTags => {'a'};
@override
bool matches(ExtensionContext context) {
if (context.elementName != 'a') return false;
final href = context.element?.attributes['href'];
if (href == null) return false;
final uri = Uri.tryParse(href);
if (uri == null || uri.host != 'matrix.to') return false;
final userId = uri.fragment.split('/').last;
if (userId.sigil != '@') return false;
return true;
}
@override
InlineSpan build(
ExtensionContext context,
Map<StyledElement, InlineSpan> Function() parseChildren,
) {
final href = context.element!.attributes['href']!;
final uri = Uri.parse(href);
final userId = uri.fragment.split('/').last;
final user = room.unsafeGetUserFromMemoryOrFallback(userId);
return WidgetSpan(
child: MatrixPill(
name: user.calcDisplayname(),
avatar: user.avatarUrl,
uri: href,
outerContext: this.context,
),
);
}
}
class RoomPillExtension extends HtmlExtension {
final Client client;
final BuildContext context;
RoomPillExtension(this.context, this.client);
@override
Set<String> get supportedTags => {'a'};
@override
bool matches(ExtensionContext context) {
if (context.elementName != 'a') return false;
final href = context.element?.attributes['href'];
if (href == null) return false;
final uri = Uri.tryParse(href);
if (uri == null || uri.host != 'matrix.to') return false;
final roomId = Uri.decodeComponent(uri.fragment.split('/').last);
if (!{'#', '!'}.contains(roomId.sigil)) return false;
return true;
}
@override
InlineSpan build(
ExtensionContext context,
Map<StyledElement, InlineSpan> Function() parseChildren,
) {
final href = context.element!.attributes['href']!;
final uri = Uri.parse(href);
final roomId = Uri.decodeComponent(uri.fragment.split('/').last);
final room = roomId.sigil == '!'
? client.getRoomById(roomId)
: client.getRoomByAlias(roomId);
if (room != null) {
return WidgetSpan(
child: MatrixPill(
name: room.getLocalizedDisplayname(),
avatar: room.avatar,
uri: href,
outerContext: this.context,
),
);
}
return WidgetSpan(
child: FutureBuilder<QueryPublicRoomsResponse>(
future: client.queryPublicRooms(
server: roomId.domain,
filter: PublicRoomQueryFilter(
genericSearchTerm: roomId,
),
),
builder: (context, snapshot) {
final room = snapshot.data;
return MatrixPill(
name: room?.chunk.singleOrNull?.name ?? roomId,
avatar: room?.chunk.singleOrNull?.avatarUrl,
uri: href,
outerContext: this.context,
);
},
),
);
}
}
class MatrixPill extends StatelessWidget {
final String name;
final BuildContext outerContext;
final Uri? avatar;
final String uri;
const MatrixPill({
super.key,
required this.name,
required this.outerContext,
this.avatar,
required this.uri,
});
@override
Widget build(BuildContext context) {
return InkWell(
onTap: UrlLauncher(outerContext, uri).launchUrl,
child: Material(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
side: BorderSide(
color: Theme.of(outerContext).colorScheme.onPrimaryContainer,
width: 0.5,
),
),
color: Theme.of(outerContext).colorScheme.primaryContainer,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Avatar(
mxContent: avatar,
name: name,
size: 16,
),
const SizedBox(width: 6),
Text(
name,
style: TextStyle(
color: Theme.of(outerContext).colorScheme.onPrimaryContainer,
),
),
],
),
),
),
2020-05-09 13:36:41 +02:00
);
}
}