Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update to the tab navigation of the editor #4206

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Update to the tab navigation of the editor #4206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
10013ac
Update to the tab navigation of the editor
reiterl Oct 2, 2024
52029e0
Allow navi to undo and redo too
reiterl Oct 2, 2024
8a40bab
Merge branch 'main' into 4150-editor-tab-navigation
reiterl Oct 2, 2024
4071a77
Merge branch 'main' into 4150-editor-tab-navigation
reiterl Oct 17, 2024
09b3480
Draft version of the tab navigation with directive
reiterl Oct 17, 2024
cda0e39
Rm spec file and update way to set tabIndex
reiterl Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 107 additions & 7 deletions client/src/app/ui/modules/editor/components/editor/editor.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,43 @@
<div class="editor-menu">
<div class="button-group">
<button
#btn
class="text"
mat-ripple
osTabNavigation
type="button"
[buttonList]="buttonElements"
[ngClass]="{ active: isGodButtonActive }"
(click)="godButtonAction()"
>
{{ godButtonText }}
</button>

<button class="more" mat-ripple type="button" [matMenuTriggerFor]="formatMenu">
<button
#btn
class="more"
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[matMenuTriggerFor]="formatMenu"
>
<mat-icon>arrow_drop_down</mat-icon>
</button>
</div>

<mat-menu #formatMenu="matMenu">
<button mat-menu-item translate [matMenuTriggerFor]="headingMenu">Headings</button>
<button mat-menu-item translate [matMenuTriggerFor]="textAlignMenu">Align</button>
<button mat-menu-item translate [matMenuTriggerFor]="inlineMenu">Inline</button>
<button mat-menu-item tabindex="-1" translate [matMenuTriggerFor]="headingMenu">Headings</button>
<button mat-menu-item tabindex="-1" translate [matMenuTriggerFor]="textAlignMenu">Align</button>
<button mat-menu-item tabindex="-1" translate [matMenuTriggerFor]="inlineMenu">Inline</button>
</mat-menu>

