feat: add tooltips to formatting toolbar

dytab · Aug 26, 2024 · e511dbd · e511dbd
1 parent aadbb3e
commit e511dbd
Show file tree

Hide file tree

Showing 20 changed files with 330 additions and 142 deletions.
diff --git a/...oolbar/default-buttons/basic-text-style-button/bna-basic-text-style-button.component.html b/...oolbar/default-buttons/basic-text-style-button/bna-basic-text-style-button.component.html
@@ -1,15 +1,25 @@
-<button
-  type="button"
-  hlmBtn
-  size="icon"
-  variant="ghost"
-  class="w-[30px] h-[30px]"
-  [ngClass]="{
-    'bg-gray-900 text-gray-100': blockNoteAngularService.editor()
-      ? blockNoteAngularService.editor()!.getActiveStyles()[basicTextStyle()]
-      : false
-  }"
-  (click)="toggleStyle(basicTextStyle())"
->
-  <hlm-icon size="sm" [name]="icon()" />
-</button>
+<hlm-tooltip>
+  <button
+    type="button"
+    hlmBtn
+    size="icon"
+    variant="ghost"
+    class="w-[30px] h-[30px]"
+    hlmTooltipTrigger
+    [ngClass]="{
+      'bg-gray-900 text-gray-100': blockNoteAngularService.editor()
+        ? blockNoteAngularService.editor()!.getActiveStyles()[basicTextStyle()]
+        : false
+    }"
+    (click)="toggleStyle(basicTextStyle())"
+  >
+    <hlm-icon size="sm" [name]="icon()" />
+  </button>
+
+  <span *brnTooltipContent class="text-center">
+    <p>{{ basicTextStyleDict().tooltip }}</p>
+    <p class="text-xs">
+      {{ basicTextStyleDict().secondary_tooltip }}
+    </p>
+  </span>
+</hlm-tooltip>
diff --git a/...-toolbar/default-buttons/basic-text-style-button/bna-basic-text-style-button.component.ts b/...-toolbar/default-buttons/basic-text-style-button/bna-basic-text-style-button.component.ts
@@ -9,12 +9,13 @@ import {
   lucideUnderline,
 } from '@ng-icons/lucide';
 import { BlockNoteAngularService } from '../../../../services/block-note-angular.service';
-import { HlmButtonDirective, HlmIconComponent } from '../../../../ui';
+import { HlmButtonDirective, HlmIconComponent, HlmTooltipComponent, HlmTooltipTriggerDirective } from '../../../../ui';
 import {
   BlockNoteEditor,
   BlockSchema,
   InlineContentSchema,
 } from '@blocknote/core';
