Jesus they're not BBCode... They're html and bbcode and markdown
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
This commit is contained in:
@@ -1,4 +1,6 @@
|
||||
/// Utility class to convert BBCode to Markdown for RimWorld mod descriptions
|
||||
library bbcode_converter;
|
||||
|
||||
import 'dart:math' as math;
|
||||
|
||||
class BBCodeConverter {
|
||||
@@ -21,10 +23,10 @@ class BBCodeConverter {
|
||||
// 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;
|
||||
final openCount = '[$tag'.allMatches(result).length;
|
||||
final closeCount = '[/$tag]'.allMatches(result).length;
|
||||
if (openCount > closeCount) {
|
||||
result = result + '[/${tag}]' * (openCount - closeCount);
|
||||
result = result + '[/$tag]' * (openCount - closeCount);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
327
lib/components/html_tooltip.dart
Normal file
327
lib/components/html_tooltip.dart
Normal file
@@ -0,0 +1,327 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_html/flutter_html.dart';
|
||||
import 'package:url_launcher/url_launcher.dart';
|
||||
import '../format_converter.dart';
|
||||
import 'dart:math' as math;
|
||||
|
||||
class HtmlTooltip extends StatefulWidget {
|
||||
final Widget child;
|
||||
final String content;
|
||||
final double maxWidth;
|
||||
final double maxHeight;
|
||||
final EdgeInsets padding;
|
||||
final Duration showDuration;
|
||||
final Duration fadeDuration;
|
||||
final Color backgroundColor;
|
||||
final Color textColor;
|
||||
final BorderRadius borderRadius;
|
||||
final bool preferBelow;
|
||||
final String? title;
|
||||
|
||||
const HtmlTooltip({
|
||||
super.key,
|
||||
required this.child,
|
||||
required this.content,
|
||||
this.maxWidth = 300.0,
|
||||
this.maxHeight = 400.0,
|
||||
this.padding = const EdgeInsets.all(8.0),
|
||||
this.showDuration = const Duration(milliseconds: 0),
|
||||
this.fadeDuration = const Duration(milliseconds: 200),
|
||||
this.backgroundColor = const Color(0xFF232323),
|
||||
this.textColor = Colors.white,
|
||||
this.borderRadius = const BorderRadius.all(Radius.circular(4.0)),
|
||||
this.preferBelow = true,
|
||||
this.title = 'Mod Description',
|
||||
});
|
||||
|
||||
@override
|
||||
State<HtmlTooltip> createState() => _HtmlTooltipState();
|
||||
}
|
||||
|
||||
class _HtmlTooltipState extends State<HtmlTooltip> {
|
||||
final LayerLink _layerLink = LayerLink();
|
||||
OverlayEntry? _overlayEntry;
|
||||
bool _isTooltipVisible = false;
|
||||
bool _isMouseInside = false;
|
||||
bool _isMouseInsideTooltip = false;
|
||||
final ScrollController _scrollController = ScrollController();
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_scrollController.dispose();
|
||||
_hideTooltip();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
// Launch a URL
|
||||
Future<void> _launchUrl(String? urlString) async {
|
||||
if (urlString == null || urlString.isEmpty) return;
|
||||
|
||||
final Uri url = Uri.parse(urlString);
|
||||
try {
|
||||
if (await canLaunchUrl(url)) {
|
||||
await launchUrl(url, mode: LaunchMode.externalApplication);
|
||||
}
|
||||
} catch (e) {
|
||||
debugPrint('Error launching URL: $e');
|
||||
}
|
||||
}
|
||||
|
||||
void _showTooltip(BuildContext context) {
|
||||
if (_overlayEntry != null) return;
|
||||
|
||||
// Get render box of the trigger widget
|
||||
final RenderBox box = context.findRenderObject() as RenderBox;
|
||||
final Size childSize = box.size;
|
||||
|
||||
// Calculate appropriate width and position
|
||||
final screenWidth = MediaQuery.of(context).size.width;
|
||||
double tooltipWidth = widget.maxWidth;
|
||||
|
||||
// Adjust tooltip width for longer descriptions
|
||||
if (widget.content.length > 1000) {
|
||||
tooltipWidth = math.min(screenWidth * 0.5, 500.0);
|
||||
}
|
||||
|
||||
_overlayEntry = OverlayEntry(
|
||||
builder: (context) {
|
||||
return Positioned(
|
||||
width: tooltipWidth,
|
||||
child: CompositedTransformFollower(
|
||||
link: _layerLink,
|
||||
showWhenUnlinked: false,
|
||||
offset: Offset(
|
||||
(childSize.width / 2) - (tooltipWidth / 2),
|
||||
widget.preferBelow ? childSize.height + 5 : -5,
|
||||
),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: MouseRegion(
|
||||
onEnter: (_) {
|
||||
setState(() {
|
||||
_isMouseInsideTooltip = true;
|
||||
});
|
||||
},
|
||||
onExit: (_) {
|
||||
setState(() {
|
||||
_isMouseInsideTooltip = false;
|
||||
// Slight delay to prevent flickering
|
||||
Future.delayed(const Duration(milliseconds: 50), () {
|
||||
if (!_isMouseInside && !_isMouseInsideTooltip) {
|
||||
_hideTooltip();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
child: FadeTransition(
|
||||
opacity: const AlwaysStoppedAnimation(1.0),
|
||||
child: Container(
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: tooltipWidth,
|
||||
maxHeight: widget.maxHeight,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: widget.backgroundColor,
|
||||
borderRadius: widget.borderRadius,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withAlpha(77), // Equivalent to 0.3 opacity
|
||||
blurRadius: 10.0,
|
||||
spreadRadius: 0.0,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: widget.borderRadius,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Header
|
||||
Container(
|
||||
color: const Color(0xFF3D4A59),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
widget.title ?? 'Description',
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 14.0,
|
||||
),
|
||||
),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Scroll to top button
|
||||
InkWell(
|
||||
onTap: () {
|
||||
if (_scrollController.hasClients) {
|
||||
_scrollController.animateTo(
|
||||
0.0,
|
||||
duration: const Duration(milliseconds: 300),
|
||||
curve: Curves.easeOut,
|
||||
);
|
||||
}
|
||||
},
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.all(2.0),
|
||||
child: Icon(
|
||||
Icons.arrow_upward,
|
||||
color: Colors.white,
|
||||
size: 16.0,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4.0),
|
||||
// Close button
|
||||
InkWell(
|
||||
onTap: () {
|
||||
_hideTooltip();
|
||||
},
|
||||
child: const Padding(
|
||||
padding: EdgeInsets.all(2.0),
|
||||
child: Icon(
|
||||
Icons.close,
|
||||
color: Colors.white,
|
||||
size: 16.0,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Content
|
||||
Flexible(
|
||||
child: SingleChildScrollView(
|
||||
controller: _scrollController,
|
||||
child: Padding(
|
||||
padding: widget.padding,
|
||||
child: Html(
|
||||
data: FormatConverter.toHtml(widget.content),
|
||||
style: {
|
||||
"body": Style(
|
||||
color: widget.textColor,
|
||||
margin: Margins.zero,
|
||||
padding: HtmlPaddings.zero,
|
||||
fontSize: FontSize(14.0),
|
||||
),
|
||||
"a": Style(
|
||||
color: Colors.lightBlue,
|
||||
textDecoration: TextDecoration.underline,
|
||||
),
|
||||
"blockquote": Style(
|
||||
backgroundColor: Colors.grey.withAlpha(26), // Approx 0.1 opacity
|
||||
border: Border(
|
||||
left: BorderSide(
|
||||
color: Colors.grey.withAlpha(128), // Approx 0.5 opacity
|
||||
width: 4.0,
|
||||
),
|
||||
),
|
||||
padding: HtmlPaddings.all(8.0),
|
||||
margin: Margins.only(left: 0, right: 0),
|
||||
),
|
||||
"code": Style(
|
||||
backgroundColor: Colors.grey.withAlpha(51), // Approx 0.2 opacity
|
||||
padding: HtmlPaddings.all(2.0),
|
||||
fontFamily: 'monospace',
|
||||
),
|
||||
"pre": Style(
|
||||
backgroundColor: Colors.grey.withAlpha(51), // Approx 0.2 opacity
|
||||
padding: HtmlPaddings.all(8.0),
|
||||
fontFamily: 'monospace',
|
||||
margin: Margins.only(bottom: 8.0, top: 8.0),
|
||||
),
|
||||
"table": Style(
|
||||
border: Border.all(color: Colors.grey),
|
||||
backgroundColor: Colors.transparent,
|
||||
),
|
||||
"td": Style(
|
||||
border: Border.all(color: Colors.grey.withAlpha(128)), // Approx 0.5 opacity
|
||||
padding: HtmlPaddings.all(4.0),
|
||||
),
|
||||
"th": Style(
|
||||
border: Border.all(color: Colors.grey.withAlpha(128)), // Approx 0.5 opacity
|
||||
padding: HtmlPaddings.all(4.0),
|
||||
backgroundColor: Colors.grey.withAlpha(51), // Approx 0.2 opacity
|
||||
),
|
||||
},
|
||||
onAnchorTap: (url, _, __) {
|
||||
_launchUrl(url);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
// Use a check for mounted before inserting the overlay
|
||||
if (mounted) {
|
||||
Overlay.of(context).insert(_overlayEntry!);
|
||||
_isTooltipVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
void _hideTooltip() {
|
||||
_overlayEntry?.remove();
|
||||
_overlayEntry = null;
|
||||
_isTooltipVisible = false;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CompositedTransformTarget(
|
||||
link: _layerLink,
|
||||
child: MouseRegion(
|
||||
onEnter: (_) {
|
||||
setState(() {
|
||||
_isMouseInside = true;
|
||||
// Show tooltip after a brief delay to prevent accidental triggers
|
||||
Future.delayed(const Duration(milliseconds: 50), () {
|
||||
if (mounted && _isMouseInside && !_isTooltipVisible) {
|
||||
_showTooltip(context);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
onExit: (_) {
|
||||
setState(() {
|
||||
_isMouseInside = false;
|
||||
// Slight delay to prevent flickering
|
||||
Future.delayed(const Duration(milliseconds: 50), () {
|
||||
if (mounted && !_isMouseInside && !_isMouseInsideTooltip) {
|
||||
_hideTooltip();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
child: GestureDetector(
|
||||
onTap: () {
|
||||
// Toggle tooltip for touch devices
|
||||
if (_isTooltipVisible) {
|
||||
_hideTooltip();
|
||||
} else {
|
||||
_showTooltip(context);
|
||||
}
|
||||
},
|
||||
child: widget.child,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
257
lib/format_converter.dart
Normal file
257
lib/format_converter.dart
Normal file
@@ -0,0 +1,257 @@
|
||||
import 'dart:math' as math;
|
||||
|
||||
/// Utility class to convert mixed format content (BBCode, Markdown, and HTML) to HTML
|
||||
class FormatConverter {
|
||||
/// Converts mixed format text (BBCode, Markdown, HTML) to pure HTML
|
||||
static String toHtml(String content) {
|
||||
if (content.isEmpty) return '';
|
||||
|
||||
// First, normalize line endings and escape any literal backslashes that aren't already escaped
|
||||
String result = content.replaceAll('\r\n', '\n');
|
||||
|
||||
// Handle BBCode format
|
||||
result = _convertBBCodeToHtml(result);
|
||||
|
||||
// Handle Markdown format
|
||||
result = _convertMarkdownToHtml(result);
|
||||
|
||||
// Sanitize HTML
|
||||
result = _sanitizeHtml(result);
|
||||
|
||||
// Wrap the final content in a container with styles
|
||||
result = '<div style="line-height: 1.5; word-wrap: break-word;">$result</div>';
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/// Converts BBCode to HTML
|
||||
static String _convertBBCodeToHtml(String bbcode) {
|
||||
String result = bbcode;
|
||||
|
||||
// Fix unclosed tags - RimWorld descriptions often have unclosed BBCode tags
|
||||
final List<String> tagTypes = ['b', 'i', 'color', 'size', 'url', 'code', 'quote', 'list', 'table', 'tr', 'td'];
|
||||
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] -> <a href="http://example.com">text</a>
|
||||
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)!,
|
||||
'<a href="$url" target="_blank">$text</a>'
|
||||
);
|
||||
});
|
||||
|
||||
// Simple URL [url]http://example.com[/url] -> <a href="http://example.com">http://example.com</a>
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'\[url\](.*?)\[/url\]', dotAll: true),
|
||||
(match) => '<a href="${match.group(1)}" target="_blank">${match.group(1)}</a>'
|
||||
);
|
||||
|
||||
// Bold
|
||||
result = result.replaceAll('[b]', '<strong>').replaceAll('[/b]', '</strong>');
|
||||
|
||||
// Italic
|
||||
result = result.replaceAll('[i]', '<em>').replaceAll('[/i]', '</em>');
|
||||
|
||||
// Headers
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'\[h1\](.*?)\[/h1\]', dotAll: true),
|
||||
(match) => '<h1 style="margin-top: 16px; margin-bottom: 8px;">${match.group(1)?.trim()}</h1>'
|
||||
);
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'\[h2\](.*?)\[/h2\]', dotAll: true),
|
||||
(match) => '<h2 style="margin-top: 12px; margin-bottom: 6px;">${match.group(1)?.trim()}</h2>'
|
||||
);
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'\[h3\](.*?)\[/h3\]', dotAll: true),
|
||||
(match) => '<h3 style="margin-top: 10px; margin-bottom: 4px;">${match.group(1)?.trim()}</h3>'
|
||||
);
|
||||
|
||||
// Lists
|
||||
result = result.replaceAll('[list]', '<ul style="padding-left: 20px; margin-top: 8px; margin-bottom: 8px;">').replaceAll('[/list]', '</ul>');
|
||||
|
||||
// List items
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'\[\*\](.*?)(?=\[\*\]|\[/list\]|$)', dotAll: true),
|
||||
(match) {
|
||||
final content = match.group(1)?.trim() ?? '';
|
||||
return '<li style="margin-bottom: 4px;">$content</li>';
|
||||
}
|
||||
);
|
||||
|
||||
// Color
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'\[color=([^\]]+)\](.*?)\[/color\]', dotAll: true),
|
||||
(match) {
|
||||
final color = match.group(1) ?? '';
|
||||
final content = match.group(2) ?? '';
|
||||
if (content.trim().isEmpty) return '';
|
||||
return '<span style="color:$color">$content</span>';
|
||||
}
|
||||
);
|
||||
|
||||
// Images
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'\[img\](.*?)\[/img\]', dotAll: true),
|
||||
(match) => '<img src="${match.group(1)}" alt="Image" style="max-width: 100%;" />'
|
||||
);
|
||||
|
||||
// Image with size
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'\[img[^\]]*width=(\d+)[^\]]*\](.*?)\[/img\]', dotAll: true),
|
||||
(match) {
|
||||
final width = match.group(1) ?? '';
|
||||
final url = match.group(2) ?? '';
|
||||
return '<img src="$url" alt="Image" width="$width" style="max-width: 100%;" />';
|
||||
}
|
||||
);
|
||||
|
||||
// Tables
|
||||
result = result.replaceAll('[table]', '<table border="1" style="border-collapse: collapse; width: 100%; margin: 10px 0;">').replaceAll('[/table]', '</table>');
|
||||
result = result.replaceAll('[tr]', '<tr>').replaceAll('[/tr]', '</tr>');
|
||||
result = result.replaceAll('[td]', '<td style="padding: 8px;">').replaceAll('[/td]', '</td>');
|
||||
|
||||
// Size
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'\[size=([^\]]+)\](.*?)\[/size\]', dotAll: true),
|
||||
(match) {
|
||||
final size = match.group(1) ?? '';
|
||||
final content = match.group(2) ?? '';
|
||||
return '<span style="font-size:${size}px">$content</span>';
|
||||
}
|
||||
);
|
||||
|
||||
// Code
|
||||
result = result.replaceAll('[code]', '<pre style="background-color: rgba(0,0,0,0.1); padding: 8px; border-radius: 4px; overflow-x: auto;"><code>').replaceAll('[/code]', '</code></pre>');
|
||||
|
||||
// Quote
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'\[quote\](.*?)\[/quote\]', dotAll: true),
|
||||
(match) {
|
||||
final content = match.group(1)?.trim() ?? '';
|
||||
if (content.isEmpty) return '';
|
||||
return '<blockquote style="border-left: 4px solid rgba(128,128,128,0.5); padding-left: 10px; margin: 10px 0; color: rgba(255,255,255,0.8);">$content</blockquote>';
|
||||
}
|
||||
);
|
||||
|
||||
// Handle any remaining custom BBCode tags
|
||||
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) => '<h1 style="margin-top: 16px; margin-bottom: 8px;">${match.group(1)?.trim()}</h1>'
|
||||
);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/// Converts Markdown to HTML
|
||||
static String _convertMarkdownToHtml(String markdown) {
|
||||
String result = markdown;
|
||||
|
||||
// Headers
|
||||
// Convert # Header to <h1>Header</h1>
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'^#\s+(.*?)$', multiLine: true),
|
||||
(match) => '<h1 style="margin-top: 16px; margin-bottom: 8px;">${match.group(1)?.trim()}</h1>'
|
||||
);
|
||||
|
||||
// Convert ## Header to <h2>Header</h2>
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'^##\s+(.*?)$', multiLine: true),
|
||||
(match) => '<h2 style="margin-top: 12px; margin-bottom: 6px;">${match.group(1)?.trim()}</h2>'
|
||||
);
|
||||
|
||||
// Convert ### Header to <h3>Header</h3>
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'^###\s+(.*?)$', multiLine: true),
|
||||
(match) => '<h3 style="margin-top: 10px; margin-bottom: 4px;">${match.group(1)?.trim()}</h3>'
|
||||
);
|
||||
|
||||
// Bold - **text** to <strong>text</strong>
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'\*\*(.*?)\*\*'),
|
||||
(match) => '<strong>${match.group(1)}</strong>'
|
||||
);
|
||||
|
||||
// Italic - *text* or _text_ to <em>text</em>
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'\*(.*?)\*|_(.*?)_'),
|
||||
(match) => '<em>${match.group(1) ?? match.group(2)}</em>'
|
||||
);
|
||||
|
||||
// Inline code - `code` to <code>code</code>
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'`(.*?)`'),
|
||||
(match) => '<code style="background-color: rgba(0,0,0,0.1); padding: 2px 4px; border-radius: 3px;">${match.group(1)}</code>'
|
||||
);
|
||||
|
||||
// Links - [text](url) to <a href="url">text</a>
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'\[(.*?)\]\((.*?)\)'),
|
||||
(match) => '<a href="${match.group(2)}" target="_blank">${match.group(1)}</a>'
|
||||
);
|
||||
|
||||
// Images -  to <img src="url" alt="alt" />
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'!\[(.*?)\]\((.*?)\)'),
|
||||
(match) => '<img src="${match.group(2)}" alt="${match.group(1)}" style="max-width: 100%;" />'
|
||||
);
|
||||
|
||||
// Lists - Convert Markdown bullet lists to HTML lists
|
||||
// This is a simple implementation and might not handle all cases
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'^(\s*)\*\s+(.*?)$', multiLine: true),
|
||||
(match) => '<li style="margin-bottom: 4px;">${match.group(2)}</li>'
|
||||
);
|
||||
|
||||
// Wrap adjacent list items in <ul> tags (simple approach)
|
||||
result = result.replaceAll('</li>\n<li>', '</li><li>');
|
||||
result = result.replaceAll('<li>', '<ul style="padding-left: 20px; margin-top: 8px; margin-bottom: 8px;"><li>');
|
||||
result = result.replaceAll('</li>', '</li></ul>');
|
||||
|
||||
// Remove duplicated </ul><ul> tags
|
||||
result = result.replaceAll('</ul><ul style="padding-left: 20px; margin-top: 8px; margin-bottom: 8px;">', '');
|
||||
|
||||
// Paragraphs - Convert newlines to <br>, but skipping where tags already exist
|
||||
result = result.replaceAllMapped(
|
||||
RegExp(r'(?<!>)\n(?!<)'),
|
||||
(match) => '<br />'
|
||||
);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
/// Performs basic sanitization and fixes for the HTML
|
||||
static String _sanitizeHtml(String html) {
|
||||
// Remove potentially dangerous elements and attributes
|
||||
final String result = html
|
||||
// Remove any script tags
|
||||
.replaceAll(RegExp(r'<script.*?>.*?</script>', dotAll: true), '')
|
||||
// Remove on* event handlers
|
||||
.replaceAll(RegExp(r'\son\w+=".*?"'), '')
|
||||
// Ensure newlines are converted to <br /> if not already handled
|
||||
.replaceAll(RegExp(r'(?<!>)\n(?!<)'), '<br />');
|
||||
|
||||
// Fix double paragraph or break issues
|
||||
return result
|
||||
.replaceAll('<br /><br />', '<br />')
|
||||
.replaceAll('<br></br>', '<br />')
|
||||
.replaceAll('<p></p>', '');
|
||||
}
|
||||
}
|
||||
@@ -2,10 +2,11 @@ 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/components/html_tooltip.dart';
|
||||
import 'package:rimworld_modman/mod.dart';
|
||||
import 'package:rimworld_modman/mod_list.dart';
|
||||
import 'package:rimworld_modman/mod_troubleshooter_widget.dart';
|
||||
import 'package:rimworld_modman/widgets/mod_card_example.dart';
|
||||
|
||||
// Theme extension to store app-specific constants
|
||||
class AppThemeExtension extends ThemeExtension<AppThemeExtension> {
|
||||
@@ -244,6 +245,7 @@ class _ModManagerHomePageState extends State<ModManagerHomePage> {
|
||||
final List<Widget> _pages = [
|
||||
const ModManagerPage(),
|
||||
const TroubleshootingPage(),
|
||||
const ModCardExample(),
|
||||
];
|
||||
|
||||
@override
|
||||
@@ -264,6 +266,10 @@ class _ModManagerHomePageState extends State<ModManagerHomePage> {
|
||||
icon: Icon(Icons.build),
|
||||
label: 'Troubleshoot',
|
||||
),
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(Icons.format_paint),
|
||||
label: 'Demo',
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -744,8 +750,8 @@ class _ModManagerPageState extends State<ModManagerPage> {
|
||||
children: [
|
||||
// Description tooltip
|
||||
if (mod.description.isNotEmpty)
|
||||
MarkdownTooltip(
|
||||
markdownContent: mod.description,
|
||||
HtmlTooltip(
|
||||
content: mod.description,
|
||||
child: Icon(
|
||||
Icons.description_outlined,
|
||||
color: Colors.lightBlue.shade300,
|
||||
@@ -995,8 +1001,8 @@ class _ModManagerPageState extends State<ModManagerPage> {
|
||||
children: [
|
||||
// Description tooltip
|
||||
if (mod.description.isNotEmpty)
|
||||
MarkdownTooltip(
|
||||
markdownContent: mod.description,
|
||||
HtmlTooltip(
|
||||
content: mod.description,
|
||||
child: Icon(
|
||||
Icons.description_outlined,
|
||||
color: Colors.lightBlue.shade300,
|
||||
|
||||
95
lib/widgets/mod_card_example.dart
Normal file
95
lib/widgets/mod_card_example.dart
Normal file
@@ -0,0 +1,95 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../components/html_tooltip.dart';
|
||||
|
||||
class ModCardExample extends StatelessWidget {
|
||||
const ModCardExample({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Mod Description Examples'),
|
||||
),
|
||||
body: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: ListView(
|
||||
children: [
|
||||
_buildExampleCard(
|
||||
'HTML Description Example',
|
||||
'<h1>My Awesome Mod</h1><p>This is a <strong>HTML</strong> description example with <em>formatting</em>.</p><p>Features:</p><ul><li>Feature 1</li><li>Feature 2</li><li>Feature 3</li></ul><p>Visit our website: <a href="https://example.com">example.com</a></p>',
|
||||
'HTML formatted mod description',
|
||||
Colors.blue.shade100,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_buildExampleCard(
|
||||
'Markdown Description Example',
|
||||
'# My Cool Mod\n\nThis is a **Markdown** description with _italic_ text.\n\nFeatures:\n* Feature A\n* Feature B\n* Feature C\n\nCheck out our [website](https://example.com)',
|
||||
'Markdown formatted mod description',
|
||||
Colors.green.shade100,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_buildExampleCard(
|
||||
'BBCode Description Example',
|
||||
'[h1]Amazing Mod[/h1]\n[b]This[/b] is a [i]BBCode[/i] description example.\n\n[b]Features:[/b]\n[list]\n[*]Feature X\n[*]Feature Y\n[*]Feature Z\n[/list]\n\nCheck out our site: [url=https://example.com]example.com[/url]',
|
||||
'BBCode formatted mod description',
|
||||
Colors.orange.shade100,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_buildExampleCard(
|
||||
'Mixed Format Example',
|
||||
'[h1]Mixed Format Mod[/h1]\n\n# Markdown Header\n\nThis description contains <strong>HTML</strong>, **Markdown**, and [i]BBCode[/i] all mixed together.\n\n<ul><li>HTML List Item</li></ul>\n* Markdown List Item\n[list][*]BBCode List Item[/list]\n\n<a href="https://example.com">HTML Link</a>\n[Website](https://example.com)\n[url=https://example.com]BBCode Link[/url]',
|
||||
'Description with mixed formatting',
|
||||
Colors.purple.shade100,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_buildExampleCard(
|
||||
'RimWorld-Style Example',
|
||||
'[h1]RimWorld Mod[/h1]\nThis mod adds several new features to enhance your RimWorld experience.\n\n[h1]Features[/h1]\n[list]\n[*]New buildings and furniture\n[*]Additional research projects\n[*]Balanced gameplay adjustments\n[/list]\n\n[h1]Compatibility[/h1]\nThis mod is compatible with:\n[list]\n[*]Core game version 1.4\n[*]Most other popular mods\n[/list]\n\n[h1]Installation[/h1]\n1. Subscribe to the mod\n2. Enable in mod menu\n3. Start a new game or load existing\n\n[h1]Credits[/h1]\nModder: YourName\nContributors: OtherPeople\n\n[h1]Links[/h1]\n[url=https://example.com/support]Support[/url] | [url=https://example.com/donate]Donate[/url]',
|
||||
'RimWorld-style mod description',
|
||||
Colors.red.shade100,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildExampleCard(String title, String description, String tooltip, Color color) {
|
||||
return Card(
|
||||
color: color,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
style: const TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
HtmlTooltip(
|
||||
content: description,
|
||||
maxWidth: 400,
|
||||
maxHeight: 500,
|
||||
child: const Icon(
|
||||
Icons.info_outline,
|
||||
size: 20,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(tooltip),
|
||||
const SizedBox(height: 16),
|
||||
const Text('Hover over the info icon to see the formatted description')
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user