Add RichText Link

Author: alexcibotari

package-lock.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"
   },

package.json

@@ -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"

src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.html

@@ -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();
   }

src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.ts

@@ -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;