+import { BrnTooltipContentDirective } from '@spartan-ng/ui-tooltip-brain';
 
 const icons = {
   bold: 'lucideBold',
@@ -49,7 +50,14 @@ function checkBasicTextStyleInSchema<Style extends BasicTextStyle>(
 @Component({
   selector: 'bna-basic-text-style-button',
   standalone: true,
-  imports: [CommonModule, HlmButtonDirective, HlmIconComponent],
+  imports: [
+    CommonModule,
+    HlmButtonDirective,
+    HlmIconComponent,
+    HlmTooltipComponent,
+    HlmTooltipTriggerDirective,
+    BrnTooltipContentDirective,
+  ],
   templateUrl: './bna-basic-text-style-button.component.html',
   styleUrl: './bna-basic-text-style-button.component.css',
   providers: [
@@ -81,9 +89,16 @@ export class BnaBasicTextStyleButtonComponent {
       return '';
     }
     // Also don't show when none of the selected blocks have text content
-    return selectedBlocks.find((block) => block.content !== undefined) ? '': 'hidden';
+    return selectedBlocks.find((block) => block.content !== undefined)
+      ? ''
+      : 'hidden';
   });
 
+  basicTextStyleDict = computed(()=>{
+    const editor = this.blockNoteAngularService.editor()
+    return editor.dictionary.formatting_toolbar[this.basicTextStyle()];
+  })
+
   constructor(public blockNoteAngularService: BlockNoteAngularService) {}
 
   toggleStyle(style: BasicTextStyle) {

diff --git a/...ents/formatting-toolbar/default-buttons/color-style/bna-color-style-button.component.html b/...ents/formatting-toolbar/default-buttons/color-style/bna-color-style-button.component.html
@@ -1,9 +1,11 @@
+<hlm-tooltip>
 <button
   type="button"
   hlmBtn
   size="icon"
   variant="ghost"
   class="w-[30px] h-[30px]"
+  hlmTooltipTrigger
   [brnMenuTriggerFor]="menu"
 >
   <bna-color-icon
@@ -19,3 +21,8 @@
     </hlm-menu-group>
   </hlm-menu>
 </ng-template>
+
+<span *brnTooltipContent class="text-center">
+    <p>{{ dict.formatting_toolbar.colors.tooltip }}</p>
+  </span>
+</hlm-tooltip>
diff --git a/...onents/formatting-toolbar/default-buttons/color-style/bna-color-style-button.component.ts b/...onents/formatting-toolbar/default-buttons/color-style/bna-color-style-button.component.ts
@@ -7,7 +7,7 @@ import {
   HlmButtonDirective,
   HlmIconComponent,
   HlmMenuComponent,
-  HlmMenuGroupComponent,
+  HlmMenuGroupComponent, HlmTooltipComponent, HlmTooltipTriggerDirective
 } from '../../../../ui';
 import { BnaColorPickerComponent } from '../../../color-picker/bna-color-picker.component';
 import { BnaColorIconComponent } from '../../../color-picker/color-icon/bna-color-icon.component';
@@ -17,6 +17,7 @@ import {
   BlockSchema,
   InlineContentSchema,
 } from '@blocknote/core';
+import { BrnTooltipContentDirective } from '@spartan-ng/ui-tooltip-brain';
 
 function checkColorInSchema<Color extends 'text' | 'background'>(
   color: Color,
@@ -58,6 +59,9 @@ function checkColorInSchema<Color extends 'text' | 'background'>(
     HlmMenuGroupComponent,
     BnaColorIconComponent,
     BnaColorPickerComponent,
+    HlmTooltipComponent,
+    HlmTooltipTriggerDirective,
+    BrnTooltipContentDirective,
   ],
   templateUrl: './bna-color-style-button.component.html',
   styleUrl: './bna-color-style-button.component.css',
@@ -82,8 +86,8 @@ export class BnaColorStyleButtonComponent {
     return 'hidden';
   });
 
-
   options: ColorOptions = this.getOptions();
+  dict = this.blockNoteAngularService.editor().dictionary;
 
   constructor(private blockNoteAngularService: BlockNoteAngularService) {
     this.blockNoteAngularService.editor().onSelectionChange(() => {

diff --git a/.../components/formatting-toolbar/default-buttons/create-link/bna-create-link.component.html b/.../components/formatting-toolbar/default-buttons/create-link/bna-create-link.component.html
@@ -1,13 +1,21 @@
+<hlm-tooltip>
   <button
     type="button"
     hlmBtn
     size="icon"
     variant="ghost"
     class="w-[30px] h-[30px]"
     [brnMenuTriggerFor]="menu"
+    hlmTooltipTrigger
   >
     <hlm-icon size="sm" name="lucideLink" />
   </button>
+  <span *brnTooltipContent class="text-center">
+    <p>{{ dict.formatting_toolbar.link.tooltip }}</p>
+    <p class="text-xs">
+      {{ dict.formatting_toolbar.link.secondary_tooltip }}
+    </p>
+  </span>
 
   <ng-template #menu>
     <hlm-menu>
@@ -16,3 +24,4 @@
       </hlm-menu-group>
     </hlm-menu>
   </ng-template>
+</hlm-tooltip>
diff --git a/...ib/components/formatting-toolbar/default-buttons/create-link/bna-create-link.component.ts b/...ib/components/formatting-toolbar/default-buttons/create-link/bna-create-link.component.ts
@@ -8,10 +8,11 @@ import {
   HlmButtonDirective,
   HlmIconComponent,
   HlmMenuComponent,
-  HlmMenuGroupComponent,
+  HlmMenuGroupComponent, HlmTooltipComponent, HlmTooltipTriggerDirective
 } from '../../../../ui';
 import { BnaLinkFormComponent } from '../../../link-toolbar/link-form/bna-link-form.component';
 import { BlockNoteEditor, BlockSchema, StyleSchema } from '@blocknote/core';
+import { BrnTooltipContentDirective } from '@spartan-ng/ui-tooltip-brain';
 
 function checkLinkInSchema(
   editor: BlockNoteEditor<any, any, any>
@@ -43,6 +44,9 @@ function checkLinkInSchema(
     BrnMenuTriggerDirective,
     HlmMenuGroupComponent,
     BnaLinkFormComponent,
+    HlmTooltipTriggerDirective,
+    BrnTooltipContentDirective,
+    HlmTooltipComponent,
   ],
   templateUrl: './bna-create-link.component.html',
   styleUrl: './bna-create-link.component.css',
@@ -70,8 +74,10 @@ export class BnaCreateLinkComponent {
     return '';
   });
   initialValue = this.getInitialValue();
+  dict = this.blockNoteAngularService.editor().dictionary;
 
   constructor(private blockNoteAngularService: BlockNoteAngularService) {
+    console.log(this.dict);
     this.blockNoteAngularService.editor().onSelectionChange(() => {
       this.initialValue = this.getInitialValue();
     });

diff --git a/...atting-toolbar/default-buttons/file-caption-button/bna-file-caption-button.component.html b/...atting-toolbar/default-buttons/file-caption-button/bna-file-caption-button.component.html
@@ -1,31 +1,37 @@
-<button
-  type="button"
-  hlmBtn
-  size="icon"
-  variant="ghost"
-  class="w-[30px] h-[30px]"
-  [brnMenuTriggerFor]="menu"
->
-  <hlm-icon  size="sm" name="lucideTextCursorInput"/>
-</button>
+<hlm-tooltip>
+  <button
+    type="button"
+    hlmBtn
+    size="icon"
+    variant="ghost"
+    class="w-[30px] h-[30px]"
+    [brnMenuTriggerFor]="menu"
+    hlmTooltipTrigger
+  >
+    <hlm-icon size="sm" name="lucideTextCursorInput" />
+  </button>
+  <span *brnTooltipContent class="text-center">
+    <p>{{ dict.formatting_toolbar.file_caption.tooltip }}</p>
+  </span>
 
-<ng-template #menu>
-  <hlm-menu>
-    <hlm-menu-group class="px-2">
-      <form (ngSubmit)="submit()" [formGroup]="form">
-        <div class="flex gap-2 justify-center items-center min-w-[350px]">
-          <div class="flex justify-center items-center w-[20px] h-[20px]">
-            <hlm-icon size="sm" name="lucideTextCursorInput" />
+  <ng-template #menu>
+    <hlm-menu>
+      <hlm-menu-group class="px-2">
+        <form (ngSubmit)="submit()" [formGroup]="form">
+          <div class="flex gap-2 justify-center items-center min-w-[350px]">
+            <div class="flex justify-center items-center w-[20px] h-[20px]">
+              <hlm-icon size="sm" name="lucideTextCursorInput" />
+            </div>
+            <input
+              class="bg-background w-full h-[32px] outline-none placeholder:italic placeholder:text-muted-foreground placeholder:font-normal"
+              type="text"
+              placeholder="Edit caption"
+              [formControl]="form.controls.caption"
+            />
           </div>
-          <input
-            class="bg-background w-full h-[32px] outline-none placeholder:italic placeholder:text-muted-foreground placeholder:font-normal"
-            type="text"
-            placeholder="Edit caption"
-            [formControl]="form.controls.caption"
-          />
-        </div>
-        <button class="hidden">Save</button>
-      </form>
-    </hlm-menu-group>
-  </hlm-menu>
-</ng-template>
+          <button class="hidden">Save</button>
+        </form>
+      </hlm-menu-group>
+    </hlm-menu>
+  </ng-template>
+</hlm-tooltip>
diff --git a/...rmatting-toolbar/default-buttons/file-caption-button/bna-file-caption-button.component.ts b/...rmatting-toolbar/default-buttons/file-caption-button/bna-file-caption-button.component.ts
@@ -1,21 +1,26 @@
 import { Component, computed, effect } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { HlmButtonDirective } from '../../../../ui/ui-button-helm/hlm-button.directive';
-import { HlmIconComponent } from '../../../../ui/ui-icon-helm/hlm-icon.component';
+import {
+  HlmButtonDirective,
+  HlmIconComponent,
+  HlmMenuComponent,
+  HlmMenuGroupComponent,
+  HlmTooltipComponent,
+  HlmTooltipTriggerDirective,
+} from '../../../../ui';
 import { provideIcons } from '@ng-icons/core';
 import { lucideTextCursorInput } from '@ng-icons/lucide';
 import { BlockNoteAngularService } from '../../../../services/block-note-angular.service';
 import { showFileBlock } from '../../../../util/show-file-block.util';
 import { fileBlock } from '../../../../util/file-block.util';
-import { HlmMenuComponent } from '../../../../ui/ui-menu-helm/hlm-menu.component';
 import { BrnMenuTriggerDirective } from '@spartan-ng/ui-menu-brain';
-import { HlmMenuGroupComponent } from '../../../../ui/ui-menu-helm/hlm-menu-group.component';
 import {
   NonNullableFormBuilder,
   ReactiveFormsModule,
   Validators,
 } from '@angular/forms';
 import { checkBlockIsFileBlock } from '@blocknote/core';
+import { BrnTooltipContentDirective } from '@spartan-ng/ui-tooltip-brain';
 
 @Component({
   selector: 'bna-file-caption-button',
@@ -28,6 +33,9 @@ import { checkBlockIsFileBlock } from '@blocknote/core';
     BrnMenuTriggerDirective,
     HlmMenuGroupComponent,
     ReactiveFormsModule,
+    HlmTooltipComponent,
+    HlmTooltipTriggerDirective,
+    BrnTooltipContentDirective,
   ],
   templateUrl: './bna-file-caption-button.component.html',
   styleUrl: './bna-file-caption-button.component.css',
@@ -52,6 +60,7 @@ export class BnaFileCaptionButtonComponent {
   });
 
   form = this.formBuilder.group({ caption: ['', Validators.required] });
+  dict = this.blockNoteAngularService.editor().dictionary;
 
   constructor(
     private blockNoteAngularService: BlockNoteAngularService,

diff --git a/...rmatting-toolbar/default-buttons/file-delete-button/bna-file-delete-button.component.html b/...rmatting-toolbar/default-buttons/file-delete-button/bna-file-delete-button.component.html
@@ -1,11 +1,16 @@
+<hlm-tooltip>
   <button
     type="button"
     hlmBtn
     size="icon"
     variant="ghost"
     class="w-[30px] h-[30px]"
+    hlmTooltipTrigger
     (click)="deleteFile()"
   >
     <hlm-icon size="sm" name="lucideTrash" />
   </button>
-
+  <span *brnTooltipContent class="text-center">
+    <p>{{ tooltip() }}</p>
+  </span>
+</hlm-tooltip>
diff --git a/...formatting-toolbar/default-buttons/file-delete-button/bna-file-delete-button.component.ts b/...formatting-toolbar/default-buttons/file-delete-button/bna-file-delete-button.component.ts
@@ -7,11 +7,23 @@ import { HlmButtonDirective } from '../../../../ui/ui-button-helm/hlm-button.dir
 import { HlmIconComponent } from '../../../../ui/ui-icon-helm/hlm-icon.component';
 import { fileBlock } from '../../../../util/file-block.util';
 import { showFileBlock } from '../../../../util/show-file-block.util';
+import {
+  HlmTooltipComponent,
+  HlmTooltipTriggerDirective,
+} from '../../../../ui';
+import { BrnTooltipContentDirective } from '@spartan-ng/ui-tooltip-brain';
 
 @Component({
   selector: 'bna-file-delete-button',
   standalone: true,
-  imports: [CommonModule, HlmButtonDirective, HlmIconComponent],
+  imports: [
+    CommonModule,
+    HlmButtonDirective,
+    HlmIconComponent,
+    HlmTooltipComponent,
+    HlmTooltipTriggerDirective,
+    BrnTooltipContentDirective,
+  ],
   templateUrl: './bna-file-delete-button.component.html',
   styleUrl: './bna-file-delete-button.component.css',
   providers: [provideIcons({ lucideTrash })],
@@ -33,6 +45,14 @@ export class BnaFileDeleteButtonComponent {
       this.fileBlock()
     );
   });
+  tooltip = computed(() => {
+    const fileBlock = this.fileBlock();
+    if (!fileBlock) {
+      return '';
+    }
+    return this.blockNoteAngularService.editor().dictionary.formatting_toolbar
+      .file_delete.tooltip[fileBlock.type];
+  });
 
   constructor(private blockNoteAngularService: BlockNoteAngularService) {}
 

diff --git a/...ting-toolbar/default-buttons/file-download-button/bna-file-download-button.component.html b/...ting-toolbar/default-buttons/file-download-button/bna-file-download-button.component.html
@@ -1,10 +1,16 @@
+<hlm-tooltip>
   <button
     type="button"
     hlmBtn
     size="icon"
     variant="ghost"
     class="w-[30px] h-[30px]"
     (click)="downloadFile()"
+    hlmTooltipTrigger
   >
     <hlm-icon size="sm" name="lucideDownload" />
   </button>
+  <span *brnTooltipContent class="text-center">
+    <p>{{ tooltip() }}</p>
+  </span>
+</hlm-tooltip>