make code blocks copyable

2025-08-18 17:06:16 +05:00 · 2025-08-18 17:06:16 +05:00 · d541e58621
parent c840c42d94
commit d541e58621
5 changed files with 252 additions and 226 deletions
--- a/lib/pages/chat/events/html_message.dart
+++ b/lib/pages/chat/events/html_message.dart
@ -3,6 +3,8 @@ import 'package:flutter/material.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter_highlighter/flutter_highlighter.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:html/dom.dart' as dom;
 import 'package:html/parser.dart' as parser;
@ -272,35 +274,35 @@ class HtmlMessage extends StatelessWidget {
        );
      case 'code':
        final isInline = node.parent?.localName != 'pre';
-        return WidgetSpan(
-          child: Material(
-            clipBehavior: Clip.hardEdge,
-            borderRadius: BorderRadius.circular(4),
-            child: SingleChildScrollView(
-              scrollDirection: Axis.horizontal,
-              child: SelectableRegion(
-                  selectionControls: MaterialTextSelectionControls(),
-                  child: HighlightView(
+        return isInline
+            ? TextSpan(
+                text: node.text,
+                style: TextStyle(
+                  fontSize: fontSize,
+                  fontFamily: 'RobotoMono',
+                  backgroundColor: const Color(0xff2d2b57),
+                  color: const Color(0xffe3dfff),
+                ),
+              )
+            : WidgetSpan(
+                child: HighlightSelectable(
                  node.text,
                  language: node.className
                          .split(' ')
                          .singleWhereOrNull(
-                              (className) => className.startsWith('language-'),
-                            )
+                              (className) => className.startsWith('language-'))
                          ?.split('language-')
                          .last ??
                      'md',
-                    theme: shadesOfPurpleTheme,
+                  theme: themeMap['shades-of-purple']!,
+                  selectable: true,
+                  showCopyButton: !isInline,
                  padding: EdgeInsets.symmetric(
                    horizontal: 8,
                    vertical: isInline ? 0 : 8,
                  ),
-                    textStyle: TextStyle(
-                      fontSize: fontSize,
-                      fontFamily: 'RobotoMono',
-                    ),
-                  )),
-            ),
+                  textStyle:
+                      TextStyle(fontSize: fontSize, fontFamily: 'RobotoMono'),
                ),
              );
      case 'img':
--- a/lib/pages/new_private_chat/new_private_chat_view.dart
+++ b/lib/pages/new_private_chat/new_private_chat_view.dart
@ -1,12 +1,12 @@
 import 'package:flutter/material.dart';

-import 'package:extera_next/generated/l10n/l10n.dart';
 import 'package:go_router/go_router.dart';
 import 'package:matrix/matrix.dart';
 import 'package:pretty_qr_code/pretty_qr_code.dart';

 import 'package:extera_next/config/app_config.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/utils/localized_exception_extension.dart';
 import 'package:extera_next/utils/platform_infos.dart';
@ -99,15 +99,14 @@ class NewPrivateChatView extends StatelessWidget {
              ),
            ),
            Expanded(
-              child: AnimatedCrossFade(
+              child: AnimatedSwitcher(
                duration: FluffyThemes.animationDuration,
-                crossFadeState: searchResponse == null
-                    ? CrossFadeState.showFirst
-                    : CrossFadeState.showSecond,
-                firstChild: ListView(
+                child: searchResponse == null
+                    ? ListView(
                        children: [
                          Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 18.0),
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 18.0),
                            child: SelectableText.rich(
                              TextSpan(
                                children: [
@ -124,15 +123,17 @@ class NewPrivateChatView extends StatelessWidget {
                              ),
                              style: TextStyle(
                                color: theme.colorScheme.onSurface,
-                          fontSize: 13,
+                                fontSize: 12,
                              ),
                            ),
                          ),
                          const SizedBox(height: 8),
                          ListTile(
                            leading: CircleAvatar(
-                        backgroundColor: theme.colorScheme.secondaryContainer,
-                        foregroundColor: theme.colorScheme.onSecondaryContainer,
+                              backgroundColor:
+                                  theme.colorScheme.secondaryContainer,
+                              foregroundColor:
+                                  theme.colorScheme.onSecondaryContainer,
                              child: Icon(Icons.adaptive.share_outlined),
                            ),
                            title: Text(L10n.of(context).shareInviteLink),
@ -140,8 +141,10 @@ class NewPrivateChatView extends StatelessWidget {
                          ),
                          ListTile(
                            leading: CircleAvatar(
-                        backgroundColor: theme.colorScheme.tertiaryContainer,
-                        foregroundColor: theme.colorScheme.onTertiaryContainer,
+                              backgroundColor:
+                                  theme.colorScheme.tertiaryContainer,
+                              foregroundColor:
+                                  theme.colorScheme.onTertiaryContainer,
                              child: const Icon(Icons.group_add_outlined),
                            ),
                            title: Text(L10n.of(context).createGroup),
@ -150,9 +153,12 @@ class NewPrivateChatView extends StatelessWidget {
                          if (PlatformInfos.isMobile)
                            ListTile(
                              leading: CircleAvatar(
-                          backgroundColor: theme.colorScheme.primaryContainer,
-                          foregroundColor: theme.colorScheme.onPrimaryContainer,
-                          child: const Icon(Icons.qr_code_scanner_outlined),
+                                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,
@ -164,29 +170,36 @@ class NewPrivateChatView extends StatelessWidget {
                                vertical: 24.0,
                              ),
                              child: Material(
-                          borderRadius:
-                              BorderRadius.circular(AppConfig.borderRadius),
-                          color: theme.colorScheme.primaryContainer,
+                                shape: RoundedRectangleBorder(
+                                  borderRadius: BorderRadius.circular(
+                                    AppConfig.borderRadius,
+                                  ),
+                                  side: BorderSide(
+                                    width: 3,
+                                    color: theme.colorScheme.primary,
+                                  ),
+                                ),
+                                color: Colors.transparent,
                                clipBehavior: Clip.hardEdge,
                                child: InkWell(
-                            borderRadius:
-                                BorderRadius.circular(AppConfig.borderRadius),
+                                  borderRadius: BorderRadius.circular(
+                                    AppConfig.borderRadius,
+                                  ),
                                  onTap: () => showQrCodeViewer(
                                    context,
                                    userId,
                                  ),
                                  child: Padding(
-                              padding: const EdgeInsets.all(32.0),
+                                    padding: const EdgeInsets.all(16.0),
                                    child: ConstrainedBox(
                                      constraints:
-                                    const BoxConstraints(maxWidth: 256),
+                                          const BoxConstraints(maxWidth: 200),
                                      child: PrettyQrView.data(
                                        data: 'https://matrix.to/#/$userId',
                                        decoration: PrettyQrDecoration(
                                          shape: PrettyQrSmoothSymbol(
                                            roundFactor: 1,
-                                      color:
-                                          theme.colorScheme.onPrimaryContainer,
+                                            color: theme.colorScheme.primary,
                                          ),
                                        ),
                                      ),
@ -197,8 +210,8 @@ class NewPrivateChatView extends StatelessWidget {
                            ),
                          ),
                        ],
-                ),
-                secondChild: FutureBuilder(
+                      )
+                    : FutureBuilder(
                        future: searchResponse,
                        builder: (context, snapshot) {
                          final result = snapshot.data;
--- a/lib/widgets/mxc_image.dart
+++ b/lib/widgets/mxc_image.dart
@ -139,19 +139,17 @@ class _MxcImageState extends State<MxcImage> {
    final data = _imageData;
    final hasData = data != null && data.isNotEmpty;

-    return AnimatedCrossFade(
-      crossFadeState:
-          hasData ? CrossFadeState.showSecond : CrossFadeState.showFirst,
+    return AnimatedSwitcher(
        duration: const Duration(milliseconds: 128),
-      firstChild: placeholder(context),
-      secondChild: hasData
+        child: hasData
            ? Image.memory(
                data,
                width: widget.width,
                height: widget.height,
                fit: widget.fit,
-              filterQuality:
-                  widget.isThumbnail ? FilterQuality.low : FilterQuality.medium,
+                filterQuality: widget.isThumbnail
+                    ? FilterQuality.low
+                    : FilterQuality.medium,
                errorBuilder: (context, e, s) {
                  Logs().d('Unable to render mxc image', e, s);
                  return SizedBox(
@ -168,10 +166,6 @@ class _MxcImageState extends State<MxcImage> {
                  );
                },
              )
-          : SizedBox(
-              width: widget.width,
-              height: widget.height,
-            ),
-    );
+            : placeholder(context));
  }
 }
--- a/pubspec.lock
+++ b/pubspec.lock
@ -849,6 +849,22 @@ packages:
      url: "https://pub.dev"
    source: hosted
    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:
    dependency: transitive
    description:
@ -1170,10 +1186,10 @@ packages:
    dependency: "direct main"
    description:
      name: matrix
-      sha256: "0c033a6ebf4ed2f56ed604769984072961fefc0cb255a802ed441dcaec490196"
+      sha256: "4e6c186115ee041c430aa5ed5210499d60e4323f907cea1f5e8a2f73a513a1bf"
      url: "https://pub.dev"
    source: hosted
-    version: "1.1.0"
+    version: "1.1.1"
  meta:
    dependency: transitive
    description:
--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -22,6 +22,7 @@ dependencies:
  desktop_notifications: ^0.6.3
  device_info_plus: ^10.0.1
  dynamic_color: ^1.8.1
+  highlight_selectable: ^0.1.0
  emoji_picker_flutter: ^3.1.0
  emojis: ^0.9.9
  #fcm_shared_isolate: ^0.2.0