thelia · Neox63 · Mar 13, 2024
diff --git a/packages/blocks-editor/src/blocks/Text/Editor/Editor.tsx b/packages/blocks-editor/src/blocks/Text/Editor/Editor.tsx
@@ -4,6 +4,7 @@ import { useIntl } from "react-intl";
 import ReactQuill, { Quill } from "react-quill";
 import { ReactComponent as LinkIcon } from "../../../../assets/svg/link.svg";
 import { EditorModule } from "../../../utils/types";
+import { registerFormats } from "../utils/quill-formats";
 
 import "./Editor.css";
 
@@ -76,6 +77,8 @@ const Editor = forwardRef(
     },
     ref: any
   ) => {
+    registerFormats();
+
     const icons = Quill.import("ui/icons");
 
     icons["bold"] = '<i class="fas fa-bold"></i>';

diff --git a/packages/blocks-editor/src/blocks/Text/Modal/Search.tsx b/packages/blocks-editor/src/blocks/Text/Modal/Search.tsx
@@ -16,6 +16,7 @@ const InsertLink = forwardRef(
 
     const [link, setLink] = useState("");
     const [url, setUrl] = useState("");
+    const [openInNewTab, setOpenInNewTab] = useState(false);
 
     return (
       <>
@@ -45,13 +46,26 @@ const InsertLink = forwardRef(
               label={intl.formatMessage({ id: "BlockText__LINK_URL" })}
               placeholder={intl.formatMessage({ id: "BlockText__LINK_URL_PLACEHOLDER" })}
             />
+            <div className="Search__Content__NewTab">
+              <input
+                type="checkbox"
+                id="Search__Content__NewTab"
+                onChange={() => setOpenInNewTab(!openInNewTab)}
+                checked={openInNewTab}
+              />
+              <label htmlFor="Search__Content__NewTab">
+                {intl.formatMessage({ id: "BlockText__LINK_NEW_TAB" })}
+              </label>
+            </div>
           </div>
 
           <button
             className="Search__Content__InsertButton"
             disabled={!link || !url}
             onClick={() => {
-              ref.current.editor.insertText(cursorIndex, link, "link", url);
+              openInNewTab
+                ? ref.current.editor.insertText(cursorIndex, link, "link", url)
+                : ref.current.editor.insertText(cursorIndex, link, "custom-link", url);
               setIsModalOpen(false);
               setIsSearching(false);
             }}

diff --git a/packages/blocks-editor/src/blocks/Text/Modal/SearchModal.css b/packages/blocks-editor/src/blocks/Text/Modal/SearchModal.css
@@ -7,7 +7,7 @@
   &__Content {
     @apply bg-white border-l-8 border-vermillon rounded-md px-4 lg:px-14 py-4 lg:py-8;
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
-  
+
     &__Title {
       @apply text-mediumCharbon font-bold md:text-xl;
     }
@@ -16,17 +16,26 @@
       @apply mt-4 xl:w-2/3 relative;
     }
 
-
     &__InsertLink {
-      @apply flex items-end gap-4 mt-4;
+      @apply flex gap-4 mt-4;
+    }
+
+    &__NewTab {
+      @apply flex items-center gap-2 mt-4;
+
+      input,
+      label {
+        @apply m-0;
+      }
     }
 
-    &__UrlInput, &__LinkInput {
-      @apply w-2/5
-    }  
+    &__UrlInput,
+    &__LinkInput {
+      @apply w-2/5;
+    }
 
     &__InsertButton {
-      @apply h-10 px-2 flex items-center gap-2 text-sm tracking-wider text-white uppercase rounded-md bg-vermillon enabled:hover:bg-lightVermillon md:py-1 disabled:text-white disabled:bg-mediumGrey;
+      @apply h-10 mt-[23px] px-2 flex items-center gap-2 text-sm tracking-wider text-white uppercase rounded-md bg-vermillon enabled:hover:bg-lightVermillon md:py-1 disabled:text-white disabled:bg-mediumGrey;
     }
   }
 
@@ -43,9 +52,9 @@
 
     button:hover {
       @apply text-vermillon;
-      
+
       + i {
-        @apply text-vermillon
+        @apply text-vermillon;
       }
     }
   }
@@ -61,7 +70,7 @@
 
     > span {
       @apply overflow-hidden text-ellipsis;
-    } 
+    }
 
     &__Ref {
       @apply text-gray-400 text-sm;
@@ -71,4 +80,4 @@
   &__NoResults {
     @apply px-8 py-4 text-center;
   }
-}
+}
diff --git a/packages/blocks-editor/src/blocks/Text/Text.tsx b/packages/blocks-editor/src/blocks/Text/Text.tsx
@@ -62,7 +62,7 @@ const Blocktext: BlockPluginDefinition<BlockTextData> = {
     it: "Testo",
     cz: "Texte",
     pl: "Texte",
-    de: "Texte"
+    de: "Texte",
   },
   icon: Icon,
   description: {
@@ -73,7 +73,7 @@ const Blocktext: BlockPluginDefinition<BlockTextData> = {
     it: "Visualizza un testo formattato",
     cz: "Affiche un texte mis en forme",
     pl: "Affiche un texte mis en forme",
-    de: "Affiche un texte mis en forme"
+    de: "Affiche un texte mis en forme",
   },
 };
 

