Improve UX when trying to add a link (#422)

lib/src/translations/toolbar.i18n.dart

@@ -9,6 +9,8 @@ extension Localization on String {
           'Select Color': 'Select Color',
           'Gallery': 'Gallery',
           'Link': 'Link',
+          'Please first select some text to transform into a link.':
+              'Please first select some text to transform into a link.',
         },
         'de': {
           'Paste a link': 'Link hinzufügen',
@@ -16,6 +18,8 @@ extension Localization on String {
           'Select Color': 'Farbe auswählen',
           'Gallery': 'Gallerie',
           'Link': 'Link',
+          'Please first select some text to transform into a link.':
+              'Markiere bitte zuerst einen Text, um diesen in einen Link zu verwandeln.',
         },
         'fr': {
           'Paste a link': 'Coller un lien',
@@ -23,6 +27,8 @@ extension Localization on String {
           'Select Color': 'Choisir une couleur',
           'Gallery': 'Galerie',
           'Link': 'Lien',
+          'Please first select some text to transform into a link.':
+              "Veuillez d'abord sélectionner un texte à transformer en lien.",
         },
         'zh_CN': {
           'Paste a link': '粘贴链接',
@@ -30,6 +36,8 @@ extension Localization on String {
           'Select Color': '选择颜色',
           'Gallery': '相簿',
           'Link': '链接',
+          'Please first select some text to transform into a link.':
+              '请先选择一些要转化为链接的文本',
         }
       };
 

lib/src/widgets/toolbar/image_video_utils.dart

@@ -7,6 +7,7 @@ import 'package:image_picker/image_picker.dart';
 import '../../models/documents/nodes/embed.dart';
 import '../../translations/toolbar.i18n.dart';
 import '../../utils/media_pick_setting.dart';
+import '../../translations/toolbar.i18n.dart';
 import '../controller.dart';
 import '../toolbar.dart';
 

lib/src/widgets/toolbar/link_style_button.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 
+import '../../translations/toolbar.i18n.dart';
 import '../../models/documents/attribute.dart';
 import '../../models/themes/quill_dialog_theme.dart';
 import '../../models/themes/quill_icon_theme.dart';
@@ -54,24 +55,44 @@ class _LinkStyleButtonState extends State<LinkStyleButton> {
     widget.controller.removeListener(_didChangeSelection);
   }
 
+  GlobalKey _toolTipKey = GlobalKey();
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     final isEnabled = !widget.controller.selection.isCollapsed;
     final pressedHandler = isEnabled ? () => _openLinkDialog(context) : null;
-    return QuillIconButton(
-      highlightElevation: 0,
-      hoverElevation: 0,
-      size: widget.iconSize * kIconButtonFactor,
-      icon: Icon(
-        widget.icon ?? Icons.link,
-        size: widget.iconSize,
-        color: isEnabled
-            ? (widget.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color)
-            : (widget.iconTheme?.disabledIconColor ?? theme.disabledColor),
+    return GestureDetector(
+      onTap: () async {
+        final dynamic tooltip = _toolTipKey.currentState;
+        tooltip.ensureTooltipVisible();
+        Future.delayed(
+          const Duration(
+            seconds: 3,
+          ),
+          tooltip.deactivate,
+        );
+      },
+      child: Tooltip(
+        key: _toolTipKey,
+        message: 'Please first select some text to transform into a link.'.i18n,
+        child: QuillIconButton(
+          highlightElevation: 0,
+          hoverElevation: 0,
+          size: widget.iconSize * kIconButtonFactor,
+          icon: Icon(
+            widget.icon ?? Icons.link,
+            size: widget.iconSize,
+            color: isEnabled
+                ? (widget.iconTheme?.iconUnselectedColor ??
+                    theme.iconTheme.color)
+                : (widget.iconTheme?.disabledIconColor ?? theme.disabledColor),
+          ),
+          fillColor:
+              widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor,
+          onPressed: pressedHandler,
+        ),
       ),
-      fillColor: widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor,
-      onPressed: pressedHandler,
     );
   }