feat(addon-editor): add anchor extension

taiga-family · Oct 31, 2022 · 8093ac3 · 8093ac3
1 parent 76ef8aa
commit 8093ac3
Show file tree

Hide file tree

Showing 22 changed files with 119 additions and 41 deletions.
diff --git a/projects/addon-editor/components/edit-link/edit-link.component.ts b/projects/addon-editor/components/edit-link/edit-link.component.ts
@@ -8,7 +8,8 @@ import {
     Input,
     Output,
 } from '@angular/core';
-import {tuiIsElement} from '@taiga-ui/cdk';
+import {TUI_EDITOR_LINK_TEXTS} from '@taiga-ui/addon-editor/tokens';
+import {tuiDefaultProp, TuiInjectionTokenType, tuiIsElement} from '@taiga-ui/cdk';
 
 const MAX_LENGTH = 60;
 const START = MAX_LENGTH - 20;
@@ -26,11 +27,14 @@ type TuiLinkPrefix = typeof HASH_PREFIX | typeof HTTPS_PREFIX | typeof HTTP_PREF
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TuiEditLinkComponent {
-    @Input()
-    prefix: TuiLinkPrefix = this.makeDefaultPrefix();
+    private isOnlyAnchorMode: boolean = this.detectAnchorMode();
 
     @Input()
-    isOnlyAnchorMode = this.detectAnchorMode();
+    @tuiDefaultProp()
+    set anchorMode(mode: boolean) {
+        this.isOnlyAnchorMode = mode;
+        this.prefix = mode ? HASH_PREFIX : this.makeDefaultPrefix();
+    }
 
     @Output()
     readonly addLink = new EventEmitter<string>();
@@ -42,11 +46,23 @@ export class TuiEditLinkComponent {
 
     edit = !this.url;
 
+    prefix: TuiLinkPrefix = this.makeDefaultPrefix();
+
     constructor(
         @Inject(DOCUMENT)
         private readonly documentRef: Document,
+        @Inject(TUI_EDITOR_LINK_TEXTS)
+        readonly texts$: TuiInjectionTokenType<typeof TUI_EDITOR_LINK_TEXTS>,
     ) {}
 
+    get anchorMode(): boolean {
+        return this.isOnlyAnchorMode;
+    }
+
+    get prefixIsHashMode(): boolean {
+        return this.prefix === HASH_PREFIX;
+    }
+
     get hasUrl(): boolean {
         return !!this.url;
     }
@@ -119,14 +135,19 @@ export class TuiEditLinkComponent {
         const a = this.getAnchorElement();
 
         if (a) {
-            return !a.href && a.getAttribute(`id`) ? HASH_PREFIX : HTTP_PREFIX;
+            return (!a.getAttribute(`href`) && a.getAttribute(`id`)) ||
+                a.getAttribute(`href`)?.startsWith(HASH_PREFIX)
+                ? HASH_PREFIX
+                : HTTP_PREFIX;
         }
 
         return HTTP_PREFIX;
     }
 
     private detectAnchorMode(): boolean {
-        return this.getAnchorElement()?.href ? false : this.href.startsWith(HASH_PREFIX);
+        const a = this.getAnchorElement();
+
+        return !a?.href && !!a?.getAttribute(`id`);
     }
 
     private getFocusedParentElement(): HTMLElement | null {
@@ -138,10 +159,6 @@ export class TuiEditLinkComponent {
     }
 
     private getHrefOrAnchorId(): string {
-        if (!this.getFocusedParentElement()) {
-            return ``;
-        }
-
         const a = this.getAnchorElement();
 
         return a

diff --git a/projects/addon-editor/components/edit-link/edit-link.template.html b/projects/addon-editor/components/edit-link/edit-link.template.html
@@ -1,10 +1,7 @@
 <ng-container *ngIf="edit; else view">
-    <label
-        *tuiLet="prefix === '#' as prefixIsHashMode"
-        class="t-label"
-    >
+    <label class="t-label">
         <div class="t-label-properties">
-            <ng-container *ngIf="isOnlyAnchorMode; else fullOptions">Edit anchor</ng-container>
+            <ng-container *ngIf="anchorMode; else fullOptions">Edit anchor</ng-container>
             <ng-template #fullOptions>
                 <div [class.t-property_inactive]="prefixIsHashMode">URL</div>
                 <tui-toggle
@@ -27,7 +24,9 @@
                 (keydown.prevent.enter)="onSave()"
                 (keydown.backspace)="onBackspace()"
             >
-                {{ prefix === '#' ? 'anchor name ([a-zA-Z])' : 'example.com' }}
+                <ng-container *ngIf="texts$ | async as text">
+                    {{ prefixIsHashMode ? text.anchorExample : text.urlExample }}
+                </ng-container>
             </tui-input-inline>
         </div>
     </label>
@@ -56,7 +55,7 @@
         class="t-link"
         [href]="href"
     >
-        {{ isOnlyAnchorMode ? '#' : '' }}{{ shortUrl }}
+        {{ anchorMode ? '#' : '' }}{{ shortUrl }}
     </a>
     <button
         tuiIconButton

diff --git a/projects/addon-editor/components/editor-socket/editor-socket.component.less b/projects/addon-editor/components/editor-socket/editor-socket.component.less
@@ -34,16 +34,18 @@
         }
     }
 
-    a[data-type='jump-anchor'] {
-        text-decoration: underline;
-        text-decoration-color: var(--tui-link);
+    .ProseMirror {
+        a[data-type='jump-anchor'] {
+            text-decoration: underline;
+            text-decoration-color: var(--tui-link);
 
-        &:before {
-            content: '#';
-        }
+            &:before {
+                content: '#';
+            }
 
-        &:hover {
-            color: var(--tui-link);
+            &:hover {
+                color: var(--tui-link);
+            }
         }
     }
 }

diff --git a/projects/addon-editor/components/editor-socket/editor-socket.component.ts b/projects/addon-editor/components/editor-socket/editor-socket.component.ts
@@ -13,6 +13,7 @@ import {
     ViewEncapsulation,
 } from '@angular/core';
 import {TuiTiptapEditorDirective} from '@taiga-ui/addon-editor/directives/tiptap-editor';
+import {tuiIsElement} from '@taiga-ui/cdk';
 import {TUI_SANITIZER} from '@taiga-ui/core';
 
 @Component({
@@ -61,18 +62,17 @@ export class TuiEditorSocketComponent {
      */
     @HostListener(`click`, [`$event`])
     click(event: Event): void {
-        if (this.editor) {
+        if (this.editor || !tuiIsElement(event.target)) {
             return;
         }
 
-        const href =
-            (event.target as HTMLElement)?.closest(`a`)?.getAttribute(`href`) ?? ``;
+        const href = event.target?.closest(`a`)?.getAttribute(`href`) || ``;
 
-        if (href.startsWith(`#`)) {
-            // @note: to allow the browser to apply the animation again
-            this.document.location.hash = ``;
-            this.document.location.hash = href.replace(`#`, ``);
-            event.preventDefault();
+        if (!href.startsWith(`#`)) {
+            return;
         }
+
+        this.document.location.hash = href.replace(`#`, ``);
+        event.preventDefault();
     }
 }
diff --git a/projects/addon-editor/components/editor/editor.component.html b/projects/addon-editor/components/editor/editor.component.html
@@ -57,8 +57,8 @@
         <ng-template #dropdown>
             <tui-edit-link
                 #link
-                (addLink)="link.isOnlyAnchorMode ? addAnchor($event) : addLink($event)"
-                (removeLink)="link.isOnlyAnchorMode ? removeAnchor() : removeLink()"
+                (addLink)="link.anchorMode ? addAnchor($event) : addLink($event)"
+                (removeLink)="link.anchorMode ? removeAnchor() : removeLink()"
             ></tui-edit-link>
         </ng-template>
 

diff --git a/projects/addon-editor/components/toolbar/toolbar.template.html b/projects/addon-editor/components/toolbar/toolbar.template.html
@@ -141,7 +141,7 @@
                 tuiIconButton
                 type="button"
                 size="s"
-                icon="tuiIconBookmarkLarge"
+                icon="tuiIconAnchorLarge"
                 tuiHintDirection="top-left"
                 appearance="icon"
                 [focusable]="false"
@@ -151,8 +151,7 @@
             ></button>
             <ng-template #anchorDropdown>
                 <tui-edit-link
-                    prefix="#"
-                    [isOnlyAnchorMode]="true"
+                    [anchorMode]="true"
                     (addLink)="setAnchor(anchor, $event)"
                     (removeLink)="removeAnchor()"
                 ></tui-edit-link>

diff --git a/projects/addon-editor/directives/tiptap-editor/tiptap-editor.service.ts b/projects/addon-editor/directives/tiptap-editor/tiptap-editor.service.ts
@@ -317,9 +317,7 @@ export class TuiTiptapEditorService extends AbstractTuiEditor {
     }
 
     setAnchor(anchor: string): void {
-        const id = anchor.replace(`#`, ``);
-
-        this.editor.commands.setAnchor(id);
+        this.editor.commands.setAnchor(anchor.replace(`#`, ``));
     }
 
     removeAnchor(): void {

diff --git a/projects/addon-editor/tokens/i18n.ts b/projects/addon-editor/tokens/i18n.ts
@@ -38,6 +38,13 @@ export const TUI_EDITOR_TABLE_COMMANDS = new InjectionToken(
     },
 );
 
+export const TUI_EDITOR_LINK_TEXTS = new InjectionToken(
+    `[TUI_EDITOR_LINK_TEXTS]: tui-editor-toolbar edit-link i18n`,
+    {
+        factory: tuiExtractI18n(`editorEditLink`),
+    },
+);
+
 export const TUI_EDITOR_CODE_OPTIONS = new InjectionToken(
     `[TUI_EDITOR_CODE_OPTIONS]: tui-editor-toolbar codes options`,
     {

diff --git a/projects/i18n/interfaces/language.ts b/projects/i18n/interfaces/language.ts
@@ -157,6 +157,10 @@ export interface TuiLanguageEditor {
         setDetails: string;
         removeDetails: string;
     };
+    editorEditLink: {
+        urlExample: string;
+        anchorExample: string;
+    };
     editorTableCommands: [[string, string], [string, string], [string, string]];
     editorCodeOptions: [string, string];
     editorFontOptions: {

diff --git a/projects/i18n/languages/chinese/addon-editor.ts b/projects/i18n/languages/chinese/addon-editor.ts
@@ -46,6 +46,10 @@ export const TUI_CHINESE_LANGUAGE_ADDON_EDITOR: TuiLanguageEditor = {
         setDetails: `详细信息`,
         removeDetails: `删除详细信息`,
     },
+    editorEditLink: {
+        urlExample: `example.com`,
+        anchorExample: `anchor`,
+    },
     editorTableCommands: [
         [`在前面插入列`, `在后面插入列`],
         [`在前面插入行`, `在后面插入行`],

diff --git a/projects/i18n/languages/dutch/addon-editor.ts b/projects/i18n/languages/dutch/addon-editor.ts
@@ -46,6 +46,10 @@ export const TUI_DUTCH_LANGUAGE_ADDON_EDITOR: TuiLanguageEditor = {
         setDetails: `Details`,
         removeDetails: `Remove details`,
     },
+    editorEditLink: {
+        urlExample: `example.com`,
+        anchorExample: `anchor`,
+    },
     editorTableCommands: [
         [`Insert column before`, `Insert column after`],
         [`Insert row before`, `Insert row after`],

diff --git a/projects/i18n/languages/english/addon-editor.ts b/projects/i18n/languages/english/addon-editor.ts
@@ -46,6 +46,10 @@ export const TUI_ENGLISH_LANGUAGE_ADDON_EDITOR: TuiLanguageEditor = {
         setDetails: `Details`,
         removeDetails: `Remove details`,
     },
+    editorEditLink: {
+        urlExample: `example.com`,
+        anchorExample: `anchor`,
+    },
     editorTableCommands: [
         [`Insert column before`, `Insert column after`],
         [`Insert row before`, `Insert row after`],

diff --git a/projects/i18n/languages/french/addon-editor.ts b/projects/i18n/languages/french/addon-editor.ts
@@ -46,6 +46,10 @@ export const TUI_FRENCH_LANGUAGE_ADDON_EDITOR: TuiLanguageEditor = {
         setDetails: `Details`,
         removeDetails: `Remove details`,
     },
+    editorEditLink: {
+        urlExample: `example.com`,
+        anchorExample: `anchor`,
+    },
     editorTableCommands: [
         [`Insert column before`, `Insert column after`],
         [`Insert row before`, `Insert row after`],

diff --git a/projects/i18n/languages/german/addon-editor.ts b/projects/i18n/languages/german/addon-editor.ts
@@ -46,6 +46,10 @@ export const TUI_GERMAN_LANGUAGE_ADDON_EDITOR: TuiLanguageEditor = {
         setDetails: `Details`,
         removeDetails: `Remove details`,
     },
+    editorEditLink: {
+        urlExample: `example.com`,
+        anchorExample: `anchor`,
+    },
     editorTableCommands: [
         [`Insert column before`, `Insert column after`],
         [`Insert row before`, `Insert row after`],

diff --git a/projects/i18n/languages/italian/addon-editor.ts b/projects/i18n/languages/italian/addon-editor.ts
@@ -46,6 +46,10 @@ export const TUI_ITALIAN_LANGUAGE_ADDON_EDITOR: TuiLanguageEditor = {
         setDetails: `Details`,
         removeDetails: `Remove details`,
     },
+    editorEditLink: {
+        urlExample: `example.com`,
+        anchorExample: `anchor`,
+    },
     editorTableCommands: [
         [`Inserisci colonna prima`, `Inserisci colonna dopo`],
         [`Inserisci riga prima`, `Inserisci riga dopo`],

diff --git a/projects/i18n/languages/polish/addon-editor.ts b/projects/i18n/languages/polish/addon-editor.ts
@@ -46,6 +46,10 @@ export const TUI_POLISH_LANGUAGE_ADDON_EDITOR: TuiLanguageEditor = {
         setDetails: `Details`,
         removeDetails: `Remove details`,
     },
+    editorEditLink: {
+        urlExample: `example.com`,
+        anchorExample: `anchor`,
+    },
     editorTableCommands: [
         [`Wstaw kolumnę przed`, `Wstaw kolumnę po`],
         [`Wstaw wiersz przed`, `Wstaw wiersz po`],

diff --git a/projects/i18n/languages/portuguese/addon-editor.ts b/projects/i18n/languages/portuguese/addon-editor.ts
@@ -46,6 +46,10 @@ export const TUI_PORTUGUESE_LANGUAGE_ADDON_EDITOR: TuiLanguageEditor = {
         setDetails: `Details`,
         removeDetails: `Remove details`,
     },
+    editorEditLink: {
+        urlExample: `example.com`,
+        anchorExample: `anchor`,
+    },
     editorTableCommands: [
         [`Insert column before`, `Insert column after`],
         [`Insert row before`, `Insert row after`],

diff --git a/projects/i18n/languages/russian/addon-editor.ts b/projects/i18n/languages/russian/addon-editor.ts
@@ -46,6 +46,10 @@ export const TUI_RUSSIAN_LANGUAGE_ADDON_EDITOR: TuiLanguageEditor = {
         setDetails: `Аккордеон`,
         removeDetails: `Удалить аккордеон`,
     },
+    editorEditLink: {
+        urlExample: `example.com`,
+        anchorExample: `якорь`,
+    },
     editorTableCommands: [
         [`Добавить столбец слева`, `Добавить столбец справа`],
         [`Добавить строку сверху`, `Добавить строку снизу`],

diff --git a/projects/i18n/languages/spanish/addon-editor.ts b/projects/i18n/languages/spanish/addon-editor.ts
@@ -46,6 +46,10 @@ export const TUI_SPANISH_LANGUAGE_ADDON_EDITOR: TuiLanguageEditor = {
         setDetails: `Details`,
         removeDetails: `Remove details`,
     },
+    editorEditLink: {
+        urlExample: `example.com`,
+        anchorExample: `anchor`,
+    },
     editorTableCommands: [
         [`Insert column before`, `Insert column after`],
         [`Insert row before`, `Insert row after`],

diff --git a/projects/i18n/languages/turkish/addon-editor.ts b/projects/i18n/languages/turkish/addon-editor.ts
@@ -46,6 +46,10 @@ export const TUI_TURKISH_LANGUAGE_ADDON_EDITOR: TuiLanguageEditor = {
         setDetails: `Details`,
         removeDetails: `Remove details`,
     },
+    editorEditLink: {
+        urlExample: `example.com`,
+        anchorExample: `anchor`,
+    },
     editorTableCommands: [
         [`Insert column before`, `Insert column after`],
         [`Insert row before`, `Insert row after`],

diff --git a/projects/i18n/languages/ukrainian/addon-editor.ts b/projects/i18n/languages/ukrainian/addon-editor.ts
@@ -46,6 +46,10 @@ export const TUI_UKRAINIAN_LANGUAGE_ADDON_EDITOR: TuiLanguageEditor = {
         setDetails: `Details`,
         removeDetails: `Remove details`,
     },
+    editorEditLink: {
+        urlExample: `example.com`,
+        anchorExample: `anchor`,
+    },
     editorTableCommands: [
         [`Insert column before`, `Insert column after`],
         [`Insert row before`, `Insert row after`],

diff --git a/projects/i18n/languages/vietnamese/addon-editor.ts b/projects/i18n/languages/vietnamese/addon-editor.ts
@@ -46,6 +46,10 @@ export const TUI_VIETNAMESE_LANGUAGE_ADDON_EDITOR: TuiLanguageEditor = {
         setDetails: `Chi tiết`,
         removeDetails: `Hủy chi tiết`,
     },
+    editorEditLink: {
+        urlExample: `example.com`,
+        anchorExample: `anchor`,
+    },
     editorTableCommands: [
         [`Chèn cột trước`, `Chèn cột sau`],
         [`Chèn hàng trước`, `Chèn hàng sau`],