fix: correctly apply file link attributes (#1626)

taiga-family · Dec 17, 2024 · d68fa92 · d68fa92
1 parent f73c397
commit d68fa92
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 4 deletions.
diff --git a/projects/demo/src/app/pages/upload-files/examples/1/filesio.service.ts b/projects/demo/src/app/pages/upload-files/examples/1/filesio.service.ts
@@ -33,6 +33,14 @@ export class FileIoService {
                 method: 'POST',
                 body,
             }).then(async (response: Response) => response.json()),
-        ).pipe(map((result) => ({name: result.name, link: result.link})));
+        ).pipe(
+            map((result) => ({
+                name: result.name,
+                link: result.link,
+                attrs: {
+                    class: 'file-link',
+                },
+            })),
+        );
     }
 }
diff --git a/projects/editor/common/attached.ts b/projects/editor/common/attached.ts
@@ -1,4 +1,6 @@
-export interface TuiEditorAttachedFile<T = Record<string, any>> {
+import type {TuiLinkAttributes} from './tui-link-attributes';
+
+export interface TuiEditorAttachedFile<T = TuiLinkAttributes> {
     attrs?: T;
     link: string;
     name: string;

diff --git a/projects/editor/common/index.ts b/projects/editor/common/index.ts
@@ -21,4 +21,5 @@ export * from './image';
 export * from './image-loader';
 export * from './parsed-gradient';
 export * from './tiptap-editor';
+export * from './tui-link-attributes';
 export * from './youtube';
diff --git a/projects/editor/common/tui-link-attributes.ts b/projects/editor/common/tui-link-attributes.ts
@@ -0,0 +1,5 @@
+export interface TuiLinkAttributes {
+    target?: string | null;
+    rel?: string | null;
+    class?: string | null;
+}
diff --git a/projects/editor/extensions/file-link/index.ts b/projects/editor/extensions/file-link/index.ts
@@ -1,4 +1,4 @@
-import type {TuiEditorAttachedFile} from '@taiga-ui/editor/common';
+import type {TuiEditorAttachedFile, TuiLinkAttributes} from '@taiga-ui/editor/common';
 import {Extension} from '@tiptap/core';
 
 declare module '@tiptap/core' {
@@ -9,6 +9,12 @@ declare module '@tiptap/core' {
     }
 }
 
+function linkAttributesToString(attrs: TuiLinkAttributes): string {
+    return Object.entries(attrs)
+        .map(([key, value]) => `${key}="${value}"`)
+        .join(' ');
+}
+
 export const TuiFileLink = Extension.create({
     name: 'fileLink',
 
@@ -20,6 +26,9 @@ export const TuiFileLink = Extension.create({
                     const {selection} = state;
                     const selectedSize = Math.abs(selection.to - selection.from);
                     const whitespace = '<span style="font-size: 15px"> </span>';
+                    const attrs = fileLink.attrs
+                        ? linkAttributesToString(fileLink.attrs)
+                        : '';
 
                     return (
                         selectedSize > 0
@@ -32,7 +41,7 @@ export const TuiFileLink = Extension.create({
                                   .setTextSelection(selection.to)
                                   .insertContent(whitespace)
                             : chain().insertContent(
-                                  `<a href="${fileLink.link}">${fileLink.name}</a>${whitespace}`,
+                                  `<a href="${fileLink.link}" ${attrs}>${fileLink.name}</a>${whitespace}`,
                               )
                     )
                         .setTextSelection(selection.to)