replace markdown bodies with rich text
This commit is contained in:
@@ -321,7 +321,8 @@ EquatableValue<List<TabPreview>> filteredTabPreviews(
|
||||
icon: null,
|
||||
url: tab.cleanUrl ?? availableTabStates.value[tab.id]!.url,
|
||||
highlightedUrl: tab.url,
|
||||
content: tab.extractedContent ?? tab.fullContent,
|
||||
extractedContent: tab.extractedContent,
|
||||
fullContent: tab.fullContent,
|
||||
sourceSearchQuery: tabSearchResults.query,
|
||||
);
|
||||
})
|
||||
|
||||
@@ -98,7 +98,7 @@ class Section extends MultiSliver {
|
||||
VisitType.download => p.basename(title),
|
||||
_ => title,
|
||||
},
|
||||
maxLines: 3,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
|
||||
@@ -30,7 +30,8 @@ class TabPreview with FastEquatable {
|
||||
final Uri url;
|
||||
final String? highlightedUrl;
|
||||
|
||||
final String? content;
|
||||
final String? extractedContent;
|
||||
final String? fullContent;
|
||||
|
||||
final String? sourceSearchQuery;
|
||||
|
||||
@@ -41,7 +42,8 @@ class TabPreview with FastEquatable {
|
||||
required this.icon,
|
||||
required this.url,
|
||||
required this.highlightedUrl,
|
||||
required this.content,
|
||||
required this.extractedContent,
|
||||
required this.fullContent,
|
||||
required this.sourceSearchQuery,
|
||||
});
|
||||
|
||||
@@ -53,7 +55,8 @@ class TabPreview with FastEquatable {
|
||||
icon,
|
||||
url,
|
||||
highlightedUrl,
|
||||
content,
|
||||
extractedContent,
|
||||
fullContent,
|
||||
sourceSearchQuery,
|
||||
];
|
||||
}
|
||||
|
||||
+24
-16
@@ -19,7 +19,6 @@
|
||||
*/
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_markdown/flutter_markdown.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:nullability/nullability.dart';
|
||||
import 'package:skeletonizer/skeletonizer.dart';
|
||||
@@ -35,6 +34,7 @@ import 'package:weblibre/features/web_feed/extensions/feed_article.dart';
|
||||
import 'package:weblibre/presentation/hooks/listenable_callback.dart';
|
||||
import 'package:weblibre/presentation/widgets/failure_widget.dart';
|
||||
import 'package:weblibre/presentation/widgets/url_icon.dart';
|
||||
import 'package:weblibre/utils/text_highlight.dart';
|
||||
|
||||
class FeedSearch extends HookConsumerWidget {
|
||||
static const _matchPrefix = '***';
|
||||
@@ -116,39 +116,47 @@ class FeedSearch extends HookConsumerWidget {
|
||||
], iconSize: 24.0),
|
||||
),
|
||||
title: (titleHighlight.isNotEmpty)
|
||||
? MarkdownBody(
|
||||
data: titleHighlight!,
|
||||
styleSheet: MarkdownStyleSheet(
|
||||
p: Theme.of(context).textTheme.titleMedium
|
||||
?.copyWith(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onSurface,
|
||||
),
|
||||
? Text.rich(
|
||||
buildHighlightedText(
|
||||
titleHighlight!,
|
||||
Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
),
|
||||
Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
_matchPrefix,
|
||||
_matchSuffix,
|
||||
),
|
||||
)
|
||||
: Text(
|
||||
article.displayTitle,
|
||||
style: theme.textTheme.titleMedium,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
subtitle: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (searchSnippet.isNotEmpty)
|
||||
MarkdownBody(
|
||||
data: searchSnippet!,
|
||||
styleSheet: MarkdownStyleSheet(
|
||||
p: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
Text.rich(
|
||||
buildHighlightedText(
|
||||
searchSnippet!,
|
||||
Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
a: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onSurfaceVariant,
|
||||
decoration: TextDecoration.none,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
_matchPrefix,
|
||||
_matchSuffix,
|
||||
normalizeWhitespaces: true,
|
||||
),
|
||||
)
|
||||
else
|
||||
|
||||
+5
-1
@@ -107,7 +107,11 @@ class HistorySuggestions extends HookConsumerWidget {
|
||||
const Icon(MdiIcons.web, size: 24),
|
||||
),
|
||||
title: suggestion.title.mapNotNull(
|
||||
(title) => Text(title),
|
||||
(title) => Text(
|
||||
title,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
subtitle:
|
||||
uri.mapNotNull((uri) => UriBreadcrumb(uri: uri)) ??
|
||||
|
||||
+26
-17
@@ -24,7 +24,6 @@ import 'package:fast_equatable/fast_equatable.dart';
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_hooks/flutter_hooks.dart';
|
||||
import 'package:flutter_markdown/flutter_markdown.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:nullability/nullability.dart';
|
||||
import 'package:sliver_tools/sliver_tools.dart';
|
||||
@@ -43,6 +42,7 @@ import 'package:weblibre/features/geckoview/features/tabs/presentation/widgets/c
|
||||
import 'package:weblibre/presentation/hooks/listenable_callback.dart';
|
||||
import 'package:weblibre/presentation/widgets/uri_breadcrumb.dart';
|
||||
import 'package:weblibre/presentation/widgets/url_icon.dart';
|
||||
import 'package:weblibre/utils/text_highlight.dart';
|
||||
|
||||
class TabSearch extends HookConsumerWidget {
|
||||
static const _matchPrefix = '***';
|
||||
@@ -171,11 +171,15 @@ class TabSearch extends HookConsumerWidget {
|
||||
itemBuilder: (context, index) {
|
||||
final result = filteredTabs[index];
|
||||
|
||||
final content =
|
||||
(result.extractedContent?.contains(_matchPrefix) == true)
|
||||
? result.extractedContent
|
||||
: result.fullContent;
|
||||
|
||||
final titleHasMatch = result.title.contains(_matchPrefix);
|
||||
final urlHasMatch =
|
||||
result.highlightedUrl?.contains(_matchPrefix) ?? false;
|
||||
final bodyHasMatch =
|
||||
result.content?.contains(_matchPrefix) ?? false;
|
||||
final bodyHasMatch = content?.contains(_matchPrefix) ?? false;
|
||||
|
||||
return ListTile(
|
||||
leading: RepaintBoundary(
|
||||
@@ -187,30 +191,35 @@ class TabSearch extends HookConsumerWidget {
|
||||
UrlIcon([result.url], iconSize: 24),
|
||||
),
|
||||
title: result.title.mapNotNull(
|
||||
(title) => MarkdownBody(
|
||||
data: title,
|
||||
styleSheet: MarkdownStyleSheet(
|
||||
p: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
||||
(title) => Text.rich(
|
||||
buildHighlightedText(
|
||||
title,
|
||||
Theme.of(context).textTheme.bodyLarge?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
),
|
||||
Theme.of(context).textTheme.bodyLarge?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
_matchPrefix,
|
||||
_matchSuffix,
|
||||
),
|
||||
),
|
||||
),
|
||||
subtitle: (bodyHasMatch || (urlHasMatch && !titleHasMatch))
|
||||
? MarkdownBody(
|
||||
data:
|
||||
(bodyHasMatch
|
||||
? result.content!
|
||||
: result.highlightedUrl!)
|
||||
.replaceAll(RegExp(r'\s+'), ' '),
|
||||
styleSheet: MarkdownStyleSheet(
|
||||
p: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
? Text.rich(
|
||||
buildHighlightedText(
|
||||
(bodyHasMatch ? content! : result.highlightedUrl!),
|
||||
Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
a: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
decoration: TextDecoration.none,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
_matchPrefix,
|
||||
_matchSuffix,
|
||||
normalizeWhitespaces: true,
|
||||
),
|
||||
)
|
||||
: UriBreadcrumb(uri: result.url),
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_markdown/flutter_markdown.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:nullability/nullability.dart';
|
||||
import 'package:timeago/timeago.dart' as timeago;
|
||||
@@ -34,8 +33,12 @@ import 'package:weblibre/features/web_feed/extensions/feed_article.dart';
|
||||
import 'package:weblibre/features/web_feed/presentation/widgets/authors_horizontal_list.dart';
|
||||
import 'package:weblibre/features/web_feed/presentation/widgets/tags_horizontal_list.dart';
|
||||
import 'package:weblibre/presentation/widgets/url_icon.dart';
|
||||
import 'package:weblibre/utils/text_highlight.dart';
|
||||
|
||||
class FeedArticleCard extends HookConsumerWidget {
|
||||
static const _matchPrefix = '***';
|
||||
static const _matchSuffix = '***';
|
||||
|
||||
final FeedArticle article;
|
||||
|
||||
const FeedArticleCard({super.key, required this.article});
|
||||
@@ -86,15 +89,18 @@ class FeedArticleCard extends HookConsumerWidget {
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (titleHighlight.isNotEmpty)
|
||||
MarkdownBody(
|
||||
data: titleHighlight!,
|
||||
styleSheet: MarkdownStyleSheet(
|
||||
p: Theme.of(context).textTheme.titleMedium
|
||||
?.copyWith(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onSurface,
|
||||
),
|
||||
Text.rich(
|
||||
buildHighlightedText(
|
||||
titleHighlight!,
|
||||
Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
),
|
||||
Theme.of(context).textTheme.titleMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
_matchPrefix,
|
||||
_matchSuffix,
|
||||
),
|
||||
),
|
||||
if (titleHighlight.isEmpty)
|
||||
@@ -103,22 +109,23 @@ class FeedArticleCard extends HookConsumerWidget {
|
||||
style: theme.textTheme.titleMedium,
|
||||
),
|
||||
if (searchSnippet.isNotEmpty)
|
||||
MarkdownBody(
|
||||
data: searchSnippet!,
|
||||
styleSheet: MarkdownStyleSheet(
|
||||
p: Theme.of(context).textTheme.bodyMedium
|
||||
?.copyWith(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
a: Theme.of(context).textTheme.bodyMedium
|
||||
?.copyWith(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onSurfaceVariant,
|
||||
decoration: TextDecoration.none,
|
||||
),
|
||||
Text.rich(
|
||||
buildHighlightedText(
|
||||
searchSnippet!,
|
||||
Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.onSurfaceVariant,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
_matchPrefix,
|
||||
_matchSuffix,
|
||||
normalizeWhitespaces: true,
|
||||
),
|
||||
),
|
||||
if (searchSnippet.isEmpty &&
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
/*
|
||||
* Copyright (c) 2024-2025 Fabian Freund.
|
||||
*
|
||||
* This file is part of WebLibre
|
||||
* (see https://weblibre.eu).
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// Builds a [TextSpan] with highlighted sections based on prefix/suffix markers.
|
||||
///
|
||||
/// This function parses text that contains highlight markers (e.g., from FTS5
|
||||
/// search results) and creates a [TextSpan] with different styles for regular
|
||||
/// and highlighted text.
|
||||
///
|
||||
/// Example:
|
||||
/// ```dart
|
||||
/// final span = buildHighlightedText(
|
||||
/// 'Hello ***world***!',
|
||||
/// baseStyle,
|
||||
/// highlightStyle,
|
||||
/// '***',
|
||||
/// '***',
|
||||
/// );
|
||||
/// // Results in: "Hello " (base) + "world" (highlighted) + "!" (base)
|
||||
/// ```
|
||||
///
|
||||
/// [text] The text to parse for highlights
|
||||
/// [baseStyle] Style for non-highlighted text
|
||||
/// [highlightStyle] Style for highlighted text
|
||||
/// [matchPrefix] Marker that indicates the start of a highlight
|
||||
/// [matchSuffix] Marker that indicates the end of a highlight
|
||||
TextSpan buildHighlightedText(
|
||||
String text,
|
||||
TextStyle? baseStyle,
|
||||
TextStyle? highlightStyle,
|
||||
String matchPrefix,
|
||||
String matchSuffix, {
|
||||
bool normalizeWhitespaces = false,
|
||||
}) {
|
||||
final spans = <TextSpan>[];
|
||||
var currentIndex = 0;
|
||||
|
||||
if (normalizeWhitespaces) {
|
||||
// ignore: parameter_assignments
|
||||
text = text.replaceAll(RegExp(r'\s+'), ' ');
|
||||
}
|
||||
|
||||
while (currentIndex < text.length) {
|
||||
final prefixIndex = text.indexOf(matchPrefix, currentIndex);
|
||||
if (prefixIndex == -1) {
|
||||
spans.add(TextSpan(text: text.substring(currentIndex), style: baseStyle));
|
||||
break;
|
||||
}
|
||||
|
||||
if (prefixIndex > currentIndex) {
|
||||
spans.add(
|
||||
TextSpan(
|
||||
text: text.substring(currentIndex, prefixIndex),
|
||||
style: baseStyle,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
final suffixIndex = text.indexOf(
|
||||
matchSuffix,
|
||||
prefixIndex + matchPrefix.length,
|
||||
);
|
||||
if (suffixIndex == -1) {
|
||||
// No closing marker - highlight everything from prefix to end
|
||||
final highlightedText = text.substring(prefixIndex + matchPrefix.length);
|
||||
spans.add(TextSpan(text: highlightedText, style: highlightStyle));
|
||||
break;
|
||||
}
|
||||
|
||||
final highlightedText = text.substring(
|
||||
prefixIndex + matchPrefix.length,
|
||||
suffixIndex,
|
||||
);
|
||||
spans.add(TextSpan(text: highlightedText, style: highlightStyle));
|
||||
|
||||
currentIndex = suffixIndex + matchSuffix.length;
|
||||
}
|
||||
|
||||
return TextSpan(children: spans);
|
||||
}
|
||||
Reference in New Issue
Block a user