fixup select
This commit is contained in:
parent
ed761d6071
commit
f2efbbeb9f
SSH key fingerprint:
SHA256:VKQUdS31Q90KvX7EkKMHMBpUspcmItAh86a+v7PGiIs
2 changed files with 229 additions and 290 deletions
|
|
@ -1,5 +1,4 @@
|
||||||
import "package:fast_immutable_collections/fast_immutable_collections.dart";
|
import "package:fast_immutable_collections/fast_immutable_collections.dart";
|
||||||
import "package:flutter/rendering.dart";
|
|
||||||
import "package:material_ui/material_ui.dart";
|
import "package:material_ui/material_ui.dart";
|
||||||
import "package:flutter_riverpod/flutter_riverpod.dart";
|
import "package:flutter_riverpod/flutter_riverpod.dart";
|
||||||
import "package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart";
|
import "package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart";
|
||||||
|
|
@ -19,140 +18,133 @@ class const Html(
|
||||||
super.key,
|
super.key,
|
||||||
}) extends ConsumerWidget {
|
}) extends ConsumerWidget {
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context, WidgetRef ref) {
|
Widget
|
||||||
// needed until https://github.com/daohoangson/flutter_widget_from_html/issues/1618 is resolved
|
build(BuildContext context, WidgetRef ref)
|
||||||
final htmlWidget = MaterialUiCompatibilityBridge(
|
// needed until https://github.com/daohoangson/flutter_widget_from_html/issues/1618 is resolved
|
||||||
child: HtmlWidget(
|
=> MaterialUiCompatibilityBridge(
|
||||||
html,
|
child: HtmlWidget(
|
||||||
buildAsync: false,
|
html,
|
||||||
textStyle: textStyle,
|
buildAsync: false,
|
||||||
customWidgetBuilder: (element) {
|
textStyle: textStyle,
|
||||||
if (element.attributes.keys.contains("data-mx-profile-fallback")) {
|
customWidgetBuilder: (element) {
|
||||||
return SizedBox.shrink();
|
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")
|
(element.attributes.keys.contains("data-mx-emoticon")
|
||||||
? 32
|
? 32
|
||||||
: null) ??
|
: null) ??
|
||||||
300;
|
300;
|
||||||
final width = int.tryParse(element.attributes["width"] ?? "");
|
final width = int.tryParse(element.attributes["width"] ?? "");
|
||||||
final src = Uri.tryParse(element.attributes["src"] ?? "");
|
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" =>
|
"img" =>
|
||||||
src == null
|
src == null
|
||||||
? SizedBox.shrink()
|
? SizedBox.shrink()
|
||||||
: InlineCustomWidget(
|
: InlineCustomWidget(
|
||||||
alignment: PlaceholderAlignment.middle,
|
alignment: PlaceholderAlignment.middle,
|
||||||
child: ExpandableImage(
|
child: ExpandableImage(
|
||||||
.new(mxc: src),
|
.new(mxc: src),
|
||||||
child: Image(
|
child: Image(
|
||||||
image: MxcImage(ref, .new(mxc: src)),
|
image: MxcImage(ref, .new(mxc: src)),
|
||||||
errorBuilder: (_, error, _) => Text(
|
errorBuilder: (_, error, _) => Text(
|
||||||
"Image Failed to Load",
|
"Image Failed to Load",
|
||||||
style: .new(
|
style: .new(
|
||||||
color: Theme.of(context).colorScheme.error,
|
color: Theme.of(context).colorScheme.error,
|
||||||
),
|
|
||||||
),
|
),
|
||||||
height: height.toDouble(),
|
|
||||||
width: width?.toDouble(),
|
|
||||||
loadingBuilder: (_, child, loadingProgress) =>
|
|
||||||
loadingProgress == null
|
|
||||||
? child
|
|
||||||
: CircularProgressIndicator(),
|
|
||||||
),
|
),
|
||||||
|
height: height.toDouble(),
|
||||||
|
width: width?.toDouble(),
|
||||||
|
loadingBuilder: (_, child, loadingProgress) =>
|
||||||
|
loadingProgress == null
|
||||||
|
? child
|
||||||
|
: CircularProgressIndicator(),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
),
|
||||||
|
|
||||||
// Allowed elements list
|
// Allowed elements list
|
||||||
("del" ||
|
("del" ||
|
||||||
"h1" ||
|
"h1" ||
|
||||||
"h2" ||
|
"h2" ||
|
||||||
"h3" ||
|
"h3" ||
|
||||||
"h4" ||
|
"h4" ||
|
||||||
"h5" ||
|
"h5" ||
|
||||||
"h6" ||
|
"h6" ||
|
||||||
"p" ||
|
"p" ||
|
||||||
"ul" ||
|
"ul" ||
|
||||||
"ol" ||
|
"ol" ||
|
||||||
"sup" ||
|
"sup" ||
|
||||||
"sub" ||
|
"sub" ||
|
||||||
"li" ||
|
"li" ||
|
||||||
"b" ||
|
"b" ||
|
||||||
"i" ||
|
"i" ||
|
||||||
"u" ||
|
"u" ||
|
||||||
"strong" ||
|
"strong" ||
|
||||||
"em" ||
|
"em" ||
|
||||||
"s" ||
|
"s" ||
|
||||||
"code" ||
|
"code" ||
|
||||||
"hr" ||
|
"hr" ||
|
||||||
"br" ||
|
"br" ||
|
||||||
"div" ||
|
"div" ||
|
||||||
"table" ||
|
"table" ||
|
||||||
"thead" ||
|
"thead" ||
|
||||||
"tbody" ||
|
"tbody" ||
|
||||||
"tr" ||
|
"tr" ||
|
||||||
"th" ||
|
"th" ||
|
||||||
"td" ||
|
"td" ||
|
||||||
"caption" ||
|
"caption" ||
|
||||||
"pre" ||
|
"pre" ||
|
||||||
"span" ||
|
"span" ||
|
||||||
"details" ||
|
"details" ||
|
||||||
"summary") =>
|
"summary") =>
|
||||||
null,
|
null,
|
||||||
|
|
||||||
_ => SizedBox.shrink(),
|
_ => SizedBox.shrink(),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
customStylesBuilder: (element) => {
|
customStylesBuilder: (element) => {
|
||||||
"width": "auto",
|
"width": "auto",
|
||||||
...Map.fromEntries(
|
...Map.fromEntries(
|
||||||
element.attributes
|
element.attributes
|
||||||
.mapTo<MapEntry<String, String>?>(
|
.mapTo<MapEntry<String, String>?>(
|
||||||
(key, value) => switch (key) {
|
(key, value) => switch (key) {
|
||||||
"data-mx-color" => .new("color", value),
|
"data-mx-color" => .new("color", value),
|
||||||
"data-mx-bg-color" => .new("background-color", value),
|
"data-mx-bg-color" => .new("background-color", value),
|
||||||
_ => null,
|
_ => null,
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
.nonNulls,
|
.nonNulls,
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
onTapUrl: (url) =>
|
onTapUrl: (url) =>
|
||||||
ref.watch(LaunchHelper.provider).launchUrl(.parse(url)),
|
ref.watch(LaunchHelper.provider).launchUrl(.parse(url)),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
return RendererBinding.instance.mouseTracker.mouseIsConnected
|
|
||||||
? SelectableRegion(
|
|
||||||
selectionControls: materialTextSelectionControls,
|
|
||||||
child: htmlWidget,
|
|
||||||
)
|
|
||||||
: htmlWidget;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import "package:collection/collection.dart";
|
import "package:collection/collection.dart";
|
||||||
|
import "package:flutter/rendering.dart";
|
||||||
import "package:material_ui/material_ui.dart";
|
import "package:material_ui/material_ui.dart";
|
||||||
import "package:flutter_riverpod/flutter_riverpod.dart";
|
import "package:flutter_riverpod/flutter_riverpod.dart";
|
||||||
import "package:linkify/linkify.dart";
|
import "package:linkify/linkify.dart";
|
||||||
|
|
@ -40,6 +41,111 @@ class const MessageRenderer(
|
||||||
fontStyle: event.content is EmoteMessageContent ? .italic : null,
|
fontStyle: event.content is EmoteMessageContent ? .italic : null,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
final rendered = switch (event.content) {
|
||||||
|
EncryptedContent() => Text("Unable to decrypt event", style: errorStyle),
|
||||||
|
StickerContent(:final body, :final url, :final info) =>
|
||||||
|
textOnly
|
||||||
|
? Text(body, maxLines: maxLines, overflow: .ellipsis)
|
||||||
|
: ConstrainedBox(
|
||||||
|
constraints: .loose(.square(200)),
|
||||||
|
child: MessageImage(url, info: info, encrypted: false),
|
||||||
|
),
|
||||||
|
// TODO: Handle locations
|
||||||
|
// LocationMessageContent(:final body , :final geoUri) =>
|
||||||
|
TextMessageContent(:final body, :final formattedBody, :final format) ||
|
||||||
|
NoticeMessageContent(:final body, :final formattedBody, :final format) ||
|
||||||
|
EmoteMessageContent(:final body, :final formattedBody, :final format) ||
|
||||||
|
ImageMessageContent(:final body, :final formattedBody, :final format) ||
|
||||||
|
VideoMessageContent(:final body, :final formattedBody, :final format) ||
|
||||||
|
AudioMessageContent(:final body, :final formattedBody, :final format) ||
|
||||||
|
FileMessageContent(
|
||||||
|
:final body,
|
||||||
|
:final formattedBody,
|
||||||
|
:final format,
|
||||||
|
) => Column(
|
||||||
|
crossAxisAlignment: .start,
|
||||||
|
children: [
|
||||||
|
format == .html && !textOnly
|
||||||
|
? Html(
|
||||||
|
roomId: event.roomId,
|
||||||
|
textStyle: textStyle,
|
||||||
|
formattedBody!.replaceAllMapped(
|
||||||
|
RegExp(
|
||||||
|
r"(<a\b[^>]*>.*?<\/a>)|(\bhttps?:\/\/[^\s<]+)",
|
||||||
|
caseSensitive: false,
|
||||||
|
dotAll: true,
|
||||||
|
),
|
||||||
|
(m) {
|
||||||
|
// If it's already an <a> tag, leave it unchanged
|
||||||
|
if (m.group(1) != null) {
|
||||||
|
return m.group(1)!;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Otherwise, wrap the bare URL
|
||||||
|
final url = m.group(2)!;
|
||||||
|
return "<a href=\"$url\">$url</a>";
|
||||||
|
},
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: LinkifiedText(body, style: textStyle, maxLines: maxLines),
|
||||||
|
|
||||||
|
if (!textOnly) ...[
|
||||||
|
if (event.content
|
||||||
|
case ImageMessageContent(:final url) ||
|
||||||
|
FileMessageContent(:final url) ||
|
||||||
|
VideoMessageContent(:final url) ||
|
||||||
|
AudioMessageContent(:final url))
|
||||||
|
ConstrainedBox(
|
||||||
|
constraints: .loose(.square(500)),
|
||||||
|
child: switch (event.content) {
|
||||||
|
VideoMessageContent(:final info, :final file) => VideoPlayer(
|
||||||
|
url,
|
||||||
|
info,
|
||||||
|
encrypted: file != null,
|
||||||
|
),
|
||||||
|
AudioMessageContent(:final info, :final file) => AudioPlayer(
|
||||||
|
url,
|
||||||
|
info,
|
||||||
|
|
||||||
|
encrypted: file != null,
|
||||||
|
),
|
||||||
|
FileMessageContent(:final info, :final filename) => FileCard(
|
||||||
|
url,
|
||||||
|
info,
|
||||||
|
filename: filename,
|
||||||
|
),
|
||||||
|
ImageMessageContent(:final info, :final file) => MessageImage(
|
||||||
|
url,
|
||||||
|
info: info,
|
||||||
|
encrypted: file != null,
|
||||||
|
),
|
||||||
|
_ => SizedBox.shrink(),
|
||||||
|
},
|
||||||
|
),
|
||||||
|
|
||||||
|
if (event.lastEditRowId != 0)
|
||||||
|
Text("(edited)", style: theme.textTheme.labelSmall),
|
||||||
|
|
||||||
|
if (linkify(body)
|
||||||
|
.firstWhereOrNull((element) => element is UrlElement)
|
||||||
|
case final UrlElement link?)
|
||||||
|
if (Uri.tryParse(link.url) case final Uri url?) UrlPreview(url),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
),
|
||||||
|
MessageContent(:final body) =>
|
||||||
|
body == null
|
||||||
|
? Text("This message is redacted", style: errorStyle)
|
||||||
|
: Wrap(
|
||||||
|
spacing: 8,
|
||||||
|
children: [
|
||||||
|
Text("Unknown message type:", style: errorStyle),
|
||||||
|
Text(body),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
_ => throw Exception("This is impossible"),
|
||||||
|
};
|
||||||
|
|
||||||
return Row(
|
return Row(
|
||||||
crossAxisAlignment: .start,
|
crossAxisAlignment: .start,
|
||||||
mainAxisSize: .min,
|
mainAxisSize: .min,
|
||||||
|
|
@ -113,172 +219,13 @@ class const MessageRenderer(
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
switch (event.content) {
|
|
||||||
EncryptedContent() => Text(
|
|
||||||
"Unable to decrypt event",
|
|
||||||
style: errorStyle,
|
|
||||||
),
|
|
||||||
StickerContent(:final body, :final url, :final info) =>
|
|
||||||
textOnly
|
|
||||||
? Text(
|
|
||||||
body,
|
|
||||||
maxLines: maxLines,
|
|
||||||
overflow: .ellipsis,
|
|
||||||
)
|
|
||||||
: ConstrainedBox(
|
|
||||||
constraints: .loose(.square(200)),
|
|
||||||
child: MessageImage(
|
|
||||||
url,
|
|
||||||
info: info,
|
|
||||||
encrypted: false,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
// TODO: Handle locations
|
|
||||||
// LocationMessageContent(:final body , :final geoUri) =>
|
|
||||||
TextMessageContent(
|
|
||||||
:final body,
|
|
||||||
:final formattedBody,
|
|
||||||
:final format,
|
|
||||||
) ||
|
|
||||||
NoticeMessageContent(
|
|
||||||
:final body,
|
|
||||||
:final formattedBody,
|
|
||||||
:final format,
|
|
||||||
) ||
|
|
||||||
EmoteMessageContent(
|
|
||||||
:final body,
|
|
||||||
:final formattedBody,
|
|
||||||
:final format,
|
|
||||||
) ||
|
|
||||||
ImageMessageContent(
|
|
||||||
:final body,
|
|
||||||
:final formattedBody,
|
|
||||||
:final format,
|
|
||||||
) ||
|
|
||||||
VideoMessageContent(
|
|
||||||
:final body,
|
|
||||||
:final formattedBody,
|
|
||||||
:final format,
|
|
||||||
) ||
|
|
||||||
AudioMessageContent(
|
|
||||||
:final body,
|
|
||||||
:final formattedBody,
|
|
||||||
:final format,
|
|
||||||
) ||
|
|
||||||
FileMessageContent(
|
|
||||||
:final body,
|
|
||||||
:final formattedBody,
|
|
||||||
:final format,
|
|
||||||
) => Column(
|
|
||||||
crossAxisAlignment: .start,
|
|
||||||
children: [
|
|
||||||
format == .html && !textOnly
|
|
||||||
? Html(
|
|
||||||
roomId: event.roomId,
|
|
||||||
textStyle: textStyle,
|
|
||||||
formattedBody!.replaceAllMapped(
|
|
||||||
RegExp(
|
|
||||||
r"(<a\b[^>]*>.*?<\/a>)|(\bhttps?:\/\/[^\s<]+)",
|
|
||||||
caseSensitive: false,
|
|
||||||
dotAll: true,
|
|
||||||
),
|
|
||||||
(m) {
|
|
||||||
// If it's already an <a> tag, leave it unchanged
|
|
||||||
if (m.group(1) != null) {
|
|
||||||
return m.group(1)!;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Otherwise, wrap the bare URL
|
RendererBinding.instance.mouseTracker.mouseIsConnected
|
||||||
final url = m.group(2)!;
|
? SelectableRegion(
|
||||||
return "<a href=\"$url\">$url</a>";
|
selectionControls: materialTextSelectionControls,
|
||||||
},
|
child: rendered,
|
||||||
),
|
)
|
||||||
)
|
: rendered,
|
||||||
: LinkifiedText(
|
|
||||||
body,
|
|
||||||
style: textStyle,
|
|
||||||
maxLines: maxLines,
|
|
||||||
),
|
|
||||||
|
|
||||||
if (!textOnly) ...[
|
|
||||||
if (event.content
|
|
||||||
case ImageMessageContent(:final url) ||
|
|
||||||
FileMessageContent(:final url) ||
|
|
||||||
VideoMessageContent(:final url) ||
|
|
||||||
AudioMessageContent(:final url))
|
|
||||||
ConstrainedBox(
|
|
||||||
constraints: .loose(.square(500)),
|
|
||||||
child: switch (event.content) {
|
|
||||||
VideoMessageContent(
|
|
||||||
:final info,
|
|
||||||
:final file,
|
|
||||||
) =>
|
|
||||||
VideoPlayer(
|
|
||||||
url,
|
|
||||||
info,
|
|
||||||
encrypted: file != null,
|
|
||||||
),
|
|
||||||
AudioMessageContent(
|
|
||||||
:final info,
|
|
||||||
:final file,
|
|
||||||
) =>
|
|
||||||
AudioPlayer(
|
|
||||||
url,
|
|
||||||
info,
|
|
||||||
|
|
||||||
encrypted: file != null,
|
|
||||||
),
|
|
||||||
FileMessageContent(
|
|
||||||
:final info,
|
|
||||||
:final filename,
|
|
||||||
) =>
|
|
||||||
FileCard(url, info, filename: filename),
|
|
||||||
ImageMessageContent(
|
|
||||||
:final info,
|
|
||||||
:final file,
|
|
||||||
) =>
|
|
||||||
MessageImage(
|
|
||||||
url,
|
|
||||||
info: info,
|
|
||||||
encrypted: file != null,
|
|
||||||
),
|
|
||||||
_ => SizedBox.shrink(),
|
|
||||||
},
|
|
||||||
),
|
|
||||||
|
|
||||||
if (event.lastEditRowId != 0)
|
|
||||||
Text(
|
|
||||||
"(edited)",
|
|
||||||
style: theme.textTheme.labelSmall,
|
|
||||||
),
|
|
||||||
|
|
||||||
if (linkify(body).firstWhereOrNull(
|
|
||||||
(element) => element is UrlElement,
|
|
||||||
)
|
|
||||||
case final UrlElement link?)
|
|
||||||
if (Uri.tryParse(link.url) case final Uri url?)
|
|
||||||
UrlPreview(url),
|
|
||||||
],
|
|
||||||
],
|
|
||||||
),
|
|
||||||
MessageContent(:final body) =>
|
|
||||||
body == null
|
|
||||||
? Text(
|
|
||||||
"This message is redacted",
|
|
||||||
style: errorStyle,
|
|
||||||
)
|
|
||||||
: Wrap(
|
|
||||||
spacing: 8,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
"Unknown message type:",
|
|
||||||
style: errorStyle,
|
|
||||||
),
|
|
||||||
Text(body),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
_ => throw Exception("This is impossible"),
|
|
||||||
},
|
|
||||||
if (!textOnly) ReactionRow(event),
|
if (!textOnly) ReactionRow(event),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue