Implement a popup card that renders description markdown

This commit is contained in:
2025-03-18 23:51:37 +01:00
parent f90371109c
commit 9eb71e94c1
6 changed files with 592 additions and 3 deletions

174
lib/bbcode_converter.dart Normal file
View File

@@ -0,0 +1,174 @@
/// Utility class to convert BBCode to Markdown for RimWorld mod descriptions
class BBCodeConverter {
/// Converts BBCode formatted text to Markdown format
static String toMarkdown(String bbcode) {
if (bbcode.isEmpty) return '';
// First, normalize line endings
String result = bbcode.replaceAll('\r\n', '\n');
// Fix unclosed tags - RimWorld descriptions often have unclosed tags
final List<String> tagTypes = ['b', 'i', 'color', 'size', 'url', 'code', 'quote'];
for (final tag in tagTypes) {
final openCount = '[${tag}'.allMatches(result).length;
final closeCount = '[/${tag}]'.allMatches(result).length;
if (openCount > closeCount) {
result = result + '[/${tag}]' * (openCount - closeCount);
}
}
// URLs
// [url=http://example.com]text[/url] -> [text](http://example.com)
result = RegExp(r'\[url=([^\]]+)\](.*?)\[/url\]', dotAll: true)
.allMatches(result)
.fold(result, (prev, match) {
final url = match.group(1);
final text = match.group(2);
return prev.replaceFirst(
match.group(0)!,
'[$text]($url)'
);
});
// Simple URL [url]http://example.com[/url] -> <http://example.com>
result = result.replaceAllMapped(
RegExp(r'\[url\](.*?)\[/url\]', dotAll: true),
(match) => '<${match.group(1)}>'
);
// Bold
result = result.replaceAll('[b]', '**').replaceAll('[/b]', '**');
// Italic
result = result.replaceAll('[i]', '_').replaceAll('[/i]', '_');
// Headers
result = result.replaceAllMapped(
RegExp(r'\[h1\](.*?)\[/h1\]', dotAll: true),
(match) => '# ${match.group(1)}'
);
result = result.replaceAllMapped(
RegExp(r'\[h2\](.*?)\[/h2\]', dotAll: true),
(match) => '## ${match.group(1)}'
);
result = result.replaceAllMapped(
RegExp(r'\[h3\](.*?)\[/h3\]', dotAll: true),
(match) => '### ${match.group(1)}'
);
// Lists - handle nested lists too
result = result.replaceAll('[list]', '\n').replaceAll('[/list]', '\n');
// Handle list items - giving them proper indentation
int listLevel = 0;
result = result.replaceAllMapped(
RegExp(r'\[\*\](.*?)(?=\[\*\]|\[/list\]|$)', dotAll: true),
(match) {
final content = match.group(1)?.trim() ?? '';
return '* $content\n';
}
);
// Color - convert to bold since Markdown doesn't support color
result = result.replaceAllMapped(
RegExp(r'\[color=([^\]]+)\](.*?)\[/color\]', dotAll: true),
(match) {
final content = match.group(2) ?? '';
if (content.trim().isEmpty) return '';
return '**${match.group(2)}**';
}
);
// Images
// [img]url[/img] -> ![Image](url)
result = result.replaceAllMapped(
RegExp(r'\[img\](.*?)\[/img\]', dotAll: true),
(match) => '![Image](${match.group(1)})'
);
// Image with size [img width=300]url[/img] -> ![Image](url)
result = result.replaceAllMapped(
RegExp(r'\[img[^\]]*width=(\d+)[^\]]*\](.*?)\[/img\]', dotAll: true),
(match) => '![Image](${match.group(2)})'
);
// Tables - convert tables to markdown tables
if (result.contains('[table]')) {
// Process tables
final tableRegex = RegExp(r'\[table\](.*?)\[/table\]', dotAll: true);
final tables = tableRegex.allMatches(result);
for (final tableMatch in tables) {
final tableContent = tableMatch.group(1) ?? '';
final rows = RegExp(r'\[tr\](.*?)\[/tr\]', dotAll: true).allMatches(tableContent);
final markdownTable = StringBuffer();
var isFirstRow = true;
for (final rowMatch in rows) {
final rowContent = rowMatch.group(1) ?? '';
final cells = RegExp(r'\[td\](.*?)\[/td\]', dotAll: true).allMatches(rowContent);
if (cells.isEmpty) continue;
final rowBuffer = StringBuffer('|');
for (final cellMatch in cells) {
final cellContent = cellMatch.group(1)?.trim() ?? '';
// Clean up any newlines inside cell content
final cleanCell = cellContent.replaceAll('\n', ' ').trim();
rowBuffer.write(' $cleanCell |');
}
markdownTable.writeln(rowBuffer.toString());
// Add header separator after first row
if (isFirstRow) {
final cellCount = RegExp(r'\[td\]').allMatches(rowContent).length;
markdownTable.writeln('|${' --- |' * cellCount}');
isFirstRow = false;
}
}
result = result.replaceFirst(tableMatch.group(0)!, '\n${markdownTable.toString()}\n');
}
}
// Size - remove since Markdown doesn't directly support font size
result = result.replaceAllMapped(
RegExp(r'\[size=[^\]]+\](.*?)\[/size\]', dotAll: true),
(match) => match.group(1) ?? ''
);
// Code
result = result.replaceAll('[code]', '\n```\n').replaceAll('[/code]', '\n```\n');
// Quote
result = result.replaceAllMapped(
RegExp(r'\[quote\](.*?)\[/quote\]', dotAll: true),
(match) {
final content = match.group(1)?.trim() ?? '';
if (content.isEmpty) return '';
return '\n> ${content.replaceAll('\n', '\n> ')}\n';
}
);
// Handle any remaining custom BBCode tags - just remove them
result = result.replaceAllMapped(
RegExp(r'\[([a-zA-Z0-9_]+)(?:=[^\]]+)?\](.*?)\[/\1\]', dotAll: true),
(match) => match.group(2) ?? ''
);
// Handle RimWorld-specific patterns
// [h1] without closing tag is common
result = result.replaceAllMapped(
RegExp(r'\[h1\]([^\[]+)'),
(match) => '# ${match.group(1)}\n'
);
// Replace multiple newlines with at most two newlines
result = result.replaceAll(RegExp(r'\n{3,}'), '\n\n');
return result;
}
}