<mat-menu #headingMenu="matMenu">
@for (level of headingLevels; track level) {
<button
mat-menu-item
tabindex="-1"
type="button"
[ngClass]="{ active: editor.isActive('heading', { level }) }"
(click)="editor.chain().focus().toggleHeading({ level }).run()"
Expand All @@ -44,6 +57,7 @@
<mat-menu #textAlignMenu="matMenu">
<button
mat-menu-item
tabindex="-1"
type="button"
[disabled]="editor.isActive({ textAlign: 'left' })"
[ngClass]="{ active: editor.isActive({ textAlign: 'left' }) }"
Expand All @@ -54,6 +68,7 @@
</button>
<button
mat-menu-item
tabindex="-1"
type="button"
[disabled]="editor.isActive({ textAlign: 'center' })"
[ngClass]="{ active: editor.isActive({ textAlign: 'center' }) }"
Expand All @@ -64,6 +79,7 @@
</button>
<button
mat-menu-item
tabindex="-1"
type="button"
[disabled]="editor.isActive({ textAlign: 'right' })"
[ngClass]="{ active: editor.isActive({ textAlign: 'right' }) }"
Expand All @@ -74,6 +90,7 @@
</button>
<button
mat-menu-item
tabindex="-1"
type="button"
[disabled]="editor.isActive({ textAlign: 'justify' })"
[ngClass]="{ active: editor.isActive({ textAlign: 'justify' }) }"
Expand All @@ -87,6 +104,7 @@
<mat-menu #inlineMenu="matMenu">
<button
mat-menu-item
tabindex="-1"
type="button"
[ngClass]="{ active: editor.isActive('subscript') }"
(click)="editor.chain().focus().toggleSubscript().run()"
Expand All @@ -97,6 +115,7 @@

<button
mat-menu-item
tabindex="-1"
type="button"
[ngClass]="{ active: editor.isActive('superscript') }"
(click)="editor.chain().focus().toggleSuperscript().run()"
Expand All @@ -108,35 +127,51 @@

<div class="button-group">
<button
#btn
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[matTooltip]="'Bold' | translate"
[ngClass]="{ active: editor.isActive('bold') }"
(click)="editor.chain().focus().toggleBold().run()"
>
<mat-icon>format_bold</mat-icon>
</button>
<button
#btn
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[matTooltip]="'Italic' | translate"
[ngClass]="{ active: editor.isActive('italic') }"
(click)="editor.chain().focus().toggleItalic().run()"
>
<mat-icon>format_italic</mat-icon>
</button>
<button
#btn
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[matTooltip]="'Underline' | translate"
[ngClass]="{ active: editor.isActive('underline') }"
(click)="editor.chain().focus().toggleUnderline().run()"
>
<mat-icon>format_underline</mat-icon>
</button>
<button
#btn
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[matTooltip]="'Strikethrough' | translate"
[ngClass]="{ active: editor.isActive('strike') }"
(click)="editor.chain().focus().toggleStrike().run()"
Expand All @@ -147,8 +182,12 @@

<div class="button-group">
<button
#btn
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[matTooltip]="'Text color' | translate"
[ngClass]="{ active: editor.isActive('textStyle') }"
[ngStyle]="{
Expand All @@ -158,10 +197,20 @@
>
<mat-icon>format_color_text</mat-icon>
</button>
<button class="more color-selection" mat-ripple type="button" (click)="updateColorSets()">
<button
#btn
class="more color-selection"
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
(click)="updateColorSets()"
>
<mat-icon>arrow_drop_down</mat-icon>
<input
list="text-colors"
tabindex="-1"
type="color"
[value]="editor.getAttributes('textStyle')['color']"
(change)="updateFontColor($event)"
Expand All @@ -170,28 +219,46 @@
</div>
<div class="button-group">
<button
#btn
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[matTooltip]="'Background color' | translate"
[ngClass]="{ active: editor.isActive('highlight') }"
[ngStyle]="{ color: editor.getAttributes('highlight')['color'] }"
(click)="updateColorSets(); editor.chain().focus().toggleHighlight().run()"
>
<mat-icon>format_color_fill</mat-icon>
</button>
<button class="more color-selection" mat-ripple type="button" (click)="updateColorSets()">
<button
#btn
class="more color-selection"
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
(click)="updateColorSets()"
>
<mat-icon>arrow_drop_down</mat-icon>
<input
list="background-colors"
tabindex="-1"
type="color"
[value]="editor.getAttributes('highlight')['color']"
(change)="updateHighlightColor($event)"
/>
</button>
</div>
<button
#btn
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[matTooltip]="'Clear formatting' | translate"
(click)="clearSelectedFormat()"
>
Expand All @@ -200,19 +267,27 @@

<div class="button-group">
<button
#btn
mat-ripple
matTooltipPosition="above"
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[matTooltip]="'Bullet list' | translate"
[ngClass]="{ active: editor.isActive('bulletList') }"
(click)="editor.chain().focus().toggleBulletList().run()"
>
<mat-icon>format_list_bulleted</mat-icon>
</button>
<button
#btn
mat-ripple
matTooltipPosition="above"
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[matTooltip]="'Numbered list' | translate"
[ngClass]="{ active: editor.isActive('orderedList') }"
(click)="editor.chain().focus().toggleOrderedList().run()"
Expand All @@ -223,8 +298,12 @@

<div class="button-group">
<button
#btn
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[matTooltip]="'Insert/edit link' | translate"
[ngClass]="{ active: editor.isActive('link') }"
(click)="setLinkDialog()"
Expand All @@ -233,8 +312,12 @@
</button>

<button
#btn
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[matTooltip]="'Insert/edit image' | translate"
[ngClass]="{ active: editor.isActive('image') }"
(click)="setImageDialog()"
Expand All @@ -245,8 +328,12 @@

<div class="button-group">
<button
#btn
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[disabled]="!editor.can().undo()"
[matTooltip]="'Undo' | translate"
(click)="editor.chain().focus().undo().run()"
Expand All @@ -255,8 +342,12 @@
</button>

<button
#btn
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[disabled]="!editor.can().redo()"
[matTooltip]="'Redo' | translate"
(click)="editor.chain().focus().redo().run()"
Expand All @@ -265,7 +356,16 @@
</button>
</div>

<button mat-ripple type="button" [matTooltip]="'Source code' | translate" (click)="editCode()">
<button
#btn
mat-ripple
osTabNavigation
tabindex="-1"
type="button"
[buttonList]="buttonElements"
[matTooltip]="'Source code' | translate"
(click)="editCode()"
>
<mat-icon>code</mat-icon>
</button>
</div>
Expand Down
45 changes: 44 additions & 1 deletion client/src/app/ui/modules/editor/components/editor/editor.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ import {
Input,
OnDestroy,
Output,
ViewChild
QueryList,
ViewChild,
ViewChildren
} from '@angular/core';
import { NG_VALUE_ACCESSOR, UntypedFormControl } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
Expand Down Expand Up @@ -97,6 +99,9 @@ const DEFAULT_COLOR_PALETE = [
export class EditorComponent extends BaseFormControlComponent<string> implements AfterViewInit, OnDestroy {
@ViewChild(`editorEl`) private editorEl: ElementRef;

@ViewChildren(`btn`)
public buttonElements!: QueryList<ElementRef>;

@Input()
public customSettings: object = {};

Expand Down Expand Up @@ -420,6 +425,44 @@ export class EditorComponent extends BaseFormControlComponent<string> implements
});
}

public navigate(event: KeyboardEvent, currentIndex: number): void {
const key = event.key;
let newIndex = currentIndex;
const buttons = this.buttonElements.toArray();

switch (key) {
case `ArrowRight`:
if (currentIndex < this.buttonElements.length - 1) {
newIndex++;
}
while (buttons[newIndex].nativeElement.disabled) {
newIndex++;
}
break;
case `ArrowLeft`:
if (currentIndex > 0) {
newIndex--;
}
while (buttons[newIndex].nativeElement.disabled) {
newIndex--;
}
break;
default:
return;
}

const buttonToFocus = buttons[newIndex];

if (buttonToFocus) {
(buttonToFocus.nativeElement as HTMLElement).focus();
}

for (const button of buttons) {
(button.nativeElement as HTMLElement).setAttribute(`tabindex`, `-1`);
}
(buttonToFocus.nativeElement as HTMLElement).setAttribute(`tabindex`, `0`);
}

protected createForm(): UntypedFormControl {
return this.fb.control([``]);
}
Expand Down
Loading