Link handling tweaks (#230)

* Focus the editor when link dialog is closed.

This is especially useful when the ESC key is hit. Without this, the
link dialog disappears, you expect to be able to continue editing, but
the editor does not have focus. Now it does!

* Update addLink behavior to handle editing link without a full selection.

When your cursor is within a node of linked text and the link dialog is
opened, the intention is almost always to edit the link for the full
node rather than insert a new link in place of the text for which the
cursor is sitting.

Here's how this interaction worked before:

https://share.cleanshot.com/1NYHrBxP

With this change, editing a link when the cursor is within a linked
node will edit the link for the entire linked text rather than replacing
or inserting the new link in place of or in the midst of the linked
node text.

Here is the change in action:

https://share.cleanshot.com/gLjDmjwN

* Show invalid URL message when link validity is broken.

Prior to this the text field would turn red, but the "Not a valid URL"
message did not appear to the user.

* Create violet-queens-perform.md

---------

Co-authored-by: Konnor Rogers <[email protected]>

.changeset/violet-queens-perform.md

@@ -0,0 +1,5 @@
+---
+"rhino-editor": patch
+---
+
+Fix the UX of link insertions

src/exports/elements/tip-tap-editor.ts

@@ -303,6 +303,7 @@ export class TipTapEditor extends TipTapEditorBase {
 
   closeLinkDialog(): void {
     this.linkDialogExpanded = false;
+    this.editor.commands.focus();
   }
 
   showLinkDialog(): void {
@@ -350,24 +351,26 @@ export class TipTapEditor extends TipTapEditorBase {
     } catch (error) {
       inputElement.setCustomValidity("Not a valid URL");
       this.__invalidLink__ = true;
+      inputElement.reportValidity();
       return;
     }
 
     if (href) {
       this.closeLinkDialog();
       inputElement.value = "";
-      const chain = this.editor
-        ?.chain()
-        .extendMarkRange("link")
-        .setLink({ href });
 
-      if (chain && this.editor?.state.selection.empty) {
-        chain.insertContent(href);
+      if (this.editor.state.selection.empty && !this.editor.getAttributes('link').href) {
+        const from = this.editor.state.selection.anchor;
+        this.editor.commands.insertContent(href);
+        const to = this.editor.state.selection.anchor;
+        this.editor.commands.setTextSelection({from, to});
       }
 
-      if (chain) {
-        chain.run();
-      }
+      const chain = this.editor
+        ?.chain()
+        .extendMarkRange("link")
+        .setLink({ href })
+        .run();
     }
   }