aiden
/
fluffychat
mirror of https://github.com/krille-chan/fluffychat
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: New html formatting

Browse Source
krille/new-html-formatting
krille-chan 12 months ago committed by krille-chan
parent f4196f38c3
commit 5308a074b4
No known key found for this signature in database
3 changed files with 177 additions and 412 deletions
Show Stats Download Patch File Download Diff File

414
lib/pages/chat/events/html_message.dart
Unescape Escape View File

@ -1,13 +1,14 @@
import 'package:adaptive_dialog/adaptive_dialog.dart';
import 'package:flutter/material.dart';
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';
import 'package:flutter_html_table/flutter_html_table.dart';
import 'package:flutter_math_fork/flutter_math.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:html/dom.dart' as dom;
import 'package:linkify/linkify.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:matrix/matrix.dart';
import 'package:fluffychat/config/app_config.dart';
@ -77,99 +78,52 @@ class HtmlMessage extends StatelessWidget {
final fontSize = AppConfig.messageFontSize * AppConfig.fontSizeFactor;
final linkColor = textColor.withAlpha(150);
final blockquoteStyle = Style(
border: Border(
left: BorderSide(
width: 3,
color: textColor,
),
),
padding: HtmlPaddings.only(left: 6, bottom: 0),
);
final element = _linkifyHtml(HtmlParser.parseHTML(renderHtml));
// there is no need to pre-validate the html, as we validate it while rendering
return Html.fromElement(
documentElement: element as dom.Element,
style: {
'*': Style(
color: textColor,
margin: Margins.all(0),
fontSize: FontSize(fontSize),
),
'a': Style(color: linkColor, textDecorationColor: linkColor),
'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),
),
'blockquote': blockquoteStyle,
'tg-forward': blockquoteStyle,
'hr': Style(
border: Border.all(color: textColor, width: 0.5),
),
'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: HtmlPaddings.all(2),
),
'th': Style(
border: Border.all(color: textColor, width: 0.5),
),
return HtmlWidget(
renderHtml,
customWidgetBuilder: (element) {
if (!allowedHtmlTags.contains(element.localName)) {
Logs().v('Do not render prohibited tag', element.localName);
return Text(element.text);
}
if (element.localName == 'img') {
final source = Uri.tryParse(element.attributes['src'] ?? '');
if (source?.scheme != 'mxc') {
Logs().v('Do not render img tag with illegal scheme', source);
return Text(element.attributes['alt'] ?? element.text);
}
}
return null;
},
extensions: [
RoomPillExtension(context, room, fontSize, linkColor),
CodeExtension(fontSize: fontSize),
MatrixMathExtension(
style: TextStyle(fontSize: fontSize, color: textColor),
),
const TableHtmlExtension(),
SpoilerExtension(textColor: textColor),
const ImageExtension(),
FontColorExtension(),
FallbackTextExtension(fontSize: fontSize),
],
onLinkTap: (url, _, element) => UrlLauncher(
context,
url,
element?.text,
).launchUrl(),
onlyRenderTheseTags: const {
...allowedHtmlTags,
// Needed to make it work properly
'body',
'html',
customStylesBuilder: (element) {
switch (element.localName) {
case 'blockquote':
return {
'border-left':
'4px solid rgb(${textColor.red},${textColor.green},${textColor.blue})',
'padding-left': '4px',
'margin': '0px',
'padding-top': '0px',
};
default:
return null;
}
},
textStyle: TextStyle(fontSize: fontSize, color: textColor),
onTapUrl: (url) async {
final consent = await showOkCancelAlertDialog(
fullyCapitalizedForMaterial: false,
context: context,
title: L10n.of(context)!.openLinkInBrowser,
message: url,
okLabel: L10n.of(context)!.openLinkInBrowser,
cancelLabel: L10n.of(context)!.cancel,
);
if (consent != OkCancelResult.ok) return true;
UrlLauncher(context, url).launchUrl();
return true;
},
shrinkWrap: true,
);
}
@ -224,282 +178,6 @@ class HtmlMessage extends StatelessWidget {
};
}
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,
) {
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) {
final mxcUrl = Uri.tryParse(context.attributes['src'] ?? '');
if (mxcUrl == null || mxcUrl.scheme != 'mxc') {
return TextSpan(text: context.attributes['alt']);
}
final width = double.tryParse(context.attributes['width'] ?? '');
final height = double.tryParse(context.attributes['height'] ?? '');
return WidgetSpan(
child: SizedBox(
width: width ?? height ?? defaultDimension,
height: height ?? width ?? defaultDimension,
child: MxcImage(
uri: mxcUrl,
width: width ?? height ?? defaultDimension,
height: height ?? width ?? defaultDimension,
cacheKey: mxcUrl.toString(),
),
),
);
}
}
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) {
var obscure = true;
final children = context.inlineSpanChildren;
return WidgetSpan(
child: StatefulBuilder(
builder: (context, setState) {
return InkWell(
onTap: () => setState(() {
obscure = !obscure;
}),
child: RichText(
text: TextSpan(
style: obscure ? TextStyle(backgroundColor: textColor) : null,
children: children,
),
),
);
},
),
);
}
}
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) {
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) => 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: EdgeInsets.symmetric(
horizontal: 6,
vertical: context.element?.parent?.localName == 'pre' ? 6 : 0,
),
textStyle: TextStyle(fontSize: fontSize),
),
),
),
);
}
class FallbackTextExtension extends HtmlExtension {
final double fontSize;
FallbackTextExtension({required this.fontSize});
@override
Set<String> get supportedTags => HtmlMessage.fallbackTextTags;
@override
InlineSpan build(ExtensionContext context) => TextSpan(
text: context.element?.text ?? '',
style: TextStyle(
fontSize: fontSize,
),
);
}
class RoomPillExtension extends HtmlExtension {
final Room room;
final BuildContext context;
final double fontSize;
final Color color;
RoomPillExtension(this.context, this.room, this.fontSize, this.color);
@override
Set<String> get supportedTags => {'a'};
@override
bool matches(ExtensionContext context) {
if (context.elementName != 'a') return false;
final userId = context.element?.attributes['href']
?.parseIdentifierIntoParts()
?.primaryIdentifier;
return userId != null;
}
static final _cachedUsers = <String, User?>{};
Future<User?> _fetchUser(String matrixId) async =>
_cachedUsers[room.id + matrixId] ??= await room.requestUser(matrixId);
@override
InlineSpan build(ExtensionContext context) {
final href = context.element?.attributes['href'];
final matrixId = href?.parseIdentifierIntoParts()?.primaryIdentifier;
if (href == null || matrixId == null) {
return TextSpan(text: context.innerHtml);
}
if (matrixId.sigil == '@') {
return WidgetSpan(
child: FutureBuilder<User?>(
future: _fetchUser(matrixId),
builder: (context, snapshot) => MatrixPill(
key: Key('user_pill_$matrixId'),
name: _cachedUsers[room.id + matrixId]?.calcDisplayname() ??
matrixId.localpart ??
matrixId,
avatar: _cachedUsers[room.id + matrixId]?.avatarUrl,
uri: href,
outerContext: this.context,
fontSize: fontSize,
color: color,
),
),
);
}
if (matrixId.sigil == '#' || matrixId.sigil == '!') {
final room = matrixId.sigil == '!'
? this.room.client.getRoomById(matrixId)
: this.room.client.getRoomByAlias(matrixId);
if (room != null) {
return WidgetSpan(
child: MatrixPill(
name: room.getLocalizedDisplayname(),
avatar: room.avatar,
uri: href,
outerContext: this.context,
fontSize: fontSize,
color: color,
),
);
}
}
return TextSpan(text: context.innerHtml);
}
}
class MatrixPill extends StatelessWidget {
final String name;
final BuildContext outerContext;

172
pubspec.lock
Unescape Escape View File

@ -129,6 +129,30 @@ packages:
url: "https://pub.dev"
source: hosted
version: "1.1.1"
cached_network_image:
dependency: transitive
description:
name: cached_network_image
sha256: "28ea9690a8207179c319965c13cd8df184d5ee721ae2ce60f398ced1219cea1f"
url: "https://pub.dev"
source: hosted
version: "3.3.1"
cached_network_image_platform_interface:
dependency: transitive
description:
name: cached_network_image_platform_interface
sha256: "9e90e78ae72caa874a323d78fa6301b3fb8fa7ea76a8f96dc5b5bf79f283bf2f"
url: "https://pub.dev"
source: hosted
version: "4.0.0"
cached_network_image_web:
dependency: transitive
description:
name: cached_network_image_web
sha256: "42a835caa27c220d1294311ac409a43361088625a4f23c820b006dd9bffb3316"
url: "https://pub.dev"
source: hosted
version: "1.1.1"
callkeep:
dependency: "direct main"
description:
@ -475,22 +499,6 @@ packages:
url: "https://pub.dev"
source: hosted
version: "0.1.1"
flutter_html:
dependency: "direct main"
description:
name: flutter_html
sha256: "02ad69e813ecfc0728a455e4bf892b9379983e050722b1dce00192ee2e41d1ee"
url: "https://pub.dev"
source: hosted
version: "3.0.0-beta.2"
flutter_html_table:
dependency: "direct main"
description:
name: flutter_html_table
sha256: e20c72d67ea2512e7b4949f6f7dd13d004e773b0f82c586a21f895e6bd90383c
url: "https://pub.dev"
source: hosted
version: "3.0.0-beta.2"
flutter_keyboard_visibility:
dependency: transitive
description:
@ -539,14 +547,6 @@ packages:
url: "https://pub.dev"
source: hosted
version: "1.0.0"
flutter_layout_grid:
dependency: transitive
description:
name: flutter_layout_grid
sha256: "3529b7aa7ed2cb9861a0bbaa5c14d4be2beaf5a070ce0176077159f80c5de094"
url: "https://pub.dev"
source: hosted
version: "2.0.5"
flutter_linkify:
dependency: "direct main"
description:
@ -755,6 +755,22 @@ packages:
url: "https://pub.dev"
source: hosted
version: "0.9.46"
flutter_widget_from_html:
dependency: "direct main"
description:
name: flutter_widget_from_html
sha256: "22c911b6ccf82b83e0c457d987bac4e703440fea0fc88dab24f4dfe995a5f33f"
url: "https://pub.dev"
source: hosted
version: "0.14.11"
flutter_widget_from_html_core:
dependency: transitive
description:
name: flutter_widget_from_html_core
sha256: "028f4989b9ff4907466af233d50146d807772600d98a3e895662fbdb09c39225"
url: "https://pub.dev"
source: hosted
version: "0.14.11"
fuchsia_remote_debug_protocol:
dependency: transitive
description: flutter
@ -768,6 +784,54 @@ packages:
url: "https://pub.dev"
source: hosted
version: "0.3.0"
fwfh_cached_network_image:
dependency: transitive
description:
name: fwfh_cached_network_image
sha256: "952aea958a5fda7d616cc297ba4bc08427e381459e75526fa375d6d8345630d3"
url: "https://pub.dev"
source: hosted
version: "0.14.2"
fwfh_chewie:
dependency: transitive
description:
name: fwfh_chewie
sha256: bbb036cd322ab77dc0edd34cbbf76181681f5e414987ece38745dc4f3d7408ed
url: "https://pub.dev"
source: hosted
version: "0.14.7"
fwfh_just_audio:
dependency: transitive
description:
name: fwfh_just_audio
sha256: "4962bc59cf8bbb0a77a55ff56a7b925612b0d8263bc2ede3636b9c86113cb493"
url: "https://pub.dev"
source: hosted
version: "0.14.2"
fwfh_svg:
dependency: transitive
description:
name: fwfh_svg
sha256: "3fd83926b7245d287f133a437ef430befd99d3b00ba8c600f26cc324af281f72"
url: "https://pub.dev"
source: hosted
version: "0.8.1"
fwfh_url_launcher:
dependency: transitive
description:
name: fwfh_url_launcher
sha256: "2a526c9819f74b4106ba2fba4dac79f0082deecd8d2c7011cd0471cb710e3eff"
url: "https://pub.dev"
source: hosted
version: "0.9.0+4"
fwfh_webview:
dependency: transitive
description:
name: fwfh_webview
sha256: b828bb5ddd4361a866cdb8f1b0de4f3348f332915ecf2f4215ba17e46c656adc
url: "https://pub.dev"
source: hosted
version: "0.14.8"
geolocator:
dependency: "direct main"
description:
@ -1110,14 +1174,6 @@ packages:
url: "https://pub.dev"
source: hosted
version: "3.0.0"
list_counter:
dependency: transitive
description:
name: list_counter
sha256: c447ae3dfcd1c55f0152867090e67e219d42fe6d4f2807db4bbe8b8d69912237
url: "https://pub.dev"
source: hosted
version: "1.0.2"
lists:
dependency: transitive
description:
@ -1238,6 +1294,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "1.0.0"
octo_image:
dependency: transitive
description:
name: octo_image
sha256: "45b40f99622f11901238e18d48f5f12ea36426d8eced9f4cbf58479c7aa2430d"
url: "https://pub.dev"
source: hosted
version: "2.0.0"
olm:
dependency: transitive
description:
@ -1550,14 +1614,6 @@ packages:
url: "https://pub.dev"
source: hosted
version: "1.0.1"
quiver:
dependency: transitive
description:
name: quiver
sha256: b1c1ac5ce6688d77f65f3375a9abb9319b3cb32486bdc7a1e0fdf004d7ba4e47
url: "https://pub.dev"
source: hosted
version: "3.2.1"
random_string:
dependency: transitive
description:
@ -2260,6 +2316,38 @@ packages:
url: "https://pub.dev"
source: hosted
version: "1.1.2"
webview_flutter:
dependency: transitive
description:
name: webview_flutter
sha256: "25e1b6e839e8cbfbd708abc6f85ed09d1727e24e08e08c6b8590d7c65c9a8932"
url: "https://pub.dev"
source: hosted
version: "4.7.0"
webview_flutter_android:
dependency: transitive
description:
name: webview_flutter_android
sha256: "3e5f4e9d818086b0d01a66fb1ff9cc72ab0cc58c71980e3d3661c5685ea0efb0"
url: "https://pub.dev"
source: hosted
version: "3.15.0"
webview_flutter_platform_interface:
dependency: transitive
description:
name: webview_flutter_platform_interface
sha256: d937581d6e558908d7ae3dc1989c4f87b786891ab47bb9df7de548a151779d8d
url: "https://pub.dev"
source: hosted
version: "2.10.0"
webview_flutter_wkwebview:
dependency: transitive
description:
name: webview_flutter_wkwebview
sha256: "9bf168bccdf179ce90450b5f37e36fe263f591c9338828d6bf09b6f8d0f57f86"
url: "https://pub.dev"
source: hosted
version: "3.12.0"
win32:
dependency: transitive
description:
@ -2317,5 +2405,5 @@ packages:
source: hosted
version: "3.1.2"
sdks:
dart: ">=3.2.0 <4.0.0"
flutter: ">=3.16.0"
dart: ">=3.2.3 <4.0.0"
flutter: ">=3.16.6"

3
pubspec.yaml
Unescape Escape View File

@ -34,8 +34,6 @@ dependencies:
flutter_file_dialog: ^3.0.2
flutter_foreground_task: ^6.0.0+1
flutter_highlighter: ^0.1.1
flutter_html: ^3.0.0-beta.2
flutter_html_table: ^3.0.0-beta.2
flutter_linkify: ^6.0.0
flutter_local_notifications: ^16.3.2
flutter_localizations:
@ -51,6 +49,7 @@ dependencies:
flutter_typeahead: ^5.2.0
flutter_web_auth_2: ^3.0.4
flutter_webrtc: ^0.9.46
flutter_widget_from_html: ^0.14.11
future_loading_dialog: ^0.3.0
geolocator: ^7.6.2
go_router: ^13.1.0

Write Preview
Loading…
Cancel
Save