View File

@@ -2,6 +2,7 @@ import 'dart:io';
import 'package:flutter/material.dart';
import 'package:rimworld_modman/logger.dart';
import 'package:rimworld_modman/markdown_tooltip.dart';
import 'package:rimworld_modman/mod.dart';
import 'package:rimworld_modman/mod_list.dart';
import 'package:rimworld_modman/mod_troubleshooter_widget.dart';
@@ -741,6 +742,17 @@ class _ModManagerPageState extends State<ModManagerPage> {
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
// Description tooltip
if (mod.description.isNotEmpty)
MarkdownTooltip(
markdownContent: mod.description,
child: Icon(
Icons.description_outlined,
color: Colors.lightBlue.shade300,
size: AppThemeExtension.of(context).iconSizeRegular,
),
),
const SizedBox(width: 4),
if (mod.isBaseGame)
Tooltip(
message: 'Base Game',
@@ -771,7 +783,6 @@ class _ModManagerPageState extends State<ModManagerPage> {
).iconSizeRegular,
),
),
const SizedBox(width: 4),
if (mod.dependencies.isNotEmpty)
Tooltip(
message:
@@ -982,6 +993,17 @@ class _ModManagerPageState extends State<ModManagerPage> {
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
// Description tooltip
if (mod.description.isNotEmpty)
MarkdownTooltip(
markdownContent: mod.description,
child: Icon(
Icons.description_outlined,
color: Colors.lightBlue.shade300,
size: AppThemeExtension.of(context).iconSizeRegular,
),
),
const SizedBox(width: 4),
if (mod.isBaseGame)
Tooltip(
message: 'Base Game',

372
lib/markdown_tooltip.dart Normal file
View File

@@ -0,0 +1,372 @@
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:rimworld_modman/bbcode_converter.dart';
/// A custom tooltip widget that can properly render mod descriptions in BBCode format.
class MarkdownTooltip extends StatefulWidget {
/// The markdown text to display in the tooltip.
final String markdownContent;
/// The widget that will trigger the tooltip.
final Widget child;
/// Optional preferred width for the tooltip.
final double preferredWidth;
/// Optional maximum height for the tooltip.
final double maxHeight;
/// Optional text style theme for the markdown.
final MarkdownStyleSheet? styleSheet;
/// Creates a tooltip that displays markdown content when hovered.
const MarkdownTooltip({
super.key,
required this.markdownContent,
required this.child,
this.preferredWidth = 500.0,
this.maxHeight = 500.0,
this.styleSheet,
});
@override
State<MarkdownTooltip> createState() => _MarkdownTooltipState();
}
class _MarkdownTooltipState extends State<MarkdownTooltip> {
OverlayEntry? _overlayEntry;
final LayerLink _layerLink = LayerLink();
bool _isTooltipVisible = false;
bool _isMouseInside = false;
bool _isPointerListenerActive = false;
@override
void dispose() {
_removeGlobalListener();
_hideTooltip();
super.dispose();
}
void _showTooltip() {
if (_isTooltipVisible || !mounted) return;
try {
_overlayEntry = _createOverlayEntry();
final overlay = Overlay.of(context);
if (overlay.mounted) {
overlay.insert(_overlayEntry!);
_isTooltipVisible = true;
_addGlobalListener();
}
} catch (e) {
debugPrint('Error showing tooltip: $e');
}
}
void _hideTooltip() {
if (_overlayEntry != null) {
try {
_overlayEntry!.remove();
} catch (e) {
debugPrint('Error removing overlay entry: $e');
}
_overlayEntry = null;
_isTooltipVisible = false;
}
}
void _addGlobalListener() {
if (!_isPointerListenerActive && mounted) {
_isPointerListenerActive = true;
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) {
try {
GestureBinding.instance.pointerRouter.addGlobalRoute(_handleGlobalPointer);
} catch (e) {
debugPrint('Error adding global route: $e');
}
}
});
}
}
void _removeGlobalListener() {
if (_isPointerListenerActive) {
try {
GestureBinding.instance.pointerRouter.removeGlobalRoute(_handleGlobalPointer);
} catch (e) {
debugPrint('Error removing global route: $e');
}
_isPointerListenerActive = false;
}
}
void _handleGlobalPointer(PointerEvent event) {
if (!mounted || _overlayEntry == null) {
_removeGlobalListener();
return;
}
if (event is PointerDownEvent) {
// Handle pointer down outside the tooltip
final RenderBox? box = context.findRenderObject() as RenderBox?;
if (box == null) return;
final Offset position = box.localToGlobal(Offset.zero);
final Size size = box.size;
// Check if tap is inside the trigger widget
final bool insideTrigger = event.position.dx >= position.dx &&
event.position.dx <= position.dx + size.width &&
event.position.dy >= position.dy &&
event.position.dy <= position.dy + size.height;
if (!insideTrigger) {
// Tap outside, hide tooltip
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) {
_hideTooltip();
_removeGlobalListener();
}
});
}
}
}
OverlayEntry _createOverlayEntry() {
// Calculate render box positions
final RenderBox renderBox = context.findRenderObject() as RenderBox;
final Size size = renderBox.size;
final Offset offset = renderBox.localToGlobal(Offset.zero);
// Get screen size
final Size screenSize = MediaQuery.of(context).size;
// Calculate tooltip position, ensuring it stays on screen
double leftPosition = offset.dx - widget.preferredWidth * 0.5 + size.width * 0.5;
double topPosition = offset.dy + size.height + 5.0; // 5px below the widget
// Adjust horizontal position if too close to screen edges
if (leftPosition < 10) {
leftPosition = 10; // 10px padding from left edge
} else if (leftPosition + widget.preferredWidth > screenSize.width - 10) {
leftPosition = screenSize.width - widget.preferredWidth - 10; // 10px padding from right edge
}
// If tooltip would go below screen bottom, show it above the widget instead
bool showAbove = topPosition + widget.maxHeight > screenSize.height - 10;
if (showAbove) {
topPosition = offset.dy - widget.maxHeight - 5; // 5px above the widget
}
// Create follower offset based on calculated position
final Offset followerOffset = showAbove
? Offset(size.width * 0.5 - widget.preferredWidth * 0.5, -widget.maxHeight - 5)
: Offset(size.width * 0.5 - widget.preferredWidth * 0.5, size.height + 5.0);
// Create a custom style sheet based on the dark theme
final ThemeData theme = Theme.of(context);
final MarkdownStyleSheet defaultStyleSheet = MarkdownStyleSheet.fromTheme(theme).copyWith(
p: const TextStyle(
color: Colors.white,
fontSize: 14.0,
),
h1: const TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
h2: const TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
h3: const TextStyle(
color: Colors.white,
fontSize: 15.0,
fontWeight: FontWeight.bold,
),
blockquote: const TextStyle(
color: Color(0xFFBBBBBB),
fontSize: 14.0,
fontStyle: FontStyle.italic,
),
code: const TextStyle(
color: Color(0xFFE0E0E0),
fontSize: 13.0,
fontFamily: 'monospace',
backgroundColor: Color(0xFF505050),
),
codeblockDecoration: BoxDecoration(
color: const Color(0xFF404040),
borderRadius: BorderRadius.circular(4.0),
),
a: const TextStyle(
color: Color(0xFF8AB4F8),
decoration: TextDecoration.underline,
),
listBullet: const TextStyle(
color: Colors.white,
fontSize: 14.0,
),
strong: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
em: const TextStyle(
color: Colors.white,
fontStyle: FontStyle.italic,
),
horizontalRuleDecoration: const BoxDecoration(
border: Border(
top: BorderSide(
width: 1.0,
color: Color(0xFF606060),
),
),
),
);
final effectiveStyleSheet = widget.styleSheet ?? defaultStyleSheet;
return OverlayEntry(
builder: (context) {
return Positioned(
left: leftPosition,
top: topPosition,
width: widget.preferredWidth,
child: CompositedTransformFollower(
link: _layerLink,
offset: followerOffset,
child: Material(
elevation: 8.0,
borderRadius: BorderRadius.circular(8.0),
color: Colors.transparent,
child: Container(
constraints: BoxConstraints(
maxHeight: widget.maxHeight,
),
decoration: BoxDecoration(
color: const Color(0xFF2A3440), // Match app's dark theme card color
borderRadius: BorderRadius.circular(8.0),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 10,
offset: const Offset(0, 5),
),
],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header
Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
width: double.infinity,
color: const Color(0xFF3D4A59), // Match app's primary color
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'Mod Description',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 14.0,
),
),
InkWell(
onTap: () {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) {
_hideTooltip();
_removeGlobalListener();
}
});
},
child: const Padding(
padding: EdgeInsets.all(2.0),
child: Icon(
Icons.close,
color: Colors.white,
size: 16.0,
),
),
),
],
),
),
// Markdown content
Flexible(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: MarkdownBody(
data: widget.markdownContent.length > 5000
? BBCodeConverter.toMarkdown('${widget.markdownContent.substring(0, 5000)}...\n\n*[Description truncated due to length]*')
: BBCodeConverter.toMarkdown(widget.markdownContent),
styleSheet: effectiveStyleSheet,
shrinkWrap: true,
softLineBreak: true,
selectable: true,
),
),
),
),
],
),
),
),
),
),
);
},
);
}
@override
Widget build(BuildContext context) {
return CompositedTransformTarget(
link: _layerLink,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
// Toggle tooltip visibility on tap (for mobile users)
if (_isTooltipVisible) {
_hideTooltip();
_removeGlobalListener();
} else {
_showTooltip();
}
},
child: MouseRegion(
onEnter: (_) {
_isMouseInside = true;
// Delay showing tooltip slightly to avoid accidental triggers
Future.delayed(const Duration(milliseconds: 100), () {
if (mounted && _isMouseInside && !_isTooltipVisible) {
_showTooltip();
}
});
},
onExit: (_) {
_isMouseInside = false;
// Delay hiding tooltip slightly to allow moving to the tooltip itself
Future.delayed(const Duration(milliseconds: 100), () {
if (mounted && !_isMouseInside && _isTooltipVisible) {
_hideTooltip();
_removeGlobalListener();
}
});
},
child: widget.child,
),
),
);
}
}

View File

@@ -383,8 +383,12 @@ class ModList {
final logger = Logger.instance;
logger.info('Generating load order...');
for (final mod in activeMods.values) {
for (var mod in activeMods.values) {
logger.info('Checking mod: ${mod.id}');
if (specialMods.containsKey(mod.id)) {
logger.info('Special mod: ${mod.id}');
mod = specialMods[mod.id]!.copyWith();
}
logger.info('Mod details: ${mod.toString()}');
for (final incomp in mod.incompatibilities) {
if (activeMods.containsKey(incomp)) {