feat: link toolbar 'Open in new tab' option (#528)

sibiraj-s · Apr 3, 2024 · aacc680 · aacc680
1 parent 35838ba
commit aacc680
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 5 deletions.
diff --git a/docs/src/content/docs/menu.md b/docs/src/content/docs/menu.md
@@ -24,6 +24,8 @@ export class AppComponent implements OnInit, OnDestroy {
     ['ordered_list', 'bullet_list'],
     [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
     ['link', 'image'],
+    // or, set options for link:
+    //[{ link: { showOpenInNewTab: false } }, 'image'],
     ['text_color', 'background_color'],
     ['align_left', 'align_center', 'align_right', 'align_justify'],
     ['horizontal_rule', 'format_clear'],

diff --git a/projects/ngx-editor/src/lib/modules/menu/link/link.component.html b/projects/ngx-editor/src/lib/modules/menu/link/link.component.html
@@ -32,7 +32,7 @@
       </div>
     </div>
 
-    <div class="NgxEditor__Popup--FormGroup">
+    <div class="NgxEditor__Popup--FormGroup" *ngIf="showOpenInNewTab">
       <div class="NgxEditor__Popup--Col">
         <label>
           <input type="checkbox" formControlName="openInNewTab" />

diff --git a/projects/ngx-editor/src/lib/modules/menu/link/link.component.ts b/projects/ngx-editor/src/lib/modules/menu/link/link.component.ts
@@ -1,6 +1,6 @@
 import {
   Component, ElementRef,
-  HostListener, OnDestroy, OnInit,
+  HostListener, Input, OnDestroy, OnInit,
 } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
 import { EditorView } from 'prosemirror-view';
@@ -19,6 +19,8 @@ import { HTML } from '../../../trustedTypesUtil';
 })
 
 export class LinkComponent implements OnInit, OnDestroy {
+  @Input() showOpenInNewTab = true;
+
   showPopup = false;
   isActive = false;
   canExecute = true;
@@ -115,10 +117,16 @@ export class LinkComponent implements OnInit, OnDestroy {
     const { dispatch, state } = this.editorView;
     const { selection } = state;
 
+    let target: string | undefined;
+
+    if (this.showOpenInNewTab) {
+      target = openInNewTab ? '_blank' : '_self';
+    }
+
     const attrs = {
       title: href,
       href,
-      target: openInNewTab ? '_blank' : '_self',
+      target,
     };
 
     if (selection.empty) {

diff --git a/projects/ngx-editor/src/lib/modules/menu/menu.component.html b/projects/ngx-editor/src/lib/modules/menu/menu.component.html
@@ -14,6 +14,13 @@
       <!-- link -->
       <ngx-link [class]="iconContainerClass" *ngIf="item === 'link'"></ngx-link>
 
+      <ng-container *ngIf="isLinkWithOptions(item)">
+        <ngx-link
+          [class]="iconContainerClass"
+          [showOpenInNewTab]="getLinkOptions(item).showOpenInNewTab ?? true"
+        ></ngx-link>
+      </ng-container>
+
       <!-- image -->
       <ngx-image [class]="iconContainerClass" *ngIf="item === 'image'"> </ngx-image>
 

diff --git a/projects/ngx-editor/src/lib/modules/menu/menu.component.ts b/projects/ngx-editor/src/lib/modules/menu/menu.component.ts
@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 
 import { NgxEditorError } from 'ngx-editor/utils';
-import { Toolbar, ToolbarItem, ToolbarDropdown } from '../../types';
+import { Toolbar, ToolbarItem, ToolbarDropdown, ToolbarLink, ToolbarLinkOptions } from '../../types';
 import { MenuService } from './menu.service';
 import Editor from '../../Editor';
 
@@ -132,6 +132,17 @@ export class MenuComponent implements OnInit {
     return item as ToolbarDropdown;
   }
 
+  isLinkWithOptions(item: ToolbarItem): boolean {
+    // NOTE: it is not sufficient to check for a `link` property
+    // as String.prototype.link is a valid (although deprecated) method
+    return typeof item === 'object'
+      && typeof (item as ToolbarLink)?.link === 'object';
+  }
+
+  getLinkOptions(item: ToolbarItem): ToolbarLinkOptions {
+    return (item as ToolbarLink)?.link;
+  }
+
   ngOnInit(): void {
     if (!this.editor) {
       throw new NgxEditorError('Required editor instance to initialize menu component');

diff --git a/projects/ngx-editor/src/lib/types.ts b/projects/ngx-editor/src/lib/types.ts
@@ -31,10 +31,12 @@ export type TBItems = 'bold'
 | 'format_clear';
 
 export type ToolbarDropdown = { heading?: TBHeadingItems[] };
+export type ToolbarLinkOptions = { showOpenInNewTab?: boolean };
+export type ToolbarLink = { link: ToolbarLinkOptions };
 export type ToolbarCustomMenuItem = (editorView: EditorView) => TCR;
 export type ToolbarDropdownGroupKeys = keyof ToolbarDropdown;
 export type ToolbarDropdownGroupValues = ToolbarDropdown[ToolbarDropdownGroupKeys];
-export type ToolbarItem = TBItems | ToolbarDropdown | ToolbarCustomMenuItem;
+export type ToolbarItem = TBItems | ToolbarDropdown | ToolbarLink | ToolbarCustomMenuItem;
 export type Toolbar = Array<ToolbarItem[]>;
 
 export interface NgxEditorConfig {