feat(link): make user experience of link editing better

meliora · meliora · commit d0bf58fdc1f1 · 2025-10-09T13:31:29.000+03:00
diff --git a/src/extensions/Link/Link.ts b/src/extensions/Link/Link.ts
@@ -31,8 +31,10 @@ export const Link = /* @__PURE__ */ TiptapLink.extend<LinkOptions>({
   },
 
   addOptions() {
+    const parentOptions = this.parent?.() || {};
+    const presetTarget = parentOptions.HTMLAttributes?.target;
     return {
-      ...this.parent?.(),
+      ...parentOptions,
       openOnClick: true,
       button: ({ editor, t }) => {
         return {
@@ -42,29 +44,37 @@ export const Link = /* @__PURE__ */ TiptapLink.extend<LinkOptions>({
             action: (value) => {
               const { link, text, openInNewTab } = value;
 
-              const { state } = editor;
-              const { from } = state.selection;
+              if(!link) {
+                // if user clears the link and applies, remove the link
+                editor.chain().extendMarkRange('link').unsetLink().run();
+                return;
+              }
+
+              // if cursor is inside a link, select the entire link first
+              if (editor.isActive('link')) {
+                editor.chain().extendMarkRange('link').run();
+              }
+
+              const { from } = editor.state.selection;
               const insertedLength = text.length;
-              const to = from + insertedLength;
 
               editor
                 .chain()
-                .extendMarkRange('link')
                 .insertContent({
                   type: 'text',
                   text,
                   marks: [
                     {
                       type: 'link',
                       attrs: {
-                        href: link,
-                        target: openInNewTab ? '_blank' : '',
+                        href: link.match(/^https?:\/\//i) ? link : `http://${link}`,
+                        target: presetTarget ?? (openInNewTab ? '_blank' : ''),
                       },
                     },
                   ],
                 })
                 .setLink({ href: link })
-                .setTextSelection({ from, to }) // 👈 Select inserted text
+                .setTextSelection({ from, to: from + insertedLength })
                 .focus()
                 .run();
             },
@@ -73,6 +83,7 @@ export const Link = /* @__PURE__ */ TiptapLink.extend<LinkOptions>({
             disabled: !editor.can().setLink({ href: '' }),
             icon: 'Link',
             tooltip: t('editor.link.tooltip'),
+            target: presetTarget,
           },
         };
       },
@@ -89,6 +100,18 @@ export const Link = /* @__PURE__ */ TiptapLink.extend<LinkOptions>({
             if (!range) {
               return false;
             }
+
+            // honor openOnClick setting
+            let mark: any = null;
+            doc.nodesBetween(range.from, range.to, (node) => {
+              mark = node.marks.find((m) => m.type === schema.marks.link);
+              return !mark;
+            });
+            if (this.options.openOnClick && mark?.attrs.href && pos !== range.to) {
+              window.open(mark.attrs.href, mark.attrs.target || '_self');
+              return true;
+            }
+
             const $start = doc.resolve(range.from);
             const $end = doc.resolve(range.to);
             const transaction = tr.setSelection(
diff --git a/src/extensions/Link/components/LinkEditBlock.tsx b/src/extensions/Link/components/LinkEditBlock.tsx
@@ -1,14 +1,17 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 import { Button, IconComponent, Input, Label, Switch } from '@/components';
 import Link from '@/extensions/Link/Link';
 import { useLocale } from '@/locales';
+import type { Mark } from '@tiptap/pm/model';
 
 interface IPropsLinkEditBlock {
   editor: any;
   onSetLink: (link: string, text?: string, openInNewTab?: boolean) => void;
+  open?: boolean;
+  target?: string;
 }
 
 function LinkEditBlock(props: IPropsLinkEditBlock) {
@@ -20,19 +23,53 @@ function LinkEditBlock(props: IPropsLinkEditBlock) {
   });
   const [openInNewTab, setOpenInNewTab] = useState<boolean>(false);
 
+  const textInputRef = useRef<HTMLInputElement>(null);
+  const linkInputRef = useRef<HTMLInputElement>(null);
+
   useEffect(() => {
     const updateForm = () => {
-      if (props.editor?.isActive('link')) {
-        const { href: link, target } = props.editor.getAttributes('link');
-        const { from, to } = props.editor.state.selection;
-        const text = props.editor.state.doc.textBetween(from, to, ' ');
-        setForm({ link: link || '', text });
-        setOpenInNewTab(target === '_blank');
-      } else {
-        const LinkOptions = props.editor.extensionManager.extensions.find(
-          (ext: any) => ext.name === Link.name,
-        )?.options;
-        setOpenInNewTab(LinkOptions?.HTMLAttributes?.target === '_blank');
+      const { from, to, empty } = props.editor.state.selection;
+
+      const LinkOptions = props.editor.extensionManager.extensions.find(
+        (ext: any) => ext.name === Link.name,
+      )?.options;
+
+      let text = '';
+      let link = '';
+      let target = LinkOptions?.HTMLAttributes?.target;
+
+      const node = props.editor.state.doc.nodeAt(from);
+
+      if (node) {
+        const linkMark = node.marks.find((mark: Mark) => mark.type.name === 'link');
+        if (linkMark) {
+          link = linkMark.attrs.href || '';
+          target = linkMark.attrs.target;
+          if (empty) {
+            text = node.text || '';
+          } else {
+            text = props.editor.state.doc.textBetween(from, to, ' ');
+          }
+        } else {
+          // no link mark at cursor => normal selection
+          text = props.editor.state.doc.textBetween(from, to, ' ');
+        }
+      }
+      // if no node found (empty doc or weird selection), fallback to range
+      if (!node) {
+        text = props.editor.state.doc.textBetween(from, to, ' ');
+      }
+
+      setForm({ link, text });
+      setOpenInNewTab(props.target ? props.target === '_blank' : target === '_blank');
+
+      if (props.open) {
+        // better uexp - focus link input by default
+        if (text === '') {
+          textInputRef.current?.focus();
+        } else {
+          linkInputRef.current?.focus();
+        }
       }
     };
 
@@ -46,7 +83,7 @@ function LinkEditBlock(props: IPropsLinkEditBlock) {
     return () => {
       props.editor.off('selectionUpdate', updateForm);
     };
-  }, [props.editor]);
+  }, [props.editor, props.open]);
 
   function handleSubmit(event: any) {
     event.preventDefault();
@@ -65,6 +102,7 @@ function LinkEditBlock(props: IPropsLinkEditBlock) {
         <div className="richtext-mb-[10px] richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5">
           <div className="richtext-relative richtext-w-full richtext-max-w-sm richtext-items-center">
             <Input
+              ref={textInputRef}
               className="richtext-w-80"
               onChange={(e) => setForm({ ...form, text: e.target.value })}
               placeholder="Text"
@@ -82,6 +120,7 @@ function LinkEditBlock(props: IPropsLinkEditBlock) {
         <div className="richtext-flex richtext-w-full richtext-max-w-sm richtext-items-center richtext-gap-1.5">
           <div className="richtext-relative richtext-w-full richtext-max-w-sm richtext-items-center">
             <Input
+              ref={linkInputRef}
               className="richtext-pl-10"
               onChange={(e) => setForm({ ...form, link: e.target.value })}
               required
@@ -98,18 +137,20 @@ function LinkEditBlock(props: IPropsLinkEditBlock) {
           </div>
         </div>
 
-        <div className="richtext-flex richtext-items-center richtext-space-x-2">
-          <Label>
-            {t('editor.link.dialog.openInNewTab')}
-          </Label>
-
-          <Switch
-            checked={openInNewTab}
-            onCheckedChange={(e) => {
-              setOpenInNewTab(e);
-            }}
-          />
-        </div>
+        {!props.target && (
+          <div className="richtext-flex richtext-items-center richtext-space-x-2">
+            <Label>
+              {t('editor.link.dialog.openInNewTab')}
+            </Label>
+
+            <Switch
+              checked={openInNewTab}
+              onCheckedChange={(e) => {
+                setOpenInNewTab(e);
+              }}
+            />
+          </div>
+        )}
 
         <Button
           className="richtext-mt-2 richtext-self-end"
diff --git a/src/extensions/Link/components/LinkEditPopover.tsx b/src/extensions/Link/components/LinkEditPopover.tsx
@@ -13,6 +13,7 @@ interface IPropsLinkEditPopover {
   shortcutKeys?: string[]
   isActive?: ButtonViewReturnComponentProps['isActive']
   action?: ButtonViewReturnComponentProps['action']
+  target?: string
 }
 
 function LinkEditPopover(props: IPropsLinkEditPopover) {
@@ -37,7 +38,7 @@ function LinkEditPopover(props: IPropsLinkEditPopover) {
         </ActionButton>
       </PopoverTrigger>
       <PopoverContent hideWhenDetached className="richtext-w-full" align="start" side="bottom">
-        <LinkEditBlock editor={props.editor} onSetLink={onSetLink} />
+        <LinkEditBlock editor={props.editor} onSetLink={onSetLink} open={open} target={props.target} />
       </PopoverContent>
     </Popover>
   );
