MarianumMobile/Client
3
1
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

markdown support for talk messages

Browse Source
This commit is contained in:
Elias Müller
2026-08-16 21:35:41 +02:00
parent bd83a88e70
commit 02a7b87b5b
14 changed files with 379 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/view/pages/talk/data/chat_message.dart
+21 -7
View File
@@ -8,6 +8,7 @@ import '../../../../model/endpoint_data.dart';
import '../../../../utils/emoji_detection.dart';
import '../../../../utils/url_opener.dart';
import '../widgets/highlighted_linkify.dart';
import '../widgets/message_markdown.dart';
class ChatMessage {
String originalMessage;
@@ -26,7 +27,11 @@ class ChatMessage {
);
}
Widget getWidget({String? highlightQuery, TextStyle? style}) {
Widget getWidget({
String? highlightQuery,
TextStyle? style,
bool renderMarkdown = false,
}) {
final emojiFontSize = standaloneEmojiFontSize(content);
final effectiveStyle = emojiFontSize == null
? style
@@ -35,12 +40,21 @@ class ChatMessage {
height: 1.15,
);
Widget contentWidget = HighlightedLinkify(
text: content,
onOpen: UrlOpener.onOpen,
highlight: highlightQuery,
style: effectiveStyle,
);
// Markdown replaces the plain linkified text only for regular messages.
// Emoji-only bodies keep their enlarged rendering, and while searching we
// fall back to the linkify path so matches can still be highlighted (the
// search highlight can't be threaded through Markdown formatting).
final hasQuery = highlightQuery?.trim().isNotEmpty ?? false;
final useMarkdown = renderMarkdown && emojiFontSize == null && !hasQuery;
var contentWidget = useMarkdown
? MessageMarkdown(data: content, style: effectiveStyle)
: HighlightedLinkify(
text: content,
onOpen: UrlOpener.onOpen,
highlight: highlightQuery,
style: effectiveStyle,
);
// Enlarged emoji glyphs otherwise sit flush against the bubble edges.
if (emojiFontSize != null) {
lib/view/pages/talk/data/talk_markdown.dart
+76
View File
@@ -0,0 +1,76 @@
import 'package:markdown/markdown.dart' as md;
/// The Markdown feature set the app renders for Talk messages — CommonMark plus
/// the GFM extensions the official Talk clients enable.
///
/// It deliberately omits `InlineHtmlSyntax` (raw HTML stays literal), footnotes,
/// alert blocks, color swatches and `:shortcode:` emoji — matching Talk's
/// restrictions. Shared by the renderer ([MessageMarkdown]) and the plain-text
/// stripper below so both agree on what counts as Markdown.
final md.ExtensionSet talkMarkdownExtensionSet = md.ExtensionSet(
<md.BlockSyntax>[
const md.FencedCodeBlockSyntax(),
const md.TableSyntax(),
const md.UnorderedListWithCheckboxSyntax(),
const md.OrderedListWithCheckboxSyntax(),
],
<md.InlineSyntax>[
md.StrikethroughSyntax(),
md.AutolinkExtensionSyntax(),
],
);
/// Block-level tags after which running text would otherwise glue together;
/// their boundaries become a single space in the flattened preview.
const Set<String> _blockTags = {
'p',
'li',
'blockquote',
'pre',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'br',
'hr',
'tr',
'th',
'td',
};
/// Flattens a Markdown [source] into a single line of readable plain text —
/// markers (`**`, `#`, `` ` ``, list bullets, link/image syntax …) removed,
/// links reduced to their label and images to their alt text. Used for the
/// one-line previews (reply quote, conversation list) where Talk also strips
/// formatting rather than rendering it.
String markdownToPlainText(String source) {
final nodes = md.Document(
extensionSet: talkMarkdownExtensionSet,
encodeHtml: false,
).parse(source);
final buffer = StringBuffer();
_collect(nodes, buffer);
return buffer.toString().replaceAll(RegExp(r'\s+'), ' ').trim();
}
void _collect(List<md.Node> nodes, StringBuffer buffer) {
for (final node in nodes) {
if (node is md.Text) {
buffer.write(node.text);
} else if (node is md.Element) {
// Images carry their text in the `alt` attribute, not in child nodes.
if (node.tag == 'img') {
buffer.write(node.attributes['alt'] ?? '');
continue;
}
final isBlock = _blockTags.contains(node.tag);
if (isBlock) buffer.write(' ');
final children = node.children;
if (children != null) _collect(children, buffer);
if (isBlock) buffer.write(' ');
}
}
}
lib/view/pages/talk/widgets/answer_reference.dart
+10 -4
View File
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
import '../../../../api/marianumcloud/talk/chat/get_chat_response.dart';
import '../../../../api/marianumcloud/talk/chat/rich_object_string_processor.dart';
import '../data/chat_bubble_styles.dart';
import '../data/talk_markdown.dart';
class AnswerReference extends StatelessWidget {
final GetChatResponseObject referenceMessage;
@@ -43,10 +44,15 @@ class AnswerReference extends StatelessWidget {
),
),
Text(
RichObjectStringProcessor.parseToString(
referenceMessage.message,
referenceMessage.messageParameters,
),
() {
final text = RichObjectStringProcessor.parseToString(
referenceMessage.message,
referenceMessage.messageParameters,
);
return referenceMessage.markdown
? markdownToPlainText(text)
: text;
}(),
maxLines: 2,
style: TextStyle(
overflow: TextOverflow.ellipsis,
lib/view/pages/talk/widgets/chat_bubble.dart
+5 -1
View File
@@ -157,7 +157,7 @@ class _ChatBubbleState extends State<ChatBubble>
/// `onTap: null` on the bubble's `GestureDetector` so its
/// `TapGestureRecognizer` does not enter the gesture arena — otherwise
/// it competes with (and blocks) the per-link `TapGestureRecognizer`s
/// that `HighlightedLinkify` attaches to URL spans.
/// that `HighlightedLinkify` / the Markdown renderer attach to link spans.
bool get _hasTapAction {
final obj = message.originalData?['object'];
if (obj?.type == RichObjectStringObjectType.talkPoll) return true;
@@ -280,6 +280,10 @@ class _ChatBubbleState extends State<ChatBubble>
messageWidget: message.getWidget(
highlightQuery: widget.highlightQuery,
style: _messageTextStyle(context),
renderMarkdown:
widget.bubbleData.markdown &&
widget.bubbleData.messageType ==
GetRoomResponseObjectMessageType.comment,
),
parent: parent,
bubbleData: widget.bubbleData,
lib/view/pages/talk/widgets/chat_tile.dart
+14 -1
View File
@@ -20,6 +20,7 @@ import '../../../../widget/confirm_dialog.dart';
import '../../../../widget/debug/debug_tile.dart';
import '../../../../widget/details_bottom_sheet.dart';
import '../../../../widget/user_avatar.dart';
import '../data/talk_markdown.dart';
import '../talk_navigator.dart';
class ChatTile extends StatefulWidget {
@@ -62,6 +63,18 @@ class _ChatTileState extends State<ChatTile> {
void _refreshList() => context.read<ChatListBloc>().refresh();
/// One-line preview of the last message: rich-object placeholders resolved,
/// newlines flattened and — for Markdown messages — formatting stripped so
/// the list shows readable text rather than raw markers.
String _lastMessagePreview() {
final last = widget.data.lastMessage;
final text = RichObjectStringProcessor.parseToString(
last.message.replaceAll('\n', ' '),
last.messageParameters,
);
return last.markdown ? markdownToPlainText(text) : text;
}
Future<void> _setCurrentAsRead() async {
final token = widget.data.token;
final lastId = widget.data.lastMessage.id;
@@ -142,7 +155,7 @@ class _ChatTileState extends State<ChatTile> {
),
subtitle: Text(
'${DateTime.fromMillisecondsSinceEpoch(widget.data.lastMessage.timestamp * 1000).formatRelative()}: '
'${RichObjectStringProcessor.parseToString(widget.data.lastMessage.message.replaceAll("\n", " "), widget.data.lastMessage.messageParameters)}',
'${_lastMessagePreview()}',
overflow: TextOverflow.ellipsis,
),
trailing: widget.data.unreadMessages <= 0
lib/view/pages/talk/widgets/message_markdown.dart
+118
View File
@@ -0,0 +1,118 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
import '../../../../utils/url_opener.dart';
import '../data/talk_markdown.dart';
/// Renders a Talk chat-message body as Markdown, matching the subset the
/// official Nextcloud Talk clients render.
///
/// Supported (the intentional "Rahmen", kept in sync with Talk's GFM-based
/// renderer): bold, italic, strikethrough, inline code, links (explicit and
/// bare autolinks), headings, ordered/unordered/task lists, fenced code
/// blocks, block quotes, horizontal rules and tables.
///
/// Deliberately unsupported, mirroring Talk's restrictions: raw HTML is shown
/// literally (never interpreted) and images are not fetched/rendered — only
/// their alt text (or URL) is shown, so a message can never pull a remote
/// resource on display.
class MessageMarkdown extends StatelessWidget {
final String data;
final TextStyle? style;
const MessageMarkdown({required this.data, this.style, super.key});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final base =
style ??
theme.textTheme.bodyMedium ??
DefaultTextStyle.of(context).style;
final baseSize = base.fontSize ?? 14;
final muted = (base.color ?? theme.colorScheme.onSurface).withValues(
alpha: 0.55,
);
final codeBackground = theme.colorScheme.surfaceContainerHighest.withValues(
alpha: 0.6,
);
final codeStyle = base.copyWith(
fontFamily: 'monospace',
fontFamilyFallback: const ['monospace'],
fontSize: baseSize * 0.92,
);
final styleSheet = MarkdownStyleSheet.fromTheme(theme).copyWith(
p: base,
a: base.copyWith(
color: Colors.blue,
decoration: TextDecoration.underline,
),
em: base.copyWith(fontStyle: FontStyle.italic),
strong: base.copyWith(fontWeight: FontWeight.bold),
del: base.copyWith(decoration: TextDecoration.lineThrough),
// Talk levels headings down so they stay readable inside a chat bubble;
// we cap them at modest multiples of the body size instead of the theme's
// display sizes.
h1: base.copyWith(fontSize: baseSize * 1.5, fontWeight: FontWeight.bold),
h2: base.copyWith(fontSize: baseSize * 1.4, fontWeight: FontWeight.bold),
h3: base.copyWith(fontSize: baseSize * 1.3, fontWeight: FontWeight.bold),
h4: base.copyWith(fontSize: baseSize * 1.15, fontWeight: FontWeight.bold),
h5: base.copyWith(fontSize: baseSize * 1.05, fontWeight: FontWeight.bold),
h6: base.copyWith(fontWeight: FontWeight.bold),
code: codeStyle.copyWith(backgroundColor: codeBackground),
codeblockPadding: const EdgeInsets.all(8),
codeblockDecoration: BoxDecoration(
color: codeBackground,
borderRadius: BorderRadius.circular(6),
),
blockquote: base.copyWith(color: muted),
blockquotePadding: const EdgeInsets.only(left: 12, top: 2, bottom: 2),
blockquoteDecoration: BoxDecoration(
border: Border(left: BorderSide(color: muted, width: 4)),
),
listBullet: base,
checkbox: base,
horizontalRuleDecoration: BoxDecoration(
border: Border(top: BorderSide(color: muted)),
),
tableHead: base.copyWith(fontWeight: FontWeight.bold),
tableBody: base,
tableBorder: TableBorder.all(color: muted, width: 0.8),
tableCellsPadding: const EdgeInsets.symmetric(
horizontal: 6,
vertical: 3,
),
// Keep multi-block messages compact; the default spacing is too airy for
// a chat bubble.
blockSpacing: baseSize * 0.5,
);
return MarkdownBody(
data: data,
styleSheet: styleSheet,
extensionSet: talkMarkdownExtensionSet,
// Talk turns a single newline into a line break (`breaks: true`);
// standard Markdown would collapse it into a space.
softLineBreak: true,
onTapLink: (text, href, title) {
if (href != null && href.isNotEmpty) unawaited(UrlOpener.openUrl(href));
},
// No remote fetch: render the alt text (or URL) instead of the image.
imageBuilder: (uri, title, alt) => Text(
(alt != null && alt.isNotEmpty) ? alt : uri.toString(),
style: base,
),
checkboxBuilder: (checked) => Padding(
padding: const EdgeInsets.only(right: 4),
child: Icon(
checked ? Icons.check_box_outlined : Icons.check_box_outline_blank,
size: baseSize + 2,
color: base.color,
),
),
);
}
}