fix: edit link will break the text styles

Author: asjqkkkk

frontend/appflowy_flutter/integration_test/desktop/document/document_toolbar_test.dart

@@ -366,5 +366,77 @@ void main() {
       expect(getLinkFromNode(node), link);
       expect(getNodeText(node), afterText);
     });
+
+    testWidgets('edit link text with style', (tester) async {
+      Attributes getAttribute(Node node, Selection selection) {
+        Attributes attributes = {};
+        final ops = node.delta?.whereType<TextInsert>() ?? [];
+        final startOffset = selection.start.offset;
+        var start = 0;
+        for (final op in ops) {
+          if (start > startOffset) break;
+          final length = op.length;
+          if (start + length > startOffset) {
+            attributes = op.attributes ?? {};
+            break;
+          }
+          start += length;
+        }
+
+        return attributes;
+      }
+
+      const text = 'edit text with style', link = 'https://test.appflowy.cloud';
+      await prepareForToolbar(tester, text);
+      final constSelection =
+          Selection.single(path: [0], startOffset: 0, endOffset: text.length);
+
+      final bold = find.byFlowySvg(FlowySvgs.toolbar_bold_m),
+          italic = find.byFlowySvg(FlowySvgs.toolbar_inline_italic_m),
+          underline = find.byFlowySvg(FlowySvgs.toolbar_underline_m);
+      await tester.tapButton(bold);
+      await tester.tapButton(italic);
+      await tester.tapButton(underline);
+
+      Node node = tester.editor.getNodeAtPath([0]);
+      Attributes attributes = getAttribute(node, constSelection);
+      expect(attributes, {
+        AppFlowyRichTextKeys.bold: true,
+        AppFlowyRichTextKeys.italic: true,
+        AppFlowyRichTextKeys.underline: true,
+      });
+
+      /// tap link button to show CreateLinkMenu
+      final linkButton = find.byFlowySvg(FlowySvgs.toolbar_link_m);
+      await tester.tapButton(linkButton);
+
+      /// search for page and select it
+      final textField = find.descendant(
+        of: find.byType(LinkCreateMenu),
+        matching: find.byType(TextFormField),
+      );
+      await tester.enterText(textField, gettingStarted);
+      await tester.pumpAndSettle();
+      await tester.simulateKeyEvent(LogicalKeyboardKey.enter);
+      await tester.simulateKeyEvent(LogicalKeyboardKey.escape);
+
+      node = tester.editor.getNodeAtPath([0]);
+      attributes = getAttribute(node, constSelection);
+      expect(isPageLink(node), true);
+      expect(getLinkFromNode(node) == link, false);
+      expect(attributes[AppFlowyRichTextKeys.bold], true);
+      expect(attributes[AppFlowyRichTextKeys.italic], true);
+      expect(attributes[AppFlowyRichTextKeys.underline], true);
+      
+      /// remove link
+      await tester.hoverOnWidget(find.byType(LinkHoverTrigger));
+      await tester.tapButton(find.byFlowySvg(FlowySvgs.toolbar_link_unlink_m));
+      node = tester.editor.getNodeAtPath([0]);
+      attributes = getAttribute(node, constSelection);
+      expect(getLinkFromNode(node) == link, false);
+      expect(attributes[AppFlowyRichTextKeys.bold], true);
+      expect(attributes[AppFlowyRichTextKeys.italic], true);
+      expect(attributes[AppFlowyRichTextKeys.underline], true);
+    });
   });
 }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_extension.dart

@@ -8,32 +8,65 @@ extension LinkExtension on EditorState {
     if (node == null) {
       return;
     }
+    final attributes = _getAttribute(node, selection)
+      ..remove(BuiltInAttributeKey.href)
+      ..remove(kIsPageLink);
     final index = selection.normalized.startIndex;
     final length = selection.length;
     final transaction = this.transaction
-      ..formatText(
-        node,
-        index,
-        length,
-        {
-          BuiltInAttributeKey.href: null,
-          kIsPageLink: null,
-        },
-      );
+      ..formatText(node, index, length, attributes);
     apply(transaction);
   }
 
   void applyLink(Selection selection, LinkInfo info) {
     final node = getNodeAtPath(selection.start.path);
     if (node == null) return;
     final transaction = this.transaction;
+    final attributes = _getAttribute(node, selection);
+    attributes.addAll(info.toAttribute());
     transaction.replaceText(
       node,
       selection.startIndex,
       selection.length,
       info.name,
-      attributes: info.toAttribute(),
+      attributes: attributes,
     );
     apply(transaction);
   }
+
+  void removeAndReplaceLink(
+    Selection selection,
+    String text,
+  ) {
+    final node = getNodeAtPath(selection.end.path);
+    if (node == null) {
+      return;
+    }
+    final attributes = _getAttribute(node, selection)
+      ..remove(BuiltInAttributeKey.href)
+      ..remove(kIsPageLink);
+    final index = selection.normalized.startIndex;
+    final length = selection.length;
+    final transaction = this.transaction
+      ..replaceText(node, index, length, text, attributes: attributes);
+    apply(transaction);
+  }
+
+  Attributes _getAttribute(Node node, Selection selection) {
+    Attributes attributes = {};
+    final ops = node.delta?.whereType<TextInsert>() ?? [];
+    final startOffset = selection.start.offset;
+    var start = 0;
+    for (final op in ops) {
+      if (start > startOffset) break;
+      final length = op.length;
+      if (start + length > startOffset) {
+        attributes = op.attributes ?? {};
+        break;
+      }
+      start += length;
+    }
+
+    return attributes;
+  }
 }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/link/link_hover_menu.dart

@@ -187,7 +187,7 @@ class _LinkHoverTriggerState extends State<LinkHoverTrigger> {
         onDismiss: () => editMenuController.close(),
         onApply: (info) => editorState.applyLink(selection, info),
         onRemoveLink: (linkinfo) =>
-            onRemoveAndReplaceLink(editorState, selection, linkinfo.name),
+            editorState.removeAndReplaceLink(selection, linkinfo.name),
       ),
       child: child,
     );
@@ -266,31 +266,6 @@ class _LinkHoverTriggerState extends State<LinkHoverTrigger> {
       );
     }
   }
-
-  void onRemoveAndReplaceLink(
-    EditorState editorState,
-    Selection selection,
-    String text,
-  ) {
-    final node = editorState.getNodeAtPath(selection.end.path);
-    if (node == null) {
-      return;
-    }
-    final index = selection.normalized.startIndex;
-    final length = selection.length;
-    final transaction = editorState.transaction
-      ..replaceText(
-        node,
-        index,
-        length,
-        text,
-        attributes: {
-          BuiltInAttributeKey.href: null,
-          kIsPageLink: null,
-        },
-      );
-    editorState.apply(transaction);
-  }
 }
 
 class LinkHoverMenu extends StatefulWidget {