fix: do not save empty link (#1580)

projects/editor/common/editor-adapter.ts

@@ -9,6 +9,11 @@ import type {TuiEditorAttachedFile} from './attached';
 import type {TuiEditableIframe} from './iframe';
 import type {TuiYoutubeOptions} from './youtube';
 
+export interface TuiSelectionSnapshot {
+    anchor: number;
+    head: number;
+}
+
 @Directive()
 export abstract class AbstractTuiEditor {
     public abstract readonly isFocused: boolean;
@@ -82,6 +87,8 @@ export abstract class AbstractTuiEditor {
     public abstract destroy(): void;
     public abstract selectClosest(): void;
     public abstract focus(): void;
+    public abstract takeSelectionSnapshot(): void;
+    public abstract getSelectionSnapshot(): TuiSelectionSnapshot | null;
     public abstract setValue(value: string): void;
     public abstract setCellColor(color: string): void;
     public abstract getOriginTiptapEditor(): Editor | null;

projects/editor/components/edit-link/edit-link.component.ts

@@ -158,6 +158,15 @@ export class TuiEditLink {
         this.url = this.removePrefix(url);
     }
 
+    protected onBlur(url: string): void {
+        const range = this.editor?.getSelectionSnapshot();
+
+        if (range && !url) {
+            this.editor?.setTextSelection({from: range.anchor, to: range.head});
+            this.editor?.toggleLink('');
+        }
+    }
+
     protected onClear(): void {
         this.url = '';
     }

projects/editor/components/edit-link/edit-link.template.html

@@ -23,7 +23,10 @@
                     <ng-container *ngIf="texts$ | async as text">
                         {{ prefixIsHashMode ? text.anchorExample : text.urlExample }}
                     </ng-container>
-                    <input [(ngModel)]="url" />
+                    <input
+                        [(ngModel)]="url"
+                        (blur)="onBlur(url)"
+                    />
                 </tui-input-inline>
             </div>
         </label>

projects/editor/components/toolbar/toolbar.component.ts

@@ -274,6 +274,7 @@ export class TuiToolbar {
     }
 
     protected onLink(url?: string): void {
+        this.editor?.takeSelectionSnapshot();
         this.editor?.toggleLink(url ?? '');
     }
 

projects/editor/directives/tiptap-editor/tiptap-editor.service.ts

@@ -4,6 +4,7 @@ import type {
     TuiEditableIframe,
     TuiEditableImage,
     TuiEditorAttachedFile,
+    TuiSelectionSnapshot,
     TuiYoutubeOptions,
 } from '@taiga-ui/editor/common';
 import {
@@ -29,6 +30,8 @@ export class TuiTiptapEditorService extends AbstractTuiEditor {
 
     protected editor?: Editor;
 
+    protected selectionSnapshot: TuiSelectionSnapshot | null = null;
+
     constructor() {
         super();
 
@@ -429,6 +432,14 @@ export class TuiTiptapEditorService extends AbstractTuiEditor {
     public getHTML(): string {
         return this.getOriginTiptapEditor()?.getHTML() ?? '';
     }
+
+    public takeSelectionSnapshot(): void {
+        this.selectionSnapshot = this.editor?.state.selection.toJSON() ?? null;
+    }
+
+    public getSelectionSnapshot(): TuiSelectionSnapshot | null {
+        return this.selectionSnapshot;
+    }
 }
 
 export type {TuiEditorTypes};