Fix/add new tab option rich text

src/controls/richText/RichText.module.scss

@@ -97,6 +97,19 @@
   color: "[theme:neutralLighterAlt, default:#{$ms-color-neutralLighterAlt}]";
 }
 
+.toolbarSubmenuCaretLT {
+  display: inline-block;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 8px;
+  speak: none;
+  top: 50%;
+  color: "[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]";
+}
+
+
 .toolbarSubmenuDisplayButton {
   width: 100%;
 }

src/controls/richText/RichText.tsx

@@ -3,7 +3,7 @@ import * as strings from 'ControlStrings';
 import 'react-quill/dist/quill.snow.css';
 import RichTextPropertyPane from './RichTextPropertyPane';
 import ReactQuill, { Quill as ReactQuillInstance } from 'react-quill';
-import type { Quill } from 'quill';
+import { Quill } from 'quill';
 import styles from './RichText.module.scss';
 import { IRichTextProps, IRichTextState } from './RichText.types';
 import { Guid } from '@microsoft/sp-core-library';
@@ -89,6 +89,15 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
     text: strings.ListNumbered,
     data: { icon: 'NumberedList' }
   }];
+  private ddLinkTargetOpts = [{
+    key: '_self',
+    id: 'same',
+    text: strings.SameTab
+  }, {
+    key: '_blank',
+    id: 'new',
+    text: strings.NewTab
+  }];
 
   /**
    * Sets default properties
@@ -126,6 +135,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
       insertImageUrl: undefined,
       selectedText: undefined,
       selectedUrl: undefined,
+      dropdownLinkTarget: '_self',
       wrapperTop: 0
     };
 
@@ -394,6 +404,15 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
             }
           }} />
 
+        <Dropdown
+          id="DropDownLinkTarget"
+          label='Open link in'
+          onRenderCaretDown={() => <Icon className={styles.toolbarSubmenuCaretLT} iconName="CaretDownSolid8" />}
+          selectedKey={this.state.dropdownLinkTarget || '_self'}
+          options={this.ddLinkTargetOpts}
+          onChange={this.onChangeLinkTarget}
+        />
+
         <DialogFooter className={styles.actions}>
           <div className={`ms-Dialog-actionsRight ${styles.actionsRight}`}>
             {
@@ -513,6 +532,17 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
       'super'];
     ReactQuillInstance.register(sizeClass, true);
 
+    const CusLink = ReactQuillInstance.import('formats/link');
+    class TLink extends CusLink {
+      static create(value) {
+        const node = super.create(value);
+        node.setAttribute('href', value.href);
+        node.setAttribute('target', value.target);
+        return node;
+      }
+    }
+
+    ReactQuillInstance.register(TLink, true);
     return (
       <div ref={(ref) => { this._wrapperRef = ref; }} className={css(styles.richtext && this.state.editing ? 'ql-active' : null, this.props.className || null) || null}>
         {renderLabel}
@@ -690,6 +720,12 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
     this.applyFormat("align", newAlignValue);
   }
 
+  private onChangeLinkTarget = (_event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption, _index?: number): void => {
+    this.setState({
+      dropdownLinkTarget: item.key.toString()
+    })
+  }
+
   private onChangeList = (_event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption, _index?: number): void => {
     // if we're already in list mode, toggle off
     const key = item.key;
@@ -705,6 +741,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
     const range = quill.getSelection();
 
     let linkText = this.state.selectedText;
+    let dropdownLinkTarget = '_self';
     if (this.state.selectedUrl !== undefined && this.state.selectedText === "") {
       const { text } = this.state;
       const urlStartIndex = text.indexOf(this.state.selectedUrl);
@@ -718,16 +755,32 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
       const linkStart = editorText.indexOf(linkText);
       range.index = linkStart;
       range.length = linkText.length;
+
+      dropdownLinkTarget = this.calculateLinkTargetBasedOnSelectedText(text.substring(urlStartIndex, endTextIndex));
     }
 
+
+
     this.setState({
       hideDialog: false,
       insertUrlText: linkText,
       insertUrl: this.state.selectedUrl,
+      dropdownLinkTarget: dropdownLinkTarget,
       selectedRange: range
     });
   }
 
+  /**
+   *  Get target value on text selection
+   */
+  private calculateLinkTargetBasedOnSelectedText = (selectedText: string): string => {
+    if (selectedText.includes('_blank')) {
+      return '_blank'; // Open in a new tab for links containing "_blank"
+    } else {
+      return '_self'; // Open in the same tab for other links
+    }
+  }
+
   /**
    * Hides the insert link dialog
    */
@@ -790,15 +843,21 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
     if (cursorPosition > -1) {
       const textToInsert: string = (this.state.insertUrlText !== undefined && this.state.insertUrlText !== "") ? this.state.insertUrlText : this.state.insertUrl;
       const urlToInsert: string = this.state.insertUrl;
+      const targetToInsert: string = this.state.dropdownLinkTarget;
       quill.insertText(cursorPosition, textToInsert);
       quill.setSelection(cursorPosition, textToInsert.length);
-      quill.formatText(cursorPosition, textToInsert.length, 'link', urlToInsert);
+      quill.formatText(cursorPosition, textToInsert.length, 'link', {
+        href: urlToInsert,
+        target: targetToInsert,
+      });
     }
 
