From 3fcde0e95d9dd147696ff1f4d4c07546e2dce238 Mon Sep 17 00:00:00 2001
From: alexcibotari <alexandru.cibotari@gmail.com>
Date: Sun, 1 Dec 2024 14:54:38 +0100
Subject: [PATCH] Add RichText Link

---
 package-lock.json                             | 24 ++++++++++++
 package.json                                  |  1 +
 .../rich-text-editor.component.html           | 13 +++++++
 .../rich-text-editor.component.ts             | 39 ++++++++++++++++++-
 src/styles/_rich-text-editor.scss             |  9 +++++
 5 files changed, 85 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index c19448cf..b4300c6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "@tiptap/extension-document": "^2.7.1",
         "@tiptap/extension-history": "^2.7.1",
         "@tiptap/extension-italic": "^2.7.1",
+        "@tiptap/extension-link": "^2.7.1",
         "@tiptap/extension-list-item": "^2.7.1",
         "@tiptap/extension-ordered-list": "^2.7.1",
         "@tiptap/extension-paragraph": "^2.7.1",
@@ -6919,6 +6920,23 @@
         "@tiptap/core": "^2.7.0"
       }
     },
+    "node_modules/@tiptap/extension-link": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-2.10.3.tgz",
+      "integrity": "sha512-8esKlkZBzEiNcpt7I8Cd6l1mWmCc/66pPbUq9LfnIniDXE3U+ahBf4m3TJltYFBGbiiTR/xqMtJyVHOpuLDtAw==",
+      "license": "MIT",
+      "dependencies": {
+        "linkifyjs": "^4.1.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
     "node_modules/@tiptap/extension-list-item": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.10.3.tgz",
@@ -14694,6 +14712,12 @@
         "uc.micro": "^2.0.0"
       }
     },
+    "node_modules/linkifyjs": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.1.4.tgz",
+      "integrity": "sha512-0/NxkHNpiJ0k9VrYCkAn9OtU1eu8xEr1tCCpDtSsVRm/SF0xAak2Gzv3QimSfgUgqLBCDlfhMbu73XvaEHUTPQ==",
+      "license": "MIT"
+    },
     "node_modules/liquid-json": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/liquid-json/-/liquid-json-0.3.1.tgz",
diff --git a/package.json b/package.json
index 631f9712..1a96e75e 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "@tiptap/extension-bullet-list": "^2.7.1",
     "@tiptap/extension-ordered-list": "^2.7.1",
     "@tiptap/extension-code": "^2.7.1",
+    "@tiptap/extension-link": "^2.7.1",
     "uuid": "^10.0.0",
     "zone.js": "~0.14.2"
   },
diff --git a/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.html b/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.html
index d188e83b..e931c184 100644
--- a/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.html
+++ b/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.html
@@ -73,6 +73,19 @@
           </svg>
         </button>
         <span class="vertical-divider">&nbsp; </span>
+        <button
+          matTooltip="Link"
+          class="rounded h-7 w-7 flex justify-center items-center ml-1"
+          [ngClass]="{ selected: editor.isActive('link') }"
+          (click)="setLink()">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
+            <path
+              d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z" />
+            <path
+              d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z" />
+          </svg>
+        </button>
+        <span class="vertical-divider">&nbsp; </span>
         <button
           matTooltip="Bullet List"
           class="rounded h-7 w-7 flex justify-center items-center ml-1"
diff --git a/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.ts b/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.ts
index 67d52e0d..2330ce6b 100644
--- a/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.ts
+++ b/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.ts
@@ -17,6 +17,7 @@ import ListItem from '@tiptap/extension-list-item';
 import OrderedList from '@tiptap/extension-ordered-list';
 import BulletList from '@tiptap/extension-bullet-list';
 import Code from '@tiptap/extension-code';
+import Link from '@tiptap/extension-link';
 
 @Component({
   selector: 'll-rich-text-editor',
@@ -33,7 +34,25 @@ export class RichTextEditorComponent implements OnDestroy {
   settingsStore = inject(LocalSettingsStore);
 
   editor = new Editor({
-    extensions: [Document, Text, Paragraph, Bold, Italic, Strike, Underline, Placeholder, History, ListItem, OrderedList, BulletList, Code],
+    extensions: [
+      Document,
+      Text,
+      Paragraph,
+      Bold,
+      Italic,
+      Strike,
+      Underline,
+      Placeholder,
+      History,
+      ListItem,
+      OrderedList,
+      BulletList,
+      Code,
+      Link.configure({
+        openOnClick: false,
+        autolink: true,
+      }),
+    ],
     editorProps: {
       attributes: {
         class: 'p-2 border-color border-t rounded-b-md outline-none',
@@ -44,6 +63,24 @@ export class RichTextEditorComponent implements OnDestroy {
 
   constructor(readonly fe: FormErrorHandlerService) {}
 
+  setLink(): void {
+    const previousUrl = this.editor.getAttributes('link')['href'];
+    const url = window.prompt('URL', previousUrl);
+    console.log('previousUrl', previousUrl);
+    console.log('url', url);
+    // cancelled
+    if (url === null) {
+      return;
+    }
+    // empty
+    if (url === '') {
+      this.editor.chain().focus().unsetLink().run();
+      return;
+    }
+    // update link
+    this.editor.chain().focus().setLink({ href: url, target: '_blank' }).run();
+  }
+
   ngOnDestroy(): void {
     this.editor.destroy();
   }
diff --git a/src/styles/_rich-text-editor.scss b/src/styles/_rich-text-editor.scss
index da0ef5c3..bbc5f6b2 100644
--- a/src/styles/_rich-text-editor.scss
+++ b/src/styles/_rich-text-editor.scss
@@ -32,6 +32,15 @@ ll-rich-text-editor {
       font-size: 0.85rem;
       padding: 0.3em 0.3em;
     }
+    /* Link styles */
+    a {
+      color: var(--sys-primary);
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
     /* List styles */
     ul {
       list-style: disc;