make code blocks copyable

This commit is contained in:
OfficialDakari 2025-08-18 17:06:16 +05:00
parent c840c42d94
commit d541e58621
5 changed files with 252 additions and 226 deletions

View File

@ -3,6 +3,8 @@ import 'package:flutter/material.dart';
import 'package:collection/collection.dart'; import 'package:collection/collection.dart';
import 'package:flutter_highlighter/flutter_highlighter.dart'; import 'package:flutter_highlighter/flutter_highlighter.dart';
import 'package:flutter_highlighter/themes/shades-of-purple.dart'; import 'package:flutter_highlighter/themes/shades-of-purple.dart';
import 'package:highlight_selectable/theme_map.dart';
import 'package:highlight_selectable/highlight_selectable.dart';
import 'package:flutter_linkify/flutter_linkify.dart'; import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:html/dom.dart' as dom; import 'package:html/dom.dart' as dom;
import 'package:html/parser.dart' as parser; import 'package:html/parser.dart' as parser;
@ -272,37 +274,37 @@ class HtmlMessage extends StatelessWidget {
); );
case 'code': case 'code':
final isInline = node.parent?.localName != 'pre'; final isInline = node.parent?.localName != 'pre';
return WidgetSpan( return isInline
child: Material( ? TextSpan(
clipBehavior: Clip.hardEdge, text: node.text,
borderRadius: BorderRadius.circular(4), style: TextStyle(
child: SingleChildScrollView( fontSize: fontSize,
scrollDirection: Axis.horizontal, fontFamily: 'RobotoMono',
child: SelectableRegion( backgroundColor: const Color(0xff2d2b57),
selectionControls: MaterialTextSelectionControls(), color: const Color(0xffe3dfff),
child: HighlightView( ),
node.text, )
language: node.className : WidgetSpan(
.split(' ') child: HighlightSelectable(
.singleWhereOrNull( node.text,
(className) => className.startsWith('language-'), language: node.className
) .split(' ')
?.split('language-') .singleWhereOrNull(
.last ?? (className) => className.startsWith('language-'))
'md', ?.split('language-')
theme: shadesOfPurpleTheme, .last ??
padding: EdgeInsets.symmetric( 'md',
horizontal: 8, theme: themeMap['shades-of-purple']!,
vertical: isInline ? 0 : 8, selectable: true,
), showCopyButton: !isInline,
textStyle: TextStyle( padding: EdgeInsets.symmetric(
fontSize: fontSize, horizontal: 8,
fontFamily: 'RobotoMono', vertical: isInline ? 0 : 8,
), ),
)), textStyle:
), TextStyle(fontSize: fontSize, fontFamily: 'RobotoMono'),
), ),
); );
case 'img': case 'img':
final mxcUrl = Uri.tryParse(node.attributes['src'] ?? ''); final mxcUrl = Uri.tryParse(node.attributes['src'] ?? '');
if (mxcUrl == null || mxcUrl.scheme != 'mxc') { if (mxcUrl == null || mxcUrl.scheme != 'mxc') {

View File

@ -1,12 +1,12 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:extera_next/generated/l10n/l10n.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:matrix/matrix.dart'; import 'package:matrix/matrix.dart';
import 'package:pretty_qr_code/pretty_qr_code.dart'; import 'package:pretty_qr_code/pretty_qr_code.dart';
import 'package:extera_next/config/app_config.dart'; import 'package:extera_next/config/app_config.dart';
import 'package:extera_next/config/themes.dart'; import 'package:extera_next/config/themes.dart';
import 'package:extera_next/generated/l10n/l10n.dart';
import 'package:extera_next/pages/new_private_chat/new_private_chat.dart'; import 'package:extera_next/pages/new_private_chat/new_private_chat.dart';
import 'package:extera_next/utils/localized_exception_extension.dart'; import 'package:extera_next/utils/localized_exception_extension.dart';
import 'package:extera_next/utils/platform_infos.dart'; import 'package:extera_next/utils/platform_infos.dart';
@ -99,176 +99,189 @@ class NewPrivateChatView extends StatelessWidget {
), ),
), ),
Expanded( Expanded(
child: AnimatedCrossFade( child: AnimatedSwitcher(
duration: FluffyThemes.animationDuration, duration: FluffyThemes.animationDuration,
crossFadeState: searchResponse == null child: searchResponse == null
? CrossFadeState.showFirst ? ListView(
: CrossFadeState.showSecond, children: [
firstChild: ListView( Padding(
children: [ padding:
Padding( const EdgeInsets.symmetric(horizontal: 18.0),
padding: const EdgeInsets.symmetric(horizontal: 18.0), child: SelectableText.rich(
child: SelectableText.rich( TextSpan(
TextSpan( children: [
children: [ TextSpan(
TextSpan( text: L10n.of(context).yourGlobalUserIdIs,
text: L10n.of(context).yourGlobalUserIdIs, ),
), TextSpan(
TextSpan( text: Matrix.of(context).client.userID,
text: Matrix.of(context).client.userID, style: const TextStyle(
style: const TextStyle( fontWeight: FontWeight.w600,
fontWeight: FontWeight.w600, ),
),
],
),
style: TextStyle(
color: theme.colorScheme.onSurface,
fontSize: 12,
), ),
), ),
], ),
), const SizedBox(height: 8),
style: TextStyle( ListTile(
color: theme.colorScheme.onSurface, leading: CircleAvatar(
fontSize: 13, backgroundColor:
), theme.colorScheme.secondaryContainer,
), foregroundColor:
), theme.colorScheme.onSecondaryContainer,
const SizedBox(height: 8), child: Icon(Icons.adaptive.share_outlined),
ListTile(
leading: CircleAvatar(
backgroundColor: theme.colorScheme.secondaryContainer,
foregroundColor: theme.colorScheme.onSecondaryContainer,
child: Icon(Icons.adaptive.share_outlined),
),
title: Text(L10n.of(context).shareInviteLink),
onTap: controller.inviteAction,
),
ListTile(
leading: CircleAvatar(
backgroundColor: theme.colorScheme.tertiaryContainer,
foregroundColor: theme.colorScheme.onTertiaryContainer,
child: const Icon(Icons.group_add_outlined),
),
title: Text(L10n.of(context).createGroup),
onTap: () => context.go('/rooms/newgroup'),
),
if (PlatformInfos.isMobile)
ListTile(
leading: CircleAvatar(
backgroundColor: theme.colorScheme.primaryContainer,
foregroundColor: theme.colorScheme.onPrimaryContainer,
child: const Icon(Icons.qr_code_scanner_outlined),
),
title: Text(L10n.of(context).scanQrCode),
onTap: controller.openScannerAction,
),
Center(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 64.0,
vertical: 24.0,
),
child: Material(
borderRadius:
BorderRadius.circular(AppConfig.borderRadius),
color: theme.colorScheme.primaryContainer,
clipBehavior: Clip.hardEdge,
child: InkWell(
borderRadius:
BorderRadius.circular(AppConfig.borderRadius),
onTap: () => showQrCodeViewer(
context,
userId,
), ),
title: Text(L10n.of(context).shareInviteLink),
onTap: controller.inviteAction,
),
ListTile(
leading: CircleAvatar(
backgroundColor:
theme.colorScheme.tertiaryContainer,
foregroundColor:
theme.colorScheme.onTertiaryContainer,
child: const Icon(Icons.group_add_outlined),
),
title: Text(L10n.of(context).createGroup),
onTap: () => context.go('/rooms/newgroup'),
),
if (PlatformInfos.isMobile)
ListTile(
leading: CircleAvatar(
backgroundColor:
theme.colorScheme.primaryContainer,
foregroundColor:
theme.colorScheme.onPrimaryContainer,
child:
const Icon(Icons.qr_code_scanner_outlined),
),
title: Text(L10n.of(context).scanQrCode),
onTap: controller.openScannerAction,
),
Center(
child: Padding( child: Padding(
padding: const EdgeInsets.all(32.0), padding: const EdgeInsets.symmetric(
child: ConstrainedBox( horizontal: 64.0,
constraints: vertical: 24.0,
const BoxConstraints(maxWidth: 256), ),
child: PrettyQrView.data( child: Material(
data: 'https://matrix.to/#/$userId', shape: RoundedRectangleBorder(
decoration: PrettyQrDecoration( borderRadius: BorderRadius.circular(
shape: PrettyQrSmoothSymbol( AppConfig.borderRadius,
roundFactor: 1, ),
color: side: BorderSide(
theme.colorScheme.onPrimaryContainer, width: 3,
color: theme.colorScheme.primary,
),
),
color: Colors.transparent,
clipBehavior: Clip.hardEdge,
child: InkWell(
borderRadius: BorderRadius.circular(
AppConfig.borderRadius,
),
onTap: () => showQrCodeViewer(
context,
userId,
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: ConstrainedBox(
constraints:
const BoxConstraints(maxWidth: 200),
child: PrettyQrView.data(
data: 'https://matrix.to/#/$userId',
decoration: PrettyQrDecoration(
shape: PrettyQrSmoothSymbol(
roundFactor: 1,
color: theme.colorScheme.primary,
),
),
),
), ),
), ),
), ),
), ),
), ),
), ),
), ],
)
: FutureBuilder(
future: searchResponse,
builder: (context, snapshot) {
final result = snapshot.data;
final error = snapshot.error;
if (error != null) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
error.toLocalizedString(context),
textAlign: TextAlign.center,
style: TextStyle(
color: theme.colorScheme.error,
),
),
const SizedBox(height: 12),
OutlinedButton.icon(
onPressed: controller.searchUsers,
icon: const Icon(Icons.refresh_outlined),
label: Text(L10n.of(context).tryAgain),
),
],
);
}
if (result == null) {
return const Center(
child: CircularProgressIndicator.adaptive(),
);
}
if (result.isEmpty) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.search_outlined, size: 86),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
L10n.of(context).noUsersFoundWithQuery(
controller.controller.text,
),
style: TextStyle(
color: theme.colorScheme.primary,
),
textAlign: TextAlign.center,
),
),
],
);
}
return ListView.builder(
itemCount: result.length,
itemBuilder: (context, i) {
final contact = result[i];
final displayname = contact.displayName ??
contact.userId.localpart ??
contact.userId;
return ListTile(
leading: Avatar(
name: displayname,
mxContent: contact.avatarUrl,
presenceUserId: contact.userId,
),
title: Text(displayname),
subtitle: Text(contact.userId),
onTap: () => controller.openUserModal(contact),
);
},
);
},
), ),
),
],
),
secondChild: FutureBuilder(
future: searchResponse,
builder: (context, snapshot) {
final result = snapshot.data;
final error = snapshot.error;
if (error != null) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
error.toLocalizedString(context),
textAlign: TextAlign.center,
style: TextStyle(
color: theme.colorScheme.error,
),
),
const SizedBox(height: 12),
OutlinedButton.icon(
onPressed: controller.searchUsers,
icon: const Icon(Icons.refresh_outlined),
label: Text(L10n.of(context).tryAgain),
),
],
);
}
if (result == null) {
return const Center(
child: CircularProgressIndicator.adaptive(),
);
}
if (result.isEmpty) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.search_outlined, size: 86),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
L10n.of(context).noUsersFoundWithQuery(
controller.controller.text,
),
style: TextStyle(
color: theme.colorScheme.primary,
),
textAlign: TextAlign.center,
),
),
],
);
}
return ListView.builder(
itemCount: result.length,
itemBuilder: (context, i) {
final contact = result[i];
final displayname = contact.displayName ??
contact.userId.localpart ??
contact.userId;
return ListTile(
leading: Avatar(
name: displayname,
mxContent: contact.avatarUrl,
presenceUserId: contact.userId,
),
title: Text(displayname),
subtitle: Text(contact.userId),
onTap: () => controller.openUserModal(contact),
);
},
);
},
),
), ),
), ),
], ],
@ -276,4 +289,4 @@ class NewPrivateChatView extends StatelessWidget {
), ),
); );
} }
} }