+
     this.setState({
       hideDialog: true,
       insertUrl: undefined,
-      insertUrlText: undefined
+      insertUrlText: undefined,
+      dropdownLinkTarget: '_self'
     });
   }
 
@@ -875,7 +934,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
         const formats = quill.getFormat(range);
 
         // Get the currently selected url
-        const selectedUrl = formats.link ? formats.link : undefined;
+        const selectedUrl = formats.link ? formats.link : undefined;    
 
         this.setState({
           selectedText: selectedText,
@@ -1001,6 +1060,7 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
     if (label) {
       return (
         <Label htmlFor={this._richTextId}>
+
           {label}
         </Label>
       );

src/controls/richText/RichText.types.ts

@@ -178,4 +178,6 @@ export interface IRichTextState {
   text: string;
 
   wrapperTop: number;
+
+  dropdownLinkTarget: string;
 }

src/loc/bg-bg.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "Функция 2",
   "HeaderH4": "Функция 3",
   "HeaderBlockQuote": "Изтегли цитат",
+  "SameTab": "Същият раздел",
+  "NewTab": "Нов прозорец",
   "AlignLeft": "Подравни отляво",
   "AlignCenter": "Център",
   "AlignRight": "Подравни отдясно",

src/loc/ca-es.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "Encapçalament 2",
   "HeaderH4": "Encapçalament 3",
   "HeaderBlockQuote": "Cita introductòria",
+  "SameTab": "La mateixa pestanya",
+  "NewTab": "Nova pestanya",
   "AlignLeft": "Alinea a l'esquerra",
   "AlignCenter": "Centre",
   "AlignRight": "Alinea a la dreta",

src/loc/da-dk.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "Overskrift 2",
   "HeaderH4": "Overskrift 3",
   "HeaderBlockQuote": "Citat",
+  "SameTab": "Samme fane",
+  "NewTab": "Ny fane",
   "AlignLeft": "Venstrejusteret",
   "AlignCenter": "Midte",
   "AlignRight": "Juster til højre",

src/loc/de-de.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "Überschrift 2",
   "HeaderH4": "Überschrift 3",
   "HeaderBlockQuote": "Textzitat",
+  "SameTab": "Gleiche Registerkarte",
+  "NewTab": "Neue Registerkarte",
   "AlignLeft": "Linksbündig",
   "AlignCenter": "Zentrieren",
   "AlignRight": "Rechtsbündig",

src/loc/el-gr.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "Τομέας 2",
   "HeaderH4": "Τομέας 3",
   "HeaderBlockQuote": "Ελκυστική φράση",
+  "SameTab": "Ίδια καρτέλα",
+  "NewTab": "Νέα καρτέλα",
   "AlignLeft": "Στοίχιση αριστερά",
   "AlignCenter": "Κέντρο",
   "AlignRight": "Στοίχιση δεξιά",

src/loc/en-us.ts

@@ -94,6 +94,8 @@ define([], () => {
     HeaderH3: "Heading 2",
     HeaderH4: "Heading 3",
     HeaderBlockQuote: "Pull quote",
+    SameTab: "Same tab",
+    NewTab: "New tab",
     AlignLeft: "Align left",
     AlignCenter: "Center",
     AlignRight: "Align right",
@@ -115,6 +117,7 @@ define([], () => {
     InsertImageTitle: "Insert image",
     AddressFieldLabel: "Address",
     TextToDisplayLabel: "Text to display",
+    LinkTarget: "Open link in",
     SaveButtonLabel: "Save",
     CancelButtonLabel: "Cancel",
     RemoveLinkLabel: "Remove link",

src/loc/es-es.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "Rumbo 2",
   "HeaderH4": "Rumbo 3",
   "HeaderBlockQuote": "Presupuesto de extracción",
+  "SameTab": "Misma pestaña",
+  "NewTab": "Nueva pestaña",
   "AlignLeft": "Alinear a la izquierda",
   "AlignCenter": "Centro",
   "AlignRight": "Alinear a la derecha",

src/loc/et-ee.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "2. rubriik",
   "HeaderH4": "3. rubriik",
   "HeaderBlockQuote": "Tsitaat",
+  "SameTab": "Sama vahekaart",
+  "NewTab": "Uuel kaardil",
   "AlignLeft": "Joonda vasakule",
   "AlignCenter": "Center",
   "AlignRight": "Joonda paremale",

src/loc/eu-es.ts

@@ -87,6 +87,8 @@ define([], () => {
     HeaderH3: "Heading 2",
     HeaderH4: "Heading 3",
     HeaderBlockQuote: "Pull quote",
+    SameTab: "Fitxa bera",
+    NewTab: "Fitxa berria",
     AlignLeft: "Align left",
     AlignCenter: "Center",
     AlignRight: "Align right",

src/loc/fi-fi.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "Otsake 2",
   "HeaderH4": "Otsake 3",
   "HeaderBlockQuote": "Erotettu lainaus",
+  "SameTab": "Sama välilehti",
+  "NewTab": "Uusi välilehti",
   "AlignLeft": "Tasaa vasemmalle",
   "AlignCenter": "Keskelle",
   "AlignRight": "Tasaa oikealle",

src/loc/fr-ca.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "Titre 2",
   "HeaderH4": "Titre 3",
   "HeaderBlockQuote": "Citation",
+  "SameTab": "Même onglet",
+  "NewTab": "Nouvel onglet",
   "AlignLeft": "Aligner à gauche",
   "AlignCenter": "Centrer",
   "AlignRight": "Aligner à droite",

src/loc/fr-fr.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "Titre 2",
   "HeaderH4": "Titre 3",
   "HeaderBlockQuote": "Citation",
+  "SameTab": "Même onglet",
+  "NewTab": "Nouvel onglet",
   "AlignLeft": "Aligner à gauche",
   "AlignCenter": "Centrer",
   "AlignRight": "Aligner à droite",

src/loc/it-it.ts

@@ -81,6 +81,8 @@ define([], () => {
   "HeaderH3": "Titolo 2",
   "HeaderH4": "Titolo 3",
   "HeaderBlockQuote": "Quotazione pull",
+  "SameTab": "Stessa scheda",
+  "NewTab": "Nuova scheda",
   "AlignLeft": "Allinea a sinistra",
   "AlignCenter": "Centro",
   "AlignRight": "Allinea a destra",

src/loc/ja-jp.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "見出し 2",
   "HeaderH4": "見出し 3",
   "HeaderBlockQuote": "引用のプル",
+  "SameTab": "同じタブ",
+  "NewTab": "新しいタブ",
   "AlignLeft": "左揃え",
   "AlignCenter": "中央揃え",
   "AlignRight": "右揃え",

src/loc/lt-lt.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "2 antraštė",
   "HeaderH4": "3 antraštė",
   "HeaderBlockQuote": "Dėmesį atkreipianti citata",
+  "SameTab": "同じタブ",
+  "NewTab": "新しいタブ",
   "AlignLeft": "Lygiuoti kairėje",
   "AlignCenter": "Centre",
   "AlignRight": "Lygiuoti dešinėje",

src/loc/lv-lv.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "2. izdevumu kategorija",
   "HeaderH4": "3. izdevumu kategorija",
   "HeaderBlockQuote": "Izvilkuma citāts",
+  "SameTab": "Tā pati cilne",
+  "NewTab": "Jauna cilne",
   "AlignLeft": "Līdzināt pa kreisi",
   "AlignCenter": "Centrs",
   "AlignRight": "Līdzināt pa labi",

src/loc/mystrings.d.ts

@@ -91,6 +91,8 @@ declare interface IControlStrings {
   HeaderH3: string;
   HeaderH4: string;
   HeaderBlockQuote: string;
+  SameTab: string;
+  NewTab: string;
   AlignLeft: string;
   AlignCenter: string;
   AlignRight: string;
@@ -112,6 +114,7 @@ declare interface IControlStrings {
   InsertImageTitle: string;
   AddressFieldLabel: string;
   TextToDisplayLabel: string;
+  LinkTarget: string;
   SaveButtonLabel: string;
   CancelButtonLabel: string;
   RemoveLinkLabel: string;

src/loc/nb-no.ts

@@ -83,6 +83,8 @@ define([], () => {
     "HeaderH3": "Overskrift 2",
     "HeaderH4": "Overskrift 3",
     "HeaderBlockQuote": "Sitat",
+    "SameTab": "Samme fane",
+    "NewTab": "Ny fane",
     "AlignLeft": "Juster venstre",
     "AlignCenter": "Midtstill",
     "AlignRight": "Juster høyre",

src/loc/nl-nl.ts

@@ -81,6 +81,8 @@ define([], () => {
     "HeaderH3": "Rubriek 2",
     "HeaderH4": "Rubriek 3",
     "HeaderBlockQuote": "Blikvangercitaat",
+    "SameTab": "Hetzelfde tabblad",
+    "NewTab": "Nieuw tabblad",
     "AlignLeft": "Links uitlijnen",
     "AlignCenter": "Middelpunt",
     "AlignRight": "Rechts uitlijnen",

src/loc/pl-pl.ts

@@ -83,6 +83,8 @@ define([], () => {
   "HeaderH3": "Dział 2",
   "HeaderH4": "Dział 3",
   "HeaderBlockQuote": "Wyciągnij ofertę",
+  "SameTab": "Ta sama zakładka",
+  "NewTab": "Nowa karta",
   "AlignLeft": "Wyrównaj do lewej",
   "AlignCenter": "Centrum",
   "AlignRight": "Wyrównaj do prawej",

src/loc/pt-br.ts

@@ -81,6 +81,8 @@ define([], () => {
     HeaderH3: "Título 2",
     HeaderH4: "Título 3",
     HeaderBlockQuote: "Puxar citação",
+    SameTab: "Mesma guia",
+    NewTab: "Nova aba",
     AlignLeft: "Alinhar à esquerda",
     AlignCenter: "Centro",
     AlignRight: "Alinhar à direita",