editor: Open link toolbar automatically when editable and link in selection

app/editor/components/SelectionToolbar.tsx

@@ -40,14 +40,14 @@ type Props = {
   view: EditorView;
 };
 
-function isVisible(props: Props) {
+function isVisible(props: Props, link: boolean) {
   const { view } = props;
   const { selection } = view.state;
 
-  if (!selection) {
-    return false;
+  if (link) {
+    return true;
   }
-  if (selection.empty) {
+  if (!selection || selection.empty) {
     return false;
   }
   if (selection instanceof NodeSelection && selection.node.type.name === "hr") {
@@ -232,14 +232,14 @@ export default class SelectionToolbar extends React.Component<Props> {
       state.selection.to
     ).textContent;
 
-    if (isTextSelection && !selectionText) {
+    if (isTextSelection && !selectionText && !link) {
       return null;
     }
 
     return (
       <FloatingToolbar
         view={view}
-        active={isVisible(this.props)}
+        active={isVisible(this.props, link)}
         ref={this.menuRef}
       >
         {link && range ? (

shared/editor/marks/Link.ts

@@ -8,13 +8,7 @@ import {
   Node,
   Mark as ProsemirrorMark,
 } from "prosemirror-model";
-import {
-  Transaction,
-  EditorState,
-  Plugin,
-  TextSelection,
-} from "prosemirror-state";
-import getMarkRange from "../queries/getMarkRange";
+import { Transaction, EditorState, Plugin } from "prosemirror-state";
 import Mark from "./Mark";
 
 const LINK_INPUT_REGEX = /\[([^[]+)]\((\S+)\)$/;
@@ -135,28 +129,9 @@ export default class Link extends Mark {
                 return false;
               }
 
-              // clicking a link while editing should select the entire link
-              // which will trigger the link editing toolbar to be displayed
-              if (view.editable) {
-                const { state, dispatch } = view;
-                const range = getMarkRange(
-                  state.selection.$from,
-                  state.schema.marks.link
-                );
-
-                if (range) {
-                  dispatch(
-                    state.tr.setSelection(
-                      new TextSelection(
-                        state.doc.resolve(range.from),
-                        state.doc.resolve(range.to)
-                      )
-                    )
-                  );
-                }
-
-                // clicking while read-only will navigate directly to the link
-              } else {
+              // clicking a link while editing should show the link toolbar,
+              // clicking in read-only will navigate
+              if (!view.editable) {
                 const href =
                   event.target.href ||
                   (event.target.parentNode instanceof HTMLAnchorElement
@@ -175,9 +150,10 @@ export default class Link extends Mark {
                   event.preventDefault();
                   this.options.onClickLink(href, event);
                 }
+                return true;
               }
 
-              return true;
+              return false;
             },
           },
         },