View File

@ -139,39 +139,33 @@ class _MxcImageState extends State<MxcImage> {
final data = _imageData; final data = _imageData;
final hasData = data != null && data.isNotEmpty; final hasData = data != null && data.isNotEmpty;
return AnimatedCrossFade( return AnimatedSwitcher(
crossFadeState: duration: const Duration(milliseconds: 128),
hasData ? CrossFadeState.showSecond : CrossFadeState.showFirst, child: hasData
duration: const Duration(milliseconds: 128), ? Image.memory(
firstChild: placeholder(context), data,
secondChild: hasData width: widget.width,
? Image.memory( height: widget.height,
data, fit: widget.fit,
width: widget.width, filterQuality: widget.isThumbnail
height: widget.height, ? FilterQuality.low
fit: widget.fit, : FilterQuality.medium,
filterQuality: errorBuilder: (context, e, s) {
widget.isThumbnail ? FilterQuality.low : FilterQuality.medium, Logs().d('Unable to render mxc image', e, s);
errorBuilder: (context, e, s) { return SizedBox(
Logs().d('Unable to render mxc image', e, s); width: widget.width,
return SizedBox( height: widget.height,
width: widget.width, child: Material(
height: widget.height, color: Theme.of(context).colorScheme.surfaceContainer,
child: Material( child: Icon(
color: Theme.of(context).colorScheme.surfaceContainer, Icons.broken_image_outlined,
child: Icon( size: min(widget.height ?? 64, 64),
Icons.broken_image_outlined, color: Theme.of(context).colorScheme.onSurface,
size: min(widget.height ?? 64, 64), ),
color: Theme.of(context).colorScheme.onSurface,
), ),
), );
); },
}, )
) : placeholder(context));
: SizedBox(
width: widget.width,
height: widget.height,
),
);
} }
} }