diff --git a/packages/blocks-editor/src/blocks/Text/utils/quill-formats.ts b/packages/blocks-editor/src/blocks/Text/utils/quill-formats.ts
@@ -0,0 +1,24 @@
+import { Quill } from 'react-quill'
+
+const LinkFormat = Quill.import('formats/link')
+
+export class InternalLink extends LinkFormat {
+  static create(value: any) {
+    const node = super.create(value)
+    value = (this as any).sanitize(value)
+    node.setAttribute('href', value.replace(location.origin, ''))
+    node.removeAttribute('target')
+    node.removeAttribute('rel')
+    return node
+  }
+
+  static register() {
+    InternalLink.blotName = 'custom-link'
+    InternalLink.tagName = 'a'
+    Quill.register(InternalLink, true)
+  }
+}
+
+export function registerFormats() {
+  InternalLink.register()
+}
diff --git a/packages/blocks-editor/src/utils/intl.ts b/packages/blocks-editor/src/utils/intl.ts
@@ -91,6 +91,7 @@ export const messages: Record<string, { [key: string]: string }> = {
     BlockText__LINK_LABEL_PLACEHOLDER: "Indiquez le titre de votre lien",
     BlockText__LINK_URL: "URL de votre lien",
     BlockText__LINK_URL_PLACEHOLDER: "Indiquez le lien de votre lien",
+    BlockText__LINK_NEW_TAB: "Ouvrir dans un nouvel onglet",
 
     BlockTitle__TEXT_PLACEHOLDER: "Votre titre ici",
     BlockTitle__LEVEL: "Niveau du titre",
@@ -273,6 +274,7 @@ export const messages: Record<string, { [key: string]: string }> = {
     BlockText__LINK_LABEL_PLACEHOLDER: "Enter the label of the link",
     BlockText__LINK_URL: "URL of the link",
     BlockText__LINK_URL_PLACEHOLDER: "Enter the URL of the link",
+    BlockText__LINK_NEW_TAB: "Open in a new tab",
 
     BlockTitle__TEXT_PLACEHOLDER: "Your title here",
     BlockTitle__LEVEL: "Title level",
@@ -451,6 +453,7 @@ export const messages: Record<string, { [key: string]: string }> = {
     BlockText__LINK_LABEL_PLACEHOLDER: "Introduce el label del enlace",
     BlockText__LINK_URL: "URL del enlace",
     BlockText__LINK_URL_PLACEHOLDER: "Introduce la URL del enlace",
+    BlockText__LINK_NEW_TAB: "Abrir en una nueva pestaña",
 
     BlockTitle__TEXT_PLACEHOLDER: "Tu título aquí",
     BlockTitle__LEVEL: "Nivel de título",
@@ -634,6 +637,7 @@ export const messages: Record<string, { [key: string]: string }> = {
     BlockText__LINK_LABEL_PLACEHOLDER: "Inserisci il label del link",
     BlockText__LINK_URL: "URL del link",
     BlockText__LINK_URL_PLACEHOLDER: "Inserisci l'URL del link",
+    BlockText__LINK_NEW_TAB: "Apri in una nuova scheda",
 
     BlockTitle__TEXT_PLACEHOLDER: "Il tuo titolo qui",
     BlockTitle__LEVEL: "Livello del titolo",