View File

@ -849,6 +849,22 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "0.4.0" version: "0.4.0"
highlight:
dependency: transitive
description:
name: highlight
sha256: "5353a83ffe3e3eca7df0abfb72dcf3fa66cc56b953728e7113ad4ad88497cf21"
url: "https://pub.dev"
source: hosted
version: "0.7.0"
highlight_selectable:
dependency: "direct main"
description:
name: highlight_selectable
sha256: c9a9c8741bd5ba2150f1ba2c713f4ea2d6dfd6b700d66ca11675882a75c4db20
url: "https://pub.dev"
source: hosted
version: "0.1.4"
highlighter: highlighter:
dependency: transitive dependency: transitive
description: description:
@ -1170,10 +1186,10 @@ packages:
dependency: "direct main" dependency: "direct main"
description: description:
name: matrix name: matrix
sha256: "0c033a6ebf4ed2f56ed604769984072961fefc0cb255a802ed441dcaec490196" sha256: "4e6c186115ee041c430aa5ed5210499d60e4323f907cea1f5e8a2f73a513a1bf"
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "1.1.0" version: "1.1.1"
meta: meta:
dependency: transitive dependency: transitive
description: description:

View File

@ -22,6 +22,7 @@ dependencies:
desktop_notifications: ^0.6.3 desktop_notifications: ^0.6.3
device_info_plus: ^10.0.1 device_info_plus: ^10.0.1
dynamic_color: ^1.8.1 dynamic_color: ^1.8.1
highlight_selectable: ^0.1.0
emoji_picker_flutter: ^3.1.0 emoji_picker_flutter: ^3.1.0
emojis: ^0.9.9 emojis: ^0.9.9
#fcm_shared_isolate: ^0.2.0 #fcm_shared_isolate: ^0.2.0